/* ============================================================
   VENTACTIVE
   PROMOCIÓN HOME
============================================================ */

.vcPromo{
    position:relative;

    padding:
        85px
        0;

    background:#fff;

    overflow:hidden;
}


.vcPromo *{
    box-sizing:border-box;
}


.vcPromoInner{
    width:
        min(
            1440px,
            calc(100% - 72px)
        );

    margin:0 auto;
}


/* ============================================================
   CARD
============================================================ */

.vcPromoCard{
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(420px, 1.05fr);

    min-height:560px;

    overflow:hidden;

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            #171719 0%,
            #1c1c1f 48%,
            #222226 100%
        );

    color:#fff;

    box-shadow:
        0
        35px
        80px
        rgba(0,0,0,.14);

    isolation:isolate;
}


/* ============================================================
   GIANT PERCENT
============================================================ */

.vcPromoBackgroundText{
    position:absolute;

    z-index:0;

    right:-1%;
    bottom:-13%;

    color:
        rgba(
            255,
            255,
            255,
            .035
        );

    font-size:
        clamp(
            220px,
            29vw,
            480px
        );

    font-weight:900;

    line-height:.72;

    letter-spacing:-.09em;

    pointer-events:none;

    user-select:none;
}


/* ============================================================
   GLOW
============================================================ */

.vcPromoGlow{
    position:absolute;

    z-index:0;

    top:-210px;
    right:5%;

    width:630px;
    height:630px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.13),
            rgba(255,255,255,.025) 38%,
            transparent 70%
        );

    filter:blur(20px);

    pointer-events:none;
}


/* ============================================================
   CONTENT
============================================================ */

.vcPromoContent{
    position:relative;

    z-index:3;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        68px
        40px
        68px
        70px;
}


.vcPromoTopline{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:21px;
}


.vcPromoEyebrow{
    color:#fff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.vcPromoCategory{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        0
        10px;

    border:
        1px
        solid
        rgba(255,255,255,.13);

    border-radius:999px;

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

    color:#aaaab0;

    font-size:9px;

    font-weight:700;

    letter-spacing:.07em;

    text-transform:uppercase;
}


/* ============================================================
   HEADING
============================================================ */

.vcPromoContent h2{
    max-width:650px;

    margin:0;

    font-size:
        clamp(
            42px,
            5.25vw,
            76px
        );

    font-weight:430;

    line-height:.96;

    letter-spacing:-.055em;
}


.vcPromoContent h2 strong{
    color:#f2ca79;

    font-weight:800;
}


/* ============================================================
   LEAD
============================================================ */

.vcPromoLead{
    max-width:570px;

    margin:
        26px
        0
        0;

    color:#a8a8ae;

    font-size:14px;

    line-height:1.72;
}


.vcPromoProductName{
    max-width:560px;

    margin-top:25px;

    color:#fff;

    font-size:16px;

    font-weight:700;

    line-height:1.45;
}


/* ============================================================
   PRICE
============================================================ */

.vcPromoPriceWrap{
    display:flex;
    align-items:flex-end;

    flex-wrap:wrap;

    gap:
        12px
        16px;

    margin-top:25px;
}


.vcPromoPrices{
    display:flex;
    align-items:baseline;

    gap:12px;
}


.vcPromoPrices strong{
    color:#fff;

    font-size:34px;

    line-height:1;

    letter-spacing:-.04em;
}


.vcPromoPrices del{
    color:#707078;

    font-size:14px;
}


.vcPromoSavings{
    color:#ddb65f;

    font-size:10px;

    font-weight:750;
}


/* ============================================================
   RATING
============================================================ */

.vcPromoRating{
    display:flex;
    align-items:center;

    gap:7px;

    margin-top:18px;
}


.vcPromoRating > span{
    color:#e0ad37;

    font-size:12px;

    letter-spacing:1px;
}


.vcPromoRating strong{
    color:#fff;

    font-size:10px;
}


.vcPromoRating small{
    color:#74747b;

    font-size:9px;
}


/* ============================================================
   ACTIONS
============================================================ */

.vcPromoActions{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:
        15px
        20px;

    margin-top:33px;
}


.vcPromoPrimary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:13px;

    min-height:54px;

    padding:
        0
        24px;

    border-radius:15px;

    background:#fff;

    color:#171719;

    font-size:12px;

    font-weight:800;

    text-decoration:none;

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


.vcPromoPrimary:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0
        14px
        30px
        rgba(0,0,0,.25);
}


.vcPromoPrimary svg{
    width:17px;
    height:17px;
}


.vcPromoSecondary{
    color:#a6a6ac;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

    border-bottom:
        1px
        solid
        rgba(255,255,255,.15);

    padding-bottom:3px;

    transition:
        color .25s ease,
        border-color .25s ease;
}


