/* --- ESTILOS DEL MENÚ DESPLEGABLE (PRODUCTOS) --- */

/* Contenedor del menú desplegable */
.nav-bar .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-radius: 0; /* Bordes cuadrados como el resto de tus botones */
    background: #191919; /* Mismo color oscuro que tu navbar */
    box-shadow: 0 8px 16px rgba(0,0,0,0.5); /* Una sombra para que "flote" elegantemente */
}

/* Los enlaces dentro del menú */
.nav-bar .dropdown-item {
    color: #ffffff; /* Letra blanca por defecto */
    padding: 12px 25px; /* Buen espaciado para que respiren las palabras */
    font-size: 15px;
    text-transform: uppercase; /* Para mantener la coherencia con los demás links */
    transition: .3s;
}

/* El efecto Hover (al pasar el mouse) en el menú desplegable */
.nav-bar .dropdown-item:hover,
.nav-bar .dropdown-item:focus,
.nav-bar .dropdown-item.active {
    color: #FDBE33; /* Tu color principal amarillo/dorado */
    background-color: transparent; /* Quitamos el fondo azul que pone Bootstrap */
    outline: none;
}

/* (Opcional pero recomendado) Que el menú se abra al pasar el mouse en computadoras, sin hacer clic */
@media (min-width: 992px) {
    .nav-bar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}