:root {
    --dark: #2D4A2D;
    --mid: #5A7F3A;
    --cream: #E8F0D4;
    --fire: #E8601A;
    --black: #1A1A18;
    --gray: #5F5E5A;
    --serif: 'Noto Serif KR', serif;
    --ui: 'Plus Jakarta Sans', system-ui, sans-serif;

    --surface: #fff;
    --letras: var(--dark);
    --titulos: var(--dark);
    --precio: var(--fire);
    --primary: var(--cream);
    --text: var(--black);
    --muted: var(--gray);
    --border: var(--dark);
    --radius: 18px;
    --container: 1080px;
    /* Columna principal de home (hero, categorías, más vendidos) en desktop */
    --container-wide: 1400px;
    --fondobot: var(--dark);
    --fondo: var(--cream);
    --fondomodal: var(--cream);
    --texto: var(--gray);
    --texto2: var(--dark);
    --seccionesdrawer: var(--black);

    /* Ritmo vertical entre secciones (solo padding; sin márgenes entre bloques de color) */
    --section-pad-block: clamp(24px, 4.5vw, 40px);
    --section-pad-block-tight: clamp(16px, 3vw, 28px);
    --section-pad-inline: clamp(14px, 4vw, 28px);
    --sticky-header-offset: 76px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

html {
    scroll-behavior: smooth
}

/* fondo body pagina */

body {
    margin: 0;
    font-family: var(--ui);
    background: var(--cream);
    color: var(--black);
}

.page-main {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px
}

/* fondo header pagina */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--dark);
    border-bottom: 0;
    backdrop-filter: none;
    padding: 0;
}

.header .container {
    max-width: 100%;
    padding: 0 16px;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding: 0;
}

.header__logo img,
.header .brand__img {
    height: 85px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    padding: 0;
    display: block;
    margin: 0 auto;
    filter: brightness(1.1);
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit
}

.header__actions {
    display: flex;
    gap: 10px;
    align-items: center
}

.icon-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* Header checkout: botón volver (mismo estilo que boceto .hbtn) */
.hbtn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--cream);
}

.hbtn svg {
    width: 20px;
    height: 20px;
    stroke: var(--cream);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hamburger {
    width: 18px;
    height: 2px;
    background: var(--cream);
    position: relative;
    display: block;
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--cream);
}

.hamburger::before {
    top: -6px
}

.hamburger::after {
    top: 6px
}

.section {
    padding: 22px 0
}

.section__title,
.sec-title {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--dark);
    margin: 0 0 16px;
}

.sec-title {
    font-size: clamp(1.125rem, 2.2vw + 0.65rem, 1.375rem);
}

.section__title {
    font-size: 22px;
    margin: 0 0 10px;
}

.sec {
    margin: 0;
    padding: var(--section-pad-block) var(--section-pad-inline) var(--section-pad-block-tight);
}

/* Corte limpio hero → categorías: crema a todo el ancho (sin franjas ni “muescas”) */
#catalogo {
    background: var(--cream);
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.sec-alt {
    margin: 0;
    background: var(--dark);
    padding: var(--section-pad-block) var(--section-pad-inline) calc(var(--section-pad-block) + 4px);
}

.sec-white {
    margin: 0;
    background-color: #ffffff !important;
    padding: clamp(32px, 5vw, 48px) 0 clamp(18px, 3vw, 28px);
    width: 100%;
    display: flow-root;
    position: relative;
    border: none;
}

.sec-white .container {
    max-width: 1080px;
    margin: 0 auto;
    background: transparent;
}

.sec-white .sec-title {
    margin-top: 0;
    margin-bottom: 40px;
    text-align: center;
    color: var(--dark);
}

@media (min-width: 901px) {

    /* ¿Cómo hago mi Pedido? — ancho alineado, 3 columnas */
    .sec-white {
        padding: clamp(48px, 6vw, 72px) clamp(16px, 3vw, 28px) clamp(40px, 5vw, 56px);
    }

    .sec-white .container {
        max-width: min(var(--container-wide), 100%);
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(20px, 2.5vw, 36px);
        padding-right: clamp(20px, 2.5vw, 36px);
    }

    .sec-white .sec-title {
        font-family: var(--ui);
        font-weight: 700;
        font-size: clamp(1.05rem, 1.75vw + 0.55rem, 1.25rem);
        color: var(--black);
        text-align: center;
        margin-bottom: 0;
    }

    .sec-white .steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(28px, 4vw, 48px);
        width: 100%;
        margin-top: clamp(36px, 4vw, 48px);
        align-items: start;
    }

    .sec-white .step {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 16px;
    }

    .sec-white .step__num {
        width: 52px;
        height: 52px;
        font-size: 20px;
        font-weight: 700;
        background: var(--fire);
        color: #fff;
    }

    .sec-white .step__title {
        font-size: 17px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 6px;
    }

    .sec-white .step__sub {
        font-size: 14px;
        line-height: 1.55;
        color: var(--gray);
        max-width: 28ch;
        margin: 0 auto;
    }
}

.sec-alt .sec-title {
    color: var(--cream);
}

/* #info — Mucho más que un Fermento (layout integrado, glass cards) */
#info.sec-alt {
    background: #2d4127;
    padding: clamp(60px, 8vw, 100px) 0;
}

#info .container.info-dual {
    max-width: min(var(--container-wide), 100%);
    margin: 0 auto;
    padding-left: var(--section-pad-inline);
    padding-right: var(--section-pad-inline);
    display: grid;
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
}

#info .info-dual__text {
    text-align: left;
    min-width: 0;
}

#info .info-dual__aside {
    min-width: 0;
}

#info .info-dual__title {
    font-family: var(--ui);
    font-weight: 700;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: #ffffff;
    white-space: normal;
}

#info .ben-intro {
    margin: 0;
    max-width: 100%;
    font-family: var(--ui);
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    text-wrap: balance;
}

#info .ben-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2.5vw, 24px);
    margin: 0;
    min-width: 0;
}

#info .ben {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: clamp(18px, 3vw, 26px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

#info .ben__title,
#info .ben__text {
    overflow-wrap: anywhere;
    margin: 0;
}

#info .ben__ico {
    width: auto;
    height: auto;
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
}

#info .ben__ico svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#info .ben__title {
    font-family: var(--ui);
    font-size: clamp(0.875rem, 0.35vw + 0.8rem, 1rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.3;
}

#info .ben__text {
    font-family: var(--ui);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #a8c27a;
}

@media (max-width: 900px) {
    #info.sec-alt {
        padding: clamp(60px, 8vw, 100px) 0;
    }

    #info .container.info-dual {
        padding-inline: 20px;
    }

    #info .info-dual__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40px;
    }

    #info .info-dual__title,
    #info .ben-intro {
        text-align: center;
    }

    #info .info-dual__title {
        font-size: clamp(1.4rem, 4vw, 1.8rem);
        width: 100%;
    }

    #info .ben-intro {
        max-width: 32ch;
        text-wrap: balance;
    }

    #info .ben-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 16px;
    }

    #info .ben {
        align-items: flex-start;
        text-align: left;
        height: auto;
        padding: 24px 20px;
        justify-content: flex-start;
    }

    #info .ben__ico {
        justify-content: flex-start;
        margin-bottom: 8px;
    }
}

@media (min-width: 901px) {
    #info .container.info-dual {
        grid-template-columns: 1.2fr 1fr;
        gap: clamp(40px, 5.5vw, 80px);
        align-items: center;
    }

    /* Centrado + columna de intro acotada (solo desktop) */
    #info .info-dual__text {
        text-align: center;
    }

    #info .info-dual__title {
        font-size: clamp(1.8rem, 3vw, 2.5rem);
        text-align: center;
    }

    #info .ben-intro {
        max-width: 38ch;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Pirámide invertida: grilla 2×2 en el aside */
    #info .ben-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.step__num {
    width: 34px;
    height: 34px;
    background: var(--fire);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.step__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 2px;
}

.step__sub {
    font-size: 12px;
    color: var(--gray);
    line-height: 1.5;
}

.about-wrap {
    padding-bottom: 8px;
}

/* ── HERO ────────────────────────────────── */
.hero {
    background: var(--dark);
    padding: clamp(28px, 6vw, 56px) var(--section-pad-inline) clamp(32px, 5vw, 48px);
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0;
}

.hero__badge {
    display: inline-block;
    background: #f08a47;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 99px;
    margin-bottom: 16px;
}

.hero__title {
    font-family: var(--serif);
    font-size: clamp(1.45rem, 5vw + 0.4rem, 2rem);
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    margin: 0 auto 12px;
    max-width: 22ch;
}

.hero__title-line {
    display: block;
}

.hero__title-line--accent em {
    color: #b89c20;
    font-style: italic;
    font-weight: 600;
}

.hero__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    margin: 0 0 26px;
}

@media (min-width: 900px) {
    .hero__sub {
        max-width: 42ch;
        margin-left: auto;
        margin-right: auto;
    }
}

.hero__btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero__btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 14px;
    padding: 12px 22px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ui);
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.hero__btn--primary {
    background: var(--cream);
    color: var(--dark);
    border: none;
}

.hero__btn--ghost {
    background: transparent;
    color: var(--cream);
    border: 1.5px solid var(--mid);
}

.hero__btn:focus-visible {
    outline: 2px solid #f08a47;
    outline-offset: 3px;
}

a.btn-cream,
a.btn-outline,
button.btn-cream,
button.btn-outline {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn-cream {
    background: var(--cream);
    color: var(--dark);
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ui);
    cursor: pointer;
}

.btn-outline {
    background: transparent;
    color: var(--cream);
    border: 1.5px solid var(--mid);
    border-radius: 12px;
    padding: 12px 22px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--ui);
    cursor: pointer;
}

a.btn-cream:focus-visible,
a.btn-outline:focus-visible,
button.btn-cream:focus-visible,
button.btn-outline:focus-visible {
    outline: 2px solid var(--fire);
    outline-offset: 3px;
}

.section__text {
    margin: 0;
    color: var(--muted);
    max-width: 70ch
}

