/* ================= SLIDER ================= */

.hero-slider{
    padding:22px;
}

.mainSlider{

    width:100%;

    height:520px;

    border-radius:30px;

    overflow:hidden;

    position:relative;

    box-shadow:
    0 0 30px rgba(168,85,247,.22);

    border:
    1px solid rgba(168,85,247,.25);
}

/* ================= SLIDE ================= */

.swiper-slide{
    position:relative;
}

.swiper-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;
}

/* ================= OVERLAY ================= */

.overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.58),
    rgba(0,0,0,.18)
    );
}

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

.slide-content{

    position:absolute;

    z-index:10;

    top:50%;

    left:60px;

    transform:translateY(-50%);

    max-width:520px;
}

.slide-content h1{

    font-size:78px;

    margin-bottom:18px;

    font-weight:900;

    line-height:.92;

    text-transform:uppercase;

    background:
    linear-gradient(
        180deg,
        #fff8dc 0%,
        #ffe082 15%,
        #ffca28 40%,
        #ffb300 65%,
        #ff8f00 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
    0 1px 0 #fff3c4,
    0 2px 0 #ffcc33,
    0 4px 0 #b36b00,
    0 8px 14px rgba(255,170,0,.45),
    0 0 25px rgba(255,193,7,.35);

    letter-spacing:-2px;
}

.slide-content p{

    font-size:22px;

    line-height:1.4;

    color:#ffffff;

    font-weight:500;

    margin-bottom:28px;

    text-shadow:
    0 0 10px rgba(0,0,0,.65);
}

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

.slide-content button{
    background:#7c3aed;

    color:white;

    border:none;

    padding:16px 34px;

    border-radius:16px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

    box-shadow:
    0 0 18px rgba(168,85,247,.35);
}

.slide-content button:hover{
    background:#8b5cf6;

    transform:scale(1.03);
}

/* ================= FLECHAS ================= */

.swiper-button-next,
.swiper-button-prev{
    color:white;
}

/* ================= PAGINACIÓN ================= */

.swiper-pagination-bullet{
    background:white;
    opacity:.6;
}

.swiper-pagination-bullet-active{
    background:#c084fc;
    opacity:1;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

    .mainSlider{
        height:340px;
    }

    .slide-content{
        left:30px;
        right:30px;
        max-width:100%;
    }

    .slide-content h1{
        font-size:42px;
    }

    .slide-content p{
        font-size:18px;
    }

}

@media(max-width:600px){

    .hero-slider{
        padding:10px;
    }

    .mainSlider{
        height:280px;
        border-radius:20px;
    }

    .slide-content{
        left:18px;
        top:50%;
        transform:translateY(-50%);
        max-width:180px;
    }

    .slide-content h1{

        font-size:42px;

        line-height:.9;

        margin-bottom:8px;
    }

    .slide-content p{

        font-size:13px;

        line-height:1.2;

        margin-bottom:12px;
    }

    .slide-content button{

        padding:10px 16px;

        font-size:12px;

        border-radius:14px;
    }

    .swiper-button-next,
    .swiper-button-prev{

        transform:scale(.55);
    }

}