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

.hero{

    min-height:calc(100vh - 80px);

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero-content h1{

    color:#FFFFFF;

    font-size:48px;

    font-weight:800;

    line-height:1.1;

    margin:14px 0 18px;

}

.hero-content h1 span{

    color:var(--color-primary-light);

}

.hero-content p{

    color:#D6DCE8;

    font-size:18px;

    margin-bottom:35px;

}

.hero-badge{

    color:#7EB5FF;

    letter-spacing:2px;

    font-size:14px;

    font-weight:700;

}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:30px;

}

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

.hero .container{

    height:100%;

}

.hero .row{

    min-height:640px;

    align-items:center;

}


/*=========================================================
COLUMNA TEXTO
=========================================================*/

.hero-content{

    max-width:600px;

    padding-left:20px;

}


/*=========================================================
COLUMNA IMAGEN
=========================================================*/

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}


.hero-image img{

    width:100%;

    max-width:650px;

    height:auto;

    object-fit:contain;

    display:block;

}

.hero-buttons{

    display:flex;

    gap:20px;

}


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

.hero-content{

    max-width:600px;

}

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

.hero-slider{

    position:absolute;

    inset:0;

    z-index:0;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 1.5s ease-in-out;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.hero-slide.active{

    opacity:1;

}

/*=========================================================
IMÁGENES HERO
=========================================================*/

.hero-slide:nth-child(1){

    background:
    linear-gradient(
        90deg,
        rgba(7,27,68,.94) 0%,
        rgba(7,27,68,.88) 30%,
        rgba(7,27,68,.55) 55%,
        rgba(7,27,68,.10) 100%
    ),
    url("../img/hero/hero1.webp");

    background-size:cover;

    background-position:center;

}

.hero-slide:nth-child(2){

    background:
    linear-gradient(
        90deg,
        rgba(7,27,68,.94) 0%,
        rgba(7,27,68,.88) 30%,
        rgba(7,27,68,.55) 55%,
        rgba(7,27,68,.10) 100%
    ),
    url("../img/hero/hero2.webp");

    background-size:cover;

    background-position:center;

}

.hero-slide:nth-child(3){

    background:
    linear-gradient(
        90deg,
        rgba(7,27,68,.94) 0%,
        rgba(7,27,68,.88) 30%,
        rgba(7,27,68,.55) 55%,
        rgba(7,27,68,.10) 100%
    ),
    url("../img/hero/hero3.webp");

    background-size:cover;

    background-position:center;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

}

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

.hero .container{

    position:relative;

    z-index:2;

}