.subhead {
    margin-top: 16px
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Precio card mas vendidos*/

.card__price {
    font-weight: 900;
    color: var(--precio);
    margin-top: 6px;
}

.card__desc {
    display: none;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.25
}

.btn {
    border: 1px solid var(--border);
    background: #fff;
    padding: 10px 10px;
    border-radius: 6px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn--primary {
    background: var(--primary);
    color: #073b2a;
}

.btn--ghost {
    background: var(--letras);
    color: #fff;
}

.tip {
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    justify-content: center;
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 3000 !important;
}

.modal.is-open {
    display: block
}

.modal__card {
    position: relative;
    width: min(560px, 92vw);
    margin: 20px auto 0;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--fondomodal);
    border-radius: 22px;
    overflow: hidden;
    border: 2px solid var(--border);
}

.modal__card--cart {
    width: min(640px, 92vw)
}

.modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #333;
}

.qty {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart__footer {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.header__inner--centerLogo {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    padding: 0;
    gap: 8px;
}

/* Botones drawer / búsqueda / carrito: estilo hbtn */
.icon-btn--square {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 0;
    color: var(--cream);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    background: var(--cream);
}

.brand--center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.brand__img {
    max-width: 60vw;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Carrito header */
.cart-btn {
    position: relative;
    color: var(--cream);
    background: rgba(255, 255, 255, 0.12);
}

.cart-ico svg {
    width: 22px;
    height: 22px;
    fill: var(--cream);
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--fire);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.subhead__title {
    margin: 0 0 10px;
    font-weight: 800;
    text-align: center;
    font-size: 18px;
    margin-top: 18px;
    color: var(--titulos);
    font-family: var(--serif);
}

/* Card mas vendidos */

.card {
    border: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    cursor: pointer;
    flex-direction: column;
}

.card__img {
    aspect-ratio: 1/1;
    background: #eaeaea;
}

.cats.cats-grid {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 10px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.cats {
    margin-top: 16px;
}

.cat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 18px;
    overflow: hidden;
    background: var(--dark);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    min-height: 150px;
    min-width: 0;
}

.cat::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cat-img-mobile);
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.cat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(10, 25, 10, 0.70) 0%, rgba(10, 25, 10, 0.05) 55%);
    pointer-events: none;
}

.cat--special {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 180px;
    height: auto;
}

.cat.is-active {
    outline: 2px solid var(--fire);
    outline-offset: 2px;
}

.cat__name {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 12px 14px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-align: left;
    overflow-wrap: anywhere;
    hyphens: auto;
    background: none;
    border: 0;
    white-space: normal;
    flex-shrink: 0;
}

.best-sec {
    margin: clamp(32px, 5vw, 48px) 0 0;
    background: var(--cream);
    padding: var(--section-pad-block) 0 calc(var(--section-pad-block) + 4px);
}

.best-sec__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    margin-top: 40px;
    margin-bottom: 16px;
}

.best-sec__head .sec-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.best-sec .sec-title {
    color: var(--dark);
    padding: 0;
    font-size: 18px;
}

.best-wrap {
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.best-wrap--empty {
    padding: 0 16px;
}

.best-container {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}


@media (max-width: 900px) {
    .best-wrap:not(.best-wrap--empty):not(.best-wrap--single) .best-container {
        padding: 0;
    }

}

@media (min-width: 901px) {
    .best-sec {
        margin-top: clamp(44px, 6vw, 72px);
    }

    /* Misma columna que hero / categorías; laterales algo más ajustados para el carrusel */
    #mas-vendidos.best-sec {
        padding-left: clamp(10px, 2vw, 20px);
        padding-right: clamp(10px, 2vw, 20px);
        box-sizing: border-box;
    }

    #mas-vendidos .container {
        max-width: min(var(--container-wide), 100%);
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(12px, 2vw, 28px);
        padding-right: clamp(12px, 2vw, 28px);
        width: 100%;
        box-sizing: border-box;
    }

    #mas-vendidos .best-sec__head {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
    }

    /* Mismo tamaño que Categorías (override .best-sec .sec-title 18px) */
    #catalogo .sec-title,
    #mas-vendidos .sec-title {
        font-family: var(--ui);
        font-weight: 700;
        color: var(--dark);
        font-size: clamp(1.125rem, 2.2vw + 0.65rem, 1.375rem);
    }

    .best-sec__head {
        display: block;
        margin-bottom: 16px;
    }

    .best-wrap {
        padding: 12px 0 0;
    }

    .best-wrap:not(.best-wrap--empty):not(.best-wrap--single) .best-container {
        position: relative;
        overflow: visible;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 4px;
        isolation: isolate;
    }

    .best-wrap:not(.best-wrap--empty):not(.best-wrap--single) .best-scroll {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    /* Más vendidos — look tipo Apple Store (solo desktop); 5 cards visibles, menos inset lateral */
    #mas-vendidos #bestGrid.best-scroll {
        --best-gap: 24px;
        --best-inset: clamp(2px, 0.8vw, 10px);
        gap: var(--best-gap);
        padding: 20px var(--best-inset);
        scroll-padding-inline: var(--best-inset);
        scroll-snap-type: none;
    }

    #mas-vendidos #bestGrid > .card {
        flex: 0 0 calc((100% - 4 * var(--best-gap)) / 5);
        width: calc((100% - 4 * var(--best-gap)) / 5);
        max-width: calc((100% - 4 * var(--best-gap)) / 5);
        min-width: 0;
        scroll-snap-align: none;
        border-radius: 24px;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        background: #fff;
    }

    #mas-vendidos #bestGrid .card__img {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 1 / 1;
        border-radius: 24px 24px 0 0;
        background-size: cover;
        background-position: center;
    }

    #mas-vendidos #bestGrid > .card:nth-child(6n + 1) .card__img {
        background-color: #e4e8d4;
    }

    #mas-vendidos #bestGrid > .card:nth-child(6n + 2) .card__img {
        background-color: #f3e1e6;
    }

    #mas-vendidos #bestGrid > .card:nth-child(6n + 3) .card__img {
        background-color: #fdf3d4;
    }

    #mas-vendidos #bestGrid > .card:nth-child(6n + 4) .card__img {
        background-color: #dff3ea;
    }

    #mas-vendidos #bestGrid > .card:nth-child(6n + 5) .card__img {
        background-color: #efe6d8;
    }

    #mas-vendidos #bestGrid > .card:nth-child(6n + 6) .card__img {
        background-color: #e4e0ec;
    }

    #mas-vendidos #bestGrid .card__title {
        display: block;
        text-align: left;
        font-size: 18px;
        font-weight: 600;
        color: var(--dark);
        letter-spacing: -0.02em;
        overflow: visible;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        -webkit-box-orient: unset;
    }

    /* Una línea como mobile: nombre + • + ML (ML en coral, igual que .name-size global) */
    #mas-vendidos #bestGrid .card__title .name-size {
        display: inline;
        margin: 0;
        font-size: inherit;
        font-weight: 800;
        color: #e23d3d;
    }

    #mas-vendidos #bestGrid .card__title .name-sep {
        display: inline;
        margin: 0 0.15em;
        color: var(--gray);
        font-weight: 500;
    }

    #mas-vendidos #bestGrid .card__price {
        text-align: left;
        font-size: 20px;
        font-weight: 700;
        color: var(--fire);
        letter-spacing: -0.02em;
    }

    #mas-vendidos #bestGrid .card__body {
        align-items: stretch;
        text-align: left;
        padding: 18px 18px 20px;
        gap: 12px;
        background: #fff;
    }

    /* Mismo criterio que mobile: verde oscuro + crema, píldora */
    #mas-vendidos #bestGrid .btnBest {
        width: 100%;
        margin-top: auto;
        padding: 10px 14px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
        font-family: var(--ui);
        text-transform: none;
        text-align: center;
        background: var(--dark);
        color: var(--cream);
        border: none !important;
        box-shadow: none;
        cursor: pointer;
        transition: transform 0.2s ease, background 0.2s ease, filter 0.2s ease;
    }

    #mas-vendidos #bestGrid .btnBest:hover {
        transform: scale(1.02);
        filter: brightness(1.1);
        background: var(--dark);
        color: var(--cream);
    }

    #mas-vendidos #bestGrid .btnBest:active {
        transform: scale(0.99);
    }

}

.best-empty {
    margin-top: 10px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(45, 74, 45, 0.14);
    text-align: left;
}

.best-empty__title {
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--dark);
}

.best-empty__text {
    color: var(--gray);
    font-size: 14px;
    line-height: 1.45;
}

.about__dots {
    margin: 8px 0 12px;
    color: rgba(0, 0, 0, .55);
    letter-spacing: 2px;
}

/* fondo footer pagina */

.footer {
    margin-top: 0;
    margin-bottom: -1px;
    padding: 36px 24px 0;
    background: var(--black);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.footer__content {
    box-sizing: border-box;
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
}

.footer__brand {
    margin: 0;
}

.footer__logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.footer__logo-kon {
    color: #fff;
}

.footer__logo-chi {
    color: #0bc050;
}

.footer__nav-wrap {
    width: 100%;
}

.footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: flex-start;
}

.footer__nav li {
    margin: 0;
    width: 100%;
}

.footer .footer__link {
    font-size: 14px;
    color: #b8b8b0;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: none;
    border: 0;
    padding: 10px 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.footer .footer__link:hover {
    color: #e4e4e0;
}

.footer .footer__link:focus-visible {
    outline: 2px solid var(--fire);
    outline-offset: 2px;
    border-radius: 4px;
}

.footer__rule {
    border: 0;
    height: 1px;
    width: 100%;
    margin: 0;
    background: rgba(255, 255, 255, 0.06);
}

.footer__info {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #b0b0a8;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.footer__info li {
    position: relative;
    margin: 0 0 8px 0;
    padding-left: 1.1em;
}

.footer__info li:last-child {
    margin-bottom: 0;
}

.footer__info li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--fire);
    font-weight: 700;
}

