/* ══════════════════════════════════════════════════════════════════
   RAFAELA DUARTE · COMPONENTES (compartilhados por todos os temas)
   ──────────────────────────────────────────────────────────────────
   Este arquivo NAO tem cores, fontes nem formas fixas: tudo vem dos
   tokens (variaveis CSS). Cada tema (assets/themes/theme-N/theme.css,
   escolhido pelo .env THEME e servido por tema.php) define os tokens
   e, quando precisa, muda a aparencia ou a disposicao dos componentes.

   Componentes:  Topo/Progresso · Etapa (QuestionCard) · Opcao (AnswerOption)
   · Botao (PrimaryButton) · Caso (SocialProof) · Player/Timer · Oferta
   · Bonus (BonusCard) · Pacote (OfferCard) · Preco (PriceDisplay)
   · Formulario · Pix (PixPayment) · Loading · Upsell/Downsell
   · Confirmacao/Obrigado (ResultScreen) · Lightbox
   ══════════════════════════════════════════════════════════════════ */

/* ── TOKENS PADRAO (o tema sobrescreve) ───────────────────────── */
:root{
  /* cores */
  --background:#F4F4F7;
  --background-image:none;
  --surface:#FFFFFF;
  --surface-2:#F7F7FA;
  --surface-3:#EEEEF3;
  --text:#14141A;
  --text-2:#3E3E4A;
  --text-muted:#6B6B78;
  --border:#E4E4EA;
  --border-strong:#D0D0DA;
  --primary:#5B4CF5;
  --secondary:#C026D3;
  --accent:#E1306C;
  --grad:linear-gradient(100deg,var(--primary),var(--secondary));
  --on-primary:#FFFFFF;
  --success:#0E9C55;
  --on-success:#FFFFFF;
  --success-bg:color-mix(in srgb,var(--success) 9%,var(--surface));
  --success-line:color-mix(in srgb,var(--success) 30%,var(--surface));
  --danger:#D92B2B;
  --danger-bg:color-mix(in srgb,var(--danger) 8%,var(--surface));
  --danger-line:color-mix(in srgb,var(--danger) 28%,var(--surface));
  --warning:#B87600;
  --warning-bg:color-mix(in srgb,#E6A100 12%,var(--surface));
  --warning-line:color-mix(in srgb,#E6A100 40%,var(--surface));
  --info:#1D6FE0;
  --focus:color-mix(in srgb,var(--primary) 55%,transparent);
  --confete:#5B4CF5,#C026D3,#E1306C,#0E9C55,#FACC15,#1D6FE0;

  /* forma */
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,20,26,.06);
  --shadow:0 10px 30px -18px rgba(20,20,26,.35);
  --shadow-lg:0 30px 60px -32px rgba(20,20,26,.45);
  --shadow-cta:0 12px 28px -12px color-mix(in srgb,var(--primary) 70%,transparent);
  --hairline:1px;

  /* tipografia */
  --font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:var(--font);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w-display:800;
  --w-strong:700;
  --ls-display:-.02em;
  --tt-display:none;          /* text-transform dos titulos */
  --t-h1:clamp(1.85rem,8.4vw,2.4rem);
  --t-h2:clamp(1.5rem,6.8vw,1.95rem);
  --t-h3:clamp(1.18rem,5.2vw,1.38rem);
  --t-body:clamp(1.0313rem,4vw,1.125rem);
  --t-sm:.9375rem;
  --t-label:.8125rem;

  /* movimento */
  --ease:cubic-bezier(.22,1,.36,1);
  --mola:cubic-bezier(.34,1.56,.64,1);
  --transition:.22s var(--ease);
  --entra:sobe;               /* animacao de entrada das etapas */

  /* espaco */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --col:560px; --pad:20px;

  /* componentes (o tema ajusta so o que quiser) */
  --topo-bg:color-mix(in srgb,var(--surface) 86%,transparent);
  --topo-border:var(--border);
  --bar-h:6px;
  --bar-track:var(--surface-3);
  --bar-fill:var(--grad);
  --etapa-bg:var(--surface);
  --etapa-border:var(--border);
  --etapa-radius:var(--radius-lg);
  --etapa-shadow:var(--shadow);
  --etapa-mx:12px;
  --etapa-gap:16px;
  --etapa-pad:var(--s7) var(--pad);
  --op-bg:var(--surface);
  --op-border:var(--border-strong);
  --op-radius:var(--radius);
  --op-shadow:var(--shadow-sm);
  --op-hover-border:var(--primary);
  --op-sel-bg:color-mix(in srgb,var(--primary) 7%,var(--surface));
  --op-sel-border:var(--primary);
  --ico-bg:var(--surface-2);
  --ico-radius:12px;
  --btn-bg:var(--grad);
  --btn-color:var(--on-primary);
  --btn-radius:var(--radius);
  --btn-h:62px;
  --btn-weight:800;
  --btn-tt:uppercase;
  --btn-ls:.02em;
  --card-bg:var(--surface);
  --card-border:var(--border);
  --img-radius:var(--radius);
  --img-border:var(--border);
  --pergunta-cor:var(--primary);
  --marca-texto:color-mix(in srgb,var(--primary) 16%,transparent);
  --no-bg:var(--text);
  --no-color:var(--surface);
  --timer-bg:var(--text);
  --timer-color:var(--surface);
  --player-bg:#0E0E12;
  --up-bg:radial-gradient(120% 55% at 50% 0%,#2457e6 0%,#0d2fa3 40%,#06164f 100%);
  --up-gold:#F7C948;
  --up-gold-2:#E9A800;
  --up-ink:#071a5c;
  --up-text:#FFFFFF;
}
@media (min-width:400px){ :root{--pad:24px} }

/* ── BASE ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;min-height:100vh;background:var(--background);background-image:var(--background-image);background-attachment:fixed;
  color:var(--text);font-family:var(--font);font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--font-display);color:inherit;text-wrap:balance}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
ul,ol{margin:0;padding:0} li{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
img.emj{display:inline-block;width:1.12em;height:1.12em;vertical-align:-.18em;margin:0 .03em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* decoracao de fundo: cada tema desenha a sua (ou nenhuma) */
.fundo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:none}
.fundo span{position:absolute;display:block}

.page{position:relative;max-width:var(--col);margin-inline:auto;min-height:100vh;padding-bottom:var(--s5)}

/* ── TOPO · marca + progresso (ProgressIndicator) ─────────────── */
.topo{position:sticky;top:0;z-index:30;background:var(--topo-bg);border-bottom:var(--hairline) solid var(--topo-border);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);padding:10px var(--pad) 12px}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:28px}
.marca{display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--font-display);font-weight:800;font-size:.875rem;
  letter-spacing:.02em;color:var(--text)}
.marca span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca-av{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:var(--on-primary);
  font-size:.6875rem;font-weight:900;letter-spacing:.02em}
