.hero{
    background:#fff;
}

.hero-slider{
    position:relative;
    overflow:hidden;
}

.slide{
    display:none;
    position:relative;
}

.slide.active{
    display:block;
}

/* IMÁGENES */

.hero-desktop{
    width:100%;
    display:block;
}

.hero-mobile{
    display:none;
    width:100%;
}

/* OVERLAY */

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.68) 0%,
        rgba(0,0,0,.45) 40%,
        rgba(0,0,0,.1) 100%
    );
}

/* CONTENIDO */

.hero-content{
    position:absolute;
    left:6%;
    top:50%;
    transform:translateY(-50%);
    max-width:500px;
    color:#fff;
}

.eyebrow{
    font-size:15px;
    font-weight:600;
    margin-bottom:10px;
}

.hero-content h1,
.hero-content h2{
    font-size:clamp(34px,3.2vw,52px);
    line-height:.95;
    font-weight:900;
    margin-bottom:18px;
}

.hero-content p{
    font-size:16px;
    line-height:1.5;
    margin-bottom:22px;
}

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

/* FLECHAS */

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#ea4b3c;
    font-size:28px;
    cursor:pointer;
}

.prev{
    left:25px;
}

.next{
    right:25px;
}

/* MOBILE */

@media(max-width:768px){

    .slide{
        min-height:auto;
    }

    .hero-desktop{
        display:none;
    }

    .hero-mobile{
        display:block;
        width:100%;
        height:auto;
    }

    .overlay{
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.60) 0%,
            rgba(0,0,0,.25) 40%,
            rgba(0,0,0,.75) 100%
        );
    }

    .hero-content{
        position:absolute;
        left:20px;
        right:20px;
        bottom:55px;
        top:auto;
        transform:none;
        max-width:220px;
        z-index:20;
    }

    .eyebrow{
        font-size:11px;
        margin-bottom:8px;
    }

    .hero-content h1,
.hero-content h2{
    font-size:25px;
    line-height:1.1;
    margin-bottom:10px;
}

    .hero-content p{
        font-size:12px;
        line-height:1.3;
        margin-bottom:15px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:8px;
        align-items:flex-start;
    }

    .btn-primary,
    .btn-secondary{
        padding:10px 14px;
        font-size:11px;
    }

    /* FLECHAS ABAJO */

    .slider-btn{
        width:42px;
        height:42px;
        font-size:20px;
        top:auto;
        bottom:20px;
        transform:none;
    }

    .prev{
        left:20px;
    }

    .next{
        right:20px;
    }
}