/* =============================================================================
   Site de marketing — airolespace.app/
   Servido pelo mesmo nginx da SPA (ver deploy/images/frontend.nginx.conf), mas
   sem Angular, sem bundler e sem npm: HTML/CSS/JS à mão.

   REGRAS QUE A CSP DESTA ORIGEM IMPÕE (o snippet é único para o servidor, e o
   hash de script é o do index.html do Angular):
     - nada de <script> inline e nada de onclick= — todo JS vive em /site/js/;
     - nada de CDN de script: `cdn.tailwindcss.com` seria BLOQUEADO, e a página
       sairia sem estilo nenhum. Por isso o visual dos mockups está replicado
       aqui à mão, e não via utilitários;
     - <style> e style="" PODEM (style-src tem 'unsafe-inline');
     - imagem só de 'self' e da origem da API — nada de banco de imagens.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-title);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.025em;
}

/* Tipografia fluida: um único conjunto do celular ao desktop, sem media query
   por tamanho de fonte. `balance` distribui as linhas do título sem <br> no
   HTML — que é o que permite todo texto desta página ser aplicado com
   textContent, nunca innerHTML. */
h1 { font-size: clamp(2rem, 1.15rem + 3.6vw, 3.75rem); font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); font-weight: 800; text-wrap: balance; }
h3 { font-size: 1.125rem; font-weight: 700; }

p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.muted { color: var(--on-surface-variant); }
.faint { color: var(--outline); }

/* Eyebrow em PÍLULA (com fundo e borda), não texto solto: ele abre cada seção e
   é o que dá o ritmo visual do mockup. */
.eyebrow {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-round);
  background: var(--tint);
  font-family: var(--font-title);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.section { padding-block: clamp(var(--space-16), 8vw, 5rem); }
.section--alt { background: var(--surface-alt); border-top: 1px solid var(--outline-variant); }
.section--line { border-top: 1px solid var(--outline-variant); }

.section__head { max-width: 44rem; margin-bottom: var(--space-16); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { margin-top: var(--space-3); }
.section__head p { margin-top: var(--space-3); color: var(--on-surface-variant); font-size: 0.9375rem; }

/* Cabeçalho de seção com ação à direita (o "Explorar todas as cenas →"). */
.section__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
}
.section__bar .section__head { margin-bottom: 0; }

.link-forward {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-title);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.link-forward:hover { color: var(--primary-hover); }
.link-forward span:last-child { transition: transform 0.15s ease; }
.link-forward:hover span:last-child { transform: translateX(3px); }

/* --- Botões ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 700;
  /* Sem isto, "Criar conta" quebra em duas linhas dentro da barra estreita do
     celular e estoura a altura do cabeçalho. */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-raised);
}
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-2px); }

.btn--ghost {
  background: var(--surface-raised);
  border-color: var(--outline-variant);
  color: var(--on-surface);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--surface-card); border-color: var(--outline); color: var(--on-surface); transform: translateY(-2px); }

.btn--lg { padding: var(--space-4) var(--space-8); font-size: 1rem; border-radius: var(--radius-md); }
.btn--block { width: 100%; }

.btn:disabled,
.btn--off {
  background: var(--surface-raised);
  color: var(--outline);
  border-color: var(--outline-variant);
  box-shadow: none;
  cursor: not-allowed;
}
.btn--off:hover { transform: none; background: var(--surface-raised); color: var(--outline); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .card:hover, .person:hover { transform: none; }
}

/* Foco visível em tudo que é clicável: a landing é o primeiro contato, e
   navegação por teclado não pode ficar cega. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Topo ------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--veil-bar);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--outline-variant);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand:hover { text-decoration: none; }

/* A logo mora numa caixa com anel esmeralda, como no mockup: ela é PNG com
   fundo transparente, e sobre o gradiente escuro precisava de moldura. */
.brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-md);
  background: var(--tint);
  overflow: hidden;
}
.brand__logo img { width: 100%; height: 100%; object-fit: contain; }

.brand__name {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.tag-beta {
  padding: 2px var(--space-2);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-round);
  background: var(--tint);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
}

.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-3); }

/* Seletor de idioma como grupo segmentado dentro de uma caixa, e não três
   botões soltos: assim ele lê como UM controle. */
.langs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.langs button {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--on-surface-variant);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.langs button:hover { color: var(--on-surface); }
.langs button[aria-pressed='true'] { background: var(--primary); color: var(--on-primary); }

