/* Otra lectura: diario en papel. Una columna de ~65 caracteres, claro/oscuro, sin JS.
   Referentes: The Paper Portfolio (niccolomiranda.com) y National Geographic. */

/* Fuentes servidas desde el sitio (OFL, ver fuentes/LICENSE-*.txt). */
@font-face {
  font-family: "Instrument Serif";
  src: url("fuentes/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fuentes/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "UnifrakturMaguntia";
  src: url("fuentes/unifraktur.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fuentes/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --papel: #d8d1c7;
  --papel-claro: #e2dcd3;
  --tinta: #1c1b19;
  --tenue: #57524b;
  --filete: rgba(28, 27, 25, 0.28);
  --rayado: rgba(28, 27, 25, 0.1);
  --rojo: #b3401f;           /* etiqueta "NEW" del referente */

  /* Series de gráficos: validadas para daltonismo (todos los pares) sobre el papel. */
  --s1: #2a6ac4;
  --s2: #c2451c;
  --s3: #1c8a6a;
  --gris-dato: #a39c92;

  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --gotica: "UnifrakturMaguntia", "Old English Text MT", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ~65 caracteres por línea con Manrope. */
  --medida: 34em;

  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Oscuro: solo si el lector lo elige con el botón "Leer de noche"; por defecto, claro. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --papel: #1b1a18;
  --papel-claro: #25231f;
  --tinta: #e4ddd2;
  --tenue: #a39b8f;
  --filete: rgba(228, 221, 210, 0.25);
  --rayado: rgba(228, 221, 210, 0.08);
  --rojo: #e27a57;
  --s1: #5b92e0;
  --s2: #e0663a;
  --s3: #27a07d;
  --gris-dato: #5d5850;
  --grano: none;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

/* Lo oculto con el atributo hidden no reaparece por un display del CSS. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel) var(--grano);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  font-kerning: normal;
  hyphens: auto;
  overflow-wrap: break-word;
}

main {
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: 1.1rem;
  box-sizing: content-box;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rojo); }

.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 1rem; top: 1rem; background: var(--papel); padding: 0.5rem; z-index: 2; }

/* --- Cabezote: nombre y lema centrados, y barra de secciones entre filetes --- */

header.sitio { border-bottom: 1px solid var(--tinta); }
.marca { padding: 1.7rem 1.1rem 1.4rem; text-align: center; }
.cabezote {
  font-family: var(--gotica);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.marca .lema {
  margin: 0.45rem 0 0;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tenue);
}

.barra {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.2rem;
  padding: 0 clamp(1.1rem, 3vw, 2.5rem);
  border-top: 1px solid var(--tinta);
}
.principal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.4rem, 3.5vw, 3.2rem); }
.principal a, .menu li a {
  font: 700 0.7rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.principal a { display: block; padding: 1.2rem 0; }
.principal a:hover { color: var(--rojo); }
.principal a[aria-current="page"], .menu a[aria-current="page"] { color: var(--rojo); }

.acciones {
  position: absolute;
  right: clamp(1.1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.4rem;
}
.tema, .corregir {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font: 700 0.62rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.tema:hover, .corregir:hover, .corregir[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }

/* En pantallas angostas la barra se vuelve un menú desplegable (<details>, sin JS). */
.menu { display: none; }
.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 0;
  font: 700 0.7rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.menu summary::-webkit-details-marker { display: none; }
.menu nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 0.4rem 0;
  background: var(--papel);
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a { display: block; padding: 0.85rem 1.1rem; text-align: center; }
.menu li a:hover { background: var(--tinta); color: var(--papel); }

@media (max-width: 1080px) {
  .principal { display: none; }
  .menu { display: block; }
  .barra { justify-content: flex-start; }
  .marca .lema { font-size: 0.5rem; letter-spacing: 0.24em; }
}

footer.sitio {
  margin-top: 5rem;
  padding: 2rem 1.1rem 3rem;
  border-top: 1px solid var(--tinta);
  text-align: center;
  color: var(--tenue);
}
footer.sitio p { margin: 0 auto 0.4rem; max-width: 30em; font-size: 0.8rem; }
footer.sitio .cabezote { font-size: 1.6rem; color: var(--tinta); }

/* --- Cabecera de edición e índice --- */

.cabecera { margin: 2.5rem 0 2.5rem; text-align: center; }
.cabecera .fecha {
  margin: 0 0 1.25rem;
  padding: 0.45rem 0;
  border-block: 1px solid var(--tinta);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cabecera h1 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  hyphens: manual;
  text-wrap: balance;
}
.cabecera .lugares { margin: 0 0 0.7rem; font-family: var(--serif); font-size: 1.05em; font-style: italic; color: var(--tenue); }
.cabecera .bajada { margin: 0 auto; max-width: 22em; font-family: var(--serif); font-size: 1.45em; line-height: 1.3; font-style: italic; }

.temas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.temas li { padding: 0.2rem 0.5rem; border: 1px solid var(--tinta); }
.temas li, .edicion .temas li + li { margin: 0; }

.cabecera .nota {
  margin: 1.25rem auto 0;
  max-width: 30em;
  font-size: 0.85em;
  color: var(--tenue);
}

/* --- Cuerpo --- */

.edicion p, .edicion ul, .edicion ol { margin: 0 0 0.85em; }
.edicion ul, .edicion ol { padding-left: 1.1em; }
.edicion li + li { margin-top: 0.25em; }
.edicion strong { font-weight: 700; }

/* Entrada de la edición, con capitular en recuadro negro. */
.edicion > p { font-size: 1.1em; }
.edicion > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  padding: 0.02em 0.1em 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--serif);
  font-size: 3.6em;
  line-height: 0.85;
}

/* Carril: banda negra con letra grande, como el bloque "MIDANDA". */
.edicion h2 {
  margin: 4rem 0 0;
  padding: 0.25em 0.3em 0.15em;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
}

/* Nudo: titular de diario. */
.edicion h3 {
  margin: 0 0 1.6rem;
  padding-top: 2.6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.5em;
  line-height: 1;
  letter-spacing: -0.01em;
  hyphens: manual;
  text-wrap: balance;
}
.item + .item { margin-top: 3.5rem; border-top: 1px solid var(--tinta); }
.edicion h4, .edicion h5, .edicion h6 { font-family: var(--serif); font-weight: 400; font-size: 1.4em; margin: 1.5rem 0 0.25rem; }

/* Subtítulos del nudo (Qué pasó, Contrapeso…): versalitas sans, al estilo National Geographic. */
.carril-radar .etiqueta {
  display: block;
  margin: 0 0 0.45rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Aire entre bloques: cada subtítulo abre un respiro claro. */
.carril-radar p.con-etiqueta { margin-top: 2.4rem; }
.carril-radar h3 + p.con-etiqueta { margin-top: 0; }
.edicion p.contrapeso, .edicion p.no-verificado, .edicion p.conflicto { margin-top: 2.4rem; margin-bottom: 1.6rem; }

/* Asombro: la negrita es un titular corrido. */
.carril-asombro .con-etiqueta { margin: 1.6rem 0; padding-top: 1.1rem; border-top: 1px solid var(--filete); }
.carril-asombro h2 + .con-etiqueta { border-top: 0; }
.carril-asombro .etiqueta { display: block; margin-bottom: 0.3rem; font-family: var(--serif); font-weight: 400; font-size: 1.75em; line-height: 1.05; }

/* Lo que descarté y Glosario: más pequeño, como notas al pie de página. */
.cierre h2 { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); }
.cierre ul { margin-top: 1.25rem; font-size: 0.92em; }
.cierre li { margin-top: 0.5em; }


.edicion blockquote { margin: 1.25em 0; padding-left: 1em; border-left: 2px solid var(--tinta); color: var(--tenue); }
.edicion hr { border: 0; border-top: 1px solid var(--tinta); margin: 2.5rem 0; }
.edicion table { border-collapse: collapse; width: 100%; font-size: 0.85em; display: block; overflow-x: auto; }
.edicion th, .edicion td { border-bottom: 1px solid var(--filete); padding: 0.35em 0.5em; text-align: left; }
.edicion img { max-width: 100%; height: auto; border: 1px solid var(--tinta); }

/* --- Bloques distinguidos del cuerpo --- */

/* Contrapeso: tarjeta con borde grueso y filete punteado interior, como las citas del referente. */
.edicion p.contrapeso {
  margin: 1.6rem 0;
  padding: 1.3rem 1.4rem 1.3rem;
  background: var(--papel-claro);
  border: 2px solid var(--tinta);
  border-radius: 10px;
  outline: 1px dashed var(--tinta);
  outline-offset: -9px;
}
.edicion p.contrapeso .etiqueta { margin-top: 0; }

/* No verificado: marca roja tipo sello y fondo rayado, distinto de la tarjeta de contrapeso. */
.edicion p.no-verificado {
  margin: 1.6rem 0;
  padding: 0.9rem 1.1rem 1rem;
  border-left: 3px solid var(--rojo);
  background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--rayado) 9px 10px);
}
.edicion p.no-verificado .etiqueta { margin-top: 0; }
.marca-nv {
  display: inline-block;
  padding: 0.05em 0.35em;
  background: var(--rojo);
  color: var(--papel);
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.2em;
}
.nv-tramo { text-decoration: underline dashed var(--rojo) 1.5px; text-underline-offset: 0.2em; }
.nv-tramo .marca-nv { text-decoration: none; }
/* El ")" que cierra el tramo va como texto, no como otro sello. */
.nv-tramo .marca-nv:last-child {
  padding: 0;
  background: none;
  color: var(--rojo);
  font-size: 1em;
  font-weight: 700;
  vertical-align: baseline;
}

