/* ==========================================================================
   Malai · artículos relacionados con un tratamiento

   Aparecen al pie de la ficha y, en el artículo, al revés: una tarjeta que
   devuelve a la ficha. Las dos piezas usan el mismo lenguaje visual para que
   se lean como los dos extremos del mismo camino.
   ========================================================================== */

.articulos-ficha__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--e-m);
	margin-top: var(--e-xl);
	padding: 0;
	list-style: none;
}

.articulos-ficha__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--e-m);
	border: 1px solid var(--c-borde);
	border-radius: var(--r-l);
	background-color: var(--c-fondo);
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--t-media) var(--curva),
		box-shadow var(--t-media) var(--curva);
}

.articulos-ficha__enlace:hover {
	transform: translateY(-0.25rem);
	box-shadow: var(--s-media);
}

.articulos-ficha__titulo {
	color: var(--c-acento);
	font-size: var(--fs-h4);
	font-weight: var(--peso-fino);
	line-height: var(--lh-titulo);
	text-wrap: balance;
}

.articulos-ficha__extracto {
	margin-top: var(--e-2xs);
	color: var(--c-tinta-suave);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* El «leer» queda anclado abajo aunque los extractos midan distinto. */
.articulos-ficha__mas {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2xs);
	margin-top: auto;
	padding-top: var(--e-s);
	color: var(--c-marca-texto);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-versal);
	text-transform: uppercase;
}

.articulos-ficha__enlace:hover .articulos-ficha__mas {
	color: var(--c-acento);
}

/* --------------------------------------------------------------------------
   La vuelta: del artículo a la ficha
   -------------------------------------------------------------------------- */

.ficha-del-articulo {
	margin-top: var(--e-xl);
	padding: var(--e-l);
	border-radius: var(--r-xl);
	background-color: var(--c-super-1);
}

.ficha-del-articulo__rotulo {
	color: var(--c-marca-texto);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-versal);
	text-transform: uppercase;
}

.ficha-del-articulo__titulo {
	margin-top: var(--e-2xs);
	color: var(--c-acento);
	font-size: var(--fs-h3);
	font-weight: var(--peso-fino);
	line-height: var(--lh-titulo);
}

.ficha-del-articulo__texto {
	margin-top: var(--e-2xs);
	color: var(--c-tinta-suave);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.ficha-del-articulo__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-s);
	margin-top: var(--e-m);
}