.passo{flex:0 0 auto;font-family:var(--font-mono);font-size:.8125rem;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.passo b{color:var(--text);font-weight:800}
.barra{position:relative;height:var(--bar-h);border-radius:var(--radius-pill);background:var(--bar-track);margin-top:10px;overflow:hidden}
.barra i{position:absolute;inset:0 auto 0 0;width:5%;border-radius:inherit;background:var(--bar-fill);transition:width .9s var(--ease);overflow:hidden}
.barra i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:corre 2.4s ease-in-out infinite}
@keyframes corre{to{transform:translateX(100%)}}

/* ── ETAPA (QuestionCard) ─────────────────────────────────────── */
#quiz{padding-top:var(--etapa-gap)}
.etapa{position:relative;margin:0 var(--etapa-mx) var(--etapa-gap);padding:var(--etapa-pad);text-align:center;
  background:var(--etapa-bg);border:var(--hairline) solid var(--etapa-border);border-radius:var(--etapa-radius);box-shadow:var(--etapa-shadow);
  scroll-margin-top:76px}
.etapa[hidden]{display:none}
.etapa > * + *{margin-top:var(--s4)}
.etapa.feita{opacity:.96}
/* numero da etapa (no da linha do tempo) */
.no{position:absolute;top:-14px;left:50%;transform:translateX(-50%);min-width:30px;height:30px;padding:0 8px;border-radius:var(--radius-pill);
  background:var(--no-bg);color:var(--no-color);font-family:var(--font-mono);font-weight:800;font-size:.8125rem;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 4px var(--background),var(--shadow-sm);z-index:2}
#e1 .no{display:none}
#e1{padding-top:var(--s5)}

.etapa.entra .no{animation:pop .5s var(--ease) both}
.etapa.entra > :not(.no){animation:var(--entra) .6s var(--ease) both}
.etapa.entra > :nth-child(3){animation-delay:.06s}
.etapa.entra > :nth-child(4){animation-delay:.12s}
.etapa.entra > :nth-child(5){animation-delay:.18s}
.etapa.entra > :nth-child(n+6){animation-delay:.24s}
@keyframes sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes surgeSuave{from{opacity:0}to{opacity:1}}
@keyframes desliza{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes cresce{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:translateX(-50%) scale(.3)}60%{transform:translateX(-50%) scale(1.15)}100%{transform:translateX(-50%) scale(1)}}
@keyframes popC{0%{transform:scale(.3)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ── TIPOGRAFIA ───────────────────────────────────────────────── */
.h1,.h2,.h3,.pergunta,.hoje,.chama,.caso-nome{font-family:var(--font-display);text-align:center;text-wrap:balance;margin-inline:auto}
.h1{font-size:var(--t-h1);font-weight:var(--w-display);line-height:1.08;letter-spacing:var(--ls-display);text-transform:var(--tt-display);max-width:20ch}
.h2{font-size:var(--t-h2);font-weight:var(--w-display);line-height:1.14;letter-spacing:var(--ls-display);text-transform:var(--tt-display);max-width:23ch}
.h3{font-size:var(--t-h3);font-weight:var(--w-display);line-height:1.3;letter-spacing:calc(var(--ls-display) / 2);max-width:26ch}
.tx{font-size:var(--t-body);font-weight:500;line-height:1.55;color:var(--text-2);max-width:34ch;margin-inline:auto;text-wrap:pretty}
.tx b,.tx strong{color:var(--text);font-weight:var(--w-strong)}
.tx b.pos{color:var(--success)}
.sm{font-size:var(--t-sm);color:var(--text-muted);line-height:1.5;max-width:34ch;margin-inline:auto}
.neg{color:var(--danger)} .pos{color:var(--success)} .azul{color:var(--info)}
.junto > * + *{margin-top:var(--s1)}
.emoji-linha{font-size:1.6rem;line-height:1}

/* pergunta: marca-texto que se desenha quando a etapa entra */
.pergunta{font-size:var(--t-h3);font-weight:var(--w-display);line-height:1.28;color:var(--pergunta-cor);letter-spacing:calc(var(--ls-display) / 2);max-width:26ch}
.pergunta span{background:linear-gradient(transparent 58%,var(--marca-texto) 58%) no-repeat;background-size:0 100%;
  transition:background-size .9s var(--ease) .35s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.etapa.viva .pergunta span,.etapa.feita .pergunta span{background-size:100% 100%}
.pergunta.grande{font-size:var(--t-h2)}

/* ── IMAGENS ──────────────────────────────────────────────────── */
.foto{position:relative;margin:0;border-radius:var(--img-radius);overflow:hidden;border:var(--hairline) solid var(--img-border);
  background:var(--surface-2);box-shadow:var(--shadow)}
.foto img,.foto video{width:100%;height:auto}
.foto.m{max-width:360px;margin-inline:auto}
.foto.p{max-width:300px;margin-inline:auto}
.foto.brilho::after{content:"";position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-180%);animation:varre 5.5s ease-in-out 1.5s infinite}
@keyframes varre{0%,72%{transform:translateX(-180%)}100%{transform:translateX(320%)}}
.amplia{cursor:zoom-in}
.lupa{position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:6px;
  font-size:.8125rem;font-weight:700;color:#fff;background:rgba(10,10,14,.72);padding:7px 14px;border-radius:var(--radius-pill);
  pointer-events:none;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.recorte{margin:0 auto;max-width:360px}
.recorte img{width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(10,10,14,.22))}
.gif{max-width:300px;margin-inline:auto;aspect-ratio:352/480}
.gif video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── OPCAO (AnswerOption) ─────────────────────────────────────── */
.opcoes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s5)!important}
.op{position:relative;overflow:hidden;display:grid;grid-template-columns:46px minmax(0,1fr) 30px;align-items:center;gap:var(--s3);
  width:100%;min-height:72px;padding:12px 14px 12px 12px;background:var(--op-bg);border:1.5px solid var(--op-border);border-radius:var(--op-radius);
  text-align:left;box-shadow:var(--op-shadow);
  transition:transform var(--transition),box-shadow var(--transition),border-color .2s,opacity .35s,background .25s}
.op .ico{width:46px;height:46px;border-radius:var(--ico-radius);background:var(--ico-bg);display:grid;place-items:center;font-size:26px;line-height:1;
  transition:transform .35s var(--mola),background .25s}
.op .ico img.emj{width:28px;height:28px;margin:0;vertical-align:0}
.op .rot{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1.3;color:var(--text);overflow-wrap:break-word;min-width:0}
.op .rot img.emj{width:1.05em;height:1.05em}
.op .seta{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;color:var(--text);
  background:var(--surface);transition:background .25s,border-color .25s,color .25s}