/* Sin salida conocida y conflicto de interés: etiqueta en rojo. */
.edicion p.sin-salida .etiqueta, .edicion p.conflicto .etiqueta { color: var(--rojo); }
.edicion p.conflicto {
  padding: 0.7rem 0;
  border-block: 1px solid var(--tinta);
  font-size: 0.92em;
}
.edicion p.conflicto .etiqueta { margin-top: 0; }

/* Seguimiento: nota breve con recuadro fino. */
.item.seguimiento {
  margin-top: 2.5rem;
  padding: 0 1.2rem 0.4rem;
  border: 1px solid var(--tinta);
}
.item.seguimiento > h3 {
  padding-top: 1rem;
  font-size: 1.7em;
}
.item.seguimiento > h3::before {
  content: "Seguimiento";
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--sans);
  font-family: var(--sans);
  font-size: 0.38em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rojo);
}

/* --- Navegación e índice --- */

.entre-ediciones {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 0.8rem;
  border-top: 3px double var(--tinta);
  font-family: var(--serif);
  font-size: 1.2em;
}
.entre-ediciones a { text-decoration: none; }
.entre-ediciones a[rel="next"] { margin-left: auto; text-align: right; }

.indice { list-style: none; padding: 0; margin: 0; border-top: 3px double var(--tinta); }
.indice > li { padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--tinta); text-align: center; }
.indice .fecha {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.indice > li > a {
  display: block;
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-size: 2.4em;
  line-height: 1;
  text-decoration: none;
  text-wrap: balance;
}

@media print {
  body { background: #fff; }
  .barra, footer.sitio, .entre-ediciones { display: none; }
  .contrapeso, .no-verificado, .conflicto, .seguimiento { break-inside: avoid; }
}

/* --- Categorías --- */

.temas a { text-decoration: none; }
.temas li:has(a):hover { background: var(--tinta); color: var(--papel); }

nav.categorias { margin: 0 0 1.5rem; }
nav.categorias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
nav.categorias a { text-decoration: none; padding-bottom: 0.15rem; border-bottom: 2px solid transparent; }
nav.categorias a:hover { color: inherit; border-bottom-color: var(--tinta); }
nav.categorias a[aria-current="page"] { border-bottom-color: var(--rojo); }
nav.categorias span { color: var(--tenue); font-weight: 500; }

/* --- Actualizaciones, correcciones y aviso de revisión --- */

/* Etiqueta con fecha de actualizaciones y correcciones. */
.aviso-etiqueta {
  margin: 0 0 0.3rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo);
}

/* Actualización: nota posterior, con fondo claro y filete doble. */
.actualizacion {
  margin: 1.6rem 0 0.5rem;
  padding: 0.9rem 1.1rem 0.4rem;
  background: var(--papel-claro);
  border-left: 5px double var(--rojo);
}
.actualizacion p:last-child { margin-bottom: 0.5rem; }

.avisos .aviso-nota { color: var(--tenue); font-size: 0.9em; margin-top: 1.25rem; }
.correcciones { padding-left: 1.2em; }
.correcciones li { margin-top: 0.9em; }

/* En la cabecera y el índice: la edición cambió después de publicarse. */
.aviso-cambios {
  display: inline-block;
  margin: 0.9rem 0 0;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--rojo);
  color: var(--rojo);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.aviso-cambios a { color: inherit; }
.indice .aviso-cambios { margin: 0 0 0.8rem; }

/* Seguimiento: enlaces a las ediciones donde se trató antes el tema. */
.seguimiento-de {
  margin: 1.1rem auto 0;
  max-width: 28em;
  font-family: var(--sans);
  font-size: 0.8rem;
}
.seguimiento-de p {
  margin: 0 0 0.3rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
}
.seguimiento-de ul { list-style: none; margin: 0; padding: 0; }
.seguimiento-de span { font-weight: 700; }

/* Fuentes numeradas. */
.fuentes ol { font-size: 0.85em; padding-left: 1.8em; }
.fuentes li { margin-top: 0.35em; overflow-wrap: anywhere; }
.fuentes .medio { font-weight: 700; }

/* --- Glosario flotante --- */

.glosario-flotante { display: none; }
.glosario-boton {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  padding: 0.5rem 0.8rem;
  background: var(--tinta);
  color: var(--papel);
  font: 800 0.66rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.glosario-boton:hover { color: var(--papel); background: var(--rojo); }

@media (min-width: 1240px) {
  .glosario-boton { display: none; }
  .glosario-flotante {
    display: block;
    position: fixed;
    top: 10.5rem;
    right: 1.5rem;
    z-index: 3;
    width: 14rem;
    max-height: calc(100vh - 15rem); /* deja lugar al botón "Arriba" */
    overflow-y: auto;
    padding: 0.8rem 0.9rem;
    background: var(--papel);
    border: 1px solid var(--tinta);
    font-size: 0.78rem;
    line-height: 1.45;
  }
  .glosario-flotante summary {
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .glosario-flotante dl { margin: 0.6rem 0 0; }
  .glosario-flotante dt { margin-top: 0.6rem; font-weight: 700; }
  .glosario-flotante dd { margin: 0.1rem 0 0; color: var(--tenue); }
}

/* --- Candidatas --- */

.candidatas-resumen { text-align: center; color: var(--tenue); font-size: 0.85em; }
.candidatas-resumen code { font-size: 0.95em; }
.candidatas .idea { margin: 0 0 0.4rem; font-family: var(--serif); font-size: 1.7em; line-height: 1.1; }
.candidatas .origen { margin: 0; font-size: 0.85em; color: var(--tenue); }
.estado {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--tinta);
  color: var(--tinta);
}
.estado-activa { background: var(--tinta); color: var(--papel); }
.estado-descartada { opacity: 0.55; text-decoration: line-through; }
.estado-evaluada { border-style: dashed; }

footer.sitio .pie-enlaces { font-family: var(--sans); }

@media print {
  .glosario-flotante, .glosario-boton { display: none !important; }
}

/* Explicación bajo la banda de cada carril. */
.edicion .carril-bajada {
  margin: 0.7rem 0 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15em;
  color: var(--tenue);
}
.carril-asombro .carril-bajada + .con-etiqueta { border-top: 0; }

/* --- Portada limpia: epígrafe --- */

.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Portada: la frase, qué es esto y una guía para bajar a la edición del día. */
.portada {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(78svh, 46rem);
  margin: 0 0 3rem;
  padding: 3rem 0;
}
.epigrafe { margin: 0; text-align: center; }
.epigrafe blockquote { margin: 0; padding: 0; border: 0; }
.epigrafe blockquote p {
  margin: 0 auto;
  max-width: 24em;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  line-height: 1.22;
  color: var(--tinta);
  text-wrap: balance;
}
.epigrafe figcaption {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: 1.05em;
  color: var(--tenue);
}
.epigrafe cite { margin-left: 0.6em; font-style: italic; }
.portada-intro {
  max-width: 30em;
  margin: 2.6rem auto 0;
  text-align: center;
  font: 400 1rem/1.6 var(--sans);
  color: var(--tenue);
  text-wrap: pretty;
}
.portada-intro a { color: var(--tinta); }
.portada-guia { margin: 2.2rem 0 0; text-align: center; }
.portada-guia a {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--tinta);
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
}
.portada-guia a:hover { background: var(--tinta); color: var(--papel); }
.hoy { scroll-margin-top: 4rem; }
/* En la portada, el titular de la edición un escalón por debajo de la frase. */
.hoy .indice > li > a.dia-titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }

