/* ============================================================================
   MAPA DE RISCO TRABALHISTA — RZ Advocacia
   Folha de estilo única.

   IDENTIDADE REAL DA MARCA, de duas fontes conferidas:
   1. Logotipo oficial (assets/img/logo-rz.png): marinho #0B385B no lettering
      e cinza #929497 no monograma RZ.
   2. Comunicação dela no Instagram @robertazoboli.advogada: vinho #6E140E
      sobre fundo escuro, serifa de alto contraste em branco. Cor extraída
      dos próprios posts, não escolhida por nós.
   O vinho comanda a interface porque é o que o público dela já reconhece.
   Nenhuma cor foi inventada. Fora da paleta dela só existem as duas cores
   restantes da escala de risco, que sinalizam gravidade e não decoram.
   ============================================================================ */

:root {
  /* --- Marca -------------------------------------------------------------
     Duas fontes, e as duas são reais:
     1. O LOGOTIPO é marinho #0B385B e cinza #929497.
     2. A COMUNICAÇÃO dela no Instagram (@robertazoboli.advogada) é
        vinho sobre fundo escuro, com serifa de alto contraste em branco.
     O vinho #6E140E foi extraído dos próprios posts dela. Ele é a cor que
     o público dela já reconhece, então é ele que comanda a interface. O
     marinho fica como cor institucional do logo e de textos de apoio.     */
  --marca:            #6E140E;   /* vinho dos posts: ações, ênfase, destaque */
  --marca-clara:      #8A1B13;
  --marca-fundo:      #F8EDEB;
  --marinho:          #0B385B;   /* institucional, do logotipo */
  --marinho-fundo:    #E9EFF4;   /* superfície de seleção e de solução */
  --escuro:           #141110;   /* fundo dos blocos de impacto, como nos posts */
  --acento:           #929497;   /* cinza do monograma RZ */
  --acento-claro:     #C4C6C9;

  /* --- Superfícies ------------------------------------------------------
     Neutro frio, para conversar com o marinho e o cinza do logotipo.
     Nunca branco puro no fundo: o branco fica reservado aos cards, e é o
     contraste entre os dois que desenha a página.                         */
  --fundo:            #F4F6F7;
  --superficie:       #FFFFFF;
  --superficie-suave: #FAFBFC;
  --tinta:            #12171C;
  --tinta-media:      #49525A;
  --tinta-suave:      #616970;   /* era #7B858E, 3,47:1. Agora 5,15:1 sobre o fundo */
  --borda:            rgba(19, 22, 26, .12);
  --borda-forte:      rgba(19, 22, 26, .22);

  /* --- Escala de risco --------------------------------------------------
     Cada nível tem cor, fundo e um GLIFO próprio. O glifo existe para que
     a leitura não dependa de cor: daltônico, impressão em preto e branco e
     projetor ruim continuam legíveis.                                     */
  --risco-baixo:      #1F6F52;
  --risco-baixo-bg:   #E8F2ED;
  --risco-medio:      #8A5A07;   /* era #A96A08, que reprovava AA (3,91:1). Agora 5,24:1 */
  --risco-medio-bg:   #FAF0DF;
  --risco-alto:       #6E140E;
  --risco-alto-bg:    #F8EDEB;

  /* --- Tipografia ------------------------------------------------------- */
  --serifa:  'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Medidas ---------------------------------------------------------- */
  --largura:     980px;
  --largura-estreita: 660px;
  --raio:        14px;
  --raio-peq:    8px;
  --sombra:      0 1px 2px rgba(19,22,26,.04), 0 8px 28px rgba(19,22,26,.06);
  --sombra-alta: 0 2px 6px rgba(19,22,26,.06), 0 24px 60px rgba(19,22,26,.12);
}

/* ============================================================================
   BASE
   ============================================================================ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serifa); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 14px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   ESTRUTURA
   ============================================================================ */

.casca { min-height: 100vh; display: flex; flex-direction: column; }

.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244,246,247,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo-interno {
  max-width: var(--largura); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 18px;
}

