/* ========================= */
/* 📱 TABLET (hasta 1024px)  */
/* ========================= */
@media (max-width:1024px){
.hero{
    width:100%;
    height:100vh;

    background-image: url(../img/Index-Euromilk-tablet-bg.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;

    display:flex;
    align-items:center;
}
    .contenido{
        left:50%;
        transform:translate(-50%,-50%);
        gap:25px;
    }

    .subtitulo{
        font-size:18px;
    }

    h1{
        font-size:34px;
    }

    .btn{
        padding:14px 30px;
        font-size:18px;
    }
}

/* ========================= */
/* 📱 MÓVIL (hasta 768px)    */
/* ========================= */
@media (max-width:768px){

.hero{
    width:100%;
    height:100vh;

    background-image: url(../img/Index-Euromilk-movil-bg.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;

    display:flex;
    align-items:center;
}
    .contenido{
        position:relative;
        top:auto;
        left:auto;
        transform:none;

        flex-direction:column;
        text-align:center;

        width:100%;
        padding:0 20px;
    }

    .subtitulo{
        font-size:16px;
    }

    h1{
        font-size:14px;
        letter-spacing:1px;
    }

    .btn{
        font-size:16px;
        padding:10px 20px;
    }
}

/* ========================= */
/* 📱 MÓVIL PEQUEÑO (480px)  */
/* ========================= */
@media (max-width:480px){
    .hero{
    width:100%;
    height:100vh;

    background-image: url(../img/Index-Euromilk-movil-bg.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;

    display:flex;
    align-items:center;
}
    h1{
        font-size:15px;
    }

    .subtitulo{
        margin-top: 35%;
        font-size:16px;
    }

    .btn{
        width: 40%;
        text-align:center;
    }
}