/* ===========================================================================
   blog.css — Blog: portadilla, listados y página de artículo.
   Depende de tokens.css + base.css. Lo cargan blog.html, las páginas de
   artículo generadas y el inicio (por la sección de últimas entradas).

   Se separa de base.css por lo mismo que article.css: son componentes que
   sólo aparecen en unas cuantas páginas, y no tiene sentido que las demás
   descarguen sus reglas.

   NADA DE TARJETAS. El sitio no tiene ni una caja con sombra y esta no iba a
   ser la primera. Lo que separa una entrada de otra es un filete y el aire,
   como en un periódico.
   =========================================================================== */

/* ===========================================================================
   1 · PORTADILLA — el hero de /blog.html
   ---------------------------------------------------------------------------
   Es de la familia .portada del inicio (mismo bloque vinotinto a sangre bajo
   el masthead), pero no repite su composición: en vez de bloque + lámina
   fotográfica, el rojo se parte en dos mitades separadas por un filete
   vertical. A la izquierda, el título de la sección. A la derecha, la entrada
   más reciente en grande.

   Es decir: la portadilla ES la cubierta del número. La entrada nueva no
   espera debajo del hero, ocupa el hero.
   =========================================================================== */
.portada--portadilla .portada__marco {
	grid-template-columns: minmax(0, 1fr);
	/* Tres cotas, y las tres hacen falta:
	   · 88svh y no 100 — aquí debajo hay una lista, y conviene que asome
	     para que se vea que la página sigue.
	   · suelo de 24rem — en un móvil en horizontal el bloque no se aplasta.
	   · TECHO de 46rem — sin él, en un monitor vertical o en una ventana muy
	     alta el bloque se estira a mil y pico píxeles y deja un vacío enorme
	     entre el rótulo y la entrada. La portada del inicio no lo necesita
	     porque su lámina fotográfica llena la altura que sea; esta es sólo
	     texto y hay que acotarla.
	   Como todo va en rem, el techo crece solo en pantallas grandes: la
	   raíz sube a 18px y 20px en 1600 y 2200 px (ver tokens.css). */
	min-height: calc(100vh - var(--masthead-h));
	min-height: clamp(24rem, calc(88svh - var(--masthead-h) - var(--s3)), 46rem);
}

/* ---------------------------------------------------------------------------
   RETONO A PAPEL
   La portadilla conserva su composicion —el rotulo a la izquierda, la entrada
   mas reciente a la derecha, partidas por un filete vertical— y cambia solo
   de material: donde habia un rectangulo vinotinto a sangre ahora hay el
   mismo papel del colofon que usan las otras cuatro portadas.

   La veladura es `expedientes.webp` y no `biblioteca.webp` a proposito: es la
   unica de las cuatro portadas que habla de lo que la firma ESCRIBE, y una
   estanteria de expedientes atados dice eso mejor que una biblioteca. Va con
   el mismo tratamiento que .pliego (7,5%, desaturada y desenfocada), asi que
   se lee como textura y no como fotografia.

   overflow:clip es imprescindible: el ::before lleva scale(1.04) para sacar
   sus bordes de cuadro y sin recorte desbordaria la seccion por abajo, que es
   exactamente el fallo que se corrigio en la portada del inicio.
   --------------------------------------------------------------------------- */
.portada--portadilla {
	padding-inline: 0;
	padding-bottom: 0;
}
.portada--portadilla .portada__bloque {
	padding-inline: var(--gutter);
	background-color: var(--ink-3);
	background-image: linear-gradient(180deg,
		var(--ink-3) 0%,
		var(--ink-3) 52%,
		color-mix(in oklch, var(--ink-3) 55%, var(--ink)) 78%,
		var(--ink) 94%,
		var(--ink) 100%);
	color: var(--paper);
	position: relative;
	isolation: isolate;
	overflow: clip;
}
.portada--portadilla .portada__bloque::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: url("/assets/img/hero/expedientes.webp?v=202609030908") center / cover no-repeat;
	/* 0.055 y 3px, no los 0.075 y 2px del inicio: esta fotografia tiene
	   mucho mas contraste (carpetas oscuras contra papel claro) y al mismo
	   ajuste dejaba manchas reconocibles en vez de textura. */
	opacity: 0.055;
	filter: saturate(0.28) contrast(0.8) blur(3px);
	transform: scale(1.04);
	pointer-events: none;
}
.portada--portadilla .portada__bloque::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		color-mix(in oklch, var(--ink-3) 85%, transparent) 0%,
		transparent 22%,
		transparent 52%,
		color-mix(in oklch, var(--ink) 55%, transparent) 80%,
		var(--ink) 94%,
		var(--ink) 100%);
	pointer-events: none;
}
/* El folio se define en base.css para fondo oscuro (--ink al 78%, y el punto
   y el ampersand en --ink puro). Sobre papel eso es blanco sobre blanco. */