.marca-bloco { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* O logo agora tem fundo transparente e está recortado no limite da tinta.
   NÃO voltar a usar mix-blend-mode aqui: o truque funcionava por acidente e
   reaparecia como caixa branca assim que o cabeçalho passava sobre uma seção
   escura, que é exatamente o que acontece na capa e no mural. */
.marca-logo { height: 26px; width: auto; display: block; }
/* É o nome do produto dela, não um rótulo de sistema: some com o cinza
   miúdo e assume corpo de assinatura, na serifa da marca. */
.marca-produto {
  font-family: var(--serifa); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--tinta); white-space: nowrap;
  padding-left: 16px; border-left: 1px solid var(--borda);
}
@media (max-width: 700px) { .marca-produto { font-size: .92rem; padding-left: 12px; } }
@media (max-width: 560px) {
  .marca-produto { display: none; }
  .marca-logo { height: 24px; }
}

.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Selo de sessão salva: a garantia visual de que nada se perde se a
   internet cair no meio da apresentação. */
.selo-salvo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 500; color: var(--risco-baixo);
  background: var(--risco-baixo-bg);
  border: 1px solid rgba(31,111,82,.2);
  padding: 5px 11px; border-radius: 100px;
  opacity: 0; transition: opacity .35s ease;
}
.selo-salvo.visivel { opacity: 1; }
.selo-salvo::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--risco-baixo);
}

.palco { flex: 1; }
.tela { display: none; }
/* A animação NUNCA parte de opacidade zero. Se o navegador não executar a
   animação (aba em segundo plano, projetor, economia de energia, headless),
   o conteúdo precisa continuar visível. Movimento é enfeite, nunca condição
   de leitura. */
.tela.ativa { display: block; opacity: 1; animation: entra .34s cubic-bezier(.2,.7,.3,1); }
@keyframes entra { from { transform: translateY(10px); } to { transform: none; } }

.centro { max-width: var(--largura); margin: 0 auto; padding: 56px 24px 96px; }
.centro.estreito { max-width: var(--largura-estreita); }

/* ============================================================================
   BARRA DE PROGRESSO
   ============================================================================ */

.progresso { height: 3px; background: var(--borda); position: relative; overflow: hidden; }
.progresso-trilho {
  height: 100%; width: 0%;
  background: var(--marca);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}

.passo-info {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 30px;
}
.passo-contagem {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-suave);
}

/* ============================================================================
   ABERTURA
   ============================================================================ */

/* --- CAPA -----------------------------------------------------------------
   Construída na linguagem das artes do Instagram dela: fundo escuro, grão,
   serifa de alto contraste, marcador vinho chapado atrás da palavra que
   carrega a mensagem, e ela na imagem olhando para quem lê.
   -------------------------------------------------------------------------- */

/* NÃO adicionar clareamento na base da capa. Já tentei costurar a transição
   com um inset box-shadow claro e o resultado foi uma névoa cinza sobre a
   parte de baixo da foto, que sujou a imagem inteira. O corte seco entre o
   escuro e o claro é intencional e foi o que o Julio aprovou. */
.capa { background: var(--escuro); color: #fff; position: relative; overflow: hidden; }

/* Grão discreto, como nas artes dela. Entre o fundo e o conteúdo, sem
   interceptar clique. */
.capa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* Halo vinho atrás do texto, o mesmo recurso das artes */
.capa::before {
  content: ''; position: absolute; z-index: 0;
  left: -12%; top: -30%; width: 62%; height: 150%;
  background: radial-gradient(ellipse at center, rgba(110,20,14,.55), transparent 62%);
}

.capa-grade {
  position: relative; z-index: 2;
  max-width: var(--largura); margin: 0 auto;
  display: block; padding: 0 24px; min-height: 660px;
}
/* A coluna de texto respeita a largura do site; a foto sangra até a borda
   da tela, como numa arte de feed que não tem margem. */
.capa-texto { max-width: 600px; position: relative; z-index: 3; }

.capa-texto { padding: 72px 0 72px; }

.capa-eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin: 0 0 26px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: inline-block;
}

/* Selo do produto: o nome vem antes da manchete, com o filete vinho da marca
   ao lado, para o empresário sair da página sabendo COMO isso se chama. */
