/* ─────────────────────────────────────────────────────────────
   Motor de quiz · Dra. Rafaela Briguenti

   MOBILE FIRST. Os dois quizzes sao links de campanha no Instagram,
   logo quase todo o acesso vem de telefone. As regras base valem para
   telefone; os @media (min-width) so ACRESCENTAM para telas maiores.
   Nenhum comportamento essencial depende de hover ou de tela larga.

   Tokens conforme "ID Visual - Dra. Rafaela Briguenti" v1.0 (2026).
   Excecao deliberada: a sans e Poppins, nao Jost. Decisao do cliente
   em 2026-08-31 para casar com o site em producao, que ja usa Poppins.
   O manual v1.0 (secao 10) lista outras fontes como uso indevido —
   a divergencia esta no site, nao aqui. Ver README.
   ───────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* O atributo hidden vale display:none, mas com especificidade baixissima:
   qualquer regra que declare display (como .gancho{display:flex}) o anula
   e o elemento reaparece VAZIO. Aconteceu com o bloco de gancho quando
   nao havia area restante para citar. */
[hidden]{display:none !important}

:root{
  /* Paleta — manual secao 03 */
  --espresso:#2A1B12;
  --cacau:#4A2C1B;
  --terracota:#975B39;
  --terracota-escura:#7A4527;
  --terracota-clara:#B4744C;
  --areia:#C9A98B;
  --dourado:#C6A87C;
  --creme:#F3E7DA;
  --off-white:#FAF6F1;

  --tinta:#3A2A20;
  --tinta-suave:#5A4638;
  --tinta-fraca:#8C6E56;
  --linha:#ECE0D3;
  --linha-forte:#E0D0BF;
  --branco:#FFFFFF;

  /* Cantos e sombra — manual secao 05 */
  --r:4px;
  --r-pill:999px;
  --sombra:0 18px 48px rgba(42,27,18,.16);

  --alvo:44px;            /* alvo minimo de toque */
}

html{
  background:var(--off-white);
  color:var(--tinta);
  font-family:'Poppins',sans-serif;
  font-size:16px;
  line-height:1.7;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* iOS nao reescala ao girar */
}
body{overflow-x:hidden;min-height:100svh;display:flex;flex-direction:column}
img{display:block;max-width:100%}
a{color:var(--terracota);text-decoration:none}
button{font-family:inherit}
::selection{background:var(--creme)}

button:focus-visible,a:focus-visible,input:focus-visible{
  outline:2px solid var(--terracota);
  outline-offset:3px;
  border-radius:2px;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ── TIPOGRAFIA ─────────────────────────────────────────────── */
.display{font-family:'Cormorant Garamond',serif;font-weight:300;line-height:1.15}
.eyebrow{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--terracota);
}
@media(min-width:480px){ .eyebrow{font-size:11px;letter-spacing:.28em} }

/* ── HEADER / FOOTER ────────────────────────────────────────── */
header{padding:1.15rem 1rem;display:flex;justify-content:center;position:relative;z-index:5}
header img{height:40px;width:auto}
@media(min-width:480px){
  header{padding:1.5rem}
  header img{height:51px}
}

footer{
  padding:1.5rem 1.15rem 2rem;text-align:center;
  font-size:11px;line-height:1.7;letter-spacing:.04em;
  /* --tinta-fraca (#8C6E56) sobre o off-white do body da 4.36:1 e reprova
     em AA. Como este rodape carrega o aviso legal, usa --tinta-suave. */
  color:var(--tinta-suave);
}
footer a{text-decoration:underline}
/* A unica assinatura e "Dra. Rafaela Briguenti · CRM-SP 261752".
   Nao existe marca de clinica para exibir aqui — ver README. */

/* ── SHELL ──────────────────────────────────────────────────── */
.shell{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.5rem .85rem 2rem;position:relative;
}
.card-wrap{width:100%;max-width:600px;position:relative}
@media(min-width:480px){ .shell{padding:1.5rem 1.25rem 3rem} }

