/* ==========================================================================
   ARENZA · Journal (ES /journal/ · EN /en/journal/) — clave jrn
   Índice: portada de revista (foto vertical con titulares de portada) y glosario
   de la compra. Artículo: barra de lectura, índice lateral, capitular, notas al
   margen, citas y figuras. Todo quieto salvo la entrada del héroe (CSS) y las
   fotos, que se abren solo cuando ya están decodificadas (jrn.js).
   Un solo motor por propiedad: las fotos son CSS (opacity + scale), la barra de
   lectura es CSS (scroll-driven) o GSAP como respaldo, nunca las dos.
   ========================================================================== */

/* ---------- 0 · sangre y desborde lateral (ronda 2, 29-10)
   · Lo que llega al borde (láminas, héroe de «Barrios», tejados del índice) sangra con la --bleed del núcleo (:root,
     sobre el ancho útil --vw, sin la barra de desplazamiento clásica). Nunca 100vw.
   · Notas y figuras que salen al margen se miden en % de la columna de texto (antes con 100vw: 4 px de scroll lateral
     con barra clásica). Columna de texto T = 6 col. (≥1200) u 8 col. (900–1199); margen de notas = T/2 − gutter/2
     en los dos casos, así que «nota + gutter» = 50 % + gutter/2 de la columna.
   · Red de seguridad (sin JS, --vw = 100vw): artículo e índice recortan su desborde lateral; clip no crea contenedor
     de scroll, el índice lateral pegajoso sigue funcionando. */
.jrn-art, .jrn-ix { overflow-x: clip; }

/* ---------- 1 · fotos: placa de papel; la foto nunca se ve a medio cargar
   · cabeceras del primer pantallazo ([data-jrn-ph]): jrn.js las abre ya decodificadas, después del titular
   · el resto (láminas, glosario, tarjetas; [data-early]): el núcleo las pide y decodifica 2,5 pantallas antes y
     las tiene ocultas hasta que están listas: al llegar ya están pintadas (sin animación propia que las retrase) */
.jrn-ph { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--ar, 3 / 2); background: var(--sand); }
.jrn-ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
@media (prefers-reduced-motion: no-preference) {
  [data-jrn-ph] img { transition: opacity .9s var(--ease-out), scale 1.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + var(--jd, 0s)); }
  html.js [data-jrn-ph]:not(.is-ready) img { opacity: 0; scale: 1.05; }
  /* si con mala red una llega tarde, entra con el fundido corto del núcleo (solo opacidad) */
  :where(.js [data-early] img.is-ready) { animation: arz-img-in .6s var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .jrn-card .jrn-ph img { transition: scale .9s var(--ease-out); }
  .jrn-card a:hover .jrn-ph img.is-ready, .jrn-cover__ph:hover .is-ready img { scale: 1.03; }
}
.jrn-fig { margin: 0; }
.jrn-fig figcaption { margin-top: 12px; max-width: 60ch; }

/* ---------- 2 · metadatos («Guía · 6 min de lectura · Octubre de 2026») */
.jrn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.jrn-meta > :not(:last-child)::after { content: "·"; margin-inline: .7em; color: var(--mute-2); }
.jrn-meta b { font-weight: 500; color: var(--gold-ink); }
/* en móvil, con tres datos, la fecha baja siempre sola a su línea: nunca un «·» colgando al final */
@media (max-width: 599px) {
  .jrn-meta > :nth-last-child(2):nth-child(n+2)::after { content: none; }
  .jrn-meta > :last-child:nth-child(n+3) { flex-basis: 100%; }
}

/* ---------- 3 · transición de página: la pone el núcleo (site.css §23, fundido en serie) ---------- */

/* ==========================================================================
   ÍNDICE /journal/
   ========================================================================== */
.jrn-ixh .phero__in { row-gap: 22px; }
/* migas por debajo de 900 px solo en segundo nivel (COMPONENTES §20.1): el índice es de primero */
@media (max-width: 899px) { .jrn-ixh .crumbs { display: none; } }
.jrn-ixh .display { max-width: 11ch; }
.jrn-ixh .lead { max-width: 34ch; }
/* escritorio: cabecera compacta, h1 a la izquierda y entradilla + datos a su derecha, al pie del
   titular, para que la portada (01) asome en el primer pantallazo */
