/* ==========================================================================
   Datapex BI — site institucional V1

   Consome os tokens de tokens.css (gerado de brand/assets/tokens.json, que é
   a fonte de verdade) e implementa brand/system/COMPONENT_CONTRACTS.md.
   Nenhum valor de cor, raio, espaçamento ou tipografia é escrito à mão aqui:
   valor solto no CSS é a segunda verdade que o repositório proíbe.

   Ordem: reset · tipografia · layout · marca · navegação · componentes ·
          seções · mockups de produto · formulário · rodapé · responsivo.
   ========================================================================== */

/* Inter, hospedada no proprio dominio. O token --font-system pede Inter e sem
   isto o site cairia em Arial, saindo do Brand System aprovado.
   font-display: swap - o texto aparece na fonte de sistema e troca quando a
   Inter chega; esperar a fonte deixaria a pagina em branco na primeira visita. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-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;
}

/* ─────────────────────────────────────────────────── reset e fundamentos */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-background-default);
  color: var(--color-text-primary);
  font-family: var(--font-system);
  font-size: var(--type-body-size);
  line-height: 1.6;
  font-weight: var(--type-body-weight);
  /* Números de KPI e tabela alinham em coluna — exigência do contrato de
     componentes. Aplicado no corpo porque a página inteira é numérica em
     vários pontos, e ligar caso a caso deixa um esquecido. */
  font-variant-numeric: tabular-nums lining-nums;
}

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

/* Foco de 2 px com offset 4 px, contraste ≥3:1 — contrato, seção
   "Fundamentos compartilhados". Vale para tudo que recebe teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-width-focus) solid var(--color-action-focus);
  outline-offset: 4px;
  border-radius: var(--radius-small);
}

/* Pular para o conteúdo: primeiro alvo do teclado em toda página. */
.pular {
  position: absolute; left: var(--spacing-control); top: calc(var(--spacing-control) * -4);
  z-index: var(--zIndex-toast);
  background: var(--color-surface-default); color: var(--color-text-primary);
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-small);
  padding: var(--spacing-inline) var(--spacing-control);
  font-weight: 600; text-decoration: none;
  transition: top var(--motion-fast) var(--ease-standard);
}
.pular:focus { top: var(--spacing-control); }

/* ───────────────────────────────────────────────────────────── tipografia */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--type-h2-weight);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: var(--type-h1-mobile);      font-weight: var(--type-h1-weight); letter-spacing: -0.035em; }
h2 { font-size: var(--type-h2-mobile); }
h3 { font-size: var(--type-h3-mobile);      font-weight: var(--type-h3-weight); letter-spacing: -0.02em; }
h4 { font-size: var(--type-h4-mobile);      font-weight: var(--type-h4-weight); letter-spacing: -0.01em; }

p { margin: 0; }

/* Texto corrido para em 68ch — contrato, seção "Grid". Acima disso a linha
   fica longa demais para o olho voltar ao início certo. */
.prosa { max-width: 68ch; }

.olho {
  font-size: var(--type-label-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-inline);
}
/* O olho ganha uma marca Oxblood curta — assinatura, não superfície. */
.olho--marca { display: flex; align-items: center; gap: var(--spacing-related); }
.olho--marca::before {
  content: ''; inline-size: 20px; block-size: var(--border-width-strong);
  background: var(--color-brand-signature); flex: 0 0 auto;
}

.chamada  { font-size: var(--type-body-size); color: var(--color-text-secondary); line-height: 1.6; }
.discreto { font-size: var(--type-caption-size); color: var(--color-text-muted); }

a { color: var(--color-identity-link); text-underline-offset: 3px; }
a:hover { color: var(--color-identity-hover); }

/* ──────────────────────────────────────────────────────────────── layout */
.faixa { inline-size: 100%; }

/* FAIXA ESCURA É REGIÃO DE TEMA ESCURO, não uma cor aplicada por cima.
   O HTML marca data-mode="dark" nela, o que troca o conjunto inteiro de
   tokens ali dentro — texto, superfície, borda, botão e o Oxblood readable.
   Antes eu pintava Carbon e corrigia cada tinta à mão com style inline; o
   readable continuava resolvendo para o Oxblood institucional do tema claro
   e o olho da seção saía em 1,54:1 sobre Carbon. */