.portada--portadilla .portada__folio { color: var(--muted); }
.portada--portadilla .portada__folio .dot { color: var(--faint); }
.portada--portadilla .portada__folio .amp { color: var(--accent); }

.portadilla {
	display: grid;
	gap: clamp(var(--s4), 6vh, var(--s6));
	align-content: space-between;
	min-width: 0;
}

@media (min-width: 60rem) {
	.portadilla {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-content: stretch;
		align-items: stretch;
		gap: 0;
	}
	/* El filete que parte el rojo. Va como borde de la segunda columna y no
	   como pseudo-elemento absoluto para que crezca solo con la altura del
	   bloque, sin tener que medir nada. */
	.portadilla__cubierta {
		border-left: 1px solid var(--hairline-2);
		padding-left: clamp(var(--s4), 4vw, var(--s6));
		margin-left: clamp(var(--s4), 4vw, var(--s6));
	}
}

/* El rótulo son dos piezas —el bloque de título arriba y el ancla al listado
   abajo— separadas por todo el aire que sobre. Sin la segunda, en escritorio
   quedaba media pantalla de rojo vacío bajo la entradilla. */
.portadilla__rotulo {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--s4);
	align-content: stretch;
	min-width: 0;
}
.portadilla__rotulo-alto {
	display: grid;
	gap: var(--s3);
	align-content: start;
	min-width: 0;
}

/* Antes se llamaba --inverso porque vivia sobre el rectangulo vinotinto y
   habia que invertirle los colores. Sobre papel ya no invierte nada: lo unico
   que sigue aportando es la POSICION —anclarse al pie de su columna—, y por
   eso el modificador se conservo con nombre nuevo en vez de borrarse. */
.scroll-cue--portadilla {
	color: var(--muted);
	align-self: end;
	justify-self: start;
}
.scroll-cue--portadilla .arrow { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
	.scroll-cue--portadilla { transition: color var(--dur-fast) var(--ease); }
	.scroll-cue--portadilla:hover { color: var(--accent-hi); }
}
/* En estrecho las dos mitades se apilan y el ancla estorba entre el rótulo y
   la entrada: la lista queda a un dedo de scroll, no hace falta señalarla. */
@media (max-width: 60rem) {
	.scroll-cue--portadilla { display: none; }
	.portadilla__rotulo { grid-template-rows: auto; }
}

.portadilla__titulo {
	font-size: clamp(2.4rem, min(6.5vw, 11vh), 5.5rem);
	line-height: 0.96;
	letter-spacing: -0.025em;
	color: var(--paper);
	text-wrap: balance;
	max-width: 12ch;
}
.portadilla__titulo em { font-style: italic; }

.portadilla__lead {
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--paper-dim);
	max-width: 40ch;
	text-wrap: pretty;
}

/* --- La cubierta: la entrada más reciente, dentro del rojo ---------------- */
.portadilla__cubierta {
	display: grid;
	align-content: end;
	gap: var(--s3);
	min-width: 0;
}

.portadilla__etiqueta {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--hairline);
	padding-bottom: var(--s2);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: baseline;
}
.portadilla__etiqueta .dot { color: var(--accent); }

