/* ==========================================================================
   ABITA — Base
   Reset, tipografia, grade de sangria e entrada.
   Nenhum número solto: tudo vem de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTE — Montserrat variável, subconjunto latino, auto-hospedada.
   Um arquivo de 37 KB cobre 400, 500 e 600. Auto-hospedar evita duas
   resoluções de DNS e dois handshakes TLS antes do primeiro texto pintar.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonte/montserrat-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

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

body {
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  font-weight: var(--peso-normal);
  line-height: var(--lh-corpo);
  color: var(--texto-corpo);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }


/* --------------------------------------------------------------------------
   FOCO — nunca `outline: none` sem substituto.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: var(--raio);
}

.pular {
  position: fixed;
  left: var(--e-3);
  top: var(--e-3);
  z-index: var(--z-menu);
  padding: var(--e-2) var(--e-3);
  background: var(--fundo-escuro);
  color: var(--texto-inv);
  transform: translateY(-200%);
  transition: transform var(--t-rapida) var(--suave);
}

.pular:focus { transform: none; }

/* O link da marca embrulha uma imagem de 18px: sem altura minima o alvo
   de toque fica abaixo do minimo. */
.marca { display: flex; align-items: center; min-height: 2.75rem; }

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


/* --------------------------------------------------------------------------
   GRADE DE SANGRIA
   Uma grade só, no <section>, com trilhas nomeadas. O conteúdo vai para
   `centro` por padrão; `larga` estende; `cheia` sangra de borda a borda.
   É o que permite a imagem atravessar a página sem posicionamento absoluto
   e sem quebrar a leitura em nenhuma largura.
   -------------------------------------------------------------------------- */

/* Os sufixos precisam ser -start e -end: e o que faz o atalho
   `grid-column: centro` resolver sozinho para centro-start / centro-end.
   Com sufixo em portugues o nome nao resolve e o item cai numa coluna
   implicita, fora da tela. */
.tela {
  display: grid;
  grid-template-columns:
    [cheia-start] minmax(var(--goteira), 1fr)
    [larga-start] minmax(0, var(--trilha-larga))
    [centro-start] min(100% - var(--goteira) * 2 - var(--trilha-larga) * 2, var(--medida)) [centro-end]
    minmax(0, var(--trilha-larga)) [larga-end]
    minmax(var(--goteira), 1fr) [cheia-end];
}

.tela > * { grid-column: centro; }
.tela > .larga { grid-column: larga; }
.tela > .cheia { grid-column: cheia; }

.secao { padding-block: var(--secao); }
.secao--larga { padding-block: var(--secao-larga); }
.secao--curta { padding-block: var(--secao-curta); }

.escuro {
  background: var(--fundo-escuro);
  color: var(--texto-corpo-inv);
  --linha-cor: var(--linha-inv);
  --texto-cor: var(--texto-inv);
  --meta-cor: var(--texto-meta-inv);
}

.claro {
  background: var(--fundo);
  color: var(--texto-corpo);
  --linha-cor: var(--linha);
  --texto-cor: var(--texto);
  --meta-cor: var(--texto-meta);
}

.morno {
  background: var(--fundo-alt);
  color: var(--texto-corpo);
  --linha-cor: var(--linha);
  --texto-cor: var(--texto);
  --meta-cor: var(--texto-meta);
}


/* --------------------------------------------------------------------------
   TIPOGRAFIA
   Hierarquia por salto de escala, nunca por cor. --fs-mega é reservado:
   dois momentos na página inteira, e os números da prova.
   -------------------------------------------------------------------------- */

.mega, .d1, .d2, .d3 {
  color: var(--texto-cor, var(--texto));
  font-weight: var(--peso-medio);
  text-wrap: balance;
}

/* balance equilibra o comprimento das linhas, e em frase de quatro
   palavras isso vira quatro linhas curtas. No corpo maior da pagina a
   quebra tem de seguir a medida, nao a simetria. */
.mega { text-wrap: pretty; }

