*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { color: var(--text-primary); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* Contenedor de página: margen lateral por token, contenido máximo 1200 */
.container {
  width: 100%;
  max-width: calc(var(--content-max-width) + 2 * var(--spacing-page-margin));
  margin-inline: auto;
  padding-inline: var(--spacing-page-margin);
}

/* Foco visible: 2 px oscuro con 2 px de separación */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* Enlace para saltar al contenido (visible solo con teclado) */
.skip-link {
  position: absolute; left: var(--spacing-page-margin); top: -100px; z-index: 10;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg-inverse); color: var(--text-on-inverse); text-decoration: none;
}
.skip-link:focus { top: 8px; }