.portadilla__entrada-titulo {
	font-family: var(--font-display);
	/* Los titulares de los artículos jurídicos son largos —el de la entrada
	   sobre procesos colectivos tiene 114 caracteres— así que este escalón
	   es deliberadamente más contenido que el del inicio: si creciera igual,
	   un titular normal se comería la pantalla. */
	font-size: clamp(1.5rem, 1rem + 2.2vw, 2.9rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	font-weight: 380;
	color: var(--paper);
	text-wrap: pretty;
	max-width: 24ch;
}
.portadilla__entrada-titulo a {
	color: inherit;
	text-decoration: none;
	/* El área activa cubre el titular entero, que es un objetivo grande y
	   cómodo, en vez de obligar a apuntar al enlace de abajo. */
	display: block;
}

.portadilla__entrada-sumario {
	font-size: var(--step-0);
	line-height: 1.62;
	color: var(--paper-dim);
	max-width: 52ch;
	text-wrap: pretty;
}

.portadilla__entrada-pie {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
	.portadilla__entrada-titulo a { transition: opacity var(--dur-fast) var(--ease); }
	.portadilla__entrada-titulo a:hover { opacity: 0.78; }
}

/* En estrecho las dos mitades se apilan y el filete pasa a horizontal.
   El orden importa: primero el rótulo, luego la entrada. */
@media (max-width: 60rem) {
	.portadilla__cubierta {
		border-top: 1px solid var(--hairline);
		padding-top: var(--s4);
	}
}

/* ===========================================================================
   2 · LISTA DE ENTRADAS — filas de periódico
   ---------------------------------------------------------------------------
   Una fila por entrada, separadas por filete. El numeral a la izquierda, la
   fecha y el área en mono encima del titular, y una flecha que se separa al
   pasar por encima: el mismo gesto que .link y .sumario__row usan en el resto
   del sitio. Ni una caja.
   =========================================================================== */
.lista-entradas {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
}
.lista-entradas__fila {
	border-bottom: 1px solid var(--hairline);
	position: relative;
}

/* El filete de acento que entra al pasar por encima. Es el mismo gesto que
   .sumario__row usa en las seis áreas, y por eso el blog se siente parte del
   sitio y no un añadido: se hereda el vocabulario, no se inventa otro. */
.lista-entradas__fila::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

/* Índice de expediente: numeral, fecha y área a la izquierda, y el titular
   ocupando el resto. Repartir el ancho en columnas es lo que evita que el
   titular se quede corto a la izquierda y la flecha a ochocientos píxeles,
   que es como se veía con una sola columna de contenido. */
.lista-entradas__enlace {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.5em clamp(var(--s2), 3vw, var(--s4));
	padding-block: clamp(var(--s3), 3.5vh, var(--s4));
	color: var(--paper);
	min-width: 0;
}
@media (min-width: 64rem) {
	.lista-entradas__enlace {
		grid-template-columns: 2.5rem minmax(9rem, 14rem) minmax(0, 1fr) 2rem;
		align-items: baseline;
	}
}
.lista-entradas__n {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	color: var(--accent);
	display: none;
}
@media (min-width: 64rem) {
	.lista-entradas__n { display: block; }
}
.lista-entradas__cuerpo { display: grid; gap: 0.5em; min-width: 0; }
.lista-entradas__meta {
	display: grid;
	gap: 0.25em;
	justify-items: start;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.5;
}
.lista-entradas__area { color: var(--accent); }
/* En estrecho la fecha y el área van seguidas en una línea, que ocupa menos
   y se lee igual. */
@media (max-width: 64rem) {
	.lista-entradas__meta {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		gap: 0.7em;
	}
}
.lista-entradas__titulo {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.22;
	font-weight: 400;
	color: var(--paper);
	text-wrap: pretty;
	max-width: 48ch;
	transition: color var(--dur-fast) var(--ease);
}
.lista-entradas__entradilla {
	font-size: var(--step--1);
	line-height: 1.6;
	color: var(--muted);
	max-width: 62ch;
	text-wrap: pretty;
}
.lista-entradas__flecha {
	color: var(--accent);
	justify-self: end;
	transition: transform var(--dur-fast) var(--ease);
}

/* Variante sin numeral ni entradilla, para «Seguir leyendo» y para el pie de
   las páginas de servicio, donde la lista es un apunte y no el contenido. */
/* Dos clases contra una: esta regla gana a la de la media query de 64rem sin
   necesidad de repetir la media query ni de recurrir a !important. */
.lista-entradas--compacta .lista-entradas__enlace {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4em;
	padding-block: var(--s3);
}
.lista-entradas--compacta .lista-entradas__meta { grid-column: auto; }
.lista-entradas--compacta .lista-entradas__titulo { font-size: var(--step-0); }

/* El hover sólo con ratón. En táctil se queda «pegado» después de un toque y
   parece que la fila está seleccionada cuando no lo está. */
@media (hover: hover) and (pointer: fine) {
	.lista-entradas__fila:hover::after,
	.lista-entradas__fila:focus-within::after { transform: scaleX(1); }
	.lista-entradas__enlace:hover .lista-entradas__titulo { color: var(--accent-hi); }
	.lista-entradas__enlace:hover .lista-entradas__flecha { transform: translateX(0.4em); }
}
.lista-entradas__enlace:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.listado__vacio {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding-block: var(--s5);
	text-align: center;
}

/* ===========================================================================
   3 · ÚLTIMAS ENTRADAS — la sección del inicio, de a tres
   ---------------------------------------------------------------------------
   Columnas de SUMARIO separadas por un filete vertical. La retícula es
   auto-fit y no `repeat(3, 1fr)` a propósito: con dos entradas publicadas
   —que es lo que hay hoy— tres columnas fijas dejarían un hueco donde
   estaría la tercera, y se vería como un error. Con auto-fit se reparten el
   ancho y la composición sigue teniendo sentido con dos, con tres o con una.

   LA COMPOSICIÓN DE CADA COLUMNA es la de un sumario de revista:
   · el FOLIO: el numeral de la entrada a cuerpo de titular (el mismo «01»,
     «02» que lleva en el índice de /blog.html, así que una entrada tiene el
     mismo número en todo el sitio) y, colgados de su línea de base, el área
     en vinotinto y la fecha larga;
   · el TÍTULO a ~2rem, que es lo que hace que la sección deje de leerse
     como un listado de enlaces y pase a leerse como una portada;
   · el sumario recortado a tres renglones, quien firma, y el pie.
   Ni caja, ni sombra, ni radio, ni superficie de color: lo que responde al
   ratón es el filete inferior, que se vuelve a trazar en vinotinto de
   izquierda a derecha —el mismo gesto que .lista-entradas__fila::after y
   que .link::after— y la flecha, que se desplaza como en todos los .link.
   =========================================================================== */
.ultimas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
}
.ultimas__col {
	position: relative;
	border-bottom: 1px solid var(--hairline);
	min-width: 0;
	/* Contenedor de consulta: lo que decide si el folio cabe en una línea es
	   el ancho de LA COLUMNA, no el de la pantalla — con tres entradas a
	   1366px cada columna mide 400px, lo mismo que un teléfono. */
	container-type: inline-size;
}
/* El filete que se traza al pasar. Va en la columna y no en el enlace para
   cubrir el ancho completo de la celda, gutter incluido. */
