/* Primera Navbar (logos) */
.navbar.bg-primary {
    /* background-color: var(--color-fondo-oscuro) !important; */
    background: var(--degradado-navbar) !important;
    position: relative;
    z-index: 1030;
    margin-bottom: 0;
    padding: 0;
    /* Evita márgenes y rellenos extra */
    height: 110px;
    /* Mantén la altura definida */
    /* border-bottom: 0.3125rem solid var(--color-fondo-oscuro-dos); */
}



.navbar.bg-primary .container {
    display: flex;
    justify-content: space-between;
    /* Separa los logos */
    align-items: center;
    /* Centra verticalmente */
    height: 100%;
    /* Asegura que los elementos ocupen toda la altura */
}

/* Segunda Navbar (sticky) */
#secondary-navbar {
    /* background-color: var(--color-fondo-oscuro) !important; */
    background: var(--degradado-navbar) !important;
    position: relative;
    /* Inicialmente no sticky */
    top: 0 !important;
    /* Correcto inicio */
    margin: 0;
    /* Evita márgenes adicionales */
    padding: 0;
    /* Evita rellenos adicionales */
    width: 100%;
    /* Asegura que ocupe todo el ancho */
    z-index: 1020;
    transition: all 0.3s ease-in-out;
    /* Transición suave para cambios */
    height: 60px;
    /* Ajusta la altura según tu diseño */
}

#secondary-navbar.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    /* Mantiene el ancho completo */
    z-index: 1030;
}

/* Contenedor de la segunda navbar */
#secondary-navbar .container {
    display: flex;
    justify-content: space-between;
    /* Distribuye espacio entre elementos */
    align-items: center;
    /* Centra verticalmente */
    height: 100%;
    /* Asegura el uso de toda la altura */
}

/* Ajustes para los enlaces */
.navbar-nav {
    display: flex;
    align-items: center;
    /* Centra verticalmente los enlaces */
    justify-content: flex-end;
    /* Opcional: Alinea a la derecha */
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    margin: 0 8px;
    /* Reduce el espaciado horizontal */
}

.nav-link.link-barra {
    font-size: 15px;
    color: white !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    /* Asegura el centrado vertical dentro de cada enlace */
    height: 100%;
    /* Opcional: asegura que los enlaces llenen el espacio */
    padding: 0 10px;
    /* Relleno lateral uniforme */
    text-decoration: none;
}

.nav-link.link-barra:hover {
    background-color: #c5911f;
    color: white;
    border-radius: 5px;
    /* Opcional: mejora el diseño */
}

/* Botón de hamburguesa */
/* Ajustes para el menú hamburguesa */
.navbar-toggler {
    background: none;
    /* Elimina el fondo predeterminado */
    border: none;
    /* Quita los bordes */
    padding: 0;
    /* Reduce el espacio alrededor */
    margin-right: 15px;
    /* Alinea hacia la derecha */
    align-self: center;
    /* Centra verticalmente */
    cursor: pointer;
    /* Cambia el cursor para indicar interacción */
}

/* Líneas del menú hamburguesa */
.navbar-toggler-icon {
    background-image: none !important;
    /* Elimina la imagen de fondo de Bootstrap */
    display: block;
    width: 30px;
    height: 4px;
    background-color: white;
    border-radius: 2px;
    position: relative;
}

/* Asegurarse que el botón no tenga outline al hacer focus */
.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

/* Espaciado entre líneas */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    display: block;
    width: 100%;
    /* Igual ancho que la línea principal */
    height: 100%;
    /* Mismo grosor */
    background-color: white;
    /* Color de las líneas */
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: all 0.3s ease-in-out;
    box-shadow: none;
    /* Asegura que no haya sombras */
    border: none;
    /* Sin bordes */
}

/* Posición de las líneas */
.navbar-toggler-icon::before {
    top: -8px;
    /* Línea superior */
}

.navbar-toggler-icon::after {
    top: 8px;
    /* Línea inferior */
}

/* Anima las líneas al activar el menú */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    top: 0;
}


/* Media Query para pantallas pequeñas */
@media (max-width: 991px) {
    #secondary-navbar .navbar-nav {
        display: none;
        /* Oculta los enlaces de la barra */
    }

    .navbar-toggler {
        display: block;
        /* Muestra el botón */
        position: absolute;
        /* Coloca el menú hamburguesa en el lugar deseado */
        right: 15px;
        /* Alineado a la derecha */
        top: 50%;
        /* Centra verticalmente */
        transform: translateY(-50%);
        /* Ajusta el centrado vertical */
    }
}


/* Small logo */
.small-logo {
    display: none;
    font-family: var(--font-montserrat);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    /* Asegura que no haya espacio extra vertical */
}

#secondary-navbar.sticky .small-logo {
    display: block !important;
    color: white !important;
}

/* Media query para cambio de logos */
@media (max-width: 991px) {

    /* Mostrar versiones simples de logos */
    .navbar.bg-primary .navbar-brand {
        display: inline-block;
    }

    /* Estilo del menú desplegable */
    #navbarNav {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--color-fondo-oscuro);
        padding: 20px 0;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-item {
        width: 100%;
        margin: 5px 0;
    }

    .nav-link.link-barra {
        padding: 10px 20px;
    }
}

@media (max-width: 991px) {


    #navbarNav {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--color-fondo-oscuro);
    }

    .navbar-nav {
        flex-direction: column;
        padding: 15px;
        display: flex !important;
    }

    .nav-item {
        width: 100%;
        margin: 8px 0;
    }

    .nav-link.link-barra {
        padding: 12px 15px;
        width: 100%;
    }

    .collapse:not(.show) {
        display: none;
    }
}