/* =========================================================================
   MOTOR DE QUIZ — design system.
   -------------------------------------------------------------------------
   Mobile-first E resolvido no desktop: no PC o quiz NÃO é uma coluna estreita
   perdida no branco — a coluna cresce, o alvo de toque vira alvo de mouse e o
   fundo da marca preenche a tela.

   Zero emoji: todo ícone é SVG e herda currentColor.

   A MARCA VIVE EM 5 TOKENS. Trocar de oferta é trocar o bloco `.marca` abaixo
   (ou sobrescrevê-lo no HTML da instância). Nada além disso deve mudar.
   ========================================================================= */

:root{
  /* ---- marca (a instância sobrescreve estes cinco) ---- */
  --marca:#F9AD2A;
  --marca-esc:#B77A05;
  --marca-luz:#FFF4DC;
  --fundo:linear-gradient(120deg,#FFFEF1 0%,#FFEFD3 100%);
  --marca-texto:#FFFFFF;

  /* ---- neutros: creme, não branco puro (cansa menos o olho 50+) ---- */
  --papel:#FFFFFF;
  --carvao:#14110A;
  --texto:#241F14;
  --suave:#6B6353;
  --linha:#EAE4D6;
  --borda-btn:color-mix(in srgb, var(--marca) 32%, transparent);

  --ok:#15803D; --ok-luz:#F0FDF4;
  --alerta:#DC2626; --alerta-luz:#FEF2F2;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --sombra:0 1px 2px rgba(20,17,10,.04), 0 4px 16px rgba(20,17,10,.06);
  --sombra-alta:0 4px 12px rgba(20,17,10,.06), 0 16px 40px rgba(20,17,10,.10);
  --sombra-cta:0 6px 20px color-mix(in srgb, var(--marca) 34%, transparent);

  --col:560px;
  --transicao:.22s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--fundo); background-attachment:fixed;
  color:var(--texto); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed}

/* ---------- topo ---------------------------------------------------------- */
.quiz-topo{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--papel) 86%,transparent);backdrop-filter:blur(10px)}
.quiz-topo-in{display:flex;align-items:center;gap:12px;max-width:var(--col);margin-inline:auto;padding:11px 16px}
.quiz-logo{height:30px;width:auto;margin-inline:auto}
.quiz-voltar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--suave)}
.quiz-voltar:hover{background:var(--marca-luz);color:var(--marca-esc)}
.quiz-voltar[hidden]{display:none}
.quiz-passo{min-width:38px;text-align:right;font-size:13px;font-weight:700;color:var(--suave);font-variant-numeric:tabular-nums}
.barra{height:4px;background:var(--linha)}
.barra i{display:block;height:100%;width:0;background:var(--marca);border-radius:0 3px 3px 0;transition:width .4s cubic-bezier(.22,1,.36,1)}
/* Na entrega a régua sai de cena: enquanto ela existe, tudo lê como "mais uma
   pergunta antes do prêmio" e o lead atravessa o conteúdo correndo. */
.fase-entrega .barra,.fase-entrega .quiz-passo{visibility:hidden}

/* ---------- coluna de leitura --------------------------------------------- */
/* `.col` é o utilitário que segura TODA a largura do sistema — o quiz usa via
   `#palco`, e as páginas que vêm depois (venda, obrigado, entrega) usam direto.
   Sem ele, a página de venda no desktop se espalha de borda a borda: o texto
   fica com 1440px de linha, ilegível, e nenhum teste de rolagem horizontal
   acusa, porque tecnicamente nada transborda. */
.col{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:18px}
.col-larga{max-width:1080px}

/* ---------- palco --------------------------------------------------------- */
#palco{max-width:var(--col);margin-inline:auto;padding:26px 18px 40px}
.tela{display:flex;flex-direction:column;gap:18px;animation:entra .28s cubic-bezier(.22,1,.36,1)}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tela{animation:none}*{transition-duration:.01ms !important}}

.tela-titulo{font-size:clamp(23px,5.4vw,31px);line-height:1.2;letter-spacing:-.022em;font-weight:800;color:var(--carvao);text-wrap:balance}
.tela-sub{color:var(--suave);font-size:15.5px;text-wrap:pretty}
.eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--marca-esc);background:var(--marca-luz)}
.fonte{font-size:12.5px;color:var(--suave)}