.footer__ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 9999px;
    border: 1px solid var(--fire);
    background: #121210;
    background: color-mix(in srgb, var(--black) 92%, #000);
    color: var(--fire);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.footer__ig:hover {
    background: rgba(232, 96, 26, 0.14);
    background: color-mix(in srgb, var(--fire) 14%, var(--black));
    color: #ff9a5c;
}

.footer__ig:focus-visible {
    outline: 2px solid var(--cream);
    outline-offset: 3px;
}

.footer__copy {
    margin: 28px 0 0;
    padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 10px;
    color: #5a5854;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.best-scroll {
    margin-top: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    user-select: none;
    background: transparent;
    border: none;
    box-shadow: none;
}

.best-scroll::-webkit-scrollbar {
    display: none;
}

.best-scroll .card__title {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.35;
    margin: 0 0 2px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.best-scroll>.card {
    box-sizing: border-box;
    flex: 0 0 170px;
    flex-shrink: 0;
    scroll-snap-align: center;
    width: 170px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.best-scroll .card__img {
    flex: 0 0 auto;
    width: 100%;
    max-height: 160px;
    height: 160px;
    aspect-ratio: auto;
    background: var(--cream);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.best-scroll .card__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--fire);
    margin: 0 0 6px;
    text-align: center;
}

.best-scroll .card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 8px;
    gap: 8px;
    text-align: center;
}

.best-scroll .btnBest {
    width: 100%;
    margin-top: auto;
    background: var(--dark);
    color: var(--cream);
    border: none !important;
    border-radius: 10px;
    padding: 8px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--ui);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, filter 0.2s ease;
}

.best-scroll .btnBest:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.best-scroll .btnBest:active {
    transform: scale(0.99);
}

/* Breadcrumb (referencia categoriaboceto) */
.crumb {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--gray);
    text-align: center;
}

.crumb a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
}

.crumb a:hover {
    text-decoration: underline;
}

.crumb span {
    color: var(--gray);
    margin: 0 5px;
}

/* ── PÁGINA CATEGORÍA CONSOLIDADA (Mobile & Desktop) ── */

body.page-category {
    background: var(--cream);
    min-height: 100vh;
}

.page-category .page-category__wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.page-category__title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--dark);
    text-align: center;
    margin: 0 0 10px;
}

/* Grilla base (Mobile) */
.page-category #productsGrid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── LA CARD ── */
.page-category .card {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 0.5px solid #d4e4b4;
    min-height: 160px;
    align-items: stretch; /* CLAVE: La imagen tendrá el mismo alto que el texto */
    margin-bottom: 16px;
}

/* 2. Contenedor de Imagen: Sin márgenes internos */
.page-category .card__img {
    width: 125px; 
    flex: 0 0 125px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Aseguramos que no haya aire */
}

/* 3. La Foto: Debe llenar el 100% del bloque izquierdo */
.page-category .card__img-pic {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cambiá a 'contain' si preferís ver el vegetal entero con su fondo original */
    display: block;
}

/* 4. Cuerpo de la Card: Aire para que el texto no toque la foto */
.page-category .card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px; 
    gap: 8px;
    min-width: 0;
}

/* 5. Título y Badge: Alineación para pantallas angostas (Poco M6) */
.page-category .card__title-row {
    display: flex;
    flex-wrap: wrap; /* Permite que la badge baje si el nombre es largo */
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.page-category .card__name {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--dark);
    margin: 0;
    line-height: 1.2;
}

/* Estilo de la Badge (Cápsula de ML) */
.page-category .card__ml {
    display: inline-flex;
    align-items: center;
    background: rgba(232, 240, 212, 0.9);
    color: var(--dark);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
    border: 1px solid #c8dca0;
    font-family: var(--ui);
    text-transform: uppercase;
}

.page-category .card__desc {
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
    color: var(--gray);
    font-family: var(--ui);
}

.page-category .card__price {
    font-weight: 900;
    color: var(--fire);
    font-size: 16px;
}

/* Picante */
.page-category .spice { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.page-category .spice-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #e0e0e0; flex-shrink: 0; }
.page-category .spice-dot.on { background-color: var(--fire); box-shadow: 0 0 4px rgba(232, 96, 26, 0.4); }
.page-category .spice-label { font-size: 12px; font-weight: 600; color: var(--gray); margin-left: 2px; font-family: var(--ui); }

/* Botón de la Card */
.page-category .card__btn {
    width: 100%;
    background-color: var(--dark) !important;
    color: var(--cream) !important;
    border: none;
    border-radius: 12px;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--ui);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: auto;
    transition: transform 0.2s;
    display: block;
}

.page-category .card__btn:active { transform: scale(0.98); filter: brightness(1.1); }

/* ── MODALES ── */
.page-category #productModal .modal__card,
.page-category #cartModal .modal__card {
    border-radius: 20px;
    border: 0.5px solid #d4e4b4;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* ── VISTA DESKTOP (901px en adelante) ── */
@media (min-width: 901px) {
    .page-category .page-category__wrap {
        max-width: 1150px; 
    }

    .page-category #productsGrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Centrado de la última card si es impar */
    .page-category #productsGrid > .card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 15px);
    }
    
    .page-category .card__img {
        width: 180px; 
        flex: 0 0 180px;
    }

    .page-category .card__name {
        font-size: 20px;
    }

    .page-category__title {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

.modal__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 350px;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f8f6;
    margin: 0;
}

/* Modal cards Productos */

.modal__content-wrapper {
    position: relative;
    z-index: 2;
    background: var(--fondomodal);
    margin-top: -20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    padding: 24px 20px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}

.modal__body {
    overflow-y: auto;
    flex: 1;
    display: block;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.modal__title {
    font-weight: 950;
    font-size: 18px;
    color: var(--border);
}

/* color descripcion card modal producto */

.modal__desc {
    margin-top: 10px;
    font-weight: 600;
    color: var(--texto);
    line-height: 1.35;
}

.modal__price {
    margin-top: 8px;
    margin-bottom: 12px;
    font-weight: 950;
    color: var(--precio);
    font-size: 19px;
    line-height: 1.1;
}

/* BOTON AGREGAR AL CARRITO MODAL */

/* BUSCÁ ESTA REGLA Y REEMPLAZALA POR COMPLETO */
#modalAddBtn {
    width: 100%;
    padding: 14px 20px; /* Un poco más de aire para que se vea "pro" */
    margin-top: 12px;
    background: var(--dark) !important; /* El verde oscuro de tu marca */
    color: var(--cream) !important;    /* El color cremita para el texto */
    border: none;                     /* Sacamos el borde para que sea más limpio */
    border-radius: 12px;              /* Bordes redondeados como tus otros botones */
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;        /* Para que mantenga la fuerza del diseño anterior */
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    box-shadow: 0 4px 12px rgba(45, 74, 45, 0.2); /* Sombrita suave verde */
}

/* Efecto al pasar el mouse o tocarlo */
#modalAddBtn:active {
    transform: scale(0.98);
    filter: brightness(1.1);
}

/* Color Titulos fermentacion , beneficios y picante; y texto Beneficios (El texto de fermentacion se cambia desde el app.js)*/

.modal__extra {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    color: var(--titulos);
    font-size: 14px;
    line-height: 1.35;
}

/* titulo Elegí tus kimchis MODAL */

.modal__extra h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 900;
    color: var(--texto);
}

.modal__extra ul {
    margin: 0;
    padding-left: 18px;
}

.modal__extra li {
    margin: 4px 0;
}

#productModal .modal__card {
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#productModal .modal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 999px;
    padding: 6px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.modal__qty strong {
    min-width: 24px;
    font-size: 16px;
    text-align: center;
    font-weight: 900;
}

.qtybtn {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
}

/* titulo Seleccionadas: 0 / 3 MODAL */

.promoPick__meta {
    margin-top: 8px;
    display: grid;
    gap: 6px;
    color: var(--titulos);
}

/* titulo Te faltan X para completar la promo. MODAL */

.promoPick__hint {
    opacity: 1;
    font-weight: 700;
    font-size: 13px;
    color: var(--texto);
}

.promoPick__list {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.promoPick__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 14px;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}

.promoPick__name {
    font-weight: 900;
    font-size: 13px;
}

.promoPick__ctrl {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promoPick__btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}

/* titulos checkout */

.checkout__title {
    font-size: 20px;
    font-weight: 900;
    margin: 10px 0 14px;
    color: var(--titulos);
}

.checkout__card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
    margin-bottom: 14px;
}

.checkout__subtitle {
    margin: 0 0 12px;
    font-weight: 900;
}

.checkout__promoTitle {
    margin: 12px 0 8px;
    font-weight: 900;
}

.checkout__promoRow {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.checkout__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 2px solid rgba(0, 0, 0, .10);
    font-size: 18px;
}

/* El Título de los campos ("Nombre y Apellido", Teléfono / WhatsApp) , Notas (opcional) */

.field span {
    font-weight: 800;
    font-size: 13px;
    color: var(--texto);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 12px;
    font: inherit;
}

.checkoutFlow {
    overflow: hidden;
}

.checkoutFlow__track {
    display: flex;
    width: 200%;
    transition: transform .32s ease;
}

.checkoutFlow.is-step2 .checkoutFlow__track {
    transform: translateX(-50%);
}

.checkoutStep {
    width: 50%;
    padding-right: 10px;
}

.cart__thumb {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: #fff;
    background-size: cover;
    background-position: center;
    flex: 0 0 54px;
}

.cart__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.checkout__totals {
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding-top: 10px;
    display: grid;
    gap: 8px;
}

.checkout__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 800;
}

.checkout__row--muted {
    opacity: 1;
    font-weight: 700;
    color: #111;
}

.checkout__row--total {
    border-top: 2px solid rgba(0, 0, 0, .10);
    padding-top: 10px;
    margin-top: 6px;
    font-size: 18px;
    color: var(--titulos);
}

.checkout__cta {
    width: 100%;
    margin-top: 12px;
}

.checkoutStep__head {
    display: grid;
    grid-template-columns: 90px 1fr 90px;
    align-items: center;
    margin-bottom: 10px;
}

.page-checkout .checkout__card {
    display: flex;
    flex-direction: column;
}

.page-checkout #checkoutItems {
    flex: 1;
}

.page-checkout #checkoutTotals {
    margin-top: 0;
}

.page-checkout .checkout__cta {
    margin-top: 14px;
    align-self: center;
    width: min(520px, 100%);
}

