/* ==========================================================================
   Artículos (/articulos/, 19-X-2026): el índice del itinerario y cada artículo.
   Se carga después de site.css y usa sus tokens. Mismo método que el resto del
   sitio: color plano, filetes finos, esquinas de 2px, sin degradados ni sombras.
   Sin estilos en línea (CSP). Móvil primero. Sin JavaScript propio.
   ========================================================================== */

/* Todos los bloques empiezan en el borde izquierdo de la columna de 72rem, como en el resto del sitio.
   Ninguna regla posterior puede usar la forma corta `margin` en un hijo directo del cuerpo: pondría a 0 este margen
   (UX-01, 19-X-2026). `> ul` sube la especificidad para ganar a `.prosa ul` de site.css. */
.itinerario-lista > *,
.articulos__creditos > *,
.articulo__cuerpo > *,
.articulo__cuerpo > ul,
.articulo__sobre-caja,
.articulo__creditos > *,
.itinerario__caja {
  margin-left: max(0px, calc((100% - var(--width)) / 2));
  margin-right: auto;
}

/* ---- Atribución y permiso (portadillas) ---- */
/* Children of .portadilla: longhand margins only, or the alignment margin of site.css drops to 0 (19-X-2026, same
   failure as UX-01: from 72rem + 2 gutters these blocks sat 128px to the left of the title). */
.articulos__permiso,
.articulo__permiso {
  margin-top: 0.9rem;
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
/* Enlaces dentro de una línea de texto: la zona de toque llega a 44px con relleno, sin romper la línea */
.articulos__permiso a,
.articulo__permiso a { padding: 0.7rem 0; }
.articulo__migas { padding: 0.8rem 0; }

/* ---- Índice: el itinerario ---- */
.itinerario-lista { padding: clamp(1.75rem, 5vw, 3rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); }
.itinerario-lista > * { max-width: 50rem; }
.etapa { scroll-margin-top: 1rem; }
.etapa + .etapa { margin-top: clamp(2.5rem, 6vw, 3.75rem); }
.etapa__cabeza { margin-bottom: 0.9rem; }
.etapa__cabeza .cornisa { margin-bottom: 0.25rem; }
.etapa__cabeza h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  line-height: 1.15;
  text-wrap: balance;
}
.lecturas { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-line-strong); }
/* Móvil: miniatura a la izquierda del número, el título y el autor; el resumen, a todo el ancho */
.lectura {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-areas:
    "imagen numero"
    "imagen titulo"
    "imagen autor"
    "resumen resumen";
  grid-template-rows: auto auto 1fr auto;
  column-gap: 1rem;
  padding: 1.25rem 0 1.4rem;
  border-top: 1px solid var(--color-line-strong);
}
.lectura:first-child { border-top-color: var(--color-ink); }
/* The thumbnail links to the article for the mouse and the finger only (tabindex=-1, aria-hidden): the title is the
   link for the keyboard and screen readers (UX-16; same pattern as the capture on the home page) */
.lectura__miniatura { grid-area: imagen; align-self: start; display: block; }
.lectura__imagen {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
/* Vollkorn with lining, tabular figures: Rosarivo only has old-style figures, and its zero reads as an «o» (UX-08) */
.lectura__numero {
  grid-area: numero;
  margin: 0;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-morado);
}
.lectura__titulo {
  grid-area: titulo;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  text-wrap: balance;
}
.lectura__titulo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.lectura__titulo a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.lectura__autor {
  grid-area: autor;
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-ink-muted);
}
.lectura__resumen {
  grid-area: resumen;
  max-width: var(--measure);
  margin: 0.8rem 0 0;
  line-height: 1.55;
  text-wrap: pretty;
}
/* Sin imagen (si falta), el texto ocupa las dos columnas */
.lectura:not(:has(.lectura__imagen)) > * { grid-column: 1 / -1; }
.lectura__miniatura:hover .lectura__imagen { border-color: var(--color-morado); }
@media (min-width: 40rem) {
  .lectura {
    grid-template-columns: 11rem minmax(0, 1fr);
    grid-template-areas:
      "imagen numero"
      "imagen titulo"
      "imagen autor"
      "imagen resumen";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 1.75rem;
    padding: 1.5rem 0 1.75rem;
  }
  .lectura__imagen { aspect-ratio: 4 / 3; }
  .lectura__titulo { font-size: 1.45rem; }
  .lectura__resumen { margin-top: 0.6rem; }
}