@media (min-width: 900px) {
  /* la fila flexible absorbe la altura del h1: la entradilla queda justo encima de los datos */
  .jrn-ixh .phero__in { grid-template-rows: auto 1fr auto auto; }
  .jrn-ixh .phero__in > .crumbs { grid-column: 1 / 9; grid-row: 1; }
  .jrn-ixh .phero__in > h1 { grid-column: 1 / 8; grid-row: 2 / span 2; }
  .jrn-ixh .phero__in > .lead { grid-column: 8 / 13; grid-row: 2; align-self: end; padding-bottom: 6px; }
  .jrn-ixh .phero__in > .jrn-meta { grid-column: 8 / 13; grid-row: 3; align-self: end; padding-bottom: .9em; }
}
/* los tejados de Madrid (dibujo «buhardillas», 2400 × 800) bajo el titular, a sangre de borde a borde (como el
   panorama de la portada: lo que no ocupa todo el ancho «me parece muy feo»); en móvil, recortado al centro
   (2:1: la cúpula y el campanario enteros) para que no quede en una tira fina */
.jrn-ixh .phero__in > .jrn-ixh__dib { grid-column: 1 / -1; aspect-ratio: 2 / 1; margin: 6px calc(-1 * var(--bleed)) 0; }
.jrn-ixh__dib .dib__svg { height: 100%; }
/* el titular manda (norma 26): el trazado del héroe arranca .45 s después de que el núcleo lo dispare, así nunca
   empieza antes que el h1 aunque el JS llegue antes que el primer pintado (solo retrasa, no anima nada nuevo) */