/* ── BRILHO AMBIENTE ────────────────────────────────────────── */
/* Os .glow sao maiores que a viewport de proposito. A camada abaixo os
   corta; sem ela o body ganha scroll horizontal em telas estreitas.
   Cortar aqui — e nao com overflow no html — evita truncar a tela de
   resultado, que e mais alta que a viewport. */
.glow-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.5}
.glow-a{
  width:300px;height:300px;left:-20%;top:-6%;
  background:radial-gradient(circle,rgba(201,169,139,.5),transparent 70%);
  animation:drift 22s ease-in-out infinite;
}
.glow-b{
  width:260px;height:260px;right:-16%;bottom:-6%;
  background:radial-gradient(circle,rgba(151,91,57,.35),transparent 70%);
  animation:drift 26s ease-in-out infinite reverse;
}
@media(min-width:768px){
  .glow-a{width:420px;height:420px;left:-18%;top:-10%}
  .glow-b{width:360px;height:360px;right:-14%;bottom:-8%}
}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.1)}}

/* ── TELAS ──────────────────────────────────────────────────── */
.screen{display:none;position:relative;z-index:1;animation:fadeIn .5s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.panel{
  background:var(--branco);
  border-radius:var(--r);
  padding:1.75rem 1.15rem 2rem;
  box-shadow:var(--sombra);
  border-top:3px solid var(--terracota);
}
@media(min-width:480px){ .panel{padding:2.75rem 2.25rem} }

/* ── INTRO ──────────────────────────────────────────────────── */
.intro-icon{width:44px;height:44px;margin:0 auto 1.15rem;animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(min-width:480px){ .intro-icon{width:52px;height:52px;margin-bottom:1.5rem} }

.intro-title{
  font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,7vw,2.3rem);line-height:1.18;
  color:var(--tinta);text-align:center;margin-bottom:.9rem;
  text-wrap:balance;
}
.intro-sub{
  font-size:14px;color:var(--tinta-suave);text-align:center;line-height:1.7;
  max-width:440px;margin:0 auto 1.5rem;text-wrap:pretty;
}
@media(min-width:480px){ .intro-sub{font-size:14.5px;line-height:1.75;margin-bottom:1.75rem} }

.intro-meta{
  display:flex;align-items:center;justify-content:center;
  gap:.65rem 1.1rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.intro-meta span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tinta-suave)}
.intro-meta svg{color:var(--terracota);flex-shrink:0}
@media(min-width:480px){ .intro-meta{gap:1.5rem;margin-bottom:2.25rem} }

/* ── BOTAO PRIMARIO ─────────────────────────────────────────── */
.btn-primary{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 22px;min-height:52px;
  background:var(--terracota);color:var(--branco);
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;
  cursor:pointer;border:none;border-radius:var(--r-pill);overflow:hidden;
  transition:background .25s;
  box-shadow:0 14px 32px -12px rgba(151,91,57,.55);
}
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* Brilho e hover so onde existe ponteiro de verdade: no toque o
   :hover fica "grudado" depois do tap. */
@media(hover:hover){
  .btn-primary:hover{background:var(--terracota-escura)}
  .btn-primary:hover::after{transform:translateX(120%)}
  .btn-primary:disabled:hover{background:var(--terracota)}
}
.btn-primary:active{background:var(--terracota-escura)}
@media(min-width:480px){
  .btn-primary{padding:17px 30px;font-size:13px;letter-spacing:.14em}
}

/* ── PROGRESSO ──────────────────────────────────────────────── */
.progress-wrap{margin-bottom:1.5rem}
.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.progress-count{font-size:11px;color:var(--tinta-suave);letter-spacing:.06em}
.progress-track{height:4px;background:var(--linha);border-radius:var(--r-pill);overflow:hidden}
.progress-fill{
  height:100%;background:linear-gradient(90deg,var(--areia),var(--terracota));
  border-radius:var(--r-pill);transition:width .4s ease;width:0%;
}
@media(min-width:480px){ .progress-wrap{margin-bottom:2rem} }

