/* ==========================================================================
   1. RESETEO DE CAJA Y BORDES (El más importante)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box; /* Hace que el padding y padding-border no agranden las cajas */
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   2. CONFIGURACIÓN RAÍZ (HTML y Body)
   ========================================================================== */
html {
    scroll-behavior: smooth; /* Desplazamiento suave al usar enlaces de ancla (#) */
    -webkit-text-size-adjust: 100%; /* Evita que iOS agrande la letra al girar la pantalla */
}

body {
    min-height: 100vh; /* Asegura que el fondo cubra siempre toda la pantalla */
    text-rendering: optimizeLegibility; /* PRIORIZA LA CALIDAD SIN AFECTAR RENDIMIENTO */
    -webkit-font-smoothing: antialiased; /* MEJORA LA VISIBILIDAD DE FUENTES EN MAC/LINUX */
    line-height: 1.5; /* Altura de línea base cómoda para lectura */
}

/* ==========================================================================
   3. ELEMENTOS MULTIMEDIA (Imágenes, Videos, Vectores)
   ========================================================================== */
img,
picture,
video,
canvas,
svg {
    max-width: 100%; /* Evita que las imágenes se desborden de sus contenedores */
    display: block;  /* Elimina el espacio en blanco extraño debajo de las imágenes inline */
    height: auto;    /* Mantiene la proporción original al redimensionar */
}

/* ==========================================================================
   4. TIPOGRAFÍAS Y ELEMENTOS DE TEXTO
   ========================================================================== */
input,
button,
textarea,
select {
    font: inherit; /* Fuerza a los formularios a usar la fuente del sitio y no la del sistema */
}

a {
    text-decoration: none; /* Quita el subrayado feo por defecto de los enlaces */
    color: inherit;        /* Hereda el color del contenedor padre */
}

ul, 
ol {
    list-style: none; /* Quita los puntos y números por defecto de las listas */
}