/* ============================================================
   Stage Up · site institucional
   Folha única compartilhada pelas três páginas do site.

   Camada 1 primitivos · Camada 2 semânticos · Camada 3 componente.
   Os tokens abaixo são cópia literal da seção 11 do design system da casa:
   C:\Users\rapha\Documents\EMPRESA\agencia\design-system\design-system.md

   Regra desta folha: nenhuma cor, nenhum tamanho de texto e nenhum
   espaçamento fora dos tokens. Valor novo aqui é erro, não escolha de arte.
   ============================================================ */

/* ---------- Fonte auto-hospedada (sem CDN, sem Google Fonts) ---------- */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/HankenGrotesk-Variable-latin.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/HankenGrotesk-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ========== CAMADA 1: PRIMITIVOS ========== */

  /* Medidos por contagem de pixel no logo real */
  --su-graphite: #373643;   /* 43,4% da área com tinta na versão positiva */
  --su-yellow:   #FFDE59;   /* 25,8% da área com tinta nas duas versões   */
  --su-white:    #FFFFFF;   /* 61,1% da área com tinta na versão invertida */

  /* Derivados por composição alfa sobre o grafite (tema escuro) */
  --su-graphite-raised: #43424E;  /* branco 6%  sobre grafite */
  --su-graphite-sunken: #282730;  /* preto  28% sobre grafite */
  --su-line-dark-1:     #53525D;  /* branco 14% sobre grafite */
  --su-line-dark-2:     #8B8A92;  /* branco 42% sobre grafite -> 3,47:1 */
  --su-ink-dark-1:      #F5F5F6;  /* branco 95% sobre grafite -> 10,88:1 */
  --su-ink-dark-2:      #D3D3D6;  /* branco 78% sobre grafite -> 7,94:1 */
  --su-ink-dark-3:      #BBBBBF;  /* branco 66% sobre grafite -> 6,20:1 */

  /* Derivados por composição alfa sobre o branco (seção clara) */
  --su-paper:            #F7F7F7; /* grafite 4%  sobre branco */
  --su-line-light-1:     #E3E3E5; /* grafite 14% sobre branco */
  --su-line-light-2:     #919098; /* grafite 55% sobre branco -> 3,16:1 */
  --su-ink-light-2:      #63626C; /* grafite 78% sobre branco -> 6,01:1 */
  --su-ink-light-3:      #6F6E78; /* grafite 72% sobre branco -> 5,03:1
                                     (66% daria 4,24:1 e reprovaria AA) */

  /* Acento e estados */
  --su-yellow-hover: #E0C34E;     /* preto 12% sobre o amarelo -> 6,82:1 com grafite */
  --su-green-light-on-dark: #5FD79A;  /* 6,59:1 sobre grafite */
  --su-amber-on-dark:       #FF9F45;  /* 5,81:1 sobre grafite */
  --su-red-light-on-dark:   #FF8F8F;  /* 5,41:1 sobre grafite */
  --su-green-dark-on-light: #0E7A4E;  /* 5,37:1 sobre branco  */
  --su-amber-dark-on-light: #A34E06;  /* 5,75:1 sobre branco  */
  --su-red-dark-on-light:   #B3261E;  /* 6,54:1 sobre branco  */

  /* Tipografia, espaço, forma */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-bold: 800;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --measure: 62ch;
  --grid-gutter: var(--space-lg);

  /* ========== CAMADA 2: SEMÂNTICOS (tema escuro, o padrão) ========== */
  --color-bg: var(--su-graphite);
  --color-bg-raised: var(--su-graphite-raised);
  --color-bg-sunken: var(--su-graphite-sunken);
  --color-text: var(--su-ink-dark-1);
  --color-text-secondary: var(--su-ink-dark-2);
  --color-text-muted: var(--su-ink-dark-3);
  --color-border: var(--su-line-dark-1);
  --color-border-strong: var(--su-line-dark-2);

  --color-accent: var(--su-yellow);
  --color-accent-hover: var(--su-yellow-hover);
  --color-accent-ink: var(--su-graphite);   /* ÚNICA cor de texto sobre o amarelo */

  --color-success: var(--su-green-light-on-dark);
  --color-warning: var(--su-amber-on-dark);
  --color-danger: var(--su-red-light-on-dark);

  --focus-inner: var(--su-white);
  --focus-outer: var(--su-graphite);

  --shadow-none: none;
  --shadow-overlay: 0 24px 48px -12px rgba(20, 19, 26, 0.55);
  --shadow-focus: 0 0 0 3px var(--focus-inner), 0 0 0 6px var(--focus-outer);

  /* Escala tipográfica: MOBILE é o padrão (valores exatos, nunca clamp) */
  --fs-display: 48px;   --lh-display: 1.08;  --ls-display: -0.02em;
  --fs-h2: 30px;        --lh-h2: 1.18;       --ls-h2: -0.015em;
  --fs-h3: 21px;        --lh-h3: 1.28;       --ls-h3: -0.01em;
  --fs-stat: 40px;      --lh-stat: 1;        --ls-stat: -0.02em;
  --fs-subhead: 18px;   --lh-subhead: 1.5;
  --fs-body: 16px;      --lh-body: 1.6;
  --fs-label: 12px;     --lh-label: 1.2;     --ls-label: 0.12em;
  --fs-caption: 13px;   --lh-caption: 1.45;
  --fs-button: 17px;    --lh-button: 1;      --ls-button: 0.01em;

  --section-y: var(--space-3xl);   /* 64px no mobile */
  --page-gutter: 20px;
  --btn-height: 48px;
}

