/* ================================
HERO
================================ */

#homeHero{
    width:100%;
    margin:0;
    position:relative;
    z-index:1;
}

/* indicadores */

#homeHero .carousel-indicators [data-bs-target]{
    width:10px;
    height:10px;
    border-radius:50%;
    border:0;
    margin:0 6px;
    background-color:#ffffff;
    opacity:0.5;
}

#homeHero .carousel-indicators .active{
    opacity:1;
}

/* slide base */

.hero-slide{
    height:520px;
    background-size:cover;
    background-position:center right;
    position:relative;
}

.hero-main{
    height:520px;
}

/* overlay */

.hero-overlay{
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    position:absolute;
    z-index:2;
}

.hero-overlay-gradient{
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.85) 40%,
        rgba(255,255,255,0) 75%
    );
}

/* contenido */

.hero-main-content{
    max-width:57%;
}

.hero-big{
    font-size:3.2rem;
    line-height:1.1;
    letter-spacing:-1px;
}

.hero-sub{
    font-size:1.2rem;
    color:#555;
}

/* botones */

.hero-buttons{
    display:flex;
    gap:15px;
}

/* stats */

.hero-stats{
    background:rgba(255,255,255,0.3);
    backdrop-filter:blur(6px);
    padding:15px 20px;
    border-radius:12px;
    display:inline-flex;
    opacity:0.85;
}

.stat-box{
    font-size:0.9rem;
    color:#444;
    min-width:150px;
}

.stat-box strong{
    font-size:1.1rem;
    color:#000;
}

/* carousel */

.carousel,
.carousel-inner,
.carousel-item{
    z-index:1;
}

.carousel-indicators{
    bottom:20px;
}

.carousel-indicators button{
    width:10px;
    height:10px;
    border-radius:50%;
    opacity:0.6;
}

.carousel-indicators .active{
    opacity:1;
}


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

@media (max-width:768px){

    .hero-slide,
    .hero-main{
        min-height:520px;
        height:auto;
        background-position:65% center;
    }

    .hero-overlay{
        position:relative;
        align-items:flex-start;
        padding-top:60px;
        padding-bottom:40px;
    }

    .hero-overlay-gradient{
        background:linear-gradient(
            180deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.92) 40%,
            rgba(255,255,255,0.85) 100%
        );
    }

    .hero-main-content{
        max-width:100%;
        text-align:center;
        margin:auto;
        padding:0 20px;
    }

    .hero-big{
        font-size:2rem;
        line-height:1.2;
    }

    .hero-sub{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        gap:10px;
    }

    .hero-buttons .btn{
        width:100%;
        padding:14px 20px;
    }

    /* stats */

    .hero-stats{
        flex-direction:column;
        width:100%;
        align-items:center;
        text-align:center;
        margin-top:15px;
        padding:15px;
    }

    .stat-box{
        min-width:auto;
        margin:6px 0;
    }

}


/* ================================
SELL BANNER
================================ */

.sell-banner{
    padding:60px 0;
}

.sell-banner-box{
    position:relative;
    border-radius:15px;
    padding:30px 50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;

    background-image:url("../img/tenes_productos_padel.jpg");
    background-size:cover;
    background-position:center;
}

/* contenido sobre overlay */

.sell-banner-box>*{
    position:relative;
    z-index:2;
}

.sell-banner-content{
    max-width:650px;
    color:#fff;
}

.sell-banner-content h2{
    font-size:2.4rem;
    font-weight:800;
    margin-bottom:15px;
}

.sell-banner-content p{
    font-size:1.1rem;
    line-height:1.6;
    opacity:1;
}

.sell-banner-action{
    z-index:2;
}

.btn-sell{
    background:#fff;
    color:#222;
    padding:18px 40px;
    border-radius:18px;
    font-size:1.2rem;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    transition:all .3s ease;
}

.btn-sell:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

/* responsive banner */

@media (max-width:992px){

    .sell-banner-box{
        flex-direction:column;
        text-align:center;
        gap:30px;
        padding:40px 30px;
    }

    .sell-banner-content h2{
        font-size:1.8rem;
    }

    .btn-sell{
        width:100%;
        text-align:center;
    }

}