@media (prefers-reduced-motion: no-preference) {
  .js .jrn-ixh__dib.dib[data-draw].is-drawing [data-t] { animation-delay: calc(.45s + var(--t, 0) * var(--dib-fps)); }
  .js .jrn-ixh__dib.dib[data-draw] [data-guia] { transition-delay: .45s; }
}
@media (min-width: 900px) {
  .jrn-ixh .phero__in > .jrn-ixh__dib { grid-row: 4; aspect-ratio: 2400 / 800; margin-top: clamp(12px, 2vw, 32px); }
}
/* la luz de ventana se apaga antes del borde de la cabecera (sin raya dura sobre la portada) */
.jrn-ixh .gobo { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 56%); mask-image: linear-gradient(to bottom, #000 30%, transparent 56%); }

/* 01 · En portada: foto vertical + titulares de portada */
.jrn-ixh { padding-bottom: clamp(40px, 5vw, 80px); }
.jrn-cover { padding-top: clamp(40px, 4.5vw, 72px); }
.jrn-cover .grid { row-gap: 28px; }
.jrn-cover__ph { display: block; }
.jrn-cover__txt { display: grid; gap: 22px; align-content: end; justify-items: start; }
.jrn-cover__t { max-width: 15ch; }
.jrn-cover__t a { transition: color .4s; }
.jrn-cover__txt .lead { max-width: 36ch; color: var(--ink); }
.jrn-lines { width: 100%; max-width: 30rem; border-top: 1px solid var(--ink); counter-reset: none; }
.jrn-lines li { border-bottom: 1px solid var(--line); }
.jrn-lines a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; min-height: 46px; padding-block: 8px; font-size: var(--fs-sm); line-height: 1.35; transition: color .3s; }
.jrn-lines a b { font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .16em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
@media (hover: hover) { .jrn-lines a:hover { color: var(--gold-ink); } .jrn-cover__t a:hover { color: var(--ink-2); } }
@media (min-width: 900px) {
  .jrn-ixh { padding-bottom: clamp(40px, 3.5vw, 64px); }
  .jrn-cover { padding-top: clamp(24px, 2.5vw, 48px); }
  .jrn-cover .grid { row-gap: 36px; }
  /* la foto arranca arriba del todo; «01 · En portada» encabeza la columna de texto */
  .jrn-cover .grid > .sec-mark { grid-column: 8 / 13; grid-row: 1; }
  .jrn-cover .grid > .jrn-cover__ph { grid-column: 1 / 7; grid-row: 1 / span 2; margin-top: 0; }
  .jrn-cover .grid > .jrn-cover__txt { grid-column: 8 / 13; grid-row: 2; padding-bottom: 4px; }
}

/* 02 · También en el journal: dos piezas de tamaño y altura distintos */
.jrn-more { padding-top: calc(var(--section) * .55); padding-bottom: calc(var(--section) * .75); }
.jrn-more .grid { row-gap: 56px; }
.jrn-card a { display: grid; gap: 14px; justify-items: start; }
.jrn-card .jrn-ph { width: 100%; margin-bottom: 6px; }
.jrn-card h3 { max-width: 22ch; transition: color .4s; }
.jrn-card p.text-2 { max-width: 46ch; }
.jrn-card .link-arrow { min-height: 0; margin-top: 4px; }
@media (hover: hover) { .jrn-card a:hover h3 { color: var(--ink-2); } }
@media (max-width: 899px) { .jrn-card--b { margin-left: 16%; } }
@media (min-width: 900px) { .jrn-card--b { margin-top: clamp(72px, 9vw, 150px); } }

/* 03 · Glosario: un diccionario de bolsillo */
.jrn-gl { padding-block: calc(var(--section) * .8); }
.jrn-gl .grid { row-gap: 40px; align-items: start; }
.jrn-gl__head { display: grid; gap: 20px; align-content: start; }
.jrn-gl__head .text-2 { max-width: 36ch; }
/* foto grande junto al encabezado: de borde a borde en móvil; en escritorio fija con él mientras pasa la lista */
.jrn-gl__ph { margin-top: 4px; }
.jrn-gl__ph .jrn-ph { --ar: 4 / 3; --op: 30% 50%; margin-inline: calc(-1 * var(--margin)); }
.jrn-gl__ph figcaption { margin-top: 10px; }
@media (min-width: 900px) {
  .jrn-gl__ph .jrn-ph { --ar: 5 / 4; margin-inline: 0; max-height: max(260px, calc(100svh - var(--hdr-h) - 380px)); }
}
.jrn-gl__list { margin: 0; border-top: 1px solid var(--ink); }
.jrn-gl__i { break-inside: avoid; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .jrn-gl__i { padding: 20px 0 22px; } }
.jrn-gl__i dt { display: block; }
.jrn-gl__w { font: 400 var(--fs-3)/1.1 var(--serif); font-style: normal; font-variant-numeric: lining-nums; }
/* la marca gramatical va pegada a la última palabra del término (sin espacio entre ambos en el HTML): nunca sola en su línea */
.jrn-gl__g { font: italic 300 1.0625rem/1 var(--serif); color: var(--mute); white-space: nowrap; margin-left: .55em; }
@media (min-width: 900px) { .jrn-gl__w { font-size: clamp(1.5rem, 1.7vw, 1.875rem); } }
.jrn-gl__i dd { margin: 10px 0 0; display: grid; gap: 10px; justify-items: start; }
.jrn-gl__i dd p { color: var(--mute); font-size: var(--fs-sm); max-width: 44ch; }
.jrn-gl__go { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.jrn-gl__go .arw { width: 18px; transition: transform .5s var(--ease-out); }
@media (hover: hover) { .jrn-gl__go:hover .arw { transform: translateX(5px); } }
@media (min-width: 900px) {
  .jrn-gl__head { position: sticky; top: calc(var(--hdr-h) + 32px); }
  .jrn-gl__list { columns: 2; column-gap: calc(var(--gutter) * 2); column-rule: 1px solid var(--line-soft); }
  .jrn-gl__hint { display: none; }
}
/* móvil y tableta (ronda 2): las doce palabras en un carril que se desliza con el dedo (scroll nativo con snap puro,
   sin JS: norma 17), en lugar de una columna de casi 3.000 px de texto. Se asoma la siguiente tarjeta y una pista
   en versalitas lo dice; cada enlace de tarjeta es enfocable con el teclado (el carril se desplaza solo). */
@media (max-width: 899px) {
  .jrn-gl__list {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(calc(100% - 56px), 340px); column-gap: 20px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margin); margin-inline: calc(-1 * var(--margin)); padding: 0 var(--margin) 4px;
    border-top: 0; scrollbar-width: none;
  }
  .jrn-gl__list::-webkit-scrollbar { display: none; }
  .jrn-gl__i { scroll-snap-align: start; border-top: 1px solid var(--ink); border-bottom: 0; padding: 16px 0 6px; }
  .jrn-gl__hint { display: flex; align-items: center; gap: 12px; margin-top: -22px; color: var(--mute); }
  .jrn-gl__hint .arw { width: 22px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; }
}

/* ==========================================================================
   ARTÍCULO
   ========================================================================== */

/* ---------- barra de lectura (fina, dorada, encima de todo salvo menú y cookies) */
.jrn-prog { position: fixed; z-index: 61; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; display: none; }
.jrn-prog i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
html.jrn-pbar .jrn-prog { display: block; }
@supports (animation-timeline: --a) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    .page-articulo main { timeline-scope: --jrn-read; }
    .jrn-text { view-timeline: --jrn-read block; }
    .jrn-prog { display: block; }
    .jrn-prog i { animation: jrn-read auto linear both; animation-timeline: --jrn-read; animation-range: contain 0% contain 100%; }
  }
}
@keyframes jrn-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .jrn-prog { display: none !important; } }
@media print { .jrn-prog, .jrn-toc, .jrn-toc-m { display: none !important; } }