.ultimas__col::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

/* El filete vertical entre columnas. Se dibuja en el borde izquierdo de cada
   columna y se quita en la primera de cada fila con :first-child, que basta
   mientras la retícula no parta a mitad de fila. */
@media (min-width: 46rem) {
	.ultimas__col { border-left: 1px solid var(--hairline); }
	.ultimas__col:first-child { border-left: 0; }
	.ultimas__col:first-child .ultimas__enlace { padding-left: 0; }
	.ultimas__col:last-child .ultimas__enlace { padding-right: 0; }
}

/* Flex en columna y no grid: el pie lleva margin-top:auto, que en flex lo
   pega al fondo de la celda y en grid no hace nada. Así los tres «Leer la
   entrada» quedan en la misma línea aunque los títulos midan distinto. */
.ultimas__enlace {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--s3);
	height: 100%;
	padding: clamp(var(--s4), 5vh, var(--s5)) clamp(var(--s3), 3.5vw, var(--s5));
	color: var(--paper);
	min-width: 0;
}

/* --- El folio: numeral + área · fecha, sobre una misma línea de base ------ */
.ultimas__folio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em var(--s3);
}
/* Vollkorn a cuerpo de titular y en vinotinto. Es el único numeral grande de
   la portada; los de las áreas y los del método van en mono pequeño porque
   allí acompañan a un rótulo, y aquí el numeral ES el rótulo. line-height
   ajustado a la altura de las cifras para que la línea de base del folio no
   flote a media altura del número. */
.ultimas__n {
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem);
	font-weight: 380;
	font-variant-numeric: lining-nums;
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: var(--accent);
	transition: color var(--dur-fast) var(--ease);
}
.ultimas__meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 0.6em;
	align-items: baseline;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--muted);
}
.ultimas__area { color: var(--accent); }
.ultimas__meta .dot { color: var(--hairline-2); }

