/*
  Pantalla Capital, hoja de estilo única.

  Design read: medio de la industria de medios y la conversación pública de la CDMX; revista digital de lectura,
  sobria y moderna, con motion narrativo contenido. HTML estático + CSS nativo + JS propio (pantalla.js), sin
  dependencias ni terceros.

  Dials
    DESIGN_VARIANCE  6  portada asimétrica de revista (apertura 7/5, franjas a/b/c), sin romper la lectura
    MOTION_INTENSITY 5  titular palabra por palabra, entrada y filete de acento, piezas que suben al entrar al
                        viewport (una vez), barra de avance de lectura y sección activa; nada en bucle
    VISUAL_DENSITY   4  aire de revista: menos piezas por pantalla que un diario, más tamaño de titular

  Tipografía: Newsreader (titulares y lectura, serif de publicación), Geist (interfaz), Geist Mono (fechas y
  metadatos). Autoalojadas, OFL en assets/fonts/.

  Color: monocromo frío (zinc) con un solo acento, bermellón quemado: remite a la luz de "al aire" de un foro de
  televisión y a la tinta de imprenta de la publicidad, sin llegar al rojo de alarma. Mismos tokens en claro y
  oscuro (prefers-color-scheme). Contraste WCAG 2.x medido:
    claro   texto #121417 sobre #F4F5F5 16.9:1 · texto-2 #3F444B 9.0:1 · tenue #5E646C 5.5:1 (4.9:1 en superficie)
            acento #B23C0B 5.4:1 (4.9:1 en superficie) · #F4F5F5 sobre acento 5.4:1
    oscuro  texto #ECEDEE sobre #101113 16.1:1 · texto-2 #B9BDC3 10.0:1 · tenue #8D939B 6.1:1 (5.6:1 en superficie)
            acento #F08A55 7.6:1 (7.0:1 en superficie) · #101113 sobre acento 7.6:1

  Forma: esquinas rectas en todo (radio 0). Filetes de 1 px para agrupar; filete grueso de 3 px en la tinta para
  abrir bloques. Sin sombras, sin vidrio, sin degradados.

  Capas (z-index): 10 cabezal fijo · 20 barra de avance · 30 "Ir al contenido".
*/

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --c-fondo: #F4F5F5;
  --c-superficie: #E8EAEA;
  --c-texto: #121417;
  --c-texto-2: #3F444B;
  --c-tenue: #5E646C;
  --c-regla: rgba(18, 20, 23, .14);
  --c-regla-fuerte: #121417;
  --c-acento: #B23C0B;
  --c-sobre-acento: #F4F5F5;
  --c-velo: rgba(18, 20, 23, .04);

  --f-titular: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --f-interfaz: "Geist", "Segoe UI", system-ui, sans-serif;
  --f-dato: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --margen: clamp(1rem, 3.2vw, 2.5rem);
  --ancho: min(100% - 2 * var(--margen), 84rem);
  --hueco: clamp(1.25rem, 2.4vw, 2.25rem);
  --tramo: clamp(3rem, 7vw, 6rem);
  --lectura: 40rem;
  --curva: cubic-bezier(.2, .7, .1, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-fondo: #101113;
    --c-superficie: #191B1E;
    --c-texto: #ECEDEE;
    --c-texto-2: #B9BDC3;
    --c-tenue: #8D939B;
    --c-regla: rgba(236, 237, 238, .14);
    --c-regla-fuerte: #ECEDEE;
    --c-acento: #F08A55;
    --c-sobre-acento: #101113;
    --c-velo: rgba(236, 237, 238, .04);
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--c-fondo);
  color: var(--c-texto);
  font: 400 1rem/1.5 var(--f-interfaz);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: block; }
main:focus { outline: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-acento); outline-offset: 3px;
}
::selection { background: var(--c-acento); color: var(--c-sobre-acento); }
time { font-variant-numeric: tabular-nums; }

.atajo {
  position: absolute; left: var(--margen); top: .5rem; z-index: 30;
  padding: .6rem 1rem; background: var(--c-texto); color: var(--c-fondo);
  font: 600 .875rem/1 var(--f-interfaz);
  transform: translateY(-200%);
}
.atajo:focus { transform: none; }

.ensayo {
  margin: 0; padding: .55rem var(--margen);
  background: var(--c-texto); color: var(--c-fondo);
  font: 500 .8125rem/1.3 var(--f-dato); text-align: center;
}

/* bloques de primer nivel: mismo ancho y margen */
.rotulo, .apertura, .contiguas, .firmas__marco, .series, .franja, .minuto, .cobertura, .articulo, .vecinas,
.portadilla, .portadilla__cuerpo, .perfil, .mas-secciones, .buscador {
  width: var(--ancho); margin-inline: auto;
}