/* Índice con más aire. */
.indice > li { padding: 2.2rem 0 2.3rem; }
.frase-sitio {
  margin: 2.6rem auto 0;
  max-width: 26em;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filete);
  text-align: center;
  color: var(--tenue);
  font-size: 0.95em;
}

/* Desarrollo de cada candidata: qué resolvería, cómo, por dónde empezar, entregable. */
.candidatas > li { text-align: center; }
.candidata-detalle { margin: 1.6rem auto 0; max-width: 34em; text-align: left; font-size: 0.95em; }
.candidata-detalle .etiqueta {
  display: block;
  margin: 1.3rem 0 0.25rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.candidata-detalle ol { padding-left: 1.3em; }

/* --- Gráficos (scripts/graficos.py) --- */

.grafico { margin: 2.2rem 0; padding: 1.1rem 0 0.4rem; border-top: 1px solid var(--tinta); }
.grafico figcaption { margin-bottom: 1rem; }
.grafico figcaption strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35em; line-height: 1.15; }
.grafico .g-sub { display: block; margin-top: 0.2rem; color: var(--tenue); font-size: 0.85em; }
.g-fuente, .g-nota { margin: 0.8rem 0 0.4rem; color: var(--tenue); font-size: 0.78em; }
.g-nota { margin-top: 0.4rem; }