.ultimas__titulo {
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 1.1rem + 1.15vw, 2rem);
	line-height: 1.16;
	font-weight: 400;
	letter-spacing: -0.008em;
	text-wrap: pretty;
	transition: color var(--dur-fast) var(--ease);
}
.ultimas__entradilla {
	font-size: var(--step-0);
	line-height: 1.55;
	color: var(--paper-dim);
	text-wrap: pretty;
	max-width: 58ch;
	/* Tres líneas y corta. Sin esto, una entradilla larga junto a otra corta
	   descuadra la altura de las columnas y el pie deja de alinearse. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ultimas__firma {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--muted);
}
/* Columna estrecha (tres por fila en escritorio, o un teléfono): el folio
   no cabe en una línea, así que el área y la fecha bajan del numeral y van
   una debajo de otra, sin el punto, que colgaba a final de renglón cuando
   sólo la fecha saltaba. El título cede un paso: a 2rem sobre 300px eran
   seis renglones. Va DESPUÉS de .ultimas__titulo porque comparte
   especificidad con él y gana por orden de archivo. */
@container (max-width: 26rem) {
	.ultimas__folio { flex-direction: column; gap: 0.6em; }
	.ultimas__meta { flex-direction: column; align-items: start; gap: 0.15em; }
	.ultimas__meta .dot { display: none; }
	.ultimas__titulo { font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.65rem); }
}
.ultimas__pie {
	margin-top: auto;
	padding-top: var(--s2);
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--paper);
	transition: gap var(--dur-fast) var(--ease);
}
.ultimas__pie .arrow { color: var(--accent); transition: transform var(--dur-fast) var(--ease); }

/* El hover sólo con ratón: en táctil se queda pegado tras un toque. */
@media (hover: hover) and (pointer: fine) {
	.ultimas__col:hover::after,
	.ultimas__col:focus-within::after { transform: scaleX(1); }
	.ultimas__enlace:hover .ultimas__titulo { color: var(--accent-hi); }
	.ultimas__enlace:hover .ultimas__n { color: var(--accent-hi); }
	.ultimas__enlace:hover .ultimas__pie { gap: 1em; }
	.ultimas__enlace:hover .ultimas__pie .arrow { transform: translateX(0.3em); }
}
.ultimas__enlace:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* ===========================================================================
   4 · PÁGINA DE ARTÍCULO
   ---------------------------------------------------------------------------
   Se diseña primero el caso SIN foto, porque va a ser el habitual: un
   artículo jurídico no siempre trae imagen, y tratar ese caso como la
   excepción es lo que hace que los blogs se llenen de fotos de archivo sin
   sentido. Lo que abre la página es el titular.
   =========================================================================== */
/* UNA SOLA COLUMNA DE LECTURA, Y CENTRADA.
   El titular, el cuerpo, la fuente, la ficha del autor y el puente comparten
   ancho y eje. Parece obvio y no lo es: con el titular centrado y el cuerpo
   pegado al margen izquierdo —que es como quedó al principio— el ojo nota el
   desajuste aunque no sepa nombrarlo, y la página se siente mal hecha. */
.entrada__frontis,
.entrada__cuerpo > *,
.entrada__autor-caja,
.entrada__relacionadas > *,
.entrada__puente {
	max-width: var(--measure);
	margin-inline: auto;
}

.entrada__frontis {
	padding-top: clamp(7.5rem, 17vh, 11rem);
	padding-bottom: clamp(var(--s4), 6vh, var(--s6));
	display: grid;
	gap: var(--s3);
	justify-items: start;
	/* .wrap ya pone el gutter; aquí sólo hace falta la medida de lectura. */
	max-width: calc(var(--measure) + 2 * var(--gutter));
}
.entrada__folio {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: baseline;
}
.entrada__folio a { color: var(--accent); }
.entrada__folio .dot { color: var(--faint); }

.entrada__antetitulo { margin-bottom: calc(-1 * var(--s1)); }

