/* =============================================================================
   PÁGINA DE ACESSO — Liven Forma / Forma Precifica
   -----------------------------------------------------------------------------
   Entrega pós-compra. O link mora dentro do produto na Hotmart (no PDF de
   boas-vindas), então esta página não vende nada: ela orienta.

   Identidade herdada do MIV do Liven (sales page do app e VSLs): fundo azul
   profundo, Mona Sans, gradiente rose -> sienna -> mikado e malha de prancha
   técnica. Mesmos nomes de token dos outros projetos do cliente, pra quem
   abrir dois repos reconhecer a paleta na hora.

   Mobile-first: o layout base é o do celular, o desktop entra por media query.
   ========================================================================== */

/* ── 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 ──────────────────────────────────────────────────────────────── */
:root {
  --bg:    #0B1526;              /* base azul profundo */
  --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;

  /* verde do CTA, mesmo par das VSLs de upsell e downsell */
  --grad-verde:  linear-gradient(115deg, #3DDC84 0%, #22C55E 55%, #15A34A 100%);
  --verde-tinta: #052E16;        /* tinta escura do texto sobre o verde claro */

  --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.75rem, 5.2vw, 2.9rem);
  --sub: clamp(1rem, 1.9vw, 1.18rem);
}

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

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

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); }

/* Foco visível em tudo que é interativo (a11y). O anel usa a cor de marca
   pra não parecer o outline padrão do navegador colado por cima do design. */
a:focus-visible {
  outline: 2px solid var(--mikado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Texto com o gradiente quente da marca (destaque da headline) */
.g--quente {
  background: linear-gradient(100deg, var(--sienna) 0%, #F5A623 52%, var(--mikado) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =============================================================================
   CENÁRIO DE FUNDO
   Malha de prancha técnica + arcos de compasso: 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
   ========================================================================== */
.page {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: 2rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

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

/* =============================================================================
   CABEÇALHO
   ========================================================================== */
.head { text-align: center; }

/* Selo de confirmação. É a primeira coisa que a pessoa precisa ler:
   "deu certo". Só depois vem o que fazer. */
.head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .85rem;
  border: 1px solid rgba(61,220,132,.35);
  border-radius: 999px;
  background: rgba(34,197,94,.1);
  color: #6EE7A8;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* O ponto verde é decoração pura, então vai no CSS e não no HTML
   (leitor de tela não precisa anunciar um bullet). */
.head__eyebrow::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #3DDC84;
}

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

.head__sub {
  margin-top: .85rem;
  font-size: var(--sub);
  color: var(--dim);
  text-wrap: pretty;
}

/* =============================================================================
   PASSOS (cartões numerados)
   A numeração é o esqueleto da página: transforma "o que eu faço agora?"
   em uma lista de duas linhas.
   ========================================================================== */
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
  .step { padding: 2rem 1.85rem; }
}

.step__label {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Disco numerado com o gradiente da marca */
.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--grad);
  color: #1a0a10;
  font-size: .95rem;
  font-weight: 800;
}

.step__title {
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.step__desc {
  margin-top: .7rem;
  font-size: .95rem;
  color: var(--dim);
  text-wrap: pretty;
}

/* ── PLAYER ────────────────────────────────────────────────────────────────
   O placeholder inline do vTurb já segura a proporção 16:9, então aqui só
   cuidamos da moldura. Sem camada de trava: é aula, a pessoa precisa pausar
   e voltar à vontade. */
.player {
  margin-top: 1.25rem;
  border-radius: .8rem;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}

/* =============================================================================
   CTA
   ========================================================================== */
.cta {
  margin-top: 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

/* Botão principal: verde do funil, texto SEMPRE em uma linha (nowrap).
   As quebras de tamanho 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-verde);
  color: var(--verde-tinta);
  font-size: clamp(.95rem, 3.6vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 18px 40px -18px rgba(34,197,94,.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(34,197,94,.9);
}

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

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

/* =============================================================================
   AJUDA
   Sem cartão e sem gradiente: hierarquia visual clara, é o degrau abaixo
   dos dois passos.
   ========================================================================== */
.help {
  text-align: center;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}

.help__title {
  margin-top: 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.help__desc {
  margin-top: .4rem;
  font-size: .9rem;
  color: var(--muted);
  /* evita a última palavra sozinha numa linha só (viúva) */
  text-wrap: balance;
}

/* Link de texto, não botão. E texto diferente do CTA principal: as páginas
   são trackeadas, e botão repetido embaralha a leitura do clique. */
.help__link {
  display: inline-block;
  margin-top: .9rem;
  color: var(--buff);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .18s ease;
}

.help__link:hover { color: var(--mikado); }

/* =============================================================================
   RODAPÉ
   ========================================================================== */
.foot {
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
}

.foot a {
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease;
}

.foot a:hover { color: var(--white); }

/* =============================================================================
   MOVIMENTO REDUZIDO
   Respeita quem pediu menos animação no sistema.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta__btn { transition: none; }
  .cta__btn:hover,
  .cta__btn:focus-visible { transform: none; }
}

/* Destaque dentro do texto do passo (ex: "Entrar com Google"). Peso, não cor:
   a informação é importante mas não deve competir com o botão verde logo abaixo. */
.step__desc strong {
  color: var(--white);
  font-weight: 700;
}