/* hosting/public/assets/paginas.css
   ═══════════════════════════════════════════════════════════════════════════
   O DESIGN SYSTEM DA WEB DO KUKO. Uma folha, todas as páginas.

   Ela existe pelo mesmo motivo que `@components/UI` existe no app: cada página
   que escrevia o próprio CSS inline acabava com o próprio tamanho de título, o
   próprio respiro e a própria fonte. Cinco páginas, cinco produtos diferentes.

   ⛔ NENHUM VALOR VISUAL NASCE AQUI. Cor, tipo, espaço, raio e movimento vêm
   todos de `tokens.css`, que é gerado de `frontend/src/theme/design.config.ts`
   por `node scripts/sync-brand-tokens.mjs`. Trocar a cor da marca troca o app,
   o protótipo E este site, na mesma edição. Um hex escrito aqui reprova o
   build (`npm run audit:color`).

   Duas armadilhas de token que custaram tempo, documentadas para não voltarem:

   1. `--action` (#FF9600) mede 2,18:1 sobre branco. Ele é FUNDO de botão, com
      tinta preta em cima (9,61:1). Para laranja como TEXTO ou ÍCONE em fundo
      claro existe `--action-text` (#A66000, 4,89:1). Trocar os dois reprova a
      WCAG no tema claro sem ninguém perceber no tema escuro.
   2. `--border-focus` é gerado duas vezes pelo sincronizador, uma como cor e
      outra como largura, e resolve diferente conforme o seletor. Não use.
      Aqui o foco é `--action` com `--border-thick`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset mínimo ─────────────────────────────────────────────────────────── */

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

html {
  /* A rolagem por âncora precisa parar ABAIXO do topo, senão o título do
     destino nasce colado na borda e a pessoa acha que pulou demais. */
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-3xl);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  /* A pilha arredondada da marca. Sem ela a página fica com a cara do sistema
     e não com a cara do app, que é exatamente o que a landing existe para
     antecipar. */
  font-family: var(--font-ui);
  font-size: var(--type-body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nenhuma página do site rola na horizontal. Um SVG largo demais some aqui
     em vez de empurrar o corpo inteiro. */
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* ── Acessibilidade ───────────────────────────────────────────────────────── */

:focus-visible {
  outline: var(--border-thick) solid var(--action);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Quem pede menos movimento vê tudo no lugar, parado. Não é preferência
   estética: para parte das pessoas, movimento é enjoo e dor de cabeça. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Pular para o conteúdo: invisível até receber foco pelo teclado. */
.pular {
  position: absolute; left: var(--space-lg); top: calc(var(--space-lg) * -4);
  z-index: 10;
  background: var(--action); color: var(--action-ink);
  display: inline-flex; align-items: center;
  min-height: var(--layout-min-touch-target);
  padding-inline: var(--space-lg);
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold); text-decoration: none;
  transition: top var(--duration-fast) var(--ease);
}
.pular:focus { top: var(--space-lg); }

/* ── Estrutura ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--layout-max-content-width);
  margin-inline: auto;
  padding-inline: var(--layout-screen-padding-h);
}

/* O corpo de texto legal é mais estreito que o da landing de propósito: linha
   longa demais faz o olho perder a próxima, e página legal é feita para ser
   lida de verdade, não varrida. */
.wrap--texto { max-width: 62ch; }

/* A vitrine: a largura da LANDING, e só dela.
   `--layout-max-content-width` (640) é a medida do app — uma coluna na mão de
   alguém — e ela está certa para as páginas legais. A landing põe o texto ao
   lado do aparelho no desktop, e dentro de 640px cada coluna sobra com ~280px:
   o título quebra no meio e o botão da loja parte em duas linhas. */
.wrap--vitrine { max-width: var(--layout-max-showcase-width); }

@media (min-width: 768px) {
  .wrap { padding-inline: var(--space-3xl); }
}

/* ── Tipografia ───────────────────────────────────────────────────────────── */

/* Fluida de propósito: `clamp` cresce com a tela sem breakpoint, e o piso é
   calibrado para o menor telefone (320px) continuar legível. */

.eyebrow {
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--action-text);
}

