/*
 * Componentes compartidos por los cuatro layouts.
 *
 * Todo sale de tokens. Un componente que escriba un color, una fuente o un
 * radio en duro deja de responder a la paleta del sitio, que es justo lo que
 * este sistema existe para evitar.
 */

/*
 * Estados de interacción.
 *
 * La curva sale del token del sitio, la misma en todo el theme: disparada al
 * principio y frenando al final, que es lo que hace que un cambio se lea como
 * respuesta y no como un desvanecido —el movimiento empieza en el instante
 * exacto en el que el usuario está mirando.
 *
 * Las duraciones se quedan por debajo de 200ms. Por encima de 300 la interfaz
 * se siente lenta aunque no lo sea, y estas se disparan cada vez que el ratón
 * cruza un titular.
 */
a,
button,
.pf-card__media img {
	transition:
		color 0.16s var(--ease-out),
		border-color 0.16s var(--ease-out),
		transform 0.2s var(--ease-out);
}

/*
 * El acuse de la pulsación. Existe por el móvil, donde no hay hover que
 * confirme nada: sin él, tocar un titular y esperar a que cargue se siente
 * como que no ha pasado nada.
 *
 * El enlace se hunde un píxel y el botón se encoge, porque no son lo mismo:
 * un botón es una superficie que se puede empujar, y un enlace es una palabra
 * dentro de un párrafo —escalarlo deformaría la línea entera.
 */
a:active {
	transform: translateY(1px);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
	transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
	a,
	button,
	.pf-card__media img {
		transition: none;
	}

	a:active,
	button:active,
	input[type="submit"]:active,
	input[type="button"]:active {
		transform: none;
	}
}

/* ── Tarjeta ── */

/*
 * La tarjeta se mide a sí misma, no a la ventana.
 *
 * Es la raíz del problema que se veía en producción: el mismo titular usaba
 * el tamaño de la pantalla, así que en una tira de cuatro columnas salía
 * enorme sobre un extracto que no cabía, y en una tarjeta ancha se quedaba
 * pequeño. Con container queries cada tarjeta decide por su propio ancho, y
 * entonces da igual en qué layout caiga: se ve bien en los cuatro.
 */
.pf-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 0;
	/* La imagen llega a los bordes y el radio lo recorta la tarjeta; sin esto
	   la esquina de la foto asoma fuera del canto. */
	overflow: hidden;
	background: var(--surface);
	border-radius: var(--radius-md);
	/*
	 * Dos capas y ninguna cuesta GPU: un borde interior de 1px que dibuja el
	 * canto de la superficie, y una sombra tintada con el propio fondo del
	 * sitio en vez de con negro. La sombra negra sobre una paleta cálida se
	 * ve sucia, y sobre la oscura no se ve.
	 */
	box-shadow:
		inset 0 0 0 var(--border-width) color-mix(in srgb, var(--ink) 7%, transparent),
		0 var(--space-1) var(--space-3) color-mix(in srgb, var(--shadow) 16%, transparent);
}

.pf-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.pf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s var(--ease-out);
}

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

/*
 * Solo donde hay un ratón de verdad. Un táctil dispara :hover al tocar y lo
 * deja pegado hasta que se toca otra cosa: la foto se quedaba ampliada
 * después de pulsar la tarjeta, sin forma de deshacerlo.
 */
@media (hover: hover) and (pointer: fine) {
	.pf-card:hover .pf-card__media img { transform: scale(1.03); }
}

.pf-card__kicker {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.pf-card__kicker a {
	color: var(--accent);
	text-decoration: none;
}

/*
 * El texto no toca el canto.
 *
 * Faltaba desde el principio y no se veía: con las paletas donde la
 * superficie es del mismo color que la página, la caja no existía. En cuanto
 * la superficie se distingue —o se le pone borde y sombra—, el texto pegado
 * al borde salta a la vista.
 */
.pf-card__body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	/* La tarjeta ocupa lo que le den; el cuerpo empuja la meta abajo para que
	   las fechas de una fila queden alineadas entre sí. */
	flex: 1 1 auto;
}

.pf-card__title {
	margin: 0;
	font-size: var(--h4);
	line-height: var(--lh-tight);
}

/* Dos saltos de tamaño, por ancho de tarjeta y no de pantalla. */
@container (min-width: 300px) {
	.pf-card__title { font-size: var(--h3); }
}