.articulos__creditos {
  padding: 1.75rem var(--gutter) 2.25rem;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.articulos__creditos > * { max-width: var(--measure); }
.articulos__creditos p { margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.5; color: var(--color-ink-muted); }

/* ---- Artículo ---- */
/* A shorter measure for long reading: about 68-70 characters a line in Vollkorn at 18px (UX-02) */
.articulo { --measure: 34rem; }

/* ---- Artículo: cabecera ---- */
.articulo__autor { margin-top: 0; margin-bottom: 0.15rem; font-size: 1.15rem; line-height: 1.4; }
.articulo__datos { margin-top: 0; margin-bottom: 0; font-size: 0.95rem; line-height: 1.45; color: var(--color-ink-muted); }
.articulo__imagen { margin-top: 1.6rem; margin-bottom: 0; }
.articulo__imagen img { width: 100%; border: 1px solid var(--color-line); background: var(--color-bg-alt); }
.articulo__imagen--cuadrada { width: min(100%, 30rem); }
.articulo__imagen--vertical { width: min(100%, 22rem); }
.articulo__imagen figcaption {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
.articulo__fuente-img { padding: 0.75rem 0; }
/* Phones: a tall picture would push all the text below the first screen; it is scaled down whole, never cropped (UX-07) */
@media (max-width: 39.99rem) {
  /* A fixed height and width from the aspect-ratio of the width/height attributes: the box is right before the image
     loads (CLS 0; with max-height and width:auto it was not). contain: never cropped if max-width ever bites. */
  .articulo__imagen--vertical img { width: auto; height: max(42svh, 16rem); max-width: 100%; object-fit: contain; }
}

/* ---- Artículo: cuerpo traducido ---- */
.articulo__cuerpo { padding: clamp(1.75rem, 5vw, 2.75rem) var(--gutter) 0.5rem; }
.articulo__cuerpo > * { max-width: var(--measure); }
.articulo__cuerpo h2 {
  /* Longhands only: the left margin aligns every block with the 72rem column (UX-01) */
  margin-top: 2.4rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem);
  line-height: 1.2;
  text-wrap: balance;
}
.articulo__cuerpo h3 {
  margin-top: 1.9rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.articulo__cuerpo h4 { margin-top: 1.5rem; margin-bottom: 0.4rem; font-size: 1rem; font-weight: 600; font-style: italic; }
.articulo__cuerpo > h2:first-child,
.articulo__cuerpo > h3:first-child { margin-top: 0; }
.articulo__cuerpo ol { margin-top: 0; margin-bottom: 1em; padding-left: 1.5rem; }
.articulo__cuerpo li { margin-bottom: 0.55rem; }
/* Enlaces en el texto: 44px de alto con relleno, sin mover la línea (WCAG 2.5.8, excepción de enlaces en línea para el ancho) */
.articulo__cuerpo :is(p, li, figcaption) a,
.articulo__sobre p a { padding: 0.7rem 0; }
/* The quotation source and the notes are set smaller: a little more padding keeps the 44px */
.articulo__cuerpo figcaption a,
.articulo__cuerpo .notas a:not(.nota-volver) { padding: 0.8rem 0; }

/* Citas en bloque */
.articulo__cuerpo .cita { margin-top: 1.6rem; margin-bottom: 1.6rem; }
.articulo__cuerpo blockquote {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 2px solid var(--color-morado);
}
.articulo__cuerpo figure.cita > blockquote { margin-left: 0; margin-right: 0; }
.articulo__cuerpo blockquote p:last-child { margin-bottom: 0; }
.articulo__cuerpo figure.cita figcaption {
  margin-top: 0.55rem;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}

/* Nota del editor: separada del texto del autor, con su rótulo */
.nota-editor {
  margin-top: 1.1rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem 0.95rem;
  border-left: 3px solid var(--color-morado);
  background: var(--color-bg-alt);
  font-size: 1rem;
  line-height: 1.5;
}
.nota-editor p { margin: 0; text-wrap: pretty; }
.nota-editor p + p { margin-top: 0.5rem; }
/* Labels look like the .cornisa of site.css: italic, small, no spaced capitals (UX-04) */
.nota-editor .nota-editor__rotulo {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-morado);
}
li .nota-editor { margin: 0.6rem 0 0.4rem; }
/* La marca en el texto (E1, E2…): no es enlace; la nota va justo debajo del párrafo */
.ne-marca {
  margin-left: 0.1em;
  font-size: 0.7em;
  font-weight: 600;
  line-height: 0;
  color: var(--color-morado);
}

/* Notas al pie del autor */
.notas {
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.97rem;
}
.articulo__cuerpo .notas h2 { margin-top: 0; font-size: 1.35rem; }
.notas ol { padding-left: 1.4rem; }
.nota-ref { font-size: 0.75em; line-height: 0; }
.articulo__cuerpo .nota-ref a { padding: 0.95rem 0.3rem; font-weight: 600; text-decoration: none; }
/* Padding, not inline-flex: 44px to touch without making its line taller (UX-09) */
.nota-volver { font-size: 0.9rem; white-space: nowrap; }
/* more specific than `.articulo__cuerpo :is(p, li, figcaption) a` (0.7rem), which left it at 42px */
.articulo__cuerpo .notas .nota-volver { padding: 1rem 0; }
/* The footnote reached from its call is highlighted (UX-14) */
.notas li:target { background: var(--color-morado-tint); }

/* ---- Sobre el autor (texto del original) ---- */
.articulo__sobre { padding: 1.25rem var(--gutter) 0; }
.articulo__sobre-caja {
  max-width: var(--measure);
  padding: 1.05rem 1.25rem 0.75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.articulo__sobre h2 {
  margin: 0 0 0.45rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-ink-muted);
}
.articulo__sobre p { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }

/* ---- Créditos del artículo ---- */
.articulo__creditos { padding: 1.4rem var(--gutter) 0; }
.articulo__creditos > * { max-width: var(--measure); }
.articulo__creditos p { margin-bottom: 0.35rem; font-size: 0.92rem; line-height: 1.45; color: var(--color-ink-muted); }

/* ---- Anterior / siguiente del itinerario ---- */
.itinerario { padding: 2rem var(--gutter) clamp(2.5rem, 6vw, 4rem); }
.itinerario__caja { display: grid; gap: 0.75rem; max-width: 50rem; }
.itinerario__enlace {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 44px;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.itinerario__enlace:hover { border-color: var(--color-morado); background: var(--color-morado-tint); }
.itinerario__rotulo {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-morado);
}
.itinerario__enlace--anterior .itinerario__rotulo::before { content: "← "; content: "← " / ""; }
.itinerario__enlace--siguiente .itinerario__rotulo::after { content: " →"; content: " →" / ""; }
.itinerario__titulo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--color-morado);
  text-wrap: balance;
}
.itinerario__indice { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; font-weight: 600; }
/* UX-11: after the last reading, a short closing with three links instead of «Siguiente». */
.itinerario__cierre {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.itinerario__cierre p { margin: 0; }
.itinerario__cierre-enlaces { list-style: none; margin: 0.15rem 0 0; padding: 0; }
.itinerario__cierre-enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 40rem) {
  .itinerario__caja { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .itinerario__enlace--siguiente,
  .itinerario__cierre { grid-column: 2; }
  .itinerario__enlace--siguiente { text-align: right; }
  .itinerario__indice { grid-column: 1 / -1; }
}

/* ---- Preferencias ---- */
@media (forced-colors: active) {
  .nota-editor { border-left-color: CanvasText; }
  .itinerario__enlace,
  .itinerario__cierre,
  .articulo__sobre-caja { border-color: CanvasText; }
  .articulo__cuerpo blockquote { border-left-color: CanvasText; }
}
@media print {
  .itinerario, .articulo__fuente-img { display: none; }
  .nota-editor { background: none; border: 1px solid var(--color-line-strong); border-left-width: 3px; }
  .articulo__cuerpo a[href^="http"]::after { content: "\00a0(" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}