/* =============================================================================
   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%; }

/* O atributo hidden tem que vencer sempre. Sem isso, qualquer classe com
   display (ex: .field é flex) reexibe o elemento, e o "Quantas pessoas?"
   aparecia antes da pessoa escolher escritório. */
[hidden] { display: none !important; }
::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;
}

/* =============================================================================
   ESTADO DA PÁGINA: FORMULÁRIO x CONTEÚDO
   Um único interruptor, a classe .liberado no <html>. Ela é posta pelo
   script inline do <head> (visita repetida) ou pelo formulario.js (envio
   ok). Controlar por CSS, e não por JS escondendo elemento, evita o
   "pisca" do formulário pra quem já respondeu.
   ========================================================================== */
.conteudo {
  display: none;
  flex-direction: column;
  gap: inherit;                 /* herda o respiro entre blocos do .page */
}

.liberado .conteudo { display: flex; }
.liberado .gate     { display: none; }

/* O título recebe foco depois do envio (a11y), mas não precisa de anel:
   ele não é clicável, o foco é só pra leitor de tela anunciar a troca. */
.head__title:focus { outline: none; }

/* =============================================================================
   FORMULÁRIO (portão de acesso), layout de UMA TELA
   Pedido do cliente: o form inteiro, com o botão, visível sem rolar.
   Réguas usadas nos testes:
   - celular: 375x667 (iPhone SE) e 390x664 (iPhone com as barras do Safari);
   - desktop: 1366x768 (notebook comum, ~650px úteis).
   Por isso tudo aqui é mais compacto que o resto da página: fontes menores,
   respiros curtos e campos lado a lado. O limite de baixo é o dedo: nenhum
   campo fica com menos de 44px de altura.
   ========================================================================== */

/* Enquanto o form está na tela, a página inteira fica mais justa */
html:not(.liberado) .page {
  padding: .6rem 1rem 1.5rem;
  gap: 1.5rem;
}

.gate { display: flex; flex-direction: column; gap: .7rem; }

.gate__head { text-align: center; }

.gate__title {
  font-size: clamp(1.3rem, 5.6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;           /* sem palavra órfã na última linha */
}

.gate__sub {
  margin-top: .35rem;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--dim);
  text-wrap: pretty;
  max-width: 34rem;
  margin-inline: auto;
}

/* Reforço "é rápido": menor e na cor quente da marca, com ícone de relógio
   em linha (sem emoji). Texto corrido, não flex: se quebrar, o ícone anda
   junto da primeira palavra em vez de ficar ilhado na lateral. */
.gate__meta {
  margin-top: .3rem;
  font-size: .76rem;
  color: var(--buff);
  text-wrap: balance;
}

.gate__meta svg {
  display: inline-block;
  vertical-align: -3px;
  margin-right: .3rem;
  color: var(--mikado);
}

/* Um cartão só, no mesmo painel dos passos, pra parecer parte da entrega
   e não um obstáculo colado na frente dela. */
.form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: .8rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* Linha com dois campos lado a lado (hoje: perfil + Nº de pessoas). */
.form__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

/* Perfil ocupa a linha toda; quando aparece o "Nº de pessoas", divide.
   A coluna da quantidade é fixa e estreita (número de 1 a 4 dígitos). */
.form__linha--perfil         { grid-template-columns: 1fr; }
.form__linha--perfil.tem-qtd { grid-template-columns: 1fr 6.25rem; }

/* ── Campo ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

.field__label {
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--white);
  /* Uma linha só: rótulo quebrando é altura jogada fora. Se um dia não
     couber, corta com reticências em vez de empurrar o botão pra baixo. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field__hint { font-weight: 400; color: var(--muted); }

.field__input {
  width: 100%;
  min-height: 2.75rem;          /* 44px: mínimo confortável pro dedo */
  font: inherit;
  font-size: 1rem;              /* 16px: abaixo disso o iOS dá zoom no foco */
  line-height: 1.25;
  color: var(--white);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .65rem;
  padding: .6rem .8rem;
  transition: border-color .18s ease, background .18s ease;
}

.field__input::placeholder { color: var(--muted); }

.field__input:hover { border-color: rgba(255,255,255,.24); }

.field__input:focus-visible {
  outline: none;
  border-color: var(--mikado);
  background: rgba(253,197,17,.05);
  box-shadow: 0 0 0 3px rgba(253,197,17,.18);
}

/* Objetivo: nasce com uma linha e cresce pelo JS conforme a digitação */
.field__input--area { resize: none; overflow-y: auto; display: block; }

