/* Variante visual: mesmo conteúdo e mesmos assets, tratamento audiovisual novo.
   Não depende de funil.css — é uma folha independente para comparação limpa. */

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('media/poppins-400.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('media/poppins-600.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('media/poppins-700.woff2') format('woff2')}
/* Font faces são registradas no documento; somente a oferta usa estas famílias. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 800;font-display:swap;src:url('oferta/fonts/plus-jakarta-sans-latin.woff2') format('woff2')}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url('oferta/fonts/dm-sans-latin.woff2') format('woff2')}

:root{
  --accent:#dc2626;
  --accent-ink:#b91c1c;
  --accent-soft:rgba(220,38,38,.10);
  --danger:#dc2626;
  --ink:#0e1512;
  --muted:#5f716a;
  --line:#e4eae6;
  --soft:#f7faf8;
  --paper:#fff;
  --cta:#16a34a;
  --cta-ink:#15803d;
  --cta-soft:rgba(22,163,74,.12);
  /* Escala amarrada à altura da tela: em telas baixas tudo encolhe junto,
     para o botão da etapa caber sem precisar de barra fixa por cima. */
  --gap:clamp(10px,1.55vh,16px);
  --pad-y:clamp(10px,1.7vh,16px);
  --fs-h1:clamp(20px,3.05vh,27px);
  --fs-body:clamp(13px,1.85vh,15px);
  --fs-sub:clamp(11.5px,1.6vh,13.5px);
  --h-btn:clamp(52px,7.2vh,64px);
  --fs-btn:clamp(16.5px,2.25vh,19px);
  --h-opt:clamp(62px,8.8vh,76px);
  --gap-opt:clamp(10px,1.7vh,16px);
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:260ms;
  color-scheme:light;
  font-family:Poppins,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper)}