/* Desktop: um ponto fixo, sem faixa (C-25 proíbe faixa como valor operacional) */
@media (min-width: 768px) {
  :root {
    --fs-display: 64px;  --lh-display: 1.05;
    --fs-h2: 40px;       --lh-h2: 1.15;
    --fs-h3: 24px;       --lh-h3: 1.25;
    --fs-stat: 56px;
    --fs-subhead: 20px;
    --fs-body: 17px;
    --fs-label: 13px;

    --section-y: var(--space-5xl);  /* 128px no desktop */
    --page-gutter: 48px;
    --btn-height: 52px;
  }
}

/* ---------- Redirecionamento da camada semântica na seção clara ----------
   Não é uma segunda paleta: são os mesmos tokens apontando para outros
   primitivos. O acento e a tinta do acento NÃO mudam. ---------------------- */
.surface-light {
  --color-bg: var(--su-white);
  --color-bg-raised: var(--su-paper);
  --color-bg-sunken: var(--su-paper);
  --color-text: var(--su-graphite);
  --color-text-secondary: var(--su-ink-light-2);
  --color-text-muted: var(--su-ink-light-3);
  --color-border: var(--su-line-light-1);
  --color-border-strong: var(--su-line-light-2);

  --color-success: var(--su-green-dark-on-light);
  --color-warning: var(--su-amber-dark-on-light);
  --color-danger: var(--su-red-dark-on-light);

  /* ---------------------------------------------------------------------
     O acento NÃO atravessa para a seção clara.
     Exceção AA 1 da seção 1.7 do design system: o amarelo #FFDE59 nunca é
     cor de texto sobre fundo claro. Medido: 1,33:1 contra branco e 1,24:1
     contra --surface-paper, reprova em qualquer tamanho.
     Então, no claro, o eyebrow e o número de passo caem para o neutro de
     baixo contraste (5,03:1) e o marcador de lista cai para grafite
     (11,86:1). É o que o contrato de estilo já previa na seção 2:
     "eyebrow ... na cor de acento OU em neutro de baixo contraste".
     Os papéis 3 e 5 do amarelo (botão e faixa de fechamento) continuam
     intactos, porque neles o amarelo é preenchimento e não texto.
     --------------------------------------------------------------------- */
  --eyebrow-color: var(--color-text-muted);
  --marker-color: var(--color-text);
}

/* ========== CAMADA 3: COMPONENTE ========== */
:root {
  --btn-primary-bg: var(--color-accent);
  --btn-primary-bg-hover: var(--color-accent-hover);
  --btn-primary-text: var(--color-accent-ink);  /* nunca branco: 1,33:1 */
  --btn-primary-radius: var(--radius-pill);
  --btn-primary-padding-x: var(--space-xl);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--color-border-strong);
  --btn-secondary-text: var(--color-text);

  --field-bg: var(--color-bg-raised);
  --field-border: var(--color-border-strong);
  --field-radius: var(--radius-sm);
  --field-error: var(--color-danger);

  --eyebrow-color: var(--color-accent);
  --marker-color: var(--color-accent);

  --closing-band-bg: var(--color-accent);
  --closing-band-text: var(--color-accent-ink);

  /* Altura do cabeçalho: não é um valor de arte, é a conta do logo.
     240px de largura (mínimo da seção 3.3 do design system) sobre a
     proporção 450x200 do arquivo dá 106,67px de altura, mais --space-sm
     em cima e embaixo e mais 1px de divisor: 131,67px, arredondado. */
  --header-height: 132px;
}

/* ============================================================
   Reset mínimo
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Link de âncora não pode largar o título embaixo do cabeçalho fixo. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-lg); }

@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--header-height) + var(--space-lg)); }
}

body,
h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

table { border-collapse: collapse; }

/* ============================================================
   Base (seção 11 do design system)
   ============================================================ */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, .display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
}
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-bold); }

p { max-width: var(--measure); color: var(--color-text-secondary); }

/* Link no corpo: sublinhado, NUNCA amarelo (seria um sexto papel do acento) */
a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.eyebrow {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--eyebrow-color);
}

