/* ═══════════════════════════════════════════════════════════════════════════
   base.css — reset, documento, primitivas de tipografia e de leitura.
   ═════════════════════════════════════════════════════════════════════════ */

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

html, body, h1, h2, h3, h4, p, figure, blockquote, ol, ul, li {
  margin: 0;
  padding: 0;
}
ol, ul { list-style: none; }
img, picture, canvas, video, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* O !important aqui é proposital para [hidden] em geral, MAS ele vencia
   `.no-js .painel[hidden] { display: block }` e derrubava o resgate sem JS: todo
   o conteúdo longo ficava display:none e a página inteira somava 764 caracteres
   de texto. A promessa escrita era "ninguém perde conteúdo porque um script não
   carregou" — e ela estava quebrada desde que foi escrita.
   A exceção é explícita e cirúrgica, não uma flexibilização da regra. */
[hidden]:not(.painel) { display: none !important; }
.no-js .painel[hidden] { display: block !important; }

/* ── Documento ─────────────────────────────────────────────────────────────
   overscroll-behavior-y:none mata o bounce que desanda a matemática de p.
   overflow-anchor:none impede o navegador de reancorar a rolagem quando os
   quadros entram.
   NUNCA scroll-behavior:smooth aqui: dessincroniza scrollY da entrada do
   usuário e o scrub passa a perseguir um alvo que já mudou. A rolagem suave
   dos links da barra é responsabilidade do scroll.js.
   E nem html nem body podem ganhar transform, filter, perspective,
   backdrop-filter, contain:paint/strict ou will-change:transform — são os
   únicos ancestrais de #brandFlight e qualquer um deles quebraria o fixed. */
html {
  /* Reserva a calha da barra de rolagem SEMPRE. Sem isto, o overflow:hidden que
     o painel aplica remove a barra clássica e a página inteira anda 15px: medido
     .nav__cta +14.06px, o rail +15px, o poço +15px, e o backing do canvas
     768x522 -> 768x516 — ou seja, A IMAGEM SE REENQUADRA sob o leitor a cada
     abertura de painel.
     Não apareceu na validação no iPhone porque iOS e macOS usam barra sobreposta,
     que não ocupa espaço. É defeito de Windows e de Linux, e de macOS com
     "mostrar sempre" ligado. */
  scrollbar-gutter: stable;

  overscroll-behavior-y: none;
  overflow-anchor: none;
  scroll-padding-top: calc(var(--nav-h) + var(--s-6));
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background: var(--vl-bg);
  color: var(--vl-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tk-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Foco. Visível, na cor da marca, e limão quando está sobre roxo. ────── */
:focus-visible {
  outline: 2px solid var(--vl-purple);
  outline-offset: 3px;
  border-radius: 2px;
}
.palco :focus-visible { outline-color: var(--vl-lime); }

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--s-4);
  top: calc(var(--s-4) * -10);
  z-index: var(--z-loader);
  background: var(--vl-purple);
  color: var(--vl-on-purple);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--raio);
  text-decoration: none;
  transition: top var(--dur-quick) var(--ease-out);
}
.pular:focus-visible { top: var(--s-4); }

.container {
  width: var(--container-pct);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ═══ TIPOGRAFIA ════════════════════════════════════════════════════════════
   Todos os títulos no peso 500. A hierarquia é tamanho e cor, nunca peso.
   Rótulo sem ponto final, título com ponto: isso é regra de conteúdo e está
   aplicada no HTML, não aqui.
   ═════════════════════════════════════════════════════════════════════════ */
.titulo-xl, .titulo-lg, .titulo-md, .titulo-sm {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--vl-ink);
  text-wrap: balance;
}
.titulo-xl { font-size: var(--t-xl); letter-spacing: var(--tk-xl); line-height: var(--lh-xl); max-width: 14ch; }
.titulo-lg { font-size: var(--t-lg); letter-spacing: var(--tk-lg); line-height: var(--lh-lg); max-width: 16ch; }
.titulo-md { font-size: var(--t-md); letter-spacing: var(--tk-md); line-height: var(--lh-md); max-width: 20ch; }
.titulo-sm { font-size: var(--t-sm); letter-spacing: var(--tk-sm); line-height: var(--lh-sm); max-width: 24ch; }

.rotulo {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--tk-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--vl-purple);
  margin-bottom: var(--s-6);
}

.corpo {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tk-body);
  color: var(--vl-ink-soft);
  max-width: var(--leitura-max);
  margin-top: var(--s-8);
}

.legenda {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tk-caption);
  color: var(--vl-ink-mute);
  max-width: 42ch;
  margin-top: var(--s-4);
}

/* ── Dentro do palco roxo a paleta inverte, e é o ÚNICO contexto em que o
   limão existe. Escrito como regra de ancestral, e não como modificador,
   justamente para que seja impossível pintar limão sobre off-white. ─────── */
.palco { color: var(--vl-on-purple); }
.palco .titulo-xl,
.palco .titulo-lg,
.palco .titulo-md,
.palco .titulo-sm { color: var(--vl-on-purple); }
.palco .rotulo  { color: var(--vl-lime); }
.palco .corpo   { color: var(--vl-on-purple-soft); }
.palco .legenda { color: var(--vl-on-purple-soft); }

/* ── Botão. Sobre off-white ele é ROXO com texto branco: limão sobre
   off-white dá 1,04 de contraste e está proibido. Dentro do palco roxo ele
   vira limão com tinta. ──────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  margin-top: var(--s-10);
  background: var(--vl-purple);
  color: var(--vl-on-purple);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-body);
  letter-spacing: 0;
  line-height: 1.2;
  padding: var(--s-4) var(--s-8);
  border-radius: var(--raio);
  text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out);
}
.btn:hover { background: var(--vl-ink); }
.palco .btn { background: var(--vl-lime); color: var(--vl-ink); }
.palco .btn:hover { background: var(--vl-on-purple); }

/* ── Dado numérico. Só existe dentro do palco, e o limão dele está escrito
   como .palco .dado de propósito: fora de um bloco roxo o número herda a
   tinta, e não há como pintar limão sobre off-white nem por engano. Nunca
   sozinho — o rótulo colado nele carrega base de comparação e condição. ─── */
.dado {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(56px, 6.1vw, 88px);
  letter-spacing: var(--tk-xl);
  line-height: 1;
  color: var(--vl-ink);
}
.palco .dado { color: var(--vl-lime); }
.dado-rotulo {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vl-on-purple-soft);
  max-width: 22ch;
  margin-top: var(--s-2);
}

/* ── Reduções de movimento no nível de CSS. A troca ESTRUTURAL de layout é
   feita pela classe .rm no <html> (ver layout.css); esta regra existe para o
   intervalo entre a primeira pintura e o boot do JS. ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}