.menu-link-icon,
.menu-backdrop {
    display: none;
}

@media (max-width: 760px) {
    body.menu-open {
        overflow: hidden !important;
    }

    body > .menu-backdrop {
        position: fixed;
        z-index: 1001;
        inset: 0;
        display: block;
        visibility: hidden;
        background: rgba(6, 24, 13, .42);
        opacity: 0;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        transition: visibility .3s, opacity .3s ease;
    }

    body > .menu-backdrop.is-visible {
        visibility: visible;
        opacity: 1;
    }

    body > .nav-links {
        position: fixed !important;
        z-index: 1002 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        display: flex !important;
        visibility: hidden;
        width: min(calc(100vw - 28px), 370px) !important;
        max-width: calc(100vw - 28px) !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 104px 22px 34px !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-left: 1px solid rgba(255, 255, 255, .3) !important;
        background: linear-gradient(145deg, rgba(61, 132, 75, .76), rgba(8, 54, 29, .72) 72%, rgba(4, 39, 21, .78)) !important;
        box-shadow: -20px 0 55px rgba(0, 0, 0, .28), inset 1px 0 0 rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
        opacity: 1 !important;
        transform: translateX(105%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(145%);
        backdrop-filter: blur(22px) saturate(145%);
        overscroll-behavior: contain;
        transition: visibility .32s, transform .32s cubic-bezier(.22, 1, .36, 1) !important;
    }

    body > .nav-links.is-open {
        visibility: visible;
        transform: translateX(0) !important;
    }

    body > .nav-links::before {
        content: "Explorar BoviVac";
        display: block;
        margin: 0 10px 12px;
        color: rgba(255, 255, 255, .68);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    body > .nav-links li {
        width: 100%;
    }

    body > .nav-links a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 58px;
        padding: 10px 11px !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 15px;
        color: #fff !important;
        background: rgba(255, 255, 255, .055);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
        font-size: clamp(.82rem, 4vw, 1rem) !important;
        font-weight: 700;
        white-space: nowrap;
    }

    body > .nav-links a::after {
        display: none !important;
    }

    body > .nav-links a:hover,
    body > .nav-links a:focus-visible,
    body > .nav-links a[aria-current="page"] {
        border-color: rgba(255, 255, 255, .3) !important;
        background: rgba(255, 255, 255, .16) !important;
    }

    body > .nav-links .menu-link-icon {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        border-radius: 11px;
        color: #225f31;
        background: #fff;
        font-size: .92rem;
    }
}

@media (max-width: 360px) {
    body > .nav-links {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body > .nav-links .menu-link-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

/* Navegación móvil compacta: tarjeta flotante centrada. */
@media (max-width: 760px) {
    body > .nav-links {
        top: max(14px, env(safe-area-inset-top)) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: calc(100vw - 28px) !important;
        max-width: 420px !important;
        height: auto !important;
        max-height: calc(100dvh - 28px) !important;
        padding: 68px 16px 18px !important;
        border: 1px solid rgba(255, 255, 255, .34) !important;
        border-radius: 22px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-shadow: 0 22px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
        transform: translate(-50%, -22px) scale(.97) !important;
        transform-origin: top center;
    }

    body > .nav-links.is-open {
        transform: translate(-50%, 0) scale(1) !important;
    }

    body > .nav-links::before {
        margin: 0 48px 8px 4px;
    }

    body > .nav-links a {
        min-height: 54px;
    }

    body > .nav-links .menu-panel-close {
        position: absolute !important;
        top: 13px !important;
        right: 13px !important;
    }
}