/* =========================================================
   VIP STORE
   CARRUSEL COMPLETAMENTE AISLADO DEL PERFIL
========================================================= */

.vip-store {
    --store-bg: #ffffff;
    --store-text: #111827;
    --store-muted: #6b7280;
    --store-border: rgba(17, 24, 39, .10);
    --store-button: #111827;
    --store-button-text: #ffffff;
    --store-radius: 18px;

    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    padding: 0 12px 35px;

    box-sizing: border-box;

    color: var(--store-text);
}


/* =========================================================
   DIVISOR
========================================================= */

.vip-store .vip-store-divider {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 35px 0 25px;
}


.vip-store .vip-store-divider > span {

    flex: 1;

    min-width: 0;

    height: 1px;

    background: currentColor;

    opacity: .18;
}


.vip-store .vip-store-divider-icon {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--store-button);

    color: var(--store-button-text);

    font-size: 17px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .15);
}


/* =========================================================
   CONTENEDOR PRODUCTOS
========================================================= */

.vip-store .vip-store-products {

    width: 100%;

    min-width: 0;
}


/* =========================================================
   CABECERA
========================================================= */

.vip-store .vip-store-heading {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;

    padding: 18px;

    box-sizing: border-box;

    border-radius: var(--store-radius);

    background: rgba(255, 255, 255, .92);

    border:
        1px solid
        var(--store-border);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .08);

    color: var(--store-text);
}


/* =========================================================
   CONTENIDO CABECERA
========================================================= */

.vip-store .vip-store-heading-content {

    min-width: 0;
}


.vip-store .vip-store-eyebrow {

    display: inline-block;

    margin-bottom: 5px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    line-height: 1;

    color: var(--store-button);
}


.vip-store .vip-store-heading h2 {

    margin: 0;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 800;

    color: var(--store-text);
}


.vip-store .vip-store-heading p {

    margin: 6px 0 0;

    font-size: 14px;

    line-height: 1.45;

    color: var(--store-muted);
}


/* =========================================================
   INDICADOR DESLIZA
========================================================= */

.vip-store .vip-store-scroll-hint {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 36px;

    padding: 0 13px;

    box-sizing: border-box;

    border-radius: 999px;

    background: var(--store-button);

    color: var(--store-button-text);

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    animation:
        vipStoreHint
        2s
        ease-in-out
        infinite;
}


@keyframes vipStoreHint {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}


/* =========================================================
   CARRUSEL
========================================================= */

.vip-store .vip-store-grid {

    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: stretch;

    gap: 16px;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 4px 3px 18px;

    box-sizing: border-box;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;

    scrollbar-width: thin;

    scrollbar-color:
        var(--store-button)
        rgba(0, 0, 0, .08);
}


/* =========================================================
   OCULTAR SCROLLBAR EN WEBKIT
========================================================= */

.vip-store .vip-store-grid::-webkit-scrollbar {

    height: 7px;
}


.vip-store .vip-store-grid::-webkit-scrollbar-track {

    background:
        rgba(0, 0, 0, .06);

    border-radius: 999px;
}


.vip-store .vip-store-grid::-webkit-scrollbar-thumb {

    background:
        var(--store-button);

    border-radius: 999px;
}


.vip-store .vip-store-grid::-webkit-scrollbar-thumb:hover {

    opacity: .8;
}


/* =========================================================
   TARJETAS DEL CARRUSEL
========================================================= */

.vip-store .vip-store-card {

    position: relative;

    flex: 0 0 280px;

    width: 280px;

    min-width: 280px;

    max-width: 280px;

    min-height: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    background:
        var(--store-bg);

    color:
        var(--store-text);

    border:
        1px solid
        var(--store-border);

    border-radius:
        var(--store-radius);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .10);

    scroll-snap-align: start;

    scroll-snap-stop: normal;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   HOVER TARJETA
========================================================= */

.vip-store .vip-store-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, .15);
}


/* =========================================================
   IMAGEN
========================================================= */

.vip-store .vip-store-image {

    width: 100%;

    aspect-ratio: 16 / 10;

    flex: 0 0 auto;

    overflow: hidden;

    background:
        #f3f4f6;
}


.vip-store .vip-store-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}


/* =========================================================
   ZOOM IMAGEN
========================================================= */

.vip-store .vip-store-card:hover
.vip-store-image img {

    transform:
        scale(1.04);
}


/* =========================================================
   CONTENIDO TARJETA
========================================================= */

