/* =============================================================
   LP VSL — DESIGN "SALA DE CINEMA"
   -------------------------------------------------------------
   Direção: a página parece a INTERFACE DO PRODUTO, não um panfleto.
   Fundo azul-noite com aurora, vídeo em moldura de TV com glow,
   conteúdo em prateleiras horizontais como catálogo de streaming.

   Dois acentos com funções separadas — nunca competindo:
     VERDE  = ação e confirmação (só CTA, checks, sucesso)
     ÂMBAR  = valor e urgência (preço, timer, escassez)

   Mobile-first e boa no PC (regra fixa do CEO).
   ============================================================= */

:root{
  /* --- marca --- */
  --verde:      #3ef04a;
  --verde-esc:  #16a83a;
  --ambar:      #ffb020;
  --ambar-claro:#ffd166;
  --vermelho:   #ff4747;

  /* --- superfícies --- */
  --noite:      #060a12;
  --noite-2:    #0a1220;
  --vidro:      rgba(255,255,255,.045);
  --vidro-forte:rgba(255,255,255,.075);
  --borda:      rgba(255,255,255,.10);
  --borda-viva: rgba(62,240,74,.30);

  /* --- texto --- */
  --texto:      #eaf2ee;
  --suave:      rgba(234,242,238,.66);
  --fraco:      rgba(234,242,238,.40);

  --fonte: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r-sm: 12px;  --r-md: 18px;  --r-lg: 26px;
  --palco: 1120px;
  --video: 380px;
  --sombra: 0 20px 60px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box; }

/* TRAVA HORIZONTAL — `clip` e não `hidden`.
   `overflow-x:hidden` cria um contêiner de rolagem: o dedo ainda
   arrasta a página de lado e o `position:sticky` da barra do topo
   pode quebrar. `clip` corta de verdade e não cria scroll.
   Aplicado no html E no body: só num dos dois, o outro ainda rola. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}

body{
  margin:0;
  font-family:var(--fonte);
  color:var(--texto);
  background:var(--noite);
  line-height:1.5;
  overflow-x:clip;
  width:100%;
  max-width:100vw;
}

/* --- AURORA: luz de tela batendo na parede escura ---
   Fixa e atrás de tudo. Dá profundidade sem pesar: são dois
   gradientes, não imagem. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 420px at 50% -8%,  rgba(62,240,74,.16),  transparent 62%),
    radial-gradient(620px 380px at 92% 22%,  rgba(0,140,255,.11),  transparent 60%),
    radial-gradient(700px 460px at 4% 74%,   rgba(255,176,32,.07), transparent 62%),
    linear-gradient(180deg, #071020 0%, var(--noite) 46%, #04070d 100%);
}

img{ max-width:100%; display:block; }

/* =============================================================
   BARRA SUPERIOR — discreta, informativa
   ============================================================= */
.geo-bar{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px 14px;
  background:rgba(6,10,18,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--borda);
  font-size:12.5px;
}
.geo-bar__icon{
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--verde);
}
.geo-bar__icon svg{ width:17px; height:17px; }
.geo-bar__content{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center; }
.geo-bar__message{ font-weight:700; }
.geo-bar__message strong{ color:var(--verde); font-weight:800; }
.geo-bar__payment{
  display:flex; align-items:center; gap:6px;
  padding-left:9px; border-left:1px solid var(--borda);
  color:var(--suave); font-weight:600; font-size:11.5px;
}
.geo-bar__dot{
  width:6px; height:6px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 9px var(--verde); animation:pulso 1.8s ease-in-out infinite;
}
@keyframes pulso{ 0%,100%{opacity:1} 50%{opacity:.28} }

/* =============================================================
   PALCO
   ============================================================= */
.palco{ padding:26px 16px 70px; }
.palco__inner{ max-width:var(--palco); margin:0 auto; }

/* --- FAIXA: agora um "selo de canal", não um outdoor --- */
/* No mobile a faixa EMPILHA (o texto não cabe numa pílula de 430px
   e ficava cortado na borda). No desktop ela vira a pílula única. */