/* Colores por serie: la marca lleva el color; el texto, nunca. */
.g-s1 { --c: var(--s1); }
.g-s2 { --c: var(--s2); }
.g-s3 { --c: var(--s3); }
.g-gris { --c: var(--gris-dato); }

/* Barras y puntos: filas en HTML. */
.g-filas { display: grid; gap: 0.35rem; }
.g-fila {
  display: grid;
  grid-template-columns: minmax(6rem, 30%) 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.15rem 0;
  font-size: 0.85em;
  outline-offset: 2px;
}
.g-etq { text-align: right; line-height: 1.25; }
.g-val { min-width: 4.5em; font-variant-numeric: tabular-nums; color: var(--tenue); }
.g-pista { position: relative; height: 24px; display: flex; align-items: center; }
.g-barra { height: 14px; background: var(--c); border-radius: 0 4px 4px 0; min-width: 2px; }
.g-fila:hover .g-barra, .g-fila:focus .g-barra { filter: brightness(1.12); }
.g-regla { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--filete); }
.g-punto {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--papel);
}
.g-fila:hover .g-punto, .g-fila:focus .g-punto { transform: scale(1.25); }
.g-eje { font-size: 0.72em; color: var(--tenue); }
.g-eje .g-pista { height: 1.2em; }
.g-eje .g-pista span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 560px) {
  .g-fila { grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem; }
  .g-etq { grid-column: 1 / -1; text-align: left; }
  .g-eje .g-etq, .g-eje > span:first-child { display: none; }
}

