/* =========================================================================
   PÁGINA DA VSL (v2) — usada na raiz do domínio, é a que recebe o anúncio.
   Só o que é próprio desta página. Tokens, botões, campos e a moldura do
   vídeo vêm do styles.css.

   A ideia é uma tela só: manchete, vídeo e formulário. Nada de menu, de
   link para fora nem de âncora lateral, porque cada saída aqui é um lead
   que não acontece.
   ========================================================================= */

.vsl2{ background:var(--ink); color:var(--text-on-dark); min-height:100vh; }
.vsl2 .wrap{ max-width:960px; }

.vsl2__topo{ padding-block:var(--sp-5); text-align:center; border-bottom:1px solid var(--line-dark); }
.vsl2__topo img{ height:54px; width:auto; }
.vsl2__local{ margin-top:var(--sp-2); font-size:var(--fs-small); color:var(--text-on-dark-soft); }

.vsl2__hero{ padding-block:var(--sp-7) var(--sp-6); text-align:center; }
.vsl2__pill{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-pill); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(217,184,119,.35); border-radius:var(--r-pill);
  padding:7px 15px;
}
.vsl2__h1{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-hero);
  line-height:1.08; letter-spacing:-.015em; color:var(--white);
  margin:var(--sp-5) auto 0; max-width:18ch;
}
.vsl2__h1 em{ font-style:normal; color:var(--gold); }
.vsl2__sub{
  font-size:var(--fs-lead); color:var(--text-on-dark-soft); line-height:1.6;
  margin:var(--sp-4) auto 0; max-width:54ch;
}

.vsl2__video{ max-width:900px; margin-inline:auto; }
.vsl2__aviso{
  margin-top:var(--sp-4); text-align:center; font-size:var(--fs-small);
  color:var(--text-on-dark-soft);
}

/* ---------- A PORTA: o formulário só abre perto do fim do vídeo ----------
   Sem JS a porta já nasce aberta. Se o player não subir, o app.js abre por
   conta própria. Lead sem formulário na tela é o pior desfecho possível. */
.porta{ margin-top:var(--sp-7); }
.porta__travada{ display:none; }
.js .porta__travada{ display:block; }
.js .porta__aberta{ display:none; }
.js .porta.liberado .porta__travada{ display:none; }
.js .porta.liberado .porta__aberta{ display:block; animation:portaAbre .5s ease both; }
@keyframes portaAbre{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.porta__travada{
  text-align:center; border:1px dashed rgba(255,255,255,.18); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5); color:var(--text-on-dark-soft);
}
.porta__travada b{ display:block; color:var(--white); font-family:var(--font-display);
  font-size:1.15rem; font-weight:600; margin-bottom:var(--sp-2); }

.vsl2__formtopo{ text-align:center; margin-bottom:var(--sp-5); }
.vsl2__formtopo h2{
  font-family:var(--font-display); font-weight:600; color:var(--white);
  font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.01em;
}
.vsl2__formtopo p{ color:var(--text-on-dark-soft); margin-top:var(--sp-3); font-size:var(--fs-lead); }
.porta .form{ max-width:620px; margin-inline:auto; }

/* ---------- credenciais e rodapé enxutos ---------- */
.vsl2__creds{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5) var(--sp-4);
  padding-block:var(--sp-7); margin-top:var(--sp-7); border-top:1px solid var(--line-dark);
}
@media (min-width:760px){ .vsl2__creds{ grid-template-columns:repeat(4,1fr); } }
.vsl2__creds div{ text-align:center; }
.vsl2__creds b{
  display:block; font-family:var(--font-display); font-weight:500; color:var(--gold);
  font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem); line-height:1.1;
}
.vsl2__creds span{ display:block; margin-top:var(--sp-2); font-size:var(--fs-small); color:var(--text-on-dark-soft); }

.vsl2__rodape{
  border-top:1px solid var(--line-dark); padding-block:var(--sp-6);
  text-align:center; font-size:var(--fs-small); color:var(--text-on-dark-soft); line-height:1.8;
}