/* ============================================================
   LP FATURANDO COM LIMPEZA DE PLACAS SOLARES
   Folha compartilhada por index.html e vsl.html.

   DIREÇÃO
   O criativo do anúncio é um cartaz: letra pesada em caixa alta,
   verde-limão gritando sobre fundo escuro, laranja no preço.
   A página continua esse cartaz em vez de virar outra coisa —
   quem clica no anúncio precisa sentir que chegou no lugar certo.

   ASSINATURA
   A passada do rodo. É o gesto que o produto ensina, e é a única
   animação com peso na página: a placa suja limpa sozinha no
   carregamento, e segue o cursor quando o mouse passa por cima.
   Tudo o mais é quieto de propósito.

   REGRAS DA PALETA
   1. Laranja SÓ em botão de compra. Vira decoração, o botão morre.
   2. Texto sobre verde ou laranja é SEMPRE escuro. Branco sobre
      verde-limão dá 2,1:1 — ilegível, mesmo aparecendo no criativo.
   ============================================================ */

:root{
  /* fundos */
  --void:#07110D;          /* página */
  --panel:#0E1C16;         /* seções alternadas */
  --card:#14261D;          /* cards elevados */
  --pit:#050C09;           /* rodapé */

  /* verde da marca */
  --lime:#5FCB1E;
  --lime-hi:#88E552;
  --lime-deep:#2F7A12;
  --lime-glass:rgba(95,203,30,.12);
  --lime-line:rgba(95,203,30,.30);

  /* laranja — só CTA */
  --orange:#F5811F;
  --orange-deep:#E8620E;
  --orange-hi:#FFA652;
  --orange-glass:rgba(245,129,31,.14);
  --ink-cta:#1A0C00;       /* texto DENTRO do botão */

  /* neutros */
  --white:#FFFFFF;
  --paper:#EAF3EC;
  --paper-dim:#A9BDB0;
  --line:rgba(255,255,255,.09);
  --line-hi:rgba(255,255,255,.16);

  /* escala tipográfica */
  --display:"Archivo Black","Archivo",system-ui,sans-serif;
  --sans:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;

  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1rem,.96rem + .18vw,1.06rem);
  --step-1:clamp(1.12rem,1.05rem + .3vw,1.28rem);
  --step-2:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  --step-3:clamp(1.75rem,1.4rem + 1.6vw,2.6rem);
  --step-4:clamp(2.4rem,1.8rem + 2.8vw,4rem);

  /* ritmo */
  --gutter:clamp(1.15rem,5vw,3rem);
  --sec-y:clamp(2.9rem,4.8vw,4.25rem);
  --maxw:1160px;
  --measure:62ch;

  --r:14px;
  --r-lg:22px;
  --r-pill:999px;

  --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.22);
  --shadow-m:0 4px 14px rgba(0,0,0,.34), 0 22px 50px rgba(0,0,0,.36);
  --shadow-cta:0 6px 22px rgba(245,129,31,.36);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Sem isto, qualquer classe com display: vence o atributo hidden do HTML
   e o elemento continua na tela. Foi o que aconteceu com a capa do som. */
