/* Estilos generales */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Asegura que html y body ocupen el 100% del viewport */
    overflow: hidden; /* Evita barras de desplazamiento si la imagen es más grande */
}

.imagen-contenedor {
    width: 100vw; /* 100% del ancho del viewport */
    height: 100vh; /* 100% del alto del viewport */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para la imagen */
img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Esta propiedad es CRUCIAL para que la imagen cubra todo el espacio sin distorsionarse */
    object-position: center; /* Centra la imagen si hay recorte */
}

/* Media query para dispositivos de escritorio (pantallas más anchas) */
@media (min-width: 768px) {
    /* En escritorio, la imagen seguirá ocupando todo, pero si quieres puedes ajustar el object-fit si no te gusta 'cover' */
    /* Por ejemplo, si prefieres que se vea toda la imagen aunque deje barras laterales: object-fit: contain; */
    img {
        object-fit: cover; /* Sigue cubriendo todo para evitar márgenes */
    }
}

/* Media query para dispositivos móviles (pantallas más pequeñas) */
@media (max-width: 767px) {
    img {
        /* Para que la imagen se vea en forma vertical en móviles */
        width: 100%;
        height: 100%; /* Ahora ocupará el 100% del alto del contenedor, que es 100vh */
        object-fit: cover; /* Asegura que cubra todo el espacio manteniendo su proporción */
        object-position: center; /* Centra la imagen */
    }
}