.mega { font-size: var(--fs-mega); line-height: var(--lh-mega);     letter-spacing: var(--ls-mega); }
.d1   { font-size: var(--fs-d1);   line-height: var(--lh-display);  letter-spacing: var(--ls-display); }
.d2   { font-size: var(--fs-d2);   line-height: var(--lh-titulo);   letter-spacing: var(--ls-titulo); }
.d3   { font-size: var(--fs-d3);   line-height: var(--lh-titulo);   letter-spacing: var(--ls-titulo); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  text-wrap: pretty;
}

/* Rótulo: caixa alta pequena com fio à esquerda. É o que dá cadência
   editorial sem gastar escala. */
.rotulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  color: var(--meta-cor, var(--texto-meta));
}

.rotulo::before {
  content: "";
  width: var(--e-5);
  height: var(--fio);
  background: currentColor;
  flex: 0 0 auto;
  opacity: 0.6;
}

.rotulo--nu::before { display: none; }

.indice {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-tabular);
  color: var(--meta-cor, var(--texto-meta));
}

.numero {
  font-size: var(--fs-num);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-weight: var(--peso-medio);
  color: var(--texto-cor, var(--texto));
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-tabular);
}

.numero--sm { font-size: var(--fs-num-sm); line-height: 0.95; letter-spacing: -0.03em; }

.meta { font-size: var(--fs-sm); color: var(--meta-cor, var(--texto-meta)); }

p { text-wrap: pretty; }
.medida { max-width: var(--medida-texto); }

.fio {
  border: 0;
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}


/* --------------------------------------------------------------------------
   ENTRADA
   Revelação por máscara: o bloco sobe por trás de uma aresta em vez de
   surgir do nada. Os tokens zeram em prefers-reduced-motion, então não há
   media query aqui. O estado oculto só existe sob `.js`: sem JavaScript
   o conteúdo aparece normalmente em vez de ficar invisível para sempre.
   -------------------------------------------------------------------------- */

.js .revela {
  opacity: 0;
  transform: translate3d(0, var(--entrada-y), 0);
  transition: opacity var(--t-entrada) var(--mola),
              transform var(--t-entrada) var(--mola);
  transition-delay: var(--atraso, 0ms);
}

.js .revela.visivel { opacity: 1; transform: none; }

/* Imagem: cortina que abre de baixo para cima. */
.js .revela-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-entrada) var(--mola);
  transition-delay: var(--atraso, 0ms);
}

.js .revela-img.visivel { clip-path: inset(0 0 0 0); }

/* Linha de texto que sobe atrás de uma aresta. */
.js .revela-linha > * {
  display: block;
  transform: translate3d(0, 100%, 0);
  transition: transform var(--t-entrada) var(--mola);
  transition-delay: var(--atraso, 0ms);
}

.js .revela-linha { overflow: hidden; }
.js .revela-linha.visivel > * { transform: none; }


/* --------------------------------------------------------------------------
   FIGURA — a imagem é objeto, não moldura. Sempre com conteúdo.
   -------------------------------------------------------------------------- */

.fig {
  position: relative;
  overflow: hidden;
  background: var(--superficie);
}

/* Descendente, não filho direto: toda figura do site embrulha a imagem
   num <picture> para servir WebP com JPG de reserva, e `.fig > img` nunca
   casava. Sem a regra, a imagem transbordava a moldura pela proporção
   natural e era cortada pelo `overflow`, em vez de recortada e centrada
   pelo `object-fit`. */
.fig picture { display: block; width: 100%; height: 100%; }

.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fig--3x2  { aspect-ratio: 3 / 2; }
.fig--4x5  { aspect-ratio: 4 / 5; }
.fig--1x1  { aspect-ratio: 1 / 1; }
.fig--16x9 { aspect-ratio: 16 / 9; }

/* Recorte de produto flutuando: sem moldura, sem fundo, com sombra longa.

   A sombra vem da `--sombra-recorte`, e não da `--sombra-peca`: aquela tem
   quarto comprimento, o espalhamento, e `drop-shadow()` aceita no máximo
   três. Com quatro o navegador descarta o filtro inteiro em silêncio, e as
   peças ficam sem sombra nenhuma sem que nada apareça no console. */
.peca {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--sombra-recorte));
}