/* Estilos del Header Global */
#global-header {
    width: 100%;
    height: 80px; /* Altura reducida para verse más estilizado como en la imagen */
    
    /* FONDO */
    background-image: url('../img/fondo-header.jpg'); 
    background-size: cover; /* Cubre todo el espacio sin deformarse */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat;
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra un poco más difusa */
}

/* Contenedor Flex */
.header-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 5%; /* Porcentaje para que se adapte mejor a pantallas anchas */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
}

/* --- LOGO --- */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 22px; /* Logo más pequeño según tu referencia */
    width: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.logo-img:hover {
    opacity: 0.8;
}

/* --- NAVEGACIÓN Y DERECHA --- */
.nav-container {
    display: flex;
    align-items: center;
    gap: 50px; /* Mayor separación entre menú e idiomas */
}

.main-nav ul {
    display: flex;
    gap: 40px; /* Más aire entre los links */
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-family: var(--font-main, sans-serif); /* Asegúrate de tener Inter o similar */
    font-size: 0.95rem; /* Texto un poco más fino/pequeño */
    font-weight: 400; /* Peso de fuente regular, más elegante */
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--accent-color, #4A90E2); /* Color de acento al pasar el mouse */
}

/* --- IDIOMAS --- */
.lang-selector {
    display: flex;
    align-items: center;
    gap: 15px; /* Separación entre Es y En */
    color: #FFFFFF;
    font-size: 0.9rem;
}

.lang-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7); /* Un poco transparente por defecto */
    transition: color 0.3s;
}

.lang-link:hover, .lang-link.active {
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none; /* Quitamos subrayado para un look más limpio */
}

.separator {
    display: none; /* En diseño moderno a veces se quita la barra, o puedes dejarla si gustas */
}

/* --- RESPONSIVE --- */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.mobile-toggle span {
    width: 24px;
    height: 2px;
    background-color: #fff;
}

@media (max-width: 992px) {
    .header-container {
        padding: 0 20px;
    }
    .nav-container {
        gap: 20px;
    }
    .main-nav ul {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .main-nav, .lang-selector {
        display: none; 
    }
    .mobile-toggle {
        display: flex;
    }
}