/* Escore de Cálcio · páginas de documento · herda tokens, nav, botões e rodapé de v2.css */

.hero--doc {
  background: var(--ink);
  color: rgba(244, 239, 227, .84);
  padding: clamp(96px, 12vh, 140px) 0 clamp(48px, 6vh, 76px);
}
.hero--doc h1 {
  color: var(--ink-on);
  font-size: clamp(34px, 4.6vw, 62px);
  max-width: 20ch;
  margin-top: 18px;
}
.hero--doc .lead {
  color: rgba(244, 239, 227, .84);
  font-size: var(--text-body-lg);
  margin-top: 20px;
  max-width: 56ch;
}
.doc-migalha { font-size: var(--text-micro); color: var(--mint); }
.doc-migalha a { color: var(--mint); text-decoration: none; border-bottom: 1px solid rgba(169, 201, 164, .45); }

.doc {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 88px);
}
.doc-sec { display: grid; gap: 16px; }
.doc-sec h2 { max-width: 26ch; }
.doc-sec p { color: var(--ink-2); max-width: 66ch; }
.doc-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  background: var(--paper-2);
  border-radius: var(--radius-card);
  overflow: clip;
}
.tabela caption { text-align: left; font-size: var(--text-micro); color: var(--muted); padding-bottom: 10px; }
.tabela th {
  text-align: left; font-weight: 600; color: var(--ink);
  padding: 14px 16px; background: var(--band);
  font-size: var(--text-micro);
}
.tabela td { padding: 14px 16px; border-top: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
.tabela td.num { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

.doc-volta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--text-small); }
.doc-volta a { color: var(--accent-text); }

.destaque {
  background: var(--band);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid;
  gap: 8px;
}
.destaque__num { font-family: var(--font-display); font-size: clamp(38px, 4vw, 54px); line-height: 1; color: var(--ink); }
.destaque__text { color: var(--ink-2); }

@media (max-width: 720px) {
  .tabela { font-size: var(--text-micro); }
  .tabela th, .tabela td { padding: 10px 10px; }
}

.nav__links a[aria-current="page"] { color: var(--ink); background: rgba(29, 59, 42, .07); }