/* ══════════════════════════════════════════════════════════════
   Base — reset, tipografia, malha, movimento
════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-6));
  /* Habilita transição de height/width entre 0 e auto (acordeões) */
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` e não `hidden`: com hidden o overflow-y vira `auto` por tabela e o
     body passa a ser contêiner de rolagem — dá dupla barra e a rolagem para
     antes do fim declarado. `clip` recorta sem criar área rolável. */
  overflow-x: clip;
}

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

/* Todo contêiner de imagem nasce com um campo de fundo do próprio sistema.
   Assim nunca existe buraco branco enquanto o arquivo não chegou — o que
   é lido como "piscada" quando a rolagem é rápida. */
:where(figure, .item__foto, .capa__foto, .capa-i__visual--sangra) {
  background: var(--field);
}
.on-dark :where(figure, .capa__foto, .capa-i__visual--sangra) {
  background: var(--field-dark);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
figure, blockquote { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--face-display);
  font-weight: 700;
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
  text-wrap: balance;
}

::selection { background: var(--amber); color: var(--navy); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ─── Tipografia de exibição ─────────────────────────────────── */
.cover {
  font-family: var(--face-display);
  font-size: var(--t-cover);
  line-height: var(--lh-cover);
  letter-spacing: var(--track-cover);
  text-wrap: balance;
}
.display {
  font-family: var(--face-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }

/* Ênfase itálica do manual: sem face itálica real, a ênfase é de cor.
   Nada de itálico sintético — o manual proíbe distorção. */
em, .em {
  font-style: normal;
  color: var(--accent);
}
.on-dark em, .on-dark .em { color: var(--amber); }

/* Ênfase dentro do texto corrido: contraste, não peso.
   O corpo secundário roda em 76% do Azul Principal; o strong volta a 100%. */
strong, b { font-weight: 400; color: var(--ink); }
.on-dark strong, .on-dark b { color: var(--white); }

.lead {
  font-size: var(--t-body-l);
  line-height: var(--lh-text);
  color: var(--ink-76);
  max-width: 58ch;
}
.on-dark .lead { color: var(--paper-84); }

.caption {
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--ink-66);
  font-variant-numeric: var(--num-tabular);
}
.on-dark .caption { color: var(--paper-58); }

.num {
  font-family: var(--face-display);
  font-variant-numeric: var(--num-tabular);
  letter-spacing: -0.02em;
}

.muted { color: var(--ink-66); }
.on-dark .muted { color: var(--paper-58); }

/* ─── Malha ───────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.band { padding-block: var(--band-y); }
.band--tight { padding-block: calc(var(--band-y) * 0.62); }

/* Banda escura: 28% do site é Azul Principal, conforme proporção do manual */
.on-dark {
  background: var(--navy);
  color: var(--white);
}
.on-dark :where(h1, h2, h3, h4) { color: var(--white); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.on-dark .rule { border-color: var(--rule-dark); }

/* Cabeçalho de seção — sem eyebrow. Fio, título, lead.
   O índice da seção vive na margem, não no fluxo do texto. */
/* O bloco ocupa a coluna inteira para o índice poder ancorar na borda
   direita do conteúdo, longe do título. A medida de leitura fica nos
   filhos, com folga reservada para o índice quando a tela é estreita. */
.head {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-6);
  margin-bottom: var(--s-8);
  display: grid;
  gap: var(--s-3);
}
.head > * { max-width: min(68ch, 100% - 3rem); }
.on-dark .head { border-top-color: var(--rule-dark); }
.head__index {
  position: absolute;
  top: var(--s-6);
  right: 0;
  font-family: var(--face-display);
  font-size: var(--t-caption);
  font-variant-numeric: var(--num-tabular);
  letter-spacing: var(--track-caption);
  color: var(--ink-66);
}
.on-dark .head__index { color: var(--paper-58); }

/* ─── Controles ───────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-line: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.875rem;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-body);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn svg { flex: none; }
.btn--acao {            /* CTA: sempre amarelo, conforme o manual */
  --btn-bg: var(--amber);
  --btn-fg: var(--navy);
  --btn-line: var(--amber);
}
.btn--acao:hover { --btn-bg: var(--navy); --btn-fg: var(--amber); --btn-line: var(--navy); }
.btn--solida:hover { --btn-bg: transparent; --btn-fg: var(--navy); }
.btn--linha {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-line: var(--rule);
}
.btn--linha:hover { --btn-line: var(--navy); --btn-bg: var(--field); }
.on-dark .btn--linha {
  --btn-fg: var(--white);
  --btn-line: var(--rule-dark);
}
.on-dark .btn--linha:hover { --btn-line: var(--white); --btn-bg: var(--field-dark); }
.btn--g { min-height: 3.25rem; padding-inline: 1.5rem; font-size: var(--t-body-l); }

/* Link com fio — sublinhado que cresce, sem mudar de cor */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: gap var(--t-fast) var(--ease);
}
.link:hover { gap: calc(var(--s-2) + 4px); }
.on-dark .link { color: var(--amber); }

/* ─── Movimento ───────────────────────────────────────────────
   Entrada de uma vez só. `animation-timeline: view()` parece ideal, mas é
   reversível: ao subir a página o bloco já visto voltava a opacity 0 e uma
   rolagem rápida fazia a página inteira piscar. O IntersectionObserver
   marca e nunca desmarca, e dispara 240px antes de entrar em quadro — o
   bloco já chega opaco em quem rola rápido.                              */
@media (prefers-reduced-motion: no-preference) {
  [data-enter] {
    opacity: 0;
    translate: 0 var(--s-2);
    transition: opacity 300ms var(--ease-out), translate 300ms var(--ease-out);
  }
  [data-enter].is-in { opacity: 1; translate: 0 0; }
}

/* Transição entre páginas: a navegação vira troca de painel */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ─── Utilitários ─────────────────────────────────────────────── */
.pular {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  z-index: 200;
  translate: 0 -180%;
  background: var(--navy);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  transition: translate var(--t-mid) var(--ease);
}
.pular:focus-visible { translate: 0 0; }

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

[hidden] { display: none !important; }