.produto-nome {
  font-family: var(--serifa); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.06;
  letter-spacing: -.02em; color: #fff; margin: 0 0 26px;
  padding-left: 18px; border-left: 3px solid var(--marca);
}
.produto-nome em { font-style: italic; font-weight: 400; color: #E9B4AE; }

.capa-titulo {
  font-family: var(--serifa);
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -.02em;
  margin: 0 0 26px; color: #fff;
}
.capa-titulo em { font-style: italic; font-weight: 400; }

/* O marcador: bloco vinho chapado atrás da palavra, exatamente como ela usa */
.capa-titulo .marcador {
  display: inline-block; background: var(--marca);
  padding: .02em .3em .12em; margin: 0 -.06em;
  font-style: italic; font-weight: 400;
}

.capa-lead {
  font-size: 1.04rem; line-height: 1.7;
  color: rgba(255,255,255,.74);
  max-width: 44ch; margin: 0 0 34px;
}

.capa-acoes { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-grande { padding: 18px 38px; font-size: 1rem; }
.capa-tempo { font-size: .82rem; color: rgba(255,255,255,.5); }

.capa-selos {
  display: flex; gap: 30px; flex-wrap: wrap; max-width: 520px;
  margin-top: 42px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.capa-selos span { font-size: .8rem; color: rgba(255,255,255,.55); }
.capa-selos strong {
  display: block; font-family: var(--serifa); font-size: 1.3rem;
  font-weight: 600; color: #fff; margin-bottom: 1px;
}

/* A foto ocupa a coluna inteira e encosta no rodapé da capa, sem moldura,
   dissolvendo no fundo pela esquerda e por baixo: é assim que ela aparece
   nas artes do Instagram. */
.capa-foto {
  position: absolute; z-index: 1; top: 0; bottom: 0; right: 0;
  width: 48vw; max-width: 760px; min-width: 420px;
}
.capa-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 10%;
  filter: grayscale(.12) contrast(1.08) brightness(.98);
}
.capa-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--escuro) 0%, rgba(20,17,16,.72) 18%, transparent 52%),
    linear-gradient(to top, var(--escuro) 0%, transparent 22%),
    linear-gradient(to bottom, var(--escuro) 0%, transparent 12%);
}
.capa-assinatura {
  position: absolute; z-index: 4; right: 6%; bottom: 32px;
  border-left: 3px solid var(--marca); padding-left: 14px;
}
.capa-assinatura strong {
  display: block; font-family: var(--serifa); font-size: 1.08rem;
  font-weight: 600; color: #fff;
}
.capa-assinatura span { font-size: .74rem; color: rgba(255,255,255,.55); }

@media (max-width: 860px) {
  .capa-grade { grid-template-columns: 1fr; gap: 0; }
  .capa-grade { min-height: 0; }
  .capa-texto { padding: 48px 0 30px; max-width: none; }
  .capa-foto {
    position: relative; width: auto; min-width: 0; max-width: none;
    margin: 0 -24px; height: 380px;
  }
  .capa-foto img { position: relative; height: 380px; object-position: 50% 8%; }
  .capa-assinatura { left: 24px; }
  .capa-foto::after { background: linear-gradient(to top, var(--escuro) 2%, transparent 52%); }
  .capa-assinatura { left: 24px; }
  .capa-selos { gap: 22px; }
}

/* Variante da capa usada na tela de resultado: mesma linguagem, sem foto,
   mais baixa, com o halo vinho puxado para o centro. */
.capa-resultado { }
.capa-fecho .capa-grade { min-height: 0; }
.capa-fecho .capa-texto-largo { padding: 62px 0 66px; max-width: 620px; }
.capa-fecho::before {
  left: 50%; transform: translateX(-50%); top: -50%; width: 70%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(110,20,14,.5), transparent 62%);
}
.capa-resultado .capa-grade { min-height: 0; }
.capa-resultado::before {
  left: -8%; top: -40%; width: 78%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(110,20,14,.5), transparent 64%);
}
.capa-texto-largo { max-width: 780px; padding: 66px 0 62px; }
.capa-resultado /* Selo do produto: o nome vem antes da manchete, com o filete vinho da marca
   ao lado, para o empresário sair da página sabendo COMO isso se chama. */
.produto-nome {
  font-family: var(--serifa); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.06;
  letter-spacing: -.02em; color: #fff; margin: 0 0 26px;
  padding-left: 18px; border-left: 3px solid var(--marca);
}
.produto-nome em { font-style: italic; font-weight: 400; color: #E9B4AE; }

.capa-titulo { margin-bottom: 18px; }
.capa-resultado .capa-lead { max-width: 62ch; margin-bottom: 0; }

.hero-pontos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--borda);
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; margin: 40px 0;
}
.hero-ponto { background: var(--superficie); padding: 26px 24px; }
#tela-abertura .centro { padding-top: 44px; }
#tela-abertura /* Variante da capa usada na tela de resultado: mesma linguagem, sem foto,
   mais baixa, com o halo vinho puxado para o centro. */
