/* ==========================================================================
   PÁGINA DE VENDAS — Operação Estrutura no Ar
   Cores, fontes e componentes vêm de /marca/tokens.css. Aqui só o layout.
   Mobile-first: o desktop entra nas media queries no fim do arquivo.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 1px; }
h2 { font-size: var(--t-secao); line-height: 1.1; margin: 0 0 24px; }
h3 { font-size: var(--t-bloco); line-height: 1.2; margin: 0 0 12px; }
p  { margin: 0 0 16px; }
strong { font-weight: 700; }

/* ---------- Utilitários de marca ---------- */
.centro     { text-align: center; }
.carmim     { color: var(--carimbo); }
.oliva      { color: var(--oliva-escuro); }
.verde      { color: var(--oliva-claro); }
.forte      { font-weight: 700; }
.estencil   { font-family: var(--font-display); font-size: var(--t-bloco); }

/* Special Elite: a voz do autor */
.voz {
  font-family: var(--font-maquina);
  font-size: var(--t-voz);
  line-height: 1.7;
  color: var(--tinta-suave);
}
.voz-inline { font-family: var(--font-maquina); color: var(--carimbo); }

/* ---------- Esqueleto ---------- */
.secao {
  padding: var(--gap-secao) 20px;
  border-bottom: var(--borda-leve);
}
.secao--escura {
  background: var(--tinta);
  color: var(--papel);
  border-bottom: none;
}
.secao--escura .voz       { color: var(--papel-linha); }
.secao--escura .ficha     { color: var(--grafite-claro); }

/* O :not(.botao) é obrigatório. Sem ele, este seletor vence o .botao--claro por
   especificidade e pinta o texto dos CTAs de verde sobre o fundo bege do botão:
   2:1 de contraste, botão de compra praticamente invisível. */
.secao--escura a:not(.botao) { color: var(--oliva-claro); }

/* O vermelho de carimbo não tem contraste suficiente sobre a tinta preta. */
.secao--escura .carmim    { color: var(--carimbo-claro); }

.conteudo        { max-width: var(--largura-texto); margin: 0 auto; }
.conteudo--largo { max-width: var(--largura-larga); }

.ficha { display: block; margin-bottom: 16px; }

/* Todo CTA no meio da página é uma coluna centralizada */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
}
.cta .botao { width: 100%; max-width: 460px; }