/* ---------- piezas de texto compartidas ---------- */

.rubro {
  display: inline-block;
  font: 600 .8125rem/1.2 var(--f-interfaz);
  letter-spacing: .01em;
  color: var(--c-acento);
}
.rubro:hover { text-decoration: underline; text-underline-offset: .2em; }
.rubro--serie { color: var(--c-texto-2); margin-left: .9rem; padding-left: .9rem; border-left: 1px solid var(--c-regla); }

.titulillo {
  font: 600 1.375rem/1.15 var(--f-titular);
  font-variation-settings: "opsz" 36;
  letter-spacing: -.01em;
  padding-top: .7rem;
  border-top: 3px solid var(--c-regla-fuerte);
}
.titulillo a:hover { color: var(--c-acento); }

.linea {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem;
  font: 400 .8125rem/1.35 var(--f-interfaz);
  color: var(--c-tenue);
}
.linea__fecha, .linea__extra { font: 400 .75rem/1.35 var(--f-dato); }
.linea__extra:empty { display: none; }
.linea__firma { color: var(--c-texto-2); }
.autoria { font-weight: 600; color: var(--c-texto); }
.autoria:hover { color: var(--c-acento); }

.atribucion:empty { display: none; }
.atribucion { font: 600 .8125em/1 var(--f-interfaz); color: var(--c-texto-2); }
.atribucion::after { content: ": "; }

.migas { display: flex; flex-wrap: wrap; gap: .3rem; font: 400 .8125rem/1.3 var(--f-interfaz); color: var(--c-tenue); }
.migas li + li::before { content: "/"; margin-right: .3rem; color: var(--c-regla); }
.migas a:hover { color: var(--c-texto); }

.flechita {
  display: inline-block; width: .55em; height: .55em; margin-left: .45em;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.08em);
  transition: transform .25s var(--curva);
}

/* ---------- figura ---------- */

.visual { display: grid; gap: .4rem; }
.visual__marco { overflow: hidden; background: var(--c-superficie); aspect-ratio: 3 / 2; }
.visual__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.visual__credito { font: 400 .6875rem/1.3 var(--f-dato); color: var(--c-tenue); }
.visual__credito:empty { display: none; }

/* ---------- cabezal ---------- */

.cabezal {
  position: sticky; top: 0; z-index: 10;
  background: var(--c-fondo);
  border-bottom: 1px solid var(--c-regla);
}
.cabezal__marco {
  width: var(--ancho); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 3.5rem;
}
.cabezal__sigla { display: inline-flex; align-items: center; gap: .6rem; flex: none; transition: opacity .3s var(--curva), transform .3s var(--curva); }
.cabezal__nombre { font: 600 1.125rem/1 var(--f-titular); font-variation-settings: "opsz" 24; letter-spacing: -.01em; }

.monograma { display: block; flex: none; }
.monograma__fondo { fill: var(--c-texto); }
.monograma__trazo { fill: none; stroke: var(--c-fondo); stroke-width: 5; stroke-linecap: square; }
.monograma__barra { fill: var(--c-acento); }

.indice { min-width: 0; flex: 1; display: flex; justify-content: flex-end; }
.indice__lista {
  display: flex; gap: clamp(.9rem, 1.8vw, 1.6rem);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.indice__lista::-webkit-scrollbar { display: none; }
.indice__lista li { flex: none; scroll-snap-align: start; }
.indice__enlace {
  position: relative; display: block; padding: 1.15rem 0 1.05rem;
  font: 500 .875rem/1 var(--f-interfaz); color: var(--c-texto-2); white-space: nowrap;
}
.indice__enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-acento); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--curva);
}
.indice__enlace:hover, .indice__enlace[aria-current], .indice__enlace.es-activa { color: var(--c-texto); }
.indice__enlace:hover::after, .indice__enlace[aria-current]::after, .indice__enlace.es-activa::after { transform: scaleX(1); }

.cabezal__buscar {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-right: -.6rem;
  color: var(--c-texto-2); transition: color .2s var(--curva);
}
.cabezal__buscar:hover, .vista--search .cabezal__buscar { color: var(--c-acento); }
.lupa { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }

@media (max-width: 63.99em) {  /* 7 secciones + lupa: el índice se desliza con un desvanecido al borde */
  .indice__lista {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 2rem;
  }
}
@media (max-width: 47.99em) {
  .cabezal__nombre { display: none; }
  .indice { justify-content: flex-start; }
}

/* ---------- portada: rótulo ---------- */