.capa-resultado { }
.capa-fecho .capa-grade { min-height: 0; }
.capa-fecho .capa-texto-largo { padding: 62px 0 66px; max-width: 620px; }
.capa-fecho::before {
  left: 50%; transform: translateX(-50%); top: -50%; width: 70%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(110,20,14,.5), transparent 62%);
}
.capa-resultado .capa-grade { min-height: 0; }
.capa-resultado::before {
  left: -8%; top: -40%; width: 78%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(110,20,14,.5), transparent 64%);
}
.capa-texto-largo { max-width: 780px; padding: 66px 0 62px; }
.capa-resultado /* Selo do produto: o nome vem antes da manchete, com o filete vinho da marca
   ao lado, para o empresário sair da página sabendo COMO isso se chama. */
.produto-nome {
  font-family: var(--serifa); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.06;
  letter-spacing: -.02em; color: #fff; margin: 0 0 26px;
  padding-left: 18px; border-left: 3px solid var(--marca);
}
.produto-nome em { font-style: italic; font-weight: 400; color: #E9B4AE; }

.capa-titulo { margin-bottom: 18px; }
.capa-resultado .capa-lead { max-width: 62ch; margin-bottom: 0; }

.hero-pontos { margin-top: 0; }
.hero-ponto strong {
  display: block; font-family: var(--serifa); font-size: 1.45rem;
  font-weight: 600; color: var(--marca); margin-bottom: 4px;
}
.hero-ponto span { font-size: .88rem; color: var(--tinta-media); }


/* ============================================================================
   MURAL DE MANCHETES
   Colunas de publicações rolando em perspectiva, em velocidades diferentes,
   umas para cima e outras para baixo. Para no hover para dar tempo de ler.
   Mesmo device da LP da Vanguarda, aqui na paleta vinho da Dra. Roberta.

   REGRA DE CONTEÚDO, decidida pelo Julio em 2026-08-13:
   1. Os cards NÃO são clicáveis. O mural existe para intensificar a dor, e
      link tirando o empresário da página é furo no funil.
   2. Ainda assim, todo caso aqui é real, com tribunal e data conferidos na
      fonte antes de entrar. Numa página assinada por advogada, caso inventado
      é problema sério, mesmo sem link na tela.
   ============================================================================ */

.mural-secao { background: var(--escuro); color: #fff; position: relative; overflow: hidden; }
/* O brilho vinho passa POR CIMA de tudo, em modo screen. Por baixo ele era
   coberto pelas névoas do mural, que pintam o escuro chapado, e isso desenhava
   uma linha horizontal onde o brilho acabava. Em screen, ele clareia o fundo
   escuro sem sujar o texto branco, e a seção vira uma peça só. */
.mural-secao::before {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 68% 62% at 20% 40%, rgba(110,20,14,.62), transparent 72%);
  mix-blend-mode: screen;
}
.mural-cabeca {
  position: relative; z-index: 2;
  max-width: var(--largura); margin: 0 auto; padding: 74px 24px 0;
}
.mural-cabeca h2 {
  font-family: var(--serifa); font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600; letter-spacing: -.02em; color: #fff; max-width: 20ch; margin: 0 0 16px;
}
.mural-cabeca p { color: rgba(255,255,255,.72); max-width: 62ch; margin: 0; font-size: 1rem; }

/* O número do TST ancora o mural: mostra que não são casos isolados */
.mural-numero {
  margin-top: 26px !important; padding: 20px 24px;
  border-left: 3px solid var(--marca); background: rgba(110,20,14,.16);
  border-radius: 0 var(--raio-peq) var(--raio-peq) 0;
  color: rgba(255,255,255,.86) !important; max-width: 58ch !important;
}
.mural-numero strong {
  font-family: var(--serifa); font-size: 1.5rem; font-weight: 600;
  color: #fff; letter-spacing: -.02em;
}
.mural-numero cite {
  display: block; margin-top: 10px; font-style: normal; font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.mural {
  position: relative; margin: 40px 0 0; width: 100%;
  height: 520px; overflow: hidden; perspective: 340px; z-index: 2;
}
.mural-palco {
  position: absolute; inset: 0; display: flex; justify-content: center; gap: 15px;
  transform: translateZ(-60px) rotateX(13deg) rotateY(-7deg) rotateZ(9deg) scale(1.28);
}
.mural-col {
  display: block; width: 238px; flex: 0 0 auto;
  animation: mural-sobe var(--dur, 46s) linear infinite;
}
.mural-col.rev { animation-direction: reverse; }
@keyframes mural-sobe { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.mural:hover .mural-col { animation-play-state: paused; }

.nz {
  display: block;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 17px 17px 15px; margin-bottom: 15px;
}
/* O valor da condenação é o que precisa saltar do card */
.nz .valor {
  display: block; font-family: var(--serifa); font-size: 1.45rem; font-weight: 600;
  color: #E9B4AE; letter-spacing: -.02em; line-height: 1; margin-bottom: 10px;
}
.nz b {
  display: block; font-family: var(--mono); font-weight: 500; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: #E9B4AE; margin-bottom: 10px;
}
.nz span { display: block; font-size: 13.5px; line-height: 1.42; color: rgba(255,255,255,.94); }
.nz i {
  display: block; margin-top: 11px; font-family: var(--mono); font-style: normal;
  font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.5);
}

/* névoas: escondem o começo e o fim do laço sem cortar o card na régua */
.mural::before, .mural::after {
  content: ''; position: absolute; left: 0; right: 0; height: 32%;
  pointer-events: none; z-index: 3;
}
.mural::before { top: 0; background: linear-gradient(to bottom, var(--escuro) 22%, rgba(20,17,16,0)); }
.mural::after { bottom: 0; background: linear-gradient(to top, var(--escuro) 22%, rgba(20,17,16,0)); }
.mural-lados {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(to right, var(--escuro) 2%, rgba(20,17,16,0) 16%, rgba(20,17,16,0) 84%, var(--escuro) 98%);
}
.mural-nota {
  position: relative; z-index: 4; max-width: var(--largura); margin: -6px auto 0;
  padding: 0 24px 74px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}

@media (max-width: 820px) {
  .mural { height: 420px; perspective: none; margin-top: 30px; }
  .mural-palco { transform: none; gap: 11px; padding: 0 12px; }
  .mural-col { flex: 1 1 0; width: auto; max-width: 230px; min-width: 0; }
  .mural-col:nth-child(n+3) { display: none; }
  .nz { padding: 14px; margin-bottom: 11px; }
  .nz span { font-size: 12.5px; }
  /* névoa lateral de 20% apagaria metade do card num celular */
  .mural-lados { background: linear-gradient(to right, var(--escuro), rgba(20,17,16,0) 7%, rgba(20,17,16,0) 93%, var(--escuro)); }
  .mural::before, .mural::after { height: 17%; }
  .mural-cabeca { padding-top: 56px; }
  .mural-nota { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .mural-col { animation: none; } }
@media print { .mural-secao { display: none !important; } }

/* ============================================================================
   BOTÕES
   ============================================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  padding: 15px 30px; border-radius: 100px; border: 1px solid transparent;
  cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.btn-principal { background: var(--marca); color: #fff; box-shadow: var(--sombra); }
.btn-principal:hover { background: var(--marca-clara); box-shadow: var(--sombra-alta); }
.btn-principal[disabled] { background: var(--borda-forte); color: rgba(255,255,255,.75); cursor: not-allowed; box-shadow: none; }

.btn-secundario { background: transparent; color: var(--tinta-media); border-color: var(--borda-forte); }
.btn-secundario:hover { background: var(--superficie); color: var(--tinta); }

.btn-texto {
  background: none; border: none; padding: 10px 4px; cursor: pointer;
  font-family: var(--sans); font-size: .88rem; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-texto:hover { color: var(--tinta); }

.acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ============================================================================
   FORMULÁRIO DE LEAD
   ============================================================================ */

.campos { display: grid; gap: 22px; margin-top: 34px; }
.campos.duplo { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .campos.duplo { grid-template-columns: 1fr; } }

.campo label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--tinta-media); margin-bottom: 8px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq); padding: 14px 16px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(14,42,58,.1);
}
.campo .dica { font-size: .78rem; color: var(--tinta-suave); margin-top: 7px; }
.campo.invalido input, .campo.invalido select { border-color: var(--risco-alto); }
.campo .erro { font-size: .78rem; color: var(--risco-alto); margin-top: 7px; display: none; }
.campo.invalido .erro { display: block; }