/* ---------- CTA ----------------------------------------------------------- */
.cta{
  width:100%;padding:17px 22px;border-radius:var(--r-lg);
  background:var(--marca);color:var(--marca-texto);
  font-size:17px;font-weight:800;letter-spacing:-.01em;
  box-shadow:var(--sombra-cta);transition:transform var(--transicao),filter var(--transicao),opacity var(--transicao);
}
.cta:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}
.cta:active:not(:disabled){transform:translateY(1px)}
.cta:disabled{opacity:.42;box-shadow:none}
.cta.grande{padding:20px 24px;font-size:18.5px}
/* No celular o CTA gruda no rodapé: em tela de 47 passos, procurar o botão a
   cada tela é fricção multiplicada por 47. */
@media (max-width:640px){
  .tela-multi .cta,.tela-medida .cta{position:sticky;bottom:14px}
}

/* ---------- opções -------------------------------------------------------- */
.opcoes{list-style:none;display:flex;flex-direction:column;gap:11px}
.opcoes.grade{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.opcao{
  position:relative;width:100%;display:flex;align-items:center;gap:13px;
  padding:16px 17px;min-height:62px;text-align:left;
  background:var(--papel);border:1.5px solid var(--borda-btn);border-radius:var(--r);
  box-shadow:var(--sombra);transition:var(--transicao);
}
.opcao:hover{border-color:var(--marca);transform:translateY(-1px);box-shadow:var(--sombra-alta)}
.opcao.escolhida{border-color:var(--marca);background:var(--marca-luz);box-shadow:var(--sombra-cta)}
.opcao-txt{font-weight:650;flex:1;line-height:1.35}
.opcao-sub{display:block;font-size:13.5px;color:var(--suave);font-weight:400}
.opcao-img{width:52px;height:52px;object-fit:cover;border-radius:12px;flex:none}
.opcao-seta{color:var(--suave);flex:none}
.opcao.escolhida .opcao-seta{color:var(--marca)}

/* grade com imagem: a imagem manda, o texto legenda */
.tela-cards .opcoes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tela-cards .opcao{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;min-height:0}
.tela-cards .opcao-img{width:100%;height:auto;aspect-ratio:1/1;border-radius:0}
.tela-cards .opcao-txt{padding:13px 14px;text-align:center;font-size:15.5px}
.tela-cards .opcao-seta{display:none}

.tela-multi .opcao{flex-direction:column;align-items:center;text-align:center;gap:9px;padding:15px 12px}
.tela-multi .opcao-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:transparent}
.marca-check{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--borda-btn);background:var(--papel);transition:var(--transicao)}
.opcao.escolhida .marca-check{background:var(--marca);border-color:var(--marca);
  box-shadow:inset 0 0 0 3px var(--papel)}

/* corpo: silhueta grande, texto pequeno */
.tela-corpo .opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tela-corpo .opcao{flex-direction:column;padding:12px 8px;gap:8px}
.tela-corpo .opcao-img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
.tela-corpo .opcao-txt{font-size:13.5px;text-align:center}
.tela-corpo .opcao-seta{display:none}

/* ---------- nível --------------------------------------------------------- */
.escala{list-style:none;display:flex;flex-direction:column;gap:10px}
.degrau{width:100%;display:flex;align-items:center;gap:14px;padding:15px 17px;text-align:left;
  background:var(--papel);border:1.5px solid var(--borda-btn);border-radius:var(--r);box-shadow:var(--sombra);transition:var(--transicao)}
.degrau:hover{border-color:var(--marca)}
.degrau.escolhida{border-color:var(--marca);background:var(--marca-luz)}
.degrau-barra{flex:none;width:46px;height:26px;border-radius:6px;
  background:linear-gradient(to right,var(--marca) calc(var(--n)*100%),var(--linha) 0)}
.degrau-txt{display:flex;flex-direction:column}
.degrau-txt span{font-size:13.5px;color:var(--suave)}

/* ---------- medidas ------------------------------------------------------- */
.unidades{display:inline-flex;align-self:center;padding:4px;gap:4px;background:var(--linha);border-radius:99px}
.unidades button{padding:8px 20px;border-radius:99px;font-size:14.5px;font-weight:700;color:var(--suave);transition:var(--transicao)}
.unidades button[aria-selected="true"]{background:var(--papel);color:var(--carvao);box-shadow:var(--sombra)}
.campo-medida{display:flex;flex-direction:column;gap:9px;align-items:center}
.entrada{display:flex;align-items:baseline;gap:8px;padding:14px 20px;background:var(--papel);
  border:1.5px solid var(--borda-btn);border-radius:var(--r);box-shadow:var(--sombra)}
.entrada:focus-within{border-color:var(--marca);box-shadow:var(--sombra-cta)}
.num{width:4.5ch;border:0;outline:0;background:none;font:inherit;font-size:34px;font-weight:800;text-align:center;color:var(--carvao)}
/* as setinhas do number roubam largura e ninguém clica nelas no celular */
.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num[type=number]{-moz-appearance:textfield}
.sufixo{font-size:17px;font-weight:700;color:var(--suave)}
.aviso{font-size:13.5px;color:var(--alerta);background:var(--alerta-luz);padding:9px 13px;border-radius:var(--r-sm)}