.faixa{
  width:fit-content; max-width:100%;
  margin:0 auto 18px;
  display:flex; flex-direction:column; align-items:center; gap:0;
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--borda);
  background:var(--vidro);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  text-align:center;
}
.faixa__fogo{
  align-self:stretch;
  padding:9px 16px;
  background:linear-gradient(135deg,var(--vermelho),#c81010);
  color:#fff; font-size:clamp(11px,3vw,12.5px); font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.faixa__resto{ padding:9px 16px 3px; font-size:clamp(12px,3.4vw,13.5px); font-weight:700; }
.faixa__selo{
  padding:0 16px 10px;
  color:var(--verde); font-size:10.5px; font-weight:800; letter-spacing:.12em;
}

@media (min-width:640px){
  .faixa{ flex-direction:row; align-items:center; border-radius:999px; }
  .faixa__fogo{ align-self:auto; }
  .faixa__resto{ padding:9px 15px; }
  .faixa__selo{ padding:9px 17px 9px 0; }
}

.headline{
  margin:0 auto 10px; max-width:16ch;
  font-size:clamp(28px, 7.2vw, 52px);
  font-weight:800; line-height:1.06; text-align:center;
  letter-spacing:-.035em;
  background:linear-gradient(180deg,#fff 40%, #b9c9c0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.headline em{
  font-style:normal;
  background:linear-gradient(180deg,var(--verde),var(--verde-esc));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subheadline{
  margin:0 auto 24px; max-width:38ch;
  font-size:clamp(14px, 3.8vw, 17px);
  text-align:center; color:var(--suave);
}

/* =============================================================
   VSL — moldura de TV
   ============================================================= */
.vsl{ display:flex; justify-content:center; }
.vsl__frame{
  position:relative;
  width:100%; max-width:var(--video);
  aspect-ratio:9/16;
  background:#000;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  /* Glow: a "luz" da tela vazando na parede */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 30px 80px rgba(0,0,0,.65),
    0 0 90px -20px rgba(62,240,74,.35);
}
.vsl__frame video{ width:100%; height:100%; object-fit:cover; display:block; }

.vsl__unmute{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  border:0; cursor:pointer; font-family:inherit; color:#fff;
  background:radial-gradient(circle at center, rgba(0,0,0,.35), rgba(0,0,0,.72));
}
.vsl__unmute[hidden]{ display:none; }
.vsl__unmute-icon{
  width:82px; height:82px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--verde),var(--verde-esc));
  color:#04210f;
  box-shadow:0 10px 34px rgba(62,240,74,.4);
  animation:anel 2.4s infinite;
}
@keyframes anel{
  0%  { box-shadow:0 10px 34px rgba(62,240,74,.4), 0 0 0 0 rgba(62,240,74,.5); }
  70% { box-shadow:0 10px 34px rgba(62,240,74,.4), 0 0 0 26px rgba(62,240,74,0); }
  100%{ box-shadow:0 10px 34px rgba(62,240,74,.4), 0 0 0 0 rgba(62,240,74,0); }
}
.vsl__unmute-text{
  font-size:15px; font-weight:800; letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}

.vsl__progress{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:4;
  background:rgba(255,255,255,.12);
}
.vsl__progress i{ display:block; height:100%; width:0; background:var(--verde); transition:width .25s linear; }

.vsl--liberado .vsl__progress{
  height:18px; cursor:pointer; background:transparent;
  display:flex; align-items:center;
}
.vsl--liberado .vsl__progress::before{
  content:''; position:absolute; left:12px; right:12px; top:50%;
  height:3px; margin-top:-1.5px; border-radius:99px; background:rgba(255,255,255,.22);
}
.vsl--liberado .vsl__progress i{
  position:relative; z-index:1; height:3px; border-radius:99px;
  margin:0 12px; transition:none;
}
.vsl--liberado .vsl__progress i::after{
  content:''; position:absolute; right:-7px; top:50%;
  width:14px; height:14px; margin-top:-7px; border-radius:50%;
  background:var(--verde); box-shadow:0 2px 8px rgba(0,0,0,.7);
}

.vsl__controles{
  position:absolute; left:0; right:0; bottom:18px; z-index:5;
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
}
.vsl__controles[hidden]{ display:none; }
.vsl__btn{
  width:34px; height:34px; flex-shrink:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
}
.vsl__btn:active{ transform:scale(.92); }
.vsl__tempo{
  margin-right:auto; font-size:11.5px; font-weight:700;
  color:rgba(255,255,255,.9); text-shadow:0 1px 5px #000;
}
.vsl__tempo b{ color:var(--verde); font-weight:800; }

body.vsl-cheia{ overflow:hidden; }
body.vsl-cheia .vsl__frame{
  position:fixed; inset:0; z-index:9990;
  max-width:none; width:100vw; height:100dvh;
  aspect-ratio:auto; border-radius:0; border:0; box-shadow:none;
}
body.vsl-cheia .vsl__frame video{ object-fit:contain; }
body.vsl-cheia .geo-bar{ display:none; }

.vsl__dica{
  position:absolute; left:50%; bottom:58px; z-index:6;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px;
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:600; white-space:nowrap;
  animation:pulsarDica 2.2s ease-in-out infinite;
}
.vsl__dica[hidden]{ display:none; }
@keyframes pulsarDica{ 0%,100%{opacity:.6} 50%{opacity:1} }

/* =============================================================
   OFERTA — cartão de vidro
   ============================================================= */
body:not(.oferta-liberada) #oferta{
  display:none !important; visibility:hidden !important;
  opacity:0 !important; pointer-events:none !important;
}
.oferta{ margin-top:22px; display:flex; justify-content:center; animation:surgir .55s ease both; }
@keyframes surgir{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }

.oferta__box{
  width:100%; max-width:440px; text-align:center;
  padding:24px 22px;
  background:var(--vidro); backdrop-filter:blur(16px);
  border:1px solid var(--borda-viva); border-radius:var(--r-md);
  box-shadow:var(--sombra);
}
.oferta__box--nu{ background:none; border:0; box-shadow:none; padding:0; backdrop-filter:none; }
.oferta__de{ margin:0; font-size:13.5px; color:var(--fraco); text-decoration:line-through; }
.oferta__por{
  margin:2px 0 0; font-size:52px; font-weight:800; line-height:1;
  color:var(--ambar); letter-spacing:-.04em;
}
.oferta__moeda{ font-size:24px; vertical-align:super; margin-right:3px; }
.oferta__parcela{ margin:6px 0 18px; font-size:13px; color:var(--suave); }

/* --- CTA --- */
.cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:18px 24px;
  border:0; border-radius:14px;
  background:linear-gradient(135deg,var(--verde),var(--verde-esc));
  color:#04210f; font-family:inherit; font-size:16.5px; font-weight:800;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  box-shadow:0 12px 32px -8px rgba(62,240,74,.55);
  transition:transform .16s ease, box-shadow .25s ease, filter .2s;
}
.cta:hover{ filter:brightness(1.06); box-shadow:0 16px 42px -8px rgba(62,240,74,.7); }
.cta:active{ transform:scale(.985); }
.cta[disabled]{ opacity:.6; cursor:progress; }
/* Brilho que atravessa o botão — chama o olho sem piscar */
.cta::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);
  animation:brilhoCta 3.4s ease-in-out infinite;
}
@keyframes brilhoCta{ 0%,62%{left:-60%} 88%,100%{left:130%} }
/* CTA de meio de página: aparece no fim das seções que convencem.
   Largura limitada — botão de ponta a ponta no desktop parece
   erro de layout, não convite. */