/* ---------- cabecera del artículo (papel, sin foto detrás: la foto es una lámina debajo) */
.jrn-ah { padding-bottom: 0; }
.jrn-ah .phero__in { row-gap: 22px; align-items: start; }
.jrn-ah__t { max-width: none; }
/* en móvil los títulos largos no caben en sus tres líneas de escritorio: el h1 fluye (equilibrado)
   y entra entero con un solo fundido de 16 px, sin máscaras por línea */
@media (max-width: 599px) {
  .jrn-ah__t > span, .jrn-ah__t > span > span { display: inline; overflow: visible; padding: 0; margin: 0; animation: none !important; }
  .jrn-ah__t { text-wrap: balance; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .jrn-ah__t { animation: arz-up 1s var(--ease-out) .12s both; }
  .vt-in .jrn-ah__t { animation-delay: calc(.12s + var(--vt-shift)); }
}
.jrn-ah__meta { align-self: end; }
.jrn-ah__deck { max-width: 36ch; }
.jrn-ah__plate { margin-top: clamp(32px, 4.5vw, 64px); }
/* de borde a borde (Pedro 29-10: lo que no ocupa todo el ancho «me parece muy feo»); el pie, en la rejilla */
.jrn-ah__plate .jrn-ph--plate { max-height: calc(100svh - var(--hdr-h) - 40px); }
.jrn-ah__plate figcaption.wrap { max-width: var(--maxw); }
@media (min-width: 900px) { .jrn-ah__meta { padding-bottom: .5em; } }
/* escritorio ancho: la entradilla a la derecha del titular, al pie de su última línea, y los datos debajo del
   titular; la lámina sube ~130 px y llena la mitad baja del primer pantallazo */
@media (min-width: 1200px) {
  .jrn-ah .phero__in > .jrn-ah__t { grid-column: 1 / 8; grid-row: 2; }
  .jrn-ah .phero__in > .jrn-ah__deck { grid-column: 8 / 13; grid-row: 2; align-self: end; padding-bottom: .2em; }
  .jrn-ah .phero__in > .jrn-ah__meta { grid-column: 1 / 8; grid-row: 3; padding-bottom: 0; }
}
/* «Barrios» (ronda 2): una sola foto vertical (madrid-mirador, 1360 × 1700, nítida a 2×) en lugar del tríptico.
   Móvil: bajo la entradilla, de borde a borde, 4:5. Desde 900 px: a la derecha del titular (columnas 8–12) y a sangre
   por la derecha, del alto de la pantalla (medida fija por CSS, sin JS); el texto en las columnas 1–7. */
.jrn-ah__side { margin: 6px calc(-1 * var(--bleed)) 0; }
.jrn-ah__side .jrn-ph { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--hdr-h) - 40px); }
.jrn-ah__side figcaption { padding-inline: var(--margin); max-width: none; }
@media (min-width: 900px) {
  .jrn-ah.jrn-ah--side .phero__in { grid-template-rows: auto auto auto 1fr; }
  .jrn-ah.jrn-ah--side .phero__in > .crumbs { grid-column: 1 / 8; grid-row: 1; }
  .jrn-ah.jrn-ah--side .phero__in > .jrn-ah__t { grid-column: 1 / 8; grid-row: 2; }
  .jrn-ah.jrn-ah--side .phero__in > .jrn-ah__meta { grid-column: 1 / 8; grid-row: 3; align-self: start; padding-bottom: 0; }
  .jrn-ah.jrn-ah--side .phero__in > .jrn-ah__deck { grid-column: 1 / 7; grid-row: 4; align-self: start; padding: 0; margin-top: clamp(8px, 2vw, 28px); }
  .jrn-ah.jrn-ah--side .phero__in > .jrn-ah__side { grid-column: 8 / -1; grid-row: 1 / span 4; margin: 0 calc(-1 * var(--bleed)) 0 0; }
  .jrn-ah__side .jrn-ph { aspect-ratio: auto; height: min(calc(100svh - var(--hdr-h) - 64px), 64vw); max-height: none; }
  .jrn-ah__side figcaption { padding-inline: 0 var(--margin); }
  .jrn-ah--side + .jrn-body { padding-top: clamp(40px, 4.5vw, 72px); }
}