.stat {
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  letter-spacing: var(--ls-stat);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  max-width: none;
}

.section { padding-block: var(--section-y); background: var(--color-bg); color: var(--color-text); }
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--page-gutter); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-height);
  padding-inline: var(--btn-primary-padding-x);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0;
  border-radius: var(--btn-primary-radius);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-button);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); text-decoration: none; }

:where(a, button, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Utilitários
   ============================================================ */

/* Texto só para leitor de tela, visível ao receber foco (link de atalho) */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: var(--fw-bold);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }

.measure-full { max-width: none; }

/* Marcador de lista na cor de acento (papel 4 do amarelo). É um quadrado
   desenhado em CSS, não um caractere, para não depender de glifo da fonte. */
.list-marked > li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--color-text-secondary);
}
.list-marked > li + li { margin-top: var(--space-md); }
.list-marked > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((var(--fs-body) * var(--lh-body) - var(--space-xs)) / 2);
  width: var(--space-xs);
  height: var(--space-xs);
  background: var(--marker-color);
}

/* ============================================================
   Cabeçalho
   Nota de implementação: o logo só existe na versão COM tagline, e o design
   system fixa 240px como largura mínima dessa versão (secao 3.3). Por isso
   o cabeçalho é alto. Abaixo de 1024px ele é estático e empilhado; a partir
   de 1024px ele vira barra fixa em uma linha. Quando existir a versão sem
   tagline (pendência 2 do design system), o mínimo cai para 120px e o
   cabeçalho encolhe sem mexer em mais nada.
   ============================================================ */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.brand { display: inline-block; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 240px; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.site-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--fs-body);
}
.site-nav a:hover { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; }

@media (min-width: 1024px) {
  .site-header { position: sticky; top: 0; z-index: 20; }
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-block: var(--space-sm);
  }
  .site-nav { margin-left: auto; }
}

/* ============================================================
   Dobra (seção 1) e Achados (seção 2)
   ============================================================ */
.hero { padding-block: var(--section-y); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-4xl);
    align-items: start;
  }
}

.hero h1 { margin-top: var(--space-md); }
.hero__subhead {
  margin-top: var(--space-lg);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--color-text-secondary);
}
.hero__cta { margin-top: var(--space-xl); }

/* Microcopia de atrito abaixo do botão */
.microcopy {
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
}

/* A palavra em amarelo da headline: papel 2 do acento, uma vez por página */
.accent-word { color: var(--color-accent); }

.achados__list { margin-top: var(--space-xl); }
.achado { padding-block: var(--space-lg); }
.achado + .achado { border-top: 1px solid var(--color-border); }
.achado p { margin-top: var(--space-xs); color: var(--color-text-secondary); }

.achados__note {
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
}

/* ============================================================
   Blocos de seção genéricos
   ============================================================ */
.section__head { max-width: var(--measure); }
.section__head h2 { margin-top: var(--space-md); }
.section__head p { margin-top: var(--space-md); }

.section__cta { margin-top: var(--space-2xl); }

/* ============================================================
   Método (seção 3)
   ============================================================ */
.steps { margin-top: var(--space-2xl); display: grid; gap: var(--space-2xl); }

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4xl);
  }
}

/* O número do passo segue o eyebrow: acento no escuro, neutro de baixo
   contraste no claro. Nunca amarelo sobre fundo claro (1,33:1). */
.step__num {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--eyebrow-color);
}
.step h3 { margin-top: var(--space-xs); }
.step p { margin-top: var(--space-sm); }

/* ============================================================
   Painel de demonstração (seção 4)
   Construído em HTML e CSS puro. Os números são ilustrativos e a página
   declara isso em dois lugares: dentro do painel e na legenda abaixo dele.
   ============================================================ */
.panel-figure { margin-top: var(--space-2xl); }

.panel {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-none);
  max-width: 640px;
}

.panel__flag {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  max-width: none;
}

.panel__label {
  margin-top: var(--space-xl);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
  max-width: none;
}
.panel__metric { margin-top: var(--space-2xs); }
.panel__compare {
  margin-top: var(--space-xs);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
  max-width: none;
}

.panel__rows { margin-top: var(--space-xl); }
.panel__row + .panel__row { margin-top: var(--space-md); }
.panel__row-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text);
}
.panel__row-value { font-variant-numeric: tabular-nums; }
.panel__bar {
  margin-top: var(--space-2xs);
  height: var(--space-xs);
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.panel__bar span {
  display: block;
  height: 100%;
  background: var(--color-text);
  border-radius: var(--radius-pill);
}
.panel__row--over .panel__bar span { background: var(--color-warning); }
.panel__row-note {
  margin-top: var(--space-2xs);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-warning);
  max-width: none;
}

