/* ═════════════════════════════════════════════════════════════════
   RIVIO — base.css · camada 1 de 5

   O chão de TODA página: reset, elementos crus, utilitários e a entrada
   temporizada (`data-reveal`, `.line__i`) — o que anima no próprio
   relógio quando a página abre.

   ORDEM DE CARGA, e ela é parte do contrato:
     tokens → base → site → componentes → [home] → entrada → folha da página

   Entre regras de MESMO peso quem decide é essa ordem. Antes de mover
   uma regra de arquivo, rode `ferramentas/ordem-regras.mjs`: ele lista
   os pares que trocariam de vencedor. Depois, `ferramentas/sonda-cascata.mjs`
   prova que o resultado não mudou. (§ 4 das diretrizes.)
   ═════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* ── Barra de rolagem ───────────────────────────────────────────
     A NATIVA sai de cena e o `barra.js` desenha uma que FLUTUA.

     Estilizar a nativa não resolvia: ela ocupa espaço no layout, e esse
     espaço é pintado pelo fundo do DOCUMENTO, não pela seção. Ao lado de
     uma seção escura sobrava uma tira clara — trilho transparente não
     ajuda, porque o que aparece atrás é o canvas da página.

     Só se esconde a nativa quando a própria existe: a classe vem do JS.
     Sem script, a barra do sistema fica, que é o certo. */
  scrollbar-width: auto;
}

body {
  background: var(--light-01);
  color: var(--dark-02);
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: rgba(102, 148, 255, 0.22);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* OCULTO A PEDIDO, para voltar um dia: o conteúdo fica no markup e sai
   da página inteira — da tela, do leitor de tela e dos clones do
   carrossel (o `cloneNode` copia o atributo). Para reativar, é tirar o
   `data-oculto`; `grep data-oculto` lista tudo o que está guardado assim.
   Não é o `hidden`: ele perde para `display` de autor (`.qs-mural li` é
   `grid`; § 6 das diretrizes), e o `hidden` do site é ligado e desligado
   por JS em menus e listas — um `!important` global mudaria todos eles. */
[data-oculto] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   Entrance — a timed load sequence for the nav and the hero.
   Time-based, not scroll-based: it plays once, on its own clock.

   Every hidden state is scoped to `.js`, which an inline script in the
   document head sets before first paint — so with JS off, or if the
   sequence never fires, the header is simply visible.
   ───────────────────────────────────────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--ry, 14px));
}

.js.is-ready [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s var(--ease-out-expo) var(--d, 0ms),
    transform 0.95s var(--ease-out-expo) var(--d, 0ms);
}

/* Headline: one mask per rendered line, each sliding up from behind its
   own bottom edge. The padding/margin pair keeps descenders off the mask. */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.js .line__i {
  display: block;
  transform: translateY(115%);
}

/* Landing mid-page (a reload, a restored scroll position) skips the
   sequence — the entrance is for arrivals, not returns. */
.js.is-instant [data-reveal],
.js.is-instant .line__i {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
.js .line__i {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

:root {
  --dark-pad: clamp(20px, 7.778vw, 112px); /* 112px @1440 */
}

/* Enquanto carrega, a página não rola por baixo. */
.js.is-pre,
.js.is-pre body {
  overflow: hidden;
}

@media (max-width: 860px) {
  /* ── Cabeçalho de seção no celular ──────────────────────────────
     Três acertos pedidos pelo cliente, todos medidos:

     1 · a TAG desce 2px (12 → 10). O quadrado acompanha, senão ele fica
         mais alto que a letra;
     2 · o vão entre a tag e o h2 cai pela METADE (24 → 12);
     3 · o h2 vai a 22 no `--h2`, para nenhum título passar de 3 linhas.

     E a caixa do título do CTA vira LARGURA CHEIA. Ela é medida em `em`
     para travar a quebra do Figma — o que no celular significa que
     encolher a fonte encolhe a caixa junto e a quebra não muda: ele
     ficava em 5 linhas em qualquer corpo. */
  :root {
    --tag-corpo: 10px;
    --tag-quad: 8px;
    --tag-gap: 8px;
  }

  /* ── UM recuo lateral para a página inteira ─────────────────────
     Havia quatro a 375: 20 no hero, § 2, § 3, Visão e rodapé; 29,2 nas
     seções escuras (`--dark-pad`, que é `7.778vw` e só faz sentido
     enquanto a tela é larga); e 40 na § 4.6, por recuo duplo.

     No celular todos passam a ser `--gutter`. A conta de porcentagem do
     desktop continua intacta acima de 860. */
  :root {
    --dark-pad: var(--gutter);
  }
}

/* ─────────────────────────────────────────────────────────────────
   Reduced motion — everything still reads, nothing moves on its own
   ───────────────────────────────────────────────────────────────── */

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