/* ── PERGUNTA ───────────────────────────────────────────────── */
.q-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.q-eyebrow{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracota);
}
.q-badge{
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracota-escura);background:var(--creme);
  padding:4px 10px;border-radius:var(--r-pill);
}
@media(min-width:480px){
  .q-head{gap:.6rem;margin-bottom:.75rem}
  .q-eyebrow{letter-spacing:.24em}
  .q-badge{font-size:9px;letter-spacing:.16em;padding:5px 11px}
}

.q-text{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(1.22rem,5.2vw,1.6rem);line-height:1.35;
  color:var(--tinta);margin-bottom:1.15rem;
  text-wrap:pretty;
}
/* min-height reserva espaco para o texto da proxima pergunta e evita
   o card "pular" de altura a cada avanco. So a partir de 480px: em
   telefone estreito isso abriria um vao grande nas perguntas curtas. */
@media(min-width:480px){ .q-text{margin-bottom:1.75rem;min-height:2.8em} }

.q-context{
  font-size:12px;color:var(--tinta-fraca);font-style:italic;
  margin-top:-.85rem;margin-bottom:1.15rem;
}
@media(min-width:480px){ .q-context{margin-top:-1.25rem;margin-bottom:1.5rem} }

.q-hint{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:12px;line-height:1.6;color:var(--tinta-suave);
  background:var(--off-white);border-left:2px solid var(--terracota);
  padding:.75rem .85rem;border-radius:0 var(--r) var(--r) 0;
  margin-bottom:1.15rem;text-wrap:pretty;
}
.q-hint .hint-icon{color:var(--terracota);flex-shrink:0;margin-top:2px;display:flex}
@media(min-width:480px){
  .q-hint{font-size:12.5px;line-height:1.65;padding:.85rem 1rem;gap:.6rem;margin-bottom:1.5rem}
}

.q-source{
  font-size:10.5px;line-height:1.5;color:var(--tinta-fraca);
  margin-top:1rem;text-align:left;
}
@media(min-width:480px){ .q-source{margin-top:1.25rem;text-align:right} }

/* ── RESPOSTAS ──────────────────────────────────────────────── */
.answers{display:flex;flex-direction:column;gap:.55rem}
.answer-btn{
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:13px 14px;min-height:var(--alvo);
  background:var(--off-white);border:1.5px solid var(--linha-forte);
  border-radius:var(--r);cursor:pointer;text-align:left;
  font-size:13.5px;line-height:1.45;color:var(--tinta);font-family:'Poppins',sans-serif;
  transition:border-color .18s,background .18s,transform .18s;
  -webkit-tap-highlight-color:transparent;
}
.answer-btn.selected{border-color:var(--terracota);background:var(--terracota);color:var(--branco)}
.answer-btn:active{border-color:var(--terracota)}
@media(hover:hover){
  .answer-btn:hover{border-color:var(--terracota);background:var(--branco);transform:translateX(3px)}
  .answer-btn.selected:hover{background:var(--terracota)}
}
@media(min-width:480px){ .answer-btn{gap:.9rem;padding:14px 16px;min-height:52px} }

.answer-text{flex:1}

/* Escala de intensidade — substitui os emojis do material de origem.
   O manual (secao 08) lista emoji em "nunca escreva". Tres pontos
   preenchidos progressivamente carregam a mesma semantica. */
.answer-scale{display:flex;gap:3px;flex-shrink:0;width:34px}
.answer-scale .dot{
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:1.5px solid var(--linha-forte);
  transition:background .18s,border-color .18s;
}
.answer-scale .dot.on{background:var(--terracota);border-color:var(--terracota)}
.answer-btn.selected .answer-scale .dot{border-color:var(--branco)}
.answer-btn.selected .answer-scale .dot.on{background:var(--branco)}