.vcPromoSecondary:hover{
    color:#fff;

    border-color:#fff;
}


/* ============================================================
   SHIPPING
============================================================ */

.vcPromoShipping{
    display:flex;
    align-items:center;

    gap:8px;

    margin-top:20px;

    color:#7fc39a;

    font-size:9px;

    font-weight:700;
}


.vcPromoShipping span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#6eba8b;

    box-shadow:
        0
        0
        0
        4px
        rgba(110,186,139,.09);
}


/* ============================================================
   VISUAL
============================================================ */

.vcPromoVisual{
    position:relative;

    z-index:2;

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

    min-width:0;

    padding:
        45px
        55px
        45px
        15px;
}


/* ============================================================
   IMAGE
============================================================ */

.vcPromoImageWrap{
    position:relative;

    width:min(
        100%,
        590px
    );

    aspect-ratio:
        1
        /
        1;

    overflow:hidden;

    border-radius:30px;

    background:#f0f0f1;

    box-shadow:
        0
        35px
        60px
        rgba(0,0,0,.32);

    transform:
        rotate(1.6deg);

    transition:
        transform
        .7s
        cubic-bezier(.2,.7,.2,1);
}


.vcPromoCard:hover
.vcPromoImageWrap{
    transform:
        rotate(0deg)
        scale(1.015);
}


.vcPromoImageWrap img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform
        .8s
        cubic-bezier(.2,.7,.2,1);
}


.vcPromoCard:hover
.vcPromoImageWrap img{
    transform:scale(1.04);
}


/* ============================================================
   DISCOUNT CHIP
============================================================ */

.vcPromoDiscountChip{
    position:absolute;

    z-index:5;

    top:48px;
    left:6px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:96px;
    height:96px;

    border-radius:50%;

    background:#f2ca79;

    color:#171719;

    box-shadow:
        0
        18px
        35px
        rgba(0,0,0,.25);

    transform:
        rotate(-8deg);

    transition:
        transform .5s ease;
}


.vcPromoCard:hover
.vcPromoDiscountChip{
    transform:
        rotate(-4deg)
        scale(1.05);
}


.vcPromoDiscountChip small{
    font-size:9px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;
}


.vcPromoDiscountChip strong{
    font-size:22px;

    line-height:1.15;

    letter-spacing:-.05em;
}


/* ============================================================
   NO IMAGE
============================================================ */

.vcPromoNoImage{
    display:grid;
    place-items:center;

    width:100%;
    height:100%;

    background:
        radial-gradient(
            circle at 50% 40%,
            #fff,
            #e5e5e6
        );
}


.vcPromoNoImageBrand{
    width:28%;
    max-width:145px;

    opacity:.18;
}


.vcPromoNoImageBrand img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:1050px){

    .vcPromoCard{
        grid-template-columns:
            minmax(0,1fr)
            minmax(360px,.9fr);
    }


    .vcPromoContent{
        padding-left:50px;
    }


    .vcPromoVisual{
        padding-right:35px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:800px){

    .vcPromo{
        padding:
            65px
            0;
    }


    .vcPromoInner{
        width:
            calc(
                100% - 34px
            );
    }


    .vcPromoCard{
        grid-template-columns:1fr;

        border-radius:25px;
    }


    .vcPromoContent{
        order:2;

        padding:
            35px
            25px
            45px;
    }


    .vcPromoVisual{
        order:1;

        padding:
            28px
            25px
            0;
    }


    .vcPromoImageWrap{
        width:100%;

        max-height:440px;

        border-radius:22px;

        transform:none;
    }


    .vcPromoDiscountChip{
        top:18px;
        left:13px;

        width:79px;
        height:79px;
    }


    .vcPromoBackgroundText{
        right:-15%;

        bottom:9%;

        font-size:
            clamp(
                160px,
                46vw,
                280px
            );
    }


    .vcPromoContent h2{
        font-size:
            clamp(
                39px,
                11vw,
                58px
            );
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media(max-width:500px){

    .vcPromoVisual{
        padding:
            18px
            18px
            0;
    }


    .vcPromoContent{
        padding:
            30px
            22px
            38px;
    }


    .vcPromoPriceWrap{
        display:block;
    }


    .vcPromoSavings{
        display:block;

        margin-top:7px;
    }


    .vcPromoActions{
        align-items:flex-start;
        flex-direction:column;
    }


    .vcPromoPrimary{
        width:100%;
    }

}

.vcPromoReveal{
    opacity:0;

    transform:
        translateY(28px);

    transition:
        opacity .75s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.vcPromoReveal.is-visible{
    opacity:1;

    transform:
        translateY(0);
}

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

    .vcPromoReveal{
        opacity:1;
        transform:none;
        transition:none;
    }

}