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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:900px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background-image:url("../images/hero-desktop.webp");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 35%,
            rgba(0,0,0,.15) 60%,
            rgba(0,0,0,.45) 82%,
            rgba(0,0,0,.88) 100%
        ),

        linear-gradient(
            to bottom,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,.05) 30%,
            rgba(0,0,0,.25) 70%,
            rgba(0,0,0,.92) 100%
        );

    pointer-events:none;

}

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

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    height:100%;

}

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

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

.hero-button{

    position:absolute;

    left:50%;

    bottom:90px;

    transform:translateX(-50%);

    width:360px;

    height:68px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:999px;

    background:linear-gradient(90deg,#E30613,#ff2d3c);

    color:#ffffff;

    font-size:20px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

    text-decoration:none;

    cursor:pointer;

    overflow:hidden;

    isolation:isolate;

    transition:
        transform .35s,
        box-shadow .35s,
        background .35s;

    box-shadow:
        0 15px 35px rgba(227,6,19,.40);

}

/* Brillo */

.hero-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:left .8s;

    z-index:-1;

}

.hero-button:hover::before{

    left:150%;

}

.hero-button:hover{

    transform:translateX(-50%) translateY(-4px);

    background:linear-gradient(90deg,#ff2435,#ff4654);

    box-shadow:

        0 25px 55px rgba(227,6,19,.55);

}


/*==================================================
SCROLL
==================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    width:26px;

    height:45px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:20px;

}

.hero-scroll span{

    position:absolute;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    width:4px;

    height:8px;

    border-radius:10px;

    background:#ffffff;

    animation:scrollMove 1.8s infinite;

}

@keyframes scrollMove{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(-50%,16px);

    }

}