:root {
    --azul-oscuro: #0d1b33;
    --azul-nav: #1a2a44;
    --guinda: #8B2323;
    --dorado: #cd7f32;
}

body { 
    margin: 0; 
    font-family: sans-serif;
    overflow-x: hidden;
 }
.logo {
    font-weight: bold;
    font-size: 1.2rem;
    color: #ffffff; /* Esto cambiará el texto a blanco */
    display: flex;
    align-items: center;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--azul-nav);
    padding: 15px 5%;
    /* Esto es vital: crea el punto de referencia para el menú desplegable */
    position: relative; 
    z-index: 1000;
}

.nav-list a:hover{
    color: var(--dorado);
}

.nav-list { display: flex; list-style: none; gap: 20px; }
.nav-list a { color: white; text-decoration: none; font-size: 0.9rem; }

.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.menu-toggle .bar { width: 25px; height: 3px; background: white; }

footer {
    background: var(--azul-oscuro);
    color: white;
    padding: 40px 10%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.social-icons { font-size: 1.5rem; display: flex; gap: 10px; margin-top: 10px; }
.social-icons a { color: white; }