/* Wind Maps — landing pública (windmaps.app)
   Identidade visual 2026 (Romis Carmo / Plimper). Regra dura do guideline: UMA
   família por peça, nunca duas — por isso os tokens abaixo são AGNÓSTICOS de
   família: nenhum hex de família vive fora do bloco `:root`. Trocar a família da
   landing = trocar cinco hex ali, e mais nada.
   Estrutura das seções absorvida da exploração no design mode (variante Mobbin).
   Movimento assinatura preservado: hero com vídeo real em loop. */
:root {
  /* ── Família em uso: OURO ──────────────────────────────────────────────
     Escolhida em 07/08/2026 comparando Fogo × Ouro × Elétrico no hero real.
     Fogo brigava com a areia dourada da foto (duas temperaturas quentes
     disputando); Elétrico só funcionava trocando o fundo escuro por carvão, e
     esfriava a peça. Ouro é o mais próximo do âmbar validado em 14/07. */
  --brand-100:  #FFC200;  /* amarelo      — destaque quente, "sozinho." */
  --brand-200:  #FFAC00;  /* âmbar        — hover, gradiente */
  --brand-300:  #FF9601;  /* NÚCLEO       — CTA primário, links, foco */
  --brand-400:  #FF8001;  /* laranja      — pressed */
  --brand-ink:  #261A00;  /* tinta SOBRE o núcleo (dourado pede tinta escura) */

  /* Fundo escuro institucional. O guideline autoriza explicitamente aplicá-lo
     em capas e divisores — é o que sustenta o hero e o CTA final.
     `--deep-rgb` existe porque o gradiente do hero precisa dos canais soltos
     pra variar alfa; os dois andam juntos. */
  --deep:      #000D3A;
  --deep-rgb:  0, 13, 58;

  /* Neutros. A paleta oficial NÃO define neutros, então estes são escolha
     nossa: viés frio mínimo, para não competir com o laranja. */
  --bg:        #FFFFFF;
  --surface:   #F4F5F9;
  --line:      #E3E6EF;
  --ink:       #0B1023;
  --ink-soft:  rgba(11, 16, 35, .62);
  --ink-faint: rgba(11, 16, 35, .45);

  /* Semânticos — função, não marca. Sobrevivem à troca de família. */
  --signal-red: #D21F22;
  --success:    #16A34A;

  /* Tamanho do H1 como token porque a isóbara do hero se dimensiona por ele:
     a marca tem a altura do bloco do título e as duas têm que escalar juntas. */
  --h1-size:   clamp(42px, 6vw, 72px);
  /* Diâmetro da isóbara do hero = o ink do H1 (ver `.hero-mark`). */
  --mark-size: calc(var(--h1-size) * 1.7344);
  /* Largura da LINHA MAIS LONGA do H1 do hero ("Nunca veleje"), medida em
     Archivo 800 a 112% de largura: 501,6px em 72px = 6,9667 × o corpo. Serve pra
     centrar a marca sobre o TEXTO e não sobre a caixa — a caixa tem 620px e o
     texto 501,6px, então centrar pela caixa jogaria a marca 59px pra direita do
     centro ótico.
     Vale em qualquer largura porque a quebra do slogan é FIXA (`<br>` no HTML):
     deixada pro navegador, entre ~507px e ~945px o título caberia numa linha só e
     a marca sairia do centro. ⚠️ Depende da copy: mudou o slogan, mover o `<br>`
     e remedir (`Range.getClientRects()` na `.h1` dá uma rect por linha). */
  --h1-line1:  calc(var(--h1-size) * 6.9667);

  --radius:    24px;
  --radius-sm: 16px;
  --radius-pill: 999px;
  --shadow:    0 20px 50px -28px rgba(11, 16, 35, .38);
  --shadow-sm: 0 8px 24px -14px rgba(11, 16, 35, .30);
  --shadow-phone: 0 26px 60px -24px rgba(var(--deep-rgb), .55);
  --maxw:      1160px;

  /* Tipografia do sistema. Nokia Expanded (titulação oficial) é COMERCIAL
     PAGA e não entra como webfont — o lettering da marca vem como asset.
     Archivo é a grotesca de mesmo DNA com eixo de largura próprio: em wdth
     alto faz a titulação; em wdth normal, o texto corrido. */
  --font:         'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-support: 'Special Gothic Expanded One', var(--font);
  --font-data:    'Google Sans Code', ui-monospace, SFMono-Regular, monospace;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--brand-300); text-decoration: none; }
