/* ========================= */
/* 📱 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%;
    }

    .subtitulo{
        font-size:16px;
    }

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

    .btn{
        width:180px;
        height:45px;
        background:#367949;
        color:#fff;
        text-decoration:none;
        border-radius:4px;
        font-size:16px;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-right: 42px;
}
    .boton{
        display: flex;
        justify-content: center; /* Centra el botón horizontalmente */
        align-items: center;     /* Centra verticalmente si hay altura */
         width: 100%;
        }
}

/* ========================= */
/* 📱 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:12px;
    }

    .subtitulo{
        margin-top: 45%;
        font-size:14px;
        text-align: center;
    }
    .btn{
        width:180px;
        height:45px;
        background:#367949;
        color:#fff;
        text-decoration:none;
        border-radius:4px;
        font-size:16px;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-right: 42px;
}
    .boton{
        display: flex;
        justify-content: center; /* Centra el botón horizontalmente */
        align-items: center;     /* Centra verticalmente si hay altura */
         width: 100%;
        }
}