/* ============================================================================
   PERGUNTA
   ============================================================================ */

/* O tema em cinza tinha 2,81:1 e era invisível. Em marinho tem 11,19:1 e,
   de quebra, leva a marca para dentro do trecho claro, que antes não tinha
   nenhum vestígio dela. */
.pergunta-tema {
  display: inline-block; font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marinho);
  margin-bottom: 16px;
}
.pergunta-texto {
  font-family: var(--serifa); font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
  margin: 0 0 18px; max-width: 26ch;
}
.pergunta-ajuda {
  font-size: .92rem; color: var(--tinta-media);
  max-width: 62ch; padding-left: 16px;
  border-left: 2px solid var(--borda-forte); margin-bottom: 36px;
}

/* Entrada em cascata: pergunta primeiro, depois cada alternativa, uma a uma.
   ATENÇÃO, regra que não se quebra: nenhuma dessas animações parte de
   opacidade zero. Elas mexem só em posição. Se o navegador engasgar ou
   congelar a animação, o conteúdo continua visível. Numa apresentação ao
   vivo, tela em branco não é opção. */
.pergunta-tema, .pergunta-texto, .pergunta-ajuda { animation: sobe .38s cubic-bezier(.2,.7,.3,1) both; }
.pergunta-texto { animation-delay: .04s; }
.pergunta-ajuda { animation-delay: .08s; }
@keyframes sobe { from { transform: translateY(12px); } to { transform: none; } }

