/* ==========================================================================
   O CSS **NOSSO** desta VSL — e SÓ o nosso.

   ⚠️ ZERO SELETOR GLOBAL AQUI DENTRO. Nem `body`, nem `img`, nem `a`, nem
   `html`. Esta é a regra que faz o arquivo existir.

   Este arquivo começou como uma cópia dos 23 KB do style.css da `iron-pulse`,
   onde o layout inteiro da oferta é NOSSO (potes redesenhados, headline,
   grade própria). Aqui não é: a oferta vem do `/about/` do produtor, com o
   bootstrap e o style dele, e a única coisa nossa na tela é a barra de data,
   o player e o timer.

   O que a cópia trouxe junto foram quatro regras globais:

       html { scroll-behavior: smooth; }
       body { ... }
       a { color: inherit; text-decoration: none; }
       img { display: block; max-width: 100%; height: auto; }

   As quatro vazam no bloco do produtor, e a última quebrou a página de um
   jeito visível: o selo "MONEY BACK GUARANTEE" abriu com **600px** de largura
   e ocupou meia tela, porque o `max-width: 100%` soltou a imagem do tamanho
   que o CSS dele dava. Os cards de preço perderam o alinhamento pelo mesmo
   motivo.

   E o `scroll-behavior: smooth` é pior que feio: ele BRIGA com o tween de
   `rolarSuave()` no main.js — cada `scrollTo` nosso, 60 por segundo, vira um
   pedido de rolagem animada que cancela o anterior.

   > Quando a página de oferta é DO PRODUTOR, o CSS nosso não pode ter
   > seletor de elemento. Ele só pode falar das classes que o nosso wrapper
   > cria, e o resto é dele.

   As classes abaixo são exatamente as que `index.wrapper.html` usa, e nada
   mais. Somar uma regra aqui: conferir antes que o seletor não alcança nada
   dentro de `#Oferta`.
   ========================================================================== */

/* ---------- barra de data ---------- */
.attention-bar {
  background: #c61111;
  color: #fff;
  text-align: center;
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

/* ---------- player ----------
   O FUNDO SAI DA PALETA DO PRODUTOR, nao de uma cor escolhida a olho.

   Era `#000`, herdado da iron-pulse — e la' faz sentido, porque a oferta
   inteira abaixo e' NOSSA e o preto e' a base dela. Aqui a pagina que abre
   logo abaixo e' o `/about/` dele, que e' roxo-escuro, e o preto cortava a
   tela em dois blocos que nao se reconhecem.

   Estes tres valores sao os mesmos do `.hero` dele
   (`inline-do-produtor.css`, `--navy #1e1033` e `--navy-mid #2b1750`), com o
   brilho roxo por cima na mesma familia do `--blue-bright`. Ao trocar de
   produtor, e' de la' que a cor tem que sair de novo. */
.video-section {
  padding: 15px 0 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.20) 0%, transparent 62%),
    linear-gradient(180deg, #1e1033 0%, #2b1750 100%);
}
.video-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- timer ----------
   Só aparece quando o gate abre: ele nasce dentro de .gated.

   O cinza `#414141` (tambem herdado da iron-pulse) veio JUNTO na troca acima,
   e nao por capricho: este bloco e' colado no player pela setinha, e fica
   ensanduichado entre o video roxo e o hero roxo do produtor. Cinza no meio
   dos dois leria como bloco de outra pagina. O amarelo virou o `--gold` dele
   (`#f5c518`) pelo mesmo motivo. */
