/* ==========================================================================
   Matati — tarjeta de producto (template-parts/content/card-producto.php)
   Sencilla, como las de The Woobles: foto redondeada, nombre, nivel,
   idiomas y precio; sin bordes ni sombras. La usan la tienda y sus
   categorías (shop.css) y los carruseles de Matati Crafts (crafts.css).
   ========================================================================== */

.tarjeta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	text-decoration: none;
}

.tarjeta__foto {
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
	background: var(--blanco);
	border-radius: 28px;
}

.tarjeta__foto img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--suave);
}

.tarjeta:hover .tarjeta__foto img { transform: scale(1.04); }

.tarjeta__nombre {
	font-family: var(--fuente-titulo);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
}

.tarjeta:hover .tarjeta__nombre { color: var(--turquesa); }

.tarjeta__nivel {
	font-size: 14px;
	font-weight: 700;
	color: var(--turquesa);
}

.tarjeta__precio {
	font-size: 17px;
	font-weight: 800;
}

.tarjeta__precio del {
	margin-right: 6px;
	font-weight: 600;
	opacity: .55;
}

.tarjeta__precio ins { text-decoration: none; }

.tarjeta:focus-visible { outline: 0; }
.tarjeta:focus-visible .tarjeta__foto {
	outline: var(--grosor-grueso) solid var(--turquesa);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.tarjeta__foto img { transition: none; }
}