.rotulo { padding-top: clamp(1.25rem, 3vw, 2.5rem); padding-bottom: clamp(1rem, 2.4vw, 2rem); display: grid; gap: .6rem; }
.rotulo__nombre {
  font: 600 clamp(3.1rem, 10.4vw, 9.5rem)/.86 var(--f-titular);
  padding-bottom: .12em;
  font-variation-settings: "opsz" 72;
  letter-spacing: -.045em;
  margin-left: -.04em;
}
.rotulo__fecha { font: 400 .75rem/1 var(--f-dato); color: var(--c-tenue); padding-top: .8rem; border-top: 1px solid var(--c-regla); }

/* sin JS el nombre corto queda visible; con JS se muestra cuando el rótulo sale de pantalla */
[data-js] .vista--front .cabezal__nombre { opacity: 0; }
[data-js] .vista--front .cabezal[data-compacto] .cabezal__nombre { opacity: 1; }
.cabezal__nombre { transition: opacity .3s var(--curva); }

/* ---------- portada: apertura ---------- */

.apertura {
  display: grid; gap: var(--hueco);
  padding-bottom: var(--tramo);
}
.apertura .visual__marco { aspect-ratio: 3 / 2; }
.apertura__texto { display: grid; gap: 1rem; align-content: start; position: relative; padding-top: 1rem; }
.apertura__texto::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c-acento); transform-origin: left;
}
.apertura__titular {
  font: 560 clamp(2rem, 3.5vw, 3.35rem)/1.04 var(--f-titular);
  font-variation-settings: "opsz" 60;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.apertura__titular a:hover { color: var(--c-acento); }
.apertura__entrada {
  font: 400 clamp(1.0625rem, 1.3vw, 1.1875rem)/1.5 var(--f-titular);
  color: var(--c-texto-2); max-width: 34rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.apertura[data-tipo="note"] .linea { padding-top: .2rem; }

@media (min-width: 64em) {
  .apertura { grid-template-columns: 7fr 5fr; align-items: start; }
  .apertura .visual__marco { aspect-ratio: 16 / 10; }
  .apertura__texto { padding-top: 1.25rem; }
  .apertura[data-visual="none"] { grid-template-columns: 1fr; }
  .apertura[data-visual="none"] .apertura__titular { font-size: clamp(2.6rem, 5vw, 4.6rem); max-width: 22ch; }
}

/* ---------- tarjetas ---------- */

.pieza { display: grid; gap: .8rem; align-content: start; position: relative; }
.pieza__texto { display: grid; gap: .5rem; align-content: start; }
.pieza__titular {
  font: 560 1.25rem/1.16 var(--f-titular);
  font-variation-settings: "opsz" 28;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.pieza__titular a:hover { color: var(--c-acento); }
.pieza--larga .pieza__titular { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.08; font-variation-settings: "opsz" 48; }
.pieza__entrada {
  font: 400 1.0625rem/1.5 var(--f-titular); color: var(--c-texto-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.pieza:hover .visual__marco img, .apertura:hover .visual__marco img { transform: scale(1.03); }
.pieza[data-tipo="note"] .linea__firma { font-weight: 500; }

/* ---------- portada: contiguas (las siguientes por cobertura) ---------- */

.contiguas { padding-bottom: var(--tramo); }
.contiguas__rejilla { display: grid; gap: 1.5rem var(--hueco); }
.contiguas__rejilla > .pieza { padding-top: 1rem; border-top: 1px solid var(--c-regla); }

@media (max-width: 47.99em) {
  /* las siguientes, en lista con miniatura a la derecha: misma regla de imagen que la primera */
  .contiguas__rejilla > .pieza:not(:first-child) { grid-template-columns: 1fr 6.5rem; align-items: start; }
  .contiguas__rejilla > .pieza:not(:first-child) .visual { order: 2; }
  .contiguas__rejilla > .pieza:not(:first-child) .visual__marco { aspect-ratio: 1; }
}
@media (min-width: 48em) {
  .contiguas__rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .contiguas__rejilla { grid-template-columns: 1.45fr 1fr 1fr 1fr; }
  .contiguas[data-n="3"] .contiguas__rejilla { grid-template-columns: 1.45fr 1fr 1fr; }
  .contiguas[data-n="2"] .contiguas__rejilla { grid-template-columns: 1.45fr 1fr; }
  .contiguas[data-n="1"] .contiguas__rejilla { grid-template-columns: minmax(0, 40rem); }
  .contiguas__rejilla > .pieza:not(:first-child) .visual__marco { aspect-ratio: 4 / 3; }
  .contiguas__rejilla > .pieza:not(:first-child) { padding-left: var(--hueco); margin-left: calc(-1 * var(--hueco) / 2); border-left: 1px solid var(--c-regla); }
  .contiguas__rejilla > .pieza:first-child .pieza__titular { font-size: 1.5rem; }
}

/* ---------- portada: firmas (notas propias) ---------- */

.firmas { background: var(--c-superficie); padding-block: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--tramo); }
.firmas__marco { display: grid; gap: var(--hueco); }
.firmas__rejilla { display: grid; gap: 2rem var(--hueco); }
.firmas .linea { color: var(--c-tenue); }
.firmas .linea__firma { font-size: .875rem; }
.firmas .visual__marco { background: var(--c-fondo); }

.firmas .visual__marco { aspect-ratio: 16 / 9; }
@media (min-width: 48em) {
  .firmas[data-n="2"] .firmas__rejilla, .firmas[data-n="3"] .firmas__rejilla { grid-template-columns: repeat(2, 1fr); }
  .firmas[data-n="3"] .firmas__rejilla > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  /* la primera firma (con 1 o 3) en espejo de la apertura: texto a la izquierda, imagen a la derecha */
  .firmas[data-n="1"] .pieza--larga, .firmas[data-n="3"] .firmas__rejilla > .pieza--larga:first-child {
    grid-template-columns: 5fr 7fr; gap: var(--hueco); align-items: start;
  }
  .firmas[data-n="1"] .pieza--larga .visual, .firmas[data-n="3"] .firmas__rejilla > .pieza--larga:first-child .visual { order: 2; }
  .firmas[data-n="1"] .pieza--larga .visual__marco, .firmas[data-n="3"] .firmas__rejilla > .pieza--larga:first-child .visual__marco { aspect-ratio: 3 / 2; }
  .firmas .pieza:not(.pieza--larga) { padding-top: 1rem; border-top: 1px solid var(--c-regla); }
}

/* ---------- series (temas) ---------- */

.series:empty { display: none; }
.series { display: flex; flex-wrap: wrap; gap: .75rem; padding-bottom: var(--tramo); }
.serie {
  display: inline-flex; align-items: baseline; gap: .8rem;
  padding: .8rem 1rem; border: 1px solid var(--c-regla-fuerte);
  font: 600 1rem/1.2 var(--f-titular);
  transition: background-color .2s, color .2s;
}
.serie__cuenta { font: 400 .75rem/1 var(--f-dato); color: var(--c-tenue); }
.serie:hover { background: var(--c-texto); color: var(--c-fondo); }
.serie:hover .serie__cuenta { color: inherit; }

/* ---------- portada: franjas por sección ---------- */

.franjas { display: grid; gap: var(--tramo); padding-bottom: var(--tramo); }
.franja { display: grid; gap: 1.5rem; }
.franja__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-top: 3px solid var(--c-regla-fuerte); padding-top: .7rem; }
.franja__cabeza .titulillo { border-top: 0; padding-top: 0; }
.franja__mas { flex: none; font: 500 .8125rem/1 var(--f-interfaz); color: var(--c-texto-2); padding-bottom: .2rem; }
.franja__mas:empty { display: none; }
.franja__mas:hover { color: var(--c-acento); }
.franja__mas:hover .flechita { transform: rotate(45deg) translate(.12em, -.2em); }
.franja__cuerpo { display: grid; gap: 1.5rem var(--hueco); }
.franja__resto { display: grid; gap: 1.25rem var(--hueco); align-content: start; }
.franja .rubro { display: none; } /* dentro de su sección el rubro sobra */
.franja__resto > .pieza { padding-top: 1.1rem; border-top: 1px solid var(--c-regla); }

@media (max-width: 47.99em) {
  .franja__resto > .pieza { grid-template-columns: 1fr 6.5rem; align-items: start; }
  .franja__resto > .pieza .visual { order: 2; }
  .franja__resto > .pieza .visual__marco { aspect-ratio: 1; }
}

@media (min-width: 48em) {
  /* a: principal grande a la izquierda, resto en lista a la derecha */
  .franja--a .franja__cuerpo, .franja--c .franja__cuerpo { grid-template-columns: 7fr 5fr; }
  .franja--a .franja__resto > .pieza, .franja--c .franja__resto > .pieza { grid-template-columns: 1fr 8.5rem; align-items: start; }
  .franja--a .franja__resto > .pieza .visual, .franja--c .franja__resto > .pieza .visual { order: 2; }
  .franja--a .franja__resto > .pieza .visual__marco, .franja--c .franja__resto > .pieza .visual__marco { aspect-ratio: 4 / 3; }
  .franja--a .franja__principal .visual__marco, .franja--c .franja__principal .visual__marco { aspect-ratio: 16 / 10; }
  .franja--a .franja__resto > .pieza:first-child, .franja--c .franja__resto > .pieza:first-child { border-top: 0; padding-top: 0; }
  /* c: espejo de a */
  .franja--c .franja__cuerpo { grid-template-columns: 5fr 7fr; }
  .franja--c .franja__principal { order: 2; }
  /* b: una ancha y el resto en columnas, todas con imagen */
  .franja--b .franja__cuerpo { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .franja--b .franja__resto { display: contents; }
  .franja--b .franja__resto > .pieza { border-top: 0; padding-top: 0; }
  .franja--b .franja__resto > .pieza .visual__marco { aspect-ratio: 4 / 3; }
  .franja--b .pieza__entrada { -webkit-line-clamp: 3; }
  .franja--b[data-n="3"] .franja__cuerpo { grid-template-columns: 2fr 1fr 1fr; }
  .franja--b[data-n="2"] .franja__cuerpo { grid-template-columns: 2fr 1fr; }
  /* una sola pieza: imagen y texto en paralelo */
  .franja[data-n="1"] .franja__cuerpo { grid-template-columns: 1fr; }
  .franja[data-n="1"] .franja__resto { display: none; }
  .franja[data-n="1"] .pieza--larga { grid-template-columns: 7fr 5fr; gap: var(--hueco); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .franja--b .franja__cuerpo, .franja--b[data-n="3"] .franja__cuerpo { grid-template-columns: repeat(2, 1fr); }
  .franja--b .franja__principal { grid-column: 1 / -1; }
}

/* ---------- lista cronológica ---------- */

.minuto { display: grid; gap: 1.5rem; padding-bottom: var(--tramo); }
.minuto:not(:has(li)) { display: none; }
.minuto__lista { display: grid; gap: 1.4rem var(--hueco); counter-reset: minuto; }
.minuto__item { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1rem; align-items: baseline; }
.minuto__hora { font: 400 .75rem/1.4 var(--f-dato); color: var(--c-tenue); }
.minuto__texto { display: grid; gap: .3rem; }
.minuto__titular { font: 500 1.125rem/1.25 var(--f-titular); font-variation-settings: "opsz" 20; }
.minuto__titular:hover { color: var(--c-acento); }
@media (min-width: 64em) {
  .minuto__lista { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- texto largo (cuerpo de notas, resumen, páginas fijas) ---------- */

.texto { font: 400 1.1875rem/1.62 var(--f-titular); font-variation-settings: "opsz" 16; color: var(--c-texto); }
.texto > * + * { margin-top: 1.1em; }
.texto h2 { font: 600 1.5rem/1.2 var(--f-titular); font-variation-settings: "opsz" 32; margin-top: 2em; letter-spacing: -.01em; }
.texto h3 { font: 600 1.2rem/1.25 var(--f-interfaz); margin-top: 1.8em; }
.texto a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--c-acento); }
.texto a:hover { color: var(--c-acento); }
.texto ul, .texto ol { padding-left: 1.3em; }
.texto ul { list-style: square; }
.texto ol { list-style: decimal; }
.texto li + li { margin-top: .4em; }
.texto blockquote { margin: 1.6em 0; padding-left: 1.2rem; border-left: 3px solid var(--c-acento); font-style: italic; color: var(--c-texto-2); }
.texto hr { border: 0; border-top: 1px solid var(--c-regla); margin: 2em 0; }
.texto strong { font-weight: 650; }
.texto .table-wrap { overflow-x: auto; font: 400 .9375rem/1.45 var(--f-interfaz); }
.texto table { border-collapse: collapse; width: 100%; }
.texto th, .texto td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--c-regla); vertical-align: top; }
mark.pendiente { background: var(--c-acento); color: var(--c-sobre-acento); padding: 0 .2em; }

.serie-lista { margin-top: 2.5em; padding-top: 1rem; border-top: 3px solid var(--c-regla-fuerte); font-family: var(--f-interfaz); }
.serie-lista__titulo { font: 600 1rem/1.2 var(--f-interfaz) !important; margin: 0 0 .8rem !important; }
.serie-lista ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.serie-lista li + li { margin-top: 0; }
.serie-lista a { font: 500 1.0625rem/1.3 var(--f-titular); text-decoration: none; }

/* ---------- barra de avance de lectura ---------- */

.avance { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .avance {
      display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 3px;
      background: var(--c-acento); transform-origin: left; transform: scaleX(0);
      animation: avanzar linear both; animation-timeline: scroll(root);
    }
  }
}
@keyframes avanzar { to { transform: scaleX(1); } }

/* ---------- cobertura (historia agrupada) ---------- */

.cobertura { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: var(--tramo); display: grid; gap: var(--hueco); }
.cobertura__cabeza { display: grid; gap: 1.1rem; max-width: 56rem; }
.cobertura__titular, .articulo__titular {
  font: 560 clamp(2.1rem, 4.4vw, 3.9rem)/1.03 var(--f-titular);
  font-variation-settings: "opsz" 64;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.cobertura__visual .visual__marco { aspect-ratio: 16 / 9; }
.cobertura__cuerpo { display: grid; gap: var(--tramo) var(--hueco); }
.cobertura__lectura { display: grid; gap: clamp(2rem, 4vw, 3rem); max-width: var(--lectura); }

.sintesis { display: grid; gap: 1.1rem; }
.sintesis__respuesta {
  font: 500 clamp(1.3rem, 2vw, 1.6rem)/1.36 var(--f-titular);
  font-variation-settings: "opsz" 32;
  letter-spacing: -.008em;
}
.sintesis__nota { font: 400 .875rem/1.45 var(--f-interfaz); color: var(--c-tenue); padding-top: .9rem; border-top: 1px solid var(--c-regla); }
.sintesis__nota a { color: var(--c-texto); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--c-acento); }

.llamada {
  display: inline-block; min-width: 1.35em; padding: 0 .3em;
  font: 600 .6875rem/1.55 var(--f-dato); text-align: center; vertical-align: .35em;
  color: var(--c-acento); border: 1px solid currentColor; text-decoration: none !important;
}
.llamada:hover { background: var(--c-acento); color: var(--c-sobre-acento) !important; }

.dudas { display: grid; gap: 1.1rem; }
.dudas__lista { display: grid; gap: 1.6rem; }
.dudas__par dt { font: 600 1.1875rem/1.3 var(--f-titular); margin-bottom: .45rem; }
.dudas__par dd { font: 400 1.0625rem/1.55 var(--f-titular); color: var(--c-texto-2); }

.origenes { display: grid; gap: 1.1rem; }
.origenes__lista { display: grid; gap: 1.4rem; }
.origen { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; scroll-margin-top: 5rem; }
.origen__n { font: 600 .8125rem/1.6 var(--f-dato); color: var(--c-acento); }
.origen__texto { display: grid; gap: .3rem; }
.origen__medio { font: 600 .875rem/1.3 var(--f-interfaz); }
.origen__tipo:not(:empty) { margin-left: .6rem; padding: .1rem .4rem; border: 1px solid var(--c-regla); font: 500 .6875rem/1 var(--f-dato); color: var(--c-tenue); vertical-align: .1em; }
.origen__titulo { font: 500 1.0625rem/1.35 var(--f-titular); text-decoration: underline; text-decoration-color: var(--c-regla); text-underline-offset: .2em; }
.origen__titulo:hover { text-decoration-color: var(--c-acento); color: var(--c-acento); }
.origen__extracto { font: 400 .9375rem/1.5 var(--f-titular); color: var(--c-texto-2); }
.origen__extracto:empty { display: none; }
.origen__fecha { font: 400 .75rem/1.3 var(--f-dato); color: var(--c-tenue); }
.origen:target .origen__texto { animation: senalar 2.4s var(--curva); }
@keyframes senalar { 0%, 40% { background: var(--c-velo); box-shadow: -.8rem 0 0 var(--c-velo), .8rem 0 0 var(--c-velo); } 100% { background: transparent; } }

.trayecto { display: grid; gap: 1.1rem; align-content: start; }
.trayecto__lista { position: relative; display: grid; gap: 1rem; padding-left: 1.1rem; border-left: 1px solid var(--c-regla); }
.trayecto__paso { position: relative; display: grid; gap: .15rem; font: 400 .875rem/1.35 var(--f-interfaz); }
.trayecto__paso::before { content: ""; position: absolute; left: calc(-1.1rem - 4px); top: .35rem; width: 7px; height: 7px; background: var(--c-fondo); border: 1px solid var(--c-texto-2); }
.trayecto__paso time { font: 400 .75rem/1.3 var(--f-dato); color: var(--c-tenue); }
.trayecto__paso a:hover { color: var(--c-acento); }

@media (min-width: 64em) {
  .cobertura__cuerpo { grid-template-columns: minmax(0, var(--lectura)) minmax(14rem, 18rem); justify-content: space-between; }
  .trayecto { position: sticky; top: 5rem; }
}

/* ---------- artículo (nota propia) y páginas fijas ---------- */

.articulo { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: var(--tramo); display: grid; gap: var(--hueco); }
.articulo__cabeza { display: grid; gap: 1.1rem; max-width: 52rem; }
.articulo__rubros { display: flex; align-items: baseline; flex-wrap: wrap; }
.articulo__bajada, .cobertura__bajada { font: 400 clamp(1.2rem, 1.8vw, 1.45rem)/1.42 var(--f-titular); color: var(--c-texto-2); max-width: 44rem; text-wrap: pretty; }
.linea--credencial { padding-top: 1rem; border-top: 1px solid var(--c-regla); font-size: .875rem; }
.linea--credencial .linea__firma { color: var(--c-texto); }
.articulo__visual:empty { display: none; }
.articulo__visual .visual__marco { aspect-ratio: 16 / 9; }
.articulo__cuerpo { max-width: var(--lectura); }
.articulo--fija .articulo__titular { font-size: clamp(2rem, 3.6vw, 3rem); }

@media (min-width: 64em) {
  .articulo__cabeza, .articulo__cuerpo { margin-left: calc((100% - var(--lectura)) / 4); }
  .articulo--fija .articulo__cabeza, .articulo--fija .articulo__cuerpo { margin-left: 0; }
}

/* ---------- relacionadas ---------- */

.vecinas { display: grid; gap: 1.5rem; padding-bottom: var(--tramo); }
.vecinas:not(:has(.pieza)) { display: none; }
.vecinas__rejilla { display: grid; gap: 1.5rem var(--hueco); }
.vecinas .pieza .visual__marco { aspect-ratio: 16 / 10; }
@media (min-width: 48em) { .vecinas__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .vecinas__rejilla { grid-template-columns: repeat(3, 1fr); } }

/* ---------- portadilla (sección y tema), perfil de autor ---------- */

.portadilla, .perfil { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; }
.portadilla__titulo, .perfil__nombre {
  font: 600 clamp(2.6rem, 7vw, 6rem)/.95 var(--f-titular);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.035em;
  padding-bottom: 1rem; border-bottom: 3px solid var(--c-regla-fuerte);
}
.portadilla__intro { font: 400 1.25rem/1.45 var(--f-titular); color: var(--c-texto-2); max-width: 44rem; }
.portadilla__cuenta, .perfil__cuenta { font: 400 .75rem/1 var(--f-dato); color: var(--c-tenue); }
.portadilla__cuerpo { display: grid; gap: 1.5rem var(--hueco); padding-bottom: var(--tramo); }
.portadilla__resto { display: grid; gap: 1.5rem var(--hueco); align-content: start; }
.portadilla__resto > .pieza { border-top: 1px solid var(--c-regla); padding-top: 1rem; }
.portadilla__resto:empty { display: none; }
.vista--section .minuto, .vista--topic .minuto { padding-top: 0; }
@media (min-width: 64em) {
  .portadilla__cuerpo { grid-template-columns: 7fr 5fr; }
  .portadilla__resto { grid-template-columns: repeat(2, 1fr); }
  .portadilla__resto > .pieza .visual__marco { aspect-ratio: 16 / 10; }
}
.perfil__cargo { font: 500 1rem/1.3 var(--f-interfaz); color: var(--c-texto-2); }
.perfil__cargo:empty, .perfil__semblanza:empty, .perfil__enlaces:empty { display: none; }
.perfil__semblanza { max-width: var(--lectura); }
.perfil__enlaces { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font: 400 .8125rem/1.3 var(--f-dato); }
.perfil__enlaces a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--c-acento); }