.op .seta svg{width:14px;height:14px}
.etapa.viva .opcoes:not(.ok) .seta svg{animation:empurra 1.6s ease-in-out infinite}
.etapa.viva .opcoes:not(.ok) .op:nth-child(2) .seta svg{animation-delay:.15s}
.etapa.viva .opcoes:not(.ok) .op:nth-child(3) .seta svg{animation-delay:.3s}
@keyframes empurra{0%,100%{transform:none}50%{transform:translateX(3px)}}
@media (hover:hover){
  .opcoes:not(.ok) .op:hover{transform:translateY(-2px);border-color:var(--op-hover-border);box-shadow:var(--shadow)}
  .opcoes:not(.ok) .op:hover .ico{transform:rotate(-6deg) scale(1.08)}
  .opcoes:not(.ok) .op:hover .seta{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
}
.op:active{transform:scale(.98)}
.onda{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--primary) 18%,transparent);transform:scale(0);
  animation:onda .6s ease-out forwards;pointer-events:none}
@keyframes onda{to{transform:scale(4);opacity:0}}
.opcoes.ok .op{pointer-events:none;opacity:.42;box-shadow:none;transform:scale(.98)}
.opcoes.ok .op.sim{opacity:1;transform:none;border-color:var(--op-sel-border);background:var(--op-sel-bg);box-shadow:var(--shadow)}
.opcoes.ok .op.sim .seta{background:var(--primary);border-color:var(--primary);color:var(--on-primary);animation:check .45s var(--mola)}
@keyframes check{0%{transform:scale(.4)}60%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ── BOTAO (PrimaryButton) ────────────────────────────────────── */
.btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:var(--btn-h);
  padding:16px 22px;border:0;border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-color);font-family:var(--font-display);
  font-weight:var(--btn-weight);font-size:1.0625rem;text-transform:var(--btn-tt);letter-spacing:var(--btn-ls);line-height:1.2;
  text-decoration:none;text-align:center;margin-top:var(--s6)!important;box-shadow:var(--shadow-cta);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,filter .18s ease,opacity .35s}
.btn svg{width:18px;height:18px;flex:0 0 auto;animation:empurra 1.4s ease-in-out infinite}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-180%);animation:varre 5.5s ease-in-out 1s infinite;pointer-events:none}
@media (hover:hover){.btn:hover{filter:brightness(1.06);transform:translateY(-2px)}}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.usado{opacity:.28;pointer-events:none;box-shadow:none}
.btn.usado::after,.btn.usado svg{animation:none}
.btn.respira{animation:respira 2.2s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes salta{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.02)}}
@keyframes bate{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}}

/* ── PROVA SOCIAL (casos reais) ───────────────────────────────── */
.caso{padding:var(--s4);border-radius:var(--radius);background:var(--surface-2);border:var(--hairline) solid var(--border)}
.caso + .caso{margin-top:var(--s4)!important}
.caso-nome{font-weight:800;font-size:1rem;line-height:1.35;margin-bottom:var(--s3);max-width:30ch}
.caso-nome u{text-decoration:none}
.estrelas{display:block;margin-top:4px;letter-spacing:1px}
.estrelas img.emj{width:1.05em;height:1.05em}
.autoriza{font-size:.8125rem;font-weight:600;font-style:italic;color:var(--text-muted);line-height:1.5;border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm);padding:var(--s3) var(--s4);background:var(--surface)}

/* ── AMADOR x PROFISSIONAL ────────────────────────────────────── */
.perfil{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.perfil--fraco{border-color:var(--danger-line)}
.perfil--forte{border-color:var(--success-line);box-shadow:var(--shadow)}
.perfil .tipo{padding:11px;font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:.14em;color:#fff}
.perfil--fraco .tipo{background:var(--danger)}
.perfil--forte .tipo{background:var(--success)}
.perfil img{width:100%;height:auto}
.perfil + .perfil{margin-top:var(--s4)!important}
.valores{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s5)!important}
.valores p{border:1px solid var(--danger-line);background:var(--danger-bg);border-radius:var(--radius-sm);padding:12px;
  font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--danger)}
.destaque{display:inline;background:var(--success);color:var(--on-success);padding:0 7px;border-radius:6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── PLAYER + TIMER ───────────────────────────────────────────── */
.player{position:relative;margin-top:var(--s5)!important;border-radius:var(--radius-lg);background:var(--player-bg);padding:0 6px 6px;box-shadow:var(--shadow-lg)}
.player-tag{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 12px 13px;color:#fff;font-family:var(--font-display);
  font-weight:800;font-size:clamp(.9rem,4vw,1.02rem);letter-spacing:.01em;line-height:1.25;text-wrap:balance}
.player-tag .play{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;animation:batePlay 1.6s ease-in-out infinite}
.player-tag .play svg{width:13px;height:13px;margin-left:2px}
@keyframes batePlay{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{transform:scale(1.1);box-shadow:0 0 0 7px rgba(255,255,255,0)}}
.vsl{border-radius:calc(var(--radius-lg) - 6px);overflow:hidden;background:#0B0B0D}
.vsl iframe{border:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
.embed-fb{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:var(--s3);text-align:center;padding:var(--s5);
  background:radial-gradient(circle at 50% 40%,#26262c,#0B0B0D 70%);color:rgba(255,255,255,.7);font-size:.875rem}
.fb-play{width:68px;height:68px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;animation:batePlay 1.6s ease-in-out infinite}
.fb-play svg{width:28px;height:28px;margin-left:4px}
.timer-card{margin-top:var(--s5)!important;border:var(--hairline) solid var(--border);background:var(--surface-2);border-radius:var(--radius-lg);padding:var(--s5) var(--s4)}
.timer-rot{font-size:var(--t-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s3)}
.relogio{display:flex;justify-content:center;align-items:center;gap:var(--s3)}
.relogio .cx{width:86px;height:92px;border-radius:var(--radius);background:var(--timer-bg);color:var(--timer-color);display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;transition:background .5s}
.relogio .n{font-family:var(--font-mono);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums;display:block}
.relogio .n.vira{animation:vira .45s var(--ease)}
@keyframes vira{from{transform:translateY(-70%);opacity:0}to{transform:none;opacity:1}}
.relogio .u{font-size:.75rem;font-weight:700;opacity:.7;margin-top:6px;text-transform:uppercase;letter-spacing:.14em}
.relogio .dp{font-family:var(--font-mono);font-size:2rem;font-weight:800;color:var(--border-strong);animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:.25}}
.linha-tempo{height:5px;max-width:204px;margin:var(--s3) auto 0;border-radius:5px;background:var(--surface-3);overflow:hidden}
.linha-tempo i{display:block;height:100%;width:0;background:var(--grad);transition:width 1s linear}
.relogio.zerou .cx{background:var(--success);color:var(--on-success)}
.relogio.zerou .dp{animation:none}

/* ── OFERTA ───────────────────────────────────────────────────── */
.oferta{padding-top:var(--s6);scroll-margin-top:76px}
.oferta[hidden]{display:none}
.oferta > * + *{margin-top:var(--s6)}
.oferta.entra > *{animation:sobe .7s var(--ease) both}
.oferta.entra > :nth-child(2){animation-delay:.1s}.oferta.entra > :nth-child(n+3){animation-delay:.18s}

/* parabens: o cadeado abre quando a oferta libera */
.parabens{position:relative;border-radius:var(--radius-lg);padding:var(--s7) var(--s5) var(--s6);background:var(--success-bg);
  border:var(--hairline) solid var(--success-line);overflow:hidden}
.parabens::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--success) 18%,transparent),transparent 70%)}
.cadeado{position:relative;display:grid;place-items:center;width:58px;height:58px;margin:0 auto var(--s4);border-radius:50%;background:var(--success);
  color:var(--on-success);box-shadow:0 0 0 7px color-mix(in srgb,var(--success) 16%,transparent)}