h1, .h1 {
  font-size: clamp(32px, 8.5vw, 56px);
  line-height: 1.06;
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2, .h2 {
  font-size: clamp(22px, 5vw, 31px);
  line-height: 1.2;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3, .h3 {
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  font-weight: var(--type-title-weight);
  letter-spacing: var(--type-title-tracking);
}

p { color: var(--text-secondary); }
p + p { margin-top: var(--space-md); }

strong, b { color: var(--text); font-weight: var(--weight-bold); }

a { color: var(--action-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--action-hover); }

.lead {
  font-size: clamp(17px, 4.2vw, 21px);
  line-height: 1.45;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.legal {
  font-size: var(--type-legal-size);
  line-height: var(--type-legal-line);
  color: var(--text-tertiary);
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  min-height: var(--layout-button-height-md);
  padding-inline: var(--space-2xl);
  border: 0; border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  letter-spacing: var(--type-button-tracking);
  text-decoration: none;
  /* "Em breve na App / Store" partido em duas linhas lê como bug, não como
     botão. O nome da loja é indivisível. */
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:active { transform: scale(0.985); }

.btn--acao { background: var(--action); color: var(--action-ink); }
.btn--acao:hover { background: var(--action-hover); color: var(--action-ink); }

.btn--calmo {
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--border);
}
.btn--calmo:hover { background: var(--surface-raised); color: var(--text); }

/* O botão que ainda não leva a lugar nenhum.
   Ele NÃO é um link quebrado disfarçado: é um estado desenhado, com motivo
   dito em voz alta e anunciado ao leitor de tela. Link para o vazio é a falha
   silenciosa mais fácil de cometer numa landing de app que ainda não subiu. */
.btn[aria-disabled="true"] {
  background: var(--surface);
  color: var(--text-tertiary);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--border-subtle);
  cursor: default;
  pointer-events: none;
}

/* ── Cartões ──────────────────────────────────────────────────────────────── */

.cartao {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-xl);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--edge);
}
.cartao h3 { margin-bottom: var(--space-xs); }
.cartao p { font-size: var(--type-bodySm-size); line-height: var(--type-bodySm-line); }

.grade { display: grid; gap: var(--space-md); }

@media (min-width: 768px) {
  .grade--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

/* ── Seções ───────────────────────────────────────────────────────────────── */

section { padding-block: clamp(var(--space-4xl), 11vw, var(--space-6xl)); }
.secao-titulo { margin-bottom: var(--space-2xl); }
.secao-titulo p { margin-top: var(--space-sm); }

/* ── Rodapé ───────────────────────────────────────────────────────────────── */

.rodape {
  border-top: var(--border-hairline) solid var(--border-subtle);
  padding-block: var(--space-3xl);
}
.rodape-links {
  display: flex; flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-xl);
}
.rodape-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--type-bodySm-size);
  font-weight: var(--weight-semibold);
  /* Alvo de 44px sem inflar o layout: a área cresce, o texto não. */
  display: inline-flex; align-items: center; min-height: var(--layout-min-touch-target);
}
.rodape-links a:hover { color: var(--text); }

/* ── Páginas de texto (privacidade, termos, excluir conta, suporte) ───────── */

.doc { padding-block: var(--space-3xl) var(--space-5xl); }
.doc h1 { font-size: clamp(28px, 7vw, 40px); margin-bottom: var(--space-sm); }
.doc h2 {
  font-size: clamp(19px, 4.4vw, 23px);
  margin-top: var(--space-4xl); margin-bottom: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--border-hairline) solid var(--border-subtle);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { margin-top: var(--space-2xl); margin-bottom: var(--space-xs); }
.doc p, .doc li { color: var(--text-secondary); }
.doc ul, .doc ol { padding-left: var(--space-xl); margin-block: var(--space-md); }
.doc li + li { margin-top: var(--space-sm); }
.doc li::marker { color: var(--text-tertiary); }

.voltar {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: var(--layout-min-touch-target);
  color: var(--text-secondary); text-decoration: none;
  font-weight: var(--weight-semibold); font-size: var(--type-bodySm-size);
}
.voltar:hover { color: var(--text); }

.atualizado { color: var(--text-tertiary); font-size: var(--type-caption-size); }

/* Bloco de destaque dentro de texto legal. Serve ao aviso que muda a decisão
   de quem lê (a assinatura que continua cobrando depois de excluir a conta, o
   alarme que depende do aparelho). Ele tem cor de estado, não de marca. */
.aviso {
  background: var(--warning-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-lg);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--edge);
}
.aviso p, .aviso li { color: var(--text); }
.aviso :is(p, ul, ol) + * { margin-top: var(--space-sm); }

/* ── Utilitários ──────────────────────────────────────────────────────────── */

.centro { text-align: center; }
.pilha { display: flex; flex-direction: column; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* Lido por leitor de tela, invisível no olho. Para rótulo que o desenho já diz
   visualmente mas o áudio precisa ouvir. */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A LANDING — as peças que só ela usa, mas que são do DESIGN SYSTEM.

   Elas moram aqui, e não no `<style>` da página, porque nenhuma delas é de uma
   página só por natureza: a moldura do aparelho vai reaparecer no dia em que a
   página de suporte mostrar uma tela, e o movimento de entrada é o mesmo em
   qualquer seção nova. O que fica no `<style>` do index é o que só existe lá.

   ⛔ Continua valendo: nenhum valor visual nasce aqui. Tudo vem de tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── O movimento de entrada ────────────────────────────────────────────────
   Cada bloco sobe e aparece quando entra na tela. É o padrão de acabamento das
   landings que a gente modelou, e ele existe por um motivo funcional, não
   decorativo: ele dá RITMO à rolagem, e ritmo é o que faz alguém chegar ao fim
   de uma página no celular.

   ⚠️ A regra que impede a falha silenciosa mais cara desta folha: o estado
   escondido só existe quando o JavaScript está vivo (`html.js`). Sem essa
   trava, um erro de script deixaria a página inteira INVISÍVEL — texto no HTML,
   nada na tela, e nenhum erro visível para ninguém. A página sem JS é uma
   página estática perfeitamente legível, que é como ela tem que degradar.

   E quem pede menos movimento recebe tudo no lugar, na hora. */

html.js .revela {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease),
    transform var(--duration-slow) var(--ease);
}
html.js .revela.visivel { opacity: 1; transform: none; }

