/* Mapa de Crescimento OdontoFlow — F2 (rev. layout 01/08: fontes maiores, largura máxima)
   Diretriz travada (ESPEC §2): branco, tinta navy, ouro só em destaques,
   sem caixas, sem sombras fortes, sem gradientes, sem decoração. */

:root{
  --branco:#FFFFFF;
  --tinta:#0E1A2E;
  --tinta-60:#4A566B;
  --tinta-40:#8A93A5;
  --ouro:#B0916A;
  --ouro-fundo:rgba(176,145,106,.08);
  --linha:#E8E5DF;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}

/* ---------- progresso: a única linha dourada permanente ---------- */
.progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:10;background:transparent}
#barra{display:block;height:100%;width:0;background:var(--ouro);transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ---------- topo ---------- */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:9;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 28px 0;
  pointer-events:none;
}
.marca{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--tinta-40)}
.voltar{
  pointer-events:auto;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--tinta-40);background:none;border:0;cursor:pointer;padding:4px 0;
}
.voltar:hover{color:var(--tinta)}
.voltar:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* ---------- palco / telas ---------- */
#palco{max-width:780px;margin:0 auto;padding:0 28px}
body.rel #palco{max-width:940px}
.tela{
  min-height:100svh;
  display:none;
  flex-direction:column;justify-content:center;
  padding:100px 0 64px;
}
.tela--ativa{display:flex}
.tela--entrando{animation:entrar .45s cubic-bezier(.2,.6,.2,1) both}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- abertura ---------- */
.abertura-linha{color:var(--tinta-60);margin-bottom:16px;font-size:20px}
.abertura-titulo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,6.5vw,58px);line-height:1.1;
  margin:20px 0 24px;
}
.abertura-titulo em{font-style:italic;color:var(--ouro)}
.rodape-abertura{
  position:absolute;left:0;right:0;bottom:24px;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tinta-40);
  text-transform:uppercase;
}
.rodape-abertura .sep{margin:0 8px}
.rodape-abertura a{color:var(--tinta-40)}
#tela-abertura{position:relative}

/* ---------- pergunta ---------- */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-40);margin-bottom:28px;
}
.eco{
  font-family:var(--serif);font-style:italic;font-size:22px;
  color:var(--tinta-60);margin-bottom:28px;max-width:52ch;line-height:1.4;
}
.pergunta{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5.5vw,50px);line-height:1.14;
  margin-bottom:44px;letter-spacing:-.01em;
}

/* opções: linhas, nunca caixas */
.opcoes{list-style:none}
.opcao{border-bottom:1px solid var(--linha)}
.opcao:first-child{border-top:1px solid var(--linha)}
.opcao button{
  display:flex;align-items:center;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:19px;color:var(--tinta-60);
  padding:21px 4px;
  transition:color .2s;
}
.opcao button::before{
  content:"";width:0;height:1px;background:var(--ouro);
  transition:width .25s cubic-bezier(.4,0,.2,1);flex:none;
}
.opcao button:hover,.opcao button:focus-visible{color:var(--tinta)}
.opcao button:hover::before,.opcao button:focus-visible::before{width:24px}
.opcao button:focus-visible{outline:none}
.opcao button:active{color:var(--ouro)}

/* campo de texto (nome, clínica, "outra") */
.campo{display:flex;align-items:flex-end;gap:18px;border-bottom:1px solid var(--tinta);padding-bottom:12px;max-width:520px}
.campo input{
  flex:1;border:0;outline:none;background:none;
  font-family:var(--serif);font-size:clamp(26px,5vw,38px);color:var(--tinta);
  caret-color:var(--ouro);min-width:0;
}
.campo input::placeholder{color:var(--tinta-40);font-style:italic}
.campo .botao{margin:0}
.dica-campo{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tinta-40);margin-top:16px;text-transform:uppercase}

/* botão primário — navy pleno, sem enfeite */
.botao{
  display:inline-block;margin-top:28px;text-decoration:none;
  font-family:var(--sans);font-weight:500;font-size:16px;
  color:var(--branco);background:var(--tinta);
  border:0;border-radius:2px;padding:16px 34px;cursor:pointer;
  transition:background .2s;
}
.botao:hover{background:#1B2B47}
.botao:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
.botao[disabled]{opacity:.35;cursor:default}

/* ---------- montagem ---------- */
.montagem{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--tinta-40);text-transform:uppercase}
.montagem li{list-style:none;padding:11px 0;opacity:0;transition:opacity .5s}
.montagem li.viva{opacity:1;color:var(--tinta-60)}
.montagem li.viva::after{content:" ·";color:var(--ouro)}
.montagem-titulo{font-family:var(--serif);font-size:clamp(28px,5vw,44px);line-height:1.15;margin-bottom:34px}