.cadeado svg{width:28px;height:28px}
.cadeado .arco{transform-origin:15.6px 5.7px}
.oferta.entra .cadeado .arco{animation:abre .6s var(--ease) .55s both}
@keyframes abre{from{transform:translate(4px,3.5px) rotate(0)}to{transform:none}}
.oferta.entra .cadeado{animation:popC .5s var(--ease) .15s both}
.parabens p{position:relative;font-family:var(--font-display);font-weight:var(--w-display);color:var(--success);line-height:1.1}
.parabens .a{font-size:var(--t-h3);letter-spacing:.02em}
.parabens .big{font-size:clamp(4.4rem,23vw,6.2rem);letter-spacing:-.055em;line-height:.9;margin-top:var(--s2);display:inline-block;animation:bate 1.8s var(--ease) infinite}
.parabens .c{font-size:var(--t-h2);letter-spacing:-.02em;margin-top:var(--s3)}

/* bonus (BonusCard) */
.bonus-lista{position:relative;display:flex;flex-direction:column;gap:var(--s4)}
.bonus{position:relative;border:var(--hairline) solid var(--card-border);border-radius:var(--radius-lg);background:var(--card-bg);
  padding:var(--s4) var(--s4) var(--s5);box-shadow:var(--shadow)}
.bonus-n{display:inline-block;margin-bottom:var(--s3);padding:5px 12px;border-radius:var(--radius-pill);background:var(--grad);color:var(--on-primary);
  font-family:var(--font-display);font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.bonus .foto{max-width:280px;margin-inline:auto}
.bonus .tx{max-width:30ch;margin-top:var(--s4)}
.preco-bonus{margin-top:var(--s4);font-family:var(--font-display);font-weight:800;font-size:1.0625rem;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.velho{position:relative;color:var(--danger)}
.velho::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--danger);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease) 1s}
.oferta.entra .velho::after,.oferta:not([hidden]) .velho::after{transform:scaleX(1)}
.gratis{display:inline-block;background:var(--success);color:var(--on-success);padding:5px 10px;border-radius:8px;animation:pulsa 2s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 45%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.selo-wrap{position:relative;margin-top:var(--s2)}
.selo{display:inline-block;font-family:var(--font-display);font-weight:900;font-size:1.0625rem;color:var(--on-success);background:var(--success);
  border:2px dashed rgba(255,255,255,.7);outline:3px solid var(--success);border-radius:var(--radius-sm);padding:12px 18px;transform:rotate(-2deg)}
.oferta.entra .selo{animation:carimba .55s var(--ease) 1.2s both}
@keyframes carimba{0%{opacity:0;transform:rotate(-8deg) scale(1.9)}70%{opacity:1;transform:rotate(-1deg) scale(.94)}100%{transform:rotate(-2deg) scale(1)}}

.dispositivos > * + *{margin-top:var(--s4)}
.faixa{display:inline;font-family:var(--font-display);font-weight:var(--w-display);font-size:var(--t-h3);line-height:1.55;color:#fff;
  padding:3px 10px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.faixa.azul-bg{background:var(--info)}

/* pacote (OfferCard): tudo o que a pessoa recebe e o botao */
.pacote{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--card-bg);border:1.5px solid var(--success-line);box-shadow:var(--shadow-lg)}
.pacote-cab{background:var(--success);color:var(--on-success);padding:var(--s5) var(--s5) var(--s6);position:relative}
.pacote-cab h3{color:inherit;font-size:var(--t-h3);line-height:1.2}
.pacote-cab::after{content:"";position:absolute;left:50%;bottom:-11px;width:22px;height:22px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.quadro-rot{margin:var(--s6) var(--s5) 0;display:flex;align-items:center;gap:var(--s3);font-family:var(--font-display);font-weight:800;
  font-size:var(--t-label);letter-spacing:.14em;color:var(--text-muted)}
.quadro-rot::before,.quadro-rot::after{content:"";flex:1;height:1px;background:var(--border)}
.quadro-rot.bx{margin-top:var(--s2);margin-bottom:var(--s3);color:var(--success)}
.quadro-rot.bx::before,.quadro-rot.bx::after{background:var(--success-line)}
.itens{padding:var(--s4) var(--s5) var(--s4);text-align:left}
.itens li{position:relative;padding:10px 0 10px 34px;font-size:1rem;line-height:1.45;color:var(--text-2);font-weight:500}
.itens li + li{border-top:1px solid var(--border)}
.itens li::before{content:"";position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;
  background:var(--success) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat}
.itens b{color:var(--text);font-weight:var(--w-strong)}
.bx-lista{margin:0 var(--s5);background:var(--success-bg);border:1px solid var(--success-line);border-radius:var(--radius);padding:var(--s4)}
.bx-lista li{display:flex;gap:var(--s3);align-items:center}
.bx-lista li + li{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--success-line)}
.bx-lista .n{flex:0 0 auto;width:40px;height:40px;border-radius:var(--ico-radius);background:var(--surface);border:1px solid var(--success-line);
  display:grid;place-items:center;font-size:22px;line-height:1}
.bx-lista .n img.emj{width:24px;height:24px;margin:0;vertical-align:0}
.bx-lista .t{font-family:var(--font-display);font-weight:600;font-size:1.0313rem;text-align:left;line-height:1.3;color:var(--text)}
.bx-lista .azul{color:var(--success);font-weight:800}
.oferta.entra .itens li,.oferta.entra .bx-lista li{animation:sobe .5s var(--ease) both}
.oferta.entra .itens li:nth-child(1){animation-delay:.45s}.oferta.entra .itens li:nth-child(2){animation-delay:.5s}
.oferta.entra .itens li:nth-child(3){animation-delay:.55s}.oferta.entra .itens li:nth-child(4){animation-delay:.6s}
.oferta.entra .itens li:nth-child(5){animation-delay:.65s}.oferta.entra .itens li:nth-child(6){animation-delay:.7s}
.oferta.entra .itens li:nth-child(7){animation-delay:.75s}
.fecho{margin-top:var(--s5);padding:var(--s6) var(--s5);background:var(--surface-2);border-top:1px solid var(--border);text-align:center}
.fecho > * + *{margin-top:var(--s4)}
.hoje{font-weight:var(--w-display);font-size:var(--t-h3);line-height:1.2;letter-spacing:var(--ls-display)}
.hoje .pos{color:var(--success)}
.chama{font-weight:700;font-size:1rem;line-height:1.4;color:var(--text-2);max-width:30ch}
.vagas{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:.9375rem;color:var(--danger);letter-spacing:.06em}
.vagas .desce{color:var(--text-muted);font-size:1.25rem;line-height:1;display:inline-block;animation:desce 1.2s ease-in-out infinite}
@keyframes desce{0%,100%{transform:none}50%{transform:translateY(4px)}}

.arte-bonus{margin:var(--s6) auto 0!important;max-width:440px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.arte-bonus img{width:100%;height:auto}

/* ── PAGAMENTO · preco + formulario (PriceDisplay) ────────────── */
.pag{border-radius:var(--radius-lg);background:var(--card-bg);border:1.5px solid var(--success-line);overflow:hidden;box-shadow:var(--shadow-lg);scroll-margin-top:76px}
.pag-topo{padding:var(--s6) var(--s5) var(--s5);background:var(--success-bg);border-bottom:1px solid var(--success-line);text-align:center}
.pag-rot{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text-2);line-height:1.3}
.pag-valor{display:inline-block;font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,15vw,3.9rem);line-height:1;letter-spacing:-.04em;
  color:var(--success);margin-top:var(--s2);font-variant-numeric:tabular-nums}