.opcoes { display: grid; gap: 12px; }
.opcoes .opcao { animation: sobe .34s cubic-bezier(.2,.7,.3,1) both; }
.opcoes .opcao:nth-child(1) { animation-delay: .10s; }
.opcoes .opcao:nth-child(2) { animation-delay: .16s; }
.opcoes .opcao:nth-child(3) { animation-delay: .22s; }
.opcoes .opcao:nth-child(4) { animation-delay: .28s; }
.opcoes .opcao:nth-child(5) { animation-delay: .34s; }

/* Confirmação visual do clique: a alternativa escolhida dá um pulso curto
   antes de a próxima pergunta entrar. É o que faz a coisa parecer viva. */
.opcao.confirmando { animation: pulso .3s ease; }
@keyframes pulso { 0%,100% { transform: none; } 45% { transform: scale(1.015); } }

.opcao {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px 22px; cursor: pointer;
  font-family: var(--sans); font-size: 1.02rem; color: var(--tinta);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.opcao:hover { border-color: var(--marca); transform: translateX(3px); box-shadow: var(--sombra); }
.opcao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcao.escolhida { border-color: var(--marinho); border-width: 2px; padding: 19px 21px; background: var(--marinho-fundo); }

.opcao-marca {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--borda-forte); position: relative;
}
.opcao.escolhida .opcao-marca { border-color: var(--marinho); }
.opcao.escolhida .opcao-marca::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--marinho);
}

.base-legal-nota {
  margin-top: 30px; font-size: .78rem; color: var(--tinta-suave);
}

.navegacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--borda);
}

/* ============================================================================
   RESULTADO
   ============================================================================ */

.placar-numeros {
  display: flex; flex-wrap: wrap; gap: 34px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.16); position: relative; z-index: 1;
}
.placar-numero span {
  display: block; font-size: .69rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px;
}
.placar-numero strong {
  font-family: var(--serifa); font-size: 1.85rem; font-weight: 600; color: #fff;
}
.placar-numero.destaque strong { color: #E9B4AE; }

/* Ressalva: obrigatória sempre que houver número em reais na tela. */
.ressalva {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--superficie-suave); border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-peq); padding: 18px 20px;
  font-size: .84rem; color: var(--tinta-media); line-height: 1.6;
  margin-bottom: 40px;
}
.ressalva-icone { flex: 0 0 auto; color: var(--acento); font-weight: 700; }

/* Aceite antes do resultado */
.aceite {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-peq); padding: 18px 20px; margin-top: 26px;
  font-size: .86rem; color: var(--tinta-media); line-height: 1.55; cursor: pointer;
}
.aceite:hover { border-color: var(--borda-forte); }
.aceite input {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--marca); cursor: pointer;
}

/* Ressalva de rodapé: invisível na tela, obrigatória no PDF, porque é ali
   que o documento passa a circular sozinho. */
.ressalva-impressa { display: none; }
.ressalva-impressa .preencher { color: var(--risco-alto); font-weight: 600; }

