/* ==========================================================================
   aula-liberada — página de VSL 9:16 (HTML + CSS puro)
   Tokens extraídos da referência guilhermecirilo.com
   ========================================================================== */

:root{
  --red:        #ef4444;   /* barra de topo */
  --yellow:     #ffff00;   /* preço "por: R$0,00" */
  --orange:     #ff6b00;   /* destaques da headline */
  --bg:         #000000;   /* fundo da página */
  --white:      #ffffff;
  --gray-text:  #969696;   /* parágrafo de apoio */
  --gray-foot:  #91999d;   /* rodapé */
  --rule:       #a3bac6;   /* linha acima do rodapé */
  --col:        400px;     /* largura da coluna = largura do vídeo */
}

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

html,body{
  width:100%;
  background:var(--bg);
  font-family:"Open Sans",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{ overflow-x:hidden; }

.col{
  width:100%;
  max-width:var(--col);
  margin:0 auto;
  padding:0 12px;
}

/* ============================================================ 1. BARRA DE TOPO */
.topbar{
  background:var(--red);
  padding:13px 12px;
}
.topbar-inner{
  max-width:980px;
  margin:0 auto;
}
.tb-line{
  color:var(--white);
  font-size:13px;
  font-weight:700;
  line-height:18px;
  text-align:center;
}
.tb-line s{ text-decoration:line-through; }
.tb-free{ color:var(--yellow); }
#countdown{ font-variant-numeric:tabular-nums; }

/* ============================================================ 2. BLOCO PRINCIPAL */
.stage{
  background:var(--bg);
  padding:22px 0 0;
}

.headline{
  font-family:"Poppins","Open Sans",Arial,sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1.28;
  color:var(--white);
  text-align:center;
}
.headline b{ color:var(--orange); font-weight:700; }
.headline u{ text-decoration:underline; text-underline-offset:2px; }

.subheadline{
  margin-top:22px;
  font-family:"Poppins","Open Sans",Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  color:var(--white);
  text-align:center;
}

.support{
  margin-top:18px;
  font-family:"Poppins","Open Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  color:var(--gray-text);
  text-align:center;
}

/* ---------- VSL 9:16 ----------
   O player VTurb já reserva a proporção 9:16 pelo próprio placeholder
   (padding-top de 177.77%), então aqui só entra o espaçamento e a largura. */
.video-frame{
  width:100%;
  margin:34px 0 0;
}
.video-frame vturb-smartplayer{
  display:block;
  width:100%;
  margin:0 auto;
}
.video-frame iframe,
.video-frame video{
  display:block;
  width:100%;
  border:0;
}

/* ---------- CTA ---------- */
.cta-wrap{ margin-top:22px; text-align:center; }
.cta-wrap[hidden]{ display:none; }
.cta{
  display:block;
  padding:18px 20px;
  border-radius:8px;
  background:var(--orange);
  color:var(--white);
  font-family:"Poppins","Open Sans",Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  box-shadow:0 8px 30px rgba(255,107,0,.3);
  animation:pulse 2s ease-in-out infinite;
}
.cta:hover{ filter:brightness(1.07); }
@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.05); }
}
@media (prefers-reduced-motion:reduce){
  .cta{ animation:none; }
}

/* ============================================================ 3. RODAPÉ */
.footer{
  background:var(--bg);
  padding:100px 0 40px;
}
.footer-rule{
  width:100%;
  max-width:496px;
  margin:0 auto 26px;
  border:0;
  border-top:1px solid var(--rule);
}
.footer p{
  color:var(--gray-foot);
  font-size:18px;
  font-weight:400;
  line-height:25.2px;
  text-align:center;
}

/* ============================================================ MOBILE */
@media (max-width:520px){
  .col{ max-width:360px; }
  .headline{ font-size:19px; }
  .subheadline{ font-size:16px; margin-top:20px; }
  .support{ font-size:12.5px; }
  .footer p{ font-size:16px; line-height:23px; }
  .footer-rule{ width:68%; }
  .footer{ padding:78px 0 34px; }
  .cta{ font-size:16px; padding:16px 18px; }
}