.cta--secao{
  max-width:400px; margin:30px auto 0;
  display:flex;
}
.cta--copiar{
  background:var(--vidro); color:var(--verde);
  border:1px solid var(--borda-viva); box-shadow:none;
}
.cta--copiar::after{ display:none; }
.cta--modal{ margin-top:4px; }

.selos{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 15px;
  font-size:11.5px; color:var(--suave);
}
.selos li::before{ content:'✓'; color:var(--verde); font-weight:800; margin-right:5px; }

.escassez{ margin-top:14px; text-align:center; font-size:13px; color:var(--suave); }
.escassez__clock{ color:var(--ambar); vertical-align:-2px; margin-right:4px; }
.escassez__data{ color:var(--ambar); font-weight:800; }
.escassez__aviso{ margin-top:5px; font-size:12px; color:var(--fraco); }
body.oferta-liberada .escassez__aviso{ display:none; }

/* =============================================================
   PÓS-GATE
   ============================================================= */
body:not(.oferta-liberada) .pos-gate{ display:none !important; }
.pos-gate{ max-width:920px; margin:60px auto 0; }

/* Revelação — nasce VISÍVEL; só esconde se o JS assumir (regra do CEO) */
html.js-revela .revelar{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,1,.3,1), transform .7s cubic-bezier(.2,1,.3,1);
}
html.js-revela .revelar.visivel{ opacity:1; transform:none; }
html.js-revela .revelar .card-b,
html.js-revela .revelar .passo-i,
html.js-revela .revelar .depo{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,1,.3,1);
}
html.js-revela .revelar.visivel .card-b,
html.js-revela .revelar.visivel .passo-i,
html.js-revela .revelar.visivel .depo{ opacity:1; transform:none; }
html.js-revela .revelar.visivel :nth-child(2 of .card-b),
html.js-revela .revelar.visivel :nth-child(2 of .passo-i){ transition-delay:.08s }
html.js-revela .revelar.visivel :nth-child(3 of .card-b),
html.js-revela .revelar.visivel :nth-child(3 of .passo-i){ transition-delay:.16s }
html.js-revela .revelar.visivel :nth-child(4 of .card-b){ transition-delay:.24s }
html.js-revela .revelar.visivel :nth-child(5 of .card-b){ transition-delay:.32s }
html.js-revela .revelar.visivel :nth-child(6 of .card-b){ transition-delay:.4s }

/* --- TIMER --- */
.timer{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  margin:0 0 44px; padding:16px 20px;
  background:linear-gradient(135deg, rgba(255,176,32,.13), rgba(255,176,32,.04));
  border:1px solid rgba(255,176,32,.3); border-radius:var(--r-md);
}
.timer[hidden]{ display:none; }
.timer__texto{ font-size:12.5px; color:var(--ambar-claro); }
.timer__texto b{ display:block; font-size:14.5px; font-weight:800; color:#fff; }
.timer__relogio{ display:flex; gap:7px; }
.timer__bloco{
  min-width:52px; padding:8px 5px; text-align:center;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,176,32,.24); border-radius:11px;
}
.timer__bloco b{
  display:block; font-size:21px; font-weight:800; color:var(--ambar);
  font-variant-numeric:tabular-nums; line-height:1;
}
.timer__bloco span{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--fraco); }

/* --- cabeçalho de seção --- */
.secao{ margin-bottom:64px; }
.secao__tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; margin-bottom:12px;
  background:var(--vidro); border:1px solid var(--borda); border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--verde);
}
.secao__titulo{
  margin:0 0 8px;
  font-size:clamp(24px, 5.6vw, 38px);
  font-weight:800; line-height:1.12; letter-spacing:-.03em;
}
.secao__titulo em{ font-style:normal; color:var(--ambar); }
.secao__sub{ margin:0 0 26px; max-width:52ch; font-size:14.5px; color:var(--suave); }
/* A seção centraliza só o CABEÇALHO (tag, título, subtítulo).
   O conteúdo volta pra esquerda: texto corrido centralizado é
   cansativo de ler, e com ícone à esquerda fica visualmente torto. */
.secao--centro > .secao__tag,
.secao--centro > .secao__titulo,
.secao--centro > .secao__sub{ text-align:center; }
.secao--centro{ text-align:center; }
.secao--centro .secao__sub{ margin-left:auto; margin-right:auto; }
.secao--centro .beneficios,
.secao--centro .versus,
.secao--centro .passos,
.secao--centro .depoimentos,
.secao--centro .faq,
.secao--centro .prateleira{ text-align:left; }

/* --- CARDS DE BENEFÍCIO --- */
.beneficios{ display:grid; gap:12px; }
.card-b{
  position:relative; overflow:hidden;
  padding:20px;
  background:var(--vidro); backdrop-filter:blur(12px);
  border:1px solid var(--borda); border-radius:var(--r-md);
  transition:border-color .25s, transform .25s, background .25s;
}
.card-b:hover{ border-color:var(--borda-viva); transform:translateY(-3px); background:var(--vidro-forte); }
.card-b__icone{
  width:46px; height:46px; margin-bottom:13px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; font-size:21px;
  background:linear-gradient(135deg, rgba(62,240,74,.2), rgba(62,240,74,.05));
  border:1px solid var(--borda-viva);
}
.card-b strong{ display:block; font-size:16px; font-weight:800; margin-bottom:5px; letter-spacing:-.01em; }
.card-b span{ font-size:13.5px; color:var(--suave); line-height:1.5; }

/* --- PRATELEIRA: rola na horizontal, como catálogo de streaming ---
   Sem margin negativa: era ela que empurrava os chips 27px além da
   janela e liberava o arrasto lateral da página inteira. O respiro
   das pontas agora vem de padding, que fica DENTRO do elemento. */
