/* ============================================================================
   Relacionados "A2" de las aperturas (Claves del día + Cobertura especial)
   ----------------------------------------------------------------------------
   Estilo del handoff design/portada/design_handoff_aperturas (estilo A2): los
   relacionados se leen como un paquete subordinado al tema. La única señal de
   agrupación es una ESPINA vertical azul tinte a la izquierda; SIN filete
   horizontal de separación con la firma; filetes finos solo ENTRE ítems.

   Markup (componente pieces/Related.astro con la prop `a2`):
     <ul class="rel rel__spine">
       <li><a class="rel__item">
         <span class="rel__type [rel__type--live]">Tipo</span>
         <span class="rel__title">Titular…</span>
       </a></li>
     </ul>

   Nota: el handoff usa <a> hermanos directos (`.rel__item:first-child`); aquí
   conservamos <ul><li> por la convención SEO del proyecto, así que los filetes
   y el primer ítem se resuelven con `li:first-child` / `li:not(:first-child)`.
   ========================================================================== */

.rel {
	--rel-spine: #e8eef7; /* azul tinte muy suave; override aquí si hace falta */
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: 0;
}

/* Espina: única señal de agrupación. Sobre el <ul> resetea su sangría por
   defecto y deja el padding-left de 14px del handoff. */
.rel__spine {
	border-left: 2px solid var(--rel-spine);
	padding-left: var(--sp-4);
}

.newsmod--econ .rel__spine {
	border-left: 2px solid var(--hair);
}

.rel__item {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 12px 0;
}
/* Sin filete sobre el primer ítem (pega con la firma); filetes finos entre ítems. */
.rel li:first-child .rel__item {
	padding-top: 0;
}
.rel li:not(:first-child) .rel__item {
	border-top: 1px solid var(--hair);
}

.rel li:last-child .rel__item {
	padding-bottom: 0;
}

/* Etiqueta de tipo: sans, mayúsculas, navy. Rojo + punto si es directo. */
.rel__type {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--f-sans);
	font-size: var(--fs-12); /* 11.5px */
	line-height: var(--lh-12); /* 11.5px */
	font-weight: 500;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lv-blue);
	margin-bottom: 2px;
}
.rel__type--live {
	color: var(--live);
}
.rel__type--live::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--live);
}

/* Titular: serif de titular, 600. 16px por defecto. */
.rel__title {
	display: block;
	font-family: var(--f-headline);
	font-weight: 600;
	font-size: var(--fs-16); /* 16px */
	line-height: var(--lh-16);
	color: var(--headline);
}

/* Hover: criterio de marca (el titular pasa a navy). */
.rel__item:hover .rel__title {
	opacity: 0.85;
}

/* Tamaño secundario (14,5px): columna apilada de lead2 y columnas 2/3 de 3col. */
.claves__side .rel__title,
.apertura--claves-3col .claves-col:not(.claves-col--lead) .rel__title {
	font-size: var(--fs-15); /* 14.5px */
	line-height: var(--lh-15);
}

/* Stretched-link: en split/lead2/3col-lead los relacionados viven DENTRO de un
   <article> cuyo titular principal tiene un overlay ::after (z-index:1) que cubre
   toda la tarjeta. Elevamos .rel__item para que siga siendo clicable (igual que
   .related__link en base.css). */
article .rel__item {
	position: relative;
	z-index: 2;
}

/* Móvil: titulares de relacionados a 14,5px (handoff). */
@media (max-width: 640px) {
	.rel__type {
		font-size: var(--fs-13);
		line-height: var(--lh-13);
	}

	.rel__title {
		font-size: var(--fs-18); /* 14.5px */
		line-height: var(--lh-18);
	}

	.claves__side .rel__title,
	.apertura--claves-3col .claves-col:not(.claves-col--lead) .rel__title {
		font-size: var(--fs-18); /* 14.5px */
		line-height: var(--lh-18);
	}
}

/* ── Variante de COLUMNAS con espina ─────────────────────────────────────────
   claves-full y la cobertura especial Visual/Reducido conservan el layout antiguo
   de 3 columnas (.lead-related / .acon-derived-row, con su filete superior), pero
   cada columna lleva ahora la MISMA espina azul del A2 (border-left), a petición. */
.lead-related,
.acon-derived-row {
	--rel-spine: #e8eef7;
}
.lead-related > li,
.acon-derived-row > li {
	border-left: 2px solid var(--rel-spine);
	padding-left: var(--sp-4);
}