.page-checkout .cart-footer .checkout__cta {
    margin-top: 0;
    align-self: stretch;
    width: 100%;
    max-width: none;
}

.page-checkout .section {
    padding-bottom: 10px;
}

.page-checkout .checkoutStep:first-child .checkout__card {
    min-height: auto;
    height: auto;
    display: flex;
    flex-direction: column;
}

.page-checkout .checkoutStep:first-child #checkoutItems {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

.page-checkout .checkoutStep:first-child #checkoutTotals {
    margin-top: auto;
}

.page-checkout .checkoutStep:first-child .cart-footer .checkout__cta {
    margin-top: 0;
    width: 100%;
    max-width: none;
}

.emptyCart {
    height: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 20px;
}

.emptyCart__img {
    max-width: 240px;
    width: 100%;
    opacity: .9;
}

/* titulo carrito vacio */

.emptyCart__title {
    font-size: 18px;
    font-weight: 900;
    color: var(--titulos);
}

.emptyCart__text {
    font-size: 14px;
    opacity: .75;
    color: var(--texto);
}

.emptyCart__cta {
    margin-top: 6px;
    width: min(260px, 100%);
    color: #fff;
    background: var(--fondobot);
}

/* Precios productos checkout*/

.cart__mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 900;
    color: var(--titulos);
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}

.qty button {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 13px;
    padding: 0;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

.qty span {
    min-width: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

.card .btn {
    cursor: default;
}

.card__desc,
p {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.card__body {
    display: flex;
    padding: 10px;
    gap: 8px;
    flex-direction: column;
    height: 100%;
}

/* titulo card mas vendidos */

.card__title {
    font-weight: 900;
    line-height: 1.2;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--titulos);
}

.card__body .btn {
    margin-top: auto;
}

.search-item__meta {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    background: rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .06);
    color: rgba(0, 0, 0, .70);
    opacity: 1;
}

/* pills search categorias */

.search-item__meta.meta--promo {
    background: rgba(60, 140, 95, .25);
    color: #1f5a3d;
    border-color: rgba(60, 140, 95, .45);
}

.search-item__meta.meta--especial {
    background: rgba(241, 196, 15, .22);
    color: #8a6d00;
    border-color: rgba(241, 196, 15, .55);
}

.search-item__meta.meta--picante {
    background: rgba(168, 50, 42, .16);
    color: #a8322a;
    border-color: rgba(168, 50, 42, .45);
}

.search-item__meta.meta--sin-picante {
    background: rgba(143, 191, 106, .22);
    color: #3f6b2a;
    border-color: rgba(143, 191, 106, .55);
}

.search-item__meta.meta--salsa {
    background: rgba(74, 128, 145, .22);
    color: #2f5f6b;
    border-color: rgba(74, 128, 145, .45);
}

.search-item__meta.meta--neutral {
    background: rgba(0, 0, 0, .06);
    color: rgba(0, 0, 0, .65);
    border-color: rgba(0, 0, 0, .08);
}

.drawer__header {
    display: block;
    margin: 0;
    padding: 0;
}

.drawer__close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    background: #111;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.drawer__divider {
    height: 0.5px;
    background: #e0e8d4;
    margin: 8px 0;
}

.drawer__section {
    display: block;
    padding: 4px 0 8px;
}

.drawer-overlay,
#drawerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    /* Por encima del contenido de la página, por debajo del panel .drawer (3000) */
    z-index: 2900;
}

/* Títulos de sección (referencia drawer.html) */
.drawer__section-title,
.drawer__sectionTitle {
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #a8b8a0;
    padding: 6px 20px 4px;
    text-transform: uppercase;
    margin: 0;
}

/* Enlaces drawer */
.drawer__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--ui);
    color: var(--dark);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    border-radius: 0;
    transition: background 0.15s ease;
}

.drawer__link:hover {
    background: var(--cream);
}

.drawer__icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 1;
}

.drawer__icon svg {
    width: 20px;
    height: 20px;
    fill: var(--mid);
    display: block;
}

.drawer__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    color: inherit;
}

#bestGrid {
    position: relative;
    z-index: 0;
    display: flex;
    overflow-x: auto;
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
}

#bestGrid img {
    width: 100%;
    height: auto;
    display: block;
}

.side-panel.is-open {
    display: block;
}

.side-panel__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.side-panel__card {
    position: absolute;
    inset: 16px;
    margin-left: 0;
    margin-right: auto;
    width: min(92vw, 520px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.side-panel.is-open .side-panel__card {
    transform: translateX(0);
    opacity: 1;
}

.side-panel__header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* titulos Secciones individuales panel drawer*/

.side-panel__title {
    font-weight: 900;
    text-align: center;
    color: var(--titulos);
}

.side-panel__back,
.side-panel__close {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #f4f6f5;
    color: #1f2a27;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    display: grid;
    line-height: 1;
    place-items: center;
    transition: background .15s ease, transform .15s ease;
}

#inicio,
#catalogo,
#mas-vendidos,
#info,
#contacto {
    scroll-margin-top: var(--sticky-header-offset);
}

.about__cta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
    font-size: 14px;
    color: var(--text);
}

.panel-hero {
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .06);
    margin-bottom: 12px;
}

.panel-hero__title {
    margin: 0;
    font-weight: 950;
    font-size: 16px;
}

.panel-hero__subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.panel-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.panel-card {
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: 16px;
    padding: 12px 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .06);
}

.panel-card__title {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 14px;
}

.panel-card__text {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    font-size: 14px;
}

.faq {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

/* fondo items faq */

.faq details {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 12px;
    font-weight: 950;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "›";
    font-size: 18px;
    transform: rotate(90deg);
    opacity: .65;
    transition: transform .2s ease;
}

.faq details[open] summary::after {
    transform: rotate(-90deg);
}

.faq__body {
    padding: 0 12px 12px;
    color: var(--texto);
    line-height: 1.45;
    font-size: 14px;
}

.panel-hero__subtitle,
.panel-card__text {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--muted);
}

.contact-value {
    text-decoration: none;
    color: inherit;
    font-weight: 800;
}

.contact-value:hover {
    text-decoration: underline;
}

.hours {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 8px;
}

.hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    background: #fff;
}

.hours__day {
    font-weight: 950;
}

.hours__time {
    color: var(--muted);
    font-weight: 800;
}

.page-checkout .checkoutStep:nth-child(2) .checkoutStep__head {
    margin: 6px 0 12px;
}

.page-checkout .checkoutStep:nth-child(2) .checkout__title {
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.2px;
}

.page-checkout .checkoutStep:nth-child(2) .checkout__cta {
    margin-top: 16px;
    align-self: center;
    width: min(420px, 100%);
}

.page-checkout .checkoutStep:nth-child(2) .field {
    margin-bottom: 12px;
    gap: 8px;
}

.page-checkout .checkoutStep:nth-child(2) .field span {
    font-size: 13px;
    font-weight: 700;
    color: #1a4d2e;
    opacity: 1;
}

.page-checkout .checkoutStep:nth-child(2) .field input,
.page-checkout .checkoutStep:nth-child(2) .field select,
.page-checkout .checkoutStep:nth-child(2) .field textarea {
    border-radius: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(255, 255, 255, .92);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-checkout .checkoutStep:nth-child(2) .field input:focus,
.page-checkout .checkoutStep:nth-child(2) .field select:focus,
.page-checkout .checkoutStep:nth-child(2) .field textarea:focus {
    outline: none;
    border-color: rgba(0, 0, 0, .22);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}

.page-checkout .checkoutStep:nth-child(2) .field textarea {
    resize: none;
    min-height: 92px;
}

.page-checkout .checkoutStep:nth-child(2) #backStep1Btn {
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 900;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.page-checkout .header__spacer {
    width: 44px;
    height: 44px;
}

.page-checkout .hbtn--ghost {
    visibility: hidden;
    pointer-events: none;
}

.page-checkout .payPills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-checkout .payPill {
    flex: 1;
    min-width: 140px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(255, 255, 255, .92);
    border-radius: 14px;
    padding: 12px 12px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.page-checkout .payPill:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}

.page-checkout .payPill.is-active {
    border-color: rgba(0, 0, 0, .22);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}

.page-checkout .payPill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .10);
}

.checkout__step--2 {
    display: flex;
    flex-direction: column;
}

.page-checkout .checkoutStep:nth-child(2) .checkout__form {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

.page-checkout .checkoutStep:nth-child(2) #sendWhatsAppBtn.checkout__cta {
    margin-top: 18px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 520px;
    align-self: center;
    border-radius: 16px;
    padding: 16px 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* boton ver producto mas vendidos */

.btnBest {
    background: var(--fondobot);
    color: #fff;
    border: 0;
    border-radius: 6px;
}

.btnModalAdd {
    width: 100%;
    background: var(--dark); /* Cambiar #111 por var(--dark) */
    color: var(--cream);    /* Cambiar #fff por var(--cream) */
    border: none;
    border-radius: 12px;
}

.btnModalAdd:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.side-panel {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    --sp-body: var(--text);
    --sp-p: var(--muted);
    --sp-h3: var(--text);
}

.side-panel__body {
    padding: 14px;
    overflow: auto;
    height: calc(100% - 69px);
    color: var(--sp-body);
}

.side-panel__body p {
    color: var(--sp-p);
    line-height: 1.45;
}

.side-panel__body h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 950;
    color: var(--sp-h3);
}

.side-panel[data-panel="about"] {
    --sp-h3: #111;
    --sp-p: var(--muted);
}

/* Titulos sobre los kimchis */

.side-panel[data-panel="kimchis"] .panel-card__title,
.side-panel[data-panel="kimchis"] .panel-hero__title {
    color: var(--titulos);
    font-weight: 900;
}

/* Texto sobre los kimchis */

.side-panel[data-panel="kimchis"] .panel-card__text,
.side-panel[data-panel="kimchis"] .panel-hero__subtitle {
    color: var(--texto);
}

.side-panel[data-panel="faq"] {
    --sp-h3: #111;
    --sp-p: #1f2a27;
}

/* titulos FAQ */

