/*
 * Efecto de carga para imágenes remotas (miniaturas y portadas de los juegos).
 * Se aplica a los widgets con la clase "eva-img-loader". Mientras la imagen no está
 * lista se ve un rectángulo gris con un brillo que lo recorre; "eva-listo" lo apaga.
 */

@keyframes eva-brillo {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}

.eva-js .eva-img-loader:not(.eva-listo) .elementor-cta__bg,
.eva-js .eva-img-loader:not(.eva-listo) img {
	background-color: #d9d9d9 !important;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 65%) !important;
	background-size: 200% 100% !important;
	background-repeat: no-repeat !important;
	animation: eva-brillo 1.4s linear infinite;
}

/* Que no se vea el texto alternativo ni el ícono de imagen rota mientras carga. */
.eva-js .eva-img-loader:not(.eva-listo) img {
	color: transparent;
}

/* La portada ocupa siempre el mismo rectángulo 16:9, haya imagen o no. */
.eva-img-portada img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.eva-js .eva-img-loader:not(.eva-listo) .elementor-cta__bg,
	.eva-js .eva-img-loader:not(.eva-listo) img {
		animation: none;
	}
}