/* ==========================================================================
   PLAYER / SLOTS DE MÍDIA
   Placeholders com proporção fixa: nenhum salto de layout quando o vídeo entrar.
   ========================================================================== */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--papel-sombra);
  border: var(--borda-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.player--16-10   { aspect-ratio: 16 / 10; border: 1px solid var(--tinta-linha); }
.player--32-10   { aspect-ratio: 32 / 10; border: 1px solid var(--tinta-linha); }
.player--retrato { aspect-ratio: 220 / 260; }

.player > iframe, .player > video, .player > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: 0;
}
.player__aviso {
  font-family: var(--font-ficha);
  font-size: var(--t-meta);
  letter-spacing: 1px;
  color: var(--grafite-papel);
  text-align: center;
  padding: 12px;
  line-height: 1.5;
}
.secao--escura .player       { background: #23211b; }
.secao--escura .player__aviso { color: var(--grafite-claro); }

/* ==========================================================================
   S1 — HERO
   Sem animação de entrada, sem opacity:0, sem AOS. Pinta de primeira.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 20px 56px;
  border-bottom: var(--borda-leve);
  isolation: isolate;
}

/* O quadriculado do hero. A máscara radial faz ele nascer no miolo e dissolver
   antes de chegar nas bordas — o CTA e os selos ficam num fundo limpo.
   CSS puro: nenhuma imagem, nenhum request, zero peso. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  rgba(28, 26, 21, .11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 26, 21, .11) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.hero__num {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--font-ficha);
  font-size: var(--t-meta);
  letter-spacing: 2px;
  color: var(--grafite-papel);
}
.hero__carimbo { position: absolute; top: 16px; right: 18px; }

.hero__titulo {
  font-size: var(--t-hero);
  line-height: 1.05;
  max-width: 860px;
  margin: 28px 0 0;
  text-transform: uppercase;
}
.hero__sub {
  max-width: 640px;
  margin: 22px 0 0;
  font-family: var(--font-maquina);
  font-size: var(--t-voz);
  line-height: 1.5;
  color: var(--tinta-suave);
}
.hero .botao  { margin-top: 36px; width: 100%; max-width: 460px; }
.hero__aviso {
  font-family: var(--font-maquina);
  font-size: 0.8125rem;
  color: var(--carimbo);
  margin: 14px 0 0;
}

/* Variantes de headline do teste A/B: só uma é renderizada, sem flash. */
.hl { display: none; }
.hl--1 { display: block; }                      /* fallback sem JS */
[data-ab="2"] .hl--1 { display: none; }
[data-ab="2"] .hl--2 { display: block; }
[data-ab="3"] .hl--1 { display: none; }
[data-ab="3"] .hl--3 { display: block; }

.vsl { position: relative; width: 100%; max-width: 760px; margin-top: 36px; }
.vsl__ao-vivo {
  position: absolute; top: -11px; left: 14px; z-index: 2;
  background: var(--carimbo);
  color: var(--papel);
  font-family: var(--font-ficha);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 2px;
  padding: 4px 10px;
}

/* ==========================================================================
   S2 — A DOR
   ========================================================================== */
.tentativas { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.tentativas li {
  display: flex;
  gap: 12px;
  border: var(--borda-leve);
  padding: 14px 18px;
  line-height: 1.5;
}
.seta { color: var(--carimbo); font-family: var(--font-ficha); }

.veredito {
  font-family: var(--font-display);
  font-size: var(--t-bloco);
  color: var(--carimbo);
  text-transform: uppercase;
  margin: 0 0 18px;
}

/* ==========================================================================
   S3 — A PROVA (fundo escuro)
   ========================================================================== */
.takes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 36px;
}
.takes figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.takes figcaption {
  font-family: var(--font-ficha);
  font-size: var(--t-ficha);
  color: var(--grafite-claro);
}
.prova-texto { max-width: 640px; margin: 36px auto 0; }
.prova-texto .estencil { margin: 28px 0 10px; }

/* ==========================================================================
   S3.5 — QUEM TÁ FALANDO
   ========================================================================== */
.autor { display: flex; flex-direction: column; gap: 28px; }
.autor__foto { margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 220px; }
.autor__foto figcaption {
  font-family: var(--font-ficha);
  font-size: var(--t-meta);
  letter-spacing: 2px;
  color: var(--grafite-papel);
}
.autor__texto h2 { margin-bottom: 18px; }

/* ==========================================================================
   S4 — A OFERTA
   ========================================================================== */
.entregas {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-align: left;
}
.entregas li { border: var(--borda); padding: 22px; }
.entregas__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.875rem;
  color: var(--carimbo);
}
.entregas h3 { font-family: var(--font-corpo); font-weight: 700; font-size: 1.0625rem; margin: 6px 0; letter-spacing: 0; }
.entregas p  { font-size: 0.875rem; line-height: 1.5; color: var(--tinta-suave); margin: 0; }

.preco {
  position: relative;
  width: 100%;
  border: var(--borda-forte);
  margin-top: 36px;
  padding: 36px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-margin-top: 24px;   /* a âncora #checkout não cola no topo */
}
.preco__etiqueta {
  position: absolute; top: -9px;
  background: var(--papel);
  padding: 0 14px;
  font-family: var(--font-ficha);
  font-size: var(--t-ficha);
  letter-spacing: 3px;
  color: var(--grafite-papel);
}
.preco p { text-align: center; }
.preco__linha { margin: 12px 0 4px; color: var(--grafite-papel); }
.preco__valor {
  font-family: var(--font-display);
  font-size: var(--t-preco);
  color: var(--oliva-escuro);
  line-height: 1;
  margin: 0;
}
.preco__nota { font-size: 0.875rem; color: var(--tinta-suave); margin: 10px 0 22px; }
.preco .botao { width: 100%; max-width: 460px; }

