/* Estilo para el navbar cuando está oscuro completamente */
.navbar-dark-scroll {
    background-color: rgba(0, 0, 0, 1) !important; /* Fondo negro completo */
    transition: background-color 0.3s; /* Suaviza la transición */
}

.navbar-toggler{
    color: white !important;
    border-color: white;
}

.fusionMenu {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); 
    transition: background-color 0.3s;
}

.fusionMenu.open {
    background: rgba(0, 0, 0, 1); /* Fondo negro sólido */
}

/* Estilos generales para el logo */
.logo {
    width: 20vw; /* Tamaño relativo al ancho de la ventana */
    max-width: 120px; /* Limita el tamaño máximo para que no sea demasiado grande en pantallas grandes */
    height: auto; /* Mantén la proporción */
    transition: width 0.3s ease; /* Suave transición de tamaño */
}

/* En pantallas más pequeñas, haz que el logo sea más pequeño */
@media (max-width: 768px) {
    .logo {
        width: 13vw; /* Se ajusta automáticamente en pantallas pequeñas */
        max-width: 80px; /* Limite adicional en móviles */
    }
}

/* Para limitar la altura del menú en móviles y hacer que sea desplazable */
@media (max-width: 991px) { /* Aplica solo en pantallas pequeñas */
    .navbar-collapse {
        max-height: 50vh; /* Limita la altura cuando se expande */
        overflow-y: auto; /* Activa el desplazamiento interno */
    }

    /* Evita que el resto de la página se desplace cuando el menú está abierto */
    body.nav-open {
        overflow: hidden;
    }
}

.menuItem {
    color: white;
    font-size: 30px;
}