/* "También te puede interesar" — sobreescribe los tokens desde el tema o Elementor. */
.fi-related {
	--fi-navy: #0f1c2e;
	--fi-ink: #0f1c2e;
	--fi-paper: #f7f5f0;
	--fi-gold: #b8955a;
	--fi-muted: #5b6573;
	--fi-gap: clamp(1rem, 2vw, 2rem);
	--fi-ratio: 4 / 5;      /* Ajustable desde la pantalla de ajustes. */
	--fi-card-bg: transparent;
	--fi-card-bc: transparent;
	--fi-card-pad: 0px;
	--fi-card-bw: 0px;
	--fi-card-radius: 0px;
	/* Por defecto, esquinas interiores coherentes con la tarjeta; se puede fijar un valor propio. */
	--fi-img-radius: max(0px, calc(var(--fi-card-radius) - var(--fi-card-pad)));
	--fi-cols: 3;
	--fi-cols-tablet: 2;
	--fi-cols-mobile: 1;
	/* Ancho de tarjeta derivado de las columnas visibles. */
	--fi-card: calc((100% - (var(--fi-cols) - 1) * var(--fi-gap)) / var(--fi-cols));

	color: var(--fi-ink);
	padding-block: clamp(3rem, 6vw, 6rem);
}

.fi-related__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--fi-gap);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.fi-related__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.1;
	color: inherit;
}

.fi-related__nav { display: flex; gap: .5rem; }
.fi-related__nav[hidden] { display: none; }

.fi-related__btn {
	inline-size: 3rem;
	block-size: 3rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color .2s, color .2s, opacity .2s;
}
.fi-related__btn svg { inline-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.fi-related__btn:hover:not(:disabled) { background: var(--fi-navy); color: var(--fi-paper); }
.fi-related__btn:disabled { opacity: .3; cursor: default; }
.fi-related__btn:focus-visible { outline: 2px solid var(--fi-gold); outline-offset: 3px; }

.fi-related__track {
	list-style: none;
	margin: 0;
	padding: 0 0 1rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--fi-card);
	gap: var(--fi-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.fi-related__track::-webkit-scrollbar { display: none; }

.fi-related__card {
	position: relative;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--fi-card-bg);
	border: var(--fi-card-bw) solid var(--fi-card-bc);
	border-radius: var(--fi-card-radius);
	padding: var(--fi-card-pad);
}

.fi-related__media {
	aspect-ratio: var(--fi-ratio);
	overflow: hidden;
	background: var(--fi-navy);
	border-radius: var(--fi-img-radius);
}
.fi-related__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

.fi-related__body { padding-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.fi-related__name { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.fi-related__name a { color: inherit; text-decoration: none; }
/* Toda la tarjeta clicable sin anidar enlaces. */
.fi-related__name a::after { content: ""; position: absolute; inset: 0; }
.fi-related__name a:focus-visible { outline: none; }
.fi-related__card:has(a:focus-visible) { outline: 2px solid var(--fi-gold); outline-offset: 4px; }

.fi-related__desc { margin: 0; color: var(--fi-muted); font-size: .95rem; line-height: 1.55; }

.fi-related__more {
	margin-top: auto;
	padding-top: .75rem;
	align-self: flex-start;
	font-size: .9rem;
	border-bottom: 1px solid var(--fi-gold);
	padding-bottom: 2px;
}

.fi-related__card:hover .fi-related__media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.fi-related__track { scroll-behavior: auto; }
	.fi-related__media img, .fi-related__btn { transition: none; }
	.fi-related__card:hover .fi-related__media img { transform: none; }
}

@media (max-width: 1024px) {
	.fi-related { --fi-cols: var(--fi-cols-tablet); }
}

@media (max-width: 781px) {
	.fi-related { --fi-cols: var(--fi-cols-mobile); }
}