@container (min-width: 520px) {
	.pf-card__title { font-size: var(--h2); }
}

.pf-card__title a {
	color: var(--ink);
	text-decoration: none;
}

.pf-card__title a:hover { text-decoration: underline; }

/*
 * El extracto se recorta a dos líneas en vez de desaparecer.
 *
 * Quitarlo en las tarjetas estrechas es lo que dejaba portadas enteras sin
 * una sola frase de contenido: el lector veía titulares sueltos y nada que le
 * dijera de qué iban. Dos líneas caben en cualquier ancho y siguen diciendo
 * algo.
 */
.pf-card__excerpt {
	margin: 0;
	color: var(--body);
	line-height: var(--lh-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@container (min-width: 520px) {
	.pf-card__excerpt { -webkit-line-clamp: 3; }
}

/*
 * La meta cae al fondo del cuerpo.
 *
 * En una rejilla todas las tarjetas se estiran a la más alta, y sin esto la
 * corta dejaba 88px de hueco muerto debajo de su texto —medido— mientras las
 * fechas de la fila quedaban a alturas distintas.
 */
.pf-card__meta {
	margin: var(--space-1) 0 0;
	margin-top: auto;
	padding-top: var(--space-2);
	color: var(--muted);
	font-size: 0.8125rem;
}

.pf-card__sep { margin: 0 var(--space-2); }

/* El destacado crece; la tarjeta de listado pone la imagen al lado. */

/* El destacado se compone en dos columnas a partir de tablet.
   A todo ancho, una imagen 16/9 de 1136px mide 639px de alto y aplasta todo lo
   que viene despues: no hay escala intermedia entre el destacado y las
   tarjetas. En dos columnas el titular gana el peso que le corresponde y la
   foto deja de ser el unico elemento de la pantalla. */

.pf-card--lead .pf-card__title {
	font-size: var(--h1);
}

.pf-card--lead .pf-card__media { aspect-ratio: 3 / 2; }

.pf-card--lead .pf-card__excerpt { font-size: calc(var(--body-size) * 1.05); }

@media (min-width: 900px) {
	.pf-card--lead {
		flex-direction: row;
		align-items: center;
		gap: var(--space-7);
	}
	.pf-card--lead .pf-card__media {
		flex: 0 0 56%;
		aspect-ratio: 4 / 3;
	}
	.pf-card--lead .pf-card__body {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}
}

@media (min-width: 700px) {
	.pf-card--list {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
	}

	/*
	 * La foto llena la altura de la tarjeta, igual que en la del feed. Con
	 * aspect-ratio se quedaba a su proporción y dejaba hueco debajo: 74px
	 * medidos en el archivo de categoría, que es donde más se nota porque las
	 * tarjetas van una encima de otra.
	 */
	.pf-card--list .pf-card__media {
		position: relative;
		flex: 0 0 34%;
		aspect-ratio: auto;
		align-self: stretch;
		min-height: 100%;
	}

	.pf-card--list .pf-card__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.pf-card--list .pf-card__body { flex: 1 1 auto; }
}

/* ── Migas ── */

.pf-breadcrumb { margin-bottom: var(--gap); }

.pf-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--muted);
}

.pf-breadcrumb__item + .pf-breadcrumb__item::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--line);
}

.pf-breadcrumb a { color: var(--muted); }

/* ── Paginación ── */

.pf-pagination { margin-block: var(--block-gap); }

.pf-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-pagination__link,
.pf-pagination__current,
.pf-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: var(--space-2);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.pf-pagination__link {
	color: var(--ink);
	border: var(--border-width) solid var(--line);
}

.pf-pagination__link:hover { border-color: var(--accent); }

.pf-pagination__current {
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
}

.pf-pagination__gap { color: var(--muted); }

/* ── Barra lateral ── */

.pf-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.pf-widget {
	padding: var(--gap);
	background: var(--surface);
	border: var(--border-width) solid var(--line);
	border-radius: var(--radius-md);
}

.pf-widget__title {
	margin: 0 0 var(--space-3);
	font-size: var(--h3);
}

.pf-widget ul {
	margin: 0;
	padding-left: var(--space-4);
}

/* ── Listado de respaldo ── */

.pf-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-list__title {
	margin: 0 0 var(--space-1);
	font-size: var(--h3);
}

