/* =========================================================================
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;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{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)}
/* QUANTAS COLUNAS — quem decide é a QUANTIDADE de opções (`data-colunas`,
posto pelo motor), não um número fixo aqui. Três colunas fixas faziam quatro
opções virarem 3 + 1, com a última órfã numa linha só para ela. */
.opcoes[data-colunas="2"]{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.opcoes[data-colunas="3"]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* Lista vertical continua vertical: só vira grade quem tem imagem — texto em
duas colunas encurta a linha e piora a leitura. */
.tela-escolha .opcoes:not(.grade){display:flex;flex-direction:column}
/* corpo: silhueta grande, texto pequeno */
.tela-corpo .opcoes{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)}
/* ---------- ramo por gênero, sem piscar ------------------------------------
As duas artes vivem no HTML; a classe no (posta por ,
síncrono no ) diz qual aparece. Trocar por JS depois do paint é
o que fazia a mulher ver o corpo masculino por alguns quadros. */
.so-f,.so-m{display:none}
html.genero-f .so-f{display:block}
html.genero-m .so-m{display:block}
/* Sem classe nenhuma (JS bloqueado): mostra o feminino, que é a maioria do
público — melhor um padrão do que dois corpos empilhados. */
html:not(.genero-f):not(.genero-m) .so-f{display:block}
/* ---------- 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 */
/* A COR VEM DA OFERTA, não do CSS. O degradê estava cravado no amarelo do
primeiro funil que usou este motor — e todo clone seguinte herdava um
rodapé de outra marca. `--cta-barra-fundo` é definido no `index.html` de
cada oferta, junto com as outras cores; o valor abaixo é só a reserva. */
background:var(--cta-barra-fundo, linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 34%,#fff 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}
/* ---------- a arte da tela --------------------------------------------------
A ilustração que acompanha a pergunta, acima das opções. Altura limitada
para não empurrar as opções para fora da dobra no celular — a arte serve à
pergunta, não o contrário. */
.tela-arte{
width:100%;max-width:420px;height:auto;max-height:34svh;
margin:0 auto;object-fit:contain;border-radius:var(--r-lg);
}
.tela-multi .tela-arte{max-height:26svh}
/* ---------- 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;
}
/* A figura ancora a tela, mas não pode empurrar o IMC e os riscos para fora
da dobra: é o número e a leitura que fazem o pico de medo, não a foto. */
.perfil-figura{width:min(240px,62%);max-height:34svh;height:auto;margin:0 auto;object-fit:contain}
/* ---------- plano pronto: o gráfico do peso -------------------------------- */
.grafico-plano{background:var(--papel);border-radius:var(--r-lg);padding:16px}
.grafico-rotulo{
display:inline-block;margin-bottom:6px;padding:4px 10px;border-radius:8px;
background:var(--marca-luz);color:var(--marca-esc);font-size:12.5px;font-weight:800;
}
.grafico-plano svg{width:100%;height:auto;overflow:visible}
/* ---------- montagem: a esteira de artes ----------------------------------- */
.montando-capa{width:min(320px,86%);height:auto;margin:0 auto;object-fit:contain}
/* TRÊS COLUNAS SUBINDO, com o véu do original por cima.
As artes de `scrollImage` são colunas altas (318x1860) — não fotos soltas.
E o `maskImage` não é máscara: é um VÉU branco que desvanece topo e base.
Usá-lo em `mask-image` não fazia nada (a arte é opaca, então a máscara
deixava tudo visível); por cima, ele faz o que foi desenhado para fazer. */
.montando-esteira{
position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
height:min(42svh,290px);overflow:hidden;border-radius:var(--r-lg);
}
.montando-coluna{overflow:hidden}
.montando-fita{
display:flex;flex-direction:column;
animation:subir var(--dur,18s) linear infinite;animation-delay:var(--atraso,0s);
}
/* sem gap entre as duas cópias: o -50% do laço só fecha sem costura se a
segunda cópia começar exatamente onde a primeira termina */
.montando-fita img{width:100%;height:auto;display:block}
@keyframes subir{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.montando-veu{
position:absolute;inset:0;width:100%;height:100%;
object-fit:fill;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.montando-fita{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}
/* no desktop as colunas seguem a mesma regra: o data-colunas manda */
.cartao-perfil,.cartao-plano,.grafico{padding:28px}
.depoimentos{display:grid;grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
:root{--col:720px}
}
/* =========================================================================
ESCOLHA DE GÊNERO SEM PISCAR
-------------------------------------------------------------------------
Toda peça que tem uma versão base e um ramo (masculino/feminino) carrega as
DUAS artes no HTML; quem esconde uma delas é este bloco, e não o JS.
O motivo é que qualquer troca feita depois do primeiro paint aparece: o
lead via, por alguns quadros, o corpo do outro gênero na tela que promete o
resultado DELE. Com as duas no markup e a classe posta por `genero-cedo.js`
— script SÍNCRONO no , antes do primeiro pixel — a versão errada
nunca chega a ser pintada.
Repare que o padrão é FEMININO e não depende de classe nenhuma: se o
sessionStorage estiver bloqueado (janela privada) ou o script falhar, a
página ainda mostra UMA silhueta — não as duas empilhadas. É a maioria do
público, então o palpite erra menos. */
html:not(.genero-m) .so-m { display: none !important; }
html.genero-m .so-f { display: none !important; }
/* ---------- zonas-alvo: a mancha sobre o corpo -----------------------------
As duas artes têm o mesmo tamanho e foram feitas para se sobrepor pixel a
pixel. O cartão empilha as duas na mesma caixa, com `contain` nas duas: é o
`contain` que garante o alinhamento — qualquer `cover` recortaria uma
diferente da outra e a mancha sairia do lugar do corpo. */
.tela-zonas .opcao{flex-direction:column;gap:8px;padding:12px 10px 14px;align-items:center}
.zona-arte{
position:relative;display:block;width:100%;height:210px;
}
.zona-arte img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:center;
}
/* a mancha entra com um leve pulso ao marcar: confirma o toque sem trocar arte */
.zona-parte{opacity:.92;transition:opacity .18s,filter .18s}
.tela-zonas .escolhida .zona-parte{opacity:1;filter:saturate(1.25)}
.tela-zonas .opcao-txt{font-size:14.5px;font-weight:700;text-align:center}
@media (min-width:768px){
.zona-arte{height:270px}
}
/* ---------- data do evento --------------------------------------------------
O `` continua ali, e é ele que abre o calendário do
aparelho — mas transparente e do tamanho do cartão inteiro: a área de toque
é o cartão todo, e o que o lead lê é a data por extenso, não "19/11/2026"
em fonte de sistema. */
.tela-data .data-cartao{
position:relative;display:flex;align-items:center;gap:14px;
padding:18px 16px;background:#fff;border:1.5px solid var(--linha);
border-radius:var(--r-lg);box-shadow:var(--sombra);
transition:border-color .18s,box-shadow .18s;
}
.tela-data .data-cartao:focus-within{border-color:var(--marca);box-shadow:0 0 0 4px var(--marca-luz)}
.data-icone{
flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
background:var(--marca-luz);color:var(--marca-esc);
}
.data-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.data-texto strong{font-size:19px;font-weight:800;color:var(--carvao);letter-spacing:-.01em}
.data-texto small{font-size:13.5px;color:var(--suave)}
.data-editar{flex:none;color:var(--suave)}
/* invisível E por cima: quem recebe o toque é ele, em qualquer ponto do cartão */
.data-alvo{
position:absolute;inset:0;width:100%;height:100%;
opacity:0;border:0;background:transparent;cursor:pointer;
font-size:16px; /* menor que 16px faz o iOS dar zoom ao focar */
}
.tela-data .atalhos{
display:grid;grid-template-columns:repeat(2,1fr);gap:9px;list-style:none;margin-top:14px;
}
.tela-data .atalho{
width:100%;padding:13px 10px;border-radius:var(--r);
background:#fff;border:1.5px solid var(--linha);
font-size:14.5px;font-weight:700;color:var(--texto);
transition:border-color .16s,background .16s,color .16s;
}
.tela-data .atalho.escolhida{
border-color:var(--marca);background:var(--marca-luz);color:var(--marca-esc);
}
@media (min-width:768px){
.tela-data .atalhos{grid-template-columns:repeat(4,1fr)}
.data-texto strong{font-size:22px}
}
/* ---------- gráfico da projeção: os balões e o selo -------------------------
O selo diz de cara o que a curva só insinua (a queda e em quanto tempo), e
os balões prendem os pesos AOS PONTOS da linha — no rodapé, como estavam,
o lead tinha de ligar número a extremidade com o olho. */
.grafico-rico{position:relative;padding-top:14px}
.grafico-selo{
display:flex;align-items:baseline;justify-content:center;gap:8px;
margin-bottom:6px;
}
.grafico-selo strong{font-size:26px;font-weight:800;color:var(--marca-esc);letter-spacing:-.02em}
.grafico-selo span{font-size:13.5px;color:var(--suave)}
/* os balões são dentro do SVG: sem posicionamento a acertar, sem sair do
cartão, e acompanham qualquer largura de tela */
.grafico-rico svg{width:100%;height:auto;overflow:visible}
.grafico-rico .grafico-eixo{margin-top:8px}
/* ---------- e-mail: a última porta antes da oferta -------------------------
Campo grande, teclado certo e um botão que só liga quando o endereço vale.
`font-size:16px` não é escolha estética: abaixo disso o iOS dá zoom ao focar
e o lead perde o enquadramento da tela no meio do funil. */
.tela-email .email-campo{display:flex;flex-direction:column;gap:8px}
.email-alvo{
width:100%;padding:17px 16px;font-size:16px;
background:#fff;border:1.5px solid var(--linha);border-radius:var(--r);
color:var(--carvao);transition:border-color .16s,box-shadow .16s;
}
.email-alvo::placeholder{color:#A9A59C}
.email-alvo:focus{outline:0;border-color:var(--marca);box-shadow:0 0 0 4px var(--marca-luz)}
.email-erro{font-size:13.5px;color:#D93025;font-weight:600}
.email-nota{
display:flex;align-items:flex-start;gap:8px;
font-size:13px;line-height:1.5;color:var(--suave);
}
.email-nota::before{
content:"";flex:none;width:15px;height:15px;margin-top:2px;
background:currentColor;opacity:.65;
-webkit-mask:var(--cadeado) center/contain no-repeat;mask:var(--cadeado) center/contain no-repeat;
}
:root{
/* cadeado desenhado: emoji muda de forma em cada sistema e desalinha */
--cadeado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
/* =========================================================================
TIPOS DESTE FUNIL — busca de raça e caixa de presente.
Ficam aqui, e não no motor, pela mesma razão que o `telas-extra.js`: ainda
não provaram que servem a mais de uma oferta.
========================================================================= */
/* ---------- busca ----------------------------------------------------------
555 raças não cabem em botão. O campo sugere enquanto o lead digita, e o
botão só liga quando existe uma escolha — texto livre viraria resposta que
o funil não sabe usar. */
.tela-busca .busca-campo{position:relative}
.busca-alvo{
width:100%;padding:17px 16px;font-size:16px;
background:#fff;border:1.5px solid var(--linha);border-radius:var(--r);
color:var(--carvao);transition:border-color .16s,box-shadow .16s;
}
.busca-alvo:focus{outline:0;border-color:var(--marca);box-shadow:0 0 0 4px var(--marca-luz)}
.busca-lista{
position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
list-style:none;margin:0;padding:6px;max-height:46svh;overflow-y:auto;
background:#fff;border:1.5px solid var(--linha);border-radius:var(--r);
box-shadow:var(--sombra-alta);
}
.busca-lista li{
padding:12px 12px;border-radius:10px;font-size:15.5px;color:var(--texto);cursor:pointer;
}
.busca-lista li:hover,.busca-lista li:focus{background:var(--marca-luz);color:var(--marca-esc);outline:0}
/* o "não sei" é saída legítima e precisa parecer isso: visível, sem competir
com o botão principal */
.cta-fantasma{
display:block;width:100%;margin-top:10px;padding:14px;
background:transparent;border:0;font-size:15px;font-weight:700;
color:var(--suave);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
/* ---------- caixa de presente ---------------------------------------------
A mecânica troca o instante em que o preço chega: de "quanto custa" para
"quanto eu ganhei". A caixa tocada abre; as outras apagam, para o olho não
procurar o que já não importa. */
.tela-premio .premio-caixas{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:18px 0 0;
}
.premio-caixa{
position:relative;width:100%;aspect-ratio:1;padding:0;border:0;background:transparent;cursor:pointer;
transition:transform .18s,opacity .25s;
}
.premio-caixa:active{transform:scale(.95)}
.premio-caixa img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s,transform .45s}
.premio-caixa .caixa-aberta{opacity:0;transform:scale(.85)}
.premio-caixa.aberta .caixa-fechada{opacity:0}
.premio-caixa.aberta .caixa-aberta{opacity:1;transform:scale(1.08)}
.premio-caixa.apagada{opacity:.28;pointer-events:none}
@media (prefers-reduced-motion:reduce){.premio-caixa,.premio-caixa img{transition:none}}
.premio-resultado{
display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:26px;
animation:premio-entra .34s cubic-bezier(.22,1,.36,1);
}
.premio-resultado strong{
font-size:clamp(40px,12vw,58px);font-weight:800;color:var(--marca);
line-height:1;letter-spacing:-.03em;
}
.premio-resultado span{font-size:16px;font-weight:700;color:var(--carvao)}
@keyframes premio-entra{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.premio-resultado{animation:none}}
/* ---------- nível com arte: a figura muda com o degrau ---------------------
É o que o original faz e o que dá sentido à escala: o lead vê o cachorro
mudar conforme sobe ou desce, então entende o que cada degrau significa sem
precisar ler a descrição inteira.
As artes ficam TODAS no DOM, empilhadas, e a troca é de classe. Trocar o
`src` faria a primeira mudança piscar — a imagem só chegaria depois do dedo
já ter passado. */
.tela-nivel.com-arte .nivel-arte{
position:relative;width:100%;height:min(34svh,240px);margin-bottom:6px;
}
.nivel-arte img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
opacity:0;transition:opacity .22s ease;
}
.nivel-arte img.ativa{opacity:1}
@media (prefers-reduced-motion:reduce){.nivel-arte img{transition:none}}
/* ---------- comparativo: o antes e o depois -------------------------------
Tela de largura cheia em roxo, como no original: é o único momento do funil
em que a marca toma a tela inteira, e isso marca a virada — daqui em diante
fala-se de resultado, não de diagnóstico. */
.tela-comparativo{
margin:calc(var(--tela-gap, 18px) * -1) -18px 0;
padding:26px 18px 24px;
background:var(--marca);color:#fff;
min-height:calc(100svh - 64px);
}
.tela-comparativo .tela-titulo{color:#fff;text-align:center;margin-bottom:18px}
.comp-fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.comp-fotos img{width:100%;aspect-ratio:1/1.1;object-fit:cover;border-radius:18px;background:rgba(255,255,255,.15)}
/* a seta fica no meio, sobre as duas: é ela que diz que uma vira a outra */
.comp-seta{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
background:#22C55E;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.comp-cartoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.comp-cartao{
display:flex;flex-direction:column;gap:6px;
background:#fff;border-radius:18px;padding:14px 13px 16px;color:var(--carvao);
}
.comp-rotulo{font-size:12.5px;color:#6b7280;line-height:1.25}
.comp-cartao strong{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.comp-barra{display:block;height:7px;border-radius:99px;background:#E9E9EF;overflow:hidden;margin:4px 0 6px}
.comp-barra i{display:block;height:100%;width:calc(var(--n) * 100%);border-radius:99px}
.comp-ruim .comp-barra i{background:linear-gradient(90deg,#FB923C,#F97316)}
.comp-bom .comp-barra i{background:linear-gradient(90deg,#4ADE80,#22C55E)}
.comp-cartao ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0}
.comp-cartao li{font-size:13.5px;line-height:1.35;color:#374151}
/* o botão fica branco sobre o roxo — inverter aqui é o que o original faz */
.tela-comparativo .cta{background:#fff;color:var(--carvao)}
@media (min-width:768px){
.tela-comparativo{border-radius:24px;margin-inline:0;padding:34px 28px}
.comp-cartao li{font-size:14.5px}
}
/* o botão da tela roxa é branco — e ele vive na barra fixa, fora da seção,
então quem o alcança é o tipo marcado no */
body[data-tipo-tela="comparativo"] .cta-barra{background:transparent}
body[data-tipo-tela="comparativo"] .cta-barra .cta{background:#fff;color:var(--carvao)}
/* ---------- busca: os atalhos populares -----------------------------------
Treze raças cobrem a maioria dos cães. O campo continua ali para quem tem um
vira-lata de nome difícil, mas o caminho principal é tocar num chip — pedir
que o lead DIGITE no meio de um quiz é o pior pedido possível. */
.busca-rotulo{
margin:18px 0 10px;text-align:center;
font-size:12px;font-weight:800;letter-spacing:.09em;color:#9ca3af;
}
.busca-chips{
list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0;
}
.chip{
padding:12px 17px;border-radius:99px;border:1.5px solid transparent;
background:#F0F0F3;color:#4b5563;
font-family:var(--fonte-texto);font-size:15px;font-weight:600;cursor:pointer;
transition:background .16s,color .16s,border-color .16s,transform .12s;
}
.chip:active{transform:scale(.97)}
.chip.escolhido{background:var(--marca-luz);border-color:var(--marca);color:var(--marca-esc);font-weight:800}
/* o campo do original é tracejado: sinaliza "aqui você escreve" sem parecer
um formulário fechado */
.tela-busca .busca-alvo{border:2px dashed #d4d4d8;border-radius:99px;text-align:center;font-size:16px}
.tela-busca .busca-alvo:focus{border-style:solid;border-color:var(--marca)}
/* ---------- barra de ETAPAS ------------------------------------------------
Quatro etapas nomeadas no lugar da régua fina. Uma régua diz "faltam 80%",
que desanima; quatro etapas dizem "você está na terceira de quatro" — o lead
sabe onde está e quanto falta numa olhada. */
.etapas{
position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
align-items:end;gap:0;padding:6px 16px 14px;
}
.etapa{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:2}
.etapa-nome{
font-size:11.5px;line-height:1.2;font-weight:700;text-align:center;color:#b8b8bf;
transition:color .25s;
}
.etapa.feita .etapa-nome{color:#9ca3af}
.etapa.agora .etapa-nome{color:#16A34A}
.etapa-bola{
display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
background:#EDEDF0;color:#9ca3af;font-size:12.5px;font-weight:800;
transition:background .25s,color .25s,transform .25s;
}
.etapa-bola svg{display:none}
.etapa.feita .etapa-bola,.etapa.agora .etapa-bola{background:#16A34A;color:#fff}
.etapa.feita .etapa-bola b{display:none}
.etapa.feita .etapa-bola svg{display:block}
.etapa.agora .etapa-bola{transform:scale(1.08)}
/* a trilha atrás das bolinhas: cinza inteira, verde até a etapa atual */
.etapas::before,.etapas-trilha{
content:"";position:absolute;left:calc(16px + 12.5% - 13px);right:calc(16px + 12.5% - 13px);
bottom:calc(14px + 13px - 2px);height:4px;border-radius:99px;
}
.etapas::before{background:#EDEDF0;z-index:0}
.etapas-trilha{
background:#16A34A;z-index:1;transform-origin:left center;
transform:scaleX(var(--n,0));transition:transform .45s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){.etapas-trilha{transition:none}}
/* na entrega as etapas somem, como a régua antiga fazia: enquanto elas existem,
tudo lê como "mais uma pergunta antes do prêmio" */
.fase-entrega .etapas{visibility:hidden}
/* ---------- tela colorida -------------------------------------------------
A cor toma a tela inteira, sangrando pelas laterais e pelo topo. É o que
marca a virada do funil: prova social e plano pronto não são "mais uma
pergunta", e o lead sente isso antes de ler qualquer palavra. */
.tela[data-colorida]{
background:var(--tela-fundo);
margin:-18px -18px 0;padding:26px 18px 24px;
min-height:calc(100svh - 120px);
display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.tela[data-colorida] .tela-titulo,
.tela[data-colorida] .tela-sub{color:#fff;text-align:center}
.tela[data-colorida] .tela-arte{border-radius:18px}
/* o botão fica branco sobre a cor — e ele vive na barra fixa, fora da seção,
então quem o alcança é a marca no */
body[data-tela-colorida] .cta-barra{background:transparent}
body[data-tela-colorida] .cta-barra .cta{background:#fff;color:var(--carvao)}
@media (min-width:768px){
.tela[data-colorida]{border-radius:24px;margin-inline:0;padding:34px 28px}
}
/* ---------- slider: arrastar para responder -------------------------------
O controle é grande (34px) porque é feito para o POLEGAR, não para o mouse:
alvo menor que isso no celular erra, e errar aqui é o lead responder outra
coisa sem perceber. */
.tela-slider{display:flex;flex-direction:column;gap:0}
.slider-arte{position:relative;width:100%;height:min(32svh,240px);margin-bottom:10px}
.slider-arte img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
opacity:0;transform:scale(.97);transition:opacity .2s,transform .2s;
}
.slider-arte img.ativa{opacity:1;transform:none}
.slider-cartao{
display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
background:var(--marca-luz);border:1.5px solid var(--marca);
border-radius:18px;padding:16px 18px;min-height:92px;justify-content:center;
}
.slider-cartao strong{font-size:19px;font-weight:800;color:var(--marca-esc);line-height:1.2}
.slider-cartao span{font-size:14px;line-height:1.45;color:#4b5563}
.slider-dica{
margin:22px 0 12px;text-align:center;
font-size:12px;font-weight:800;letter-spacing:.1em;color:#9ca3af;
}
.slider-trilho{
position:relative;height:34px;margin:0 17px 8px;cursor:grab;touch-action:none;
display:flex;align-items:center;
}
.slider-trilho:active,.slider-trilho.arrastando{cursor:grabbing}
.slider-trilho::before{
content:"";position:absolute;left:0;right:0;height:10px;border-radius:99px;background:#EDEDF0;
}
.slider-preenchido{
position:absolute;left:0;height:10px;border-radius:99px;background:var(--marca);
width:calc(var(--p,0) * 100%);
transition:width .22s cubic-bezier(.22,1,.36,1);
}
.slider-marca{
position:absolute;left:calc(var(--p) * 100%);transform:translateX(-50%);
width:10px;height:10px;border-radius:50%;background:#DCDCE3;cursor:pointer;
}
.slider-botao{
position:absolute;left:calc(var(--p,0) * 100%);transform:translateX(-50%);
width:34px;height:34px;border-radius:50%;
background:var(--marca);border:4px solid #fff;
box-shadow:0 3px 12px rgba(94,80,245,.42);
transition:left .22s cubic-bezier(.22,1,.36,1),transform .14s;
}
.slider-trilho.arrastando .slider-botao{transform:translateX(-50%) scale(1.12)}
/* durante o arrasto a transição sai do caminho: o controle tem de colar no
dedo, senão o gesto parece travado */
.slider-trilho.sem-animacao .slider-botao,
.slider-trilho.sem-animacao .slider-preenchido{transition:none}
.slider-trilho:focus-visible{outline:0}
.slider-trilho:focus-visible .slider-botao{box-shadow:0 0 0 4px var(--marca-luz),0 3px 12px rgba(94,80,245,.42)}
@media (prefers-reduced-motion:reduce){
.slider-botao,.slider-preenchido,.slider-arte img{transition:none}
}