/* ---------- colofón ---------- */

.colofon { margin-top: auto; border-top: 3px solid var(--c-regla-fuerte); background: var(--c-superficie); }
.colofon__marco {
  width: var(--ancho); margin-inline: auto; padding-block: clamp(2rem, 4vw, 3rem);
  display: grid; gap: 1.5rem 2.5rem;
  font: 400 .875rem/1.4 var(--f-interfaz); color: var(--c-texto-2);
}
.colofon__sigla { display: inline-flex; align-items: center; gap: .6rem; font: 600 1.25rem/1 var(--f-titular); color: var(--c-texto); }
.colofon__lista { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.colofon__lista:empty { display: none; }
.colofon__lista a:hover, .colofon__lista .indice__enlace:hover { color: var(--c-acento); }
.colofon .indice__enlace { padding: 0; font-size: .875rem; }
.colofon .indice__enlace::after { display: none; }
.colofon__derechos { font: 400 .75rem/1.3 var(--f-dato); color: var(--c-tenue); }
@media (min-width: 64em) {
  .colofon__marco { grid-template-columns: auto 1fr auto; align-items: start; }
  .colofon__secciones { grid-column: 2; }
  .colofon__lista--legal { grid-column: 3; flex-direction: column; gap: .5rem; }
  .colofon__lista--redes { grid-column: 2; }
  .colofon__derechos { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--c-regla); }
}

