/* ==========================================================================
   PÁGINAS INTERIORES — componentes compartidos
   --------------------------------------------------------------------------
   Quiénes somos · Noticias · Formación · Escuelita · Colabora · Contacto.

   No hay una dirección de arte nueva: se aplica la misma que ya está
   desplegada en la Home, Modelo Ukamau y Publicaciones. Lo que aporta este
   archivo es el puñado de componentes que las seis páginas necesitan y que
   no existían todavía como piezas reutilizables.

   La gramática que sostiene el sitio entero es una sola: una FILA CON REGLA
   de dos columnas, 4fr para la etiqueta y 8fr para el contenido, que colapsa
   a una sola columna bajo 768px. Ya estaba resuelta tres veces por separado
   —`.barrio` y `.reconocimientos` en la Home, `.pub-ficha` en Publicaciones—
   y aquí se formaliza como `.serie`, que es lo que usan las seis páginas para
   líneas de trabajo, actividades, vías de colaboración y listados.

   Consistencia de sistema no es composición idéntica: cada página compone sus
   secciones de otra manera. Lo que se comparte son las piezas, no el molde.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · APERTURA DE PÁGINA
   La cabecera de una página interior es una banda de tinta, igual que la de
   Publicaciones. Lleva `class="band-ink page-hero"`: de `.band-ink` recibe el
   fondo, el color de los titulares, el kicker en oro, la regla de apertura y
   el anillo de foco; aquí sólo se define su ritmo vertical y sus medidas.
   -------------------------------------------------------------------------- */
.page-hero { padding: var(--s-7) 0 var(--s-6); }
.page-hero h1 { max-width: 18ch; margin-bottom: var(--s-4); }
.page-hero .lead { max-width: 58ch; }

/* Apertura con dato al costado: el titular manda, la cifra acompaña. */
@media (min-width: 1024px) {
  .hero-con-dato .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-7); align-items: end; }
  .hero-con-dato .hero-dato { border-top: 1px solid var(--rule-invert); padding-top: var(--s-4); }
}
.hero-dato { margin-top: var(--s-6); border-top: 1px solid var(--rule-invert); padding-top: var(--s-4); }
.hero-dato dl { margin: 0; display: grid; gap: var(--s-3); }
.hero-dato dt { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.hero-dato dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--ink-invert-2); line-height: var(--lh-tight); }

/* --------------------------------------------------------------------------
   2 · SERIE — la fila con regla, el caballo de batalla del sitio
   Etiqueta o título a la izquierda, contenido a la derecha, separados por una
   línea de 1px. Nunca una tarjeta: ni fondo, ni radio, ni sombra.
   -------------------------------------------------------------------------- */
.serie { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 2px solid var(--rule-strong); }
.serie > li { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-2); }
.serie h3 { font-size: var(--fs-h3); color: var(--ink); }
.serie p { font-size: var(--fs-small); color: var(--ink-soft); max-width: 64ch; }
.serie p + p { margin-top: var(--s-2); }
.serie .meta { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-deep); }
.serie .dato { font-size: var(--fs-small); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.serie .acciones { margin-top: var(--s-3); }

@media (min-width: 768px) {
  .serie > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); align-items: baseline; }
  /* La columna izquierda agrupa etiqueta, título y dato; la derecha, el texto. */
  .serie > li > .col-izq { display: grid; gap: var(--s-1); align-content: start; }
}