.prateleira{
  display:flex; gap:10px;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:2px 2px 16px;
  margin:0 0 22px;
  max-width:100%;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.prateleira::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:center;
  min-width:118px; padding:14px 15px;
  border-radius:var(--r-sm);
  background:linear-gradient(150deg, var(--vidro-forte), rgba(255,255,255,.02));
  border:1px solid var(--borda);
}
.chip b{ font-size:20px; font-weight:800; color:var(--verde); line-height:1.1; letter-spacing:-.02em; }
.chip span{ font-size:11.5px; color:var(--suave); margin-top:4px; line-height:1.3; }

/* --- A CONTA: fatura mensal vs pagamento único ---
   O lado ruim é desenhado como FATURA (papel, linhas pontilhadas,
   números alinhados à direita). O lado bom é um selo de compra
   única. A metáfora visual faz a comparação antes do texto. */
.versus{ display:grid; gap:0; }

.lado{ padding:24px 22px; }
.lado h3{
  margin:0 0 4px; font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
}
.lado__legenda{ margin:0 0 16px; font-size:12px; color:var(--fraco); }

/* --- fatura --- */
.lado--ruim{
  background:rgba(255,71,71,.055);
  border:1px solid rgba(255,71,71,.24);
  border-radius:var(--r-md) var(--r-md) 0 0;
  border-bottom:0;
}
.lado--ruim h3{ color:#ff8a8a; }
.lado--ruim ul{ list-style:none; margin:0; padding:0; }
.lado--ruim li{
  display:flex; align-items:baseline; gap:10px;
  padding:10px 0; font-size:13.5px; color:var(--suave);
}
.lado--ruim li + li{ border-top:1px dashed rgba(255,255,255,.10); }
/* Pontilhado que liga o nome ao valor, como conta de luz */
.lado--ruim li::after{
  content:''; flex:1; height:1px; margin:0 2px;
  border-bottom:1px dotted rgba(255,255,255,.18);
  order:1;
}
.lado--ruim li b{
  order:2; color:var(--texto); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lado__total{
  margin-top:18px; padding-top:16px;
  border-top:2px solid rgba(255,71,71,.28);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.lado__total-rot{ font-size:12px; color:var(--fraco); text-transform:uppercase; letter-spacing:.1em; }
.lado__total span{ font-size:30px; font-weight:800; color:#ff8a8a; letter-spacing:-.03em; line-height:1; }
.lado__total em{ display:block; font-style:normal; font-size:11.5px; color:var(--fraco); margin-top:3px; }

/* --- selo do meio: encaixa entre os dois blocos --- */
.versus__selo{
  justify-self:center; z-index:2; margin:-19px 0;
  width:52px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.08em;
  background:var(--noite-2); color:var(--suave);
  border:1px solid var(--borda);
}

/* --- compra única --- */
.lado--bom{
  text-align:center;
  background:
    radial-gradient(420px 180px at 50% 0%, rgba(62,240,74,.16), transparent 70%),
    linear-gradient(180deg, rgba(62,240,74,.08), rgba(62,240,74,.02));
  border:1px solid var(--borda-viva);
  border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:0 24px 60px -26px rgba(62,240,74,.6);
  padding-top:30px;
}
.lado--bom h3{ color:var(--verde); }
.lado__preco{ display:flex; align-items:flex-start; justify-content:center; gap:5px; margin-top:10px; }
.lado__preco span{ font-size:24px; font-weight:700; color:var(--ambar); margin-top:9px; }
.lado__preco strong{
  font-size:clamp(52px,13vw,68px); font-weight:800; color:var(--ambar);
  line-height:1; letter-spacing:-.045em;
  text-shadow:0 0 50px rgba(255,176,32,.3);
}
.lado__obs{ margin:8px 0 18px; font-size:13px; color:var(--suave); }
.lado__ganhos{ list-style:none; margin:0; padding:0; text-align:left; display:grid; gap:2px; }
.lado__ganhos li{ position:relative; padding:8px 0 8px 28px; font-size:13.5px; color:var(--suave); }
.lado__ganhos li::before{
  content:''; position:absolute; left:2px; top:13px;
  width:12px; height:7px;
  border-left:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:rotate(-45deg);
}
/* Economia: o número que fecha o argumento */
.economia{
  margin-top:20px; padding:14px;
  background:rgba(255,176,32,.1); border:1px dashed rgba(255,176,32,.4);
  border-radius:var(--r-sm);
  font-size:13px; color:var(--ambar-claro);
}
.economia b{ display:block; font-size:20px; font-weight:800; color:var(--ambar); letter-spacing:-.02em; }

/* --- PASSOS --- */
.passos{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:p; }
.passo-i{
  counter-increment:p; position:relative;
  padding:20px 20px 20px 66px;
  background:var(--vidro); border:1px solid var(--borda); border-radius:var(--r-md);
}
.passo-i::before{
  content:counter(p);
  position:absolute; left:20px; top:20px;
  width:32px; height:32px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800;
  background:linear-gradient(135deg,var(--verde),var(--verde-esc)); color:#04210f;
}
.passo-i strong{ display:block; font-size:15.5px; font-weight:800; margin-bottom:3px; }
.passo-i span{ font-size:13.5px; color:var(--suave); }

/* --- DEPOIMENTOS --- */
.depoimentos{ display:grid; gap:12px; }
.depo{
  padding:20px;
  background:var(--vidro); border:1px solid var(--borda); border-radius:var(--r-md);
  position:relative;
}
.depo::before{
  content:'"'; position:absolute; top:6px; right:18px;
  font-size:60px; line-height:1; color:rgba(62,240,74,.14); font-family:Georgia,serif;
}
.depo__topo{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.depo__avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:#04210f;
  background:linear-gradient(135deg,var(--verde),var(--verde-esc));
}
.depo__nome{ display:block; font-size:14.5px; font-weight:800; }
.depo__meta{ font-size:11.5px; color:var(--fraco); }
.depo__estrelas{ margin-left:auto; color:var(--ambar); font-size:13px; letter-spacing:1.5px; }
.depo__texto{ margin:0; font-size:14px; line-height:1.6; color:var(--suave); }
.prova__rodape{ margin:14px 0 0; text-align:center; font-size:12px; color:var(--fraco); }

/* --- GARANTIA --- */
.garantia{
  text-align:center; padding:38px 26px;
  background:radial-gradient(600px 240px at 50% 0%, rgba(62,240,74,.12), transparent 68%), var(--vidro);
  border:1px solid var(--borda-viva); border-radius:var(--r-lg);
  backdrop-filter:blur(14px);
}
.garantia__selo{
  width:92px; height:92px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--verde);
  background:rgba(62,240,74,.1); border:1px solid var(--borda-viva);
  box-shadow:0 0 44px -10px rgba(62,240,74,.55);
}
.garantia__titulo{ margin:0 0 10px; font-size:26px; font-weight:800; letter-spacing:-.025em; }
.garantia__texto{ margin:0 auto 22px; max-width:44ch; font-size:14.5px; color:var(--suave); }
.garantia__itens{ display:grid; gap:9px; text-align:left; }
.garantia__item{
  display:flex; align-items:center; gap:10px;
  padding:13px 15px; font-size:13.5px; color:var(--suave);
  background:rgba(255,255,255,.03); border:1px solid var(--borda); border-radius:var(--r-sm);
}
.garantia__item::before{ content:'✓'; color:var(--verde); font-weight:800; }

/* --- FAQ --- */
.faq{ display:grid; gap:10px; }
.faq__item{
  background:var(--vidro); border:1px solid var(--borda);
  border-radius:var(--r-sm); overflow:hidden;
  transition:border-color .2s;
}
.faq__item[open]{ border-color:var(--borda-viva); }
.faq__item summary{
  display:flex; align-items:center; gap:12px;
  padding:17px 18px; cursor:pointer; list-style:none;
  font-size:14.5px; font-weight:700;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:''; margin-left:auto; flex-shrink:0;
  width:11px; height:11px;
  border-right:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s;
}
.faq__item[open] summary::after{ transform:rotate(225deg) translate(-3px,-3px); }
.faq__item p{ margin:0; padding:0 18px 18px; font-size:13.5px; line-height:1.65; color:var(--suave); }

/* --- FECHAMENTO --- */
.fechamento{
  text-align:center; padding:44px 26px;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(255,176,32,.14), transparent 70%),
    var(--vidro);
  border:1px solid rgba(255,176,32,.28); border-radius:var(--r-lg);
  backdrop-filter:blur(14px);
}
.fechamento__de{ font-size:14px; color:var(--fraco); }
.fechamento__de s{ text-decoration-color:rgba(255,255,255,.35); }
.fechamento__valor{ display:flex; align-items:flex-start; justify-content:center; gap:6px; margin:4px 0 5px; }
.fechamento__valor span{ font-size:26px; font-weight:700; color:var(--ambar); margin-top:11px; }
.fechamento__valor strong{
  font-size:clamp(56px,14vw,76px); font-weight:800; color:var(--ambar);
  line-height:1; letter-spacing:-.045em;
  text-shadow:0 0 60px rgba(255,176,32,.35);
}
.fechamento__obs{ font-size:13.5px; color:var(--suave); }
.fechamento .cta{ margin-top:22px; max-width:420px; }
.fechamento__selos{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px;
  font-size:12px; color:var(--suave);
}
.fechamento__selos li::before{ content:'✓'; color:var(--verde); font-weight:800; margin-right:5px; }

.rodape{
  margin-top:44px; padding:24px 0 0;
  border-top:1px solid var(--borda);
  text-align:center; font-size:11.5px; line-height:1.65; color:var(--fraco);
}
.rodape p{ margin:0 0 5px; }

/* =============================================================
   MODAL — BOTTOM SHEET
   ============================================================= */
.modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center; }
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(2,5,10,.78); backdrop-filter:blur(6px);
  animation:aparecer .32s ease both;
}
@keyframes aparecer{ from{opacity:0} to{opacity:1} }