/* Columnas y líneas: SVG. */
.g-svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-svg text { font-family: var(--sans); font-size: 11px; fill: var(--tinta); }
.g-svg .g-tick { fill: var(--tenue); font-size: 10px; }
.g-svg .g-cap { font-weight: 700; }
.g-grid { stroke: var(--filete); stroke-width: 1; }
.g-svg path { fill: var(--c); }
.g-linea { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-fin { fill: var(--c); stroke: var(--papel); stroke-width: 2; }
.g-guia { stroke: var(--tenue); stroke-width: 0.75; }
.g-hit { fill: transparent; }
.g-cruz { stroke: var(--tinta); stroke-width: 1; opacity: 0; }
.g-marca:hover .g-cruz, .g-marca:focus .g-cruz { opacity: 0.5; }
.g-marca:hover path, .g-marca:focus path { filter: brightness(1.12); }
.g-marca:focus { outline: none; }

.g-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0 0 0.6rem; padding: 0; font-size: 0.8em; }
.g-leyenda li { display: flex; align-items: center; gap: 0.4rem; }
.g-clave { width: 16px; height: 2px; background: var(--c); }

/* Tabla de datos. */
.g-tabla { margin-top: 0.3rem; font-size: 0.8em; }
.g-tabla summary { cursor: pointer; color: var(--tenue); font-family: var(--sans); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85em; }
.g-tabla table { display: table; margin-top: 0.6rem; font-variant-numeric: tabular-nums; }

/* Tooltip (lo agrega el JavaScript de la plantilla). */
.g-tip {
  position: fixed;
  z-index: 20;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  background: var(--tinta);
  color: var(--papel);
  font: 400 0.78rem/1.4 var(--sans);
  white-space: pre-line;
  pointer-events: none;
}
.g-tip::first-line { font-weight: 800; font-size: 1.1em; }
@media print { .g-tabla { display: none; } }
/* Primera y última marca del eje, hacia adentro para no salirse. */
.g-eje .g-pista span:first-child { transform: none; }
.g-eje .g-pista span:last-child { transform: translateX(-100%); }
@media (max-width: 560px) {
  .g-svg text { font-size: 15px; }
  .g-svg .g-tick { font-size: 13px; }
  .g-svg .g-nombre { display: none; }
}

/* Páginas de texto (Cómo se usa, ¿Qué es esto?). */
.texto h2 {
  margin: 2.6rem 0 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tinta);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1.1;
}
.texto p, .texto ul, .texto ol { margin: 0 0 0.9em; }
.texto li + li { margin-top: 0.45em; }

/* --- Barra fija al bajar: solo el logotipo, pequeño --- */