/* O escalonamento: irmãos entram em cascata, não em bloco. A diferença entre
   "a página está viva" e "a página piscou". */
html.js .revela[data-atraso="1"] { transition-delay: 70ms; }
html.js .revela[data-atraso="2"] { transition-delay: 140ms; }
html.js .revela[data-atraso="3"] { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .revela { opacity: 1; transform: none; transition: none; }
}

/* ── O aparelho ───────────────────────────────────────────────────────────
   A moldura é DESENHADA EM CSS, e a captura entra nua dentro dela
   (`node scripts/gerar-telas-da-landing.mjs`). Rasterizar a moldura junto com a
   tela custaria nitidez no retina e um arquivo maior, para desenhar em pixel o
   que um `border-radius` desenha em vetor.

   A sombra é de CONTATO, não halo: sobre fundo claro, halo faz o aparelho
   flutuar como adesivo. Três camadas dão o peso de objeto pousado. */

.aparelho {
  position: relative;
  width: min(272px, 70vw);
  margin-inline: auto;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(158deg,
    var(--neutral-500) 0%,
    var(--neutral-300) 30%,
    var(--neutral-200) 64%,
    var(--neutral-400) 100%);
  /* Três camadas, todas com a tinta de sombra do tema: contato, elevação e o
     desfoque longo que dá o peso de objeto pousado. Só a GEOMETRIA é escrita
     aqui — a cor vem do token, como manda a folha. */
  box-shadow:
    var(--shadow-md),
    var(--shadow-lg),
    0 44px 88px -34px var(--shadow-color);
}

.visor {
  position: relative;
  border-radius: 38px;
  overflow: hidden;
  /* A proporção da tela do app em pontos (440×956). Ela reserva a altura ANTES
     da imagem chegar: sem isto a página pula quando cada captura carrega, e
     salto de layout no celular é a sensação de site quebrado. */
  aspect-ratio: 440 / 956;
  background: var(--neutral-0);
}
.visor img { width: 100%; height: 100%; object-fit: cover; }

/* O aparelho levemente inclinado, para o herói. Ele para de ser uma figura
   recortada e passa a ser um objeto na cena. */
.aparelho--inclinado { transform: rotate(-3deg); }

@media (min-width: 768px) {
  .aparelho { width: 300px; }
}

/* ── O nascer do sol ──────────────────────────────────────────────────────
   O fundo claro da marca. É o MESMO que a ficha da loja usa
   (`capturas-para-a-apple.mjs`), e isso não é reuso preguiçoso: quem vê a arte
   na busca da App Store e clica no site precisa chegar no mesmo lugar. */

/* ⚠️ `.aurora` veste a <section>, NUNCA o `.wrap`. O `.wrap` é limitado e
   centrado, então um brilho pintado nele vira um retângulo de bordas duras no
   meio da tela larga — que foi exatamente como ele saiu na primeira tentativa.
   A seção ocupa a largura toda, e é nela que o sol nasce. */
.aurora { position: relative; isolation: isolate; }
.aurora::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(68% 46% at 22% 6%, var(--action-soft) 0%, transparent 62%),
    radial-gradient(90% 50% at 88% 14%, var(--soul-soft) 0%, transparent 60%);
  /* ⚠️ A máscara não é enfeite: sem ela o brilho nasce em força total na borda
     de cima da seção, e o que aparece na tela é uma FAIXA de bordas duras
     atravessando a página — foi exatamente assim que ele saiu na primeira
     tentativa, e some da atenção de quem escreveu porque o seam só aparece na
     emenda entre duas seções.
     A máscara desliga o brilho nos dois extremos, então ele nasce e morre no
     nada. `--neutral-0` aqui é "opaco", não "preto": numa máscara o que conta
     é o canal alfa, e o token evita uma cor solta nesta folha. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, var(--neutral-0) 22%, var(--neutral-0) 78%, transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%, var(--neutral-0) 22%, var(--neutral-0) 78%, transparent 100%);
  pointer-events: none;
}

/* ── A grade bento ────────────────────────────────────────────────────────
   Para o bloco de detalhes: itens de tamanhos diferentes num só ritmo. No
   celular ela é uma coluna, porque duas colunas de 160px não cabem em 320px. */

.bento { display: grid; gap: var(--space-md); }
.bento .cartao { margin: 0; }

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .bento .largo { grid-column: span 2; }
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento .largo { grid-column: span 2; }
}