.pf-list__title a {
	color: var(--ink);
	text-decoration: none;
}

.pf-list__excerpt {
	margin: 0;
	color: var(--body);
}

.pf-empty { color: var(--muted); }

/*
 * Controles de formulario.
 *
 * Se estilan por elemento y no por clase porque el marcado no es del theme:
 * lo emiten comment_form() y el buscador del núcleo de WordPress, y cambia
 * entre versiones.
 *
 * Sin esto el navegador los pinta con su estilo por defecto —fondo blanco,
 * borde gris—, que con una paleta clara pasa desapercibido y con la paleta
 * oscura deja losas blancas sobre la página. Se vio renderizando un artículo
 * real con nocturno.
 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--space-2) var(--space-3);
	font: inherit;
	color: var(--ink);
	background: var(--surface);
	/*
	 * El borde sale de --muted y no de --line. --line dibuja separadores, que
	 * no tienen que verse: se queda en 1.2:1 sobre el fondo. Un campo sí, y
	 * la norma pide 3:1 para lo que delimita un control. Con --line el
	 * relleno tampoco ayudaba —1.1:1 contra la página—, así que el campo era
	 * invisible hasta pulsarlo, en las ocho paletas.
	 */
	border: var(--border-width) solid var(--muted);
	border-radius: var(--radius-sm);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

::placeholder {
	color: var(--muted);
	opacity: 1;
}

button,
input[type="submit"],
input[type="button"] {
	padding: var(--space-2) var(--space-4);
	font: inherit;
	font-weight: 600;
	color: var(--accent-ink);
	background: var(--accent);
	border: var(--border-width) solid var(--accent);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	opacity: 0.9;
}

/*
 * Tarjeta horizontal del layout feed: imagen fija a la izquierda y texto a la
 * derecha. En movil se apila, y por eso el sizes del contexto 'feed' declara
 * 100vw por debajo de 700px.
 */
/*
 * Tarjeta horizontal: la foto llena su columna de arriba abajo.
 *
 * Tenía dos defectos que eran el mismo: el contenedor de la imagen llevaba
 * aspect-ratio 3/2, y al estirarse en altura junto al texto forzaba su ancho
 * —241px de alto daban 361px de ancho— desbordándose 121px sobre la columna
 * del texto y dejándolo ilegible. Medido en producción.
 *
 * Sin aspect-ratio y con la imagen recortada al contenedor, la foto ocupa
 * exactamente su columna y toda la altura de la tarjeta.
 */
.pf-card--feed {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}

/*
 * La foto llena su columna entera. Con altura en porcentaje no funciona: el
 * contenedor no tiene una altura definida contra la que resolverlo, así que
 * la imagen volvía a su proporción y dejaba 110px de hueco debajo —medido—.
 * Con la imagen posicionada sobre el contenedor estirado por la rejilla, sí.
 */
.pf-card--feed .pf-card__media {
	position: relative;
	aspect-ratio: auto;
	align-self: stretch;
	min-height: 100%;
}

.pf-card--feed .pf-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 700px) {
	/* Apilada, la foto recupera su proporción: a lo ancho no hay altura de
	   texto que igualar. */
	.pf-card--feed .pf-card__media {
		aspect-ratio: 3 / 2;
		height: auto;
		min-height: 0;
	}
}


@media (max-width: 700px) {
	.pf-card--feed { grid-template-columns: 1fr; }
}

/*
 * Tarjeta compacta del layout periodico: sin imagen ni extracto, separada de
 * la siguiente por un filete. Es lo que da densidad sin tocar el tamano del
 * texto, que sale de la pareja tipografica del sitio.
 */
