/* ============================================================
   DIAGNÓSTICO VIBRACIONAL — só o que não está no /style.css
   Cores, tipografia, cabeçalho, rodapé e o céu do hero vêm de lá.
   ============================================================ */

:root{
  /* o briefing chama de --ocre o que a folha global chama de
     --ocre-suave; mesmo valor, os dois nomes funcionam */
  --ocre: var(--ocre-suave);

  /* Uma medida só para todo o texto corrido da ferramenta: a abertura,
     a prosa do conteúdo, os sabotadores e as respostas do FAQ. Assim
     eles não voltam a divergir de tamanho quando um for ajustado. */
  --texto-corpo: clamp(16px, 2.6vw, 21px);
}

/* Botão: <button> herda uma borda do navegador que o <a class="cta">
   da home não tem — por isso os CTAs daqui apareciam contornados. */
.cta{ border:0; font-family:inherit; }

/* ---- TROCA DE ESTADOS ----
   Cada etapa é uma div com data-etapa; o body diz qual está no ar.
   Sem roteamento e sem recarregar a página. */
.etapa{ display:none; }
body[data-estado="pagina"]    .etapa[data-etapa="pagina"],
body[data-estado="desejo"]    .etapa[data-etapa="desejo"],
body[data-estado="perguntas"] .etapa[data-etapa="perguntas"],
body[data-estado="corpo"]     .etapa[data-etapa="corpo"],
body[data-estado="leitura"]   .etapa[data-etapa="leitura"]{ display:block; }

body[data-estado="resultado"] #telaResultado{ display:block; }

/* o conteúdo indexável só existe na página de entrada */
body:not([data-estado="pagina"]) #conteudoSeo{ display:none; }

/* Fundo liso. A página do Diagnóstico não repete o céu estrelado da
   home: é uma tela de instrumento, não a vitrine do site. Foi também o
   que resolvia o problema de o hero daqui parecer o hero de lá. */
body{
  background-image:none; background:var(--azul-noite);
  /* claro sobre escuro engorda no subpixel: o antialiasing devolve o
     desenho real da letra */
  -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
}

/* Texto corrido em peso 300, como no protótipo do hero. Em fundo escuro
   o 400 lê como semibold; o 300 é que dá o peso "regular" aparente.
   O negrito de verdade usa 600, que é o peso realmente carregado da
   Source Sans 3 — sem isso o navegador engorda o 400 por conta. */
.prosa p, .sabotadores li, .faq details p,
.abertura-ferramenta .lead, .tela-apoio{ font-weight:300; }
.prosa strong, .sabotadores strong{ font-weight:600; }

/* o palco é um <section>: sem isto herda o padding genérico das seções
   do CSS global e injeta 180px fantasmas em todas as telas do teste */
.palco{ padding:0; transition:background .6s ease; }
/* a tela do corpo é mais escura e mais silenciosa que as outras */
body[data-estado="corpo"] .palco{ background:var(--azul-abismo); }

/* ---- DURANTE O TESTE, NADA ALÉM DO TESTE ----
   Cabeçalho e rodapé saem de cena nas quatro etapas. No lugar do
   cabeçalho entra só a marca em lettering, numa faixa de azul mais
   profundo que o resto da página. */
.faixa-marca{ display:none; }
body[data-estado="desejo"] .faixa-marca,
body[data-estado="perguntas"] .faixa-marca,
body[data-estado="corpo"] .faixa-marca,
body[data-estado="leitura"] .faixa-marca{
  display:block;
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding:13px 20px;
  text-align:center;
  background:var(--azul-abismo);
}
/* Wordmark discreto, na mesma largura que o lettering ocupava antes —
   a faixa não muda de peso. A máscara elíptica é a mesma do cabeçalho:
   dissolve o brilho dourado embutido na arte no fundo da faixa. */
