/* Lazy Loading Optimization for Images */

/* Prevenir content shift mientras se carga */
img[loading="lazy"] {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0),
                linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-color: #e0e0e0;
    background-repeat: repeat;
    min-height: 200px;
}

img[loading="lazy"].card-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
}

/* Smooth transition cuando carga */
img[loading="lazy"] {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

/* Optimización de imagen cuando está cargada */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Para imágenes en carruseles */
.owl-carousel img {
    object-fit: cover;
    object-position: center;
}

/* Para tarjetas de libros */
.card-img {
    object-fit: cover;
    object-position: center top;
    aspect-ratio: 3/4;
}

/* Para imágenes de producto */
.imagen_libro {
    object-fit: contain;
    object-position: center;
}

/* Evitar pixelización con respuesta rápida */
.tarjeta_libro_imagen img {
    will-change: transform;
    transition: transform 0.2s ease-out;
}

.tarjeta_libro_imagen:hover img {
    transform: scale(1.02);
}

/* Compresión de imágenes grandes */
img[width="100%"],
img[width="100%"] {
    max-width: 100%;
    height: auto;
}