/* =============================================================================
   VSL DE UPSELL — Liven Forma / Forma Precifica
   -----------------------------------------------------------------------------
   Página única, mobile-first, sem footer/logo/menu (padrão de VSL da casa).
   Identidade herdada do MIV do Liven (sales page do app): fundo azul profundo,
   Mona Sans, gradiente rose → sienna → mikado e malha de prancha técnica.
   ========================================================================== */

/* ── Fonte da marca, self-hospedada (variável 100–900) ───────────────────── */
@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/mona-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── TOKENS ───────────────────────────────────────────────────────────────
   Mesmos nomes/valores usados nas outras propriedades do Liven, pra quem
   abrir os dois projetos reconhecer a paleta na hora. */
:root {
  --bg:        #0B1526;              /* base azul profundo */
  --bg-2:      #0d1930;
  --line:      rgba(255,255,255,.08);
  --panel:     rgba(14, 29, 48, .86);

  /* paleta oficial da marca */
  --mikado:  #FDC511;
  --sienna:  #EA7549;
  --rose:    #F15472;
  --seaweed: #0D7590;
  --buff:    #F4D7A4;
  --green:   #22c55e;

  --white: #ffffff;
  --dim:   rgba(255,255,255,.72);
  --muted: rgba(255,255,255,.45);

  --grad: linear-gradient(115deg, #F15472 0%, #EA7549 55%, #FDC511 100%);

  --radius: 1.15rem;
  --shadow: 0 30px 70px -20px rgba(0,0,0,.7);

  /* tipografia fluida: um único sistema serve mobile e desktop */
  --h1:   clamp(1.85rem, 5.4vw, 3.35rem);
  --sub:  clamp(1rem, 1.9vw, 1.24rem);
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: 'Mona Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
  min-height: 100dvh;
}

img, svg { display: block; max-width: 100%; }
::selection { background: rgba(241,84,114,.35); }

/* Texto com o gradiente da marca (usado no destaque da headline) */
.g {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =============================================================================
   BARRA DE ALERTA
   Fina, no topo, sempre visível (não entra no gate do CTA). Cor de urgência
   harmonizada com a marca: gradiente sienna → mikado, texto escuro pra passar
   contraste (fundo claro exige tinta escura, não branca).
   ========================================================================== */
.alert {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(100deg, var(--rose) 0%, var(--sienna) 58%, var(--mikado) 100%);
  color: #2A0D06;                       /* tinta escura própria pra fundo quente */
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
}

.alert__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  text-align: center;
  animation: pulso 2.6s ease-in-out infinite;
}

.alert__txt {
  font-size: clamp(.68rem, 2.5vw, .82rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.25;
}

/* Ícone de aviso em traço (SVG, não emoji — padrão da casa) */
.alert__ico {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* =============================================================================
   CENÁRIO DE FUNDO
   Malha de prancha técnica + arcos parciais: a assinatura visual do Liven.
   Puramente decorativo, fixo e atrás de tudo — não interfere no scroll.
   ========================================================================== */
.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

.scene::before,
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* grade de desenho + eixo central */
.scene::before {
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, transparent 49.92%, rgba(244,215,164,.05) 50%, transparent 50.08%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.7) 30rem, transparent 62rem);
          mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.7) 30rem, transparent 62rem);
}

/* arcos de compasso (linhas finíssimas, sem "bolha" brilhante) */
.scene::after {
  opacity: .7;
  background-image:
    radial-gradient(circle at 6% 14%, transparent 0 89px, rgba(244,215,164,.07) 90px 90.8px, transparent 92px),
    radial-gradient(circle at 95% 58%, transparent 0 139px, rgba(13,117,144,.09) 140px 140.8px, transparent 142px);
}

/* =============================================================================
   LAYOUT DA PÁGINA
   ========================================================================== */
.page {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: 2rem 1.25rem 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .page { padding: 3rem 2rem 4.5rem; gap: 2.25rem; }
}

/* ── HEAD + SUBHEAD ────────────────────────────────────────────────────── */
.head { text-align: center; }

.head__eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--green);
  padding: .3rem .8rem;
  border: 1px solid rgba(34,197,94,.28);
  border-radius: 999px;
  background: rgba(34,197,94,.08);
  margin-bottom: 1.05rem;
}

.head__title {
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.022em;
  /* text-wrap:balance evita palavra órfã sozinha na última linha do título */
  text-wrap: balance;
}

.head__sub {
  margin-top: 1rem;
  font-size: var(--sub);
  color: var(--dim);
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 38rem;
  margin-inline: auto;
}

.head__sub strong { color: var(--white); font-weight: 700; }

/* ── PLAYER ─────────────────────────────────────────────────────────────
   Moldura com proporção 9:16 reservada: o espaço já existe antes do script
   do vTurb carregar, então nada pula quando o vídeo entra. */
.player { width: 100%; }

.player__frame {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Camada de trava. Nasce transparente aos cliques pra deixar o primeiro
   toque (play/som) chegar no player; o JS adiciona .is-armed e a partir
   daí ela intercepta tudo — não dá pra pausar nem pular. */
.player__lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: transparent;
}

.player__lock.is-armed { pointer-events: auto; cursor: default; }

.player__hint {
  margin-top: .85rem;
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* =============================================================================
   CTA
   Escondido até o tempo de revelação. Enquanto escondido não ocupa altura
   (max-height:0) — a entrada não empurra o conteúdo acima.
   ========================================================================== */
.cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  text-align: center;
}

.cta.is-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.cta.is-revealed {
  animation: entrada .65s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes entrada {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Botão principal: gradiente da marca, texto SEMPRE em uma linha (nowrap).
   As quebras de tamanho abaixo garantem que ele não clipe em telas pequenas. */
.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border-radius: 999px;
  background: var(--grad);
  color: #1A0A04;
  font-size: clamp(.95rem, 3.6vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 18px 40px -18px rgba(241,84,114,.75);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cta__btn:hover,
.cta__btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 24px 52px -18px rgba(241,84,114,.9);
}

.cta__btn:active { transform: translateY(0); }

.cta__note {
  font-size: .82rem;
  color: var(--muted);
}

/* Telas bem estreitas: aperta o botão o suficiente pra caber em uma linha */
@media (max-width: 380px) {
  .cta__btn { padding: .95rem 1.35rem; font-size: .88rem; }
}

@media (max-width: 330px) {
  .cta__btn { padding: .9rem 1.1rem; font-size: .82rem; }
}

/* ── Acessibilidade: foco visível em tudo que é interativo ─────────────── */
a:focus-visible {
  outline: 2px solid var(--mikado);
  outline-offset: 3px;
}

/* ── Respeita quem pediu menos movimento ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .alert__inner { animation: none; }
  .cta.is-revealed { animation: none; }
  .cta__btn { transition: none; }
}