/**
 * Panel menú móvil — animación CSS (transform + opacity).
 * El overlay va en #mobile-menu-backdrop, NO en #page.
 * Con menú abierto el header pasa a fixed (header.css); el panel usa padding-top para alinear enlaces.
 */
#mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 15, 15, 0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}

body.mobile-menu-is-open #mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.26s ease, visibility 0s;
}

@media only screen and (max-width: 767px) {
    #mobile-menu .mobile-menu__head {
        display: none !important;
    }

    #mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        display: block !important;
        width: min(288px, 86vw) !important;
        max-width: 86vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding-top: calc(var(--header-site-mobile-height) + 2px) !important;
        box-sizing: border-box;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 1001 !important;
        visibility: visible !important;
        transform: translate3d(-105%, 0, 0);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    body.mobile-menu-is-open #mobile-menu {
        transform: translate3d(0, 0, 0);
    }

    #mobile-menu > ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 0 12px !important;
        margin: 0;
    }

    #mobile-menu > ul > li > a {
        padding: 11px 16px !important;
        min-height: 0 !important;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        line-height: 1.3 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    #mobile-menu > ul > li:last-child > a {
        border-bottom: none;
    }

    #mobile-menu > ul > li > a:hover,
    #mobile-menu > ul > li > a:focus {
        padding-left: 20px !important;
    }

    /* Teléfono y email: más pequeños y centrados en el panel */
    #mobile-menu .top-links:not(.top-links--account) {
        text-align: center;
        padding: 8px 12px 14px !important;
    }

    #mobile-menu .top-links:not(.top-links--account) ul.links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #mobile-menu .top-links:not(.top-links--account) ul.links > li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
    }

    #mobile-menu .top-links:not(.top-links--account) ul.links > li a {
        font-size: 11px !important;
        padding: 4px 6px !important;
        min-height: 0 !important;
        line-height: 1.25 !important;
    }

    #mobile-menu .top-links:not(.top-links--account) ul.links > li i {
        font-size: 11px;
        color: #888;
    }
}

@media (min-width: 768px) {
    #mobile-menu-backdrop {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mobile-menu-backdrop,
    #mobile-menu {
        transition: none !important;
    }
}