header {
    background-color: #eae9eb; /* Fondo blanco puro */
    padding: 10px 0;
    border-bottom: 1px solid #8e0495; /* Borde inferior gris claro */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil inferior */
    /* Se eliminaron las siguientes líneas para quitar el degradado: */
    /* border-top: 3px solid transparent; */
    /* background-image: linear-gradient(to right, #2ecc71, #9b59b6); */
    /* background-origin: border-box; */
    /* background-clip: border-box; */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ya no se necesita el fondo blanco interno extra */
    /* background-color: #ffffff; */
}

/* Ajuste para el contenedor del logo */
.logo {
    display: flex; /* Permite alinear imagen y texto */
    align-items: center; /* Centra verticalmente imagen y texto */
    text-decoration: none; /* Asegura que no haya subrayado en el texto */
    color: inherit; /* Hereda el color del texto si es necesario */
}


.logo img {
    max-height: 50px;
    display: block;
    margin-right: 10px; /* Espacio entre el logo y el texto */
}

/* Estilo para el texto del logo */
.logo-text {
    font-size: 1.1em; /* Tamaño de fuente (ajustar si es necesario) */
    font-weight: bold; /* Hacer el texto en negrita */
    color: #333; /* Color de texto oscuro (ajustar si es necesario) */
    /* Puedes añadir más estilos como letter-spacing si quieres */
}

/* Cambiamos 'nav ul' a '.nav-links' para aplicar estilos a la lista */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* <-- Visible en escritorio */
    align-items: center;
}

.nav-links li { /* Cambiamos 'nav ul li' a '.nav-links li' */
    margin-left: 25px;
}

.nav-links li a { /* Cambiamos 'nav ul li a' a '.nav-links li a' */
    text-transform: uppercase;
    font-weight: bold;
    color: #555555; /* Gris oscuro para texto y links */
    font-size: 0.9em;
    padding: 5px 0;
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease; /* Transición suave para el color */
}

.nav-links li a:hover { /* Cambiamos 'nav ul li a:hover' a '.nav-links li a:hover' */
    color: #e74c3c; /* Naranja brillante al pasar el ratón */
    text-decoration: none;
}

/* Efecto subrayado al pasar el ratón (opcional, ahora usa el color naranja) */
.nav-links li a::after { /* Cambiamos 'nav ul li a::after' a '.nav-links li a::after' */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #e74c3c; /* Naranja brillante */
    transition: width 0.3s ease;
}

.nav-links li a:hover::after { /* Cambiamos 'nav ul li a:hover::after' a '.nav-links li a:hover::after' */
    width: 100%;
}

/* Estilos para el botón hamburguesa (oculto por defecto) */
.menu-toggle {
    display: none; /* <-- Oculto en escritorio */
    background: none;
    border: none;
    font-size: 24px; /* Tamaño del icono */
    cursor: pointer;
    color: #333; /* Color del icono */
    padding: 5px 10px; /* Padding para facilitar el clic */
    margin-left: 15px; /* Espacio respecto a otros elementos si es necesario */
}


.language-selector {
    margin-left: 20px;
}

.language-selector a {
    margin: 0 5px;
    font-weight: bold;
    color: #555555; /* Gris oscuro también para selector de idioma */
    text-decoration: none;
    padding: 3px 5px;
    border-radius: 3px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.language-selector a.active {
    color: #2ecc71; /* Verde para idioma activo */
    font-weight: bold;
}

.language-selector a:hover:not(.active) {
    color: #e74c3c; /* Naranja brillante al pasar el ratón */
    background-color: #f5f5f5;
    text-decoration: none;
}

/* --- Estilos Responsivos para el Menú Hamburguesa --- */
/* Puedes añadir esto al final de header.css o en responsive.css */
@media (max-width: 992px) { /* Punto de quiebre (ajusta si es necesario) */

    .nav-links {
        display: none; /* <-- Oculto por defecto en móvil */
        flex-direction: column; /* Apila los enlaces */
        position: absolute;
        top: 100%; /* Justo debajo del header */
        left: 0;
        width: 100%;
        background-color: #eae9eb; /* Mismo fondo que el header */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 10px 0;
        z-index: 999;
        border-top: 1px solid #ccc; /* Separador visual */
    }

    .nav-links.active {
        display: flex; /* <-- Se muestra al hacer clic */
    }

    .nav-links li {
        margin: 0; /* Quita margen lateral */
        text-align: center; /* Centra el texto */
        width: 100%;
    }

    .nav-links a {
        display: block; /* Ocupa todo el ancho */
        padding: 15px 20px; /* Espaciado interno */
        border-bottom: 1px solid #ddd; /* Línea separadora más sutil */
        width: 100%;
        box-sizing: border-box;
        color: #333; /* Asegura buen contraste */
    }
     .nav-links li:last-child a {
        border-bottom: none; /* Sin borde en el último */
    }
    .nav-links a:hover {
        background-color: #f5f5f5; /* Fondo suave al pasar el ratón */
        color: #e74c3c; /* Mantiene el color naranja */
    }
    /* Oculta el efecto after en móvil */
    .nav-links li a::after {
        display: none;
    }


    .menu-toggle {
        display: block; /* <-- Visible en móvil */
    }

    /* Opcional: Ocultar texto del logo en pantallas muy pequeñas */
    /*
    .logo-text {
        display: none;
    }
    */

    /* Ajustes para que quepa todo */
    .header-content {
        /* Puedes ajustar el padding si es necesario */
        /* padding-left: 15px; */
        /* padding-right: 15px; */
    }
}