.barra-fija {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.7rem;
  background: var(--papel);
  border-bottom: 1px solid var(--tinta);
  transform: translateY(-105%);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.barra-fija .cabezote { font-size: 1.35rem; }
.bajando .barra-fija { transform: none; pointer-events: auto; }
/* Sin JavaScript la barra nunca aparece. */
html:not(.js) .barra-fija { display: none; }

/* --- Volver arriba --- */

.arriba {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  font: 800 0.66rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.bajando .arriba { opacity: 1; visibility: visible; }
.arriba:hover, .arriba:focus-visible { background: var(--tinta); color: var(--papel); }
/* En pantallas angostas, encima del botón del glosario. */
@media (max-width: 1239px) {
  body:has(.glosario-boton) .arriba { bottom: 3.6rem; }
}
@media (min-width: 1240px) {
  .arriba { right: 1.5rem; bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-fija, .arriba { transition: none; }
}

/* --- Portada del día y días anteriores --- */

.dia-fecha {
  margin: 0 0 1rem;
  text-align: center;
  font: 700 0.66rem/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo);
}
.indice > li > a.dia-titulo { margin-bottom: 1.1rem; }
.dia-temas {
  list-style: none;
  max-width: 30em;
  margin: 0 auto;
  padding: 0;
  font-size: 0.92em;
}
.dia-temas li { padding: 0.5rem 0; border-top: 1px solid var(--filete); }
.dia-temas a { text-decoration: none; }
.dia-temas a:hover { color: var(--rojo); }
.dias-anteriores {
  margin: 2rem 0 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.35em;
}
.dias-anteriores a { text-decoration: none; }

.ir-fecha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  gap: 0.6rem;
  margin: 0 0 2.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
}
.ir-fecha label { display: grid; gap: 0.3rem; color: var(--tenue); }
.ir-fecha input, .ir-fecha button {
  min-height: 2.6rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 600 0.9rem/1 var(--sans);
}
.ir-fecha button { background: var(--tinta); color: var(--papel); cursor: pointer; }
.ir-fecha-estado { flex-basis: 100%; margin: 0; text-align: center; color: var(--rojo); }
.ir-fecha-estado:empty { display: none; }

.archivo-mes { margin: 0 0 2.8rem; }
.archivo-mes h2 {
  margin: 0 0 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px double var(--tinta);
  font: 400 1.9em/1.1 var(--serif);
  text-align: center;
}
.archivo-dias { list-style: none; margin: 0; padding: 0; }
.archivo-dias li { padding: 1rem 0; border-bottom: 1px solid var(--filete); }
.archivo-dias > li > a { font-family: var(--serif); font-size: 1.35em; text-decoration: none; }
.archivo-dias > li > a:hover { color: var(--rojo); }
.archivo-temas { margin: 0.3rem 0 0; color: var(--tenue); font-size: 0.88em; }

@media print {
  .barra-fija, .arriba, .escuchar { display: none !important; }
}
@media (max-width: 480px) {
  .sonando .escuchar { flex-wrap: nowrap; gap: 0.4rem; }
  .sonando .escuchar-rotulo { display: none; }
  .sonando .escuchar button, .sonando .escuchar select { padding-inline: 0.6rem; }
}

/* --- Celular: letra más contenida (lectura cómoda, titulares que no gritan) --- */
@media (max-width: 600px) {
  body { font-size: 1.125rem; line-height: 1.65; }
  .edicion > p { font-size: 1em; }
  .cabecera { margin: 2rem 0; }
  .cabecera h1 { font-size: 1.75rem; line-height: 1.1; }
  .cabecera .bajada { font-size: 1.2em; }
  .epigrafe blockquote p { font-size: 1.75rem; }
  .portada-intro { font-size: 0.9rem; }
  .portada { min-height: 70svh; }
  .indice > li { padding: 1.6rem 0 1.7rem; }
  .indice > li > a { font-size: 1.75em; line-height: 1.1; }
  .dia-temas { font-size: 0.9em; }
  .dias-anteriores { font-size: 1.2em; }
  .edicion h2 { font-size: 1.7rem; margin-top: 3rem; }
  .edicion h3 { font-size: 1.8em; line-height: 1.08; }
  .edicion h4, .edicion h5, .edicion h6 { font-size: 1.2em; }
  .carril-asombro .etiqueta { font-size: 1.4em; }
  .archivo-mes h2 { font-size: 1.6em; }
  .archivo-dias > li > a { font-size: 1.2em; }
  .candidatas .idea { font-size: 1.4em; }
  .entre-ediciones { font-size: 1.05em; }
}
.escuchar-voz { max-width: 13em; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .sonando .escuchar-voces { display: none; }
}

/* --- En tres minutos (arriba) y Para conversar (al final del Radar/Asombro) --- */

.edicion .en-breve, .edicion .conversar, .edicion .decide {
  margin: 2.5rem 0;
  padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid var(--tinta);
  background: var(--papel-claro);
}
.edicion .en-breve h2, .edicion .conversar h2, .edicion .decide h2 {
  margin: 0 0 0.8rem;
  padding: 0;
  background: none;
  color: var(--rojo);
  font: 800 0.72rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-align: left;
}
.en-breve ul, .en-breve ol, .conversar ul, .conversar ol { margin: 0; padding-left: 1.2em; }
.en-breve li, .conversar li { margin: 0 0 0.6em; }
.en-breve p, .conversar p, .decide p { margin: 0 0 0.7em; }
/* Quién decide y cuándo: recuadro sobrio, con filete rojo a la izquierda. */
.edicion .decide { border-left: 4px solid var(--rojo); }
.conversar { border-style: double; border-width: 3px; }
.conversar .etiqueta, .decide .etiqueta {
  display: block;
  margin: 0.9rem 0 0.25rem;
  font: 800 0.7rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.conversar p:first-of-type .etiqueta, .decide p:first-of-type .etiqueta { margin-top: 0; }
@media (max-width: 600px) {
  .edicion .en-breve, .edicion .conversar, .edicion .decide { padding: 1rem 1rem 0.8rem; margin-inline: -0.25rem; }
}

/* --- Temas que seguimos (hilos) --- */

.hilo-enlace { margin: -0.3rem 0 1rem; font: 700 0.72rem/1.4 var(--sans); letter-spacing: 0.06em; }
.hilo-enlace a { color: var(--rojo); text-decoration: none; }
.hilo-enlace a:hover { text-decoration: underline; }
.hilo { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--tinta); }
.hilo li { position: relative; margin: 0 0 1.8rem; }
.hilo li::before {
  content: "";
  position: absolute;
  left: calc(-1.4rem - 6px);
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--tinta);
}
.hilo li.hilo-primera-vez::before { background: var(--tinta); }
.hilo .fecha {
  margin: 0 0 0.3rem;
  font: 700 0.66rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.hilo p { margin: 0; }
.hilo li > p:last-child a { font-family: var(--serif); font-size: 1.35em; line-height: 1.15; text-decoration: none; }
.temas-seguidos { margin: 0 0 2.8rem; }
.temas-seguidos h2 {
  margin: 0 0 0.6rem;
  font: 800 0.72rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rojo);
}
.temas-seguidos ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.temas-seguidos li { padding: 0.8rem 0; border-bottom: 1px solid var(--filete); text-align: center; }
.temas-seguidos a { font-family: var(--serif); font-size: 1.3em; text-decoration: none; }
.temas-seguidos span { display: block; color: var(--tenue); font-size: 0.8em; }

/* --- Cierre plegado (fuentes, nota metodológica) --- */

.plegable details > summary { list-style: none; cursor: pointer; }
.plegable details > summary::-webkit-details-marker { display: none; }
.plegable h2 { position: relative; }
.plegable h2::after { content: " +"; }
.plegable details[open] h2::after { content: " −"; }

