/* Imagen invisible al inicio */
.lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    transition-delay: 0.5s;
    display: block; /* Asegura que sea un bloque para centrar correctamente */
    margin: 0 auto;
}

/* Imagen cargada */
.lazy.loaded {
    opacity: 1;
}

/* Contenedor de la barra de carga */
.lazy-loader {
    width: 100px;
    height: 4px;
    background-color: #e0e0e0; /* Gris claro */
    position: absolute; /* Para centrar en el contenedor */
    top: 50%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajusta el punto de origen al centro */
    z-index: 10; /* Asegura que esté sobre la imagen */
}

/* Barra de progreso */
.lazy-progress {
    width: 0;
    height: 100%;
    background-color: #00bcd4; /* Celeste */
    transition: width 0.1s ease;
}

/* Contenedor para la imagen y la barra */
.image-container {
    position: relative; /* Necesario para que la barra se posicione relativa a este contenedor */
    display: inline-block; /* Asegura que el tamaño del contenedor dependa de la imagen */
}