.side-panel[data-panel="faq"] summary {
    color: var(--titulos);
    font-weight: 900;
}

/* textos FAQ */

.side-panel[data-panel="faq"] .faq__body {
    color: var(--texto);
    line-height: 1.45;
}

.side-panel[data-panel="contact"] {
    --sp-h3: #1a4d2e;
    --sp-p: #1a4d2e;
    --contact-green: #1a4d2e;
    --contact-gold: #b89c20;
    --contact-accent: #f08a47;
    --contact-rule: #e0e0e0;
}

.side-panel[data-panel="contact"] .side-panel__card {
    background: #faf8f4;
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 255, 255, .65) 0%, transparent 55%),
        linear-gradient(180deg, #faf9f6 0%, #f5f2eb 100%);
    border-color: rgba(26, 77, 46, .08);
}

.side-panel[data-panel="contact"] .side-panel__header {
    border-bottom-color: #e0e0e0;
    background: rgba(255, 255, 255, .35);
}

.side-panel[data-panel="contact"] .side-panel__title {
    color: #1a4d2e;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
}

.side-panel[data-panel="contact"] .side-panel__back,
.side-panel[data-panel="contact"] .side-panel__close {
    border-color: rgba(0, 0, 0, .1);
    background: #eceae6;
    color: #3d4540;
}

.side-panel[data-panel="contact"] .side-panel__body {
    color: #1a4d2e;
}

.side-panel[data-panel="contact"] .side-panel__body p {
    color: inherit;
}

.panel-hero__title,
.panel-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
}

/* color ML Frascos ; se cambia la de search en app.js*/

.name-size {
    color: #e23d3d;
    font-weight: 800;
}

/* Barra búsqueda drawer (referencia .drawer__search) */
.drawerSearchBtn__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border-radius: 0;
    width: auto;
    height: auto;
}

.drawerSearchBtn__ico svg {
    display: block;
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: var(--dark) !important;
    opacity: 1 !important;
}

#searchBtn svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: var(--cream);
    stroke: var(--cream);
    stroke-width: 2;
}

.about {
    margin-top: 22px;
    text-align: center;
    margin: 40px 0 10px;
    padding: 0 16px;
}

/* titulo Quienes Somos */

.about__title {
    margin: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    font-family: var(--serif);
    letter-spacing: .4px;
    color: var(--titulos);
    margin-bottom: 32px
}

/* card Quienes Somos */

.about__card {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    background: #fff;
    border-radius: 20px;
    padding: 28px 26px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .06);
}

/* texto Quienes Somos */

.about__text {
    font-size: 17px;
    margin: 0;
    line-height: 1.65;
    font-weight: 600;
    color: var(--texto);
    margin-bottom: 14px;
}

/* subtitulo Quienes Somos */

.about__subtitle {
    margin: 18px 0 10px;
    text-align: center;
    margin-top: 22px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--titulos);
}

.about__list {
    margin: 0;
    list-style: none;
    padding: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
}

/* texto subtitulo Quienes Somos */

.about__list li {
    position: relative;
    list-style: disc;
    padding-left: 18px;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 600;
    color: var(--texto);
    margin-bottom: 10px;
}

/* —— Panel Contacto (mobile-first) —— */

.contact-panel {
    --cp-green: #1a4d2e;
    --cp-gold: #b89c20;
    --cp-accent: #f08a47;
    --cp-rule: #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 2px 8px;
    font-family: var(--ui);
    color: var(--cp-green);
}

.contact-panel__insta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 8px 16px;
}

.contact-panel__insta-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--cp-green);
    transition: opacity 0.2s ease;
}

.contact-panel__insta-link:hover {
    opacity: 0.88;
}

.contact-panel__insta-link:focus-visible {
    outline: 2px solid var(--cp-gold);
    outline-offset: 4px;
    border-radius: 8px;
}

.contact-panel__insta-svg {
    width: 40px;
    height: 40px;
    color: var(--cp-green);
}

.contact-panel__insta-handle {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cp-accent);
    letter-spacing: 0.02em;
}

.contact-panel__insta-caption {
    margin: 12px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cp-green);
    max-width: 22rem;
}

.contact-panel__rule {
    border: 0;
    height: 1px;
    margin: 0;
    background: var(--cp-rule);
}

.contact-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-panel__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--cp-rule);
}

.contact-panel__row:last-of-type {
    border-bottom: 0;
    padding-bottom: 18px;
}

.contact-panel__ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    color: var(--cp-green);
}

.contact-panel__ico svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

.contact-panel__ico--sm svg {
    width: 18px;
    height: 18px;
}

.contact-panel__body {
    flex: 1;
    min-width: 0;
}

.contact-panel__label {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cp-green);
}

.contact-panel__detail {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cp-green);
}

.contact-panel__highlight {
    font-weight: 700;
    color: var(--cp-accent);
}

.contact-panel__pay {
    margin-top: 4px;
    padding: 16px 14px 18px;
    border-radius: 14px;
    background: #eceae6;
    border: 1px solid rgba(26, 77, 46, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.contact-panel__pay-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.contact-panel__pay-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--cp-green);
}

.contact-panel__pay-text {
    margin: 0;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--cp-green);
}

.contact-panel__pay-text strong {
    font-weight: 700;
}

.search-sheet {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
}

.search-sheet.is-open {
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.search-sheet__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-sheet.is-open .search-sheet__overlay {
    opacity: 1;
}

/* color Fondo Search */

.search-sheet__content {
    position: absolute;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    border-radius: 24px 24px 0 0;
    padding: 12px 16px 24px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.search-sheet.is-open .search-sheet__content {
    transform: translateY(0);
}

.search-sheet__handle {
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: 0 auto 16px;
}

.search-sheet__input-box {
    position: relative;
    display: flex;
    align-items: center;
}

/* color Fondo Search input */

.search-sheet__input-box input {
    width: 100%;
    height: 50px;
    border-radius: 16px;
    padding-right: 14px !important;
    border: 1px solid rgba(24, 75, 68, 0.15);
    background: rgba(255, 255, 255, 0.6);
    padding: 0 44px;
    font-size: 16px;
    color: var(--letras);
    font-weight: 700;
    outline: none;
    transition: all 0.2s;
}

.search-sheet__input-box input:focus {
    background: #fff;
    border-color: var(--letras);
    box-shadow: 0 4px 12px rgba(24, 75, 68, 0.08);
}

/* icono lupa search */

.search-sheet__icon {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    pointer-events: none;
    fill: none !important;
    stroke: var(--fondobot) !important;
    opacity: 0.7;
}

.search-sheet__close-btn {
    display: none !important;
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    font-size: 18px;
    color: var(--muted);
    cursor: pointer;
    place-items: center;
}

.search-sheet__body {
    margin-top: 20px;
    overflow-y: auto;
    max-height: 60vh;
}

.sheet-group {
    margin-bottom: 24px;
}

/* titulo mas vendidos search */

.sheet-group__title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.sheet-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.sheet-item:hover {
    background: rgba(24, 75, 68, 0.06);
}

.sheet-item__img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    margin-right: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.sheet-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* titulo producto search */

.sheet-item__name {
    font-weight: 900;
    color: var(--titulos);
    font-size: 15px;
}

/* decripcion producto search */

.sheet-item__desc {
    font-size: 12px;
    color: var(--texto);
}

/* precio producto search */

.sheet-item__price {
    font-weight: 900;
    color: var(--precio);
    font-size: 14px;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.sheet-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 20px;
    scrollbar-width: none;
}

.sheet-pills::-webkit-scrollbar {
    display: none;
}

.sheet-pill {
    background: rgba(24, 75, 68, 0.08);
    color: var(--letras);
    border: 1px solid transparent;
    border-radius: 99px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s;
}

.sheet-pill:hover {
    background: var(--letras);
    filter: brightness(0.95);
    color: #fff;
}

.sheet-pill:active {
    transform: scale(0.95);
}

/* pills categorias */

.sheet-pill.meta--promo {
    background: rgba(60, 140, 95, .15);
    color: #1f5a3d;
    border-color: rgba(60, 140, 95, .3);
}

.sheet-pill.meta--picante {
    background: rgba(168, 50, 42, .12);
    color: #a8322a;
    border-color: rgba(168, 50, 42, .3);
}

.sheet-pill.meta--sin-picante {
    background: rgba(143, 191, 106, .18);
    color: #3f6b2a;
    border-color: rgba(143, 191, 106, .4);
}

.sheet-pill.meta--especial {
    background: rgba(241, 196, 15, .15);
    color: #8a6d00;
    border-color: rgba(241, 196, 15, .4);
}

.sheet-pill.meta--salsa {
    background: rgba(74, 128, 145, .15);
    color: #2f5f6b;
    border-color: rgba(74, 128, 145, .4);
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 2999 !important;
}

#productModal,
#cartModal {
    z-index: 9999 !important;
}

#productModal .modal__overlay,
#cartModal .modal__overlay {
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

#productModal .modal__card,
#cartModal .modal__card {
    position: relative;
    z-index: 20 !important;
}