.faixa-marca img{
  width:160px; height:auto; margin:0 auto;
  -webkit-mask-image:radial-gradient(118% 148% at 50% 50%, #000 46%, transparent 100%);
          mask-image:radial-gradient(118% 148% at 50% 50%, #000 46%, transparent 100%);
}

body[data-estado="desejo"] header,
body[data-estado="perguntas"] header,
body[data-estado="corpo"] header,
body[data-estado="leitura"] header,
body[data-estado="desejo"] footer,
body[data-estado="perguntas"] footer,
body[data-estado="corpo"] footer,
body[data-estado="leitura"] footer{ display:none; }

/* ---- LINHA DE PROGRESSO ---- */
.progresso-trilho{
  position:fixed; top:0; left:0; right:0; height:1px;
  z-index:60; background:transparent;
}
.progresso-trilho i{
  display:block; height:100%; width:0;
  background:var(--ambar);
  transition:width .3s ease;
}
body[data-estado="pagina"] .progresso-trilho,
body[data-estado="resultado"] .progresso-trilho{ display:none; }

/* ---- ABERTURA DA FERRAMENTA (estado "pagina") ----
   Diagramação em lettering: sigilo, marca tipográfica e título ao
   centro sobre azul liso. Nada de imagem — é o que distingue esta
   página da home num relance. */
/* O display fica na regra de estado, não aqui: escrito solto, o
   display:flex venceria o .etapa{display:none} por ordem na folha e a
   abertura continuaria ocupando altura durante o teste. */
body[data-estado="pagina"] .abertura-ferramenta{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.abertura-ferramenta{
  min-height:100svh;
  text-align:center;
  padding:100px max(var(--respiro), calc((100% - var(--medida)) / 2)) 44px;
}
.sigilo--abertura{ width:clamp(64px, 17vw, 96px); height:auto; margin-bottom:22px; }
.abertura-ferramenta h1{
  font-size:clamp(36px, 9.6vw, 76px);
  line-height:1.02; max-width:none; margin-bottom:20px;
}
.abertura-ferramenta .eyebrow{ margin-bottom:14px; }
.abertura-ferramenta .lead{
  color:var(--ocre-suave);
  font-size:var(--texto-corpo); line-height:1.5;
  /* margem automática além do align-items: um item flex com max-width
     não se centraliza sozinho, encosta na borda de início */
  max-width:52ch; margin:0 auto 32px;
}
.abertura-ferramenta .micro{ margin-top:14px; }

/* Tela alta: travada em 100svh, a abertura sobra muito espaço vazio
   entre o fim do texto e a linha da seção seguinte. A partir de certa
   altura ela passa a ter a altura do próprio conteúdo, com respiro
   medido em cima e embaixo. */
@media (min-width:760px) and (min-height:760px){
  .abertura-ferramenta{ min-height:0; padding-top:150px; padding-bottom:80px; }
}

/* tela baixa: o botão precisa caber sem rolagem — é o começo do funil */
@media (max-height:720px){
  .abertura-ferramenta{ padding-top:76px; padding-bottom:18px; }
  .sigilo--abertura{ width:52px; margin-bottom:12px; }
  .abertura-ferramenta .eyebrow{ margin-bottom:10px; }
  .abertura-ferramenta h1{ font-size:clamp(32px, 8.4vw, 48px); margin-bottom:10px; }
  .abertura-ferramenta .lead{ font-size:16px; line-height:1.45; margin-bottom:12px; }
}

/* ---- TELAS DO TESTE ----
   A largura acompanha a tela: a caixa cresce com o espaço disponível
   em vez de travar numa medida fixa. */
.tela{
  width:100%;
  padding:104px max(var(--respiro), calc((100% - var(--medida)) / 2)) 48px;
}
.tela-interior{
  width:100%; max-width:min(100%, 52rem);
  margin:0 auto; text-align:center;
}

.tela-titulo{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 6.5vw, 48px); line-height:1.12;
  text-wrap:balance; margin-bottom:18px;
}
.tela-apoio{
  color:var(--ocre-suave);
  font-size:clamp(16px, 2.2vw, 19px);
  max-width:56ch; margin:0 auto 32px;
}
.tela-pergunta-corpo{
  font-family:var(--serif); font-size:clamp(22px, 5.5vw, 28px);
  color:var(--pergaminho); margin:28px 0 32px;
}

/* ---- ETAPA 0: cards de desejo ---- */
.grade-desejo{ display:grid; gap:12px; margin-bottom:28px; }
.cartao-desejo{
  min-height:56px; padding:16px 20px;
  background:transparent; border:1px solid var(--linha); border-radius:3px;
  color:var(--pergaminho); font:inherit; font-size:16px;
  cursor:pointer; text-align:left;
  transition:border-color .2s, background .2s;
}
.cartao-desejo:hover{ border-color:var(--ambar); }
.cartao-desejo.escolhido{
  border-color:var(--ambar); background:rgba(217,164,65,.08);
}

.campo-frase{ display:block; text-align:left; margin-bottom:28px; }
.campo-frase span{
  display:block; font-size:13px; letter-spacing:.08em;
  color:var(--ocre-suave); margin-bottom:8px;
}
.campo-frase input{
  width:100%; padding:14px 16px;
  background:var(--azul-card); border:1px solid var(--linha); border-radius:3px;
  color:var(--pergaminho); font:inherit; font-size:16px;   /* 16px evita o zoom do iOS */
}
.campo-frase input:focus{ outline:none; border-color:var(--ambar); }
.campo-frase input::placeholder{ color:#6C6455; }

.cta[disabled]{ opacity:.35; cursor:not-allowed; }
.cta[disabled]:hover{ background:var(--ambar); transform:none; }

/* ---- ETAPA 1: perguntas ---- */
/* A ESPEC 8.2 fixa 26–30px como faixa do MOBILE. Na tela larga a
   pergunta cresce junto com o espaço, em vez de ficar pequena no meio
   de uma caixa vazia. */
.pergunta{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px, 5.2vw, 46px); line-height:1.22;
  text-wrap:balance; margin-bottom:32px;
}
.respostas{ display:grid; gap:10px; }
.resposta{
  min-height:56px; padding:14px 18px;
  background:transparent; border:1px solid var(--linha); border-radius:3px;
  color:var(--pergaminho); font:inherit; font-size:16px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.resposta:hover{ border-color:var(--ambar); }
.resposta.escolhida{ border-color:var(--ambar); background:rgba(217,164,65,.08); }

.voltar{
  display:block; margin:0 auto 24px;
  background:none; border:0; padding:6px;
  color:var(--ocre-suave); font:inherit; font-size:13px;
  letter-spacing:.1em; cursor:pointer;
}
.voltar:hover{ color:var(--ambar); }
.voltar[hidden]{ display:none; }

/* entrada de cada pergunta */
#telaPergunta.entrando{ animation:entra .24s ease-out both; }
@keyframes entra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---- ETAPA 2: corpo ---- */
.respostas--corpo{ opacity:0; pointer-events:none; }
.respostas--corpo.visivel{ opacity:1; pointer-events:auto; transition:opacity .4s ease; }
.cta--discreto{
  background:transparent; border:1px solid var(--ambar); color:var(--ambar);
}
.cta--discreto:hover{ background:rgba(217,164,65,.08); color:var(--ambar-claro); }
#prontoCorpo[hidden]{ display:none; }

/* ---- LEITURA DO CAMPO ---- */
.tela-leitura{ padding-top:40px; }
.sigilo{ width:120px; height:120px; margin:0 auto 28px; display:block; }
.sigilo--lendo .onda{
  stroke-dasharray:40; animation:onda 1.2s ease-in-out infinite;
}
.sigilo--lendo .onda:nth-of-type(2){ animation-delay:.15s; }
.sigilo--lendo .onda:nth-of-type(3){ animation-delay:.3s; }
.sigilo--lendo .onda:nth-of-type(4){ animation-delay:.45s; }
@keyframes onda{
  0%{ stroke-dashoffset:40; opacity:.15; }
  50%{ stroke-dashoffset:0;  opacity:.8; }
  100%{ stroke-dashoffset:-40; opacity:.15; }
}
.passo-leitura{
  color:var(--ocre-suave); font-size:15px; letter-spacing:.16em;
  text-transform:lowercase;
}

/* ---- CONTEÚDO SEO ----
   O texto usa a mesma medida do cabeçalho: começa embaixo do logo e
   termina embaixo do último item do menu. Sem caixa estreita dentro de
   uma tela larga — a coluna cresce e encolhe junto com a janela. */
#conteudoSeo{
  padding:56px max(var(--respiro), calc((100% - var(--medida)) / 2)) 90px;
  border-top:1px solid var(--linha);
}
#conteudoSeo .container{ max-width:none; margin:0; }

/* Cada bloco abre com um traço âmbar curto: separa "por que", "os três"
   e "como funciona" sem precisar de mais palavras na página. */
.prosa h2{
  position:relative;
  font-size:clamp(24px, 3.4vw, 40px); text-align:left;
  margin:72px 0 20px; padding-top:36px; text-wrap:balance;
}
.prosa h2::before{
  content:""; position:absolute; top:0; left:0;
  width:56px; height:2px; background:var(--ambar);
}
.prosa h2:first-child{ margin-top:0; }

/* ---- OS TRÊS SABOTADORES (lista com marcador) ---- */
.sabotadores{ list-style:none; margin:24px 0 28px; }
.sabotadores li{
  position:relative; padding-left:30px; margin-bottom:20px;
  font-size:var(--texto-corpo); line-height:1.65;
}
.sabotadores li::before{
  content:""; position:absolute; left:4px; top:.6em;
  width:7px; height:7px; border-radius:50%;
  background:var(--ambar);
}
.prosa h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(20px, 1.9vw, 25px);
  margin:28px 0 8px;
}
/* Corpo sem teto de largura. A separação visual entre os blocos é que
   sustenta a leitura da linha longa — por isso a fonte não precisa ser
   maior que a do texto de abertura. */
.prosa p{
  margin-bottom:18px; max-width:none;
  font-size:var(--texto-corpo); line-height:1.65;
}
.prosa .destaque{
  font-family:var(--serif); font-size:clamp(20px, 3vw, 34px);
  color:var(--ambar); margin:32px 0; max-width:none;
}
.prosa .reforco{ margin-top:36px; }

/* ---- FAQ EM SANFONA ----
   <details>/<summary> nativos: abre e fecha sem uma linha de JS, e
   funciona no teclado de graça. Separação discreta — uma linha fina
   entre as perguntas e a setinha à direita. */
.faq{ margin-top:24px; border-top:1px solid var(--linha); }
.faq details{ border-bottom:1px solid var(--linha); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(18px, 1.9vw, 25px);
  color:var(--pergaminho);
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }   /* some com a seta do Safari */
.faq summary:hover{ color:var(--ambar); }
.faq summary::after{
  content:""; flex:0 0 auto;
  width:9px; height:9px; margin-right:4px;
  border-right:1.5px solid var(--ambar);
  border-bottom:1.5px solid var(--ambar);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(2px); }
.faq details p{
  margin:0; padding:0 0 24px; max-width:none;
  font-size:var(--texto-corpo);
  color:var(--ocre-suave);
}

/* ---- RESULTADO ---- */
#telaResultado{ padding:120px 24px 90px; }
.bloco{ margin-bottom:64px; }
.bloco-titulo{
  font-family:var(--sans); font-weight:600;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ambar); margin-bottom:18px;
}
.bloco-revelacao{ text-align:center; }
.titulo-sabotador{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(32px, 8vw, 56px); line-height:1.08;
  margin:8px 0 12px; text-wrap:balance;
}
.sub-sabotador{ color:var(--ocre-suave); font-size:17px; margin-bottom:32px; }
.abertura{ max-width:60ch; margin:0 auto; text-align:left; }

