/* ===== NAVBAR ===== */
   .navbar {
     transition: all 0.3s ease;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
     background: linear-gradient(135deg, var(--primary-color-nav), var(--secondary-color-nav));
   }

   .navbar-brand {
     color: var(--color-azul);
     font-size: 1.5rem;
     font-weight: 700;
   }

   .navbar-brand:hover {
     color: var(--dark-color);
     font-size: 1.5rem;
     font-weight: 700;
   }

   .dropdown-menu {
     box-shadow: 3px 5px 12px 4px rgba(0, 0, 0, 0.19);
     border: none;
     border-radius: 10px;
     background: #fff;
   }

   .nav-link {
     color: var(--color-azul);
   }

   .nav-link:hover {
     color: var(--dark-color);
     transition: 0.1s ease;
   }

   .navbar-nav .nav-link.active,
   .navbar-nav .nav-link.show {
     color: var(--dark-color);
     transition: 0s ease;
   }

   .dropdown-item {
     color: #4A4A4A;
     text-decoration: none;
   }

   .dropdown-item:active,
   .dropdown-item:focus {
     background-color: transparent;
     /* O usa var(--primary-color) si quieres tu color */
     color: var(--dark-color);
     /* El color del texto */
     outline: none;
     /* Quita el borde de enfoque */
     box-shadow: none;
     /* Quita la sombra azul que a veces pone Bootstrap */
   }




   /* Botón hamburguesa sin borde y con animación a X */
   .navbar-toggler {
     border: none !important;
     padding: 0.25rem 0.5rem;
     outline: none !important;
     box-shadow: none !important;
   }

   .navbar-toggler:focus {
     box-shadow: none !important;
   }

   .navbar-toggler-icon {
     background-image: none;
     position: relative;
     width: 30px;
     height: 20px;
   }

   .navbar-toggler-icon::before,
   .navbar-toggler-icon::after,
   .navbar-toggler-icon span {
     content: '';
     position: absolute;
     width: 100%;
     height: 3px;
     background-color: var(--color-azul);
     border-radius: 3px;
     transition: all 0.3s ease;
   }

   .navbar-toggler-icon::before {
     top: 0;
   }

   .navbar-toggler-icon span {
     top: 50%;
     transform: translateY(-50%);
   }

   .navbar-toggler-icon::after {
     bottom: 0;
   }

   /* Animación a X cuando está abierto */
   .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
   }

   .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span {
     opacity: 0;
   }

   .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
     bottom: 50%;
     transform: translateY(50%) rotate(-45deg);
   }




   /* agregado por hoverrrr ************ */

   /* ===== DROPDOWN CON HOVER EN DESKTOP ===== */
   @media (min-width: 992px) {

     /* Solo en pantallas grandes (lg y superiores) */
     .navbar .nav-item.dropdown:hover>.dropdown-menu {
       display: block;
       margin-top: 0;
       /* Evita salto feo */
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
     }

     /* Animación suave de aparición */
     .navbar .dropdown-menu {
       display: block;
       /* Necesario para que funcione el hover */
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
       pointer-events: none;
       /* Evita que interfiera cuando está oculto */
     }

     .navbar .nav-item.dropdown:hover>.dropdown-menu {
       pointer-events: auto;
     }



     /* Evita que el link del dropdown sea clicable en hover (opcional pero recomendado) */
     .navbar .dropdown-toggle {
       cursor: pointer;
     }
   }