.drawer {
    position: fixed;
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.25;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    max-height: none !important;
    width: 280px;
    max-width: 280px;
    background: #fff;
    padding: 0;
    border-radius: 0 12px 0 0;
    border: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    z-index: 3000;
    transform: translateX(-105%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.drawer.is-open {
    display: flex;
    flex-direction: column;
    transform: translateX(0);
}

/* Botón búsqueda = .drawer__search (drawer.html) */
.drawer__search.drawerSearchBtn,
button.drawer__search {
    margin: 16px 16px 8px;
    width: calc(100% - 32px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cream);
    border: 1.5px solid #c8dca0;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: var(--ui);
    min-height: 0;
    height: auto;
    box-shadow: none;
}

.drawerSearchBtn__txt {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer__footer {
    margin-top: auto;
    padding: 24px 20px 28px;
    border-top: 0.5px solid #e0e8d4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

.drawer__footer img,
.drawer__logoFooter {
    height: 100px;
    width: auto;
    max-width: 250px;
    opacity: 1;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    filter: brightness(0.92);
}

.drawer__social {
    display: flex;
    gap: 14px;
}

.drawer__socialBtn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f4f6f5;
    display: grid;
    place-items: center;
    color: var(--letras);
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.drawer__socialBtn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.drawer__socialBtn:hover {
    background: var(--letras);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(24, 75, 68, 0.2);
}

/* copyright drawer */

.drawer__copy {
    font-size: 11px;
    color: #b0b8a8;
    font-weight: 400;
    opacity: 1;
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: var(--ui);
}

.cart {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

.cart__item {
    border: 1px solid var(--border) !important;
    background: #f4f8f6 !important;
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease;
}

.cart__name {
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.3;
}

.cart__name .name-size {
    color: #e23d3d;
    font-weight: 800;
    font-size: 0.9em;
}

.cart__name .name-sep {
    color: var(--letras) !important;
    font-weight: 900;
}

#checkoutItems {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* boton vaciar carrito */

.cart__clear {
    background: var(--titulos);
    color: #fff;
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.cart__clear:hover {
    background: #c0392b;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
}

.cart__clear:active {
    transform: translateY(0);
}

.cart__clear svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: 20px;
}

.confirm-modal.is-active {
    display: grid;
}

.confirm-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.confirm-modal__card {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 320px;
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.confirm-modal__icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.confirm-modal__title {
    font-weight: 900;
    font-size: 18px;
    color: #111;
    margin: 0 0 8px;
}

.confirm-modal__text {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.4;
}

.confirm-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn--danger {
    background: #c0392b;
    color: #fff;
    border: 0;
}

.btn--danger:hover {
    background: #a93226;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: #1f2a27;
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    white-space: nowrap;
}

.toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.field-label {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 8px;
    display: block;
    color: var(--letras);
}

.page-checkout .checkout-data .field-label {
    font-weight: 700;
    font-size: 14px;
    color: #1a4d2e;
}

.checkout-data__prompt {
    margin-bottom: 12px;
    color: #1a4d2e;
    font-weight: 700;
    text-align: left;
}

.delivery-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 16px 10px;
    border: 2px solid #e5e8e5;
    background: #fff;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    margin: 0;
    font: inherit;
    color: #6a726a;
}

.delivery-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 77, 46, 0.2);
}

.delivery-name {
    font-weight: 700;
    font-size: 14px;
    color: inherit;
}

.delivery-btn.is-active {
    border: 2px solid #1a4d2e;
    background: rgba(26, 77, 46, 0.07);
    color: #1a4d2e;
}

.delivery-btn.is-active .delivery-name {
    color: #1a4d2e;
}

.delivery-btn.is-active .delivery-icon {
    color: #1a4d2e;
}

.delivery-btn:not(.is-active) .delivery-icon {
    color: #8a928a;
}

.delivery-btn:not(.is-active) .delivery-name {
    color: #6a726a;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.payment-static {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #eef2ec;
    border: 1px solid rgba(26, 77, 46, 0.12);
    padding: 14px 16px;
    border-radius: 16px;
    margin-top: 8px;
    margin-bottom: 0;
}

.payment-card {
    margin-top: 20px;
}

.payment-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--dark);
}

.payment-text strong {
    font-weight: 700;
    color: #1a4d2e;
}

.payment-text span {
    color: var(--gray);
    font-size: 12px;
    line-height: 1.45;
}

.delivery-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
    transition: color 0.2s ease;
}

.delivery-icon svg {
    width: 28px;
    height: 28px;
}

.payment-icon {
    flex-shrink: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #1a4d2e;
}

.payment-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.page-checkout .checkoutStep:nth-child(2) .checkout__card {
    display: flex;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .07), 0 2px 8px rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .06);
    flex-direction: column;
    min-height: auto;
    height: auto;
    padding: 26px 20px 24px;
    gap: 0;
}

.delivery-opts {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

/* retiro/envio info card */

.delivery-info {
    border-radius: 16px;
    padding: 14px 14px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #1a4d2e;
    margin-bottom: 20px;
    background: #f3f6f0;
    border: 1px solid rgba(26, 77, 46, 0.12);
}

.delivery-info__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.delivery-info__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.delivery-info__row:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.delivery-info__ico {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    color: #1a4d2e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-info__svg {
    width: 22px;
    height: 22px;
    display: block;
}

.delivery-info__copy {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.delivery-info__copy--flat {
    margin: 0;
    flex: 1;
    color: #1a4d2e;
    font-size: 13px;
    line-height: 1.45;
}

.delivery-info__lead {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 13px;
    color: #1a4d2e;
}

.delivery-info__sub {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1a4d2e;
    opacity: 0.95;
}

.delivery-info__accent-inline {
    margin: 0;
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: #f08a47;
    line-height: 1.45;
}

.delivery-info__row--accent .delivery-info__ico {
    color: #1a4d2e;
}

.form-divider {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    margin-top: 4px;
    gap: 12px;
}

.form-divider--lines span {
    flex-shrink: 0;
}

.form-divider span {
    font-size: 13px;
    font-weight: 600;
    color: #1a4d2e;
    white-space: nowrap;
}

.form-divider--lines::before,
.form-divider--lines::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.form-divider:not(.form-divider--lines)::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px !important;
}

.page-checkout .checkoutStep:nth-child(2) .field input,
.page-checkout .checkoutStep:nth-child(2) .field textarea {
    background: #fff;
    box-shadow: none;
    border: 1px solid #e0e3e0;
    border-radius: 12px;
}

.page-checkout .checkoutStep:nth-child(2) .field input::placeholder,
.page-checkout .checkoutStep:nth-child(2) .field textarea::placeholder {
    color: #b5b5b0;
    opacity: 1;
}

/* boton enviar pedido ig */

.btn-instagram {
    background: #1a4d2e;
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    margin-top: 16px;
    cursor: pointer;
}

.btn-checkout-send {
    flex-direction: row;
}

.btn-checkout-send__label {
    flex: 1;
    text-align: center;
}

.btn-checkout-send__ig {
    flex-shrink: 0;
}

.btn-instagram:hover {
    transform: translateY(-1px);
    background: #143824;
    box-shadow: 0 12px 28px rgba(26, 77, 46, 0.32);
}

.btn-instagram:active {
    transform: translateY(0);
}

.btn-instagram svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

@media (max-width: 600px) {
    .page-checkout .btn-checkout-send {
        position: sticky;
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 1;
    }
}

.apple-scroller {
    width: 100%;
    padding: 20px 0 40px;
    overflow: hidden;
    position: relative;
}

.apple-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 0 calc(50% - 32.5%);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.apple-track::-webkit-scrollbar {
    display: none;
}

.apple-track.is-jumping {
    scroll-behavior: auto !important;
}

.apple-card {
    position: relative;
    flex: 0 0 65%;
    aspect-ratio: 16/9;
    border-radius: 24px;
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
    background: #f0f0f0;
}

.apple-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.apple-card:hover .apple-card__bg {
    transform: scale(1.03);
}

.apple-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.apple-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none;
}

.apple-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 5px;
}

.apple-title {
    font-size: 3rem;
    line-height: 0.95;
    font-weight: 900;
    margin: 0;
    color: #1d1d1f;
    letter-spacing: -1px;
}

.apple-desc {
    font-size: 1.2rem;
    font-weight: 600;
    color: #86868b;
    margin: 0 0 15px 0;
    max-width: 400px;
}

.apple-btn,
.apple-card__content button.apple-btn {
    pointer-events: auto;
    display: inline-block;
    background: #3a5fd9;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 980px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.apple-btn:hover {
    background: #0077ed;
    transform: scale(1.02);
}

.apple-btn--white {
    background: white;
    color: #1d1d1f;
}

.apple-btn--white:hover {
    background: #f5f5f7;
}

.apple-card__content.light-text .apple-title {
    color: white;
}

.apple-card__content.light-text .apple-desc {
    color: rgba(255, 255, 255, 0.8);
}

.apple-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 10px;
}

.apple-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.apple-dot:hover {
    background: rgba(0, 0, 0, 0.4);
}

.apple-dot.is-active {
    background: #1d1d1f;
    transform: scale(1.2);
}

.apple-card_banner3 {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
}

.apple-card__bg_banner3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%), url('tu-imagen.jpg');
    background-size: cover;
    background-position: center;
}

.apple-card__content_banner3 {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.472) 0%, rgba(0, 0, 0, 0.277) 100%);
    padding-left: 50px;
    padding-right: 50%;
    width: 100%;
}

.apple-tag_banner3 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
    background: transparent !important;
    padding: 0;
}

.apple-title_banner3 {
    font-size: 42px;
    line-height: 1.1;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 15px 0;
}

.apple-desc_banner3 {
    font-size: 24px;
    color: #6FAFC6;
    margin-bottom: 25px;
}

.text-argentina {
    background: linear-gradient(90deg, #74ACDF 0%, #FFFFFF 35%, #FFD700 50%, #FFFFFF 65%, #74ACDF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 900;
    font-size: 22px;
    display: inline-block;
    filter: drop-shadow(1px 2px 0px rgba(0, 0, 0, 0.8));
}

.text-corea {
    color: #db5c4e;
    font-weight: 900;
    font-size: 20px;
    display: inline-block;
    margin-top: 4px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.highlight_banner3 {
    color: #0bc050;
}

.apple-btn_banner3 {
    background-color: #a00d0d;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}

.apple-btn_banner3:hover {
    background-color: #a00d0d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(194, 16, 16, 0.6);
}

.apple-card_banner1 {
    overflow: hidden;
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
}

.apple-card__bg_banner1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/banner/banner1.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.apple-card__bg_banner1::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 30%;
    background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

.apple-card__content_banner1 {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    padding-right: 20px;
    padding-left: 60%;
}

.apple-title_banner1 {
    font-size: 34px;
    line-height: 1.4;
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 0 25px 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.highlight_food {
    color: #98FF98;
    font-style: italic;
}

.highlight_life {
    display: block;
    font-size: 56px;
    color: #FFD700;
    margin-top: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.apple-btn_banner1 {
    position: absolute;
    bottom: 40px;
    right: 50px;
    background-color: #FFD700;
    color: #5a1313;
    padding: 12px 35px;
    border-radius: 50px;
    border: none;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    z-index: 10;
}

.apple-btn_banner1:hover {
    transform: scale(1.05);
    background-color: #ffe033;
}

.apple-card_banner2 {
    overflow: hidden;
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
}

.apple-card__bg_banner2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/banner/banner2.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.apple-card__bg_banner2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.4) 100%);
}

.apple-card__content_banner2 {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

.banner2-top-text {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 900;
    color: #FFFFFF;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.highlight_spicy {
    color: #FFD700;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.banner2-bottom-text {
    font-size: 32px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.apple-btn_banner2 {
    display: inline-block;
    background-color: #FFFFFF;
    color: #a80000;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

.apple-btn_banner2:hover {
    transform: scale(1.05);
    background-color: #111;
    color: #fff;
}

.apple-card_banner3 {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
}

.apple-card__bg_banner3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%), url('tu-imagen.jpg');
    background-size: cover;
    background-position: center;
}

.apple-card__content_banner3 {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.472) 0%, rgba(0, 0, 0, 0.277) 100%);
    padding-left: 50px;
    padding-right: 50%;
    width: 100%;
}

.apple-tag_banner3 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
    background: transparent !important;
    padding: 0;
}