.modal__card{
  position:relative; width:100%; max-width:540px; max-height:94dvh;
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#0d1726,#080e18 240px);
  border:1px solid var(--borda); border-top:1px solid var(--borda-viva);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -24px 70px rgba(0,0,0,.75);
  animation:subirFolha .46s cubic-bezier(.16,1,.3,1) both;
  will-change:transform;
}
@keyframes subirFolha{ from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal__card.arrastando{ animation:none; transition:none; }
.modal__card.voltando{ animation:none; transition:transform .32s cubic-bezier(.16,1,.3,1); }

.modal__alca{ padding:12px 0 4px; display:flex; justify-content:center; cursor:grab; touch-action:none; flex-shrink:0; }
.modal__alca i{ width:44px; height:4px; border-radius:99px; background:rgba(255,255,255,.24); }

.modal__topo{
  display:flex; align-items:center; gap:14px;
  padding:8px 18px 14px; flex-shrink:0;
}
.modal__voltar,.modal__x{
  width:32px; height:32px; flex-shrink:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; cursor:pointer; color:var(--suave);
  background:var(--vidro); border:1px solid var(--borda);
  transition:color .15s, background .15s;
}
.modal__voltar:hover,.modal__x:hover{ color:#fff; background:var(--vidro-forte); }
.modal__voltar[hidden]{ display:none; }
.modal__x{ font-size:19px; line-height:1; }

/* Progresso em PONTOS: mostra quantas etapas faltam de bater o olho.
   Barra contínua não comunica "faltam 3 telas". */
.progresso{ flex:1; display:flex; align-items:center; gap:5px; }
.progresso i{
  flex:1; height:3px; border-radius:99px;
  background:rgba(255,255,255,.12);
  transition:background .35s ease;
}
.progresso i.feito{ background:var(--verde); }
.progresso i.atual{ background:var(--verde); box-shadow:0 0 10px rgba(62,240,74,.7); }

.modal__corpo{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 22px 26px; }

.passo{ animation:entrar .34s cubic-bezier(.2,1,.3,1) both; }
.passo[hidden]{ display:none; }
@keyframes entrar{ from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none} }

.modal__titulo{ margin:0 0 7px; font-size:22px; font-weight:800; text-align:center; letter-spacing:-.02em; }
.modal__sub{ margin:0 0 20px; font-size:13.5px; color:var(--suave); text-align:center; }
.modal__seguro{ margin:12px 0 0; font-size:11px; color:var(--fraco); text-align:center; }

/* --- value stack --- */
.stack{ list-style:none; margin:0 0 18px; padding:0; }
.stack li{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.stack li:last-child{ border-bottom:0; }
.stack__check{
  flex-shrink:0; width:22px; height:22px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px; font-size:12px; font-weight:800;
  background:rgba(62,240,74,.14); color:var(--verde);
}
.stack__texto{ display:flex; flex-direction:column; gap:2px; }
.stack__texto strong{ font-size:15px; font-weight:700; }
.stack__texto em{ font-style:normal; font-size:12.5px; color:var(--fraco); }
.stack__bonus .stack__check{ background:rgba(255,176,32,.16); color:var(--ambar); }

.stack__total{
  text-align:center; padding:18px;
  background:linear-gradient(160deg, rgba(255,176,32,.1), transparent);
  border:1px solid rgba(255,176,32,.26); border-radius:var(--r-md); margin-bottom:16px;
}
.stack__de{ font-size:13px; color:var(--fraco); }
.stack__de s{ text-decoration-color:rgba(255,255,255,.35); }
.stack__por{ font-size:42px; font-weight:800; color:var(--ambar); line-height:1.05; letter-spacing:-.035em; }
.stack__por span{ font-size:20px; vertical-align:super; margin-right:2px; }
.stack__obs{ font-size:12.5px; color:var(--suave); margin-top:2px; }

/* --- trilha --- */
.trilha{ list-style:none; margin:0 0 20px; padding:0; counter-reset:etapa; }
.trilha li{ position:relative; padding:0 0 24px 46px; counter-increment:etapa; }
.trilha li::before{
  content:counter(etapa);
  position:absolute; left:0; top:0;
  width:32px; height:32px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
  background:rgba(62,240,74,.14); color:var(--verde); border:1px solid var(--borda-viva);
}
.trilha li::after{
  content:''; position:absolute; left:15.5px; top:36px; bottom:6px;
  width:1px; background:linear-gradient(180deg,var(--borda-viva),transparent);
}
.trilha li:last-child{ padding-bottom:4px; }
.trilha li:last-child::after{ display:none; }
.trilha__texto strong{ display:block; font-size:15px; font-weight:700; margin-bottom:2px; }
.trilha__texto span{ font-size:13px; color:var(--suave); }

/* --- prova no modal --- */
.prova{ display:flex; flex-direction:column; gap:11px; margin-bottom:18px; }
.prova__card{ padding:15px; background:var(--vidro); border:1px solid var(--borda); border-radius:var(--r-sm); }
.prova__topo{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.prova__avatar{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#04210f;
  background:linear-gradient(135deg,var(--verde),var(--verde-esc));
}
.prova__nome{ display:block; font-size:14px; font-weight:800; }
.prova__cidade{ font-size:11px; color:var(--fraco); }
.prova__estrelas{ margin-left:auto; color:var(--ambar); font-size:13px; }
.prova__texto{ margin:0; font-size:13.5px; line-height:1.55; color:var(--suave); }

/* --- roleta --- */
.passo--roleta{ text-align:center; }
.roleta{ position:relative; width:min(290px,76vw); aspect-ratio:1; margin:4px auto 22px; }
.roleta__disco{
  width:100%; height:100%; border-radius:50%;
  box-shadow:0 0 0 7px rgba(62,240,74,.1), 0 0 0 8px var(--borda-viva), 0 22px 50px rgba(0,0,0,.6);
  transition:transform 5s cubic-bezier(.13,.72,.16,1);
  will-change:transform;
}
.roleta__disco svg{ display:block; width:100%; height:100%; border-radius:50%; }
.roleta__ponteiro{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(180deg);
  z-index:3; color:var(--ambar); filter:drop-shadow(0 3px 9px rgba(0,0,0,.7));
}
.roleta__centro{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--noite-2); color:var(--verde); border:2px solid var(--borda-viva);
}
#btn-girar[disabled]{ opacity:.5; cursor:default; }
#btn-girar[disabled]::after{ display:none; }

/* --- prêmio --- */
.passo--premio{ text-align:center; position:relative; }
.premio__brilho{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:280px; height:280px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,176,32,.24), transparent 66%);
  animation:brilhar 2.6s ease-in-out infinite;
}
@keyframes brilhar{ 0%,100%{opacity:.5} 50%{opacity:1} }
.premio__selo{
  position:relative; width:80px; height:80px; margin:6px auto 16px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(62,240,74,.14); color:var(--verde); border:1px solid var(--borda-viva);
  animation:carimbar .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes carimbar{ from{transform:scale(.3); opacity:0} to{transform:scale(1); opacity:1} }
.premio__nome{ margin:0 0 18px; font-size:20px; font-weight:800; color:var(--verde); line-height:1.25; }
.premio__precos{ display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:5px; }
.premio__antes{ font-size:20px; color:var(--fraco); text-decoration:line-through; }
.premio__seta{ color:var(--fraco); }
.premio__agora{
  font-size:44px; font-weight:800; color:var(--ambar); line-height:1; letter-spacing:-.04em;
  animation:carimbar .5s .12s cubic-bezier(.2,1.5,.4,1) both;
}
.premio__economia{ margin:0 0 22px; font-size:13px; font-weight:700; color:var(--suave); }

/* --- formulário --- */
.campo{ display:block; margin-bottom:13px; }
.campo > span{ display:block; margin-bottom:6px; font-size:11.5px; font-weight:700; color:var(--suave); }
.campo > span em{ font-style:normal; color:var(--fraco); font-weight:400; }
.campo input,.campo textarea{
  width:100%; padding:14px 15px;
  background:rgba(0,0,0,.35); color:#fff;
  border:1px solid var(--borda); border-radius:12px;
  font-family:inherit;
  /* 16px é OBRIGATÓRIO: abaixo disso o Safari do iOS dá zoom
     automático ao focar o campo e a tela "pula". Não é bug do
     teclado — é regra do sistema. Nunca reduzir daqui. */
  font-size:16px;
  transition:border-color .18s, background .18s;
}
.campo input:focus,.campo textarea:focus{
  outline:0; border-color:var(--verde); background:rgba(0,0,0,.5);
}
.campo input[readonly]{ opacity:.68; }
.campo input[aria-invalid="true"]{ border-color:var(--vermelho); }
/* readonly, mas o iOS ainda daria zoom ao tocar: mantém 16px */
.campo textarea{ resize:none; font-size:16px; line-height:1.35; word-break:break-all; }
.linha{ display:flex; gap:10px; }
.linha .campo{ flex:1; min-width:0; }
.campo--cep{ max-width:152px; position:relative; }
.campo--num{ max-width:112px; }
.campo--achado{
  align-self:flex-end; margin-bottom:13px; padding:14px 13px;
  font-size:12.5px; font-weight:700; color:var(--verde);
  background:rgba(62,240,74,.08); border:1px solid var(--borda-viva); border-radius:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.campo__spinner{
  position:absolute; right:13px; bottom:15px;
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25); border-top-color:var(--verde);
  animation:girar .7s linear infinite;
}
.divisor{ border:0; border-top:1px solid var(--borda); margin:18px 0 15px; }
.erro{ margin:0 0 11px; font-size:13px; color:#ff8a8a; text-align:center; }
.sugestao{ display:block; margin-top:7px; font-size:12.5px; color:var(--ambar); }
.sugestao[hidden]{ display:none; }
.sugestao__link{
  background:none; border:0; padding:0 2px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:800;
  color:var(--verde); text-decoration:underline;
}

.spinner{
  width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:girar .7s linear infinite;
}
.spinner--inline{ width:14px; height:14px; }
.spinner[hidden]{ display:none; }
@keyframes girar{ to{ transform:rotate(360deg) } }

/* --- opções (frete / pagamento) --- */
.forma,.opcao{
  display:flex; align-items:center; gap:13px;
  padding:16px; margin-bottom:10px;
  border-radius:14px; cursor:pointer;
  background:var(--vidro); border:1.5px solid var(--borda);
  transition:border-color .2s, background .2s;
}
.forma,.opcao--ativa{ background:rgba(62,240,74,.07); border-color:var(--verde); }
.forma input,.opcao input{ position:absolute; opacity:0; pointer-events:none; }
.forma__icone,.opcao__icone{ color:var(--verde); display:flex; flex-shrink:0; }
.opcao:not(.opcao--ativa) .opcao__icone{ color:var(--fraco); }
.forma__texto,.opcao__texto{ display:flex; flex-direction:column; min-width:0; }
.forma__texto strong,.opcao__texto strong{ font-size:15px; font-weight:800; }
.forma__texto em,.opcao__texto em{ font-style:normal; font-size:12px; color:var(--suave); }
.forma__check,.opcao__check{
  margin-left:auto; flex-shrink:0; width:23px; height:23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
  background:var(--verde); color:#04210f;
}
.opcao:not(.opcao--ativa) .opcao__check{
  background:none; border:1.5px solid var(--borda); color:transparent;
}
.opcao__preco{ margin-left:auto; font-size:13px; font-weight:800; color:var(--verde); }
.opcao__preco + .opcao__check{ margin-left:11px; }
.frete__destino{
  margin:2px 0 16px; padding:12px;
  font-size:12.5px; color:var(--suave); line-height:1.5;
  background:rgba(255,255,255,.03); border:1px solid var(--borda); border-radius:12px;
}
.frete__destino strong{ color:var(--texto); }

.resumo{ background:rgba(0,0,0,.28); border:1px solid var(--borda); border-radius:14px; padding:15px; margin-bottom:17px; }
.resumo__linha{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  font-size:12.5px; color:var(--suave); padding:7px 0;
}
.resumo__linha strong{ color:var(--suave); font-weight:600; text-align:right; }
.resumo__linha--total{ border-bottom:1px solid var(--borda); padding-bottom:11px; margin-bottom:4px; }
.resumo__linha--total strong{ color:var(--ambar); font-size:18px; font-weight:800; }

/* --- pix --- */
.pix__qr{ display:flex; justify-content:center; margin-bottom:15px; }
.pix__qr img{ width:214px; height:214px; background:#fff; padding:10px; border-radius:16px; }
.pix__valor{ text-align:center; font-size:15px; color:var(--suave); margin-bottom:15px; }
.pix__valor strong{ color:var(--ambar); font-size:20px; font-weight:800; }
.pix__codigo-caixa{ margin-top:13px; }
.pix__codigo-caixa summary{ cursor:pointer; font-size:12px; color:var(--suave); text-align:center; list-style:none; padding:7px; }
.pix__codigo-caixa summary::-webkit-details-marker{ display:none; }
.pix__codigo-caixa summary::before{ content:'▸ ' }
.pix__codigo-caixa[open] summary::before{ content:'▾ ' }
/* Fora de .campo, então precisa da própria regra de 16px — senão o
   iOS dá zoom quando o lead toca no código pra copiar na mão. */
.pix__codigo-caixa textarea{
  width:100%; margin-top:7px; padding:12px;
  background:rgba(0,0,0,.4); color:var(--suave);
  border:1px solid var(--borda); border-radius:12px;
  font-family:inherit; font-size:16px; line-height:1.35;
  resize:none; word-break:break-all;
}
.pix__status{
  margin-top:15px; padding:12px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:rgba(62,240,74,.07); border:1px solid var(--borda-viva); border-radius:12px;
  font-size:13px; color:var(--suave);
}
.pix__expira{ margin:10px 0 0; text-align:center; font-size:12px; color:var(--fraco); }
.pix__expira strong{ color:var(--ambar); }
.pix__aviso{ margin:9px 0 0; text-align:center; font-size:11.5px; color:var(--fraco); line-height:1.5; }

.retencao{
  margin-top:17px; padding:19px; text-align:center;
  background:rgba(255,71,71,.07); border:1px solid rgba(255,71,71,.3); border-radius:var(--r-md);
  animation:tremer .42s cubic-bezier(.36,.07,.19,.97) both;
}
.retencao[hidden]{ display:none; }
@keyframes tremer{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.retencao__icone{
  width:46px; height:46px; margin:0 auto 11px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,71,71,.14); color:#ff8a8a; border:1px solid rgba(255,71,71,.3);
}
.retencao__titulo{ display:block; font-size:16.5px; font-weight:800; margin-bottom:6px; }
.retencao__texto{ margin:0 0 15px; font-size:13px; line-height:1.55; color:var(--suave); }
.retencao__sair{
  display:block; width:100%; margin-top:10px; padding:7px;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:12px; color:var(--fraco); text-decoration:underline;
}

.passo--ok{ text-align:center; }
.ok__icone{
  width:82px; height:82px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(62,240,74,.14); color:var(--verde); border:1px solid var(--borda-viva);
  animation:carimbar .5s cubic-bezier(.2,1.5,.4,1) both;
}
.ok__entrega{
  margin:0 0 18px; padding:13px;
  font-size:12.5px; color:var(--suave); line-height:1.5;
  background:rgba(62,240,74,.07); border:1px solid var(--borda-viva); border-radius:12px;
}

/* --- barra do Pix pendente --- */
.pix-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  display:flex; align-items:center; gap:13px;
  padding:12px 15px calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,14,24,.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--borda-viva);
  box-shadow:0 -12px 34px rgba(0,0,0,.6);
  animation:subirBarra .38s cubic-bezier(.2,1,.3,1) both;
}
.pix-barra[hidden]{ display:none; }
@keyframes subirBarra{ from{transform:translateY(100%)} to{transform:none} }
.pix-barra__info{ display:flex; align-items:center; gap:11px; min-width:0; flex:1; }
.pix-barra__info strong{ display:block; font-size:13.5px; font-weight:800; }
.pix-barra__info span{ font-size:11.5px; color:var(--suave); }
.pix-barra__info b{ color:var(--ambar); }
.pix-barra__pulso{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--verde); box-shadow:0 0 11px var(--verde);
  animation:pulso 1.4s ease-in-out infinite;
}
.pix-barra__cta{
  flex-shrink:0; padding:12px 19px; border:0; border-radius:11px;
  background:linear-gradient(135deg,var(--verde),var(--verde-esc));
  color:#04210f; font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
}
body.tem-pix-pendente .pos-gate{ padding-bottom:80px; }