/* ---------- relatório ---------- */
.tela--relatorio{justify-content:flex-start;padding-top:120px}
.rel-cabecalho{margin-bottom:64px}
.rel-titulo{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,66px);line-height:1.06;margin:12px 0 8px}
.rel-sub{color:var(--tinta-60);font-size:18px}
.rel-secao{margin-bottom:68px}
.rel-secao .kicker{margin-bottom:20px}
.rel-secao p{color:var(--tinta-60);margin-bottom:16px;max-width:62ch;font-size:19px}
.rel-secao p strong{color:var(--tinta);font-weight:500}
.rel-secao p.rel-destaque,.rel-destaque{
  font-family:var(--serif);font-size:clamp(24px,3.5vw,30px);line-height:1.42;
  letter-spacing:.018em;word-spacing:.06em;
  color:var(--tinta);border-left:2px solid var(--ouro);padding-left:22px;margin:24px 0;max-width:34ch;
}
.rel-lista{list-style:none}
.rel-lista li{border-top:1px solid var(--linha);padding:20px 0;color:var(--tinta-60);font-size:19px;max-width:70ch}
.rel-lista li:last-child{border-bottom:1px solid var(--linha)}
.rel-lista .evidencia{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--tinta-40);margin-top:8px;line-height:1.6}
.rel-lista strong{color:var(--tinta);font-weight:500}

/* roda */
.roda-wrap{display:flex;justify-content:center;margin:14px 0 26px}
.roda-wrap svg{width:min(560px,94vw);height:auto}
.roda-legenda{list-style:none;max-width:560px;margin:0 auto}
.roda-legenda li{display:flex;gap:12px;align-items:baseline;font-size:16px;color:var(--tinta-60);padding:7px 0}
.roda-legenda .ponto{width:10px;height:10px;border-radius:50%;flex:none}
.ponto--maior{background:var(--ouro)}
.ponto--segunda{border:1.5px solid var(--ouro);background:none}
.ponto--forte{background:var(--tinta)}
.ponto--neutro{border:1.5px solid var(--linha);background:none}

/* CTA */
.rel-cta{border-top:1px solid var(--tinta);padding-top:38px}
.rel-cta .botao{margin-top:20px}
.rel-cta-nota{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--tinta-40);margin-top:16px;text-transform:uppercase;line-height:1.8}

/* encerramento único: CTA principal + ação secundária de PDF (progressiva) */
.botao-secundario{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:16px;
  color:var(--tinta);background:none;border:1px solid var(--tinta-40);border-radius:2px;
  padding:15px 32px;cursor:pointer;text-decoration:none;
  transition:border-color .2s,color .2s;
}
.botao-secundario:hover{border-color:var(--tinta)}
.botao-secundario:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
.ou{
  display:flex;align-items:center;gap:14px;margin:24px 0;max-width:460px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--tinta-40);text-transform:uppercase;
}
.ou::before,.ou::after{content:"";height:1px;background:var(--linha);flex:1}
.form-pdf{margin-top:34px;max-width:500px}
.form-pdf h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.2;margin-bottom:10px}
.form-pdf .form-sub{font-size:17px;color:var(--tinta-60);margin-bottom:22px}
.form-pdf input[type="email"]{
  width:100%;display:block;
  border:0;border-bottom:1px solid var(--linha);padding:12px 2px;
  font-family:var(--sans);font-size:17px;color:var(--tinta);outline:none;background:none;
}
.form-pdf input[type="email"]:focus{border-color:var(--ouro)}
.nota-pdf{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--tinta-40);margin:10px 0 18px;text-transform:uppercase}
.botao--form{margin-top:22px;padding:14px 30px}
.pdf-status{margin-top:18px;font-size:16px;color:var(--tinta-60)}
.pdf-status--erro{color:#8C3B2E}
.consentimento{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--tinta-60);max-width:460px;margin:8px 0 4px}
.consentimento input{accent-color:var(--ouro);margin-top:4px}

/* ---------- responsivo ---------- */
@media (min-width:1100px){
  #palco{max-width:840px}
  body.rel #palco{max-width:1000px}
}
@media (max-width:600px){
  body{font-size:17px}
  #palco{padding:0 22px}
  .tela{padding:88px 0 56px}
  .abertura-linha{font-size:18px}
  .pergunta{margin-bottom:34px}
  .opcao button{font-size:17px;padding:18px 2px}
  .eco{font-size:19px}
  .rel-secao p,.rel-lista li{font-size:17px}
  .rel-secao p.rel-destaque{font-size:23px;line-height:1.5;letter-spacing:.025em;padding-left:18px}
  .rel-cta .botao,.rel-cta .botao-secundario{display:block;width:100%;text-align:center}
  .form-pdf{max-width:none}
  .rel-secao{margin-bottom:52px}
  .roda-legenda li{font-size:15px}
  .rodape-abertura{font-size:9px;padding:0 16px}
  .campo{flex-direction:column;align-items:stretch}
  .campo .botao{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .tela--entrando{animation:none}
  #barra{transition:none}
  .opcao button::before{transition:none}
}