.pf-card--compacta {
	padding-block: var(--space-3);
	border-bottom: var(--border-width) solid var(--line);
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* Sin superficie no hay canto del que separarse, y el relleno solo
   indentaría la lista. */
.pf-card--compacta .pf-card__body { padding: 0; }

.pf-card--compacta .pf-card__title {
	font-size: var(--body-size);
	line-height: var(--lh-tight);
}

/*
 * Botón del menú en móvil.
 *
 * Lo crea main.js, que se carga en los cuatro layouts, así que su estilo vive
 * aquí y no en la hoja de uno de ellos. Estuvo solo en la de magazine, y en
 * los otros tres salía con el aspecto por defecto del navegador —y visible
 * también en escritorio, porque el display: none venía con la regla ausente.
 */
.pf-navtoggle {
	display: none;
	padding: var(--space-2) var(--space-4);
	border: var(--border-width) solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

/*
 * El menú desplegado.
 *
 * Aparecía de golpe, de `display: none` a `display: flex`: nada en el mundo
 * real surge de la nada, y un elemento que se materializa se lee como un
 * fallo de pintado. Con `allow-discrete` el navegador conmuta el display al
 * principio de la entrada y al final de la salida, que es lo que deja sitio
 * para animar lo demás.
 *
 * Se abre a mano, no en cada carga, así que animarlo no cansa: baja cuatro
 * píxeles en 160ms y se acabó.
 */
@media (max-width: 720px) {
	.pf-header.has-toggle .pf-navtoggle { display: inline-block; }

	.pf-header.has-toggle .pf-nav {
		display: none;
		width: 100%;
		opacity: 0;
		transform: translateY(-4px);
		transition:
			opacity 0.16s var(--ease-out),
			transform 0.16s var(--ease-out),
			display 0.16s allow-discrete;
	}

	.pf-header.has-toggle.is-open .pf-nav {
		display: flex;
		flex-direction: column;
		/* Sin hueco: las filas se tocan y las separa un filete, que es lo que
		   hace que se lean como una lista y no como texto suelto. */
		gap: 0;
		opacity: 1;
		transform: translateY(0);
	}

	/*
	 * Cada enlace ocupa la fila entera. Medían 17px de alto y solo lo ancho de
	 * su texto: cumplían la norma por la excepción de espaciado, pero acertar
	 * con el pulgar en 68px de ancho y 17 de alto es otra cosa. Con el relleno
	 * la fila pasa de 49px y el objetivo es toda ella.
	 */
	.pf-header.has-toggle.is-open .pf-nav a {
		display: block;
		padding-block: var(--space-4);
		border-top: var(--border-width) solid var(--line);
	}

	@starting-style {
		.pf-header.has-toggle.is-open .pf-nav {
			opacity: 0;
			transform: translateY(-4px);
		}
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
	.pf-header.has-toggle .pf-nav { transition: none; }
}


/*
 * Las imágenes del artículo comparten eje con el texto.
 *
 * Una foto más estrecha que la columna se queda a la izquierda si nadie dice
 * lo contrario, y el artículo entero se lee torcido: el texto centrado y la
 * imagen desplazada. Medido en producción: 69px de desvío entre el centro de
 * la foto y el del párrafo.
 *
 * Va en la hoja compartida y no en la de un layout porque el artículo es el
 * producto que se vende: tiene que leerse igual de bien en los cuatro.
 */
.pf-single__media img,
.pf-prose img {
	display: block;
	margin-inline: auto;
}

/* Las figuras del editor traen márgenes propios del navegador. */
.pf-prose figure {
	margin-inline: 0;
}

.pf-single__media figcaption,
.pf-prose figcaption {
	margin-top: var(--space-2);
	color: var(--muted);
	font-size: 0.8125rem;
	text-align: center;
}

/*
 * ── Comentarios ──
 *
 * El marcado lo emite WordPress —wp_list_comments() y comment_form()—, así
 * que se estila por sus clases, no por las nuestras: cambiarlo obligaría a
 * reimplementar el formulario y perder lo que aportan los plugins de
 * antispam.
 *
 * Estuvo sin una sola regla hasta que una auditoría de clases emitidas lo
 * destapó: se veía con el estilo por defecto del navegador debajo de un
 * artículo cuidado.
 */
.pf-comments {
	margin-top: var(--block-gap);
	padding-top: var(--space-6);
	border-top: var(--border-width) solid var(--line);
}

.pf-comments__title {
	margin: 0 0 var(--space-5);
	font-size: var(--h3);
}

.pf-comments__list {
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.pf-comments__list ol {
	/* Las respuestas se indentan lo justo para que se lea la conversación. */
	margin: var(--space-4) 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.pf-comments__list li {
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: var(--border-width) solid var(--line);
}

.pf-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	color: var(--ink);
}

.pf-comments__list .comment-author img {
	border-radius: 50%;
}

.pf-comments__list .comment-metadata,
.pf-comments__list .comment-metadata a {
	color: var(--muted);
	font-size: 0.8125rem;
	text-decoration: none;
}

.pf-comments__list .comment-content {
	margin-top: var(--space-2);
	line-height: var(--lh-body);
}

.pf-comments__list .reply {
	margin-top: var(--space-2);
	font-size: 0.8125rem;
}

.pf-comments__closed {
	color: var(--muted);
}

/* El formulario nativo: etiqueta encima del campo y botón con el acento. */
.comment-form p {
	margin: 0 0 var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.comment-form label {
	font-weight: 600;
	color: var(--ink);
	font-size: 0.875rem;
}

/*
 * La casilla de consentimiento va a su tamaño y alineada con la primera línea
 * de su etiqueta. Sin esto hereda el ancho de los campos de texto y la
 * etiqueta se descuelga a su lado.
 */
.comment-form .comment-form-cookies-consent label {
	font-weight: 400;
	color: var(--body);
	line-height: var(--lh-body);
}

.comment-form .comment-form-cookies-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-2);
}

.comment-form input[type="checkbox"],
.comment-form input[type="radio"] {
	width: auto;
	min-width: 0;
	flex: none;
	margin: 0;
	/* Alineada con la altura de la línea del texto que tiene al lado. */
	transform: translateY(0.15em);
}



.comment-reply-title {
	margin: 0 0 var(--space-4);
	font-size: var(--h4);
}

/*
 * ── Buscador ──
 *
 * Igual que los comentarios: se emitía sin estilo. El campo hereda el de los
 * controles de formulario; lo que faltaba era la composición.
 */
.pf-search {
	display: flex;
	gap: var(--space-2);
	align-items: stretch;
}

.pf-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.pf-search__input {
	flex: 1 1 auto;
	min-width: 0;
}

.pf-search__submit {
	flex: none;
}

/*
 * ── Bloques promocionales ──
 *
 * Se separan del contenido con aire y un filete, no con un color de aviso: un
 * bloque que grita «esto es publicidad» se salta con la vista, y el que se
 * confunde con el contenido engaña al lector. El filete dice que es otra
 * cosa sin levantar la voz.
 */
.pf-promo {
	display: block;
	margin-block: var(--space-6);
	padding-top: var(--space-4);
	border-top: var(--border-width) solid var(--line);
}

.pf-promo img {
	display: block;
	margin-inline: auto;
}

.pf-promo--barra-lateral {
	margin-block: 0 var(--space-5);
	padding-top: 0;
	border-top: 0;
}

/*
 * ── Piezas que quedaban sueltas ──
 */
/*
 * Una sola medida para el artículo entero.
 *
 * El texto tenía la suya —68ch— y el artículo otra —72ch—, así que la foto
 * destacada se centraba en un eje y los párrafos en otro: 20px de desvío
 * medidos, que es lo que se ve como «la imagen está corrida a la derecha».
 * Ahora la medida la pone el artículo y todo lo demás cuelga de ella.
 */
.pf-single {
	max-width: 68ch;
}

.pf-archive__main {
	min-width: 0;
}

.pf-list__item + .pf-list__item {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: var(--border-width) solid var(--line);
}

.pf-pagination__item {
	display: flex;
}

.pf-nav--footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.pf-nav--footer a {
	color: var(--muted);
	text-decoration: none;
}

.pf-nav--footer a:hover { color: var(--accent); }

/*
 * ── Riel de artículos ──
 *
 * Lo usan los cuatro layouts —la portada de magazine, los relacionados de
 * todos— así que vive aquí y no en la hoja de uno. Estuvo solo en la de
 * magazine, que es exactamente el defecto que ya tuvo el botón del menú: el
 * marcado se emitía en los cuatro y solo se veía bien en uno.
 */
.pf-rail { margin-bottom: var(--block-gap); }

.pf-rail__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: var(--space-6);
	border-bottom: var(--border-width) solid var(--line);
}

.pf-rail__title {
	position: relative;
	margin: 0;
	padding-bottom: var(--space-2);
	font-size: var(--h2);
}

.pf-rail__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(var(--border-width) * -1);
	width: 100%;
	height: 2px;
	background: var(--accent);
}

.pf-rail__all {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent);
	text-decoration: none;
}

.pf-rail__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap) var(--space-6);
}

/* Los relacionados cierran el artículo, así que se separan con filete. */
.pf-rail--relacionados {
	margin-top: var(--block-gap);
	padding-top: var(--space-6);
	border-top: var(--border-width) solid var(--line);
}