/* =========================================================
    Reset moderno (2025) — liviano y compatible
    Pensado para: Mobile-first + BEM + tokens/variables
========================================================= */

/* 1) Modelo de caja predecible */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Base del documento */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    line-height: 1.5;          /* legible por defecto */
    min-height: 100dvh;         /* viewport móvil moderno */
    text-rendering: optimizeLegibility;
}

/* 3) Tipografía y listas */
:where(h1, h2, h3, h4, h5, h6, p, figure) { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }

/* 4) Enlaces y enfoque accesible */
a { color: inherit; text-decoration-skip-ink: auto; }
:focus:not(:focus-visible) { outline: none; }             /* evita halos innecesarios */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 5) Medios responsivos */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* 6) Formularios */
button, input, select, textarea {
    font: inherit;               /* hereda tipografía/tamaño */
    color: inherit;
    margin: 0;
}
button, [type="button"], [type="submit"], [role="button"] { cursor: pointer; }
:disabled { cursor: not-allowed; }
textarea { resize: vertical; }

/* 7) Elementos varios */
table { border-collapse: collapse; border-spacing: 0; }
hr { height: 0; color: inherit; border: 0; border-top: 1px solid currentColor; }
[hidden] { display: none !important; }

/* 8) Respeto preferencias de usuario (reduce motion) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}