/*
 * Malvón – Efecto hover de las tarjetas de talleres
 * Se activa agregando clases CSS en Elementor (Avanzado → Clases CSS):
 *   - contenedor principal de la tarjeta:  mlv-tarjeta
 *   - encabezado "Más información":         mlv-tarjeta__mas
 * Los valores salen de las variables --mlv-tarjeta-*; se pueden redefinir en :root desde el tema.
 */
:root {
	--mlv-tarjeta-img-filtro: brightness(0.88) saturate(1.2);
	--mlv-tarjeta-transicion: 0.35s ease;
	--mlv-tarjeta-mas-hover: #ba4727;
	--mlv-tarjeta-mas-subrayado: 0.2em;
}

.elementor .mlv-tarjeta img {
	transition: filter var(--mlv-tarjeta-transicion);
}

.elementor .mlv-tarjeta:hover img,
.elementor .mlv-tarjeta:focus-visible img {
	filter: var(--mlv-tarjeta-img-filtro);
}

.elementor .mlv-tarjeta .mlv-tarjeta__mas .elementor-heading-title {
	transition: color var(--mlv-tarjeta-transicion);
}

.elementor .mlv-tarjeta:hover .mlv-tarjeta__mas .elementor-heading-title,
.elementor .mlv-tarjeta:focus-visible .mlv-tarjeta__mas .elementor-heading-title {
	color: var(--mlv-tarjeta-mas-hover);
	text-decoration: underline;
	text-underline-offset: var(--mlv-tarjeta-mas-subrayado);
}

@media (prefers-reduced-motion: reduce) {
	.elementor .mlv-tarjeta img,
	.elementor .mlv-tarjeta .mlv-tarjeta__mas .elementor-heading-title {
		transition: none;
	}
}