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

:root{

    --morado:#7B1FA2;
    --rosa:#E91E63;
    --naranja:#F57C00;
    --gris:#F8F9FA;

}

#header-carousel{

    margin-top:0;

}

#header-carousel .carousel-item{

    height:92vh;

    min-height:650px;

    position:relative;

}

.portada-imm{

    width:100%;

    height:92vh;

    object-fit:cover;

}

/* Overlay */

#header-carousel .carousel-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        rgba(62,22,82,.85),
        rgba(123,31,162,.45),
        rgba(0,0,0,.25)
    );

    z-index:1;

}

.carousel-caption{

    z-index:5;

    bottom:0;

    top:0;

    display:flex!important;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.hero-box{

    max-width:900px;

}

.hero-badge{

    display:inline-block;

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

    backdrop-filter:blur(8px);

    padding:12px 28px;

    border-radius:50px;

    color:#FFF;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:14px;

    margin-bottom:25px;

}

.hero-title{

    color:#FFF;

    font-size:62px;

    font-weight:700;

    line-height:1.1;

    margin-bottom:25px;

}

.hero-text{

    color:#FFF;

    font-size:22px;

    line-height:1.8;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.btn-hero{

    padding:16px 34px;

    border-radius:40px;

    font-size:17px;

    font-weight:600;

    transition:.35s;

    text-decoration:none;

}

.btn-principal{

    background:#7B1FA2;

    color:#FFF;

}

.btn-principal:hover{

    background:#E91E63;

    color:#FFF;

    transform:translateY(-4px);

}

.btn-secundario{

    background:#FFF;

    color:#7B1FA2;

}

.btn-secundario:hover{

    background:#F57C00;

    color:#FFF;

    transform:translateY(-4px);

}

/* Flechas */

.carousel-control-prev,

.carousel-control-next{

    width:70px;

}

.carousel-control-prev-icon,

.carousel-control-next-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background-color:rgba(255,255,255,.20);

    background-size:45%;

}

@media(max-width:991px){

.hero-title{

font-size:40px;

}

.hero-text{

font-size:18px;

}

#header-carousel .carousel-item,

.portada-imm{

height:75vh;

}

}