/*==============================
HERO
==============================*/
.promotions-hero{
    width:100%;
    margin:auto;
    border-radius:var(--radius-xl) var(--radius-circle);
    min-height:88vh;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-3xl);
    padding-left: var(--space-upperxl);
    padding-right: var(--space-upperxl);;
    padding-bottom:var(--space-xl);
    animation:
        fadeUp 
        var(--motion-upperslow) 
        var(--ease-smooth) 
        forwards;

}
section h2{
    text-align:center;
}
.promotions-hero.hero-overlay{
    margin-top: var(--space-lg);
}

/*==============================
LEFT
==============================*/
.hero-left{
    margin-top: var(--space-3xl);
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    animation:
        fadeUp 
        var(--motion-upperslow) 
        var(--ease-smooth)  
        forwards;

}

.hero-tag{
    display:inline-flex;
    align-self:flex-start;
    padding:var(--space-sm) var(--space-lg);
    border-radius:var(--radius-pill);
    background:var(--color-primary-hover);
    font-size:var(--text-small);
    font-weight:var(--weight-bold);
    letter-spacing:var(--tracking-ultra);
    margin-bottom:var(--space-xl);
    box-shadow:
        0 0 25px var(--color-shadow-red);
}

.hero-left h1{
    font-size:var(--text-clamp);
    font-weight:var(--weight-bold);
    line-height:var(--leading-tight);
    margin-bottom:var(--space-xl);
    color:var(--color-text);
}

.hero-left p{
    max-width:560px;
    color:var(--color-text-secondary);
    line-height:var(--leading-body);
    font-size:var(--text-large);
    margin-bottom:var(--space-2xl);
}

/*==============================
RIGHT
==============================*/

.hero-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    animation:
        fadeUp  
        var(--motion-upperslow) 
        var(--ease-smooth)  
        forwards;
}

/*
Poster temporal
*/
.hero-right::before{
    content:"PROMO";
    width:550px;
    height:550px;
    border-radius:var(--radius-xl);
    background:
    linear-gradient(
        135deg,
        #1a1a1a,
        #0d0d0d
    );
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:var(--text-displaybig);
    font-weight:var(--weight-bold);
    color:var(--color-background-foot);
    border:1px solid var(--glass-border);
    box-shadow:
        var(--shadow-large);
    animation:
        floatIllustration
        6s
        ease-in-out
        infinite;

}

.discount{
    display:inline-flex;
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-pill);
    background:var(--color-primary-hover);
    color:var(--color-text);
    font-size:var(--text-uppersmall);
    font-weight:var(--weight-bold);
    letter-spacing:var(--tracking-ultra);
    margin-bottom:var(--space-lg);

}

/*======================================================
HOW IT WORKS
======================================================*/
.steps{
    border-radius: var(--radius-circle);
    width:min(1400px,92%);
    margin:var(--space-3xl) auto;
}

.step-container{
    display:flex;
    justify-content:space-between;
    gap:var(--space-2xl);
    margin-top:var(--space-3xl);
}

.step{
    flex:1;
    padding:var(--space-2xl);
    text-align:center;
    font-size:var(--text-h1);
    transition: 
        var(--motion-slow) 
        var(--ease-smooth);

}

.step p{
    margin-top:var(--space-lg);
    font-size:var(--text-h3);
    color:var(--color-text-secondary);
    line-height:var(--leading-body);
}

/*======================================================
BENEFITS
======================================================*/
.benefits{
    border-radius: var(--radius-circle);
    width:min(1400px,92%);
    margin:var(--space-3xl) auto;
}

.benefit-grid div{
    padding:var(--space-2xl) var(--space-lg);
    text-align:center;
    font-size:var(--text-large);
    font-weight:var(--weight-semibold);
    transition:var(--motion-slow);
    line-height:var(--leading-body);
}

.benefit-grid div:hover{
    transform:
        translateY(-10px);
    border-color:var(--color-primary-hover);
    color:var(--color-text);
    box-shadow:
        var(--glow-red-strong);
}

/*======================================================
FEATURED OFFER
======================================================*/
.featured-offer{
    width:min(1200px,90%);
    margin:var(--space-3xl)auto;
    border-radius:var(--radius-xl);
    padding:var(--space-3xl) var(--space-3xl);
    text-align:center;
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(
        135deg,
        var(--color-primary-hover),
        var(--color-primary-soft)
    );
}

.featured-offer::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(
        circle,
        var(--glass-bg-strong),
        transparent 70%
    );
}

.featured-offer span{
    display:inline-block;
    padding:var(--space-sm) var(--space-lg);
    border-radius:var(--radius-pill);
    background:var(--color-text);
    color:var(--color-primary-soft);
    font-weight:var(--weight-bold);
    margin-bottom:var(--space-xl);
}

.featured-offer h2{
    font-size:var(--text-displaybig);
    line-height:var(--leading-tight);
    margin-bottom:var(--space-xl);
}

.featured-offer p{
    font-size:var(--text-large);
    color:#ffe3e3;
    margin-bottom:var(--space-2xl);
}

.promotion-card button{
    width:100%;
    height:55px;
    border:none;
    border-radius:var(--radius-pill);
    background: var(--color-primary-hover);
    color:var(--color-text);
    font-size:var(--text-body);
    font-weight:var(--weight-bold);
    cursor:pointer;
    transition:var(--motion-normal);
}

.promotion-card button:hover{
    background:var(--color-primary-light);
    transform:translateY(-2px);
}

.promotion-cta a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:320px;
    height:60px;
    border-radius:var(--radius-pill);
    background:var(--color-primary-hover);
    color:var(--color-text);
    text-decoration:none;
    font-weight:var(--weight-bold);
    transition:var(--motion-normal);
}

.promotion-cta a:hover{
    background:var(--color-primary-light);
    transform:translateY(-5px);
}
/*======================================================
CALL TO ACTION
======================================================*/
.promotion-cta{
    border-radius: var(--radius-circle);
    width:min(900px,90%);
    margin:var(--space-upperxl) auto;
    text-align:center;
}

.promotion-cta h2{
    font-size:var(--text-h1);
    margin-bottom:var(--space-2xl);
}

.step:hover{
    transform:translateY(-10px);
    border-color:var(--color-primary-hover);
    box-shadow:
        var(--glow-red-strong);
}