.secao-titulo {
  display: flex; align-items: baseline; gap: 14px;
  margin: 52px 0 8px; padding-bottom: 14px; border-bottom: 1px solid var(--borda);
}
.secao-titulo h2 { flex: 1; }
.secao-titulo .contagem { font-size: .8rem; color: var(--tinta-suave); }
.secao-intro { color: var(--tinta-media); margin: 14px 0 26px; max-width: 66ch; }

/* --- Card de achado --------------------------------------------------- */
.achado {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-bottom: 14px; overflow: hidden;
}
.achado-topo {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; width: 100%;
  background: none; border: none; text-align: left; font-family: var(--sans);
}
.achado-topo:hover { background: var(--superficie-suave); }
.achado-topo:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* O glifo carrega o nível de risco sem depender de cor */
.glifo {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; font-size: .95rem; font-weight: 700;
  border: 1px solid transparent;
}
.glifo.baixo { background: var(--risco-baixo-bg); color: var(--risco-baixo); border-color: rgba(31,111,82,.24); }
.glifo.medio { background: var(--risco-medio-bg); color: var(--risco-medio); border-color: rgba(138,90,7,.26); }
.glifo.alto  { background: var(--risco-alto-bg);  color: var(--risco-alto);  border-color: rgba(110,20,14,.24); }

.achado-corpo-topo { flex: 1; min-width: 0; }
.achado-tema { font-weight: 600; font-size: 1rem; display: block; }
.achado-resposta { font-size: .85rem; color: var(--tinta-suave); }
.achado-valor {
  font-family: var(--serifa); font-size: .98rem; font-weight: 600;
  color: var(--tinta); white-space: nowrap; text-align: right;
}
.achado-valor small { display: block; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.achado-seta { flex: 0 0 auto; color: var(--tinta-suave); transition: transform .22s ease; }
.achado.aberto .achado-seta { transform: rotate(180deg); }

.achado-detalhe { display: none; padding: 4px 24px 26px; border-top: 1px solid var(--borda); }
.achado.aberto .achado-detalhe { display: block; }
.achado-detalhe p { font-size: .94rem; color: var(--tinta-media); margin-top: 18px; }

.linha-dado { display: flex; gap: 12px; font-size: .89rem; margin-top: 14px; }
.linha-dado dt {
  flex: 0 0 158px; font-weight: 600; color: var(--tinta);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px;
}
.linha-dado dd { margin: 0; color: var(--tinta-media); }

/* O remédio é a SOLUÇÃO. Ele não pode usar a superfície do risco alto,
   que é a cor do problema. Vai de marinho, que é institucional. */
.remedio {
  margin-top: 22px; padding: 18px 20px;
  background: var(--marinho-fundo); border-radius: var(--raio-peq);
  border-left: 3px solid var(--marinho);
}
.remedio strong {
  display: block; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marinho); margin-bottom: 7px;
}
.remedio span { font-size: .92rem; color: var(--tinta-media); }

.tag-rascunho {
  display: inline-block; font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--risco-medio-bg); color: var(--risco-medio);
  border: 1px solid rgba(169,106,8,.3);
  padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle;
}

/* --- Recomendação comercial ------------------------------------------- */
.recomendacao {
  background: var(--superficie); border: 2px solid var(--marinho);
  border-radius: var(--raio); padding: 38px 36px; margin-top: 30px;
}
.recomendacao h3 { font-size: 1.55rem; color: var(--marinho); margin-bottom: 6px; }
.recomendacao .entrega { color: var(--tinta-media); font-size: .96rem; margin-bottom: 20px; }
.recomendacao .motivo { color: var(--tinta-media); font-size: .94rem; }
.recomendacao .preco {
  font-family: var(--serifa); font-size: 2rem; font-weight: 600;
  color: var(--tinta); margin: 20px 0 0;
}
.recomendacao .preco small { display: block; font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 2px; }

/* A leitura da RZ: é a Dra. Roberta falando, então ela aparece.
   O rosto ao lado do texto muda a natureza da mensagem: deixa de ser
   saída de sistema e vira parecer de uma advogada com nome e cara. */
