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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        var(--primary-light) 100%
    );

}


/* Fondo decorativo */

.hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-220px;

    top:-180px;

    background:var(--primary);

    opacity:.08;

    border-radius:50%;

}



.hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-150px;

    bottom:-150px;

    background:var(--primary);

    opacity:.05;

    border-radius:50%;

}



.hero .container{

    position:relative;

    z-index:2;

}


/* Badge superior */

.hero-badge{

    display:inline-block;

    padding:8px 20px;

    background:var(--primary-light);

    color:var(--primary);

    border-radius:50px;

    margin-bottom:25px;

    font-weight:600;

    font-size:15px;

}



/* Titulo */

.hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    color:var(--secondary);

    margin-bottom:25px;

}



.hero h1 span{

    color:var(--primary);

}



/* Texto */

.hero p{

    font-size:20px;

    line-height:1.7;

    color:var(--text-light);

    max-width:600px;

    margin-bottom:40px;

}



/* Imagen */

.hero-image{

    width:100%;

    max-width:600px;

    position:relative;

    z-index:2;

    animation:floatHero 4s ease-in-out infinite;

}



/* Animacion flotante */

@keyframes floatHero{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


    100%{

        transform:translateY(0);

    }


}



/* Botones */

.hero .btn-fix{

    padding:16px 38px;

    font-size:16px;

}



.hero .btn-outline-fix{

    padding:15px 38px;

    font-size:16px;

}



/* Responsive */

@media(max-width:991px){


    .hero{

        padding:120px 0 80px;

        text-align:center;

    }



    .hero h1{

        font-size:42px;

    }



    .hero p{

        margin-left:auto;

        margin-right:auto;

    }



    .hero .d-flex{

        justify-content:center;

    }



    .hero-image{

        margin-top:50px;

    }


}



@media(max-width:576px){


    .hero h1{

        font-size:34px;

    }


    .hero p{

        font-size:17px;

    }


    .hero .d-flex{

        flex-direction:column;

        align-items:center;

    }


}