:root{
  --bg:#ffffff;
  --bg2:#f7f3fc;        /* lilás bem claro */
  --card:#ffffff;
  --line:#e6dcf4;
  --text:#1b1030;
  --muted:#6b6180;
  --acc:#6d28d9;        /* violeta (não é o roxo exato da marca) */
  --acc-deep:#4c1d95;   /* violeta escuro para fundos */
  --acc-soft:#ede4fb;   /* violeta claro para fundos/tints */
  --hl:#d9bdfd;         /* destaque sobre fundo roxo */
  --cta:#16a34a;        /* verde: só nos botões de compra */
  --cta-deep:#15803d;
  --bad:#d92d2d;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  /* fonte do sistema: zero download (Roboto no Android, Segoe no Windows, SF no iPhone) */
  font-family:Roboto,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.45;
  padding-bottom:24px;
}
body.sticky-pad{padding-bottom:96px} /* só quando não há IntersectionObserver e a barra nunca some */
a{color:inherit}
b,strong{font-weight:800}
.hl{color:var(--hl)}
.tiny{font-size:12px;color:var(--muted);margin-top:10px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.nw{white-space:nowrap}

.topbar{background:var(--acc-deep);color:#ece4fb;font-size:11px;text-align:center;padding:6px 8px;line-height:1.35;text-wrap:balance}

#app{max-width:520px;margin:0 auto;padding:0 16px}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* hero em bloco roxo */
.hero{
  background:linear-gradient(160deg,var(--acc-deep),var(--acc));
  color:#fff;text-align:center;border-radius:var(--radius);
  padding:26px 18px 22px;margin:16px 0 18px;
  box-shadow:0 12px 30px rgba(77,29,149,.25)
}
.hero .eyebrow{color:var(--hl)}
.hero .sub{color:#efe6ff}
h1{font-size:30px;line-height:1.12;font-weight:900;letter-spacing:-.01em;margin-bottom:12px}
h2{font-size:24px;line-height:1.15;font-weight:900;letter-spacing:-.01em;margin:10px 0 12px;color:var(--acc-deep)}
h3{font-size:20px;line-height:1.2;font-weight:800;margin-bottom:10px;color:var(--acc-deep)}
.sub{color:var(--muted);font-size:15px}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;margin-bottom:18px;box-shadow:0 4px 18px rgba(77,29,149,.06)
}
.card.center{text-align:center}

/* progresso */
.progress{height:6px;background:var(--acc-soft);border-radius:99px;overflow:hidden}
.bar{height:100%;width:0;background:var(--acc);transition:width .35s ease}
.step-label{font-size:12px;color:var(--muted);margin:8px 0 14px}

/* perguntas */
.q{font-size:21px;font-weight:800;line-height:1.2;margin-bottom:6px;color:var(--text);text-wrap:balance}
.q-sub{font-size:14px;color:var(--muted);margin-bottom:14px}
.opts{display:grid;gap:10px}
.opt{
  position:relative;
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--bg2);border:2px solid var(--line);color:var(--text);
  border-radius:12px;padding:15px 14px;font:inherit;font-size:16px;font-weight:600;
  cursor:pointer;transition:border-color .15s,transform .1s,background .15s;
}
.opt .ico{font-size:22px;width:30px;text-align:center;flex:none}
.opt:active{transform:scale(.985)}
@media (hover:hover){.opt:hover{border-color:var(--acc)}}
.opt.sel{border-color:var(--acc);background:var(--acc-soft)}
.opt.sel::after{content:"✔";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--acc);font-weight:900}
.back{background:none;border:none;color:var(--muted);font:inherit;font-size:14px;margin:4px 0 -12px -10px;padding:12px 10px;min-height:44px;cursor:pointer;display:none;-webkit-tap-highlight-color:rgba(109,40,217,.12);border-radius:8px}
.back.show{display:inline-flex;align-items:center}
.back:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:24px}
/* sem tarja no topo: o primeiro cartão de cada tela ganha um respiro */
.screen>.card:first-child{margin-top:12px}
/* aviso de não vínculo (fica embaixo, não no topo) */
.page-disc{text-align:center;font-size:11.5px;color:var(--muted);margin:-8px 0 24px;opacity:.9}