/* ==========================================================================
   S5 — GARANTIA + FUNDADOR
   ========================================================================== */
.salvaguardas { display: grid; grid-template-columns: 1fr; gap: 24px; }
.salvaguarda {
  position: relative;
  padding: 28px;
  border: 2px solid var(--oliva-escuro);
}
.salvaguarda--carimbo { border-color: var(--carimbo); }
.salvaguarda__etiqueta {
  position: absolute; top: -9px; left: 18px;
  background: var(--papel);
  padding: 0 10px;
  font-family: var(--font-ficha);
  font-size: var(--t-ficha);
  letter-spacing: 2px;
  color: var(--oliva-escuro);
}
.salvaguarda--carimbo .salvaguarda__etiqueta { color: var(--carimbo); }
.salvaguarda p { font-size: 0.9375rem; line-height: 1.7; margin: 0; }

/* ==========================================================================
   S6 — FAQ (acordeão nativo: zero JS, zero CLS)
   ========================================================================== */
.faq { display: grid; gap: 10px; }
.faq__item { border: var(--borda-leve); background: var(--papel); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--font-maquina);
  font-size: 1rem;
  color: var(--tinta);
  list-style: none;
  transition: background 0.15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-family: var(--font-ficha);
  font-size: 1.25rem;
  color: var(--carimbo);
  flex-shrink: 0;
}
.faq__item[open] summary::after { content: '−'; }
.faq__item summary:hover { background: var(--papel-sombra); }
.faq__item p {
  padding: 0 20px 18px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* ==========================================================================
   S7 — FECHAMENTO
   ========================================================================== */
.caminhos { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; margin-bottom: 28px; text-align: left; }
.caminho { border: 1px solid var(--tinta-linha); padding: 24px; }
.caminho--verde { border-color: var(--oliva-claro); }
.caminho__num {
  display: block;
  font-family: var(--font-ficha);
  font-size: var(--t-ficha);
  letter-spacing: 2px;
  color: var(--grafite-claro);
  margin-bottom: 10px;
}
.caminho--verde .caminho__num { color: var(--oliva-claro); }
.caminho p { color: var(--papel-linha); font-size: 0.9375rem; line-height: 1.7; margin: 0; }
.caminho strong { color: var(--papel); }

.ps {
  border-top: 1px dashed var(--tinta-linha);
  margin: 44px auto 0;
  padding-top: 24px;
  max-width: 600px;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--grafite-claro);
}
.ps strong { color: var(--papel-linha); }

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width: 720px) {
  .secao { padding-left: 24px; padding-right: 24px; }

  .takes { grid-template-columns: repeat(3, 1fr); }
  .takes__largo { grid-column: span 2; }

  .autor { flex-direction: row; gap: 36px; align-items: flex-start; }
  .autor__foto { flex-shrink: 0; }

  .entregas     { grid-template-columns: 1fr 1fr; }
  .salvaguardas { grid-template-columns: 1fr 1fr; }
  .caminhos     { grid-template-columns: 1fr 1fr; }

  .preco { padding: 32px; }
  .hero  { padding-top: 72px; }
  .hero__num     { left: 22px; }
  .hero__carimbo { right: 22px; }
}

/* ==========================================================================
   ANIMAÇÃO DE SCROLL
   Substitui a biblioteca AOS mantendo a convenção do kit (data-aos no HTML).
   O opacity:0 só existe se o JS estiver vivo (classe .js, posta no <head>):
   sem JS, o conteúdo aparece normal em vez de ficar invisível pra sempre.
   O hero não tem data-aos — pinta de primeira, por regra.
   ========================================================================== */
.js [data-aos] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-aos].visivel { opacity: 1; transform: none; }

/* Respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-aos] { opacity: 1 !important; transform: none !important; }
}