/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   MENU V2

   IMPORTANTE:
   .menu-hero NO SE MODIFICA.
   ========================================================== */


/* ==========================================================
   1. AREA GENERAL DE LA CARTA
   ========================================================== */

body[data-page="menu"]
.menu-browser {
    position: relative !important;
    isolation: isolate !important;

    padding:
        72px 0
        100px !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            rgba(4,6,9,.82),
            rgba(4,6,9,.88)
        ),
        url("../assets/images/imagen-fondo-vertical.png")
        center top / cover
        fixed
        no-repeat !important;
}


body[data-page="menu"]
.menu-browser::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -1 !important;

    opacity: 1 !important;

    background:
        radial-gradient(
            circle at 7% 12%,
            rgba(239,15,116,.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 94% 35%,
            rgba(8,121,216,.09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.26)
        ) !important;

    pointer-events: none !important;
}


body[data-page="menu"]
.menu-browser
> .container {
    width:
        min(
            1320px,
            calc(100% - 48px)
        ) !important;
}


/* ==========================================================
   2. CABECERA "NUESTRA CARTA"
   ========================================================== */

body[data-page="menu"]
.menu-tools {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(320px,.62fr) !important;

    gap:
        64px !important;

    align-items:
        center !important;

    margin:
        0 0 18px !important;

    padding:
        48px 50px !important;

    overflow:
        hidden !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:
        0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(10,13,18,.96),
            rgba(7,10,14,.89)
        ) !important;

    box-shadow:
        0 22px 65px rgba(0,0,0,.24) !important;

    backdrop-filter:
        blur(10px) !important;
}


body[data-page="menu"]
.menu-tools::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 3px !important;

    background:
        linear-gradient(
            90deg,
            #ef0f74 0%,
            #ffbd0a 48%,
            #0879d8 100%
        ) !important;
}


body[data-page="menu"]
.menu-tools
.eyebrow-dark {
    color:
        #ef0f74 !important;

    font-size:
        .68rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .20em !important;

    text-transform:
        uppercase !important;
}


body[data-page="menu"]
.menu-tools h2 {
    margin:
        10px 0 12px !important;

    color:
        #fff !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        clamp(
            3rem,
            4.6vw,
            5rem
        ) !important;

    line-height:
        .94 !important;

    letter-spacing:
        -.045em !important;
}


body[data-page="menu"]
.menu-tools
> div
> p:last-child {
    max-width:
        620px !important;

    margin:
        0 !important;

    color:
        rgba(255,255,255,.64) !important;

    line-height:
        1.65 !important;
}


/* ==========================================================
   3. BUSCADOR
   ========================================================== */

body[data-page="menu"]
.menu-search {
    position: relative !important;

    display: grid !important;

    gap:
        10px !important;

    color:
        rgba(255,255,255,.52) !important;

    font-size:
        .66rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .12em !important;

    text-transform:
        uppercase !important;
}


body[data-page="menu"]
.menu-search input {
    width:
        100% !important;

    min-height:
        54px !important;

    padding:
        13px 48px
        13px 18px !important;

    border:
        1px solid rgba(255,255,255,.14) !important;

    border-radius:
        0 !important;

    outline:
        none !important;

    background:
        rgba(3,6,10,.76) !important;

    color:
        #fff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02) !important;

    transition:
        border-color .16s ease,
        box-shadow .16s ease !important;
}


body[data-page="menu"]
.menu-search input::placeholder {
    color:
        rgba(255,255,255,.34) !important;
}


body[data-page="menu"]
.menu-search input:focus {
    border-color:
        #ef0f74 !important;

    box-shadow:
        0 0 0 3px rgba(239,15,116,.10) !important;
}


body[data-page="menu"]
.menu-search svg {
    position:
        absolute !important;

    right:
        16px !important;

    bottom:
        17px !important;

    width:
        19px !important;

    height:
        19px !important;

    color:
        #ffbd0a !important;

    stroke:
        currentColor !important;

    fill:
        none !important;
}


/* ==========================================================
   4. CATEGORIAS STICKY
   ========================================================== */

body[data-page="menu"]
.category-tabs {
    position:
        sticky !important;

    z-index:
        20 !important;

    top:
        var(--header-height) !important;

    display:
        flex !important;

    gap:
        9px !important;

    overflow-x:
        auto !important;

    margin:
        0 0 18px !important;

    padding:
        13px 14px !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    background:
        rgba(6,9,13,.92) !important;

    box-shadow:
        0 14px 38px rgba(0,0,0,.20) !important;

    backdrop-filter:
        blur(18px) !important;

    scrollbar-width:
        none !important;
}