/* loading */
#loading.active{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 110px);min-height:calc(100svh - 110px);padding:16px 0}
#loading .card{width:100%;margin:0;padding:28px 18px;background:linear-gradient(180deg,var(--bg2),#fff 60%)}
.load-note{margin:0 0 8px}
.checks{list-style:none;text-align:left;margin-top:14px;display:grid;gap:10px}
.checks li{color:var(--muted);padding-left:28px;position:relative;transition:color .2s}
.checks li::before{content:"○";position:absolute;left:4px;color:var(--line)}
.checks li.done{color:var(--text)}
.checks li.done::before{content:"✔";color:var(--acc)}

/* badges */
.badge{display:inline-block;font-size:13px;font-weight:800;padding:7px 12px;border-radius:99px;margin-bottom:6px}
.badge.ok{background:var(--acc-soft);color:var(--acc-deep);border:1px solid #cdb6f3}
.badge.bad{background:#fdeaea;color:var(--bad);border:1px solid #f5c2c2}


/* tela de reenquadramento no quiz */
.info{text-align:center;padding:6px 0 2px}
.info-echo{display:inline-block;background:var(--bg2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:14px;color:var(--text);margin-bottom:12px;text-align:left}
.info-echo b{color:var(--acc)}
/* 30 s de anúncio -> 2 h de internet: a barra enche e o bloco verde aparece */
.eq{display:flex;align-items:stretch;justify-content:center;gap:8px;margin:2px 0 14px}
.eq-a,.eq-b{flex:1;max-width:150px;border-radius:14px;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:2px}
.eq-a{background:#1b1030;color:#fff}
.eq-b{background:#e9f8ee;color:#0f5c2b;border:2px solid var(--cta);animation:eqPop .45s 1.35s both}
.eq b{font-size:17px;line-height:1.15}
.eq small{font-size:12px;opacity:.85}
.eq-ico{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:rgba(255,255,255,.16);margin-bottom:4px}
.eq-ico.ok{background:var(--cta);color:#fff;font-weight:900}
.eq-bar{display:block;width:80%;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin-top:8px;overflow:hidden}
.eq-bar i{display:block;height:100%;background:var(--cta);transform-origin:left;animation:eqFill 1.2s .15s both}
.eq-arr{align-self:center;font-size:22px;font-weight:900;color:var(--acc);animation:eqPop .3s 1.2s both}
@keyframes eqFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes eqPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.eq-b,.eq-arr,.eq-bar i{animation:none}}
.info h3{font-size:22px;color:var(--acc-deep);margin-bottom:10px}
.info .info-text{color:var(--muted);font-size:15px;line-height:1.5;max-width:30ch;margin:0 auto 12px}
.info .info-foot{margin:0 0 14px}
.info .btn{display:block;width:100%;font:inherit;font-size:17px;font-weight:900;padding:17px 14px;margin-top:4px;-webkit-appearance:none;appearance:none}
.enc{font-size:13px;font-weight:700;color:var(--acc);margin-bottom:6px}

/* painel de diagnóstico (3 linhas) */
.metrics{display:grid;gap:6px;margin:14px 0 4px}
.m{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 40px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:40px;position:relative}
.m-label{font-size:13px;color:var(--muted);flex:1 1 auto;min-width:0}
.m-val{font-size:15px;font-weight:900;white-space:nowrap;margin-left:auto}
.m-val.ok{color:var(--acc-deep)}
.m-val.bad{color:var(--bad)}
.m-val.mid{color:#b45309}
.mi{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* autoridade */
.press{font-size:13px;color:var(--muted);margin:-4px 0 12px}
.press b{color:var(--acc-deep)}

/* resultado */
.result-card{border-color:#cdb6f3;box-shadow:0 0 0 4px rgba(109,40,217,.08)}
.rline{color:var(--muted);font-size:15px;margin-top:10px}
.rline b{color:var(--text)}
.rline:empty{display:none}
.money{
  background:var(--bg2);border:1px dashed #cdb6f3;border-radius:12px;
  padding:14px;margin:16px 0 6px;text-align:center
}
.money-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.money-month{font-size:40px;font-weight:900;color:var(--bad);line-height:1.1;margin:4px 0}
.money-month small{font-size:16px;color:var(--muted);font-weight:600}
/* gráfico de 12 meses dentro do bloco do dinheiro */
.chart-title{font-size:13px;font-weight:700;color:var(--text);margin:10px 0 2px}
.ychart svg{display:block;width:100%;height:auto;overflow:visible}
.ychart .ax{stroke:var(--line);stroke-width:1.5}
.ychart .ln{fill:none;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ychart .ln.red{stroke:var(--bad)}
.ychart .ln.green{stroke:var(--cta)}
.ychart.draw .ln.red{animation:chartDraw 1.6s .1s ease-out forwards}
.ychart.draw .ln.green{animation:chartDraw .9s .3s ease-out forwards}
.ychart .v{font-size:13px;font-weight:900;opacity:0}
.ychart .v.red{fill:var(--bad)}
.ychart .v.green{fill:var(--cta)}
.ychart.draw .v{animation:eqPop .3s 1.5s both}
.ychart .t{font-size:10px;fill:var(--muted)}
.ychart .you{fill:var(--acc)}
.ychart .you-tag rect{fill:var(--acc)}
.ychart .you-tag text{font-size:10px;font-weight:700;fill:#fff}
@keyframes chartDraw{to{stroke-dashoffset:0}}
.chart-leg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);text-align:left;margin-top:4px}
.chart-leg strong{color:var(--text)}
.chart-leg .lg{flex:none;width:14px;height:4px;border-radius:2px}
.chart-leg .lg.red{background:var(--bad)}
.chart-leg .lg.green{background:var(--cta)}
@media (prefers-reduced-motion:reduce){.ychart .ln{stroke-dashoffset:0;animation:none!important}.ychart .v{opacity:1;animation:none!important}}
/* múltipla escolha no quiz: caixinha de marcar à direita + botão Continuar */
.opts.multi .opt{position:relative;padding-right:46px}
.opts.multi .opt::after{content:"";position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border:2px solid #cdb6f3;border-radius:6px;background:#fff;box-sizing:border-box}
.opts.multi .opt.sel::after{content:"✔";background:var(--acc);border-color:var(--acc);color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center}
.multi-next{display:block;width:100%;margin-top:12px;font:inherit;font-size:17px;font-weight:900;padding:16px 14px;-webkit-appearance:none;appearance:none}
.multi-next:disabled{opacity:.45;cursor:not-allowed}
/* fechamento: "se nada mudar" que a pessoa marcou */
.ch-future{font-size:14px;line-height:1.45;color:#efe6ff;margin:-6px 0 14px}
.ch-future b{color:#fff}

/* prova */
.proof{margin:6px 0 22px}
.video{aspect-ratio:9/16;max-height:460px;max-width:260px;margin:0 auto;background:var(--acc-deep);border-radius:14px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.video iframe{width:100%;height:100%;border:0}
.video-ph{text-align:center;color:#e9ddff;padding:20px}
.video-ph span{display:block;font-size:48px;color:#fff;margin-bottom:8px}

/* oferta */
.offer{border:2px solid var(--acc)}
.offer h3{margin-bottom:4px}
.offer-sub{color:var(--muted);font-size:14px;margin-bottom:12px}
.deliver{list-style:none;display:grid;gap:10px;margin:8px 0 18px}
.deliver li{padding-left:28px;position:relative;font-size:15px}
.deliver li::before{content:"✔";position:absolute;left:2px;color:var(--acc);font-weight:900}
.price{text-align:center;margin:10px 0 16px}
.price-anchor{color:var(--muted);font-size:14px}
.price-anchor b{color:var(--bad);font-weight:800}
.price-vs{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.price-main{font-size:52px;font-weight:900;color:var(--acc-deep);line-height:1;margin:4px 0}
.price-note{font-size:13px;color:var(--muted)}
.price-note,.trust-strip{text-wrap:balance}
.g-line{text-align:center;font-size:14px;font-weight:600;color:var(--acc-deep);background:var(--acc-soft);border-radius:10px;padding:8px 10px;margin:-6px 0 14px;line-height:1.35}
.downsell{display:none;font-size:14px;font-weight:700;color:var(--acc-deep);background:var(--acc-soft);border-radius:8px;padding:6px 10px;margin-bottom:4px}
.downsell s{color:var(--bad)}
.urgency{display:none;text-align:center;font-size:13px;font-weight:700;color:var(--bad);margin:-6px 0 12px}
.trust-strip{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}

.btn{
  display:block;text-align:center;text-decoration:none;font-weight:900;
  border-radius:12px;padding:16px 18px;font-size:16px;cursor:pointer;border:0;
  transition:transform .1s,filter .15s
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--cta);color:#fff;box-shadow:0 8px 24px rgba(22,163,74,.32)}
.btn.primary:hover{background:var(--cta-deep)}
.btn.big{font-size:17px;padding:18px 14px;letter-spacing:0;line-height:1.2;text-wrap:balance;animation:pulse 2s ease-in-out infinite}
.btn.big .nb{white-space:nowrap}
.btn.big:active{animation:none;transform:scale(.985)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
/* botões primários que NÃO são de compra continuam roxos */
.info .btn.primary{background:var(--acc);box-shadow:0 8px 24px rgba(109,40,217,.3)}
.info .btn.primary:hover{background:var(--acc-deep)}
.btn.secondary{background:#fff;border:2px solid var(--acc);color:var(--acc);margin:14px 0 6px}
.btn.secondary.soft{font-size:15px;padding:14px 12px;animation:none;margin:0 0 18px}
/* estado "abrindo o pagamento" */
.btn.primary.busy{opacity:.75;pointer-events:none;animation:none;filter:none;transform:none}
.btn.primary.big.busy::after{display:none}

/* brilho nos botões de compra (em transform: leve no celular barato) */
.btn.primary.big{position:relative;overflow:hidden}
.btn.primary.big::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-160%) skewX(-20deg);animation:shine 4.5s infinite;pointer-events:none}
@keyframes shine{0%{transform:translateX(-160%) skewX(-20deg)}22%,100%{transform:translateX(320%) skewX(-20deg)}}

.guarantee{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.guarantee .shield{flex:none;width:36px;height:36px;border-radius:50%;background:var(--cta);color:#fff;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center}
.guarantee p{color:var(--muted);margin-top:4px;font-size:13px}

/* prova social */
.social{margin-bottom:22px}
.proof-count{display:none;background:var(--acc-soft);color:var(--acc-deep);font-weight:800;font-size:15px;border-radius:10px;padding:10px 14px;margin-bottom:12px}
.prints{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.prints:empty{display:none}
.print{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);aspect-ratio:9/14}
.print img{width:100%;height:100%;object-fit:cover;display:block}
.print-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13px;line-height:1.4}
.screens{margin-top:12px}
.screens-label{margin:0 0 6px}
.screens-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.screen-ph{flex:none;width:92px;height:150px;border-radius:10px;border:3px solid var(--acc-deep);background:var(--acc);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;line-height:1.3}
.screen-ph img{width:100%;height:100%;object-fit:cover}
.demo-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:#fff3cd;color:#7a5a00;border:1px solid #f1d98a;border-radius:4px;padding:1px 5px;vertical-align:middle}

/* depoimentos */
.testimonials{display:grid;gap:12px;margin-bottom:22px}
.testimonials:empty{display:none}
.testimonials h3{margin-bottom:2px}
.testi{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:15px}
.testi p{margin-bottom:6px}
.testi small{color:var(--muted)}

/* faq */
.faq{margin-bottom:22px}
.faq-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;margin-bottom:10px}
.faq .faq-head h3{margin:0}
.faq-hint{font-size:12px;color:var(--muted);opacity:.8}
details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 14px;margin-bottom:8px}
summary{cursor:pointer;padding:13px 0;font-weight:700;font-size:15px;list-style:none;position:relative;padding-right:24px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:11px;color:var(--acc);font-weight:900;font-size:18px}
details[open] summary::after{content:"–"}
details p{color:var(--muted);font-size:14px;padding-bottom:14px}

/* ===== fechamento: veredito do teste, mesmo roxo do topo ===== */
.last{background:linear-gradient(160deg,var(--acc-deep),var(--acc));border:0;color:#fff;text-align:center;box-shadow:0 12px 30px rgba(77,29,149,.28)}
.card.last{padding:22px 18px 20px;margin-bottom:12px}
.last .eyebrow{color:var(--hl);margin-bottom:6px}
.offer.last h3{color:#fff;font-size:22px;line-height:1.15;margin-bottom:14px}
/* preço lado a lado: errado (vermelho claro, riscado) x certo (branco, violeta). Verde fica só no botão */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
.ch{border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.ch small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.ch b{font-size:24px;font-weight:900;white-space:nowrap}
.ch b .price-inline{font-size:inherit}
.ch>span{font-size:12px;margin-top:3px}
.ch.no{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#ffc9c9}
.ch.yes{background:#fff;color:var(--acc-deep);box-shadow:0 0 0 3px rgba(217,189,253,.45)}
.ch.yes small,.ch.yes>span{color:var(--acc)}
@media (max-width:360px){.last .eyebrow{font-size:10px;letter-spacing:.06em}}
/* recapitulação do que a pessoa recebe */
.recap{list-style:none;display:grid;gap:9px;margin:0 0 18px;text-align:left;background:rgba(0,0,0,.14);border-radius:12px;padding:12px 14px}
.recap li{position:relative;padding-left:26px;font-size:14px;line-height:1.35;color:#efe6ff}
.recap li::before{content:"✔";position:absolute;left:2px;top:0;color:var(--hl);font-weight:900}
.recap b{color:#fff}
/* botão verde sobre violeta: sem pulso, sombra neutra + anel branco */
.last .btn.primary.big{animation:none;box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.2)}
.ch-note{font-size:14px;font-weight:700;color:#fff;margin:-6px 0 14px}
.android-note{font-size:13px;font-weight:700;color:var(--text);text-align:center;margin:10px 0 0}
.after-cta{font-size:13px;line-height:1.45;color:#efe6ff;margin:12px 0 0}
.last-note{font-size:13px;line-height:1.4;color:#d9c9f5;margin:12px 0 0}

footer{padding:10px 4px 30px;font-size:11px;color:var(--muted);text-align:center}
#result footer,footer.full{border-top:1px solid var(--line);margin-top:6px;padding:14px 4px 24px;font-size:12.5px;line-height:1.5;text-align:left}
#result footer p+p,footer.full p+p{margin-top:8px}
#result footer b,footer.full b{color:var(--text);font-weight:700}
#result footer a,footer.full a{color:var(--acc);text-decoration:underline;overflow-wrap:anywhere}

/* revelação no scroll (só com JS ativo) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv-item{opacity:0;transform:translateX(-14px);transition:opacity .45s ease,transform .45s ease}
.js .in .rv-item{opacity:1;transform:none}
.js .in .rv-item:nth-child(1){transition-delay:.08s}
.js .in .rv-item:nth-child(2){transition-delay:.2s}
.js .in .rv-item:nth-child(3){transition-delay:.32s}
.js .in .rv-item:nth-child(4){transition-delay:.44s}
.js .in .rv-item:nth-child(5){transition-delay:.56s}
.js .in .rv-item:nth-child(6){transition-delay:.68s}
.js .in .rv-item:nth-child(7){transition-delay:.8s}
.js .rv-pop{opacity:0;transform:scale(.92);transition:opacity .5s ease,transform .5s cubic-bezier(.2,1.2,.3,1)}
.js .in .rv-pop{opacity:1;transform:none;transition-delay:.25s}
.money-bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 2px}
.money-bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--bad),#ff8a65);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
/* pausa os loops quando o bloco está fora da tela (classe .vis vem do JS) */
.rv:not(.vis) .ph .ln,.rv:not(.vis) .ph .prog,.rv:not(.vis) .bill,.rv:not(.vis) .btn.big,.rv:not(.vis) .btn.big::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-item,.js .rv-pop{opacity:1;transform:none;transition:none}
  .money-bar>div{transition:none}
  .btn.big{animation:none;transform:none}
}

/* ===== efeitos em SVG ===== */

/* sinal (barras) */
.sig{width:48px;height:40px;display:block;margin:0 auto}
.sig .b{fill:#dccdf7}
#loading .sig{margin:12px auto 16px}
.sig.loop .b{animation:sigPulse 1.2s infinite}
.sig.loop .b:nth-child(2){animation-delay:.15s}
.sig.loop .b:nth-child(3){animation-delay:.3s}
.sig.loop .b:nth-child(4){animation-delay:.45s}
@keyframes sigPulse{0%,100%{fill:#dccdf7}50%{fill:var(--acc)}}

/* linha de status no diagnóstico: sem internet -> 2h liberadas */
.statusline{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 8px;font-size:13px;font-weight:800}
.statusline .sig{width:34px;height:28px;margin:0}
.st.off{color:var(--bad);animation:stOff 1.2s both}
.st.on{color:var(--cta-deep);opacity:0;animation:stOn .4s 1.1s both}
.sig.once .b{animation:sigOn .35s both}
.sig.once .b:nth-child(1){animation-delay:.3s}
.sig.once .b:nth-child(2){animation-delay:.5s}
.sig.once .b:nth-child(3){animation-delay:.7s}
.sig.once .b:nth-child(4){animation-delay:.9s}
@keyframes sigOn{to{fill:var(--cta)}}
@keyframes stOff{0%,65%{opacity:1}100%{opacity:.4;text-decoration:line-through}}
@keyframes stOn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* celulares dos 3 passos */
.reveal{margin:4px 0 22px}
.steps3{display:grid;gap:12px}
.s3{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px}
.s3 b{display:block;font-size:15px;margin-bottom:3px;grid-column:2}
.s3 p{font-size:13px;color:var(--muted);grid-column:2;margin-top:-2px}
.s3 .ph{grid-row:1 / span 2;width:64px;height:100px}
.ph .body{fill:#fff;stroke:var(--acc-deep);stroke-width:3}
.ph .scr{fill:var(--acc-soft)}
.ph .scr.dark{fill:#1b1030}
.ph .scr.acc{fill:var(--acc)}
.ph .ln{fill:#c9b3ef;opacity:.6}
.ph .lock rect{fill:var(--acc-deep)}
.ph .lock path{fill:none;stroke:var(--acc-deep);stroke-width:2.5}
.in .ph1 .ln{animation:shimmer 1.6s infinite}
.in .ph1 .l2{animation-delay:.2s}.in .ph1 .l3{animation-delay:.4s}.in .ph1 .l4{animation-delay:.6s}
@keyframes shimmer{0%,100%{opacity:.4}50%{opacity:1}}
.ph .play{fill:#fff}
.ph .track{fill:#3b2a5c}
.ph .prog{fill:var(--cta);transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.in .ph2 .prog{animation:prog 3s linear infinite}
@keyframes prog{to{transform:scaleX(1)}}
.ph .t{fill:#fff;font:700 9px Roboto,system-ui,-apple-system,Arial,sans-serif}
.ph .t.big{font-size:17px;font-weight:900;transform-box:fill-box;transform-origin:center;opacity:0}
.ph .t.sm{font-size:7px;font-weight:600;opacity:0}
.ph .ring{fill:none;stroke:#fff;stroke-width:3;opacity:.45}
.ph .chk{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.in .ph3 .chk{animation:draw .6s .5s forwards}
.in .ph3 .t.big{animation:popIn .5s 1s forwards}
.in .ph3 .t.sm{animation:fadeIn .4s 1.3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes popIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* dinheiro saindo (bloco da recarga) */
.bills{width:140px;height:44px;display:block;margin:0 auto 2px;overflow:visible}
.bill rect{fill:var(--bad)}
.bill text{fill:#fff;font:900 11px Roboto,system-ui,-apple-system,Arial,sans-serif}
.bill{opacity:0;transform-box:fill-box;transform-origin:center}
.in .bill{animation:fly 2.4s ease-in infinite}
.in .bl2{animation-delay:.8s}
.in .bl3{animation-delay:1.6s}
@keyframes fly{0%{transform:translateY(10px);opacity:0}15%{opacity:1}85%{opacity:.2}100%{transform:translateY(-26px) rotate(-8deg);opacity:0}}

/* barra fixa entra de baixo */
@keyframes stickyUp{from{transform:translateY(100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .sig .b,.ph *,.bill,.st,.btn.primary.big::after{animation:none!important}
  .st.on,.ph .t,.bill{opacity:1}
  .ph .chk{stroke-dashoffset:0}
  .ph .prog{transform:scaleX(.6)}
}

/* sticky: some quando um botão de compra, o fechamento ou o rodapé estão na tela */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(77,29,149,.08);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none;align-items:center;justify-content:space-between;gap:12px
}
.sticky.show{display:flex;animation:stickyUp .4s ease;transition:transform .25s ease,visibility 0s}
.sticky.show.hide{animation:none;transform:translateY(calc(100% + 24px));visibility:hidden;pointer-events:none;transition:transform .25s ease,visibility 0s linear .25s}
@media (prefers-reduced-motion:reduce){.sticky.show,.sticky.show.hide{transition:none;animation:none}}
.sticky>div{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.sticky b{font-size:20px;color:var(--cta-deep)}
.sticky small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{padding:12px 18px;font-size:15px;flex:none}

/* hero compacto: pergunta 1 na primeira tela */
.hero.compact{padding:14px 14px 12px;margin:10px 0 10px}
.hero.compact h1{font-size:23px;margin-bottom:10px;line-height:1.1}
.hero.compact .sub{font-size:13px;margin-top:8px}
.hero.compact .eyebrow{margin-bottom:5px;font-size:11px}

/* ícones de letra (pergunta 1) */
.ico.letter{width:30px;height:30px;border-radius:50%;background:var(--acc-soft);color:var(--acc-deep);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center}
.opt.sel .ico.letter{background:var(--acc);color:#fff}

/* vendedor */
.seller{background:var(--bg2)}
.seller-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.seller-head>div{display:flex;flex-direction:column;line-height:1.2}
.seller-head b{font-size:17px}
.seller-head small{color:var(--muted);font-size:12px}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.seller p{font-size:15px;margin-bottom:8px}
.seller p.tiny{font-size:13px;margin-bottom:0}

/* depois do pix */
.after{margin-bottom:22px}
.timeline{list-style:none;display:grid;gap:8px;counter-reset:t}
.timeline li{position:relative;padding-left:26px;font-size:14px;color:var(--muted)}
.timeline li b{color:var(--text)}
.timeline li::before{counter-increment:t;content:counter(t);position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--acc-soft);color:var(--acc-deep);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}

/* ===== responsivo ===== */
@media (max-width:360px){
  .hero.compact h1{font-size:20px;margin-bottom:6px}
  .card{padding:16px 14px}
  .opt{padding:12px 12px;font-size:15px}
  .q{font-size:19px}
  .q-sub{margin-bottom:12px}
  .trust{gap:6px 10px;font-size:12px}
  #rTitle{font-size:22px}
  .price-main{font-size:46px}
  .btn.big{font-size:15px;padding:16px 10px}
  .card.last{padding:18px 14px 16px}
  .offer.last h3{font-size:20px}
  .recap{padding:10px 12px}
  .recap li{font-size:13.5px}
}
@media (max-width:340px){
  .ch{padding:10px 6px}
  .ch b{font-size:20px}
  .ch small{font-size:9px}
  .sticky{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .sticky .btn{padding:12px 14px}
}
@media (min-width:600px){
  h1{font-size:36px}
  .hero{padding:40px 24px 30px}
  .hero.compact{padding:26px 24px 22px}
  .hero.compact h1{font-size:30px}
}