[hidden]{display:none !important}
html{
  overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;background:var(--void);
}
body{
  overflow-x:clip;background:var(--void);color:var(--paper-dim);
  font:400 var(--step-0)/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
svg{display:block}
ul{list-style:none}
a{color:var(--lime);text-underline-offset:.2em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

h1,h2{font-family:var(--display);color:var(--white);font-weight:400;line-height:1.02;letter-spacing:.005em}
h3,h4{font-family:var(--sans);color:var(--white);font-weight:700;line-height:1.25;letter-spacing:-.01em}
h1{font-size:var(--step-4);text-transform:uppercase;letter-spacing:-.005em;line-height:.94}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
strong,b{font-weight:700;color:var(--paper)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.wrap--txt{max-width:820px}
section{padding-block:var(--sec-y);position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Fundos alternados. Duas seções seguidas com o MESMO fundo colam o
   miolo e economizam um respiro que não estava fazendo falta. */
.escuro{background:var(--void)}
.gelo{background:var(--panel)}
.gelo + .gelo,.escuro + .escuro{padding-top:0}

/* ============================================================
   DADO QUE FALTA — marcador proposital
   ============================================================ */
.pendente{
  border-bottom:2px dashed var(--orange);
  background:var(--orange-glass);color:var(--orange-hi);
  padding-inline:.2em;border-radius:3px;
}

/* ============================================================
   TIPOGRAFIA DE APOIO
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--sans);font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);background:var(--lime-glass);
  border:1px solid var(--lime-line);
  padding:.42rem .9rem;border-radius:var(--r-pill);
}
/* O ícone precisa de tamanho explícito: sem isto o SVG assume o
   tamanho padrão de substituição e esmaga o texto dentro da pílula. */
.eyebrow svg{width:14px;height:14px;flex:none}

.lead{font-size:var(--step-1);color:var(--paper-dim);line-height:1.55;max-width:var(--measure)}

/* Cabeçalho de seção: centralizado, com um traço verde embaixo do
   título que se desenha da esquerda para a direita quando a seção
   entra na tela — a passada do rodo virou este detalhe. */
.sec-topo{
  display:grid;gap:.85rem;justify-items:center;text-align:center;
  max-width:760px;margin:0 auto clamp(1.9rem,3.5vw,2.9rem);
}
.sec-topo p{margin:0;max-width:56ch}
.sec-topo h2{position:relative;padding-bottom:.7rem}
.sec-topo h2::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:72px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--lime),var(--lime-hi));
  transform-origin:left center;scale:0 1;
  transition:scale .7s var(--ease-out) .15s;
}
.js-anim .sec-topo.is-in h2::after,
html:not(.js-anim) .sec-topo h2::after{scale:1 1}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:54px;padding:.95rem 1.8rem;
  font-family:var(--sans);font-weight:800;font-size:1rem;letter-spacing:-.005em;
  border-radius:var(--r-pill);text-decoration:none;text-align:center;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn--cta{
  background:linear-gradient(135deg,var(--orange) 0%,var(--orange-deep) 100%);
  background-color:var(--orange-deep);
  color:var(--ink-cta);box-shadow:var(--shadow-cta);
}
.btn--cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(245,129,31,.5);filter:saturate(1.08)}
.btn--lg{min-height:66px;padding:1.2rem 2.4rem;font-size:clamp(1.02rem,.98rem + .35vw,1.2rem)}
.btn--bloco{display:flex;width:100%}
.btn-nota{display:block;margin-top:.8rem;font-size:var(--step--1);color:var(--paper-dim);line-height:1.5}

/* Respiro do botão: três batidas e para. Botão que pisca sem parar
   vira ruído e o olho aprende a ignorar. */
@keyframes respiro{
  0%,100%{box-shadow:var(--shadow-cta)}
  50%{box-shadow:var(--shadow-cta), 0 0 0 12px rgba(245,129,31,0)}
  8%{box-shadow:var(--shadow-cta), 0 0 0 0 rgba(245,129,31,.45)}
}
.btn--pulso{animation:respiro 3s var(--ease) 1.4s 3}

/* ============================================================
   HEADER
   ============================================================ */
.topo{
  position:sticky;top:0;z-index:60;
  background:rgba(7,17,13,.82);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .25s, background .25s;
}
.topo.is-scroll{border-bottom-color:var(--line);background:rgba(7,17,13,.94)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.marca{
  display:flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--sans);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--white);
}
.marca svg{width:28px;height:28px;flex:none}
.marca span{color:var(--lime)}
.topo .btn{min-height:44px;padding:.6rem 1.25rem;font-size:.9rem}
@media(max-width:560px){
  .marca{font-size:.9rem;gap:.45rem}
  .marca svg{width:24px;height:24px}
  .topo .btn{padding:.55rem .95rem;font-size:.82rem;min-height:42px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-block:clamp(2.2rem,4.5vw,4rem) clamp(2.6rem,5vw,4.5rem);
  background:
    radial-gradient(900px 520px at 92% 0%, rgba(95,203,30,.15), transparent 60%),
    radial-gradient(700px 480px at -5% 30%, rgba(245,129,31,.09), transparent 60%),
    var(--void);
  overflow:hidden;
}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.2rem);grid-template-columns:1fr;align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.02fr .98fr}}

.hero .eyebrow{margin-bottom:1.1rem}
.hero h1{margin-bottom:.85rem}
.hero h1 .grifo{color:var(--lime);display:block}
.hero-sub{
  font-family:var(--sans);font-weight:600;color:var(--paper);
  font-size:var(--step-2);line-height:1.2;letter-spacing:-.015em;margin-bottom:1rem;
}
.hero .lead{margin-bottom:1.7rem;max-width:46ch}
.hero-acao{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:700px){
  .hero-acao{align-items:stretch}
  .hero-acao .btn{width:100%}
  .hero-acao .btn-nota{text-align:center}
}

