/*
 * Reversible navigation surface refinement.
 * Remove this stylesheet link to restore the original navigation appearance.
 */

/* Desktop header: transparent over the hero. */
#cabecera {
    border-bottom: 1px solid transparent;
    background-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
        height .35s ease,
        padding .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* The existing script adds active_menu after the page starts scrolling. */
#cabecera.active_menu {
    height: 78px;
    padding-top: 0;
    border-bottom-color: rgba(55, 91, 160, .14);
    background-color: rgba(239, 245, 255, .88);
    box-shadow: 0 8px 30px rgba(24, 54, 112, .09);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    animation: none;
}

/* Mobile header mirrors the desktop behaviour. */
.navbar {
    border-bottom: 1px solid transparent;
    background-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
        height .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.navbar.active_menu {
    height: 68px;
    border-bottom-color: rgba(55, 91, 160, .14);
    background-color: rgba(239, 245, 255, .9);
    box-shadow: 0 8px 28px rgba(24, 54, 112, .09);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    animation: none;
}

/* Retain the existing drawer layout with a more polished white surface. */
.navigation-menu {
    border-right: 1px solid rgba(55, 91, 160, .14);
    background-color: rgba(242, 247, 255, .94);
    box-shadow: 16px 0 55px rgba(24, 54, 112, .16);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
}

/* Solid fallbacks for browsers without backdrop-filter support. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #cabecera.active_menu,
    .navbar.active_menu,
    .navigation-menu {
        background-color: rgba(242, 247, 255, .98);
    }
}

@media (prefers-reduced-motion: reduce) {
    #cabecera,
    .navbar {
        transition: none;
    }
}