/* ---------- marca / reforço ----------------------------------------------- */
.tela-marca,.tela-reforco,.tela-prova{text-align:center;align-items:center}
.marca-img,.reforco-img{width:100%;max-width:340px;border-radius:var(--r-lg)}
.selos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.selos li{padding:7px 13px;border-radius:99px;background:var(--marca-luz);color:var(--marca-esc);font-size:13.5px;font-weight:700}
.lista-itens{list-style:none;display:flex;flex-direction:column;gap:11px;width:100%;text-align:left}
.lista-itens li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--papel);
  border-radius:var(--r);box-shadow:var(--sombra)}
.item-icone{width:26px;height:26px;flex:none;object-fit:contain}

/* ---------- perfil / IMC --------------------------------------------------- */
.cartao-perfil{background:var(--papel);border-radius:var(--r-lg);box-shadow:var(--sombra-alta);padding:20px;display:flex;flex-direction:column;gap:17px}
.perfil-linhas{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.perfil-linhas li{display:flex;flex-direction:column;gap:3px}
.perfil-linhas span{font-size:12.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.perfil-linhas strong{font-size:19px;color:var(--carvao)}
.imc-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.imc-valor{font-size:30px;color:var(--carvao)}
.imc-faixa{padding:5px 12px;border-radius:99px;font-size:13px;font-weight:800}
.faixa-normal{background:var(--ok-luz);color:var(--ok)}
.faixa-abaixo,.faixa-sobrepeso{background:#FFF7ED;color:#C2410C}
.faixa-obesidade1,.faixa-obesidade2{background:var(--alerta-luz);color:var(--alerta)}
.imc-regua{position:relative;height:9px;border-radius:99px;margin-top:11px;
  background:linear-gradient(to right,#60A5FA 0%,#22C55E 26%,#F59E0B 52%,#EF4444 100%)}
.imc-regua i{position:absolute;top:50%;left:calc(var(--p)*100%);width:19px;height:19px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--papel);border:3px solid var(--carvao)}
.imc-leitura{font-size:15px;color:var(--texto)}
.riscos{list-style:none;display:flex;flex-direction:column;gap:7px}
.riscos li{position:relative;padding-left:22px;font-size:14.5px;color:var(--suave)}
.riscos li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--alerta)}

/* ---------- projeção ------------------------------------------------------- */
.grafico{background:var(--papel);border-radius:var(--r-lg);box-shadow:var(--sombra-alta);padding:18px}
.grafico svg{width:100%;height:auto;overflow:visible}
.grafico-eixo{display:flex;justify-content:space-between;margin-top:11px;font-size:13px;color:var(--suave)}
.grafico-eixo b{display:block;font-size:16px;color:var(--carvao)}
.aviso-saude{font-size:13.5px;color:var(--suave);background:var(--marca-luz);padding:11px 14px;border-radius:var(--r-sm)}

/* ---------- montagem ------------------------------------------------------- */
.tela-montando{align-items:center;text-align:center}
.passos{list-style:none;width:100%;display:flex;flex-direction:column;gap:10px}
.passos li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  background:var(--papel);border-radius:var(--r);box-shadow:var(--sombra);opacity:.45;transition:opacity .4s}
.passos li.pronto{opacity:1}
.passo-check{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--linha);transition:var(--transicao)}
.passos li.pronto .passo-check{background:var(--marca);border-color:var(--marca);
  box-shadow:inset 0 0 0 3px var(--papel)}
.progresso-circulo{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
  background:conic-gradient(var(--marca) 0,var(--marca-luz) 0);border:8px solid var(--marca-luz)}
.progresso-circulo span{font-size:23px;font-weight:800;color:var(--carvao);font-variant-numeric:tabular-nums}