/* ---------- motion (mejora progresiva: pantalla.js pone data-mov en <html>) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* titular palabra por palabra: cada palabra sube desde una máscara */
  [data-mov] .palabra { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
  [data-mov] .palabra__in { display: inline-block; transform: translateY(105%); animation: asomar .75s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 38ms + 60ms); }
  /* después del titular, la entrada y el filete de acento */
  [data-mov] .apertura__texto::before { transform: scaleX(0); animation: trazar .9s var(--curva) .25s forwards; }
  [data-mov] .apertura__entrada, [data-mov] .articulo__bajada, [data-mov] .cobertura__bajada, [data-mov] .apertura .linea, [data-mov] .cobertura__cabeza .linea, [data-mov] .linea--credencial {
    opacity: 0; transform: translateY(.6rem); animation: aparecer .7s var(--curva) .45s forwards;
  }
  /* bloques que suben al entrar al viewport, una vez (lo que ya está en pantalla no se oculta) */
  [data-mov] .por-ver { opacity: 0; transform: translateY(1.5rem); }
  [data-mov] .por-ver.visto { opacity: 1; transform: none; transition: opacity .8s var(--curva), transform .8s var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
}
@keyframes asomar { to { transform: none; } }
@keyframes trazar { to { transform: scaleX(1); } }
@keyframes aparecer { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .pieza:hover .visual__marco img, .apertura:hover .visual__marco img { transform: none; }
}

