/* /branding/menu/menu.css */

/* --- Barra Principal (Navbar) --- */
.navbar { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background-color: rgba(255, 255, 255, 0); transition: background-color 0.3s ease, box-shadow 0.3s ease; z-index: 1002; box-sizing: border-box; }
.navbar.scrolled { background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.navbar-logo { flex-shrink: 0; }
.navbar-logo img { height: 32px; display: block; }
.navbar-right-container { display: flex; align-items: center; margin-left: auto; gap: 8px; }

/* --- Menú de Escritorio --- */
.nav-links-desktop { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; gap: 25px; }
.nav-links-desktop li a { text-decoration: none; color: #333; font-weight: 300; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; font-size: 14px; transition: color 0.3s ease; }
@media (min-width: 1024px) { .nav-links-desktop li a { font-weight: bold; } }
.nav-links-desktop a:hover { color: #ffd500; }

/* --- Dropdown Escritorio --- */
.nav-links-desktop .dropdown { position: relative; }
.dropdown .submenu { display: none; position: absolute; top: 100%; left: 0; background-color: #ffffff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 10px 0; list-style: none; min-width: 220px; z-index: 1003; }
.nav-links-desktop .dropdown:hover .submenu { display: block; }
.submenu li { margin: 0; }
.submenu li a { display: block; padding: 10px 20px; color: #333; font-weight: normal; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }
.submenu li a:hover { background-color: #f4f4f4; color: #000; }
.submenu li a.active { color: #ffd500; font-weight: bold; }
.nav-links-desktop .dropdown > a::after { content: ' ▼'; font-size: 0.6em; vertical-align: middle; margin-left: 5px; }

/* --- Selector Idioma Escritorio (Texto) --- */
.language-selector { display: block; /* Visible por defecto */ }
.language-selector a { display: inline-block; padding: 8px 14px; margin: 0 4px; border-radius: 8px; text-decoration: none; font-weight: bold; color: #333; background-color: transparent; transition: all 0.3s ease; }
.language-selector a.lang-active { background-color: #Ffd500; color: #000000; }
.language-selector a:not(.lang-active):hover { color: #Ffd500; }

/* --- Icono Hamburguesa (Móvil) --- */
.menu-toggle { display: none; /* Oculto por defecto */ flex-direction: column; justify-content: space-between; height: 20px; width: 30px; cursor: pointer; z-index: 1008; flex-shrink: 0; }
.menu-toggle .bar { width: 100%; height: 3px; background-color: #ffd500; transition: background-color 0.3s ease; }

/* --- Menú Overlay Móvil --- */
.nav-mobile { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; display: none; flex-direction: column; justify-content: center; align-items: center; transform: translateX(100%); transition: transform 0.3s ease-in-out; }
.nav-mobile.active { display: flex !important; /* Forzar visible */ transform: translateX(0); } /* Agregado !important */
.nav-mobile ul { list-style: none; padding: 0; text-align: center; }

.nav-mobile li {
    /* CORRECCIÓN: Quitar margen vertical, dejar que el padding del 'a' controle el espacio */
    margin: 0;
    width: 100%; /* Asegurar que el li ocupe el ancho */
}

.nav-mobile a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: normal;
    text-transform: uppercase;
    font-family: 'Ubuntu', sans-serif;
    transition: color 0.3s ease, background-color 0.3s ease; /* Añadir transición de fondo */

    /* --- NUEVAS LÍNEAS --- */
    display: block;    /* Hace que el enlace ocupe todo el ancho */
    width: 100%;       /* Asegura que ocupe el 100% del contenedor li */
    padding: 15px 0;   /* Añade espacio vertical clicable (ajusta 15px si quieres más/menos) */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
    /* -------------------- */
}

.nav-mobile a:hover {
    color: #ffd500;
	font-weight: bold;
    /* OPCIONAL: Añadir un fondo sutil al hacer hover para mayor feedback */
    /* background-color: rgba(255, 255, 255, 0.1); */
}



/* --- CORRECCIÓN BOTÓN 'X' --- */
/* Usamos un selector más específico para ganar */
div.nav-mobile a.close-menu-mobile {
    position: absolute;
    top: 20px;
    right: 25px;
    left: auto !important; /* Nos aseguramos que no haya un 'left: 0' */
    
    /* Estilos visuales */
    font-size: 2.5rem;
    font-weight: bold; 
    color: white !important; 
    text-decoration: none;
    transition: color 0.3s ease;
    z-index: 10000; /* Asegura que esté sobre el fondo */
    opacity: 1; 
    
    /* --- RESETEO DE ESTILOS HEREDADOS DE .nav-mobile a --- */
    display: inline-block !important; /* Resetea el 'display: block' */
    width: auto !important;          /* Resetea el 'width: 100%' */
    padding: 0 !important;           /* Resetea el 'padding: 15px 0' */
}

div.nav-mobile a.close-menu-mobile:hover {
    color: #ff5d00 !important; 
    background-color: transparent !important; /* Asegura que no tenga fondo al hacer hover */
}

/* --- Selector Idioma Móvil (Banderas en Header) --- */
.mobile-lang-selector {
    display: none !important; /* Forzar oculto por defecto */
    position: relative; flex-shrink: 0;
}
.current-lang { display: flex; align-items: center; cursor: pointer; padding: 5px 8px; border: 1px solid #ddd; border-radius: 6px; background-color: #fff; }
.current-lang img { width: 28px; height: auto; border-radius: 3px; display: block; }
.current-lang .arrow-down { font-size: 10px; color: #555; margin-left: 6px; transition: transform 0.2s ease; }
.lang-dropdown {
    display: none; /* Asegurar oculto por defecto */
    position: absolute; top: calc(100% + 5px); right: 0; background-color: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); list-style: none; padding: 5px; margin: 0; z-index: 1005; min-width: auto;
}
.lang-dropdown.show { display: block !important; } /* Forzar visible */
.mobile-lang-selector .lang-dropdown.show ~ .current-lang .arrow-down,
.mobile-lang-selector .current-lang:hover .arrow-down { transform: rotate(180deg); }
.lang-dropdown li { margin: 0; }
.lang-dropdown li a { display: block; padding: 8px 10px; border-radius: 4px; }
.lang-dropdown li a img { width: 28px; height: auto; border-radius: 3px; display: block; }
.lang-dropdown li a:hover { background-color: #f4f4f4; }

/* ==========================================================================
   MEDIA QUERY PARA MÓVIL (MENÚ <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .nav-links-desktop,
    .language-selector { display: none !important; } /* Ocultar escritorio */

    .menu-toggle,
    .mobile-lang-selector { display: flex !important; } /* Mostrar móvil */

    .mobile-lang-selector { margin-right: 2px; } /* Espacio */

    .navbar { background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .menu-toggle .bar { background-color: #ffd500; }

    .nav-mobile { display: none; } /* Oculto hasta activar */
    .nav-mobile.active { display: flex !important; } /* Visible activo */
}