/* ===== Modern Reset (accesible) ===== */

/* 1) Box-sizing universal */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Quita márgenes por defecto */
* { margin: 0; }

/* 3) Tipografía básica y suavizado */
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

/* 4) Listas sin estilo por defecto cuando se usan como menús/containers */
ul[role="list"], ol[role="list"] { list-style: none; }

/* 5) Enlaces: subrayado con salto de tinta, sin quitar focus */
a { text-decoration-skip-ink: auto; color: inherit; }

/* 6) Imágenes y medios responsivos por defecto */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7) Formularios heredan tipografía */
input, button, textarea, select { font: inherit; }

/* 8) Respeta el focus (¡no lo quites!) */
/* Si quieres un focus más bonito, estilízalo en tus hojas principales */

/* 9) Reduce animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-ite*