a:hover { color: var(--brand-400); }
:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Titulação: Archivo em largura expandida — o DNA das expandidas do sistema
   sem depender da fonte paga. */
.h1, .h2, .h3 {
  font-family: var(--font);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
.h1 { font-size: var(--h1-size); }
.h2 { font-size: clamp(32px, 4.4vw, 54px); }
.h3 { font-size: clamp(21px, 2vw, 24px); font-stretch: 106%; line-height: 1.15; }

.lead {
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 20px 0 0;
}

/* Rótulo curto em caixa alta = papel de APOIO no sistema tipográfico. */
.eyebrow {
  font-family: var(--font-support);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-300);
}

/* Número/medida — o papel de dado do sistema. */
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .16s, transform .16s, color .16s;
}
.btn:active { transform: translateY(1px); }
/* A tinta sobre o núcleo vem do tema: laranja pede escura, azul pede clara. */
.btn-primary { background: var(--brand-300); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-200); color: var(--brand-ink); }
.btn-sm { font-size: 15px; padding: 11px 20px; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--surface); color: var(--ink); }

/* Botão de loja — fundo claro sobre o hero escuro. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 22px;
  background: #fff;
  color: var(--deep);
  border-radius: var(--radius-pill);
  transition: transform .16s;
}
.store:hover { color: var(--deep); transform: translateY(-2px); }
.store svg { flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store small { font-size: 11px; opacity: .7; font-weight: 600; }
.store b { font-size: 16px; font-weight: 700; }
.store-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ── Nav (pílula flutuante) ───────────────────────────────────────────── */
.nav-shell { position: sticky; top: 0; z-index: 50; padding: 16px 20px; }
.nav {
  max-width: 1040px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 9px 10px 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 8px 24px -18px rgba(0, 13, 58, .4);
}
.brand { display: flex; align-items: center; gap: 10px; }
/* Assinatura do #499 (símbolo + wordmark em linha, ~2,85:1). A tinta do SVG é
   escura, então serve direto sobre a pílula clara do nav e sobre o rodapé
   branco — sem o `filter: invert(1)` que o rodapé navy antigo exigia. */
.brand img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* `:not(.btn)` nos dois: sem ele estas regras têm especificidade (0,1,1) e (0,2,1)
   contra os (0,1,0)/(0,2,0) do `.btn-primary`, ganham, e o CTA do nav passa a ter
   a cor do LINK em vez da tinta do tema. No hover isso era visível: texto
   `--brand-300` sobre fundo `--brand-200`, laranja sobre âmbar a 1,1:1 — o botão
   desaparecia embaixo do mouse. No estado normal era invisível porque `--ink` e
   `--brand-ink` são os dois escuros, mas o defeito é o mesmo e mordia na hora de
   trocar de família: com uma família de tinta BRANCA o texto continuaria escuro
   sobre o núcleo escuro. O botão tem cor e hover próprios. */
/* `padding` vertical = alvo de toque (mesma razão do `.footer-links a`): sem ele o
   link tem 21,7px e não passa o mínimo de 24×24 do WCAG 2.2. Não mexe na altura da
   pílula — quem manda nela é o CTA, com 45,3px. */
.nav-links a:not(.btn) { color: var(--ink); font-weight: 600; font-size: 15px; padding: 6px 0; }
.nav-links a:not(.btn):hover { color: var(--brand-300); }

/* ── Hero (vídeo full-bleed + gradiente diagonal) ─────────────────────── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep);
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img, .hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* O vídeo nasce invisível e só aparece quando está de fato tocando (classe
   .ready via landing.js) — a foto por baixo é o LCP e o fallback permanente. */