.pag-valor sup{font-size:.36em;letter-spacing:0;vertical-align:.95em;margin-right:4px}
.pag-unico{margin-top:var(--s2);font-size:var(--t-sm);font-weight:600;color:var(--text-muted)}
.pag-form{padding:var(--s5) var(--s5) var(--s6)}
.pag-form > * + *{margin-top:var(--s4)}
.pag-inst{font-family:var(--font-display);font-weight:800;font-size:1.0625rem;color:var(--text);text-align:center}
.campos > * + *{margin-top:var(--s3)}
.campo{display:block;text-align:left}
.campo[hidden],.campos[hidden]{display:none}
.pag-form > .campos + .campos{margin-top:var(--s3)}
.campo span{display:block;font-weight:700;font-size:var(--t-sm);color:var(--text-2);margin:0 0 6px 4px}
.campo input{width:100%;min-height:56px;padding:14px 16px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);
  font:500 1.0625rem/1.2 var(--font);color:var(--text);outline:0;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.campo input::placeholder{color:var(--text-muted);opacity:.7}
.campo input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--focus)}
.campo.erro input{border-color:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 16%,transparent)}
.campo .msg{display:block;color:var(--danger);font-weight:700;font-size:var(--t-sm);margin:6px 0 0 4px}
.confere{background:var(--success-bg);border:1px solid var(--success-line);border-radius:var(--radius);padding:var(--s4)}
.confere[hidden]{display:none}
.confere-lista{margin-top:var(--s3);text-align:left}
.confere-lista li{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 2px;border-top:1px solid var(--success-line);font-size:var(--t-sm)}
.confere-lista span{color:var(--text-muted);font-weight:600;flex:0 0 auto}
.confere-lista b{font-weight:800;text-align:right;overflow-wrap:anywhere;min-width:0}
.alterar{display:block;margin:var(--s2) auto 0;font-weight:700;font-size:var(--t-sm);color:var(--text-2);text-decoration:underline;text-underline-offset:3px;
  padding:10px 14px;min-height:44px}
.pag-aviso{font-size:var(--t-sm);font-weight:500;color:var(--text-muted);line-height:1.45;text-align:center}
.pag-erro{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);font-weight:700;font-size:var(--t-sm);border-radius:var(--radius-sm);padding:12px 14px}
.pag-erro[hidden]{display:none}
.btn.gerar{min-height:68px;font-size:1.125rem;margin-top:var(--s5)!important;animation:salta 1.6s ease-in-out infinite}
.btn.ocupado{pointer-events:none;opacity:.7;animation:none}
.btn.ocupado::after{animation:none}
.gira{width:20px;height:20px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite;flex:0 0 auto}
@keyframes gira{to{transform:rotate(360deg)}}
/* selos de confianca no pagamento (fatos reais do fluxo) */
.confianca{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s4);margin-top:var(--s4)!important}
.confianca li{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;color:var(--text-muted)}
.confianca svg{width:16px;height:16px;color:var(--success);flex:0 0 auto}

/* ── PIX (PixPayment) ─────────────────────────────────────────── */
.pix{padding:var(--s5) var(--s5) var(--s6);text-align:center}
.pix[hidden]{display:none}
.pix > * + *{margin-top:var(--s4)}
/* loading elegante */
.px-gerando{padding:var(--s6) 0;display:grid;justify-items:center;gap:var(--s4)}
.px-gerando .gira{width:48px;height:48px;border-width:4px;color:var(--primary)}
.px-gerando p{font-family:var(--font-display);font-weight:800;font-size:var(--t-h3)}
.px-gerando::after{content:"";width:min(220px,70%);height:6px;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 0 30%,var(--primary) 50%,var(--surface-3) 70%) 0 0/300% 100%;
  animation:carregaBar 1.4s linear infinite}