/* ---------- cuerpo: índice lateral · texto · notas al margen */
.jrn-body { padding-top: clamp(40px, 5.5vw, 80px); padding-bottom: clamp(40px, 5vw, 72px); align-items: start; }
.jrn-body > .jrn-toc { display: none; }
.jrn-body > .jrn-text { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .jrn-body > .jrn-text { grid-column: 1 / 9; }                    /* notas: columnas 9–12 */
}
@media (min-width: 1200px) {
  /* notas: columnas 10–12 */
  .jrn-body > .jrn-toc { display: block; grid-column: 1 / 4; align-self: stretch; }
  .jrn-body > .jrn-text { grid-column: 4 / 10; }
  .jrn-toc-m { display: none; }
}

/* índice lateral pegajoso (escritorio ancho) */
.jrn-toc__nav { position: sticky; top: calc(var(--hdr-h) + 40px); display: grid; gap: 18px; max-width: 17rem; }
.jrn-toc__nav ol { border-top: 1px solid var(--line); }
.jrn-toc__nav li { border-bottom: 1px solid var(--line-soft); }
.jrn-toc__nav a {
  position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline;
  min-height: 44px; padding: 12px 0 11px; font-size: .875rem; line-height: 1.4; color: var(--mute);
  transition: color .35s ease;
}
.jrn-toc__nav a b { font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .14em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.jrn-toc__nav a::before { content: ""; position: absolute; left: -18px; top: 50%; width: 10px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.jrn-toc__nav a[aria-current] { color: var(--ink); }
.jrn-toc__nav a[aria-current]::before { transform: scaleX(1); }
@media (hover: hover) { .jrn-toc__nav a:hover { color: var(--ink); } }
.jrn-toc__foot { color: var(--mute-2); }

/* índice plegable (móvil y tableta): details nativo */
.jrn-toc-m { margin-bottom: clamp(36px, 6vw, 56px); border-top: 1px solid var(--ink); }
.jrn-toc-m > summary { font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; min-height: 56px; padding-block: 14px; }
.jrn-toc-m > summary span span { color: var(--mute); margin-left: .6em; }
.jrn-toc-m .acc__c { padding-bottom: 18px; color: var(--ink); }
.jrn-toc-m ol { border-top: 1px solid var(--line-soft); }
.jrn-toc-m li { border-bottom: 1px solid var(--line-soft); }
.jrn-toc-m a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; min-height: 46px; padding-block: 12px; font-size: var(--fs-sm); line-height: 1.4; }
.jrn-toc-m a b { font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .14em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- tipografía de lectura (medida ≈ 64ch, 17 px móvil → 20 px escritorio) */
.jrn-text { font-size: clamp(1.0625rem, .6vw + .6875rem, 1.25rem); line-height: 1.66; color: var(--ink); }
.jrn-text > * + * { margin-top: 1.05em; }
.jrn-text p { max-width: 66ch; hyphens: manual; }
.jrn-text a:not([class]) { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .08em; }
.jrn-text strong { font-weight: 500; }
@media (min-width: 900px) { .jrn-text { line-height: 1.7; } }

/* capitular: initial-letter donde existe; si no, letra flotante de 3 líneas */
.jrn-drop::first-letter {
  float: left; font-family: var(--serif); font-weight: 300; color: var(--ink);
  font-size: 4.35em; line-height: .8; margin: .1em .1em 0 -.04em;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .jrn-drop::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 .14em 0 0; -webkit-initial-letter: 3; initial-letter: 3; }
}

/* apartados */
.jrn-text h2 { margin-top: 2.3em; font: 400 var(--fs-3)/1.14 var(--serif); letter-spacing: -.005em; text-wrap: balance; max-width: 26ch; }
.jrn-text h2 + * { margin-top: .75em; }
.jrn-h2n { display: block; margin-bottom: 14px; font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.jrn-h2n::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin-left: .9em; background: var(--line-gold); }

/* párrafo + nota al margen (escritorio: la nota en las columnas de la derecha, a la altura de su párrafo) */
.jrn-pn > p + .jrn-note, .jrn-note { font-size: .875rem; line-height: 1.55; color: var(--mute); }
.jrn-note { margin-top: 1.1em; padding-left: 14px; border-left: 1px solid var(--line-gold); max-width: 52ch; }
.jrn-note b { font-weight: 500; color: var(--ink); }
@media (min-width: 900px) {
  /* la caja crece «nota + gutter» (50 % + g/2 de la columna); dentro, la nota = (100 % − 2 g) / 3 de la caja */
  .jrn-pn { display: grid; grid-template-columns: minmax(0, 1fr) calc((100% - 2 * var(--gutter)) / 3); column-gap: var(--gutter); align-items: start; margin-right: calc(-50% - var(--gutter) / 2); }
  .jrn-pn > p { grid-column: 1; }
  .jrn-pn > .jrn-note { grid-column: 2; grid-row: 1; margin-top: .3em; padding-left: 0; border-left: 0; }
  .jrn-pn > .jrn-note::before { content: ""; display: block; width: 28px; height: 1px; margin-bottom: 12px; background: var(--gold); }
}

/* figuras y citas que se abren hacia el margen */
.jrn-wide { clear: both; }
.jrn-text > .jrn-fig { margin-top: 2.2em; margin-bottom: .6em; }
/* láminas: las fotos (y la Puerta de Alcalá) del cuerpo, grandes y a sangre. Móvil y tableta (sin índice lateral):
   de borde a borde. Escritorio ancho: arrancan en la columna del texto y sangran por la derecha hasta el borde (el
   índice fijo de la izquierda nunca queda tapado). Alto máximo 85 % de la pantalla. */
.jrn-lam { clear: both; margin-inline: calc(-1 * var(--bleed)); }
.jrn-text > .jrn-lam { margin-top: 2em; margin-bottom: 1.3em; }
.jrn-lam .jrn-ph { max-height: 85svh; }
.jrn-lam figcaption { padding-inline: var(--margin); max-width: none; }
@media (min-width: 900px) {
  .jrn-lam { margin-right: calc(-50% - var(--gutter) / 2 - var(--bleed)); }
}
@media (min-width: 1200px) {
  .jrn-lam { margin-left: 0; }
  .jrn-lam figcaption { padding-inline: 0; }
}
@media (min-width: 900px) {
  .jrn-wide { margin-right: calc(-50% - var(--gutter) / 2); }
  table.jrn-wide { width: calc(150% + var(--gutter) / 2); margin-right: 0; }
}
/* lámina vertical (recortes verticales: ortega-y-gasset-01 sin el televisor, villanueva-02 sin el mueble de la tele).
   Proporción FIJA (--ar, --r = la misma en número): el recorte nunca enseña lo que se ha dejado fuera. Ancho = el que
   cabe en 85svh. Móvil: de borde a borde. Escritorio: en la columna del texto y el pie al lado, en la de las notas. */
.jrn-vfig { clear: both; margin-inline: calc(-1 * var(--bleed)); }
.jrn-text > .jrn-vfig { margin-top: 2em; margin-bottom: 1.3em; }
.jrn-vfig .jrn-ph { aspect-ratio: var(--ar); width: min(100%, calc(85svh * var(--r))); }
.jrn-vfig figcaption { padding-inline: var(--margin); max-width: none; }
@media (min-width: 900px) {
  .jrn-vfig { display: flex; align-items: flex-end; column-gap: var(--gutter); margin-inline: 0 calc(-50% - var(--gutter) / 2); }
  /* en % de la caja (columna + nota + gutter): (200 % − g) / 3 = la columna de texto */
  .jrn-vfig .jrn-ph { flex: 0 0 auto; width: min(calc((200% - var(--gutter)) / 3), calc(85svh * var(--r))); }
  .jrn-vfig figcaption { flex: 1 1 0; min-width: 0; margin: 0; padding: 0 0 2px; max-width: 36ch; }
  .jrn-vfig figcaption::before { content: ""; display: block; width: 28px; height: 1px; margin-bottom: 12px; background: var(--gold); }
}
.jrn-pull { margin: 1.9em 0 1.6em; padding-top: 30px; position: relative; }
.jrn-pull::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 1px; background: var(--gold); }
.jrn-pull p { max-width: 27ch; font: 300 var(--fs-2)/1.06 var(--serif); letter-spacing: -.01em; text-wrap: balance; text-indent: -.42em; }
.jrn-pull p::before { content: "«"; color: var(--gold-ink); }
.jrn-pull p::after { content: "»"; color: var(--gold-ink); }
html[lang="en"] .jrn-pull p { text-indent: -.36em; }
html[lang="en"] .jrn-pull p::before { content: "“"; } html[lang="en"] .jrn-pull p::after { content: "”"; }