/* Seletor de tema: mesma caixa segmentada do idioma, com ícones no lugar de
   texto. Três estados (claro / escuro / sistema), como no menu da conta do app
   — e gravando na MESMA chave do localStorage, para a escolha atravessar da
   landing para dentro do produto. */
.themes {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.themes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.themes button:hover { color: var(--on-surface); }
.themes button[aria-pressed='true'] { background: var(--primary); color: var(--on-primary); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.875rem; }

/* Botão do menu. Só existe no celular, e é o que devolve idioma, tema e
   "Entrar" para a barra: antes eles sumiam abaixo de 720px e só reapareciam no
   rodapé, depois da página inteira. */
.topbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* `flex-shrink: 0` porque a barra é um flex apertado em 375px: sem isto o
     botão cede os 40px para o CTA e vira uma faixa de 22px encostada na borda,
     que ainda parece um botão e já não é um alvo de toque. */
  flex-shrink: 0;
  width: 40px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.topbar__toggle:hover { color: var(--on-surface); }
.topbar__toggle[aria-expanded='true'] {
  border-color: var(--tint-line);
  background: var(--tint);
  color: var(--primary);
}

/* O painel desce por baixo da barra, dentro do mesmo <header> fixo — assim ele
   acompanha a rolagem em vez de ficar preso no topo do documento. */
.topbar__menu {
  display: none;
  border-top: 1px solid var(--outline-variant);
  background: var(--veil-bar);
  backdrop-filter: blur(14px);
}
.topbar__menu-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
/* O "Entrar" ocupa a linha inteira embaixo dos dois seletores: com os três
   lado a lado, o alvo de toque de cada um fica menor que o dedo. */
.topbar__menu .btn--block { flex: 1 1 100%; }

@media (max-width: 720px) {
  /* Filhos DIRETOS da barra: os seletores de dentro do menu têm as mesmas
     classes e precisam continuar visíveis. */
  .topbar__inner > .langs,
  .topbar__inner > .themes { display: none; }
  .topbar__actions .btn--ghost { display: none; }

  .topbar__toggle { display: inline-flex; }
  /* `display` só devolve o painel ao fluxo; quem manda em aberto/fechado é o
     atributo `hidden`, e o `[hidden]` do fim do arquivo é !important. */
  .topbar__menu { display: block; }
}

/* --- Herói ----------------------------------------------------------------- */

.hero {
  position: relative;
  border-bottom: 1px solid var(--outline-variant);
  overflow: hidden;
  /* Duas camadas: o véu escuro por cima, a arte por baixo. O fundo é SLATE, não
     verde — o esmeralda entra só pelo glow do ::after e pelos acentos. Um
     gradiente verde ocupando metade da tela come o contraste do título e faz a
     página parecer de outra marca.
     A imagem é opcional: sem ela o véu sozinho já sustenta a seção, que é o
     estado em que a página fica até `site/img/hero.webp` existir (tarefa #53). */
  /* A cor de base é ESCURA nos dois temas, e não `--surface-page`: o véu por
     cima é semi-transparente, então no tema claro o quase-branco do canvas
     vazaria por baixo dele — hoje só um pouco, e por inteiro no dia em que a
     arte de fundo entrar com um véu mais leve. Texto branco sobre isso vira
     texto branco sobre branco. */
  background-color: #064e3b;
  background-image: var(--hero-veil), var(--hero-art, none);
  background-size: cover;
  background-position: center;
}

/* SCRIM DO TEXTO — a camada que torna a arte de fundo segura.
   O véu sozinho não basta: ele abre para deixar a imagem aparecer, e do lado
   mais transparente (0,58) o branco sobre uma capa CLARA cai para ~2,6:1. Como
   a capa é sorteada a cada visita, não dá para depender de a imagem ser escura.
   Este gradiente é forte onde o texto vive e some antes da metade, então a
   imagem continua limpa exatamente onde ela deve aparecer.
   Sem `z-index`: ele vem antes do `.hero__inner`, que é `position: relative`. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 44, 34, 0.6) 0%, rgba(2, 44, 34, 0.42) 30%, rgba(2, 44, 34, 0.12) 48%, transparent 62%);
  pointer-events: none;
}

/* No celular o texto ocupa a largura inteira, então um scrim horizontal não
   protege nada: ele vira vertical, forte no topo (título e parágrafo) e aberto
   embaixo, onde fica a caixa da cena — que tem fundo próprio e opaco. */
@media (max-width: 960px) {
  .hero::before {
    background: linear-gradient(to bottom, rgba(2, 44, 34, 0.62) 0%, rgba(2, 44, 34, 0.5) 45%, rgba(2, 44, 34, 0.2) 78%, transparent 100%);
  }
}

/* Brilho difuso atrás do conteúdo: dá profundidade sem custar uma imagem. */
.hero::after {
  content: '';
  position: absolute;
  inset: -35% -12% auto auto;
  width: 62vw;
  height: 62vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, var(--glow-hero), transparent 66%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: var(--space-12);
  align-items: center;
  padding-block: clamp(var(--space-12), 7vw, 6rem);
  color: var(--on-hero);
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

  /* No celular a cena sobe para logo DEPOIS dos CTAs, e os números descem.
     Empilhada na ordem do HTML, a caixa ficaria abaixo de título, texto, dois
     botões e três cartões — ou seja, fora da primeira tela — e é ela que
     mostra o produto funcionando.

     `display: contents` promove os filhos da coluna a itens do próprio grid,
     que é o que permite intercalar a caixa entre eles sem duplicar markup nem
     mover nó nenhum por JavaScript. */
  .hero__col { display: contents; }
  .story { order: 2; }
  .hero__stats { order: 3; margin-top: 0; }
}

.hero h1 { color: var(--on-hero); margin-top: var(--space-6); }

/* ── O QUE VIVE SOBRE O HERÓI USA A PALETA FIXA ───────────────────────────
   O gradiente do herói é escuro nos DOIS temas (é o mesmo princípio dos
   tokens `*-fixed` do app). Sem estas sobrescritas, no tema CLARO o acento do
   título, a pílula e os números sairiam na primária escura (#047857) sobre
   verde escuro — legíveis no papel, invisíveis na tela.

   O trecho em esmeralda do título é um <span> de TEXTO, não marcação
   decorativa, então a tradução continua entrando por textContent. */
.hero h1 .accent { color: var(--on-hero-accent); }

.hero .eyebrow {
  color: var(--on-hero-accent);
  border-color: rgba(52, 211, 153, 0.32);
  background: rgba(16, 185, 129, 0.14);
}

/* O botão primário do herói inverte, como no tema escuro: fundo esmeralda
   claro com texto escuro. A primária do tema claro sobre o gradiente vira um
   botão apagado, que é o oposto do que um CTA principal precisa ser. */
.hero .btn--primary {
  background: var(--on-hero-accent);
  color: #022c22;
}
.hero .btn--primary:hover { background: #6ee7b7; color: #022c22; }

/* O botão secundário fica translúcido sobre o herói, e não com a superfície do
   tema — no claro ele viraria um bloco branco competindo com o CTA. */
.hero .btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--on-hero);
}
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--on-hero);
}

