/* ============================================
   MENU HAMBURGER MOBILE PREMIUM
   ============================================ */

.mobile-drawer-toggle,
.mobile-drawer,
.mobile-drawer-overlay {
    display: none;
}

@media (max-width: 1024px) {
    body.mobile-drawer-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }

    .desktop-nav {
        display: none !important;
    }

    body.mobile-drawer-open .app-header {
        z-index: 10040;
    }

    .mobile-drawer-toggle {
        display: inline-flex;
        position: relative;
        z-index: 10050;
        align-items: center;
        justify-content: center;
        width: 2.875rem;
        height: 2.875rem;
        flex: 0 0 2.875rem;
        border: 0;
        border-radius: 999px;
        color: #0f172a;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            background-color 220ms ease,
            color 220ms ease,
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mobile-drawer-toggle span {
        position: absolute;
        left: 0.82rem;
        width: 1.22rem;
        height: 1.5px;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition:
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 180ms ease,
            top 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mobile-drawer-toggle span:nth-child(1) {
        top: 1.03rem;
    }

    .mobile-drawer-toggle span:nth-child(2) {
        top: 1.42rem;
    }

    .mobile-drawer-toggle span:nth-child(3) {
        top: 1.81rem;
    }

    .mobile-drawer-toggle:hover,
    .mobile-drawer-toggle:focus-visible {
        color: #082f49;
        background: rgba(15, 23, 42, 0.055);
        outline: none;
    }

    .mobile-drawer-toggle:focus-visible {
        box-shadow: 0 0 0 3px rgba(199, 154, 43, 0.22);
    }

    .mobile-drawer-toggle:active {
        transform: scale(0.96);
        background: rgba(15, 23, 42, 0.08);
    }

    .mobile-drawer-toggle.is-open span:nth-child(1) {
        top: 1.42rem;
        transform: rotate(45deg);
    }

    .mobile-drawer-toggle.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.25);
    }

    .mobile-drawer-toggle.is-open span:nth-child(3) {
        top: 1.42rem;
        transform: rotate(-45deg);
    }

    .mobile-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10020;
        background: rgba(2, 6, 23, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .mobile-drawer-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-drawer-overlay[hidden] {
        display: none;
    }

    .mobile-drawer {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10030;
        flex-direction: column;
        width: min(85vw, 22.5rem);
        max-width: calc(100vw - 2rem);
        height: 100vh;
        height: 100dvh;
        padding:
            calc(env(safe-area-inset-top, 0px) + clamp(1.5rem, 4vw, 2rem))
            1.25rem
            calc(env(safe-area-inset-bottom, 0px) + 1rem);
        color: #0f172a;
        background: #fffdf7;
        border-left: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow:
            -1.25rem 0 3.5rem rgba(15, 23, 42, 0.18),
            -0.2rem 0 1rem rgba(15, 23, 42, 0.08);
        transform: translate3d(105%, 0, 0);
        visibility: hidden;
        transition:
            transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 320ms step-end;
        will-change: transform;
        overflow: hidden;
    }

    .mobile-drawer.is-open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        transition:
            transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0ms step-start;
    }

    .mobile-drawer:focus {
        outline: none;
    }

    .mobile-drawer-head {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 2.75rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .mobile-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.625rem;
        height: 2.625rem;
        flex: 0 0 2.625rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 999px;
        color: #0f172a;
        background: rgba(255, 255, 255, 0.7);
        transition:
            background-color 200ms ease,
            color 200ms ease,
            transform 200ms ease,
            border-color 200ms ease;
    }

    .mobile-drawer-close svg {
        width: 1.15rem;
        height: 1.15rem;
        stroke-width: 1.85;
    }

    .mobile-drawer-close:hover,
    .mobile-drawer-close:focus-visible {
        color: #082f49;
        background: white;
        border-color: rgba(15, 23, 42, 0.14);
        outline: none;
    }

    .mobile-drawer-close:focus-visible {
        box-shadow: 0 0 0 3px rgba(199, 154, 43, 0.22);
    }

    .mobile-drawer-close:active {
        transform: scale(0.96);
    }

    .mobile-drawer-nav {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.9rem 0 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    .mobile-drawer-nav::-webkit-scrollbar {
        display: none;
    }

    .mobile-drawer-group {
        display: grid;
        gap: 0.22rem;
        padding: 0.42rem 0;
    }

    .mobile-drawer-group + .mobile-drawer-group {
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .mobile-drawer-link {
        display: flex;
        align-items: center;
        min-height: 3.12rem;
        gap: 0.82rem;
        padding: 0.72rem 0.78rem;
        border-radius: 0.95rem;
        color: #172033;
        background: transparent;
        font-size: 0.95rem;
        font-weight: 660;
        line-height: 1.28;
        text-decoration: none;
        transition:
            background-color 210ms ease,
            color 210ms ease,
            transform 210ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mobile-drawer-link svg {
        width: 1.18rem;
        height: 1.18rem;
        flex: 0 0 1.18rem;
        color: #475569;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: color 210ms ease, transform 210ms ease;
    }

    .mobile-drawer-link:hover,
    .mobile-drawer-link:focus-visible {
        color: #082f49;
        background: rgba(15, 23, 42, 0.055);
        outline: none;
    }

    .mobile-drawer-link:focus-visible {
        box-shadow: 0 0 0 3px rgba(199, 154, 43, 0.22);
    }

    .mobile-drawer-link:hover svg,
    .mobile-drawer-link:focus-visible svg {
        color: #082f49;
        transform: translateX(1px);
    }

    .mobile-drawer-link:active {
        transform: scale(0.985);
        background: rgba(15, 23, 42, 0.075);
    }

    .mobile-drawer-actions {
        display: grid;
        gap: 0.46rem;
        margin-top: auto;
        padding-top: 0.82rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, rgba(255, 253, 247, 0), #fffdf7 22%);
    }

    .mobile-drawer-action {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.56rem;
        gap: 0.5rem;
        width: 100%;
        padding: 0.62rem 0.9rem;
        border-radius: 0.86rem;
        color: #082f49;
        background: white;
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 0.22rem 0.75rem rgba(15, 23, 42, 0.04);
        font-size: 0.88rem;
        font-weight: 760;
        line-height: 1.2;
        text-decoration: none;
        transition:
            background-color 220ms ease,
            border-color 220ms ease,
            color 220ms ease,
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 220ms ease;
    }

    .mobile-drawer-action svg {
        width: 1rem;
        height: 1rem;
        flex: 0 0 1rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-drawer-action.primary {
        color: #111827;
        background: #d7ad3a;
        border-color: rgba(133, 77, 14, 0.18);
        box-shadow: 0 0.45rem 1rem rgba(202, 138, 4, 0.14);
    }

    .mobile-drawer-action.whatsapp {
        color: #166534;
        background: white;
        border-color: rgba(22, 101, 52, 0.34);
        box-shadow: none;
    }

    .mobile-drawer-action:hover,
    .mobile-drawer-action:focus-visible {
        color: #082f49;
        background: #f8fafc;
        border-color: rgba(15, 23, 42, 0.14);
        transform: translateY(-1px);
        outline: none;
        box-shadow: 0 0.45rem 1rem rgba(15, 23, 42, 0.07);
    }

    .mobile-drawer-action.primary:hover,
    .mobile-drawer-action.primary:focus-visible {
        color: #111827;
        background: #cfa334;
        box-shadow: 0 0.6rem 1.2rem rgba(202, 138, 4, 0.18);
    }

    .mobile-drawer-action.whatsapp:hover,
    .mobile-drawer-action.whatsapp:focus-visible {
        color: #14532d;
        background: rgba(240, 253, 244, 0.72);
        border-color: rgba(22, 101, 52, 0.48);
        box-shadow: 0 0.35rem 0.9rem rgba(22, 101, 52, 0.07);
    }

    .mobile-drawer-action:focus-visible {
        box-shadow:
            0 0 0 3px rgba(199, 154, 43, 0.22),
            0 0.45rem 1rem rgba(15, 23, 42, 0.07);
    }

    .mobile-drawer-action:active {
        transform: scale(0.985);
    }

}

@media (max-width: 360px) {
    .mobile-drawer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mobile-drawer-link {
        border-radius: 0.92rem;
    }

    .mobile-drawer-action {
        min-height: 2.42rem;
        border-radius: 0.78rem;
    }
}

@media (min-width: 1025px) {
    .mobile-drawer-toggle,
    .mobile-drawer,
    .mobile-drawer-overlay {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer-toggle,
    .mobile-drawer-toggle span,
    .mobile-drawer,
    .mobile-drawer-overlay,
    .mobile-drawer-link,
    .mobile-drawer-link svg,
    .mobile-drawer-action,
    .mobile-drawer-close {
        transition: none !important;
    }
}