/* Cierre en voz baja: después de Para conversar no hay nada que grite.
   Fuentes en un recuadro («¿Le interesa ver las fuentes?»); glosario y
   nota como líneas discretas. */
.edicion .plegable { margin-top: 1.2rem; }
.edicion .plegable h2 {
  margin: 0;
  padding: 0.3rem 0;
  background: none;
  color: var(--tenue);
  font: 600 0.9rem/1.35 var(--sans);
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
}
.edicion .fuentes.plegable {
  margin-top: 3rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--filete);
  border-radius: 4px;
}
.edicion .fuentes.plegable h2 { color: var(--tinta); font-size: 1rem; }
.edicion .plegable details[open] h2 { margin-bottom: 0.6rem; }

/* --- Siguiente lectura --- */

.siguiente {
  margin: 3.5rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 3px double var(--tinta);
  text-align: center;
}
.siguiente-pregunta {
  margin: 0 0 0.8rem;
  font: 400 1.25em/1.3 var(--serif);
  font-style: italic;
  color: var(--tenue);
}
.siguiente-rotulo {
  margin: 0 0 0.6rem;
  font: 800 0.68rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo);
}
.siguiente-titulo {
  display: block;
  margin: 0 0 0.5rem;
  font: 400 2em/1.08 var(--serif);
  text-decoration: none;
  text-wrap: balance;
}
.siguiente .fecha {
  margin: 0 0 0.8rem;
  font: 700 0.64rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.tambien { margin-top: 2rem; }
.tambien ul { list-style: none; margin: 0; padding: 0; }
.tambien li { padding: 0.6rem 0; border-top: 1px solid var(--filete); }
.tambien a { font-family: var(--serif); font-size: 1.2em; text-decoration: none; }
.tambien span { display: block; color: var(--tenue); font-size: 0.78em; }
@media (max-width: 600px) { .siguiente-titulo { font-size: 1.6em; } }

/* --- En tres minutos: en la portada y accesos directos --- */

.breve-portada {
  max-width: 32em;
  margin: 0.4rem auto 0;
  padding: 1rem 1.2rem 0.6rem;
  border: 1px solid var(--tinta);
  background: var(--papel-claro);
  text-align: left;
}
.breve-rotulo {
  margin: 0 0 0.6rem;
  font: 800 0.7rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rojo);
}
.breve-portada ul { margin: 0; padding-left: 1.1em; font-size: 0.95em; }
.breve-portada li { margin: 0 0 0.6em; }
.breve-mas { margin: 0.8rem 0 0.4rem; text-align: center; font: 700 0.78rem/1.3 var(--sans); }
.breve-mas a { text-decoration: none; border-bottom: 1px solid currentColor; }
.atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.2rem 0 0; }
.atajos a {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--tinta);
  font: 700 0.74rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.atajos a:first-child { background: var(--tinta); color: var(--papel); }
.atajos a:hover { background: var(--rojo); border-color: var(--rojo); color: var(--papel); }
.barra-resumen {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font: 800 0.66rem/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
#en-tres-minutos, #para-conversar { scroll-margin-top: 4rem; }

/* --- Cerrar el glosario --- */
.cerrar-panel {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.3rem/1 var(--sans);
  cursor: pointer;
}
.cerrar-panel:hover { background: var(--tinta); color: var(--papel); }
.glosario-flotante:not(:has(details[open])) .cerrar-panel { display: none; }


/* Fin de la edición */
.fin-edicion { max-width: var(--medida); margin: 3.5rem auto 0; text-align: center; font: 400 1.6em/1.2 var(--serif); font-style: italic; color: var(--tenue); }
.otros-temas { margin: 1.4rem 0 0; font: 700 0.78rem/1.3 var(--sans); letter-spacing: 0.04em; }
.otros-temas a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Índice de la edición (en la cabecera) */
.indice-edicion { max-width: 30em; margin: 1.4rem auto 0; text-align: left; }
.indice-edicion p {
  margin: 0 0 0.4rem;
  font: 800 0.68rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: center;
}
.indice-edicion ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.indice-edicion li { border-bottom: 1px solid var(--filete); }
.indice-edicion a { display: block; padding: 0.5rem 0; font-size: 0.92em; text-decoration: none; text-align: center; }
.indice-edicion a:hover { color: var(--rojo); }
#para-conversar, .edicion article.item { scroll-margin-top: 4rem; }

/* Candidatas: archivo de cruces con Mattriz */
.cruces { max-width: var(--medida); margin: 3.5rem auto 0; }
.cruces h2 { margin: 0 0 0.5rem; font: 400 1.8em/1.1 var(--serif); text-align: center; }
.cruces-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 3px double var(--tinta); }
.cruces-lista li { padding: 1rem 0; border-bottom: 1px solid var(--filete); }
.cruces-lista .origen { margin: 0 0 0.3rem; font-size: 0.85em; color: var(--tenue); }
.cruces-lista p { margin: 0; }