body[data-page="menu"]
.category-tabs::-webkit-scrollbar {
    display:
        none !important;
}


body[data-page="menu"]
.category-tabs a {
    flex:
        none !important;

    padding:
        10px 15px !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    border-radius:
        999px !important;

    background:
        rgba(255,255,255,.035) !important;

    color:
        rgba(255,255,255,.70) !important;

    font-size:
        .69rem !important;

    font-weight:
        700 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    transition:
        color .16s ease,
        border-color .16s ease,
        background .16s ease !important;
}


body[data-page="menu"]
.category-tabs a:hover,
body[data-page="menu"]
.category-tabs a:focus-visible {
    border-color:
        #ef0f74 !important;

    background:
        rgba(239,15,116,.10) !important;

    color:
        #fff !important;
}


/* ==========================================================
   5. ESTADO DE CARGA
   ========================================================== */

body[data-page="menu"]
.menu-status {
    padding:
        60px 20px !important;

    color:
        rgba(255,255,255,.55) !important;

    text-align:
        center !important;
}


/* ==========================================================
   6. CATEGORIA
   ========================================================== */

body[data-page="menu"]
.menu-category {
    position:
        relative !important;

    scroll-margin-top:
        calc(
            var(--header-height)
            + 84px
        ) !important;

    margin:
        0 !important;

    padding:
        64px 0 8px !important;

    color:
        #fff !important;

    background:
        transparent !important;

    border:
        0 !important;
}


body[data-page="menu"]
.menu-category::before,
body[data-page="menu"]
.menu-category::after {
    content:
        none !important;

    display:
        none !important;
}


body[data-page="menu"]
.menu-category-heading {
    display:
        grid !important;

    grid-template-columns:
        56px
        minmax(0,1fr) !important;

    gap:
        22px !important;

    align-items:
        start !important;

    margin:
        0 0 28px !important;
}


body[data-page="menu"]
.menu-category-number {
    padding-top:
        11px !important;

    border-top:
        2px solid #ef0f74 !important;

    color:
        #ffbd0a !important;

    font-size:
        .67rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .14em !important;
}


body[data-page="menu"]
.menu-category-heading h2 {
    margin:
        0 !important;

    color:
        #fff !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.8rem
        ) !important;

    line-height:
        .96 !important;

    letter-spacing:
        -.045em !important;
}


body[data-page="menu"]
.menu-category-heading p {
    max-width:
        680px !important;

    margin:
        11px 0 0 !important;

    color:
        rgba(255,255,255,.55) !important;

    font-size:
        .88rem !important;

    line-height:
        1.6 !important;
}


/* ==========================================================
   7. GRUPOS DE PRODUCTOS
   ========================================================== */

body[data-page="menu"]
.menu-product-groups {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    gap:
        18px !important;

    align-items:
        start !important;
}


body[data-page="menu"]
.menu-product-groups.is-single {
    grid-template-columns:
        1fr !important;
}


body[data-page="menu"]
.menu-product-group {
    min-width:
        0 !important;

    padding:
        20px !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    background:
        rgba(8,11,15,.60) !important;

    box-shadow:
        0 16px 42px rgba(0,0,0,.14) !important;
}


body[data-page="menu"]
.menu-product-group-title {
    margin:
        0 0 16px !important;

    padding:
        0 0 12px !important;

    border-bottom:
        1px solid rgba(255,255,255,.08) !important;

    color:
        rgba(255,255,255,.68) !important;

    font-size:
        .68rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .12em !important;

    text-transform:
        uppercase !important;
}


body[data-page="menu"]
.menu-group-list,
body[data-page="menu"]
.menu-items-grid {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        10px !important;

    border:
        0 !important;

    background:
        transparent !important;
}


/* ==========================================================
   8. TARJETA DE PRODUCTO
   ========================================================== */

body[data-page="menu"]
.menu-item-card,
body[data-page="menu"]
.menu-item-card.is-featured {
    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto !important;

    min-width:
        0 !important;

    min-height:
        112px !important;

    overflow:
        hidden !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:
        0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(14,18,23,.97),
            rgba(8,11,15,.97)
        ) !important;

    box-shadow:
        none !important;

    color:
        #fff !important;

    transform:
        none !important;

    transition:
        border-color .17s ease,
        background .17s ease,
        transform .17s ease !important;
}


body[data-page="menu"]
.menu-item-card:hover {
    border-color:
        rgba(239,15,116,.50) !important;

    background:
        linear-gradient(
            135deg,
            rgba(22,14,21,.98),
            rgba(9,12,16,.98)
        ) !important;

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18) !important;
}