/* Serie sobre banda de tinta */
.band-ink .serie { border-top-color: var(--rule-invert); }
.band-ink .serie > li { border-bottom-color: var(--rule-invert); }
.band-ink .serie h3 { color: #fff; }
.band-ink .serie p { color: var(--ink-invert-2); }
.band-ink .serie .meta { color: var(--gold); }

/* Serie compacta: una línea por elemento, sin párrafo largo. */
.serie--compacta > li { padding: var(--s-3) 0; }
.serie--compacta h3 { font-size: var(--fs-body); font-weight: 600; }

/* --------------------------------------------------------------------------
   3 · NOTA — el apunte al margen, con regla de ladrillo
   Sustituye al antiguo `.info-block`, que era una caja con fondo.
   -------------------------------------------------------------------------- */
.nota {
  border-left: 3px solid var(--brick); padding: var(--s-2) 0 var(--s-2) var(--s-4);
  margin-top: var(--s-5); max-width: 62ch;
}
.nota h3 { font-size: var(--fs-body); color: var(--ink); margin-bottom: var(--s-2); }
.nota p { font-size: var(--fs-small); color: var(--ink-soft); }
.nota p + p { margin-top: var(--s-2); }
.band-ink .nota { border-left-color: var(--gold); }
.band-ink .nota h3 { color: #fff; }
.band-ink .nota p { color: var(--ink-invert-2); }

/* --------------------------------------------------------------------------
   4 · TEXTO A DOS COLUMNAS, sin fotografía
   Ninguna de estas seis páginas tiene fotografía propia, así que el bloque de
   apertura de sección lo resuelven el texto y la composición. La columna
   secundaria lleva el dato, la nota o la cita.
   -------------------------------------------------------------------------- */
.parrafos { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; margin-top: var(--s-5); }
.parrafos > div > p { color: var(--ink-soft); max-width: 64ch; }
.parrafos > div > p + p { margin-top: var(--s-3); }
@media (min-width: 900px) {
  .parrafos { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
  .parrafos .nota { margin-top: 0; }
}

/* Cuerpo de texto corrido dentro de una sección. */
.cuerpo > p { color: var(--ink-soft); max-width: var(--measure); }
.cuerpo > p + p { margin-top: var(--s-3); }
.cuerpo .destacado {
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4;
  color: var(--ink); border-left: 3px solid var(--brick);
  padding: var(--s-2) 0 var(--s-2) var(--s-4); margin: var(--s-5) 0; max-width: 36ch;
}

/* --------------------------------------------------------------------------
   5 · CIERRE — la banda final de cada página
   Alineada a la izquierda, como el resto del sitio. El centrado no pertenece
   al sistema y `.text-center` ya está neutralizado en la hoja global.
   -------------------------------------------------------------------------- */
.cierre .lead { max-width: 56ch; }
.cierre .acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); align-items: center; }

/* --------------------------------------------------------------------------
   6 · NOTICIAS — sección editorial, no rejilla de tarjetas
   Tres registros distintos para tres jerarquías distintas: la que abre, las
   recientes y el archivo.
   -------------------------------------------------------------------------- */
.noticia-abre { border-top: 2px solid var(--rule-strong); padding-top: var(--s-4); margin-top: var(--s-6); }
.noticia-abre .meta { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-deep); }
.noticia-abre h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: var(--lh-title); letter-spacing: -.015em; margin-top: var(--s-3); max-width: 22ch; }
.noticia-abre p { font-size: var(--fs-lead); color: var(--ink-soft); margin-top: var(--s-4); max-width: 60ch; line-height: 1.6; }

.recientes { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.recientes li { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-2); }
.recientes .meta { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-deep); }
.recientes h3 { font-size: var(--fs-h3); color: var(--ink); }
.recientes p { font-size: var(--fs-small); color: var(--ink-soft); max-width: 64ch; }
@media (min-width: 768px) {
  .recientes li { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5); align-items: baseline; }
  .recientes .meta { align-self: start; }
}

/* Archivo: la lista larga. Fecha, categoría y titular; el resumen debajo. */
.archivo { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.archivo li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-1); }
.archivo .meta { font-size: var(--fs-caption); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.archivo h3 { font-size: var(--fs-body); font-weight: 600; color: var(--ink); line-height: var(--lh-tight); }
.archivo p { font-size: var(--fs-small); color: var(--ink-soft); max-width: 68ch; }
@media (min-width: 768px) {
  .archivo li { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5); align-items: baseline; }
  .archivo .meta { align-self: start; }
}

/* Filtros del archivo: versalita con regla, nunca píldora. Ya definidos en la
   hoja global como `.filtro-btn`; aquí sólo su contenedor. */
.filtros { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-top: var(--s-5); border-bottom: 1px solid var(--rule); }
.filtros .filtro-btn { min-height: 44px; }

/* --------------------------------------------------------------------------
   7 · CONTACTO — formulario y datos, la página más simple del conjunto
   -------------------------------------------------------------------------- */
.contacto-columnas { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: start; margin-top: var(--s-6); }
@media (min-width: 900px) {
  .contacto-columnas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
}
.contacto-columnas > section > h2 { font-size: var(--fs-h3); }

/* El campo obligatorio se marca con palabra, no sólo con asterisco. */
.contact-form .req { color: var(--brick-deep); font-weight: 600; }
.contact-form .ayuda { font-size: var(--fs-caption); color: var(--ink-mute); margin-top: var(--s-1); }

/* --------------------------------------------------------------------------
   8 · TABLA DE DATOS INSTITUCIONALES (Colabora)
   Hereda `.data-table` de la hoja global; aquí sólo se le da medida y se
   evita que los números se partan.
   -------------------------------------------------------------------------- */
