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

.hero{
    min-height:100vh;
    padding:240px 8% 120px;
    background:
        linear-gradient(rgba(5,18,35,.78), rgba(5,18,35,.78)),
        url('../img/fondo-industrial.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:white;
    display:flex;
    align-items:center;
    scroll-margin-top:140px;
}

.hero-content{
    max-width:1100px;
    width:100%;
    margin:0 auto;
}

.hero-text{
    max-width:900px;
}

.hero-badge{
    display:inline-block;
    background:var(--accent);
    color:white;
    padding:12px 24px;
    border-radius:50px;
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:25px;
}

.hero h1{
    color:white;
    font-size:62px;
    font-weight:800;
    line-height:1.08;
    margin-bottom:25px;
}

.hero p{
    max-width:860px;
    color:#E5E7EB;
    font-size:20px;
    line-height:1.8;
    margin:0;
}

@media(max-width:1200px){
    .hero{
        padding:220px 7% 110px;
    }

    .hero h1{
        font-size:54px;
    }
}

@media(max-width:992px){
    .hero{
        min-height:100vh;
        padding:210px 6% 90px;
        background:
            linear-gradient(rgba(5,18,35,.82), rgba(5,18,35,.82)),
            url('../img/fondo-industrial.png');
        background-size:cover;
        background-position:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-text{
        max-width:760px;
    }

    .hero h1{
        font-size:44px;
    }

    .hero p{
        font-size:18px;
    }
}

@media(max-width:768px){
    .hero{
        min-height:auto;
        padding:190px 6% 85px;
        align-items:flex-start;
    }

    .hero-badge{
        font-size:10px;
        padding:10px 15px;
        margin-bottom:18px;
        letter-spacing:.6px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.15;
        margin-bottom:18px;
    }

    .hero p{
        font-size:16px;
        line-height:1.7;
    }
}

@media(max-width:480px){
    .hero{
        padding:175px 5% 75px;
    }

    .hero h1{
        font-size:30px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-badge{
        font-size:9px;
        padding:9px 13px;
    }
}