.entrada__titulo {
	/* Un titular jurídico puede tener 110 caracteres. La escala es más
	   contenida que la de las páginas de área para que quepa sin partirse
	   en seis líneas, y `pretty` reparte mejor la última. */
	font-size: clamp(1.9rem, 1.2rem + 3.1vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: pretty;
	max-width: 20ch;
	/* Las palabras largas del castellano jurídico —«extracontractual»,
	   «restablecimiento»— desbordan la columna en un móvil estrecho. */
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}
.entrada__entradilla {
	font-size: var(--step-1);
	line-height: 1.45;
	color: var(--paper-dim);
	max-width: 52ch;
	text-wrap: pretty;
}

.entrada__firma {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s2);
	padding-top: var(--s3);
	border-top: 1px solid var(--hairline);
	width: 100%;
	max-width: 52ch;
}
.entrada__firma-foto {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 18%;
	filter: var(--photo-filter);
	flex: none;
}
.entrada__firma-nombre {
	font-family: var(--font-display);
	font-size: var(--step-0);
	color: var(--paper);
}
.entrada__firma-meta {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.entrada__firma-meta .dot { color: var(--accent); }

.entrada__portada {
	margin: 0 0 var(--bloque);
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.entrada__portada img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: var(--photo-filter);
}
.entrada__portada figcaption {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.1em;
	color: var(--muted);
	margin-top: var(--s2);
	max-width: 62ch;
}

/* --bloque, y no --section: --section es el respiro ENTRE SECCIONES de una
   pagina, y el articulo tiene cuatro bloques seguidos (cuerpo, ficha del
   autor, relacionadas y puente). Con el respiro completo en cada uno
   quedaban huecos de pantalla y media entre partes de un mismo texto.
   El cierre si lleva --section: ahi termina el articulo y empieza otra
   cosa. */
.entrada { --bloque: clamp(3.5rem, 2rem + 8vh, 7rem); }
.entrada__cuerpo { padding-bottom: var(--bloque); }
.entrada__prosa {
	font-size: var(--step-0);
	line-height: var(--lh-body);
}
/* Capitular, como en las páginas de área: liga el artículo al resto del
   sitio sin necesidad de inventar nada nuevo. */
.entrada__prosa > p:first-child::first-letter {
	font-family: var(--font-display);
	font-size: 4.2em;
	line-height: 0.74;
	float: left;
	padding: 0.04em 0.12em 0 0;
	color: var(--accent);
	font-weight: 380;
}
.entrada__prosa blockquote {
	border-left: 2px solid var(--accent-soft);
	padding-left: var(--s3);
	margin: var(--s4) 0;
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.4;
	color: var(--paper);
}
.entrada__prosa figure { margin: var(--s4) 0; }
.entrada__prosa figure img { width: 100%; height: auto; }
.entrada__prosa figcaption {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	color: var(--muted);
	margin-top: var(--s1);
}
.entrada__prosa hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s5) 0; }

/* --- Fuente externa ------------------------------------------------------ */
/* Las dos entradas recuperadas del sitio anterior son resúmenes de artículos
   publicados en revistas jurídicas. Decir dónde está el texto completo no es
   un adorno: sin ello el lector se queda con el resumen creyendo que es todo. */
/* Sin fondo ni caja: sólo el filete de acento a la izquierda y aire. Una caja
   gris aquí sería la primera tarjeta del sitio, y el sitio no tiene ninguna. */