/* Tira as setinhas do input numérico: no celular não servem pra nada e
   no desktop ocupam espaço dentro de um campo que já é estreito. */
.field__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field__input[type="number"]::-webkit-inner-spin-button,
.field__input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Menu suspenso (perfil e faturamento) ────────────────────────────────
   appearance:none tira a seta nativa (cada sistema desenha uma diferente)
   e a seta entra como SVG no fundo, em mikado, igual ao resto da marca. */
.field__select {
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;        /* espaço pra seta não ficar embaixo do texto */
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDC511' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1.05rem;
}

/* Enquanto nada foi escolhido, o "Selecione" fica apagado como placeholder */
.field__select:invalid { color: var(--muted); }

/* A lista aberta é desenhada pelo sistema; no Windows ela herda fundo
   branco com texto branco se não definir aqui, e fica ilegível. */
.field__select option { background: var(--bg); color: var(--white); }

/* ── Erro inline ────────────────────────────────────────────────────────── */
.field__erro {
  font-size: .74rem;
  line-height: 1.3;
  color: #FF9DB0;               /* rose clareado: passa contraste no fundo escuro */
}

.field__erro:empty { display: none; }

.field--erro > .field__input { border-color: #FF7A93; }

/* ── Honeypot: fora da tela, não display:none (alguns robôs pulam campo
   com display:none justamente por saberem desse truque). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Envio ──────────────────────────────────────────────────────────────── */
.form__erro {
  font-size: .85rem;
  line-height: 1.4;
  color: #FFD0D9;
  background: rgba(241,84,114,.12);
  border: 1px solid rgba(241,84,114,.4);
  border-radius: .65rem;
  padding: .65rem .8rem;
}

.form__btn {
  align-self: stretch;
  margin-top: .2rem;
  padding: .8rem 1.5rem;
  font-size: 1.02rem;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.form__btn:focus-visible { outline: 2px solid var(--mikado); outline-offset: 3px; }

.form__btn:disabled { cursor: progress; filter: saturate(.6) brightness(.9); transform: none; }

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

/* Celular de tela BAIXA (Android pequeno, ~640px úteis): só aqui o
   cabeçalho encolhe mais um pouco. Por altura e não por largura, pra não
   apertar à toa quem tem tela comprida. */
@media (max-width: 899px) and (max-height: 660px) {
  .gate__title { font-size: 1.22rem; }
  .gate__sub   { font-size: .82rem; line-height: 1.38; }
  .gate__meta  { font-size: .72rem; margin-top: .2rem; }
}

/* =============================================================================
   DESKTOP: duas colunas, texto à esquerda e cartão à direita, tudo
   centralizado na altura da tela. Com isso cabe folgado até em 1366x768.
   ========================================================================== */
@media (min-width: 900px) {
  html:not(.liberado) .page {
    max-width: 70rem;
    min-height: 100dvh;
    padding: 2rem 2.5rem 1.5rem;
    gap: 1.25rem;
  }

  /* O gate cresce e centraliza; o rodapé fica colado embaixo */
  .gate {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr minmax(0, 30rem);
    align-items: center;
    gap: 4rem;
  }

  .gate__head { text-align: left; }

  .gate__title { font-size: clamp(2.1rem, 3.3vw, 3rem); line-height: 1.08; }

  .gate__sub {
    margin: 1.1rem 0 0;
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: 30rem;
  }

  .gate__meta { margin-top: 1.1rem; font-size: .9rem; }

  .form { padding: 1.6rem 1.5rem; gap: .95rem; }

  .field__label { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .field__input { transition: none; }
}

/* App novo: vídeo local enquanto não está na vTurb + link do guia em PDF */
.manual{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:border-color .2s,background .2s}
.manual:hover{border-color:rgba(253,197,17,.5);background:rgba(253,197,17,.06)}
.manual__ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(253,197,17,.14);color:#FDC511}
.manual__t{display:flex;flex-direction:column;gap:2px;text-align:left}
.manual__t b{font-size:15px}.manual__t small{font-size:13px;color:rgba(255,255,255,.65)}

/* ── Estados da página (app novo): e-mail → formulário ou escolha → conteúdo ── */
.entrada, .escolha { display: none; flex-direction: column; gap: .9rem; width: 100%; max-width: 460px; margin: 0 auto; }
html.st-email:not(.liberado) .entrada { display: flex; }
html.st-escolha:not(.liberado) .escolha { display: flex; }
html:not(.st-form) .gate { display: none !important; }
.escolha__bts { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; text-align: center; }
.escolha__bts .cta__btn { justify-content: center; }
.escolha__sec { padding: 15px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.escolha__sec:hover { border-color: rgba(253,197,17,.55); }
.escolha__troca { background: none; border: 0; color: rgba(255,255,255,.6); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-top: .4rem; }

.form__lgpd a { color: #FDC511; }

/* =============================================================================
   MOBILE v2 (27/10): marca no topo, telas de entrada centralizadas na altura,
   leitura maior e botões em largura cheia no celular.
   ========================================================================== */
.marca {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 750; font-size: 1rem; letter-spacing: -.01em; color: var(--white);
}
.marca img { width: 32px; height: 32px; border-radius: 9px; }

/* Telas antes do conteúdo: a página ocupa a altura toda; marca em cima,
   bloco no meio, rodapé embaixo. Sem o vazio de meia tela de antes. */
html:not(.liberado) .page {
  min-height: 100dvh;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  gap: 1.5rem;
}
html:not(.liberado) .foot { margin-top: auto; }
html.st-email:not(.liberado) .entrada,
html.st-escolha:not(.liberado) .escolha { margin-block: auto; }
html.st-form:not(.liberado) .marca { margin-bottom: -.4rem; }

/* E-mail e escolha: tela curta, então dá pra respirar */
.entrada .gate__title, .escolha .gate__title { font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.12; }
.entrada .gate__sub,   .escolha .gate__sub   { margin-top: .6rem; font-size: 1rem; line-height: 1.5; max-width: 22rem; }
.entrada .form { padding: 1.25rem 1.1rem; gap: .8rem; }
.entrada .field__label { font-size: .88rem; }
.entrada .field__input { min-height: 3.25rem; font-size: 1.05rem; padding: .75rem 1rem; }
.entrada .form__btn, .escolha .cta__btn { min-height: 3.4rem; font-size: 1.06rem; }
.entrada .form__lgpd { font-size: .82rem; line-height: 1.45; }

/* Escolha: selo de ok + e-mail numa etiqueta própria (e-mail comprido não
   quebra a frase no meio) */
.selo-ok {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem;
  border-radius: 50%; color: #3DDC84; background: rgba(34,197,94,.12); border: 1px solid rgba(61,220,132,.35);
}
.escolha__email {
  margin: .9rem auto 0; padding: .45rem .9rem; max-width: 100%; width: fit-content;
  border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escolha__sec { min-height: 3.4rem; }
.escolha__troca { padding: .6rem; }

/* Formulário: título um pouco maior no celular (cabe sem rolar em 390x844) */
@media (max-width: 899px) {
  .gate__title { font-size: clamp(1.4rem, 6.2vw, 1.8rem); }
  .gate__sub { font-size: .92rem; }
  .form { padding: 1rem; }
}
@media (max-width: 899px) and (max-height: 700px) {
  html.st-form:not(.liberado) .marca { display: none; }
}

/* Conteúdo liberado no celular: botões de largura cheia, texto pode quebrar
   (nowrap cortava em tela de 320px), leitura um pouco maior */
@media (max-width: 767px) {
  .page { padding: max(1.25rem, env(safe-area-inset-top)) 1rem 2.5rem; gap: 1.75rem; }
  .head__title { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .head__sub { font-size: 1rem; line-height: 1.55; }
  .step { padding: 1.35rem 1.1rem; }
  .step__desc { font-size: 1rem; line-height: 1.55; }
  .cta { align-items: stretch; }
  .cta__btn { white-space: normal; text-align: center; min-height: 3.4rem; padding: .95rem 1.25rem; font-size: 1.05rem; }
  .player { margin-top: 1rem; margin-inline: -.35rem; }
  .manual { padding: 12px 14px; }
  .help__link { padding: .5rem 1rem; }
}
/* Celular de tela baixa: formulário volta a caber sem rolar */
@media (max-width: 899px) and (max-height: 700px) {
  html.st-form:not(.liberado) .page { padding-top: .6rem; gap: 1rem; }
  .gate__title { font-size: 1.25rem; }
  .gate__sub { font-size: .82rem; line-height: 1.38; }
  .form { padding: .8rem .85rem; }
}
@media (min-width: 900px) { .entrada .gate__head, .escolha .gate__head { text-align: center; } .entrada .gate__sub, .escolha .gate__sub { margin-inline: auto; } }