/*
 * Navegación del sitio: layout unificado (mismo ancho/ritmo que el home)
 * e indicador de ítem activo.
 */
:root {
    --site-navbar-offset: 4.5rem;
}

html {
    scrollbar-gutter: stable;
}

#siteNavbar.navbar-site-solid {
    background: rgba(var(--bs-light-rgb), 0.96) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body:not(.site-has-hero-nav) .page-content {
    padding-top: 0;
}

body:not(.site-has-hero-nav) .page-content > :first-child:not(.page-banner-strip):not(.empleos-page-head) {
    padding-top: var(--site-navbar-offset);
}

#sitePersistentShell {
    height: 0;
}

/* Stack de logos: color + blanco superpuestos (misma celda) para fade alineado. */
.site-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.site-logo-stack {
    display: inline-grid;
    align-items: center;
    justify-items: start;
    line-height: 0;
}

.site-logo-stack .site-logo {
    grid-area: 1 / 1;
    display: block;
    max-height: 54px;
    width: auto;
    height: auto;
    transition: opacity 0.35s ease;
}

.site-logo-stack--sm .site-logo {
    max-height: 36px;
}

/* Páginas internas / header con fondo: solo color. */
#siteNavbar:not(.navbar-hero-overlay) .site-logo--color,
.mobile-sidebar .site-logo--color {
    opacity: 1;
}

#siteNavbar:not(.navbar-hero-overlay) .site-logo--white {
    opacity: 0;
}

/* Sobre el hero: blanco; al hacer scroll: color. */
#siteNavbar.navbar-hero-overlay:not(.navbar-scrolled) .site-logo--white {
    opacity: 1;
}

#siteNavbar.navbar-hero-overlay:not(.navbar-scrolled) .site-logo--color {
    opacity: 0;
}

#siteNavbar.navbar-hero-overlay.navbar-scrolled .site-logo--white {
    opacity: 0;
}

#siteNavbar.navbar-hero-overlay.navbar-scrolled .site-logo--color {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    html:not(.site-motion-user-on) .site-logo-stack .site-logo {
        transition: none;
    }
}

@media (min-width: 992px) {
    #siteNavbar > .container-xxl {
        max-width: 1320px;
    }

    #siteNavbar .navbar-nav {
        width: fit-content;
        margin-left: auto;
        gap: 0;
        --nav-divider-opacity: 0.22;
    }

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

    #siteNavbar .navbar-nav .nav-item:not(:last-child)::after {
        content: "•";
        margin-inline: 0.28rem;
        font-size: 0.4rem;
        font-weight: 300;
        line-height: 1;
        opacity: var(--nav-divider-opacity);
        color: currentColor;
        pointer-events: none;
        user-select: none;
    }

    #siteNavbar .navbar-nav .nav-link {
        border-radius: 999px;
        transition: color 0.25s ease, background-color 0.25s ease, text-shadow 0.25s ease;
    }

    /* Páginas internas: mismo aspecto que el header del home con scroll */
    #siteNavbar:not(.navbar-hero-overlay) .navbar-nav .nav-link {
        color: var(--bs-dark) !important;
        text-shadow: none;
    }

    #siteNavbar:not(.navbar-hero-overlay) .navbar-nav .nav-link:hover,
    #siteNavbar:not(.navbar-hero-overlay) .navbar-nav .nav-link:focus-visible {
        color: #fff !important;
        background: var(--bs-primary);
    }
}

/* Indicador de ítem activo en navegación (desktop y sidebar móvil). */
#siteNavbar .navbar-nav .nav-link.active,
.mobile-sidebar__link.active {
    color: var(--bs-primary) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
    background: transparent !important;
    text-shadow: none;
}

#siteNavbar .navbar-nav .nav-link.active:hover,
#siteNavbar .navbar-nav .nav-link.active:focus-visible,
.mobile-sidebar__link.active:hover,
.mobile-sidebar__link.active:focus-visible {
    color: var(--bs-primary) !important;
    background: transparent !important;
    text-shadow: none;
}

/* Hero sin fondo (transparente): activo blanco + sombra horizontal */
#siteNavbar.navbar-hero-overlay:not(.navbar-scrolled) .navbar-nav .nav-link.active {
    color: #fff !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.9);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
    background: transparent !important;
    text-shadow:
        -1px 0 6px rgba(20, 20, 22, 0.65),
        1px 0 6px rgba(20, 20, 22, 0.65),
        -4px 0 14px rgba(20, 20, 22, 0.45),
        4px 0 14px rgba(20, 20, 22, 0.45),
        -10px 0 22px rgba(20, 20, 22, 0.28),
        10px 0 22px rgba(20, 20, 22, 0.28);
}

#siteNavbar.navbar-hero-overlay:not(.navbar-scrolled) .navbar-nav .nav-link.active:hover,
#siteNavbar.navbar-hero-overlay:not(.navbar-scrolled) .navbar-nav .nav-link.active:focus-visible {
    color: #fff !important;
    background: transparent !important;
    text-shadow:
        -1px 0 6px rgba(20, 20, 22, 0.65),
        1px 0 6px rgba(20, 20, 22, 0.65),
        -4px 0 14px rgba(20, 20, 22, 0.45),
        4px 0 14px rgba(20, 20, 22, 0.45),
        -10px 0 22px rgba(20, 20, 22, 0.28),
        10px 0 22px rgba(20, 20, 22, 0.28);
}

/* Hero con fondo (scroll): activo en color primario */
#siteNavbar.navbar-hero-overlay.navbar-scrolled .navbar-nav .nav-link.active {
    color: var(--bs-primary) !important;
    text-shadow: none;
}

#siteNavbar.navbar-hero-overlay.navbar-scrolled .navbar-nav .nav-link.active:hover,
#siteNavbar.navbar-hero-overlay.navbar-scrolled .navbar-nav .nav-link.active:focus-visible {
    color: var(--bs-primary) !important;
    background: transparent !important;
    text-shadow: none;
}