.faixa--escura {
  background: var(--color-brand-carbon);
  color: var(--color-text-primary);
}
.faixa--suave { background: var(--color-surface-subtle); }
.faixa--papel { background: var(--color-surface-default); }

/* Telas densas até 1600 px — contrato. O conteúdo institucional usa uma
   medida mais estreita para não virar parede de texto. */
.envelope {
  inline-size: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: var(--grid-mobile-margin);
}
.envelope--largo { inline-size: min(100%, 1600px); }

.secao { padding-block: var(--spacing-region); }
.secao--alta { padding-block: var(--spacing-chapter); }

.pilha        { display: flex; flex-direction: column; gap: var(--spacing-control); }
.pilha--solta { gap: var(--spacing-sectionCompact); }
.pilha--justa { gap: var(--spacing-related); }

.grade {
  display: grid; gap: var(--spacing-card);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grade--dupla { grid-template-columns: 1fr; }

/* ──────────────────────────────────────────────────────── marca e cabeçalho */
/* Respiro mínimo 0,5 H a partir do contorno — Brand System. A 32 px de altura
   total isso dá ~12 px, arredondado para o token de 12 px. */
.marca { display: inline-flex; align-items: center; padding: var(--spacing-inline); margin: calc(var(--spacing-inline) * -1); }
.marca img { block-size: 32px; inline-size: auto; display: block; }   /* mínimo digital do wordmark */
.marca--rodape img { block-size: 40px; }

.cabecalho {
  position: sticky; top: 0; z-index: var(--zIndex-sticky);
  background: var(--color-surface-default);
  border-block-end: var(--border-width-default) solid var(--color-border-default);
}
.cabecalho__linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-control); min-block-size: 64px;
}

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--spacing-micro); list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--spacing-inline);
  font-size: var(--type-navigation-size); font-weight: var(--type-navigation-weight);
  color: var(--color-text-secondary); text-decoration: none;
  border-radius: var(--radius-small);
  transition: color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard);
}
.nav a:hover { color: var(--color-text-primary); background: var(--color-surface-subtle); }
/* O CTA DENTRO DO MENU PRECISA VENCER A REGRA DO MENU.
   ".nav a" é 0-1-1 e vencia ".botao--primario", 0-1-0: o CTA do cabeçalho
   ficava com tinta cinza sobre fundo quase preto, 1,83:1. Aqui a regra do
   botão volta com a mesma especificidade da regra que a atropelava. */
.nav a.botao--primario { color: var(--color-action-primary-foreground); }
.nav a.botao--primario:hover { color: var(--color-action-primary-foreground); background: var(--color-action-primary-hover); }
.nav a.botao--secundario { color: var(--color-action-secondary-foreground); }
/* Página atual não depende só de cor: ganha peso e um traço sob o rótulo. */
.nav a[aria-current="page"] {
  color: var(--color-text-primary); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-brand-signature);
}

.menu-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-related);
  min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--spacing-inline);
  background: var(--color-surface-default); color: var(--color-text-primary);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-button);
  font: inherit; font-size: var(--type-navigation-size); font-weight: 600; cursor: pointer;
}
.menu-painel { display: none; border-block-start: var(--border-width-default) solid var(--color-border-default); }
.menu-painel[data-aberto="true"] { display: block; }
.menu-painel ul { list-style: none; margin: 0; padding: var(--spacing-related) 0 var(--spacing-control); }
.menu-painel a {
  display: flex; align-items: center; min-block-size: 48px;
  padding-inline: var(--spacing-micro);
  font-size: var(--type-body-size); font-weight: 500;
  color: var(--color-text-primary); text-decoration: none;
}
.menu-painel a[aria-current="page"] { color: var(--color-identity-main); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────── botões */
/* Altura 44, padding 10×16, gap 8, peso 600 — contrato, seção "Botões". */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-related);
  min-block-size: 44px; padding: 10px var(--spacing-control);
  border-radius: var(--radius-button); border: var(--border-width-default) solid transparent;
  font: inherit; font-size: var(--type-navigation-size); font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.botao svg { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }

.botao--primario {
  background: var(--color-action-primary-default);
  color: var(--color-action-primary-foreground);
}
.botao--primario:hover  { background: var(--color-action-primary-hover); color: var(--color-action-primary-foreground); }
.botao--primario:active { background: var(--color-action-primary-active); }

.botao--secundario {
  background: var(--color-action-secondary-default);
  color: var(--color-action-secondary-foreground);
  border-color: var(--color-border-strong);
}
.botao--secundario:hover  { background: var(--color-surface-subtle); color: var(--color-action-secondary-foreground); }
.botao--secundario:active { background: var(--color-surface-elevated); }

/* Nenhuma inversão manual aqui: dentro de data-mode="dark" o próprio token
   action.primary já vira claro sobre escuro. O secundário só precisa ficar
   transparente, porque em superfície de marca ele não deve virar cartão. */
.faixa--escura .botao--secundario,
.rodape .botao--secundario {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.faixa--escura .botao--secundario:hover { background: var(--color-surface-default); color: var(--color-text-primary); }

.botao--fantasma { background: transparent; color: var(--color-text-primary); }
.botao--fantasma:hover { background: var(--color-surface-subtle); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--spacing-inline); }

/* Link que e ACAO ISOLADA - sozinho no seu paragrafo, como o e-mail de contato
   - precisa dos 44 px. A excecao de alvo pequeno vale para link no meio de uma
   frase, onde aumentar a area quebraria o texto; nao vale aqui. */
.link-alvo {
  display: inline-flex; align-items: center;
  min-block-size: 44px;
  padding-inline: var(--spacing-related);
  margin-inline: calc(var(--spacing-related) * -1);
  border-radius: var(--radius-small);
  font-weight: 600;
}
.link-alvo:hover { background: var(--color-surface-subtle); }

/* ────────────────────────────────────────────────────────────────── cards */
/* Padding 24, border.default, SEM sombra por padrão — contrato. */
.cartao {
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--spacing-card);
  display: flex; flex-direction: column; gap: var(--spacing-inline);
}
.faixa--escura .cartao {
  background: var(--color-surface-default);
  border-color: var(--color-border-default);
}

/* Card de rota comercial: o único que ganha assinatura Oxblood, porque é a
   decisão que a Home existe para provocar. */
.cartao--rota { gap: var(--spacing-control); }
.cartao--rota .cartao__topo {
  display: flex; align-items: center; gap: var(--spacing-inline);
  padding-block-end: var(--spacing-inline);
  border-block-end: var(--border-width-default) solid var(--color-border-default);
}
.cartao--rota .cartao__selo {
  display: inline-flex; align-items: center;
  padding: var(--spacing-compact) var(--spacing-related);
  background: var(--color-identity-main); color: var(--color-identity-paper);
  border-radius: var(--radius-tag);
  font-size: var(--type-caption-size); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.faixa--escura .cartao--rota .cartao__topo { border-color: var(--color-border-default); }
.faixa--escura .cartao--rota .cartao__selo {
  /* Sobre Carbon, Oxblood institucional não tem contraste. No tema escuro
     identity.readable já resolve para #B36F7B, que passa como contorno. */
  background: transparent; color: var(--color-identity-readable);
  border: var(--border-width-default) solid var(--color-identity-readable);
}

.lista-marcada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-inline); }
.lista-marcada li { display: flex; gap: var(--spacing-inline); align-items: flex-start; line-height: 1.55; }
.lista-marcada li::before {
  content: ''; flex: 0 0 auto; inline-size: 6px; block-size: 6px; margin-block-start: 9px;
  background: var(--color-brand-signature); border-radius: 50%;
}
/* brand.signature é #542E38 nos DOIS temas — sobre Carbon dá 1,5:1 e o
   marcador some. No escuro quem serve é identity.readable (#B36F7B, 4,6:1),
   acima do piso de 3:1 exigido para elemento gráfico. */
.faixa--escura .lista-marcada li::before,
.faixa--escura .olho--marca::before,
.rodape .olho--marca::before { background: var(--color-identity-readable); }

/* Passos numerados: a numeração existe porque a ordem CARREGA informação —
   compreender vem antes de construir. Não é ornamento. */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-card);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); counter-reset: passo; }