body[data-page="menu"]
.menu-item-card.is-featured::before {
    content:
        "DESTACADO" !important;

    position:
        absolute !important;

    top:
        0 !important;

    right:
        0 !important;

    z-index:
        3 !important;

    padding:
        6px 9px !important;

    background:
        #ffbd0a !important;

    color:
        #07090c !important;

    font-size:
        .53rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        .08em !important;
}


/* ==========================================================
   9. IMAGEN
   ========================================================== */

body[data-page="menu"]
.menu-item-media {
    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    min-height:
        210px !important;

    max-height:
        260px !important;

    overflow:
        hidden !important;

    background:
        #0a0d11 !important;
}


body[data-page="menu"]
.menu-item-media img {
    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

    transition:
        transform .4s ease !important;
}


body[data-page="menu"]
.menu-item-card:hover
.menu-item-media img {
    transform:
        scale(1.035) !important;
}


/* ==========================================================
   10. CUERPO DE PRODUCTO
   ========================================================== */

body[data-page="menu"]
.menu-item-body {
    grid-column:
        1 / -1 !important;

    display:
        flex !important;

    min-width:
        0 !important;

    height:
        100% !important;

    padding:
        18px 20px !important;

    flex-direction:
        column !important;

    background:
        transparent !important;
}


body[data-page="menu"]
.menu-item-heading {
    display:
        grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto !important;

    gap:
        18px !important;

    align-items:
        start !important;
}


body[data-page="menu"]
.menu-item-heading h3 {
    margin:
        2px 0 0 !important;

    color:
        #fff !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        clamp(
            1.2rem,
            1.7vw,
            1.55rem
        ) !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -.02em !important;
}


body[data-page="menu"]
.menu-item-badge {
    color:
        #ef0f74 !important;

    font-size:
        .55rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase !important;
}


body[data-page="menu"]
.menu-item-description {
    max-width:
        90% !important;

    margin:
        9px 0 15px !important;

    color:
        rgba(255,255,255,.53) !important;

    font-size:
        .77rem !important;

    line-height:
        1.5 !important;
}


/* ==========================================================
   11. PRECIOS
   ========================================================== */

body[data-page="menu"]
.menu-price-list {
    display:
        grid !important;

    min-width:
        120px !important;

    gap:
        6px !important;
}


body[data-page="menu"]
.menu-price-option {
    display:
        flex !important;

    min-height:
        38px !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        10px !important;

    padding:
        7px 10px !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    border-radius:
        0 !important;

    background:
        rgba(255,255,255,.035) !important;

    color:
        #fff !important;

    font-family:
        inherit !important;
}


body[data-page="menu"]
button.menu-price-option {
    cursor:
        pointer !important;
}


body[data-page="menu"]
.menu-price-option span {
    color:
        rgba(255,255,255,.46) !important;

    font-size:
        .56rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .06em !important;

    white-space:
        nowrap !important;
}


body[data-page="menu"]
.menu-price-option strong {
    color:
        #ffbd0a !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        .96rem !important;

    white-space:
        nowrap !important;
}


body[data-page="menu"]
.menu-price-option.is-active {
    border-color:
        rgba(239,15,116,.55) !important;

    background:
        rgba(239,15,116,.08) !important;
}


body[data-page="menu"]
.menu-price-option.is-single {
    display:
        grid !important;

    min-width:
        102px !important;

    min-height:
        0 !important;

    justify-items:
        end !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;
}


body[data-page="menu"]
.menu-price-option.is-single span {
    color:
        rgba(255,255,255,.38) !important;

    font-size:
        .50rem !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase !important;
}


body[data-page="menu"]
.menu-price-option.is-single strong {
    color:
        #ffbd0a !important;

    font-size:
        1.28rem !important;
}


/* ==========================================================
   12. AGREGAR AL CARRITO
   ========================================================== */

body[data-page="menu"]
.menu-item-purchase {
    display:
        flex !important;

    margin-top:
        auto !important;

    padding-top:
        14px !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        12px !important;

    border-top:
        1px solid rgba(255,255,255,.07) !important;
}


body[data-page="menu"]
.menu-item-purchase
.add-to-cart {
    display:
        grid !important;

    width:
        38px !important;

    min-width:
        38px !important;

    height:
        38px !important;

    min-height:
        38px !important;

    padding:
        0 !important;

    place-items:
        center !important;

    border:
        1px solid #ef0f74 !important;

    border-radius:
        50% !important;

    background:
        #ef0f74 !important;

    color:
        #fff !important;

    box-shadow:
        0 9px 24px rgba(239,15,116,.20) !important;

    font-size:
        1.15rem !important;

    font-weight:
        700 !important;
}


body[data-page="menu"]
.menu-item-purchase
.add-to-cart:hover {
    background:
        #ff2187 !important;

    transform:
        translateY(-1px) !important;
}