.panel-figure figcaption {
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* ============================================================
   Limites (seção 5)
   ============================================================ */
.limits { margin-top: var(--space-2xl); display: grid; gap: var(--space-2xl); }

@media (min-width: 768px) {
  .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4xl); }
}

.limits__col { border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }
.limits__col p { margin-top: var(--space-sm); }

/* ============================================================
   Para quem (seção 6) e Conduta (seção 8)
   ============================================================ */
.section__list { margin-top: var(--space-2xl); max-width: var(--measure); }
.section__outro { margin-top: var(--space-xl); }

/* ============================================================
   Fechamento (seção 9): faixa amarela, papel 5 do acento.
   Uma por página, e o único momento em que o amarelo preenche área grande.
   Dentro dela, a tinta é sempre grafite.
   ============================================================ */
.closing-band {
  background: var(--closing-band-bg);
  --color-text: var(--closing-band-text);
  --color-text-secondary: var(--closing-band-text);
  --color-text-muted: var(--closing-band-text);
  color: var(--color-text);
  padding-block: var(--section-y);
}

.closing-band h2 { max-width: var(--measure); }
.closing-band p { margin-top: var(--space-md); }
.closing-band .btn-primary {
  margin-top: var(--space-xl);
  background: var(--color-accent-ink);
  color: var(--su-white);
}
.closing-band .btn-primary:hover { background: var(--su-graphite-sunken); }
.closing-band .microcopy { margin-top: var(--space-sm); }

/* ============================================================
   Rodapé (seção 10)
   ============================================================ */
.site-footer {
  background: var(--color-bg-sunken);
  color: var(--color-text);
  padding-block: var(--space-3xl);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-4xl);
    align-items: start;
  }
}

.site-footer__id { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-muted); }
.site-footer__id + .site-footer__id { margin-top: var(--space-xs); }

/* O logo do rodapé usa a mesma largura mínima do cabeçalho (240px, seção 3.3
   do design system). Sem esta regra ele renderiza nos 450px do arquivo. */
.site-footer__grid img { width: 240px; }

.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.site-footer__links a { color: var(--color-text-secondary); }
.site-footer__links a:hover { color: var(--color-text); }

/* Pendência aberta, renderizada de propósito para impedir publicação
   distraída. Nenhum dado foi inventado no lugar dela. */
.pending { color: var(--color-text-muted); }

/* ============================================================
   Páginas de leitura (política de privacidade e exclusão de dados)
   ============================================================ */
.doc {
  background: var(--color-bg);
  color: var(--color-text);
  padding-block: var(--section-y);
}

.doc__inner { max-width: 760px; margin-inline: auto; padding-inline: var(--page-gutter); }

.doc h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.doc__lead { margin-top: var(--space-md); font-size: var(--fs-subhead); line-height: var(--lh-subhead); }

.doc__meta {
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
}

.toc { margin-top: var(--space-2xl); border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }
.toc h2 {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.toc ol {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-xs);
  counter-reset: toc;
}
@media (min-width: 768px) {
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}
.toc li { counter-increment: toc; }
/* A numeração do índice acompanha a numeração das seções do texto (1 a 15),
   sem zero à esquerda: índice e título têm que dizer o mesmo número. */
.toc li::before {
  content: counter(toc) '. ';
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.toc a { color: var(--color-text); }

.doc section { margin-top: var(--space-2xl); }
.doc h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.doc h3 { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; margin-top: var(--space-lg); }
.doc p { margin-top: var(--space-md); }
.doc ul { margin-top: var(--space-md); }
.doc dl { margin-top: var(--space-md); }
.doc dt { font-weight: var(--fw-bold); margin-top: var(--space-md); }
.doc dd { color: var(--color-text-secondary); max-width: var(--measure); }
.doc ol.doc__steps { margin-top: var(--space-md); counter-reset: step; }
.doc ol.doc__steps > li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-xl);
  color: var(--color-text-secondary);
}
.doc ol.doc__steps > li + li { margin-top: var(--space-md); }
.doc ol.doc__steps > li::before {
  content: counter(step) '.';
  position: absolute;
  left: 0;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.table-scroll { margin-top: var(--space-md); overflow-x: auto; }
.doc table { width: 100%; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.doc th, .doc td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.doc th { font-weight: var(--fw-bold); color: var(--color-text); }
.doc td { color: var(--color-text-secondary); }

.doc__callout {
  margin-top: var(--space-lg);
  background: var(--color-bg-raised);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.doc__callout p { margin-top: 0; }
.doc__callout p + p { margin-top: var(--space-md); }

.doc__back { margin-top: var(--space-2xl); border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }

@media print {
  .site-header, .skip-link, .doc__back { display: none; }
  .doc, .site-footer { padding-block: 0; }
  .toc { break-after: page; }
  .doc section, .doc table, .doc__callout { break-inside: avoid; }
}