.bloco-espelho{
  border-left:2px solid var(--ambar);
  padding:4px 0 4px 20px;
}
.espelho-frase{ margin-bottom:14px; }

/* as três frequências */
.barra{ margin-bottom:22px; }
.barra-topo{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-bottom:8px;
}
.barra-nome{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ocre-suave);
}
.barra-rotulo{ font-size:12px; letter-spacing:.08em; color:var(--ocre-suave); }
.barra--dominante .barra-nome,
.barra--dominante .barra-rotulo,
.barra--ancora .barra-nome,
.barra--ancora .barra-rotulo{ color:var(--ambar); }
.barra-trilho{
  height:6px; border-radius:3px;
  background:rgba(36,51,74,.5); overflow:hidden;
}
.barra-trilho i{
  display:block; height:100%; width:0; border-radius:3px;
  background:var(--linha);
  transition:width .9s ease-out;
}
.barras.animando .barra-trilho i{ width:var(--valor); }

/* Vocabulário de três níveis (ESPEC 8.4). O destaque acompanha a
   nitidez do diagnóstico, não a pontuação da barra:
     cinza          — presente
     âmbar          — a frequência-âncora, por onde se começa
     âmbar + brilho — bloqueio nomeado com certeza (só no nítido) */
.barra--ancora .barra-trilho i{ background:var(--ambar); }
.barra--dominante .barra-trilho i{
  background:var(--ambar);
  box-shadow:0 0 24px rgba(217,164,65,.35);
}