.hero-bg video { opacity: 0; transition: opacity .8s ease; }
.hero-bg video.ready { opacity: 1; }
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(var(--deep-rgb), .90) 0%,
    rgba(var(--deep-rgb), .64) 42%,
    rgba(var(--deep-rgb), .16) 74%,
    rgba(var(--deep-rgb), .46) 100%);
}
/* O hero tem grade PRÓPRIA, travada no NAV e não na grade de 1160 do resto da
   página: o agrupamento nasce na mesma linha vertical em que o logo do nav
   começa. É alinhamento de conteúdo com conteúdo — a borda da pílula é
   contêiner, o logo é o que se lê como início da coluna.
   Os números saem da geometria do nav, não de gosto: `.nav-shell` tem 20px de
   padding, a `.nav` tem 1040px de largura máxima centrada dentro dele (donde os
   1080 aqui) e o logo começa depois de 20px de padding + 1px de borda da pílula
   (donde os 41). Confirmado por medição: logo em 133,5px, texto do hero em
   133,5px numa janela de 1265.
   Mexeu no `max-width` da `.nav`, no padding do `.nav-shell` ou na borda da
   pílula? Refazer a conta aqui, senão os dois desalinham em silêncio. */
.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  padding: 0 41px;
}
/* Isóbara EM CIMA do agrupamento (título + apoio + botões) e centrada sobre o
   slogan — ver o `margin-left` da `.hero-mark`. Ao lado ela empurrava o texto
   ~180px pra dentro, o oposto do que o hero pede. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Área de proteção do guideline = altura do núcleo (39% da arte → ~49px neste
     tamanho). Os 38px daqui mais os 11,44px de meia-entrelinha que a caixa do H1
     tem antes da capitular dão 49,4px de campo livre até a letra — a proteção se
     mede até a ARTE, e a caixa de linha não é arte. */
  gap: 38px;
  padding: 120px 0 140px;
}
.hero-text { max-width: 620px; }
.hero-copy .h1 { color: #fff; }
.hero-copy .lead { color: rgba(255, 255, 255, .9); max-width: 520px; margin: 22px 0 0; }
.hero-text .store-row { margin-top: 34px; }
/* Linha de "em breve" abaixo das lojas: peso de nota de pé, não de promessa —
   quem decide baixar decide pelos botões acima. Fica no hero e não no CTA final
   porque é diferencial de produto (ninguém mais no nicho tem relógio) e o hero é
   onde a comparação acontece. */
.soon {
  display: flex;
  /* `flex-start` + nudge de 2px: no telefone a frase ocupa duas linhas e com
     `center` o ícone descia pro meio do bloco, longe da linha que ele rotula. */
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
.soon svg { flex: none; margin-top: 2px; }
/* "sozinho." é o ponto mais quente da tela — âmbar da família, itálico leve. */
.hero-copy .h1 em {
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  color: var(--brand-100);
}
/* ── Isóbara do hero ──────────────────────────────────────────────────────
   Só o símbolo, sem lettering: o nav anuncia a marca 200px acima e o guideline
   manda usar só o ícone onde o nome já apareceu. Todo o movimento vive dentro
   do SVG (docs/brand/motion.md) — nada de animação aqui, senão a partitura
   passa a existir em dois lugares e divergem.

   Tamanho casado com o SLOGAN, não com a caixa de linha: o diâmetro é o ink do
   H1 — topo da capitular da 1ª linha até a baseline da 2ª. Em Archivo 800 isso
   é uma entrelinha (1,04) + a capitular (0,694 em) = 1,7344 × o corpo, medido no
   navegador (canvas `actualBoundingBoxAscent`), não estimado. Vinha de 2,08 × o
   corpo (as DUAS caixas de linha) e saía 25px mais alto que o texto que se
   enxerga — a marca lia como solta. Empilhada em cima do título o vínculo é de
   massa, não de flush, mas a régua segue sendo o slogan.
   Derivado do MESMO token (`--h1-size`) que o H1 usa, então escalam juntos sem
   dois clamps pra manter em sincronia. Mínimo do guideline pra construção linear
   é 64px e o menor valor possível aqui é 1,7344 × 42px ≈ 73px — nunca desce
   abaixo dele (é o que faz o traço fino aguentar a foto: em 58px os anéis sumiam
   contra a areia e sobrava o núcleo com anéis fantasma). */
.hero-mark {
  width: var(--mark-size);
  flex: none;
  /* Centrada sobre o TEXTO do slogan, não sobre a caixa do H1: a caixa tem 620px
     (o `max-width` da `.hero-text`) e a linha mais longa 501,6px, então centrar
     pela caixa deixaria a marca 59px à direita do centro que o olho vê. Sai em
     2,6161 × o corpo, mas fica como conta pra continuar verdadeira se o slogan
     ou o tamanho do H1 mudarem. */
  margin-left: calc((var(--h1-line1) - var(--mark-size)) / 2);
}
.hero-mark img { display: block; width: 100%; height: auto; }
/* ── Seções ───────────────────────────────────────────────────────────── */
.section { padding: 112px 0; }
.section-alt { background: var(--surface); }
.section-head { max-width: 760px; margin: 0 auto 60px; text-align: center; }

/* ── Grade de cards ───────────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  /* `min(320px, 100%)` e não `320px` seco: um `minmax(320px, …)` é um PISO, e num
     contêiner mais estreito que 320 o trilho não encolhe — ele estoura pra fora.
     Mordeu no telefone mais comum do Brasil: em 360px de viewport a `.wrap` deixa
     312 úteis, o trilho ficava em 320 e os cards saíam 8px além da tela (a 320px
     de viewport, 48px), com barra de rolagem horizontal e conteúdo cortado. Com o
     `min()` o piso vira o próprio contêiner quando ele é menor. Acima de ~668px
     nada muda: as duas colunas seguem entrando igual. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
}
/* Foram-se com a seção de condições virando dois cards com gravação real:
   `.grid-3`, `.feature`, `.feature-frame`, `.slot` e `.slot-portrait`. O `.slot`
   era a moldura tracejada de placeholder — não sobrou nenhum na página, e
   deixar CSS de placeholder convida a criar placeholder novo. */

/* ── Mockup de telefone ───────────────────────────────────────────────── */
/* A `.phone-stage` (moldura ABERTA, telefone saindo pelo rodapé de um palco de
   460px) não tem mais uso: as gravações reais precisam da tela inteira e usam a
   `.phone-stage-full` + `.phone-full`. Ficou uma variante só de palco, o que é o
   certo — duas gramáticas de mockup na mesma página nunca foi decisão, foi
   sedimento. */
.phone-stage-full {
  background: #fff;
  border-radius: 28px;
  padding: 36px 24px;
  display: flex;
  justify-content: center;
  box-shadow: var(--shadow);
  height: auto;
  align-items: center;
}
.phone { width: 270px; max-width: 78%; }
.phone-body {
  background: var(--deep);
  border-radius: 40px 40px 0 0;
  padding: 12px 12px 0;
  box-shadow: var(--shadow-phone);
}
.phone-screen {
  position: relative;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #CFE0EE;
  display: grid;
  place-items: center;
}
/* Variante inteira (modo corrida): moldura fechada. Largura contida — a 300px
   com tela 9:19 o mockup passava de 630px de altura e afogava a coluna de
   texto ao lado. */
.phone-full { width: 252px; max-width: 100%; }
.phone-full .phone-body { border-radius: 40px; padding: 11px; }
.phone-full .phone-screen { border-radius: 31px; aspect-ratio: 9 / 18; }

/* Variante com GRAVAÇÃO DE TELA real dentro (seção de condições). A tela abre
   mão do `aspect-ratio` fixo de propósito: quem dita a proporção é o arquivo,
   via `width`/`height` do <video>. Assim reencodar com outro recorte não exige
   vir mexer aqui — e nada é esticado nem cortado, que é o ponto: o miolo da
   demo (a maré e o vento hora a hora) mora justamente no rodapé da tela e um
   `object-fit: cover` comeria exatamente isso. */
.phone-rec .phone-screen { aspect-ratio: auto; background: var(--deep); }
.phone-rec .rec { display: block; width: 100%; height: auto; }
/* O quadro não cresce até a largura do card: a gravação é retrato e num card de
   ~540px ela viraria uma torre de 1000px. 252px (o `.phone-full`) já é 2× menor
   que o arquivo, então nunca escala pra cima. */
.feature-rec .phone-stage-full { padding: 32px 24px; }
.phone-slot {
  color: var(--ink-faint);
  font-size: 12.5px;
  text-align: center;
  padding: 24px;
  line-height: 1.45;
}
.phone-tags {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.tag {
  background: rgba(255, 255, 255, .92);
  color: var(--deep);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.tag-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--signal-red);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
}
/* `.tag-live` (vermelho de "AO VIVO") saiu com o mockup falso do card de grupo —
   quem mostra o ao vivo agora é a gravação. Sobrou `.tag-start`, do último
   placeholder da página (modo corrida). */
.tag-start { background: var(--success); }
.dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Os `.map-avatar` (V/G/A sobre o mapa do mockup) foram embora com a gravação
   real entrando no card de grupo: os membros aparecem no app, com os nomes de
   verdade. Levaram com eles um defeito latente — o `.av-2` punha `--brand-ink`
   sobre `--brand-100`, o que só funciona enquanto TODOS os tons da família são
   claros; numa família que vai de claro a escuro a tinta inverte pra branco e
   aquele avatar caía pra 3,3:1. Ver docs/brand-identity.md. */

.card-text { margin-top: 28px; }
.card-text .h3 { margin-bottom: 10px; }
.card-text p { font-size: 17px; color: var(--ink-soft); margin: 0; max-width: 480px; }

/* ── Modo corrida ─────────────────────────────────────────────────────── */
.split {
  display: grid;
  /* `min()` no piso pelo mesmo motivo da `.grid-2` — esta seção está encostada no
     `<template>`, então o defeito não aparece hoje; consertado junto pra não
     voltar do banco de reservas com overflow em telefone de 360px. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}
.bullets { display: flex; flex-direction: column; gap: 18px; }
.bullet { display: flex; gap: 14px; align-items: flex-start; }
.bullet svg { flex: none; color: var(--brand-300); margin-top: 2px; }
.bullet span { font-size: 16px; color: var(--ink); line-height: 1.5; }
.bullet b { font-weight: 700; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.chip {
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}

/* ── B2B ──────────────────────────────────────────────────────────────── */
.card-b2b {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.card-b2b .h3 { margin: 10px 0 12px; }
.card-b2b > p { color: var(--ink-soft); margin: 0 0 24px; font-size: 15px; }
.steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.step { display: flex; gap: 12px; align-items: center; }
/* Numeral do passo = papel DADO do sistema tipográfico (Google Sans Code).
   Era o único número da página e estava em Archivo, o que deixava a família de
   dado sendo baixada do Google Fonts sem renderizar um glifo. */
.step i {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-300);
  color: var(--brand-ink);
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 14px;
  font-style: normal;
  display: grid;
  place-items: center;
}
.step span { color: var(--ink); font-size: 15px; font-weight: 600; }
.card-b2b .btn { margin-top: auto; }

/* ── História ─────────────────────────────────────────────────────────── */
.origin {
  background: var(--surface);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  /* `min()` no piso, e aqui era PIOR que na `.grid-2`: o `overflow: hidden` que
     existe pelo border-radius escondia o sintoma — em 320px o trilho ficava em
     300 dentro de 272 e o card não gerava rolagem horizontal, só CORTAVA 28px da
     coluna de texto em silêncio. Medido: borda direita em 324 numa tela de 320. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: center;
}

/* ── Carrossel (scroll-snap nativo, zero biblioteca) ──────────────────────
   Rolagem horizontal do próprio navegador com `scroll-snap`: arrasto no dedo,
   inércia e acessibilidade por teclado vêm de graça e sem nenhum KB de JS. O
   landing.js só desenha os pontos e sincroniza qual está ativo.
   `align-self: stretch` porque a `.origin` centra os itens: sem isso o `height:
   100%` da foto não teria contra o que resolver e a coluna da imagem encolheria
   pra altura do conteúdo em vez de acompanhar a do texto. */
.origin-media { position: relative; align-self: stretch; height: 100%; }
.carousel {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Barra de rolagem escondida: o affordance aqui são os pontos, e a barra
     clássica do desktop cortaria 15px da foto. */
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel .slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.carousel .slide img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
/* `[hidden]` precisa ser explícito: o `display: flex` abaixo venceria o
   `display: none` que o atributo carrega, e os pontos apareceriam vazios com uma
   foto só. */
.carousel-dots[hidden] { display: none; }
.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 2px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
/* Botão de 24×24 com o ponto de 8px desenhado no `::before`: o alvo cumpre o
   mínimo de 24×24 do WCAG 2.2 sem que o ponto engorde na tela. `gap: 2px` pra os
   alvos ficarem quase encostados, sem faixa morta entre eles. */
.carousel-dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.carousel-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transition: background-color .16s, transform .16s;
}
.carousel-dots button[aria-current="true"]::before { background: #fff; transform: scale(1.4); }
.origin-copy { padding: 48px 40px; }
.origin-copy .h2 { font-size: clamp(26px, 3vw, 36px); }
.origin-copy p { font-size: 16px; color: var(--ink-soft); margin: 16px 0 0; }

/* ── CTA final ────────────────────────────────────────────────────────── */
.cta-final {
  background: var(--deep);
  border-radius: 32px;
  padding: 88px 40px;
  text-align: center;
}
.cta-final .h2 { color: #fff; }
.cta-final p {
  font-size: 18px;
  color: rgba(255, 255, 255, .72);
  max-width: 520px;
  margin: 20px auto 34px;
  line-height: 1.5;
}
.cta-final .store-row { justify-content: center; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer {
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 56px 0 40px;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}
.footer-brand { max-width: 280px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand .brand img { height: 40px; }
.footer-brand p { font-size: 14px; margin: 0; line-height: 1.5; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
/* O `padding` vertical é alvo de toque, não respiro: sem ele o link tem 21,7px de
   altura e não passa o mínimo de 24×24 do WCAG 2.2 (2.5.8). Funciona porque item
   de flex é blocado — em `inline` puro o padding não empurraria a caixa. */
.footer-links a { color: var(--ink); font-size: 14px; font-weight: 600; padding: 6px 0; }
.footer-links a:hover { color: var(--brand-300); }
.footer-legal {
  width: 100%;
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--ink-faint);
}
/* Link legal NÃO usa o núcleo da marca: `--brand-300` como texto sobre branco dá
   2,18:1 e reprova o AA do WCAG (a família Ouro não tem tom escuro pra cair).
   `--ink-soft` dá 5,6:1 medido, e o sublinhado carrega o affordance no lugar da
   cor. `inline-block` + padding pra o alvo passar de 20px pros 24 do WCAG 2.2 —
   em `inline` puro a caixa não cresceria. */
.footer-legal a {
  display: inline-block;
  padding: 5px 0;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal a:hover { color: var(--ink); }

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  /* `:not(.btn)` aqui também, senão esta regra faz o INVERSO do que diz: com
     (0,1,1) ela perde dos (0,2,1) da base e não pega nos links (que ficavam em
     15px), mas ganha do (0,1,0) do `.btn-sm` e derrubava o CTA pra 14px. Medido
     exatamente assim depois do fix de hover — o `:not()` de lá tinha que ter
     descido pra cá no mesmo movimento. */
  .nav-links a:not(.btn) { font-size: 14px; }
  .section { padding: 80px 0; }
  .hero-copy { gap: 28px; padding: 96px 0 104px; }
  /* No mobile o hero volta pra goteira da página (24px) em vez de seguir o logo
     do nav (41px): a pílula ali já ocupa quase a largura toda e lê como card
     solto, então o que importa é o hero não parecer recuado em relação às seções
     logo abaixo. O alinhamento com o nav é ganho de tela grande. */
  .hero .wrap { padding: 0 24px; }
  .origin-copy { padding: 36px 28px; }
  .cta-final { padding: 64px 24px; }
}
@media (max-width: 620px) {
  .nav { padding: 9px 10px 9px 16px; }
  .section-head { margin-bottom: 44px; }
  /* Botões de loja em coluna cheia. Empilhados por `flex-wrap` eles nasciam com
     larguras diferentes (156,6 e 173,1 medidos, porque "App Store" é mais curto
     que "Google Play") e encostados à esquerda — lia como desalinho, não como
     par. Da largura toda eles voltam a ser um par, e o alvo de toque cresce. */
  .store-row { gap: 12px; }
  .store-row .store { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 519px) {
  /* Nav do telefone = marca + CTA, sem navegação por âncora. Não é gosto, é
     medida: a pílula precisa de 424px de conteúdo (logo 96,8 + 20 de gap + 307,2
     dos três links) contra W − 68 de espaço útil, ou seja, só cabe numa linha a
     partir de ~492px. Abaixo disso ela quebrava em 2 ou 3 linhas: 157px de
     pílula e 189px de header GRUDADO no topo — 26% de um telefone de 740px preso
     em navegação, empurrando os botões da loja pra beirada da dobra.
     Aqui havia um `.nav-links { width: 100%; justify-content: space-between }`,
     que era justamente o que produzia a segunda linha com "Vento e maré" num
     canto e "Downwind" no outro. As duas seções ficam a um scroll de distância e
     seguem no rodapé, então nada fica inalcançável. */
  .nav-links a:not(.btn) { display: none; }
  /* Alvo de toque do logo: 34px de imagem viram 44 sem crescer a pílula, porque
     o CTA ao lado tem 43,7 e é ele que manda na altura da linha. */
  .nav .brand { padding: 5px 0; }
}
@media (max-width: 359px) {
  /* Abaixo de 360 o slogan não cabe na quebra prevista: "Nunca veleje" pede
     6,9667 × o corpo (292,6px em 42px) e sobram 272 úteis, então o navegador
     quebra o H1 em 3 linhas, a linha mais longa encolhe pra 148,8px e a isóbara
     — posicionada pelo `--h1-line1`, que assume a quebra do `<br>` — fica 71,9px
     à direita do centro óptico (medido, não estimado).
     Descer o corpo pra 38px devolve a quebra em duas linhas (38 × 6,9667 =
     264,7 < 272) e, como marca e centragem derivam do MESMO token, tudo volta a
     casar sozinho. 38 é o piso e não escolha: 38 × 1,7344 = 65,9px de isóbara, e
     a construção linear do guideline não vive abaixo de 64px.
     Alvo real: iPhone SE 1 e, mais comum, qualquer aparelho com Zoom de Tela /
     fonte grande — um 375 vira 320 CSS. */
  :root { --h1-size: 38px; }
}

/* Tinha aqui um `@media (min-width: 1600px)` que jogava a isóbara fora da grade,
   pra margem da página. Morreu: a marca cabe ao lado do texto dentro da grade em
   qualquer largura ≥900px, então sobrava um segundo comportamento que quase
   ninguém via — 1600px CSS é acima do 1536 de um notebook a 125% de escala. Um
   layout só, testável na tela que se tem. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* O salto entre fotos passa a ser instantâneo (o clique no ponto usa
     `behavior: 'smooth'`, que respeita isto). O snap continua: ele não é
     animação, é onde a rolagem para. */
  .carousel { scroll-behavior: auto; }
  .carousel-dots button::before { transition: none; }
  .dot-pulse { animation: none; }
  .hero-bg video { transition: none; }
  .btn, .store { transition: none; }
}