/* faixa de confiança: uma linha, sem quebrar */
.confia{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:var(--step--1);font-weight:600;color:var(--paper-dim);
}
.confia li{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.confia svg{width:15px;height:15px;flex:none;color:var(--lime)}

/* ---------- foto do hero ---------- */
.foto-hero{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-hi);box-shadow:var(--shadow-m);
  background:var(--card);
}
.foto-hero img{width:100%;height:auto;display:block}
/* escurecida no pé da foto: o céu claro brigava com o selo logo abaixo */
.foto-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(0deg,rgba(5,12,9,.5),transparent);pointer-events:none;
}

/* selo do bônus, ancorado fora da moldura */
.selo-bonus{
  display:flex;align-items:center;gap:.7rem;
  margin-top:.9rem;padding:.75rem .95rem;
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--lime);border-radius:var(--r);
}
.selo-bonus svg{width:22px;height:22px;flex:none;color:var(--lime)}
.selo-bonus b{display:block;color:var(--white);font-size:.94rem;line-height:1.25}
.selo-bonus span{font-size:var(--step--1);color:var(--paper-dim);line-height:1.35}

/* ============================================================
   FAIXA DE PILARES
   ============================================================ */
.numeros{background:var(--panel);border-block:1px solid var(--line);padding-block:clamp(1.8rem,3vw,2.6rem)}
.numeros-grid{display:grid;gap:1.4rem 1.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.numeros-grid{grid-template-columns:repeat(4,1fr)}}
.numeros li{
  display:grid;gap:.3rem;padding-left:.9rem;border-left:2px solid var(--lime-line);
}
.numeros b{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);color:var(--lime);line-height:1;letter-spacing:.01em;
}
.numeros span{font-size:var(--step--1);line-height:1.45;color:var(--paper-dim)}

/* ============================================================
   CARDS
   ============================================================ */
.cards{display:grid;gap:1rem}
.cards--2{grid-template-columns:1fr}
@media(min-width:820px){.cards--2{grid-template-columns:1fr 1fr}}
/* Quatro colunas viravam quatro colunas magras de texto. Duas
   colunas com ícone ao lado leem como lista, não como cartazete. */
.cards--4{grid-template-columns:1fr}
@media(min-width:760px){.cards--4{grid-template-columns:1fr 1fr}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.2vw,1.7rem);
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.1rem;align-content:start;
  transition:transform .25s var(--ease-out), border-color .25s, background .25s;
}
.card:hover{transform:translateY(-4px);border-color:var(--lime-line);background:#172C21}
.card h3{grid-column:2;margin-bottom:.35rem}
.card p{grid-column:2;color:var(--paper-dim);font-size:var(--step--1);line-height:1.6}
.card-ico{
  grid-row:1 / span 2;grid-column:1;
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--lime-glass);color:var(--lime);border:1px solid var(--lime-line);
}
.card-ico svg{width:22px;height:22px}

/* PRA QUEM É */
.perfis{display:grid;gap:1.1rem;grid-template-columns:1fr;align-items:start}
@media(min-width:920px){.perfis{grid-template-columns:1.2fr 1fr}}
.perfil{
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.6vw,2.1rem);
  border:1px solid var(--line);background:var(--card);
}
.perfil--forte{
  border:1px solid var(--lime-line);
  background:linear-gradient(180deg,rgba(95,203,30,.09),var(--card) 46%);
  background-color:var(--card);position:relative;
}
.perfil--forte::before{
  content:"Perfil principal";position:absolute;top:-11px;left:clamp(1.4rem,2.6vw,2.1rem);
  background:var(--lime);color:var(--void);
  font-family:var(--sans);font-weight:800;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:var(--r-pill);
}
.perfil h3{font-size:var(--step-2);margin-bottom:.6rem;font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
.perfil > p{color:var(--paper-dim);margin-bottom:1.1rem;max-width:52ch}

/* ============================================================
   LISTAS DE CHECK
   ============================================================ */
.check{display:grid;gap:.75rem}
.check li{display:grid;grid-template-columns:22px 1fr;gap:.7rem;align-items:start;line-height:1.55;color:var(--paper-dim)}
.check svg{width:20px;height:20px;margin-top:.2rem;color:var(--lime);flex:none}
.check--2col{grid-template-columns:1fr}
@media(min-width:820px){.check--2col{grid-template-columns:1fr 1fr;gap:.85rem 2rem}}

.aprender li{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.95rem 1.1rem;grid-template-columns:22px 1fr;
  transition:border-color .2s, transform .2s var(--ease-out);
}
.aprender li:hover{border-color:var(--lime-line);transform:translateX(3px)}
.aprender li strong{display:block;color:var(--white);font-size:.98rem}
.aprender li span{color:var(--paper-dim);font-size:var(--step--1);display:block;margin-top:.15rem;line-height:1.5}

/* ============================================================
   DUAS COLUNAS (solução / autor)
   ============================================================ */
.duas{display:grid;gap:clamp(1.8rem,3.5vw,3rem);align-items:center;grid-template-columns:1fr}
@media(min-width:920px){.duas{grid-template-columns:1fr 1fr}}
.duas-arte{position:relative}
.duas-arte img,.duas-arte .moldura{
  width:100%;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-m);
}
.duas .lead{margin:.9rem 0 1.3rem}