/* =============================================================
   DESKTOP
   ============================================================= */
@media (min-width:900px){
  .palco{ padding:44px 28px 90px; }
  :root{ --video:420px; }

  .palco__inner{
    display:grid;
    grid-template-columns:minmax(0,var(--video)) minmax(0,1fr);
    grid-template-areas:"faixa faixa" "head head" "sub sub" "vsl oferta";
    column-gap:52px; align-items:center;
  }
  .faixa{ grid-area:faixa; }
  .headline{ grid-area:head; max-width:22ch; }
  .subheadline{ grid-area:sub; }
  .vsl{ grid-area:vsl; }
  .coluna-oferta{ grid-area:oferta; }
  .oferta{ margin-top:0; }
  .oferta__box{ max-width:none; }

  body.coluna-unica .palco__inner{
    grid-template-columns:minmax(0,var(--video));
    grid-template-areas:"faixa" "head" "sub" "vsl" "oferta";
    justify-content:center;
  }

  .beneficios{ grid-template-columns:repeat(3,1fr); }
  .versus{ grid-template-columns:1fr auto 1fr; gap:20px; }
  .versus__selo{ margin:0; }
  .passos{ grid-template-columns:repeat(3,1fr); }
  .depoimentos{ grid-template-columns:repeat(2,1fr); }
  .garantia__itens{ grid-template-columns:1fr 1fr; }
  .secao__titulo{ text-align:center; }
  .secao__sub{ text-align:center; margin-left:auto; margin-right:auto; }
  .secao{ text-align:center; }
  .secao .beneficios,.secao .versus,.secao .passos,
  .secao .depoimentos,.secao .faq{ text-align:left; }

  .modal{ align-items:center; padding:26px; }
  .modal__card{ max-width:500px; border-radius:var(--r-lg); max-height:88dvh; }
  .modal__alca{ display:none; }
}

@media (max-width:767px){
  .palco{ padding:22px 15px 60px; }
  .geo-bar__payment{ padding-left:0; border-left:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html.js-revela .revelar{ opacity:1 !important; transform:none !important; }
}