/* ---------- impresión ---------- */

@media print {
  .cabezal, .colofon, .avance, .atajo, .ensayo, .vecinas { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- ajustes tras revisar capturas (1440 y 390, claro y oscuro) ---------- */

.ensayo { background: var(--c-superficie); color: var(--c-texto); border-bottom: 1px solid var(--c-regla); }
@media (max-width: 47.99em) {
  .franja__resto > .pieza[data-visual="none"] { grid-template-columns: 1fr; }
}
.vecinas__rejilla > .pieza { border-top: 1px solid var(--c-regla); padding-top: 1rem; }
.cobertura__visual { max-width: 60rem; }
.cobertura__visual .visual__marco { aspect-ratio: 16 / 10; }
@media (min-width: 64em) {
  .articulo__visual { max-width: 60rem; margin-left: calc((100% - var(--lectura)) / 4); }
  .articulo--fija .articulo__visual { margin-left: 0; }
}

/* ---------- portada: ver más por sección ---------- */

.mas-secciones { display: grid; gap: 1.25rem; padding-bottom: var(--tramo); }
.mas-secciones__lista { display: grid; border-top: 1px solid var(--c-regla); }
.mas-secciones__enlace {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--c-regla);
}
.mas-secciones__nombre { font: 500 1.25rem/1.2 var(--f-titular); font-variation-settings: "opsz" 24; }
.mas-secciones__cuenta { font: 400 .75rem/1 var(--f-dato); color: var(--c-tenue); }
.mas-secciones__ver { grid-column: 1 / -1; font: 500 .8125rem/1 var(--f-interfaz); color: var(--c-texto-2); }
.mas-secciones__ver:empty { display: none; }
.mas-secciones__enlace:hover .mas-secciones__nombre, .mas-secciones__enlace:hover .mas-secciones__ver { color: var(--c-acento); }
.mas-secciones__enlace:hover .flechita, .mas-secciones__buscar:hover .flechita { transform: rotate(45deg) translate(.12em, -.2em); }
.mas-secciones__buscar { justify-self: start; font: 500 .875rem/1 var(--f-interfaz); color: var(--c-texto-2); }
.mas-secciones__buscar:hover { color: var(--c-acento); }
@media (min-width: 48em) {
  .mas-secciones__lista { grid-template-columns: repeat(2, 1fr); column-gap: var(--hueco); }
  .mas-secciones__ver { grid-column: auto; grid-row: 1; grid-column-start: 2; }
  .mas-secciones__cuenta { grid-column: 1; }
}
@media (min-width: 72em) {
  .mas-secciones__lista { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- buscador ---------- */

.buscador { display: grid; gap: 1.5rem; padding-bottom: var(--tramo); }
.buscador__forma { display: grid; gap: .6rem; max-width: 44rem; }
.buscador__etiqueta { font: 500 .8125rem/1.3 var(--f-interfaz); color: var(--c-texto-2); }
.buscador__campo { display: flex; border-bottom: 2px solid var(--c-regla-fuerte); }
.buscador__entrada {
  flex: 1; min-width: 0; padding: .6rem 0; border: 0; background: transparent; color: var(--c-texto);
  font: 500 clamp(1.25rem, 3vw, 1.75rem)/1.2 var(--f-titular); font-variation-settings: "opsz" 36;
}
.buscador__entrada:focus { outline: none; }
.buscador__campo:focus-within { border-bottom-color: var(--c-acento); }
.buscador__entrada::-webkit-search-cancel-button { filter: grayscale(1); }
.buscador__boton {
  flex: none; padding: 0 0 0 1rem; border: 0; background: transparent; cursor: pointer;
  font: 600 .875rem/1 var(--f-interfaz); color: var(--c-acento);
}
.buscador__estado { font: 400 .75rem/1.4 var(--f-dato); color: var(--c-tenue); }
.buscador__estado:empty { display: none; }
.buscador__lista:empty { display: none; }
.buscador__bajada { font: 400 .9375rem/1.4 var(--f-interfaz); color: var(--c-texto-2); }
.buscador__bajada:empty { display: none; }