.apple-title_banner3 {
    font-size: 42px;
    line-height: 1.1;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 15px 0;
}

.apple-desc_banner3 {
    font-size: 24px;
    color: #6FAFC6;
    margin-bottom: 25px;
}

.text-argentina {
    background: linear-gradient(90deg, #74ACDF 0%, #FFFFFF 35%, #FFD700 50%, #FFFFFF 65%, #74ACDF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 900;
    font-size: 22px;
    display: inline-block;
    filter: drop-shadow(1px 2px 0px rgba(0, 0, 0, 0.8));
}

.text-corea {
    color: #db5c4e;
    font-weight: 900;
    font-size: 20px;
    display: inline-block;
    margin-top: 4px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.highlight_banner3 {
    color: #0bc050;
}

.apple-btn_banner3 {
    background-color: #a00d0d;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}

.apple-btn_banner3:hover {
    background-color: #a00d0d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(194, 16, 16, 0.6);
}

/* todos los responsives */

@media (min-width: 901px) {
    .cat::before {
        background-image: var(--cat-img-desktop);
    }

    /* Misma caja que el hero: .hero + .hero__container (--container-wide) */
    #catalogo.sec {
        padding-top: var(--section-pad-block);
        padding-bottom: var(--section-pad-block-tight);
        padding-left: clamp(16px, 3vw, 28px);
        padding-right: clamp(16px, 3vw, 28px);
    }

    #catalogo .container {
        max-width: min(var(--container-wide), 100%);
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(20px, 2.5vw, 36px);
        padding-right: clamp(20px, 2.5vw, 36px);
        width: 100%;
    }

    #catalogo .sec-title {
        margin-bottom: 16px;
    }

    /* Desktop: Promo más ancha (1.32fr) para acercarla al cuadrado; misma altura que 2× 4:3 + gap; chicas 4:3 iguales */
    #catalogo .cats.cats-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 20px;
        margin: 22px auto 0;
        max-width: min(1040px, 100%);
        width: 100%;
        min-height: 0;
        align-items: stretch;
        justify-items: stretch;
    }

    #catalogo .cats.cats-grid .cat {
        min-height: 0;
        min-width: 0;
        border-radius: 24px;
        background: #1a1a1a;
        overflow: hidden;
        transition: transform 0.35s ease;
    }

    #catalogo .cats.cats-grid .cat--special {
        grid-column: 1;
        grid-row: 1 / span 2;
        aspect-ratio: auto;
        width: 100%;
        min-height: 0;
        height: 100%;
        align-self: stretch;
        justify-self: stretch;
    }

    #catalogo .cats.cats-grid .cat:not(.cat--special) {
        aspect-ratio: 4 / 3;
        width: 100%;
        height: auto;
        max-width: 100%;
        align-self: stretch;
        justify-self: stretch;
    }

    #catalogo .cats.cats-grid .cat:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    #catalogo .cats.cats-grid .cat:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }

    #catalogo .cats.cats-grid .cat:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    #catalogo .cats.cats-grid .cat:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
    }

    #catalogo .cats.cats-grid .cat::before {
        transform: scale(1);
        transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease;
    }

    #catalogo .cats.cats-grid .cat::after {
        background: linear-gradient(
            to top,
            rgba(10, 25, 10, 0.35) 0%,
            rgba(10, 25, 10, 0.08) 50%,
            transparent 70%
        );
    }

    @media (hover: hover) and (pointer: fine) {
        #catalogo .cats.cats-grid .cat:hover {
            transform: scale(1.02);
        }

        #catalogo .cats.cats-grid .cat:hover::before {
            transform: scale(1.07);
            filter: brightness(1.08);
        }
    }

    #catalogo .cat__name {
        font-family: var(--ui);
        font-weight: 700;
        letter-spacing: -0.02em;
        font-size: clamp(18px, 1.4vw, 22px);
        line-height: 1.2;
        padding: 16px 18px 18px;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        align-self: stretch;
        margin-top: auto;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.42) 55%,
            transparent 100%
        );
    }

    .footer {
        margin-top: 0;
        padding: clamp(44px, 5vw, 72px) clamp(24px, 5vw, 48px) 0;
    }

    .footer__content {
        box-sizing: border-box;
        max-width: min(1180px, 100%);
        width: 100%;
        margin: 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: minmax(140px, 1.05fr) minmax(160px, 1fr) minmax(200px, 1.2fr);
        column-gap: clamp(32px, 4vw, 64px);
        row-gap: 0;
        align-items: start;
        text-align: left;
    }

    .footer__brand {
        grid-column: 1;
        grid-row: 1;
        padding-top: 2px;
    }

    .footer__logo-text {
        font-size: clamp(1.5rem, 2vw, 1.85rem);
        letter-spacing: 0.1em;
    }

    .footer__nav-wrap {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: 280px;
    }

    .footer__nav {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }

    .footer__nav li {
        width: auto;
    }

    .footer .footer__link {
        width: auto;
        min-height: 34px;
        padding: 5px 0;
        font-size: 15px;
        color: rgba(228, 228, 224, 0.92);
    }

    .footer__info {
        grid-column: 3;
        grid-row: 1;
        font-size: 13px;
        line-height: 1.55;
        color: rgba(180, 180, 172, 0.95);
        max-width: 320px;
        justify-self: end;
        text-align: left;
    }

    .footer__info li {
        margin-bottom: 10px;
    }

    .footer__rule {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: clamp(36px, 4vw, 52px);
        margin-bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent);
        height: 1px;
    }

    .footer__copy {
        margin-top: clamp(22px, 2.5vw, 32px);
        padding: 0 clamp(24px, 5vw, 48px) calc(18px + env(safe-area-inset-bottom, 0px));
        max-width: min(1180px, 100%);
        margin-left: auto;
        margin-right: auto;
        font-size: 11px;
        letter-spacing: 0.04em;
    }

}

@media (min-width: 900px) {

    .search-sheet__content {
        bottom: auto;
        top: 100px;
        left: 50%;
        width: 600px;
        max-width: 90vw;
        border-radius: 24px;
        transform: translate(-50%, -10px) scale(0.98);
        opacity: 0;
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    }

    .search-sheet.is-open .search-sheet__content {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }

    .checkoutFlow {
        overflow: visible;
    }

    .checkoutFlow__track {
        width: 100%;
        transform: none !important;
        display: grid;
        grid-template-columns: 1.3fr 0.9fr;
        gap: 30px;
        align-items: start;
    }

    .checkoutStep {
        width: 100%;
        padding: 0;
    }

    .checkoutStep:nth-child(1) {
        order: 2;
        position: sticky;
        top: 100px;
    }

    .checkoutStep:nth-child(2) {
        order: 1;
    }

    .page-checkout .checkoutStep:first-child .checkout__card {
        min-height: auto;
        max-height: 80vh;
        overflow-y: auto;
        border: 0.5px solid #d4e4b4;
    }

    .checkout__title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .page-checkout .checkoutStep:nth-child(2) .checkout__card {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .page-checkout .checkoutStep:nth-child(2) .checkout__form {
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
        padding-right: 0 !important;
    }

    .page-checkout .checkoutStep:nth-child(2) .checkout__cta {
        margin-top: 24px !important;
    }

    #goStep2Btn {
        display: none !important;
    }

    .btn-instagram {
        margin-left: 0;
        width: auto;
        min-width: 280px;
        padding: 14px 32px;
        font-size: 15px;
    }
}

@media (max-width: 900px) {

    #searchBtn {
        display: none;
    }

    .drawerSearchBtn {
        display: flex;
    }
}

@media (max-width: 899px) {
    .checkoutStep.is-hidden-step {
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden;
    }
}

@media (max-width: 768px) {
    .apple-track {
        gap: 10px;
        padding: 0 calc(50% - 37.5%);
    }

    .apple-card {
        flex: 0 0 100%;
        aspect-ratio: 1 / 1;
    }

    .apple-card__content {
        padding: 14px;
        justify-content: flex-end;
    }

    .apple-title {
        font-size: 1.8rem;
    }

    .apple-desc {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .apple-card__bg {
        background-position: center center;
    }

    .apple-dot {
        width: 6px;
        height: 6px;
    }
}

@media (max-height: 700px) {
    .modal__img {
        height: 280px;
    }
}

@media (max-width: 600px) {
    .apple-card__bg_banner3 {
        background-position: 65% center;
    }

    .apple-card__content_banner3 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .apple-title_banner3 {
        font-size: 32px;
    }

    .banner2-top-text {
        font-size: 28px;
    }

    .banner2-bottom-text {
        font-size: 24px;
    }

    .apple-card__content_banner2 {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .apple-btn_banner1 {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 25px;
    }

    .apple-card__bg_banner1::after {
        display: none;
    }

    .apple-card__content_banner1 {
        align-items: center;
        padding: 20px;
        justify-content: flex-end;
        padding-bottom: 60px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 70%);
        padding-left: 20px;
        padding-right: 20px;
    }

    .highlight_life {
        font-size: 42px;
    }

    .apple-title_banner1 {
        font-size: 26px;
    }
}

@media (max-width: 520px) {

    .page-checkout .checkoutStep:first-child #checkoutItems {
        flex: initial;
        overflow-y: visible;
    }

    .page-checkout .checkoutStep:first-child #checkoutTotals,
    .page-checkout .checkoutStep:first-child .checkout__cta {
        margin-top: 14px;
    }
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {

    .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart__item {
        padding: 8px;
        gap: 8px;
    }

    .cart__thumb {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .qty {
        gap: 6px;
    }

    .header .brand__img {
        max-width: 216px;
        height: 56px;
    }

    .qty button {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 13px;
    }
}

@media (min-width: 410px) {
    .cats.cats-grid {
        gap: 12px;
    }
}

@media (max-width: 430px) {
    .cats.cats-grid {
        gap: 10px;
    }

    .cat__name {
        font-size: 15px;
        font-weight: 700;
    }
}

@media (hover:hover) and (pointer:fine) {
    .best-scroll {
        cursor: grab;
    }

    .best-scroll.is-dragging {
        cursor: grabbing;
    }
}

/* ── CHECKOUT (checkoutboceto / checkout-productos-boceto) ── */
body.page-checkout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cream);
}