.passos li { counter-increment: passo; display: flex; flex-direction: column; gap: var(--spacing-related);
  padding-block-start: var(--spacing-control);
  border-block-start: var(--border-width-strong) solid var(--color-border-default); }
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-size: var(--type-caption-size); font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-brand-signature);
}
.passos li:first-child { border-block-start-color: var(--color-brand-signature); }
.faixa--escura .passos li { border-block-start-color: var(--color-border-default); }
.faixa--escura .passos li::before { color: var(--color-identity-readable); }
.faixa--escura .passos li:first-child { border-block-start-color: var(--color-identity-readable); }
.passos h3 { font-size: var(--type-h4-size); }

/* ────────────────────────────────────────── mockups de produto (ilustrativos)
   PRODUCT-INSPIRED, NEVER PRODUCT-EXTRACTED.
   Nada aqui sai de ambiente real: são componentes construídos para o site,
   com dados e nomes fictícios. Toda peça carrega rótulo dizendo isso.
   Seguem brand/system/ANALYTICAL_CONTRACT.md: rótulo fora da barra, sem
   depender de hover, tabela alternativa, meta com traço próprio.          */
.produto {
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevation2);
  overflow: hidden;
}
.produto__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline);
  padding: var(--spacing-inline) var(--spacing-control);
  background: var(--color-surface-subtle);
  border-block-end: var(--border-width-default) solid var(--color-border-default);
}
.produto__titulo { font-size: var(--type-label-size); font-weight: 600; color: var(--color-text-primary); }
.produto__filtros { display: flex; flex-wrap: wrap; gap: var(--spacing-related); }
.produto__filtro {
  display: inline-flex; align-items: center; gap: var(--spacing-compact);
  padding: var(--spacing-compact) var(--spacing-related);
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-tag);
  font-size: var(--type-caption-size); color: var(--color-text-secondary);
}
.produto__corpo { padding: var(--spacing-control); display: flex; flex-direction: column; gap: var(--spacing-control); }

.kpis { display: grid; gap: var(--spacing-inline); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.kpi {
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-small);
  padding: var(--spacing-inline);
  display: flex; flex-direction: column; gap: var(--spacing-compact);
}
/* Nome, valor, unidade, período e comparação — o contrato proíbe número solto. */
.kpi__nome  { font-size: var(--type-caption-size); color: var(--color-text-secondary); }
.kpi__valor { font-size: var(--type-h3-size); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.kpi__nota  { font-size: var(--type-caption-size); color: var(--color-text-muted); }
.kpi__delta { font-size: var(--type-caption-size); font-weight: 600; }
.kpi__delta--positivo { color: var(--color-semantic-success-foreground); }
.kpi__delta--negativo { color: var(--color-semantic-danger-foreground); }

.grafico { display: flex; flex-direction: column; gap: var(--spacing-related); }
.grafico__legenda { display: flex; flex-wrap: wrap; gap: var(--spacing-control); font-size: var(--type-caption-size); color: var(--color-text-secondary); }
.grafico__chave { display: inline-flex; align-items: center; gap: var(--spacing-related); }
.grafico__amostra { inline-size: 12px; block-size: 12px; border-radius: 2px; flex: 0 0 auto; }
/* Gráfico de eixos mantém 480 px e rola dentro do próprio contêiner: a página
   nunca rola de lado (contrato analítico). */
.grafico__rolagem { overflow-x: auto; }
.grafico__rolagem > svg { min-inline-size: 480px; display: block; }

.tabela-caixa { overflow-x: auto; }
.tabela { inline-size: 100%; min-inline-size: 480px; border-collapse: collapse; font-size: var(--type-table-size); }
.tabela caption { text-align: start; font-size: var(--type-caption-size); color: var(--color-text-muted); padding-block-end: var(--spacing-related); }
.tabela th, .tabela td { padding: var(--spacing-related) var(--spacing-inline); border-block-end: var(--border-width-default) solid var(--color-border-subtle); }
.tabela th { font-size: var(--type-caption-size); font-weight: 600; color: var(--color-text-secondary); text-align: start; white-space: nowrap; }
.tabela .num { text-align: end; }
.tabela tfoot td { font-weight: 600; border-block-start: var(--border-width-strong) solid var(--color-border-strong); border-block-end: none; }

/* Rótulo obrigatório em toda peça que imita produto. Não é rodapé decorativo:
   é a diferença entre ilustração e falsa evidência. */
.ilustrativo {
  display: flex; align-items: flex-start; gap: var(--spacing-related);
  margin-block-start: var(--spacing-inline);
  font-size: var(--type-caption-size); color: var(--color-text-muted);
}
.ilustrativo::before {
  content: ''; flex: 0 0 auto; inline-size: 3px; align-self: stretch;
  background: var(--color-border-strong); border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────── formulário */
.campo { display: flex; flex-direction: column; gap: var(--spacing-related); }
.campo > label { font-size: var(--type-label-size); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: var(--type-body-size);
  min-block-size: 44px; padding: 10px var(--spacing-inline);
  background: var(--color-surface-default); color: var(--color-text-primary);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-input);
}
.campo textarea { min-block-size: 90px; resize: vertical; line-height: 1.6; }
.campo__ajuda { font-size: var(--type-caption-size); color: var(--color-text-secondary); }
.campo__erro  { font-size: var(--type-caption-size); font-weight: 600; color: var(--color-semantic-danger-foreground); }
.campo__erro:empty { display: none; }
.campo :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-semantic-danger-foreground); }