/* ============================================================
   BÔNUS
   ============================================================ */
.bonus-box{
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,#11291D 0%,#0A1811 100%);
  background-color:#0F2418;
  border:1px solid var(--lime-line);
  display:grid;grid-template-columns:1fr;
}
@media(min-width:900px){.bonus-box{grid-template-columns:1.08fr .92fr}}
.bonus-txt{padding:clamp(1.6rem,3vw,2.6rem)}
.bonus-txt h3{font-size:var(--step-2);margin-bottom:.8rem;font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
.bonus-txt p{color:var(--paper-dim);max-width:48ch}
.bonus-fita{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--lime);color:var(--void);
  font-family:var(--sans);font-weight:800;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:var(--r-pill);margin-bottom:1rem;
}
.bonus-fita svg{width:14px;height:14px;flex:none}
.bonus-arte{position:relative;min-height:220px;display:grid;place-items:center;overflow:hidden}
.bonus-arte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9)}
.bonus-arte .play{position:relative;z-index:2}
.play{
  width:74px;height:74px;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;box-shadow:0 0 0 12px rgba(95,203,30,.12);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.bonus-box:hover .play{transform:scale(1.06);box-shadow:0 0 0 18px rgba(95,203,30,.1)}
.play svg{width:28px;height:28px;color:var(--void);margin-left:3px}

/* ============================================================
   CONTATOS NA REGIÃO
   ============================================================ */
.destaque-extra{
  display:grid;gap:1rem;grid-template-columns:1fr;align-items:start;
  margin-top:1rem;padding:clamp(1.3rem,2.4vw,1.8rem);
  background:var(--card);border:1px solid var(--lime-line);border-radius:var(--r-lg);
}
@media(min-width:720px){.destaque-extra{grid-template-columns:auto 1fr;gap:1.3rem}}
.destaque-extra .card-ico{
  grid-row:auto;grid-column:auto;margin:0;
  width:52px;height:52px;background:var(--lime);color:var(--void);border-color:transparent;
}
.destaque-extra .card-ico svg{width:26px;height:26px}
.destaque-extra h3{margin-bottom:.4rem}
.destaque-extra p{color:var(--paper-dim);max-width:70ch;font-size:var(--step--1);line-height:1.6}

/* ============================================================
   PASSOS — aqui a numeração é informação: é uma sequência real
   ============================================================ */
.passos{counter-reset:p;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:620px){.passos{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.passos{grid-template-columns:repeat(3,1fr)}}   /* em 768 três colunas ficavam estreitas demais */
.passo{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.5rem 1.3rem 1.4rem;
}
.passo::before{
  counter-increment:p;content:counter(p,decimal-leading-zero);
  display:block;margin-bottom:.7rem;
  font-family:var(--display);font-size:1.6rem;color:var(--lime);line-height:1;letter-spacing:.02em;
}
.passo h3{margin-bottom:.35rem;font-size:var(--step-1)}
.passo p{color:var(--paper-dim);font-size:var(--step--1);line-height:1.6}

/* ============================================================
   DEPOIMENTOS (nasce oculto)
   ============================================================ */
.cards--3{grid-template-columns:1fr}
@media(min-width:820px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.depo{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.depo p{color:var(--paper);font-size:var(--step--1);line-height:1.65}
.depo footer{display:flex;align-items:center;gap:.7rem;margin-top:1rem;font-size:.85rem;color:var(--paper-dim)}
.depo footer .av{width:40px;height:40px;border-radius:50%;background:var(--lime-glass);flex:none}
.estrelas{display:flex;gap:.12rem;color:var(--orange-hi);margin-bottom:.7rem}
.estrelas svg{width:16px;height:16px}

/* ============================================================
   OFERTA
   ============================================================ */
.oferta{background:var(--void);position:relative;overflow:hidden}
.oferta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 360px at 50% 8%, rgba(245,129,31,.13), transparent 66%);
}
.preco-box{
  max-width:600px;margin-inline:auto;background:var(--card);
  border-radius:var(--r-lg);border:1px solid var(--line-hi);
  box-shadow:0 28px 70px rgba(0,0,0,.55);overflow:hidden;position:relative;
}
.preco-topo{background:var(--lime-deep);color:var(--paper);padding:1.2rem 1.4rem;text-align:center}
.preco-topo h3{font-size:var(--step-1);font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
.preco-topo p{font-size:var(--step--1);color:#DCF2CC;margin-top:.25rem}
.preco-corpo{padding:clamp(1.5rem,3vw,2.2rem);text-align:center}
.inclui{text-align:left;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.preco-rotulo{
  display:block;font-family:var(--sans);font-weight:700;color:var(--paper-dim);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.preco-por{
  display:block;margin:.35rem 0 .2rem;
  font-family:var(--display);font-weight:400;color:var(--white);
  font-size:clamp(3.2rem,2.4rem + 3.6vw,4.6rem);line-height:1;letter-spacing:0;
}
.preco-por small{font-size:.36em;vertical-align:.7em;letter-spacing:.02em}
.preco-parcela{color:var(--paper-dim);font-size:var(--step--1);margin-bottom:1.5rem;display:block}
.pagamentos{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1.2rem}
.pagamentos li{
  font-size:.72rem;font-weight:600;color:var(--paper-dim);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:7px;padding:.32rem .65rem;
}

/* garantia */
.garantia{
  display:grid;gap:1.2rem;align-items:center;grid-template-columns:1fr;
  max-width:720px;margin:clamp(1.8rem,3vw,2.6rem) auto 0;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.9rem);
}
@media(min-width:640px){.garantia{grid-template-columns:auto 1fr;text-align:left}}
.selo-garantia{
  width:92px;height:92px;margin-inline:auto;border-radius:50%;
  background:var(--lime);color:var(--void);
  display:grid;place-items:center;align-content:center;
  font-family:var(--display);line-height:1;text-align:center;
  box-shadow:0 0 0 8px rgba(95,203,30,.12);
}
.selo-garantia b{display:block;font-size:2.1rem;color:var(--void)}
.selo-garantia span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);font-weight:800}
.garantia h3{margin-bottom:.4rem;font-size:var(--step-1)}
.garantia p{color:var(--paper-dim);font-size:var(--step--1);line-height:1.6}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:800px;margin-inline:auto;display:grid;gap:.6rem}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s;
}
.faq details:hover{border-color:var(--line-hi)}
.faq details[open]{border-color:var(--lime-line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.2rem;font-family:var(--sans);font-weight:700;color:var(--white);
  font-size:.98rem;line-height:1.35;min-height:54px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:11px;height:11px;flex:none;
  border-right:2.5px solid var(--lime);border-bottom:2.5px solid var(--lime);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .resposta{padding:0 1.2rem 1.2rem;color:var(--paper-dim);font-size:var(--step--1);line-height:1.65}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{
  background:
    radial-gradient(760px 400px at 50% 118%, rgba(245,129,31,.2), transparent 62%),
    radial-gradient(640px 340px at 50% -12%, rgba(95,203,30,.12), transparent 60%),
    var(--panel);
  text-align:center;
}
.cta-final h2{max-width:18ch;margin-inline:auto}
.cta-final .lead{margin:1rem auto 0;text-align:center}
.cta-final .resumo{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.2rem;
  margin:1.5rem 0;font-size:var(--step--1);color:var(--paper-dim);
}
.cta-final .resumo li{display:flex;align-items:center;gap:.4rem}
.cta-final .resumo svg{width:17px;height:17px;color:var(--lime);flex:none}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  background:var(--pit);color:var(--paper-dim);border-top:1px solid var(--line);
  padding-block:2.4rem 6rem;font-size:var(--step--1);line-height:1.6;
}
.rodape-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:760px){.rodape-grid{grid-template-columns:1.5fr 1fr}}
.rodape .marca{margin-bottom:.8rem}
.rodape a{color:var(--paper)}
.rodape-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:.9rem}
.rodape-links a{min-height:30px;display:inline-flex;align-items:center}
.rodape a[href^="mailto"]{display:inline-block;padding-block:.3rem}
.aviso{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line);font-size:.74rem;opacity:.8;line-height:1.6}
@media(min-width:900px){.rodape{padding-bottom:2.4rem}}