.hero__lead {
  margin-top: var(--space-6);
  max-width: 54ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  color: var(--on-hero-soft);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Stats em CARTÕES, não números soltos: sobre o gradiente eles precisam de uma
   superfície própria para não se dissolverem no fundo. */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--hero-rule);
}
.hero__stat {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hero-rule);
  border-radius: var(--radius-md);
  background: var(--veil-stat);
  backdrop-filter: blur(6px);
}
.hero__stat strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-hero-accent);
}
.hero__stat span { font-size: 0.75rem; color: var(--on-hero-faint); }

/* --- Cartões genéricos ----------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-8);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--tint-line);
  transform: translateY(-3px);
  box-shadow: var(--glow);
}

/* Capa alta com o degradê subindo do pé do card: é ele que faz o selo
   sobreposto ficar legível sobre qualquer imagem. Sem capa gerada, o bloco cai
   no gradiente herói — o mesmo fallback do `.ds-cover` do app. */
.card__cover {
  position: relative;
  height: 190px;
  background: var(--gradient-hero);
  overflow: hidden;
}
.card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card__cover img { transform: scale(1.05); }

.card__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cover-fade) 0%, transparent 60%);
}

.card__badge {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--veil-panel);
  backdrop-filter: blur(6px);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  flex: 1;
}
.card__body h3 { transition: color 0.2s ease; }
.card:hover .card__body h3 { color: var(--primary); }
.card__body p { color: var(--on-surface-variant); font-size: 0.9375rem; }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--outline-variant);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
  padding: 3px var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  background: var(--surface-raised);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.chip--age { border-color: var(--tint-line); color: var(--primary); }

/* --- Avatares -------------------------------------------------------------- */

.avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--surface-raised);
  font-size: 1.125rem;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.stack { display: flex; }
/* Os avatares se sobrepõem; a borda da cor do card é o que os separa. */
.stack .avatar {
  width: 30px;
  height: 30px;
  font-size: 0.875rem;
  margin-inline-end: -9px;
  border: 2px solid var(--surface-card);
}
.stack .avatar:last-child { margin-inline-end: 0; }