.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.15rem}
.q-back{
  font-size:12px;color:var(--tinta-suave);cursor:pointer;background:none;border:none;
  display:flex;align-items:center;gap:6px;padding:10px 6px;min-height:var(--alvo);
}
.q-back:disabled{opacity:0;pointer-events:none}
@media(hover:hover){ .q-back:hover{color:var(--terracota)} }
@media(min-width:480px){ .q-nav{margin-top:1.75rem} }

/* ── FORMULARIO DE LEAD ─────────────────────────────────────── */
.lead-icon{width:40px;height:40px;margin:0 auto 1rem;color:var(--terracota)}
@media(min-width:480px){ .lead-icon{width:44px;height:44px;margin-bottom:1.25rem} }

.form-group{margin-bottom:1rem}
.form-label{
  display:block;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:.45rem;
}
.form-input{
  width:100%;background:var(--branco);border:1px solid var(--linha-forte);
  color:var(--tinta);padding:14px 16px;min-height:var(--alvo);
  font-family:'Poppins',sans-serif;
  /* 16px e obrigatorio: abaixo disso o iOS da zoom ao focar o campo. */
  font-size:16px;
  outline:none;transition:border-color .2s;border-radius:3px;
}
.form-input:focus{border-color:var(--terracota)}
.form-input[aria-invalid="true"]{border-color:var(--terracota-clara)}
.form-error{font-size:12px;line-height:1.5;color:var(--terracota-escura);margin-top:.4rem;min-height:1.2em}
.form-privacy{font-size:11px;color:var(--tinta-fraca);text-align:center;margin-top:1rem;line-height:1.6}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── RESULTADO ──────────────────────────────────────────────── */
.result-eyebrow{text-align:center;margin-bottom:.5rem}
.result-band{
  font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;
  font-size:clamp(1.65rem,7vw,2.4rem);line-height:1.2;
  text-align:center;margin-bottom:.35rem;text-wrap:balance;
}
.result-range{
  text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-fraca);margin-bottom:1.25rem;
}
@media(min-width:480px){ .result-range{font-size:12px;letter-spacing:.16em;margin-bottom:1.5rem} }