.timer-section {
  background: linear-gradient(180deg, #2b1750 0%, #241243 100%);
  color: #fff;
  text-align: center;
  padding: 10px 20px 25px;
  position: relative;
  font-family: 'Poppins', sans-serif;
}
.timer-headline {
  color: #f5c518;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px;
}
.timer-countdown {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.timer-arrow {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #241243;
}

@media (max-width: 560px) {
  .timer-headline { font-size: 22px; }
  .timer-countdown { font-size: 38px; }
}

/* ---------- o gate ----------
   Vale pro conteúdo longo também, não só pro preço: senão daria pra ler o
   pitch escrito, ver o valor e achar o produto no site do produtor sem
   assistir o vídeo. */
.gated { display: none; }

/* A seção que envolve o bloco do produtor. Sem padding e sem cor de fundo de
   propósito — quem manda no visual ali dentro é o CSS dele. */
.oferta-section {
  background: #fff;
}

/* ==========================================================================
   A PONTE — DORMENTE desde 10/ago.

   O HTML dela saiu do index.wrapper.html (decisao dele: rodar a pagina do
   produtor como CONTROLE primeiro) e esta guardado em `ponte-desligada.html`,
   com o passo a passo pra religar.

   ESTE CSS FICA, e nao e' sobra: sem aquele HTML nenhum destes seletores
   alcanca elemento nenhum, entao ele nao muda um pixel da pagina. Manter e' o
   que faz religar custar UM passo (colar o bloco) em vez de dois.

   ---------------------------------------------------------------------------
   O bloco de copy nosso, entre o timer e os potes.

   Mesma regra do arquivo inteiro: prefixo proprio (`nv-`) e ZERO seletor de
   elemento, pra nao vazar no bloco do produtor logo abaixo.

   FONTE GRANDE DE PROPOSITO. O publico e' 55+ e le no celular: o corpo aqui
   e' 19px contra os 16 de um site comum, e a regua de marcos nao encolhe
   abaixo de 17. Copy que o leitor precisa apertar os olhos pra ler nao e' copy
   forte, e' copy que ele pula.
   ========================================================================== */
.nv-ponte {
  background: #1a0f2e;
  color: #fff;
  padding: 42px 18px 46px;
  font-family: 'Poppins', sans-serif;
}
.nv-ponte__in { max-width: 780px; margin: 0 auto; }

.nv-ponte__olho {
  margin: 0 0 10px;
  color: #b98bff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}
.nv-ponte__h {
  margin: 0 0 26px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  color: #fff;
}
.nv-ponte__hi { color: #c9a227; display: block; }

.nv-ponte__p {
  margin: 0 0 18px;
  font-size: 19px;
  line-height: 1.62;
  color: #e7e2f0;
}
.nv-ponte__p b { color: #fff; }

/* As dores. Sem bolinha e com barra na lateral: quatro linhas curtas que a
   pessoa varre em cinco segundos, e cada uma e' uma cena da vida dela, nao um
   sintoma de bula. */
.nv-ponte__dores {
  margin: 26px 0;
  padding: 0 0 0 20px;
  list-style: none;
  border-left: 3px solid #c9a227;
}
.nv-ponte__dores li {
  margin: 0 0 13px;
  font-size: 18px;
  line-height: 1.5;
  color: #d9d2e8;
}
.nv-ponte__dores li:last-child { margin-bottom: 0; }

/* A regua de tempo. Tres marcos lado a lado no desktop, empilhados no celular.
   E' a resposta pra "em quanto tempo", que e' a ultima pergunta antes do
   preco -- e ela vem do VIDEO, nao da pagina do produtor, que promete mais
   devagar. */
.nv-ponte__regua {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin: 30px 0;
}
.nv-ponte__marco {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
}
.nv-ponte__marco b {
  display: block;
  font-size: 24px;
  color: #c9a227;
  margin-bottom: 6px;
}
.nv-ponte__marco span {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: #cfc7de;
}

.nv-ponte__aviso {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: rgba(192, 0, 14, 0.14);
  border-left: 4px solid #c0000e;
  border-radius: 6px;
  font-size: 17px;
  line-height: 1.55;
  color: #f0e8ea;
}
.nv-ponte__fecho {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  text-align: center;
  color: #fff;
}

@media (max-width: 560px) {
  .nv-ponte { padding: 30px 16px 34px; }
  .nv-ponte__h { font-size: 27px; }
  .nv-ponte__p, .nv-ponte__fecho { font-size: 18px; }
  .nv-ponte__dores li { font-size: 17px; }
}