body{color:var(--ink);min-width:320px;-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;font-family:inherit}
img{max-width:100%;height:auto;display:block}
picture{display:block}
h1,h2,p,dl,dd{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid #235ec8;outline-offset:3px}

/* ---------- moldura ---------- */
#shell{max-width:520px;margin:0 auto;background:var(--paper);min-height:100vh;position:relative}

/* ---------- topo ---------- */
/* Sem sticky nem fixed: o cabeçalho rola junto e nunca cobre o título. */
.topbar{position:static;background:var(--paper);padding:clamp(6px,1.1vh,10px) 18px clamp(5px,.9vh,8px)}
.brand{display:flex;align-items:center;gap:8px;height:clamp(32px,4.9vh,40px)}
.back{width:38px;height:38px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;flex:none;color:var(--ink)}
.back:hover{background:#0e15120e}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-logo{flex:1;display:flex;justify-content:center}
.brand-logo img{height:clamp(30px,4.6vh,38px);width:auto;object-fit:contain}
.spacer{width:38px;flex:none}
.bar-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.track{flex:1;height:clamp(9px,1.7vh,14px);border-radius:99px;background:#dde4e0;overflow:hidden;position:relative}
.fill{height:100%;width:15%;border-radius:99px;position:relative;
  background:var(--accent);   /* celular sem color-mix fica com a cor lisa em vez de barra invisível */
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent));
  transition:width 700ms cubic-bezier(.34,1.3,.64,1),background 600ms linear}
.fill::after{content:"";position:absolute;inset:0;border-radius:99px;opacity:0;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.75) 50%,transparent 78%);background-size:220% 100%}
body.working .fill::after{opacity:1;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
.stepcount{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
/* "x de 11" oculto: o contador continua sendo atualizado pelo visual.js. Para voltar, é só apagar esta linha. */
.stepcount{display:none}

/* ---------- etapas ---------- */
html{overflow-anchor:none}
#app{position:relative;overflow-x:hidden;overflow-x:clip;overflow-anchor:none;padding:var(--pad-y) 18px calc(var(--pad-y) + 10px + env(safe-area-inset-bottom,0px))}
.screen{display:flex;flex-direction:column;gap:var(--gap)}
.screen.enter{animation:slideIn var(--dur) var(--ease)}
.screen.enter-back{animation:slideBack var(--dur) var(--ease)}
@keyframes slideIn{from{transform:translateX(100%);opacity:.35}to{transform:none;opacity:1}}
@keyframes slideBack{from{transform:translateX(-100%);opacity:.35}to{transform:none;opacity:1}}

h1.q{font-size:var(--fs-h1);line-height:1.22;font-weight:700;letter-spacing:-.018em;text-wrap:balance;text-align:center}
p.sub{font-size:var(--fs-sub);color:var(--muted);text-align:center}
/* No lugar do emoji 👇 da abertura: a mesma seta dupla do título da tela final, balançando para o vídeo.
   As margens negativas mantêm a altura da linha: a tela não cresce e o botão segue à vista. */
.seta-sub{display:inline-block;width:1.6em;height:1.6em;margin:-.35em 0 -.35em .2em;vertical-align:middle;overflow:visible;
  fill:none;stroke:var(--danger);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:setaSub 1.2s ease-in-out infinite}
@keyframes setaSub{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
p.body{font-size:var(--fs-body);line-height:1.5;text-align:left}
.lead-accent{color:var(--accent-ink);transition:color 500ms linear}

/* ---------- opções ---------- */
.options{display:flex;flex-direction:column;gap:var(--gap-opt)}
.option{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 26px;align-items:center;gap:12px;
  width:100%;min-height:var(--h-opt);padding:clamp(11px,1.6vh,15px) 16px;text-align:left;background:var(--soft);
  border:1.5px solid var(--line);border-bottom-width:4px;border-radius:15px;
  box-shadow:0 8px 18px -10px rgba(15,60,40,.22);
  transition:background 160ms ease,border-color 160ms ease,transform 110ms ease;
}
.option.has-emoji{grid-template-columns:34px 1fr 26px}
.option:active{transform:scale(.988)}
.option .emo{font-size:27px;line-height:1}
.option .t{display:block;font-size:clamp(16px,2.25vh,18px);font-weight:600;line-height:1.32}
.option .t strong{font-weight:700}
.option .d{display:block;font-size:clamp(12px,1.7vh,13px);line-height:1.4;color:var(--cta-ink);font-weight:600;margin-top:4px}
.option .tick{width:26px;height:26px;opacity:0;transition:opacity 120ms}
.option .tick circle{fill:var(--cta)}
.option .tick path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}
.option.chosen{background:var(--cta-soft);border-color:var(--cta)}
.option.chosen .tick{opacity:1}
.option.chosen .tick path{animation:draw 220ms ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.option.in{animation:optIn 220ms var(--ease)}
@keyframes optIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ripple{position:absolute;border-radius:50%;background:var(--cta);opacity:.2;transform:scale(0);animation:rip 520ms ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

/* ---------- botão ---------- */
.primary{
  display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  width:100%;min-height:var(--h-btn);border:0;border-radius:15px;color:#fff;font-size:var(--fs-btn);font-weight:700;letter-spacing:.01em;
  background:linear-gradient(180deg,#1eb355,#15903f);
  box-shadow:0 9px 22px -10px rgba(21,144,63,.7),inset 0 -3px 0 rgba(0,0,0,.16);
  transition:transform 110ms ease}
.primary:active{transform:scale(.988)}
.primary.pulsing{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.primary.locked{background:#e9eeeb;color:#46564e;box-shadow:none;animation:none;
  font-size:15.5px;font-weight:600;min-height:60px;pointer-events:none;gap:6px}
.primary.locked b{font-variant-numeric:tabular-nums;color:var(--cta-ink);font-weight:700}
.gate{min-height:var(--h-btn);display:grid}
/* Contador escondido até o vídeo tocar com som (o lugar fica reservado: nada pula na tela).
   Ao ligar o som ele surge; ao liberar, o botão verde surge do mesmo jeito e segue pulsando. */
.gate .primary.aguardando{visibility:hidden;opacity:0}
.gate .primary.surgindo{animation:surge 560ms var(--ease) both}
.gate .primary.pulsing.surgindo{animation:surge 560ms var(--ease) both,pulse 1.6s ease-in-out 560ms infinite}
@keyframes surge{0%{opacity:0;transform:translateY(14px) scale(.92)}60%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{opacity:1;transform:none}}
.plain{min-height:46px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px}

/* ---------- vídeo ---------- */
.video-unit{display:grid;gap:10px}
.video{position:relative;width:100%;aspect-ratio:var(--ratio,108/140);border-radius:12px;overflow:hidden;background:#0b0f0d}
.video iframe{position:absolute;top:0;left:0;inset:0;width:100%;height:100%;border:0;border-radius:12px;z-index:1}
/* Celular sem aspect-ratio (iOS 14, Chrome antes do 88): sem isto o vídeo ficava com altura zero, invisível,
   e o botão, que depende do vídeo, nunca aparecia. A altura vem em --pt, calculada no visual.js. */
@supports not (aspect-ratio:1/1){
  .video{height:0;padding-top:var(--pt,129.63%)}
  .rail .video{padding-top:177.78%}
}
.video .lqip{position:absolute;inset:0;z-index:2;pointer-events:none;filter:blur(20px);transform:scale(1.12);transition:opacity 500ms ease;
  background:radial-gradient(52% 40% at 50% 26%,#e3c0a2 0%,#b98f6c 52%,transparent 76%),
             radial-gradient(100% 55% at 50% 100%,#14311f 0%,transparent 72%),
             linear-gradient(180deg,#a9c8dc 0%,#79a0b7 42%,#24402f 100%)}
.video.ready .lqip{opacity:0}
.vnote{font-size:13px;line-height:1.5;color:#795419;background:#fff8e8;border:1px solid #e3cc95;border-radius:10px;padding:10px 12px}
.vnote button{background:none;border:0;text-decoration:underline;color:#75500b;padding:8px 0;font-size:13px;font-weight:700}
/* Arrasta pro lado: o slide ocupa quase a tela inteira e deixa uma fresta do próximo,
   que é o que sinaliza "tem mais aqui" sem precisar encolher os vídeos. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(22vh,200px);gap:14px;align-items:start;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>figure{margin:0;display:grid;gap:clamp(6px,1.1vh,10px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
/* Os depoimentos são 9:16; a proporção do embed original deixava tarja preta nas laterais. */
.rail .video{aspect-ratio:9/16;width:100%}
.rail-caption{font-size:clamp(13px,1.85vh,15px);line-height:1.45;color:var(--muted);text-align:center;min-height:2.9em}
.rail-caption strong{color:var(--ink);font-weight:700}
@media(max-width:339px){ .rail{grid-template-columns:1fr} }

.fade-out{opacity:0;transform:translateY(10px);transition:opacity 220ms ease,transform 220ms var(--ease);pointer-events:none}
.screen.centered{min-height:calc(100vh - 210px);justify-content:center}
.screen.centered .meter{transform:scale(1.12);transition:transform 600ms var(--ease)}
.screen.centered h1.q{opacity:.35;transition:opacity 300ms ease}
/* O "0" não fica parado na tela: a pontuação aparece junto com a contagem. */
#preview-readout{display:none}
.screen.centered #preview-readout{display:flex;animation:softIn 340ms ease both}
@keyframes softIn{from{opacity:0}to{opacity:1}}

/* ---------- medidor ---------- */
.meter{display:grid;justify-items:center}
.meter svg{width:100%;max-width:290px;height:auto;overflow:hidden;display:block}
.meter.glow .arcfg{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 80%,transparent))}
#needle-preview{transition:transform 320ms var(--ease)}
.readout{margin-top:-8px;display:flex;align-items:flex-end;justify-content:center;gap:16px}
.rd{display:grid;justify-items:center;gap:1px}
.rd .n{font-variant-numeric:tabular-nums;font-weight:700;line-height:1}
.rd .l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rd.now .n{font-size:25px;color:var(--danger)}
.rd.sep{font-size:19px;color:var(--muted);padding-bottom:11px}
.rd.goal .n{font-size:44px;color:var(--accent-ink);transition:color 500ms linear}
.rd.goal .l{color:var(--accent-ink);font-weight:700}
.bandtag{justify-self:center;font-size:11.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:99px;padding:4px 12px;opacity:0;transition:opacity 400ms ease}
.bandtag.on{opacity:1}

/* ---------- formulário ---------- */
.field{display:grid;gap:7px}
.field label{font-size:15px;font-weight:600;display:flex;align-items:center;gap:.4em}
/* No lugar do emoji ⤵️: seta de caneta que sai do texto, faz a curva e aponta para o campo.
   Ela se desenha, fica um instante e some, em loop. As margens negativas deixam a seta descer
   até o campo sem aumentar a altura da linha. Em em, acompanha a fonte. */
.seta-campo{width:4em;height:2.67em;flex:none;margin:-.45em 0 -.95em;overflow:visible;
  fill:none;stroke:var(--cta);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.seta-campo path{stroke-dasharray:1;stroke-dashoffset:1}
.seta-campo .haste{animation:setaHaste 2.8s var(--ease) .3s infinite}
.seta-campo .ponta{animation:setaPonta 2.8s var(--ease) .3s infinite}
@keyframes setaHaste{0%{stroke-dashoffset:1;opacity:1}32%{stroke-dashoffset:0}78%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes setaPonta{0%,30%{stroke-dashoffset:1;opacity:1}44%{stroke-dashoffset:0}78%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){ .seta-campo path{stroke-dashoffset:0;animation:none} }
.shell{position:relative;display:flex;align-items:center}
.shell input{width:100%;height:60px;padding:0 46px 0 46px;border-radius:13px;border:1.5px solid #ccd8d0;background:#fff;font-size:17px;font-weight:500}
.shell input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px var(--cta-soft)}
.shell .lead{position:absolute;left:16px;width:19px;height:19px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shell .ok{position:absolute;right:15px;width:22px;height:22px;opacity:0;transition:opacity 180ms}
.shell.valid .ok{opacity:1}
.shell.valid input{border-color:var(--cta)}
.shell.bad input{border-color:var(--danger)}
#cpf{font-variant-numeric:tabular-nums;letter-spacing:.05em}
.hint{font-size:13px;color:var(--muted);min-height:18px;line-height:1.4}
.hint.bad{color:var(--danger);font-weight:600}
.trust{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--muted)}
.trust svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- análise ---------- */
.load{display:grid;justify-items:center;gap:20px;padding-top:12px}
.ring{position:relative;width:116px;height:116px}
.ring svg{width:116px;height:116px;transform:rotate(-90deg)}
.ring .bg{fill:none;stroke:var(--line);stroke-width:9}
.ring .fg{fill:none;stroke:var(--cta);stroke-width:9;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;
  transition:stroke-dashoffset 220ms linear,stroke 500ms linear}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-variant-numeric:tabular-nums;font-size:23px;font-weight:700;color:var(--cta-ink)}
.checks{display:grid;gap:12px;width:100%;max-width:300px}
.ck{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--muted);opacity:.42;transition:opacity 260ms,color 260ms}
.ck.now{opacity:1;color:var(--ink)}
.ck.done{opacity:1;color:var(--ink);font-weight:600}
.ck .box{width:25px;height:25px;flex:none;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:border-color 260ms,background 260ms}
.ck.done .box{background:var(--cta);border-color:var(--cta)}
.ck .box svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18}
.ck.done .box svg{animation:draw 260ms ease-out forwards}
.ck.now .box{border-color:var(--cta);animation:ringPulse 1s ease-in-out infinite}
@keyframes ringPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ---------- resultado ---------- */
.verdict{display:grid;gap:14px}
.verdict h1{font-size:23px;line-height:1.28;font-weight:700;text-align:left;letter-spacing:-.015em}
.verdict .tag{display:flex;align-items:center;gap:11px;background:#fef2f2;border:1px solid #f4c7c7;border-left:5px solid var(--danger);
  color:#991b1b;font-weight:700;font-size:15.5px;line-height:1.3;padding:14px 15px;border-radius:12px}
.verdict .tag svg{width:23px;height:23px;flex:none;fill:none;stroke:var(--danger);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doc{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 8px 18px -10px rgba(15,60,40,.2)}
.doc-h{background:var(--ink);color:#fff;padding:clamp(8px,1.25vh,11px) 14px;display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.doc-h .seal{display:flex;align-items:center;gap:7px;font-size:10px;color:#9fe8bd;letter-spacing:.06em}
.doc-h .seal i{width:7px;height:7px;border-radius:50%;background:#34d399;display:block}
/* Rótulo e valor na MESMA linha, como no original: empilhados gastavam 70-91px por linha. */
.doc dl{padding:clamp(9px,1.3vh,12px) 14px clamp(10px,1.5vh,13px);display:grid;gap:clamp(5px,.85vh,8px)}
.row{display:block;font-size:clamp(13.5px,1.9vh,15px);line-height:1.4;opacity:0;transform:translateY(6px)}
.row.shown{opacity:1;transform:none;transition:opacity 260ms ease,transform 260ms var(--ease)}
.row dt{display:inline;margin:0;color:var(--muted);font-weight:400}
.row dt::after{content:':\00a0'}
.row dd{display:inline;margin:0;font-weight:700;overflow-wrap:anywhere}
.row.bad dd{color:var(--danger)}
.row.bad.shown{animation:shake 380ms ease-out 120ms}
@keyframes shake{0%,100%{transform:translateX(0)}22%{transform:translateX(-5px)}48%{transform:translateX(5px)}74%{transform:translateX(-3px)}}
.scan{position:absolute;left:0;right:0;height:64px;top:-64px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 22%,transparent),transparent)}
.doc.scanning .scan{animation:scan 1s ease-in-out 2}
@keyframes scan{from{top:-64px}to{top:100%}}
.docfoot{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);line-height:1.45}
.docfoot svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- oferta ---------- */
.offer-title{color:var(--danger);font-size:19px;font-weight:800;line-height:1.3;text-align:center;text-wrap:balance}
/* O fit mede o botão mesmo invisível. A margem recolhe só o espaço depois dele,
   trazendo os comentários para baixo do vídeo; ao surgir, a lista desce suavemente.
   Contador e CTA têm a mesma altura, para não redimensionar o vídeo na liberação. */
#gate-final{transition:margin-bottom 360ms var(--ease)}
#gate-final .primary.locked{min-height:var(--h-btn)}
#gate-final.recolhido{margin-bottom:calc(0px - var(--h-btn) - var(--gap))}

.alert{font-size:14px;line-height:1.55;background:#fff8e8;border:1px solid #e3cc95;border-radius:12px;padding:14px;display:grid;gap:12px}
.foot{padding-top:14px;text-align:center;font-size:10.5px;color:var(--muted);line-height:1.6}

@media(prefers-reduced-motion:reduce){
  /* Zero evita medidas intermediárias ao recalcular --fit no mesmo quadro. */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important}
}
@media(max-width:359px){ #app{padding-left:15px;padding-right:15px} h1.q{font-size:23px} }

/* Telas baixas: aperta mais um pouco para o botão da etapa continuar à vista. */
@media (max-height:740px){
  :root{--gap:clamp(8px,1.25vh,12px);--pad-y:clamp(8px,1.3vh,12px)}
  p.body{line-height:1.42}
  .rail figcaption{line-height:1.38}
  }