body[data-page="menu"]
.availability-badge {
    color:
        #ffbd0a !important;
}


body[data-page="menu"]
.menu-order-note {
    color:
        rgba(255,255,255,.42) !important;

    font-size:
        .61rem !important;
}


/* ==========================================================
   13. BLOQUE FINAL "TU PEDIDO"
   ========================================================== */

body[data-page="menu"]
.menu-visit {
    position:
        relative !important;

    padding:
        76px 0 !important;

    overflow:
        hidden !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            125deg,
            #111318 0%,
            #150910 48%,
            #07111c 100%
        ) !important;
}


body[data-page="menu"]
.menu-visit::before {
    content:
        "" !important;

    position:
        absolute !important;

    top:
        0 !important;

    left:
        0 !important;

    width:
        100% !important;

    height:
        3px !important;

    background:
        linear-gradient(
            90deg,
            #ef0f74,
            #ffbd0a,
            #0879d8
        ) !important;
}


body[data-page="menu"]
.menu-visit-grid {
    display:
        grid !important;

    grid-template-columns:
        1.15fr
        .85fr !important;

    gap:
        70px !important;

    align-items:
        center !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


body[data-page="menu"]
.menu-visit h2 {
    margin:
        12px 0 0 !important;

    color:
        #fff !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        clamp(
            3rem,
            5.5vw,
            5.6rem
        ) !important;

    line-height:
        .93 !important;

    letter-spacing:
        -.05em !important;
}


body[data-page="menu"]
.menu-visit-grid
> p {
    margin:
        0 !important;

    color:
        rgba(255,255,255,.62) !important;

    font-size:
        1rem !important;

    line-height:
        1.7 !important;
}


/* ==========================================================
   14. CARRITO — SOLO EN MENU
   ========================================================== */

body[data-page="menu"]
.cart-drawer {
    background:
        #080b0f !important;

    color:
        #fff !important;

    border-left:
        1px solid rgba(255,255,255,.10) !important;
}


body[data-page="menu"]
.cart-header {
    border-bottom:
        1px solid rgba(255,255,255,.09) !important;
}


body[data-page="menu"]
.cart-header h2,
body[data-page="menu"]
.cart-item h3 {
    color:
        #fff !important;
}


body[data-page="menu"]
.cart-item {
    border-color:
        rgba(255,255,255,.08) !important;
}


body[data-page="menu"]
.cart-summary {
    border-color:
        rgba(255,255,255,.10) !important;
}


body[data-page="menu"]
.cart-whatsapp-field input {
    border-color:
        rgba(255,255,255,.14) !important;

    background:
        #05080c !important;

    color:
        #fff !important;
}


/* ==========================================================
   15. RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {

    body[data-page="menu"]
    .menu-tools {
        grid-template-columns:
            1fr !important;

        gap:
            30px !important;
    }


    body[data-page="menu"]
    .menu-product-groups {
        grid-template-columns:
            1fr !important;
    }


    body[data-page="menu"]
    .menu-visit-grid {
        grid-template-columns:
            1fr !important;

        gap:
            28px !important;
    }
}


@media (max-width: 680px) {

    body[data-page="menu"]
    .menu-browser {
        padding:
            38px 0
            70px !important;

        background-attachment:
            scroll !important;
    }


    body[data-page="menu"]
    .menu-browser
    > .container {
        width:
            calc(100% - 28px) !important;
    }


    body[data-page="menu"]
    .menu-tools {
        padding:
            32px 24px !important;
    }


    body[data-page="menu"]
    .menu-tools h2 {
        font-size:
            clamp(
                2.6rem,
                12vw,
                4rem
            ) !important;
    }


    body[data-page="menu"]
    .category-tabs {
        margin-left:
            0 !important;

        margin-right:
            0 !important;
    }


    body[data-page="menu"]
    .menu-category {
        padding-top:
            46px !important;
    }


    body[data-page="menu"]
    .menu-category-heading {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    body[data-page="menu"]
    .menu-category-number {
        width:
            48px !important;
    }


    body[data-page="menu"]
    .menu-product-group {
        padding:
            14px !important;
    }


    body[data-page="menu"]
    .menu-item-heading {
        grid-template-columns:
            minmax(0,1fr)
            auto !important;

        gap:
            12px !important;
    }


    body[data-page="menu"]
    .menu-item-body {
        padding:
            17px !important;
    }


    body[data-page="menu"]
    .menu-price-option.is-single strong {
        font-size:
            1.12rem !important;
    }


    body[data-page="menu"]
    .menu-visit {
        padding:
            58px 0 !important;
    }
}