/* ============================================================
   BARRA FIXA (mobile)
   ============================================================ */
.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(7,17,13,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-hi);box-shadow:0 -10px 30px rgba(0,0,0,.5);
  padding:.65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:.9rem;
  transform:translateY(115%);transition:transform .3s var(--ease-out);
}
.barra-fixa.is-on{transform:translateY(0)}
.barra-fixa .txt{flex:1;min-width:0;font-size:.76rem;line-height:1.3;color:var(--paper-dim)}
.barra-fixa .txt strong{display:block;font-family:var(--sans);font-weight:800;font-size:.9rem;color:var(--white)}
.barra-fixa .btn{min-height:46px;padding:.65rem 1.2rem;font-size:.88rem;white-space:nowrap}
@media(min-width:900px){.barra-fixa{display:none}}

/* ============================================================
   VSL
   ============================================================ */
.hero--vsl{text-align:center;padding-block:clamp(1.5rem,3vw,2.6rem)}
.hero--vsl .eyebrow{margin-bottom:1rem}
.hero--vsl h1{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.3rem);max-width:24ch;margin-inline:auto}
.hero--vsl .lead{margin:.9rem auto 1.4rem;text-align:center;max-width:44ch}

.player-box{
  position:relative;max-width:900px;margin-inline:auto;
  border-radius:var(--r-lg);overflow:hidden;background:#000;
  border:1px solid var(--line-hi);box-shadow:0 26px 66px rgba(0,0,0,.62);
}
.player-ratio{position:relative;width:100%;aspect-ratio:16/9}
.player-ratio > iframe,.player-ratio > div{position:absolute;inset:0;width:100%;height:100%;border:0}
.som-capa{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;width:100%;
  background:linear-gradient(180deg,rgba(5,12,9,.4),rgba(5,12,9,.8));
  color:var(--white);text-align:center;padding:1.2rem;cursor:pointer;
}
.som-capa .pill{
  display:inline-flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  background-color:var(--orange-deep);color:var(--ink-cta);
  font-family:var(--sans);font-weight:800;font-size:clamp(.92rem,.88rem + .35vw,1.1rem);
  padding:.95rem 1.7rem;border-radius:var(--r-pill);box-shadow:var(--shadow-cta);
}
.som-capa .pill svg{width:20px;height:20px}
.som-capa small{display:block;margin-top:.8rem;font-size:.85rem;opacity:.9}