/* listas de definición (los cuatro frentes, los tres gastos) */
.jrn-dl { margin-block: 1.5em 1.7em; border-top: 1px solid var(--ink); }
.jrn-dl > div { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.jrn-dl dt { font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.jrn-dl dd { margin: 8px 0 0; max-width: 60ch; }
@media (min-width: 700px) {
  .jrn-dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
  .jrn-dl dd { margin: 0; }
}

/* apunte en recuadro (visado, obra nueva…) */
.jrn-box { margin-block: 2em; padding: 24px 0 26px; border-block: 1px solid var(--ink); display: grid; gap: 10px; }
.jrn-box p { font-size: .9375rem; line-height: 1.6; max-width: 60ch; }
.jrn-box .micro { color: var(--gold-ink); }

/* «En la selección actual»: N.º y nombre de las casas del barrio */
.jrn-insel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.jrn-insel > span { font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.jrn-insel a { display: inline-flex; align-items: baseline; gap: .5em; min-height: 32px; padding-top: 6px; }
.jrn-insel a .no { font-size: var(--fs-micro); }

/* tabla comparativa (barrios) */
.jrn-table { width: 100%; margin-block: 1.4em 1.2em; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.jrn-table caption { text-align: left; padding-bottom: 14px; font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.jrn-table th, .jrn-table td { text-align: left; vertical-align: baseline; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); }
.jrn-table thead th { font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--ink); padding-top: 0; }
.jrn-table tbody th { font: 400 1.5rem/1.1 var(--serif); }
.jrn-table td:last-child { white-space: nowrap; }
.jrn-table td:last-child a { color: var(--gold-ink); }
@media (max-width: 699px) {
  .jrn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .jrn-table, .jrn-table tbody, .jrn-table tr, .jrn-table th, .jrn-table td { display: block; }
  .jrn-table tr { padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
  .jrn-table tr:first-child { border-top: 1px solid var(--ink); }
  .jrn-table caption { display: block; }
  .jrn-table th, .jrn-table td { padding: 0; border: 0; }
  .jrn-table td a { justify-self: start; }
  .jrn-table tbody th { margin-bottom: 10px; }
  .jrn-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding-block: 4px; }
  .jrn-table td::before { content: attr(data-k); font: 500 10px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
  .jrn-table td:last-child { white-space: normal; }
}

/* ---------- calculadora (costes) — libro de cuentas con un solo campo */
.jrn-calc { margin-block: 1.6em 1.4em; padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px); background-color: var(--sand); background-image: var(--grain); display: grid; gap: 22px; }
.jrn-calc__head { display: grid; gap: 8px; }
.jrn-calc__head .h-3 { max-width: 22ch; }
.jrn-calc__in { display: grid; gap: 10px; justify-items: start; }
.jrn-calc__in .micro { color: var(--mute); }
.jrn-calc__field { display: inline-flex; align-items: baseline; gap: .25em; max-width: 100%; border-bottom: 1px solid var(--ink); font: 300 var(--fs-2)/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.jrn-calc__field input { width: 10.5ch; min-width: 4ch; padding: 4px 0 6px; border: 0; border-radius: 0; background: transparent; font: inherit; font-variant-numeric: inherit; color: var(--ink); -webkit-appearance: none; appearance: none; }
.jrn-calc__field input:focus { outline: none; }
@supports (field-sizing: content) { .jrn-calc__field input { width: auto; field-sizing: content; } }
.jrn-calc__field:focus-within { box-shadow: 0 1px 0 0 var(--gold-ink); }
.jrn-calc__field span { color: var(--gold-ink); }
.jrn-text .jrn-calc__try { max-width: none; }
.jrn-calc__try { font-size: .875rem; color: var(--mute); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.jrn-calc__try button { min-height: 36px; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.jrn-calc__try button .no { margin-left: .4em; }
.jrn-calc__static { font-size: .9375rem; }
html.js .jrn-calc__static { display: none; }
html.js-failed .jrn-calc__static { display: block; }
.jrn-calc__dl { margin: 0; border-top: 1px solid var(--ink); }
.jrn-calc__dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.jrn-calc__dl dt { font-size: .9375rem; line-height: 1.4; }
.jrn-calc__dl dt small { display: block; font-size: .8125rem; color: var(--mute); }
.jrn-calc__dl dd { margin: 0; text-align: right; font: 400 1.5rem/1.15 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.jrn-calc__dl .is-total { border-bottom-color: var(--ink); }
.jrn-calc__dl .is-total dt { font-weight: 500; }
.jrn-calc__dl .is-total dd { font-size: var(--fs-3); color: var(--gold-ink); }
.jrn-calc__note { font-size: .8125rem; line-height: 1.55; color: var(--mute); max-width: 64ch; }
@media (max-width: 599px) {
  .jrn-calc { margin-inline: calc(-1 * var(--margin)); }
  .jrn-calc__dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .jrn-calc__dl dd { text-align: left; font-size: 1.375rem; white-space: normal; }
}

/* ---------- cierre del artículo: firma y aviso */
.jrn-end { margin-top: 3em; padding-top: 22px; border-top: 1px solid var(--ink); display: grid; gap: 14px; }
.jrn-end__sign { font: 400 1.25rem/1.3 var(--serif); }
.jrn-end__sign span { color: var(--mute); }
.jrn-end p.jrn-end__aviso { font-size: .8125rem; line-height: 1.55; color: var(--mute); max-width: 64ch; }

/* ---------- seguir leyendo */
.jrn-next { padding-top: calc(var(--section) * .55); }
.jrn-next .grid { row-gap: 28px; }
.jrn-next__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.jrn-next .jrn-card a { gap: 12px; }
.jrn-next .jrn-card h3 { max-width: 24ch; }
@media (max-width: 899px) {
  .jrn-next__list { display: grid; row-gap: 36px; }
  .jrn-next .jrn-card .jrn-ph { --ar: 3 / 2; }
  .jrn-next .jrn-card h3 { font-size: 1.5rem; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .jrn-next__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 900px) {
  .jrn-next__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .jrn-next__list > :nth-child(1) { grid-column: 1 / 7; }
  .jrn-next__list > :nth-child(2) { grid-column: 8 / 13; margin-top: clamp(64px, 8vw, 140px); }
  .jrn-next .jrn-ph { --ar: 3 / 2; }
}

/* ---------- cierre (índice y artículos): título y botones en la misma fila, sin papel muerto */
.jrn-close.cta-end { padding-block: calc(var(--section) * .8); }
.jrn-close .cta-end__aside { margin-top: clamp(24px, 4vw, 40px); }
@media (min-width: 900px) {
  .jrn-close .cta-end__t { grid-row: 2; margin-top: clamp(20px, 2.4vw, 36px); }
  .jrn-close .cta-end__aside { grid-row: 2; align-self: end; margin-top: 0; padding-bottom: .35em; }
}
/* lámina de cabecera del artículo: más alta en móvil, apaisada en escritorio */
.jrn-ph--plate { --ar: 5 / 4; }
@media (min-width: 600px) { .jrn-ph--plate { --ar: 16 / 9; } }
@media (min-width: 900px) { .jrn-ph--plate { --ar: 2 / 1; } }

/* términos en español dentro del texto inglés: marcados con <i lang="es">, sin cursiva falsa de Switzer */
.jrn-text i[lang], .jrn-note i[lang] { font-style: normal; }
html[lang="en"] .jrn-calc__field { gap: .04em; }
/* objetivos táctiles de 44 px en los enlaces pequeños */
@media (pointer: coarse) {
  .jrn-calc__try button, .jrn-insel a, .jrn-gl__go { min-height: 44px; }
  /* caja de 46 px sin mover nada (el margen negativo devuelve el espacio) y el subrayado pegado al texto */
  .jrn-text .jrn-table td a { display: inline-block; padding-block: 12px; margin-block: -12px; background-origin: content-box; }
  .jrn-insel a { padding-top: 0; align-items: center; }
}

/* ---------- artículos generados desde el CRM (gen/journal.py): sin números delante de los subtítulos */
.jrn-toc--plano .jrn-toc__nav a, .jrn-toc-m.jrn-toc--plano a, .jrn-lines--plano a { grid-template-columns: minmax(0, 1fr); }
.jrn-text h3 { margin-top: 1.9em; font: 500 1.0625em/1.3 var(--sans); max-width: 40ch; }
.jrn-text h3 + * { margin-top: .5em; }
.jrn-lista { padding: 0; list-style: none; max-width: 66ch; }
.jrn-lista > li { position: relative; padding-left: 1.5em; }
.jrn-lista > li + li { margin-top: .55em; }
ul.jrn-lista > li::before { content: ""; position: absolute; left: 0; top: .82em; width: .85em; height: 1px; background: var(--gold); }
ol.jrn-lista { counter-reset: jrn-l; }
ol.jrn-lista > li { counter-increment: jrn-l; }
ol.jrn-lista > li::before { content: counter(jrn-l) "."; position: absolute; left: 0; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.jrn-pull figcaption { margin-top: 14px; }