.entrada__fuente {
	margin-top: var(--s5);
	padding-left: var(--s4);
	border-left: 2px solid var(--accent);
	display: grid;
	gap: var(--s2);
	justify-items: start;
}
.entrada__fuente-etiqueta {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.entrada__fuente-titulo {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.3;
	color: var(--paper);
	text-wrap: pretty;
}

/* --- Ficha del autor ----------------------------------------------------- */
/* No es decoración: el contenido jurídico es de lo que Google llama YMYL, y
   lo que sostiene que un artículo valga es que se vea quién lo firma y con
   qué credenciales. Esta ficha es la versión visible de lo que el JSON-LD
   dice en datos. */
.entrada__autor { padding-bottom: var(--bloque); }
.entrada__autor-caja {
	display: grid;
	gap: var(--s4);
	border-top: 1px solid var(--hairline);
	padding-top: var(--s4);
}
@media (min-width: 46rem) {
	.entrada__autor-caja { grid-template-columns: 7rem minmax(0, 1fr); }
}
.entrada__autor-foto {
	width: 100%;
	max-width: 7rem;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center 15%;
	filter: var(--photo-filter);
}
.entrada__autor-nombre {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.15;
	margin-top: var(--s2);
}
.entrada__autor-cargo { margin-top: 0.2em; }
.entrada__autor-cred {
	list-style: none;
	margin: var(--s3) 0 0;
	padding: 0;
	display: grid;
	gap: 0.25em;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	color: var(--muted);
	line-height: 1.5;
}
.entrada__autor-bio {
	margin-top: var(--s3);
	color: var(--paper-dim);
	line-height: 1.62;
	max-width: 58ch;
	text-wrap: pretty;
}
.entrada__autor-enlaces {
	margin-top: var(--s3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
}

/* --- Seguir leyendo y puente --------------------------------------------- */
.entrada__relacionadas { padding-bottom: var(--bloque); }
.entrada__relacionadas .kicker { margin-bottom: var(--s3); }

/* Flex y no grid de dos columnas: cuando sólo hay un lado —y con dos entradas
   publicadas es lo normal— una retícula fija le daría media anchura y el
   titular saldría partido en seis líneas cortas. Con flex, el que hay ocupa
   lo que necesita y `margin-left: auto` lo manda a su sitio. */
.entrada__puente {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
	border-top: 1px solid var(--hairline);
	padding-top: var(--s4);
	padding-bottom: var(--bloque);
}
.entrada__puente-lado { display: grid; gap: var(--s1); align-content: start; min-width: 0; flex: 0 1 auto; }
.entrada__puente-lado--der { text-align: right; justify-items: end; margin-left: auto; }
.entrada__puente-label { color: var(--muted); font-size: var(--step--2); }
.entrada__puente-enlace {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.22;
	color: var(--paper);
	text-wrap: pretty;
	max-width: 34ch;
	transition: color var(--dur-fast) var(--ease);
}
.entrada__puente-enlace .arrow { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
	.entrada__puente-enlace:hover { color: var(--accent-hi); }
}
/* Sin lado izquierdo (la entrada más antigua), el derecho se quedaba en la
   primera columna y descolgado. Que ocupe las dos. */
.entrada__puente-lado:empty { display: none; }
@media (min-width: 52rem) {
	.entrada__puente-lado:empty + .entrada__puente-lado--der { grid-column: 1 / -1; }
}

.entrada__cierre {
	padding-bottom: var(--section);
	text-align: center;
}
.entrada__cierre .measure { margin-inline: auto; }
.entrada__cierre .link { margin-inline: auto; margin-top: var(--s4); }

/* ===========================================================================
   5 · ENTRADAS POR ÁREA — al pie de cada página de servicio
   =========================================================================== */
.area__entradas { border-top: 1px solid var(--hairline); }
.area__entradas .kicker { margin-bottom: var(--s3); }
.area__entradas .link { margin-top: var(--s3); }

/* ===========================================================================
   6 · DETALLE
   =========================================================================== */

/* Las acciones flotantes se comen el final de la página en un móvil con
   indicador de inicio. */
@supports (padding: env(safe-area-inset-bottom)) {
	.entrada__cierre { padding-bottom: calc(var(--section) + env(safe-area-inset-bottom)); }
}

/* Objetivos táctiles. Las filas y columnas ya son grandes de sobra; el
   problema estaba en los enlaces pequeños del folio del artículo («Blog»,
   «Derecho Civil»), que medían 18px de alto. Se agrandan con padding y con un
   margen negativo que lo compensa, para que la zona sensible crezca sin que
   la línea se separe de lo que tiene alrededor. */
@media (pointer: coarse), (max-width: 52rem) {
	.lista-entradas__enlace { padding-block: var(--s4); }
	.ultimas__enlace { padding-block: var(--s4); }
	.entrada__folio a {
		display: inline-block;
		padding-block: 1.3em;
		margin-block: -1.3em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lista-entradas__flecha,
	.lista-entradas__titulo,
	.ultimas__titulo,
	.ultimas__pie,
	.ultimas__pie .arrow,
	.ultimas__n,
	.ultimas__col::after,
	.entrada__puente-enlace,
	.portadilla__entrada-titulo a { transition: none; }
}

/* Imprimir un artículo es algo que un abogado hace de verdad: para llevarlo
   a una reunión o adjuntarlo a un concepto. Fuera lo que no aporta en papel. */
@media print {
	.masthead, .menu, .acciones, .colophon,
	.entrada__puente, .entrada__relacionadas, .entrada__cierre { display: none !important; }
	.entrada__frontis { padding-top: 0; }
	.entrada__prosa { font-size: 11pt; line-height: 1.5; }
	.entrada__prosa a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}