@keyframes carregaBar{to{background-position:-150% 0}}
.px-tit{font-family:var(--font-display);font-weight:var(--w-display);font-size:var(--t-h2);line-height:1.12;letter-spacing:var(--ls-display);animation:popC .5s var(--ease) both}
.px-sub{font-weight:600;font-size:1rem;line-height:1.45;color:var(--text-2);max-width:32ch;margin-inline:auto}
.px-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.px-chip{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-pill);padding:8px 14px;font-weight:700;font-size:.875rem;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.px-chip.status{background:var(--warning-bg);border-color:var(--warning-line);color:var(--warning)}
.px-chip.status i{width:9px;height:9px;border-radius:50%;background:#E6A100;animation:pulsaS 1.4s ease-in-out infinite}
@keyframes pulsaS{0%,100%{box-shadow:0 0 0 0 rgba(230,161,0,.5)}50%{box-shadow:0 0 0 6px rgba(230,161,0,0)}}
/* aviso "aguardando pagamento": grande, com radar pulsando e faixa correndo embaixo */
.px-aguarda{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:20px 16px 22px;
  border-radius:var(--radius);background:var(--warning-bg);border:2px solid var(--warning-line);color:var(--warning);
  animation:aguardaBorda 1.6s ease-in-out infinite}
.px-aguarda::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,transparent 0%,#E6A100 50%,transparent 100%) 0 0/50% 100% no-repeat;animation:aguardaFaixa 1.4s linear infinite}
.px-radar{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#E6A100;display:grid;place-items:center}
.px-radar::before,.px-radar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #E6A100;animation:radar 1.8s ease-out infinite}
.px-radar::after{animation-delay:.9s}
.px-radar i{width:14px;height:14px;border-radius:50%;background:#fff}
.px-aguarda p{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.px-aguarda b{font-family:var(--font-display);font-weight:900;font-size:clamp(1.15rem,5.4vw,1.35rem);line-height:1.2;letter-spacing:-.01em;text-transform:uppercase}
.px-aguarda p > span{font-size:.875rem;font-weight:600;line-height:1.4;color:var(--text-2)}
.px-pontos i{font-style:normal;animation:ponto 1.4s infinite}
.px-pontos i:nth-child(2){animation-delay:.2s}.px-pontos i:nth-child(3){animation-delay:.4s}
@keyframes radar{from{transform:scale(1);opacity:.8}to{transform:scale(2.1);opacity:0}}
@keyframes aguardaFaixa{from{background-position:-100% 0}to{background-position:200% 0}}
@keyframes aguardaBorda{0%,100%{border-color:var(--warning-line)}50%{border-color:#E6A100}}
@keyframes ponto{0%,20%{opacity:0}40%,100%{opacity:1}}
.px-corpo{display:flex;flex-direction:column;gap:var(--s4)}
.px-copia{order:1}
.px-qr{order:2}
@media (min-width:700px) and (hover:hover) and (pointer:fine){ .px-copia{order:2} .px-qr{order:1} }
.px-rot{font-weight:800;font-size:var(--t-label);letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase}
.px-codigo{margin-top:var(--s2);background:var(--surface-2);border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);padding:12px 14px;
  font:600 .875rem/1.45 var(--font-mono);color:var(--text-2);text-align:left;overflow-wrap:anywhere;word-break:break-all;max-height:7.4em;overflow:auto;
  user-select:all;-webkit-user-select:all}
.btn.copiar{background:var(--success);color:var(--on-success);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--success) 80%,transparent);
  min-height:64px;font-size:1.0625rem;margin-top:var(--s3)!important}
.btn.copiar.feito{filter:brightness(.9)}
.px-copiado{color:var(--success);font-weight:800;font-size:1rem;min-height:1.5em;margin-top:var(--s2)!important}
.px-qrbox{position:relative;overflow:hidden;margin:var(--s2) auto 0;width:min(100%,280px);background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.px-qrbox svg,.px-qrbox img{display:block;width:100%;height:auto;image-rendering:pixelated}
.px-qrbox::after{content:"";position:absolute;left:8px;right:8px;height:3px;top:8px;border-radius:3px;background:var(--success);
  box-shadow:0 0 12px 2px color-mix(in srgb,var(--success) 60%,transparent);opacity:.75;animation:escaneia 2.6s ease-in-out infinite}
@keyframes escaneia{0%,100%{top:8px}50%{top:calc(100% - 11px)}}
.px-como{text-align:left;max-width:32ch;margin-inline:auto;counter-reset:p}
.px-como li{position:relative;padding-left:34px;font-size:var(--t-sm);font-weight:500;color:var(--text-2);line-height:1.45}
.px-como li + li{margin-top:var(--s2)}
.px-como li::before{counter-increment:p;content:counter(p);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
  background:var(--text);color:var(--surface);font-weight:800;font-size:.8125rem;display:grid;place-items:center}
.px-auto{font-size:var(--t-sm);font-weight:700;color:var(--text-muted)}
.px-resumo{border-top:1px solid var(--border);padding-top:var(--s4);font-size:var(--t-sm);color:var(--text-muted);line-height:1.5}
.px-resumo b{color:var(--text-2)}
.px-alerta{border-radius:var(--radius);padding:var(--s5) var(--s4);background:var(--danger-bg);border:1px solid var(--danger-line)}
.px-alerta .px-tit{color:var(--danger);font-size:var(--t-h3)}
.px-alerta p + p{margin-top:var(--s2)}
.px-alerta.expirou{background:var(--warning-bg);border-color:var(--warning-line)}
.px-alerta.expirou .px-tit{color:var(--warning)}
.px-conexao{font-size:var(--t-sm);font-weight:700;color:var(--warning)}

/* faixa de teste / previa: nunca aparece no modo real */
.faixa-teste{position:relative;z-index:60;background:#111114;color:#FFD54A;font-weight:800;font-size:.8125rem;letter-spacing:.04em;text-align:center;padding:8px 12px;line-height:1.35}
.teste-ctrl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;border:1.5px dashed #C9A100;border-radius:14px;padding:12px;background:#FFFBEA}
.teste-ctrl p{width:100%;font-size:.8125rem;font-weight:800;color:#7A5B00}
.teste-ctrl button{border-radius:10px;padding:10px 12px;font-weight:800;font-size:.8125rem;background:#fff;color:#111;border:1px solid #E2CC7A;min-height:44px}

/* ── CONFIRMACAO (ResultScreen) ───────────────────────────────── */
.conf{border-radius:var(--radius-lg);background:var(--success-bg);border:1.5px solid var(--success-line);padding:var(--s6) var(--s5);scroll-margin-top:76px;text-align:center}
.conf[hidden],.up[hidden],.fim[hidden]{display:none}
.conf > * + *{margin-top:var(--s4)}
.conf-ok{display:grid;place-items:center;width:76px;height:76px;margin:0 auto;border-radius:50%;background:var(--success);color:var(--on-success);
  box-shadow:0 0 0 9px color-mix(in srgb,var(--success) 15%,transparent);animation:popC .55s var(--ease) both}
.conf-ok svg{width:38px;height:38px}
.conf-tit{font-size:var(--t-h1);font-weight:var(--w-display);line-height:1.08;letter-spacing:var(--ls-display);color:var(--success)}
.conf-sub{font-weight:600;font-size:1.0625rem;line-height:1.45;color:var(--text);max-width:28ch;margin-inline:auto}
.passos-tit{font-family:var(--font-display);font-weight:800;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.liberado{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s5) var(--s4)}
.liberado ul{margin-top:var(--s3);text-align:left}
.liberado li{font-size:var(--t-sm);font-weight:500;color:var(--text-2);padding:8px 0;border-top:1px solid var(--border)}
.liberado li:first-child{border-top:0}
.liberado li b{color:var(--text)}
.pedido-n{margin-top:var(--s3);font-size:var(--t-sm);color:var(--text-muted);font-weight:600}
.pedido-n b{color:var(--text);letter-spacing:.04em;font-family:var(--font-mono)}
.btn.acessar{background:var(--success);color:var(--on-success);margin-top:var(--s5)!important}
.btn.acessar[hidden]{display:none}

/* ── DEPOIS DO PAGAMENTO ──────────────────────────────────────── */
.oferta.pago > :not(.pos){display:none}
.oferta.pago{padding-top:var(--s3)}
.pos[hidden]{display:none}
.pos{scroll-margin-top:76px}
.pos > * + *{margin-top:var(--s5)}
.pos-faixa{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;text-align:left;border-radius:var(--radius);padding:14px 16px;
  background:var(--success);color:var(--on-success);box-shadow:0 14px 30px -16px color-mix(in srgb,var(--success) 80%,transparent);animation:popC .5s var(--ease) both}
.pos-faixa::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:translateX(-160%);animation:varre 4.5s ease-in-out .6s infinite}
.pos-ck{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--success)}
.pos-ck svg{width:22px;height:22px}
.pos-faixa p{display:flex;flex-direction:column;line-height:1.3}
.pos-faixa b{font-family:var(--font-display);font-weight:800;font-size:1.0625rem;letter-spacing:.02em}
.pos-faixa span{font-size:var(--t-sm);font-weight:500;opacity:.95}
.pos-faixa a{color:inherit;font-weight:800;text-underline-offset:3px}

/* ── UPSELL / DOWNSELL ────────────────────────────────────────── */
.up{position:relative;overflow:hidden;border-radius:var(--radius-lg);color:var(--up-text);padding:var(--s5) var(--s4) var(--s6);scroll-margin-top:76px;
  background:var(--up-bg);border:2px solid var(--up-gold);text-align:center;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--up-gold) 20%,transparent),0 30px 60px -30px rgba(6,22,79,.9)}
.up > * + *{margin-top:var(--s4)}
.up.entra-up{animation:entraUp .7s var(--mola) both}
@keyframes entraUp{0%{opacity:0;transform:scale(.9) translateY(18px)}100%{opacity:1;transform:none}}
.up-tag span{display:inline-block;font-family:var(--font-display);font-weight:900;font-size:clamp(.875rem,4.45vw,1.3rem);letter-spacing:0;color:#C8101A;white-space:normal;text-wrap:balance;line-height:1.2;max-width:100%;animation:bate 1.8s var(--ease) infinite;
  background:linear-gradient(180deg,color-mix(in srgb,var(--up-gold) 55%,#fff),var(--up-gold-2));border-radius:22px;padding:9px 12px;
  box-shadow:0 6px 18px -6px color-mix(in srgb,var(--up-gold) 80%,transparent)}
@media (max-width:359px){ .up-tag span{font-size:.8125rem} }
/* o texto do downsell e mais comprido: fonte proporcional para caber numa linha */
.up.downsell .up-tag span{font-size:clamp(.8125rem,3.75vw,1.15rem)}
.up-arte{position:relative;margin:var(--s4) auto 0;max-width:420px;border-radius:var(--radius);overflow:hidden;border:1.5px solid color-mix(in srgb,var(--up-gold) 55%,transparent);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.up-arte img{width:100%;height:auto}
.up-tit{color:inherit;font-size:clamp(1.4rem,6.4vw,1.8rem);font-weight:var(--w-display);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.up-tit i{font-style:normal;color:var(--up-gold)}
.up-preco{display:flex;flex-direction:column;align-items:center;gap:2px;margin-inline:auto;width:fit-content;border-radius:var(--radius);padding:10px 26px 12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--up-gold) 55%,#fff),var(--up-gold-2));color:var(--up-ink);
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--up-gold) 75%,transparent)}
.up-preco span{font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.up-preco b{font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,10.5vw,2.7rem);line-height:1;letter-spacing:-.03em}
.up-cond{text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);padding:var(--s2) var(--s4)}
.up-cond li{font-size:var(--t-sm);line-height:1.45;padding:8px 0;color:inherit;opacity:.92;font-weight:500}
.up-cond li + li{border-top:1px solid rgba(255,255,255,.14)}
.up-cond li b{display:block;color:var(--up-gold);font-weight:800;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase}
.up-form > * + *{margin-top:var(--s3)}
.up-form[hidden]{display:none}
.up .campo span{color:inherit}
.up .campo input{border-color:rgba(255,255,255,.4)}
.up .campo input:focus{border-color:var(--up-gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--up-gold) 30%,transparent)}
.btn.up-sim{margin-top:var(--s4)!important;min-height:68px;font-size:1.0625rem;color:var(--up-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--up-gold) 55%,#fff) 0%,var(--up-gold) 45%,var(--up-gold-2) 100%);
  box-shadow:0 10px 28px -8px color-mix(in srgb,var(--up-gold) 90%,transparent),inset 0 -3px 0 rgba(0,0,0,.12);animation:salta 1.6s ease-in-out infinite}
.pular{display:block;width:100%;min-height:52px;font-weight:600;font-size:1rem;color:inherit;opacity:.78;text-decoration:underline;text-underline-offset:3px}
.up-nota{font-size:var(--t-sm);opacity:.72;font-weight:500;line-height:1.45}
.up .pix{background:var(--surface);color:var(--text);border-radius:var(--radius);padding:var(--s5) var(--s4)}
.up .pix .px-tit{font-size:var(--t-h3)}
.up.feito{background:var(--success-bg);border:1.5px solid var(--success-line);color:var(--text);padding:var(--s4);box-shadow:none;animation:popC .5s var(--ease) both}
.up-res{display:flex;align-items:center;gap:12px;text-align:left;font-size:var(--t-sm);font-weight:500;line-height:1.4;color:var(--text-2)}
.up-res .pos-ck{background:var(--success);color:var(--on-success)}
.up-res b{color:var(--success);font-weight:800}

/* ── ENCERRAMENTO ─────────────────────────────────────────────── */
.fim{border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border);padding:var(--s6) var(--s5);scroll-margin-top:76px;text-align:center}
.fim > * + *{margin-top:var(--s4)}
.fim-tit{font-size:var(--t-h1);font-weight:var(--w-display);letter-spacing:var(--ls-display);line-height:1.08}
.fim-sub{font-weight:600;color:var(--text-2)}
.fim-lista{text-align:left;max-width:32ch;margin-inline:auto}
.fim-lista li{position:relative;padding:8px 0 8px 32px;font-weight:600;font-size:1rem;border-top:1px solid var(--border)}
.fim-lista li:first-child{border-top:0}
.fim-lista li::before{content:"✓";position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;background:var(--success-bg);
  border:1px solid var(--success-line);color:var(--success);font-size:.75rem;font-weight:900;display:grid;place-items:center}
.fim-ir{display:inline-block;font-weight:800;color:var(--success)}
.fim .gira{width:36px;height:36px;border-width:3px;margin:0 auto;color:var(--primary)}

/* retomada: volta direto ao pedido, sem repetir o quiz */
.etapa.retomado > :not(.oferta){display:none}
.etapa.retomado .oferta{padding-top:0}

/* ── RODAPE ───────────────────────────────────────────────────── */
.rodape{padding:var(--s6) var(--pad) var(--s7);text-align:center;font-size:.875rem;color:var(--text-muted);line-height:1.65}

/* ── LIGHTBOX ─────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,12,.94);display:none;place-items:center;padding:var(--s4);overscroll-behavior:contain}
.lb.on{display:grid;animation:surgeSuave .22s ease}
.lb img{max-width:100%;max-height:88vh;width:auto;border-radius:10px;object-fit:contain}
.lb button{position:absolute;top:calc(var(--s4) + env(safe-area-inset-top));right:var(--s4);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;line-height:1}
canvas#confete{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}

/* ── PAGINA DE OBRIGADO (obrigado.html) ───────────────────────── */
.obg{padding:0 0 var(--s7)}
.obg [hidden]{display:none!important}
.obg-carrega{padding:var(--s8) var(--pad);display:grid;justify-items:center;gap:var(--s4);text-align:center}
.obg-carrega .gira{width:44px;height:44px;border-width:4px;color:var(--primary)}
.obg-carrega p{font-family:var(--font-display);font-weight:800;font-size:var(--t-h3)}
.obg-hero{position:relative;overflow:hidden;background:var(--grad);color:var(--on-primary);text-align:center;
  padding:var(--s5) var(--pad) calc(var(--s7) + 28px);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.obg-hero::before,.obg-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
.obg-hero::before{width:260px;height:260px;top:-120px;right:-90px}
.obg-hero::after{width:180px;height:180px;bottom:-90px;left:-70px}
.obg-hero > *{position:relative}
.obg-marca{font-family:var(--font-display);font-weight:800;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.obg-marca.escura{color:var(--text-muted);text-align:center;padding:var(--s5) 0 var(--s4);opacity:1}
.obg-selo{display:grid;place-items:center;width:84px;height:84px;margin:var(--s6) auto 0;border-radius:50%;background:#fff;color:var(--success);
  box-shadow:0 0 0 10px rgba(255,255,255,.18),0 18px 36px -14px rgba(0,0,0,.45);animation:popC .6s var(--ease) both}
.obg-selo svg{width:42px;height:42px}
.obg-chip{display:inline-block;margin-top:var(--s5);padding:6px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.2);
  font-weight:800;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
.obg-tit{margin-top:var(--s3);color:inherit;font-size:clamp(2.1rem,10vw,2.6rem);font-weight:var(--w-display);line-height:1.05;letter-spacing:var(--ls-display)}
.obg-sub{margin:var(--s3) auto 0;max-width:30ch;font-weight:500;font-size:1.0625rem;line-height:1.45;opacity:.92}
.obg-card{position:relative;margin:var(--s4) var(--s4) 0;background:var(--card-bg);border:var(--hairline) solid var(--card-border);border-radius:var(--radius-lg);
  padding:var(--s5) var(--s5) var(--s6);box-shadow:var(--shadow)}
.obg-passos{margin-top:-36px}
.obg-h2{font-size:1.25rem;font-weight:var(--w-display);line-height:1.2;letter-spacing:var(--ls-display)}
.obg-txt{margin-top:var(--s3);font-size:1rem;font-weight:500;line-height:1.5;color:var(--text-2)}
.obg-card .btn{margin-top:var(--s4)!important}
.obg-lista{margin:var(--s5) 0 0;padding:0}
.obg-passo{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s6)}
.obg-passo:last-child{padding-bottom:0}
.obg-passo:not(:last-child)::before{content:"";position:absolute;left:17px;top:40px;bottom:6px;width:2px;border-radius:2px;background:var(--border)}
.obg-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--text);color:var(--surface);
  font-family:var(--font-display);font-weight:900;font-size:1rem}