/* --- Personagens ----------------------------------------------------------- */

/* Cartão ALTO com a foto ocupando o fundo inteiro e o texto num painel
   translúcido na base. É o formato que mais mudou em relação à versão anterior
   (que era uma linha horizontal), e o que dá à seção o peso de vitrine. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: var(--space-6);
}

.person {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 340px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gradient-hero);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.person:hover {
  border-color: var(--tint-line);
  transform: translateY(-3px);
  box-shadow: var(--glow);
}

.person__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem retrato gerado, o emoji da persona vira a arte — grande, centralizado e
     sobre o gradiente. O card continua com a mesma silhueta. */
  font-size: 5rem;
}
.person__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.5s ease;
}
.person:hover .person__art img { transform: scale(1.05); }

.person__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cover-fade) 8%, transparent 62%);
}

.person__text {
  position: relative;
  z-index: 1;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--veil-panel);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--outline-variant);
}
.person__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  color: var(--on-surface);
  transition: color 0.2s ease;
}
.person:hover .person__name { color: var(--primary); }
.person__bio {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--on-surface-variant);
}

/* No celular vira uma fita que desliza, em vez de uma coluna altíssima. */
@media (max-width: 640px) {
  .people {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--space-6) * -1);
    padding-inline: var(--space-6);
    scrollbar-width: none;
  }
  .people::-webkit-scrollbar { display: none; }
  .person { flex: 0 0 76%; scroll-snap-align: start; }
}

/* --- Como funciona --------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-8); }

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.step:hover { border-color: var(--tint-line); box-shadow: var(--glow); }

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-md);
  background: var(--tint);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
}
.step p { color: var(--on-surface-variant); font-size: 0.9375rem; }

/* --- A história acontecendo ------------------------------------------------ */

.story {
  position: relative;
  background: var(--veil-story);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-story);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.story__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--outline-variant);
}
.story__title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--on-surface);
}
.story__live {
  flex: 0 0 auto;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--primary);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) 0;
}
.tab {
  padding: var(--space-1) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-round);
  color: var(--on-surface-variant);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tab:hover { color: var(--on-surface); border-color: var(--outline); }
.tab[aria-selected='true'] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* `min-height` vem do JSON de cada história: sem ele a seção cresce conforme as
   bolhas entram e empurra a página inteira para baixo durante a animação. */
.story__feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  justify-content: flex-end;
}

.msg { display: flex; gap: var(--space-3); animation: rise 0.32s ease both; }

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

@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .story__live { animation: none; }
}

.msg__body { min-width: 0; flex: 1; }
.msg__who {
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--persona-3);
  margin-bottom: var(--space-1);
}
.msg__text {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--on-surface-variant);
}

.msg--player { flex-direction: row-reverse; }
.msg--player .msg__body { display: flex; flex-direction: column; align-items: flex-end; }
.msg--player .msg__text {
  max-width: 88%;
  background: var(--primary-container);
  border-color: var(--tint-line);
  color: var(--on-primary-container);
}

/* Ação em terceira pessoa: no app ela é roxa e itálica dentro da bolha. */
.msg__text em { color: var(--persona-4); font-style: italic; }

.msg--system { justify-content: center; }
.msg--system img { border-radius: var(--radius-md); border: 1px solid var(--outline-variant); }

.typing { display: inline-flex; gap: 4px; padding: var(--space-3) var(--space-4); }
.typing span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--outline);
  animation: blink 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* CTA que aparece quando a história termina, em vez de repetir para sempre. */
.story__end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--outline-variant);
  flex-wrap: wrap;
}
.story__end .btn { padding: var(--space-2) var(--space-4); font-size: 0.8125rem; }

/* --- Planos ---------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-8);
  max-width: 64rem;
  margin-inline: auto;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
}
/* O plano disponível ganha anel e sombra da marca — é o único acionável. */
.plan--now {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-raised);
}

.plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plan__nome {
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.plan--now .plan__nome { color: var(--primary); }

.plan__selo {
  padding: 3px var(--space-3);
  border-radius: var(--radius-round);
  border: 1px solid var(--outline-variant);
  background: var(--surface-raised);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.plan--now .plan__selo {
  border-color: var(--tint-line);
  background: var(--tint);
  color: var(--primary);
}

.plan__price {
  font-family: var(--font-title);
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--on-surface);
}

.plan ul {
  margin: 0;
  padding: var(--space-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}
.plan li { display: flex; align-items: flex-start; gap: var(--space-2); }
.plan li::before {
  content: '✓';
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--primary);
}
/* Nos planos indisponíveis o item é promessa, não recurso ativo. */
.plan:not(.plan--now) li::before { content: '•'; color: var(--outline); }

.plan .btn { margin-top: auto; }

/* --- CTA final e rodapé ---------------------------------------------------- */

.finale {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(to top, var(--tint), var(--surface-page));
  border-top: 1px solid var(--outline-variant);
}
/* Glow subindo do pé da seção, como no mockup. */
.finale::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 640px);
  height: min(90vw, 640px);
  background: radial-gradient(circle, var(--glow-hero), transparent 68%);
  pointer-events: none;
}
.finale .wrap { position: relative; z-index: 1; }
.finale p { margin: var(--space-6) auto 0; max-width: 42ch; color: var(--on-surface-variant); font-size: 1.0625rem; }
.finale .btn { margin-top: var(--space-8); }

.footer {
  padding-block: var(--space-12);
  background: var(--surface-deep);
  border-top: 1px solid var(--outline-variant);
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: 0.75rem; font-weight: 600; }
.footer__links a { color: var(--on-surface-variant); }
.footer__links a:hover { color: var(--on-surface); }
.footer__legal {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--outline-variant);
  max-width: 68ch;
  font-size: 0.75rem;
  color: var(--outline);
}
.footer__legal p + p { margin-top: var(--space-2); }

/* --- Celular --------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Os dois CTAs do herói ocupam a largura toda e ficam do MESMO tamanho: com
     larguras diferentes um deles vira o botão "certo" sem que ninguém tenha
     decidido isso. */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  /* Três cartões de número não cabem lado a lado em 375px sem virar texto
     minúsculo. */
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .section { padding-block: var(--space-12); }
  .section__head { margin-bottom: var(--space-8); }
  .section__bar { margin-bottom: var(--space-8); }

  .topbar__inner { min-height: 60px; gap: var(--space-2); }
  .brand__logo { width: 34px; height: 34px; }
  .brand__name { font-size: 0.9375rem; }

  .story__feed { padding: var(--space-4); }
  .tabs { padding: var(--space-3) var(--space-4) 0; }
  .story__head { padding: var(--space-3) var(--space-4); }
  .story__end { padding: var(--space-3) var(--space-4); }
}

/* A barra em 375px cabe TRÊS coisas: marca, CTA e o botão do menu. São 327px
   úteis, e o nome escrito por extenso come 130 deles — o CTA e o menu ficariam
   espremidos, e um alvo de toque espremido é um alvo errado.
   O símbolo fica (é ele que se reconhece de longe) e o nome volta a aparecer
   no herói, duas linhas abaixo, e no rodapé. */
@media (max-width: 600px) {
  .topbar .brand__name,
  .topbar .tag-beta { display: none; }
}

/* --- Aviso de cookies ------------------------------------------------------

   Barra presa ao rodapé da janela, NÃO um modal: o do app bloqueia (#47) e o
   daqui não — quem chega da busca decide em segundos se o produto interessa, e
   uma parede antes da primeira frase custa mais do que a medição vale. Quem
   ignora simplesmente não é medido.

   `z-index: 40` fica acima da barra do topo (30), que é o único elemento fixo
   desta página. O aviso é o último a aparecer e o primeiro a ser resolvido:
   passar por baixo do menu do celular deixaria o Ok inalcançável justamente na
   tela onde ele mais atrapalha.

   Nasce `hidden` no HTML — a regra `[hidden]` das utilidades vence esta. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  padding: var(--space-4);
  /* Fora da área segura do iPhone: sem isto o Ok cai sob a barra de gestos. */
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.consent__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  max-width: 60rem;
  margin-inline: auto;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-raised);
}

.consent__text {
  /* Cresce e encolhe; o link e o botão ficam no tamanho deles. Base 16rem para
     o texto não afinar em coluna de uma palavra antes de quebrar a linha. */
  flex: 1 1 16rem;
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}

.consent__more {
  font-size: 0.875rem;
  font-weight: 500;
}

/* No celular o Ok ocupa a largura toda: com o texto em três linhas, um botão
   pequeno encostado à direita vira o alvo mais difícil da tela. */
@media (max-width: 480px) {
  .consent__box { padding: var(--space-4); }
  .consent__box .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- Utilidades ------------------------------------------------------------ */

/* A vitrine é aditiva: se a API não responder, a seção some inteira em vez de
   deixar um buraco com esqueletos animados para sempre. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}