.aviso {
  border: var(--border-width-default) solid var(--color-border-default);
  border-inline-start: var(--border-width-strong) solid var(--color-brand-signature);
  border-radius: var(--radius-small);
  padding: var(--spacing-inline) var(--spacing-control);
  background: var(--color-surface-subtle);
  font-size: var(--type-caption-size); color: var(--color-text-secondary);
}
.aviso--sucesso { border-inline-start-color: var(--color-semantic-success-foreground); background: var(--color-semantic-success-surface); }
.aviso:empty { display: none; }

/* ───────────────────────────────────────────────────────────────── rodapé */
.rodape { background: var(--color-brand-carbon); color: var(--color-text-primary); padding-block: var(--spacing-region) var(--spacing-sectionCompact); }
.rodape a { color: var(--color-text-primary); text-decoration: none; }
.rodape a:hover { color: var(--color-identity-readable); text-decoration: underline; }
.rodape__grade { display: grid; gap: var(--spacing-section); grid-template-columns: 1fr; }
.rodape__titulo { font-size: var(--type-caption-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin-block-end: var(--spacing-inline); }
/* P1 da auditoria: os links do rodape mediam 20 px de altura, contra os
   44 px minimos do contrato. Nao e link solto dentro de frase - que tem
   excecao reconhecida - e sim lista de navegacao.

   O alvo cresce por padding no proprio <a>, com margem negativa no eixo
   horizontal, para a area clicavel aumentar sem deslocar o texto da coluna.
   O gap da lista cai porque o padding ja separa os itens; mantido o antigo,
   o rodape ganharia altura a toa. */
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-micro); }
.rodape ul a {
  display: flex; align-items: center;
  min-block-size: 44px;
  padding-inline: var(--spacing-related);
  margin-inline: calc(var(--spacing-related) * -1);
  border-radius: var(--radius-small);
}
.rodape ul a:hover { background: var(--color-surface-default); }
.rodape__fim {
  margin-block-start: var(--spacing-section); padding-block-start: var(--spacing-control);
  border-block-start: var(--border-width-default) solid var(--color-border-default);
  display: flex; flex-wrap: wrap; gap: var(--spacing-inline); justify-content: space-between;
  font-size: var(--type-caption-size); color: var(--color-text-muted);
}

/* ────────────────────────────────────────────────────────────── responsivo */
@media (min-width: 640px) {
  .envelope { padding-inline: var(--grid-tablet-margin); }
  h1 { font-size: var(--type-h1-size); }
  h2 { font-size: var(--type-h2-size); }
  h3 { font-size: var(--type-h3-size); }
  .grade--dupla { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .envelope { padding-inline: var(--grid-notebook-margin); }
  .nav { display: block; }
  .menu-botao, .menu-painel { display: none !important; }
  .secao { padding-block: var(--spacing-chapter); }
  .chamada--hero { font-size: var(--type-body-mobile); }
}

/* Reduced motion: transição vira estática, conteúdo e feedback permanecem. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .cabecalho, .menu-painel, .pular { display: none; }
  body { background: var(--color-brand-porcelain); color: var(--color-brand-carbon); }
}