.obg-passo.feito .obg-num{background:var(--success);color:var(--on-success)}
.obg-passo.feito:not(:last-child)::before{background:var(--success-line)}
.obg-num svg{width:18px;height:18px}
.obg-passo h3{font-size:1.0625rem;font-weight:800;line-height:1.3;padding-top:6px}
.obg-passo p{margin-top:4px;font-size:.9688rem;font-weight:500;line-height:1.5;color:var(--text-2)}
.obg-passo p b{color:var(--text);font-weight:800;letter-spacing:.03em;font-family:var(--font-mono)}
.btn.whats{background:#25D366;color:#fff;box-shadow:0 10px 24px -12px rgba(37,211,102,.9);min-height:64px;font-size:1.0625rem;padding:16px 18px;animation:salta 1.6s ease-in-out infinite}
.btn.whats svg{width:24px;height:24px;animation:none}
.btn.whats span{min-width:0;overflow-wrap:break-word}
.obg-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4);padding:16px 18px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border-strong);background:var(--surface);font-weight:800;font-size:1rem;color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.obg-link:hover{border-color:var(--text);background:var(--surface-2)}
.obg-link svg{width:20px;height:20px;flex:0 0 auto;color:var(--primary)}
.obg-recibo-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.obg-pago{padding:4px 12px;border-radius:var(--radius-pill);background:var(--success-bg);border:1px solid var(--success-line);color:var(--success);
  font-weight:800;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
.obg-itens{margin-top:var(--s4)}
.obg-itens > li{padding:var(--s4) 0;border-top:1px dashed var(--border-strong)}
.obg-item{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);font-weight:700;font-size:1rem;line-height:1.4}
.obg-item b{white-space:nowrap;font-weight:800;font-family:var(--font-mono)}
.obg-bonus{margin-top:var(--s2)}
.obg-bonus li{display:flex;justify-content:space-between;gap:var(--s3);padding:3px 0 3px 16px;position:relative;font-size:.9375rem;font-weight:500;color:var(--text-2)}
.obg-bonus li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
.obg-bonus i{font-style:normal;font-weight:800;font-size:.8125rem;color:var(--success);white-space:nowrap}
.obg-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--s4);border-top:2px solid var(--text);font-weight:800}
.obg-total b{font-size:1.25rem;font-weight:900;font-family:var(--font-mono)}
.obg-nota{margin:var(--s5) auto 0;padding:0 var(--pad);max-width:36ch;text-align:center;font-size:var(--t-sm);font-weight:500;color:var(--text-muted)}
.obg-nada{padding-bottom:var(--s5)}
.obg-nada .obg-card{text-align:center}

/* ── TELAS MAIORES: a coluna respira ──────────────────────────── */
@media (min-width:768px){
  :root{--etapa-mx:0px;--pad:40px}
  .page{padding-inline:20px}
  .topo{border-radius:0 0 var(--radius) var(--radius)}
}

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