/* ==========================================================
   HERO PREMIUM - METAVERSO
==========================================================*/

.hero-banner{
    position:relative;
    overflow:hidden;
    min-height:780px;
    display:flex;
    align-items:center;
    background:#07192f;
}

/* -------------------------------------------------------- */
/* VIDEO */
/* -------------------------------------------------------- */

.hero-video{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.hero-video video{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.08);

    filter:
        brightness(.72)
        saturate(1.15)
        contrast(1.05);

    animation:heroCinema 30s linear infinite alternate;
}

@keyframes heroCinema{

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1.15);
    }

}

/* -------------------------------------------------------- */
/* OVERLAY */
/* -------------------------------------------------------- */

.hero-overlay{

    position:absolute;
    inset:0;

    z-index:1;

    background:
    linear-gradient(
        120deg,

        rgba(6,22,48,.82) 0%,

        rgba(15,40,85,.55) 40%,

        rgba(0,80,170,.20) 100%

    );

    background-size:250% 250%;

    animation:overlayMove 40s ease infinite;

}

@keyframes overlayMove{

    0%{

        background-position:left center;

    }

    50%{

        background-position:right center;

    }

    100%{

        background-position:left center;

    }

}

.hero-banner .container{

    position:relative;
    z-index:3;

}

/* -------------------------------------------------------- */
/* CARD */
/* -------------------------------------------------------- */

.hero-card{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.45);

    border-radius:30px;

    padding:50px;

    box-shadow:

        0 25px 70px rgba(0,0,0,.25),

        inset 0 1px 0 rgba(255,255,255,.35);

}

.hero-card .title{

    color:#08203e;

    text-shadow:0 1px 2px rgba(255,255,255,.20);

    margin-bottom:20px;

}

.hero-card p{

    color:#495869;

    font-size:17px;

    line-height:1.9;

    margin-bottom:30px;

}


/* -------------------------------------------------------- */
/* DESKTOP */
/* -------------------------------------------------------- */

@media(min-width:992px){

    .banner-thumbnail{

        display:none;

    }

}
/* -------------------------------------------------------- */
/* MOBILE */
/* -------------------------------------------------------- */

@media(max-width:991px){

    .hero-banner{

        min-height:auto;

        padding:45px 0;

        background:#fff;

    }

    .hero-video{

        display:block;

    }

    .hero-overlay{

        display:block;

    }

    .hero-card{

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

        backdrop-filter:blur(5px);

        padding:25px;

        border-radius:24px;

        box-shadow:

            0 15px 35px rgba(0,0,0,.10);

    }

    .hero-card .title{

        font-size:28px;

        line-height:1.15;

    }

    .hero-card p{

        font-size:14px;

        line-height:1.6;

    }

    .banner-thumbnail{

        display:none;

    }

}


/* -------------------------------------------------------- */
/* CELULARES PEQUENOS */
/* -------------------------------------------------------- */

@media(max-width:575px){

    .hero-banner{

        padding:35px 15px;

    }

    .hero-card{

        padding:22px 20px;

        border-radius:20px;

    }

    .hero-card .title{

        font-size:24px;

        line-height:1.15;

    }

    .hero-card p{

        font-size:13px;

        line-height:1.55;

        margin-bottom:18px;

    }

}