/* Tipo de cada fuente */
.fuentes-resumen { margin: 1rem 0 0.4rem; font-size: 0.85em; color: var(--tenue); }
.tipo-fuente {
  display: inline-block;
  margin-right: 0.3em;
  padding: 0 0.35em;
  border: 1px solid var(--filete);
  font: 700 0.62rem/1.6 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
  vertical-align: 0.1em;
}
.tipo-academica, .tipo-datos { border-color: var(--tinta); color: var(--tinta); }

/* Sin palabras sueltas en un renglón: títulos y listas cortas se reparten
   parejo; los párrafos evitan dejar una sola palabra al final. */
h1, h2, h3, h4, summary, figcaption, .dia-titulo, .indice-edicion li, .dia-temas li,
.indice li, .siguiente-titulo, .archivo-temas, .portada-intro { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }

/* Ícono del botón de noche/día. */
.tema { display: inline-flex; align-items: center; gap: 0.45em; }
.tema-icono { width: 1.15em; height: 1.15em; flex: none; }

/* La paradoja del día: lo absurdo de la edición, en dos o tres líneas. */
.edicion .paradoja {
  margin: 3rem auto;
  max-width: 34em;
  padding: 1.6rem 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  text-align: center;
}
.edicion .paradoja h2 {
  margin: 0 0 0.9rem;
  padding: 0;
  background: none;
  color: var(--rojo);
  font: 800 0.72rem/1.3 var(--sans);
  letter-spacing: 0.16em;
}
.edicion .paradoja p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35em;
  line-height: 1.35;
  font-style: italic;
  text-wrap: balance;
}

/* --- Corregir: el texto se edita como un documento --- */

.editable { cursor: text; border-radius: 2px; }
.editable:focus { outline: none; background: var(--papel-claro); box-shadow: 0 0 0 0.3rem var(--papel-claro); }
.editable::selection, .editable *::selection { background: rgba(179, 64, 31, 0.25); }
.editado { box-shadow: -0.6rem 0 0 -0.4rem var(--s3); }
.editado:focus { box-shadow: 0 0 0 0.3rem var(--papel-claro), -0.6rem 0 0 -0.4rem var(--s3); }
.guardado {
  position: fixed;
  left: 50%;
  bottom: 0.8rem;
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
  width: max-content;
  max-width: calc(100vw - 1.2rem);
  padding: 0.45rem 0.7rem;
  background: var(--tinta);
  color: var(--papel);
  font: 600 0.78rem/1.3 var(--sans);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.guardado button {
  min-height: 2.2rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--papel);
  border-radius: 0;
  background: none;
  color: var(--papel);
  font: 700 0.66rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.guardado .guardado-ya { background: var(--papel); color: var(--tinta); }
.guardado-cred { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.guardado-cred input {
  width: 8.5rem;
  min-height: 2.2rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 1rem var(--sans);
}
@media print { .guardado { display: none !important; } }

.guardado[hidden] { display: none; }
.guardado button[hidden], .guardado-cred[hidden] { display: none; }
.corrigiendo .arriba, .corrigiendo .glosario-boton { visibility: hidden; }
.corrigiendo main { padding-bottom: 5rem; }

/* --- Seguimiento de decisiones --- */
.decisiones { list-style: none; margin: 0; padding: 0; }
.decision { margin: 0 0 1.1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--filete); }
.decision:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.decision p { margin: 0 0 0.35rem; }
.decision-estado { font: 700 0.72rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); }
.decision-estado .estado { display: inline-block; margin-right: 0.3rem; padding: 0.1rem 0.45rem; border: 1px solid currentColor; color: var(--tinta); }
.decision-vencida .estado { color: var(--rojo); }
.decision-tomada .estado { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.decision-nota, .decision-origen { font-size: 0.9em; color: var(--tenue); }
.decision-seguimiento { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--filete); }
.decision-rotulo { margin: 0 0 0.6rem; font: 800 0.68rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); }
.decision-mas { margin: 0.6rem 0 0; font-size: 0.85em; }
.decisiones-grupo { max-width: var(--medida); margin: 0 auto 2.5rem; }
.decisiones-grupo h2 { font: 800 0.75rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); border-bottom: 1px solid var(--tinta); padding-bottom: 0.4rem; margin: 0 0 1rem; }
.edicion .decisiones { padding-left: 0; margin-left: 0; } .edicion .decision { list-style: none; }

/* --- Dos lecturas: cada postura en su mejor versión, lado a lado --- */
.edicion .lecturas { margin: 2.5rem 0; }
.edicion .lecturas h2 {
  margin: 0 0 1rem; padding: 0; background: none; color: var(--rojo);
  font: 800 0.72rem/1.3 var(--sans); letter-spacing: 0.16em; text-align: center;
}
.edicion .lecturas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
.edicion .lecturas h2 { grid-column: 1 / -1; }
.edicion .lecturas p { margin: 0; padding: 1rem 0 0; border-top: 3px solid var(--tinta); }
.edicion .lecturas .etiqueta { display: block; margin-bottom: 0.3rem; font: 800 0.7rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 600px) {
  .edicion .lecturas { grid-template-columns: 1fr; gap: 1.2rem; }
}