.tabla-institucional { max-width: 44rem; }
.tabla-institucional td:last-child { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   9 · AJUSTES RESPONSIVE COMUNES
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-hero { padding: var(--s-6) 0 var(--s-5); }
  .page-hero h1 { max-width: none; }
  .noticia-abre h3 { max-width: none; }
  .serie > li { padding: var(--s-3) 0; }
}

/* --------------------------------------------------------------------------
   10 · PIEZAS MENORES DE APOYO
   -------------------------------------------------------------------------- */

/* Encabezado que existe para la jerarquía y el lector de pantalla, pero que
   la composición no necesita mostrar: la sección ya se anuncia con su kicker. */
.vh-titulo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Subtítulo dentro de una sección: separa dos bloques sin abrir una sección
   nueva. Regla arriba, como en el resto del sitio. */
.sub-seccion {
  font-size: var(--fs-h3); margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

/* Apunte breve bajo un bloque de datos o de listado. */
.nota-cifras, .dato-seccion {
  font-size: var(--fs-small); color: var(--ink-soft); line-height: var(--lh-body);
  margin-top: var(--s-4); max-width: var(--measure);
}
.band-ink .nota-cifras, .band-ink .dato-seccion { color: var(--ink-invert-2); }

/* Encabezados de fila en la tabla institucional: son etiquetas, no datos. */
.data-table tbody th {
  text-align: left; font-weight: 600; color: var(--ink-soft);
  font-size: var(--fs-small); letter-spacing: 0; text-transform: none;
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule);
}
.data-table caption {
  caption-side: bottom; text-align: left; font-size: var(--fs-caption);
  color: var(--ink-mute); padding-top: var(--s-3);
}

/* La dirección postal no va en cursiva. */
.ficha address { font-style: normal; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; }

/* La página de contacto no lleva encabezado de sección visible: el bloque
   arranca directamente con las dos columnas, cada una con el suyo. */
.contacto-columnas { margin-top: 0; }

/* Las dos columnas son <section> anidadas, y la regla global `section` les
   daba 96px de padding vertical: abría un hueco de casi 200px bajo el hero.
   El ritmo vertical lo pone la sección exterior, no las columnas. */
.contacto-columnas > section { padding: 0; }

/* --------------------------------------------------------------------------
   11 · REGISTRO EDITORIAL — /ukamau-conquistando-la-vida-buena
   La ficha histórica de un libro que no está a la venta: portada real como
   objeto, cuerpo de texto al lado, créditos y estructura en `.serie`. La
   portada lleva la única sombra del sitio porque simula un libro físico.
   -------------------------------------------------------------------------- */
.obra { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-5); border-top: 2px solid var(--rule-strong); padding-top: var(--s-5); }
.obra-portada img {
  width: 100%; max-width: 240px; aspect-ratio: 312 / 445; object-fit: contain;
  box-shadow: 0 18px 34px -18px rgba(23,22,20,.45);
}
.obra-portada figcaption { font-size: var(--fs-caption); color: var(--ink-mute); margin-top: var(--s-2); max-width: 240px; line-height: var(--lh-tight); }
@media (min-width: 768px) {
  .obra { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .obra-portada img, .obra-portada figcaption { max-width: 300px; }
}
.cuerpo .destacado-firma { display: block; font-family: var(--text); font-size: var(--fs-caption); color: var(--ink-mute); margin-top: var(--s-2); line-height: var(--lh-tight); }

/* Créditos: la fila compacta, con el texto a la derecha en tinta. */
.creditos p { color: var(--ink); }

/* Autoras y autores: una lista numerada a dos o tres columnas, sin tarjetas. */
.autores { list-style: none; counter-reset: autor; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr; }
.autores li { counter-increment: autor; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink); display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--s-2); align-items: baseline; }
.autores li::before { content: counter(autor, decimal-leading-zero); font-size: var(--fs-caption); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
@media (min-width: 640px)  { .autores { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
@media (min-width: 1024px) { .autores { grid-template-columns: 1fr 1fr 1fr; } }

/* Índice: dentro de cada sección, los capítulos como lista numerada. */
.capitulos { list-style: none; margin: 0; padding: 0; }
.capitulos li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--s-2); padding: 6px 0; font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-body); }
.capitulos li + li { border-top: 1px solid var(--rule-soft); }
.capitulos .cap { font-family: var(--serif); font-weight: 700; color: var(--brick-deep); font-variant-numeric: tabular-nums; }
.capitulos em { display: block; font-style: normal; font-size: var(--fs-caption); color: var(--ink-mute); margin-top: 2px; }
.indice p, .continuidad p { color: var(--ink-soft); }
.continuidad .acciones { margin-top: var(--s-3); }