/*
 * === CSS Reset Básico ===
 * Elimina márgenes y paddings por defecto e introduce el box-sizing estándar.
 */
*,
*::before,
*::after {
    /* * Clave: Define cómo se calculan el ancho y alto. 
     * El padding y el borde se incluyen en el ancho/alto total. 
     */
    box-sizing: border-box;
    /* * Remueve márgenes y paddings por defecto en TODOS los elementos, 
     * incluyendo h1, p, ul, ol, etc.
     */
    margin: 0;
    padding: 0;
}

/*
 * === Configuración de la Raíz y Base ===
 */
html {
    /* Base para un mejor diseño responsivo con unidades rem */
    font-size: 16px; 
    /* Permite transiciones fluidas de scroll */
    scroll-behavior: smooth;
    /* El scroll horizontal es casi siempre un error */
    overflow-x: hidden;
}

body {
    /* Mejora la legibilidad del texto */
    -webkit-font-smoothing: antialiased;
    line-height: 1.5; /* Espaciado de línea moderno */
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura del viewport */
}

/*
 * === Estilos de Elementos de Contenido ===
 */

/* Las imágenes y elementos multimedia no deben desbordarse del contenedor */
img, 
picture, 
video, 
canvas, 
svg {
    max-width: 100%;
    display: block; /* Elimina el espacio extra que a veces deja la etiqueta img */
}

/* Los elementos de formulario y botones heredan el estilo de fuente del cuerpo */
input,
button,
textarea,
select {
    font: inherit;
}

/* * === Listas y Enlaces ===
 */
ul, ol {
    /* Remueve los puntos/numeración por defecto */
    list-style: none;
}

/*
 * === Evitar problemas de scroll cuando se usa position: fixed/sticky ===
 */
/* Permite que los elementos anidados dentro de flex o grid no excedan su tamaño */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--tipography), "sans-serif";
    overflow-wrap: break-word;
}