/* 1. RESET BÁSICO DEL ENCABEZADO */
header {
    /* Elimina el margen y el padding que algunos navegadores aplican por defecto */
    margin: 0;
    padding: 0;
    
    /* Asegura que el header use todo el ancho disponible */
    width: 100%;
    
    /* Establece un modelo de caja predecible (incluye padding y border en el ancho/alto) */
    box-sizing: border-box; 
    
    /* Buena práctica: Define el color de fondo para evitar transparencias inesperadas */
    background-color: transparent; 
}

/* 2. NAVEGACIÓN DENTRO DEL ENCABEZADO */
header nav {
    /* Elimina cualquier margen o padding predeterminado en el nav */
    margin: 0;
    padding: 0;
    
    /* Opcional: Usar Flexbox para alinear elementos internos (logo, enlaces) */
    display: flex;
    justify-content: space-between; /* Espacia el logo y los enlaces */
    align-items: center; /* Centra verticalmente los elementos */
}

/* 3. LISTAS DE ENLACES DE NAVEGACIÓN (UL, OL) */
header nav ul, 
header nav ol {
    /* Elimina los estilos de lista (puntos/números) */
    list-style: none;
    
    /* Elimina el padding y margin predeterminados de la lista */
    margin: 0;
    padding: 0;
    
    /* Usa Flexbox para colocar los <li> uno al lado del otro */
    display: flex;
    gap: 20px; /* Buena práctica: Usa 'gap' para el espaciado entre elementos */
}

/* 4. ELEMENTOS DE LISTA (LI) */
header nav li {
    /* Asegura que no haya márgenes inesperados */
    margin: 0;
    padding: 0;
}

/* 5. ENLACES (A) */
header nav a {
    /* Quita el subrayado predeterminado */
    text-decoration: none;
    
    /* Asegura que los enlaces hereden el color de la fuente o define uno nuevo */
    color: inherit; 
}