/* ── MEDIDOR SEMICIRCULAR ───────────────────────────────────── */
.gauge{position:relative;width:220px;height:120px;margin:0 auto .75rem}
.gauge svg{display:block;max-width:100%}
.gauge-valor{position:absolute;bottom:0;left:0;right:0;text-align:center}
.gauge-num{font-size:24px;font-weight:500;color:var(--tinta)}
.gauge-max{font-size:13px;color:var(--tinta-fraca)}
@media(prefers-reduced-motion:reduce){ #gaugeArc{transition:none !important} }

/* ── GANCHO DE CURIOSIDADE ──────────────────────────────────── */
.gancho{
  display:flex;align-items:flex-start;gap:.6rem;
  background:var(--creme);border:1px solid var(--areia);
  border-radius:var(--r);padding:.8rem 1rem;margin-bottom:1.5rem;
  font-size:12.5px;line-height:1.55;color:var(--terracota-escura);
}
.gancho-icone{color:var(--terracota);flex-shrink:0;display:flex;margin-top:1px}

/* ── TRILHA DA CONSULTA ─────────────────────────────────────── */
.trilha{
  display:flex;background:var(--off-white);border:1px solid var(--linha);
  border-radius:var(--r);padding:.9rem .5rem;margin-bottom:1.5rem;
}
.trilha-item{flex:1;text-align:center}
.trilha-icone{color:var(--terracota);display:block;margin-bottom:.35rem}
.trilha-icone svg{margin:0 auto}
.trilha-label{font-size:10.5px;color:var(--tinta-suave);letter-spacing:.02em}

.result-desc{
  font-size:14px;color:var(--tinta-suave);line-height:1.75;text-align:left;
  max-width:480px;margin:0 auto 1.75rem;
}
/* O texto da faixa vem em varios paragrafos (leitura clinica da Dra.).
   Sem esta margem eles encostam e viram um bloco unico. */
.result-desc p + p{margin-top:.9rem}
/* Sem text-wrap:pretty aqui: em tela estreita ele encurta demais as
   ultimas linhas e o paragrafo fica com o recorte irregular. */
/* Centralizado so em tela larga: em telefone, texto longo centralizado
   fica com as bordas irregulares e mais dificil de ler. */
@media(min-width:480px){ .result-desc{text-align:center;line-height:1.8;margin-bottom:2.25rem} }

/* ── FATORES (RESUMO) ───────────────────────────────────────── */
/* Pilulas com o NOME da area, sem a resposta dada. O detalhe fator a
   fator e insumo comercial e vive so na base — ver gravarLead(). */
.fatores{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-bottom:.75rem;
}
.fator-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-pill);
  background:var(--off-white);border:1px solid var(--linha-forte);
  font-size:12.5px;line-height:1.3;color:var(--tinta-suave);
}
.fator-icone{display:flex;flex-shrink:0}
/* A de maior peso vem destacada — e o fator que a consulta ataca primeiro. */
.fator-tag.destaque{
  background:var(--creme);border:1.5px solid var(--terracota);
  color:var(--terracota-escura);font-weight:500;
}
/* O excedente fica "fechado": e o gancho para a consulta. */
.fator-tag.bloqueada{
  background:var(--linha);border:1px dashed var(--areia);
  color:var(--tinta-fraca);
}
.fatores-nota{
  font-size:12px;line-height:1.6;color:var(--tinta-suave);
  margin-bottom:1.75rem;
}
@media(min-width:480px){ .fatores-nota{margin-bottom:2rem} }

.tips-title{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracota);margin-bottom:.85rem;
}
.tip{display:flex;align-items:flex-start;gap:.75rem;font-size:13.5px;color:var(--tinta);line-height:1.65}
.tip-icon{
  width:24px;height:24px;border-radius:50%;
  background:var(--off-white);color:var(--terracota);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.outlook-title{
  display:flex;align-items:center;gap:.5rem;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracota);margin-bottom:.65rem;
}
.outlook-text{
  font-size:13.5px;line-height:1.7;color:var(--tinta);
  margin-bottom:1.75rem;text-wrap:pretty;
}
@media(min-width:480px){
  .outlook-title{gap:.55rem;letter-spacing:.14em;margin-bottom:.75rem}
  .outlook-text{padding-left:calc(24px + .55rem);margin-bottom:2rem}
}

/* Aviso clinico fixo — exigido em toda tela de resultado */
.disclaimer{
  font-size:11.5px;line-height:1.6;color:var(--tinta-suave);
  background:var(--creme);border-radius:var(--r);
  padding:.9rem 1rem;margin-bottom:1.5rem;text-wrap:pretty;
}
@media(min-width:480px){ .disclaimer{line-height:1.65;padding:1rem 1.15rem;margin-bottom:1.75rem} }

.retry-link{
  display:block;margin:1rem auto 0;background:none;border:none;
  font-size:12px;color:var(--tinta-suave);cursor:pointer;
  text-decoration:underline;padding:10px;min-height:var(--alvo);
}
@media(hover:hover){ .retry-link:hover{color:var(--terracota)} }

/* Selo de autoridade na abertura */
.selo{
  font-size:11px;line-height:1.6;color:var(--tinta-suave);
  border:1px solid var(--linha);border-radius:var(--r);
  padding:.8rem .9rem;margin-bottom:1.5rem;text-align:center;text-wrap:pretty;
}
@media(min-width:480px){ .selo{line-height:1.65;padding:.85rem 1rem;margin-bottom:1.75rem} }