/* src/styles/base.css
   Sistema novo (redesign 2026) é a base canônica abaixo — reset, tipografia
   de corpo, .container, foco e prefers-reduced-motion.
   As regras no final ("sistema antigo") são uma rede de segurança para
   categoria/produto/catalogo/landing/mangueira/institucionais ainda não
   portados (etapas b-e): sem elas, heading e alvo de toque ficariam sem
   estilo nessas páginas até a vez de cada uma. Remover quando a última
   página velha for portada — os componentes do sistema novo já aplicam
   caixa alta e tamanho por classe própria, não precisam da regra global. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + 24px); overflow-x: clip; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.05; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
figure, blockquote, dl, dd, address, fieldset { margin: 0; padding: 0; border: 0; font-style: normal; }
table { border-collapse: collapse; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
::selection { background: var(--amarelo); color: var(--aco); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular-conteudo { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--amarelo); color: var(--aco); padding: 12px 18px; font-weight: 600; }
.pular-conteudo:focus { left: 16px; top: 16px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

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

/* ===== Sistema antigo — rede de segurança para páginas não portadas ===== */
h1, h2, h3 {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 var(--esp-3);
}
h1, h2 {
  font-size: var(--texto-titulo-secao);
  line-height: var(--lh-titulo-secao);
  margin-bottom: var(--esp-4);
}
h3 { font-size: var(--texto-produto); text-transform: none; }
/* Sem regra global de <p> aqui (o sistema novo já zera margin/max-width em
   `p` para qualquer página): páginas antigas espaçam parágrafo pela classe
   do próprio componente (.pg-intro__texto p etc.), não por um <p> nu. */
a, button, input:not([type="checkbox"]):not([type="radio"]), select, summary {
  min-height: var(--alvo-toque-min);
}
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.tabela-scroll { overflow-x: auto; }