.bloco-frases ul{ list-style:none; }
.bloco-frases li{
  font-family:var(--serif); font-size:clamp(20px, 4.6vw, 26px);
  color:var(--pergaminho); padding:12px 0;
  border-bottom:1px solid var(--linha);
}
.frases-fecho{ margin-top:20px; color:var(--ocre-suave); }

.bloco-movimento{
  background:var(--azul-card); border:1px solid var(--linha); border-radius:3px;
  padding:28px 24px;
}

/* captura de e-mail */
.bloco-captura{
  background:var(--azul-abismo); border:1px solid var(--linha); border-radius:3px;
  padding:32px 24px;
}
.lista-tracos{ list-style:none; margin:0 0 16px; }
.lista-tracos li{
  color:var(--ocre-suave); padding:6px 0 6px 18px; position:relative;
}
.lista-tracos li::before{
  content:"—"; position:absolute; left:0; color:var(--ambar);
}
.form-mapa{ display:grid; gap:12px; margin:24px 0 12px; }
.form-mapa input{
  width:100%; padding:16px;
  background:var(--azul-card); border:1px solid var(--linha); border-radius:3px;
  color:var(--pergaminho); font:inherit; font-size:16px;
}
.form-mapa input:focus{ outline:none; border-color:var(--ambar); }
.form-mapa input::placeholder{ color:#6C6455; }

/* retorno do envio do mapa — some quando vazio, para não abrir buraco */
.aviso-mapa{ font-size:15px; line-height:1.5; margin:0 0 12px; }
.aviso-mapa:empty{ display:none; }
.aviso-mapa--ok{ color:var(--ambar); }
.aviso-mapa--erro{ color:#E08A6A; }
#formMapa[hidden]{ display:none; }

.bloco-ponte{ text-align:center; }
/* Blocado de proposito — linha unica larga cansa a leitura. Mas 30ch
   deixava cinco linhas espremidas no meio de uma tela larga; 48ch fecha
   em tres e usa o espaco que existe. */
.ponte-texto{
  font-family:var(--serif); font-size:clamp(20px, 4.6vw, 28px);
  max-width:48ch; margin:0 auto 28px; text-wrap:balance;
}
/* o refazer vive dentro da propria frase que o justifica */
.nota-refazer{ margin-top:24px; }
.nota-refazer .botao-texto{ font-size:inherit; padding:0 0 0 2px; }
.botao-texto{
  background:none; border:0; padding:6px;
  color:var(--ocre-suave); font:inherit; font-size:14px;
  text-decoration:underline; text-underline-offset:4px; cursor:pointer;
}
.botao-texto:hover{ color:var(--ambar); }

/* ---- CONVITE PELO WHATSAPP ----
   Separado da ponte para o método: aqui não se vende nada, se indica. */
.bloco-convite{ text-align:center; border-top:1px solid var(--linha); padding-top:36px; }
.convite-titulo{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(19px, 2vw, 24px); margin-bottom:6px;
}
.convite-sub{ color:var(--ocre-suave); font-size:15px; margin-bottom:20px; }
.botao-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 24px; border-radius:3px;
  background:#25D366; color:#0A111D;
  font-weight:600; font-size:15px;
  transition:background .2s ease, transform .2s ease;
}
.botao-whatsapp:hover{ background:#1da851; color:#0A111D; transform:translateY(-1px); }
.botao-whatsapp svg{ width:19px; height:19px; flex:0 0 19px; }

/* ---- TELA BAIXA ----
   O critério da ESPEC é não rolar dentro de uma pergunta. Numa tela de
   640px isso só fecha comprimindo o entorno — nunca a fonte da pergunta
   (mínimo 26px) nem a altura das respostas (mínimo 56px), que são
   medidas fixadas pela especificação. */
@media (max-height:700px){
  .tela{ padding-top:86px; padding-bottom:26px; }
  .voltar{ margin-bottom:14px; }
  .pergunta{ margin-bottom:22px; line-height:1.2; }
  .respostas{ gap:8px; }
}

/* ---- DESKTOP ---- */
@media (min-width:760px){
  /* nome e e-mail lado a lado, botão embaixo ocupando a linha */
  .form-mapa{ grid-template-columns:1fr 1fr; }
  .form-mapa .cta{ grid-column:1 / -1; }
  .tela{ padding-top:104px; }
  .grade-desejo{ grid-template-columns:repeat(2, 1fr); }
  /* na tela larga as cinco respostas cabem lado a lado sem apertar */
  .respostas{ grid-template-columns:repeat(5, 1fr); }
  .respostas--corpo{ grid-template-columns:1fr; }
  #telaResultado{ padding-top:140px; }
  .bloco{ margin-bottom:80px; }
}

/* ---- MOVIMENTO REDUZIDO ---- */
@media (prefers-reduced-motion: reduce){
  #telaPergunta.entrando{ animation:none; }
  .sigilo--lendo .onda{ animation:none; }
  .barra-trilho i{ transition:none; }
  .faq summary::after{ transition:none; }
  .hero{ transition:none; }
}