.mensagem-final {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-top: 30px; overflow: hidden;
  display: grid; grid-template-columns: 260px 1fr;
}
.mensagem-final .retrato {
  background: var(--marca-fundo);
  background-image: url('img/roberta.jpg');
  background-size: cover; background-position: center 18%;
  min-height: 320px;
}
.mensagem-final .fala { padding: 38px 40px; }
.mensagem-final p { color: var(--tinta-media); }
.mensagem-final .assinatura {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--borda);
}
.mensagem-final .assinatura strong {
  display: block; font-family: var(--serifa); font-size: 1.1rem;
  font-weight: 600; color: var(--marinho);
}
.mensagem-final .assinatura span { font-size: .82rem; color: var(--tinta-suave); }
@media (max-width: 720px) {
  .mensagem-final { grid-template-columns: 1fr; }
  .mensagem-final .retrato { min-height: 260px; background-position: center 12%; }
  .mensagem-final .fala { padding: 30px 26px; }
}

/* ============================================================================
   PAINEL INTERNO (comercial)
   ============================================================================ */

.painel-interno {
  background: var(--escuro); color: #E9E6E5;
  border-radius: var(--raio); padding: 36px; margin-top: 30px;
}
.painel-interno h3 { color: #fff; margin-bottom: 6px; }
.painel-interno .eyebrow { color: rgba(255,255,255,.42); }
.painel-interno .bloco { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.painel-interno .bloco strong {
  display: block; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 9px;
}
.painel-interno .bloco p, .painel-interno .bloco li { color: rgba(255,255,255,.82); font-size: .94rem; }
.painel-interno ul { margin: 0; padding-left: 20px; }
.painel-interno li { margin-bottom: 6px; }
.painel-interno .citacao {
  font-family: var(--serifa); font-size: 1.15rem; line-height: 1.5;
  color: #fff; border-left: 3px solid var(--acento); padding-left: 18px;
}

/* ============================================================================
   RETOMADA DE SESSÃO
   ============================================================================ */

.retomar {
  background: var(--marinho-fundo); border: 1px solid rgba(11,56,91,.22);
  border-radius: var(--raio); padding: 22px 26px; margin-bottom: 34px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.retomar p { flex: 1; min-width: 240px; font-size: .93rem; color: var(--marinho); margin: 0; }
.retomar .btn { padding: 11px 22px; font-size: .88rem; }

/* ============================================================================
   RODAPÉ
   ============================================================================ */

.rodape {
  border-top: 1px solid var(--borda); padding: 30px 24px 44px;
  font-size: .78rem; color: var(--tinta-suave);
}
.rodape-interno {
  max-width: var(--largura); margin: 0 auto;
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.rodape-interno .direita { margin-left: auto; display: flex; gap: 16px; }

/* ============================================================================
   IMPRESSÃO — o laudo em PDF sai daqui
   ============================================================================ */

@media print {
  .topo, .rodape, .navegacao, .acoes, .retomar, .progresso, .btn, .painel-interno, .aceite { display: none !important; }
  .ressalva-impressa {
    display: block !important; break-inside: avoid;
    margin-top: 28px; padding-top: 16px; border-top: 1px solid #999;
    font-size: 8pt; line-height: 1.45; color: #333;
  }
  body { background: #fff; font-size: 11pt; }
  .centro { padding: 0; max-width: none; }
  .capa { background: #fff !important; color: var(--tinta) !important; }
  .capa::before, .capa::after { display: none !important; }
  .capa-grade { padding: 0; }
  .capa-texto-largo { padding: 0 0 18px; max-width: none; }
  .capa-eyebrow { color: var(--tinta-suave) !important; border-color: #ccc !important; }
  /* Selo do produto: o nome vem antes da manchete, com o filete vinho da marca
   ao lado, para o empresário sair da página sabendo COMO isso se chama. */
.produto-nome {
  font-family: var(--serifa); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.06;
  letter-spacing: -.02em; color: #fff; margin: 0 0 26px;
  padding-left: 18px; border-left: 3px solid var(--marca);
}
.produto-nome em { font-style: italic; font-weight: 400; color: #E9B4AE; }

.capa-titulo { color: var(--tinta) !important; }
  .capa-titulo .marcador { background: none !important; color: var(--marca) !important; padding: 0 !important; }
  .capa-lead { color: var(--tinta-media) !important; }
  .placar-numeros { border-top: 1px solid #ccc !important; }
  .placar-numero span { color: var(--tinta-suave) !important; }
  .placar-numero strong { color: var(--marca) !important; }
  .achado { break-inside: avoid; border: 1px solid #ccc; }
  .achado-detalhe { display: block !important; }
  .achado-seta { display: none; }
  .secao-titulo { break-after: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}