.vip-store .vip-store-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 18px;

    box-sizing: border-box;
}


.vip-store .vip-store-content h3 {

    margin:
        0 0 9px;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 800;

    color:
        var(--store-text);

    overflow-wrap: anywhere;
}


.vip-store .vip-store-content p {

    margin:
        0 0 15px;

    font-size: 14px;

    line-height: 1.5;

    color:
        var(--store-muted);

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* =========================================================
   PRECIO
========================================================= */

.vip-store .vip-store-price {

    margin-top: auto;

    margin-bottom: 15px;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;

    color:
        var(--store-text);
}


/* =========================================================
   BOTÓN
========================================================= */

.vip-store .vip-store-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 46px;

    box-sizing: border-box;

    padding:
        11px 16px;

    border-radius:
        12px;

    background:
        var(--store-button);

    color:
        var(--store-button-text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease,
        box-shadow .2s ease;
}


.vip-store .vip-store-button:hover {

    opacity: .92;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .15);
}


.vip-store .vip-store-button:active {

    transform:
        translateY(0);
}


/* =========================================================
   FOCUS ACCESIBILIDAD
========================================================= */

.vip-store .vip-store-button:focus-visible {

    outline:
        3px solid
        rgba(59, 130, 246, .45);

    outline-offset:
        3px;
}


/* =========================================================
   EFECTO DE DESPLAZAMIENTO
========================================================= */

.vip-store .vip-store-grid {

    cursor:
        grab;
}


.vip-store .vip-store-grid:active {

    cursor:
        grabbing;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .vip-store {

        padding-left:
            10px;

        padding-right:
            10px;

        padding-bottom:
            30px;
    }


    .vip-store .vip-store-divider {

        margin-top:
            28px;

        margin-bottom:
            20px;
    }


    .vip-store .vip-store-divider-icon {

        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;

        font-size:
            15px;
    }


    .vip-store .vip-store-heading {

        padding:
            15px;

        gap:
            12px;
    }


    .vip-store .vip-store-heading h2 {

        font-size:
            22px;
    }


    .vip-store .vip-store-heading p {

        font-size:
            13px;
    }


    .vip-store .vip-store-eyebrow {

        font-size:
            10px;

        letter-spacing:
            1.5px;
    }


    .vip-store .vip-store-scroll-hint {

        min-height:
            32px;

        padding:
            0 10px;

        font-size:
            11px;
    }


    /* TARJETAS MÁS GRANDES EN MÓVIL */

    .vip-store .vip-store-card {

        flex-basis:
            82%;

        width:
            82%;

        min-width:
            82%;

        max-width:
            82%;
    }


    .vip-store .vip-store-grid {

        gap:
            14px;

        padding-bottom:
            15px;
    }
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    .vip-store .vip-store-card {

        flex-basis:
            88%;

        width:
            88%;

        min-width:
            88%;

        max-width:
            88%;
    }


    .vip-store .vip-store-heading {

        align-items:
            flex-start;
    }


    .vip-store .vip-store-scroll-hint {

        font-size:
            10px;

        padding:
            0 8px;
    }
}


/* =========================================================
   REDUCIR ANIMACIONES SI EL USUARIO LO SOLICITA
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vip-store .vip-store-grid {

        scroll-behavior:
            auto;
    }


    .vip-store .vip-store-scroll-hint {

        animation:
            none;
    }


    .vip-store .vip-store-card,
    .vip-store .vip-store-image img,
    .vip-store .vip-store-button {

        transition:
            none;
    }
}
























/* =========================================================
   PROMOCIONES
========================================================= */

.zr-promo-profile {
    display: block !important;
    width: 100% !important;
    margin: 20px 0 !important;
}

.zr-promo-profile .zr-promo-profile__link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;

    text-decoration: none !important;
    color: inherit !important;

    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #eee !important;

    transition: transform .2s ease, box-shadow .2s ease !important;
}

.zr-promo-profile .zr-promo-profile__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.zr-promo-profile .zr-promo-profile__icon {
    display: inline-block !important;
    flex-shrink: 0 !important;
    font-size: 24px !important;
}

.zr-promo-profile .zr-promo-profile__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
}

.zr-promo-profile .zr-promo-profile__info strong {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.zr-promo-profile .zr-promo-profile__info small {
    font-size: 12px !important;
    opacity: .7 !important;
}

.zr-promo-profile .zr-promo-profile__arrow {
    display: inline-block !important;
    flex-shrink: 0 !important;
    font-size: 20px !important;
}