/* ==========================================================================
   ESTILOS Y COLORES INSTITUCIONALES DE MORENA EN EL MENÚ
   ========================================================================== */

/* Colores Base */
.bg-morena-guinda {
    background-color: #73092B !important;
    /* Guinda Institucional */
}

.bg-morena-dark {
    background-color: #4A0D21 !important;
    /* Guinda Oscuro de Fondo */
}

/* Tipografía e Items del Nav */
.navbar-dark .navbar-nav .nav-link {
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    transition: all 0.2s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #D4AF37 !important;
    /* Dorado al pasar el cursor */
    background-color: rgba(255, 255, 255, 0.05);
}

/* Estilos de Desplegables (Dropdowns) */
.dropdown-menu {
    min-width: 240px;
}

.dropdown-item {
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #73092B !important;
    color: #D4AF37 !important;
}

/* Despliegue en Hover para Pantallas Grandes (Desktop) */
@media (min-width: 992px) {
    .hover-dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0;
    }

    /* Submenú anidado lateral */
    .dropdown-submenu:hover>.dropdown-submenu-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: 0;
    }
}

/* Ajuste Móvil */
@media (max-width: 991.98px) {
    .dropdown-submenu .dropdown-submenu-menu {
        position: static;
        margin-left: 1rem;
        background-color: #380918 !important;
    }

    .dropdown-submenu:hover>.dropdown-submenu-menu {
        display: block;
    }
}

/* EFECTO LIFT Y ELEVACIÓN EN EL LOGO DEL MENÚ */
.header-jungapeo .logo-container {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.3s ease-in-out;
    will-change: transform, box-shadow;
}

/* Efecto Hover: Se eleva 5px y proyecta una sombra dorada/suave */
.header-jungapeo .logo-container:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
        0 0 15px rgba(212, 175, 55, 0.4) !important;
    /* Brillo dorado suave */
}

.header-jungapeo .logo-container .logo-header {
    transition: transform 0.3s ease;
}

/* Ligero ajuste en la imagen interna para suavidad */
.header-jungapeo .logo-container:hover .logo-header {
    transform: scale(1.02);
}