/* ---------- prova / plano --------------------------------------------------- */
.nota{display:flex;flex-direction:column;align-items:center;gap:4px}
.nota strong{font-size:42px;line-height:1;color:var(--carvao)}
.estrelas{color:var(--marca);font-size:20px;letter-spacing:3px}
.depoimentos{list-style:none;display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.depoimentos li{background:var(--papel);border-radius:var(--r);box-shadow:var(--sombra);padding:16px}
.depoimentos footer{display:flex;align-items:center;gap:9px;margin-top:10px}
.depoimentos img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.depoimentos cite{font-style:normal;font-weight:700;font-size:14px}
.cartao-plano{background:var(--papel);border-radius:var(--r-lg);box-shadow:var(--sombra-alta);padding:20px;display:flex;flex-direction:column;gap:17px}
.antes-depois{display:grid;grid-template-columns:1fr 1fr;gap:13px;text-align:center}
.antes-depois figcaption{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--suave);margin-bottom:7px}
.antes-depois b{display:block;margin-top:7px;font-size:18px;color:var(--carvao)}
.plano-itens{list-style:none;display:flex;flex-direction:column;gap:9px}
.plano-itens li{display:flex;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--linha)}
.plano-itens li:last-child{border:0;padding-bottom:0}
.plano-itens span{color:var(--suave)}

/* ---------- CTA fixo no rodapé (herdado do Protocolo) ---------------------- */
/* O botão de avanço não pode depender de rolagem: em tela longa (reforço com
   lista, perfil, plano pronto) o lead não via o CTA sem rolar — e são
   justamente as telas que ele lê com mais atenção. As OPÇÕES ficam no fluxo:
   fixar nove opções tomaria a tela inteira no celular. */
.cta-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:18px 18px calc(14px + env(safe-area-inset-bottom));
  /* o gradiente deixa o conteúdo "morrer" atrás da barra em vez de cortar */
  background:linear-gradient(180deg,rgba(255,254,241,0) 0%,#FFF7E4 32%,#FFF3D9 100%);
  pointer-events:none;
}
.cta-barra > *{pointer-events:auto}
.cta-barra-in{max-width:var(--col);margin-inline:auto}
body.tem-cta-fixo{padding-bottom:150px}
/* Em tela curta o rodapé cairia atrás da barra: o palco ocupa a altura visível
   e empurra o resto para baixo. `svh` porque no iPhone a barra do Safari muda
   a altura da viewport enquanto se rola. */
body.tem-cta-fixo #palco{min-height:calc(100svh - 210px)}

/* ---------- imagens das opções -------------------------------------------- */
/* As duas artes ficam empilhadas e a troca é por CSS: carregar a segunda só no
   clique faria a imagem chegar depois de o dedo sair da tela. */
.opcao{position:relative}
.opcao-img-sel{display:none}
.opcao.escolhida .opcao-img{display:none}
.opcao.escolhida .opcao-img-sel{display:block}
.opcao-parte{
  position:absolute;right:8px;bottom:8px;width:46px;height:auto;
  opacity:0;transform:scale(.9);transition:var(--transicao);pointer-events:none;
}
.opcao.escolhida .opcao-parte{opacity:1;transform:none}
.tela-multi .opcao-parte{position:static;width:100%;margin-top:6px;opacity:1;transform:none}

/* ---------- medida: o ícone da pergunta ------------------------------------ */
.medida-icone{width:64px;height:64px;margin:0 auto;object-fit:contain}

/* ---------- perfil: a figura do corpo -------------------------------------- */
.tela-perfil{position:relative}
.tela-perfil::before{
  content:"";position:absolute;inset:-10px -18px auto;height:210px;z-index:-1;
  background:var(--perfil-fundo) center/cover no-repeat;
  border-radius:var(--r-lg);opacity:.9;
}
.perfil-figura{width:min(260px,70%);height:auto;margin:0 auto;object-fit:contain}

/* ---------- montagem: a esteira de artes ----------------------------------- */
.montando-capa{width:min(320px,86%);height:auto;margin:0 auto;object-fit:contain}
.montando-esteira{
  width:100%;overflow:hidden;border-radius:var(--r-lg);
  -webkit-mask-image:var(--mascara);mask-image:var(--mascara);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.montando-trilho{display:flex;gap:10px;width:max-content;animation:esteira 12s linear infinite}
.montando-trilho img{height:130px;width:auto;border-radius:var(--r-sm)}
@keyframes esteira{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.montando-trilho{animation:none}}

/* ---------- desktop --------------------------------------------------------- */
/* O erro clássico é deixar o mobile inteiro do jeito que está e centralizar:
   vira um bilhete no meio de um deserto branco. A coluna cresce, o cartão
   ganha respiro e as grades usam a largura. */
@media (min-width:768px){
  :root{--col:660px}
  body{font-size:18px}
  #palco{padding:40px 24px 64px}
  .tela{gap:22px}
  .opcao{padding:18px 20px;min-height:68px}
  .tela-cards .opcoes{grid-template-columns:repeat(4,1fr)}
  .opcoes.grade{grid-template-columns:repeat(3,1fr)}
  .cartao-perfil,.cartao-plano,.grafico{padding:28px}
  .depoimentos{display:grid;grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  :root{--col:720px}
}