/*---------------------------------------
  NAVIGATION
-----------------------------------------*/
.sticky-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin-top: 0;
    padding-top: 22px;
    z-index: 1000;
}

/* Navbar principal: 100% transparente en todo momento para que el fondo
   (imagen, video o color) se vea siempre completo. La legibilidad del
   texto se resuelve con text-shadow, no con una capa de fondo. */
.navbar {
    background: transparent !important;
    z-index: 9;
    padding: 0.6rem 0;
}

.navbar>.container {
    display: flex;
    align-items: center;
}

.navbar-brand,
.navbar-brand:hover {
    color: var(--white-color);
    font-size: var(--h5-font-size);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
}

.navbar-brand img {
    background: transparent;
    transition: transform var(--transition-fast);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.navbar-brand:hover img {
    transform: scale(1.04);
}

.navbar-nav {
    display: flex;
    align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
    border-radius: var(--radius-pill);
    margin: 0 4px;
    padding: 10px 16px;
}

.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    color: var(--white-color);
    font-size: 0.97rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--white-color);
    background-color: rgba(255, 255, 255, 0.14);
}

.navbar-nav .nav-link.active {
    color: var(--secondary-color-light);
    background-color: rgba(255, 255, 255, 0.14);
}

.navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0;
    width: 30px;
    height: 35px;
    outline: none;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

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

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    top: 0;
}

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

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

.navbar-toggler .navbar-toggler-icon {
    background: var(--white-color);
    transition: background 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    position: absolute;
    right: 0;
    left: 0;
    background: var(--white-color);
    width: 30px;
    height: 2px;
    content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
}

/* CTA "Viajes Internacionales" en el navbar: mismo pill button del resto
   del sitio, pero con tamaño ajustado al contexto de la barra. */
.navbar .custom-btn {
    padding: 10px 20px;
    box-shadow: 0 6px 18px rgba(238, 80, 7, 0.35);
    align-self: center;
}

/*---------------------------------------
  NAVIGATION - MOBILE STYLES
-----------------------------------------*/
@media (max-width: 991px) {

    /* El menú desplegable móvil sí necesita un fondo sólido propio (es un
       panel superpuesto, no la barra), para que sus enlaces sean legibles
       sobre cualquier contenido. La barra en sí permanece transparente. */
    .navbar-collapse {
        background: rgba(15, 13, 26, 0.96) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-md);
        padding: 1.5rem;
        margin-top: 1rem;
        box-shadow: var(--shadow-lg);
    }

    .navbar-nav {
        align-items: center;
    }

    .navbar-nav .nav-link {
        justify-content: center;
        text-align: center;
    }

    /* Asegurar que el contenedor principal sea transparente */
    .navbar .container {
        background: transparent !important;
    }

    /* Dropdown en móvil */
    .navbar-nav .dropdown-menu {
        background: rgba(0, 0, 0, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .dropdown-item {
        color: var(--white-color);
    }

    .navbar-nav .dropdown-item:hover {
        background: rgba(238, 80, 7, 0.3);
        color: var(--white-color);
    }

    .navbar .custom-btn {
        margin-top: 1rem;
        display: flex !important;
        justify-content: center;
    }
}