.aviso-lock{
  display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;
  max-width:900px;margin:1rem auto 0;padding:.8rem 1.1rem;
  background:var(--lime-glass);border:1px solid var(--lime-line);border-radius:var(--r);
  color:var(--lime-hi);font-size:var(--step--1);font-weight:600;
}
.aviso-lock svg{width:18px;height:18px;flex:none}
.cta-video{max-width:900px;margin:1.4rem auto 0;animation:surge .5s var(--ease-out) both}
.cta-video .btn{width:min(100%,500px)}

/* ============================================================
   MOVIMENTO
   Uma entrada orquestrada no topo, revelações discretas no scroll.
   Nada pisca, nada gira. O movimento com peso é a passada do rodo.
   ============================================================ */
@keyframes surge{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#travado[data-liberado]{animation:surge .55s var(--ease-out) both}

/* entrada do hero, em cascata */
.js-anim .entra{opacity:0;transform:translateY(18px)}
.js-anim .is-carregado .entra{
  animation:surge .7s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 90ms);
}

/* revelação no scroll, com atraso por posição dentro do grupo */
.js-anim .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease-out), transform .65s var(--ease-out)}
.js-anim .reveal.is-in{opacity:1;transform:none}
.js-anim .reveal.is-in:nth-child(2){transition-delay:70ms}
.js-anim .reveal.is-in:nth-child(3){transition-delay:140ms}
.js-anim .reveal.is-in:nth-child(4){transition-delay:210ms}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .js-anim .reveal,.js-anim .entra{opacity:1;transform:none}
}