.page-checkout .checkout-main {
    flex: 1;
    padding-bottom: 24px;
}

.page-checkout .checkout-step1 {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}

.page-checkout .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
}

.page-checkout .page-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--dark);
    margin: 0;
    text-align: left;
}

.page-checkout .vaciar-btn.cart__clear {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--dark);
    color: var(--cream);
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--ui);
    cursor: pointer;
}

.page-checkout .vaciar-btn.cart__clear svg {
    width: 14px;
    height: 14px;
    stroke: var(--cream);
    fill: none;
}

.page-checkout .cart-card.checkout__card {
    background: #fff;
    border-radius: 20px;
    border: 0.5px solid #d4e4b4;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

.page-checkout .cart-items {
    padding: 8px 0;
}

.page-checkout .cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 0.5px solid #eef3e6;
    min-height: 88px;
}

.page-checkout .cart-item:last-child {
    border-bottom: none;
}

.page-checkout .cart-item__img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--cream);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.page-checkout .cart-item__info {
    flex: 1;
    min-width: 0;
}

.page-checkout .cart-item__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 2px;
    line-height: 1.25;
}

.page-checkout .cart-item__name em {
    color: var(--fire);
    font-style: italic;
    font-size: 12px;
    font-weight: 600;
}

.page-checkout .cart-item__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--fire);
}

.page-checkout .cart-item .qty {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.page-checkout .qty__btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--dark);
    background: transparent;
    color: var(--dark);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--ui);
    padding: 0;
}

.page-checkout .qty__val {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    min-width: 20px;
    text-align: center;
}

.page-checkout #checkoutTotals.cart-totals {
    padding: 14px 16px 0;
    border-top: 0.5px solid #eef3e6;
}

.page-checkout .totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.page-checkout .totals-row__label {
    font-size: 13px;
    color: var(--gray);
}

.page-checkout .totals-row__val {
    font-size: 13px;
    color: var(--gray);
    font-weight: 500;
}

.page-checkout .totals-row--discount .totals-row__val {
    color: var(--mid);
}

.page-checkout .totals-row--total {
    border-top: 0.5px solid #eef3e6;
    margin-top: 6px;
    padding-top: 10px;
}

.page-checkout .totals-row--total .totals-row__label,
.page-checkout .totals-row--total .totals-row__val {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
}

.page-checkout .cart-footer {
    padding: 16px;
}

.page-checkout .continue-btn {
    width: 100%;
    background: var(--dark);
    color: var(--cream);
    border: none;
    border-radius: 12px;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ui);
    cursor: pointer;
    letter-spacing: 0.3px;
}

.page-checkout .empty-card {
    background: #fff;
    border-radius: 20px;
    border: 0.5px solid #d4e4b4;
    padding: 36px 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.page-checkout .empty-card__illo {
    width: 140px;
    height: 120px;
    margin-bottom: 24px;
}

.page-checkout .empty-card__title {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 8px;
}

.page-checkout .empty-card__sub {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.55;
    margin-bottom: 28px;
}

.page-checkout .empty-card__btn {
    background: var(--dark);
    color: var(--cream);
    border: none;
    border-radius: 12px;
    padding: 14px 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    font-family: var(--ui);
    cursor: pointer;
}

.page-checkout .checkout-step2 {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 4px;
}

.page-checkout .checkout-data > .checkout__title--step2 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: #1a4d2e;
    margin: 0 0 18px;
    text-align: center;
    line-height: 1.25;
}

.page-checkout .cart-card--form {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    background: #fff;
}

@media (max-width: 480px) {
    .page-checkout .cart-item {
        min-height: 100px;
    }
}

/* BANNERS PC/MOBILE */

.bg-BANNER1 {
    background-image: url('img/banner/banner1.png');
}

.bg-BANNER2 {
    background-image: url('img/banner/banner2.png');
}

.bg-BANNER3 {
    background-image: url('img/banner/banner3.png');
}

.bg-BANNER4 {
    background-image: url('img/banner/2752x1536.png');
}

@media (max-width: 768px) {

    .bg-BANNER1 {
        background-image: url('img/banner/banner1-mobile.png');
    }

    .bg-BANNER2 {
        background-image: url('img/banner/banner2-mobile.png');
    }

    .bg-BANNER3 {
        background-image: url('img/banner/banner3-mobile.png');
    }

    .bg-BANNER4 {
        background-image: url('img/banner/1080x1350.png');
    }
}

#contacto {
    margin-top: 0 !important;
}

body {
    /* Esto garantiza que si el contenido es corto, el fondo no "sobresalga" */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- CONTENEDOR GENERAL --- */
.best-sec {
    padding: 40px 0;
    background: var(--cream);
}

.best-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio para las flechas en PC */
}

.best-sec__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* --- FLECHAS (Estilo Base) --- */
.best-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    background: #fff;
    color: var(--dark);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    z-index: 10;
    transition: all 0.2s ease;
}

.best-arrow:active { transform: scale(0.9); }

/* --- COMPORTAMIENTO PC (min 901px) --- */
@media (min-width: 901px) {
    .best-arrows-mobile { display: none; } /* Ocultar flechas de arriba */

    .best-arrow--side {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        flex-shrink: 0;
        z-index: 10;
        width: 44px;
        height: 44px;
        font-size: 22px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .best-arrow--side:hover {
        background: #fafaf8;
        border-color: rgba(0, 0, 0, 0.14);
    }

    .best-arrow--side:active {
        transform: scale(0.94);
    }
}

/* --- COMPORTAMIENTO MOBILE (max 900px) — prioridad carrusel --- */
@media (max-width: 900px) {
    .best-arrow--side { display: none; }

    .best-wrap:not(.best-wrap--empty) {
        overflow: visible;
    }

    /* Flechas sobre el carril, centradas en altura (mitad de las cards) */
    .best-arrows-mobile {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 4px;
        pointer-events: none;
        gap: 0;
    }

    .best-arrows-mobile .best-arrow {
        pointer-events: auto;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(0, 0, 0, 0.07);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .best-arrows-mobile .best-arrow:active {
        transform: scale(0.92);
    }

    /* Sin margen negativo: evita el “corte” / borde raro a la izquierda */
    .best-scroll {
        padding: 8px 16px 14px;
        margin: 0;
        scroll-padding-inline: 16px;
    }

    .best-scroll > .card {
        flex: 0 0 65%;
        scroll-snap-align: center;
    }

    .best-wrap--empty .best-arrows-mobile,
    .best-wrap--single .best-arrows-mobile {
        display: none;
    }
}

/* --- ELIMINAR SOBREPOSICIÓN --- */
#bestGrid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    display: flex;
    gap: 12px;
    width: 100%;
}

.drawer__footer {
    margin-top: auto; /* Empuja todo al fondo */
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.drawer__logoFooter {
    height: 45px; /* Un poco más grande para que se luzca el SVG */
    margin-bottom: 10px;
    filter: brightness(0.9); /* Para que combine con el tono del drawer */
}

/* Hero: columna imagen oculta en mobile */
.hero__visual {
    display: none;
}

.hero__container {
    display: block;
}

/* Hero desktop (≥901px): dos columnas como maqueta */
@media (min-width: 901px) {
    .hero {
        padding-top: clamp(40px, 5vw, 64px);
        padding-left: clamp(24px, 4vw, 40px);
        padding-right: clamp(24px, 4vw, 40px);
        padding-bottom: clamp(40px, 5vw, 56px);
    }

    .hero__container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: center;
        max-width: min(var(--container-wide), 100%);
        margin: 0 auto;
        padding: 48px clamp(20px, 2.5vw, 36px) 56px;
        min-height: auto;
    }

    .hero__content {
        text-align: left;
        z-index: 2;
    }

    .hero__badge {
        margin-bottom: 20px;
    }

    .hero__title {
        font-family: var(--ui);
        font-size: clamp(2.75rem, 4.2vw, 3.75rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.08;
        letter-spacing: -0.03em;
        margin: 0 0 20px;
        max-width: none;
    }

    .hero__title-line {
        display: block;
    }

    .hero__title-line--accent em {
        color: #b89c20;
        font-style: italic;
        font-weight: 700;
    }

    .hero__sub {
        font-size: 1.05rem;
        line-height: 1.55;
        max-width: 36ch;
        margin: 0 0 32px;
        margin-left: 0;
        color: rgba(255, 255, 255, 0.95);
    }

    .hero__btns {
        justify-content: flex-start;
        gap: 14px;
        flex-wrap: wrap;
    }

    .hero__btn {
        border-radius: 999px;
        padding: 14px 26px;
        min-height: 48px;
        font-size: 14px;
        font-weight: 600;
    }

    .hero__visual {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .hero__image-wrapper {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        padding: 0;
        background: none;
        border: none;
        border-radius: 28px;
        overflow: hidden;
        line-height: 0;
    }

    .hero__main-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 28px;
        object-fit: cover;
        aspect-ratio: 1 / 1;
        vertical-align: top;
    }

}