/* ============================================================
   Adaptación WordPress — La Rebelión de los Fantasmas
   Solo reglas que el prototipo resolvía con <image-slot> o JS.
   Los tokens y componentes viven en hifi.css / pages.css.
   ============================================================ */

/* el antiguo <image-slot> ahora es una <img> (o un hueco vacío) */
img.img-slot { display: block; width: 100%; object-fit: cover; object-position: top }
img.img-slot.fit-contain { object-fit: contain; }
span.img-slot, div.img-slot { display: block; background: var(--paper-2); }
.section.ink span.img-slot, .section.ink div.img-slot { background: rgba(244,239,228,.08); }

/* hueco vacío con proporción por defecto cuando el editor aún no sube imagen */
.img-slot:empty:not(img) { min-height: 160px; }

/* ítem activo del menú (el prototipo lo marcaba con style inline) */
.nav-menu a.current { color: var(--ink); }

/* palabra acentuada (*asteriscos*) en títulos de sección — mismo gesto
   que .pg-hero h1 em / .hero-text h1 .soul del prototipo */
.sec-head h2 em, .access-head h2 em, .welcome-body h2 em { font-style: italic; color: var(--accent); }

/* módulo cta_central con cabecera (eyebrow + título + texto + botón centrados).
   Reutiliza el sistema .sec-head; aquí solo el pegamento que el prototipo no
   tenía como componente: ancho de lectura del texto, separación cabecera/botón
   y densidad de la banda cuando el CTA es el único contenido de la sección. */
.cta-head { margin-bottom: 0; }
.cta-head .lead { max-width: 56ch; }
/* la cabecera y el botón forman un bloque compacto: el margen lo da .cta-actions */
.section:has(> .container > .cta-head) { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }

/* barra de administración de WP — la nav sticky baja con ella */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* aviso de error de formularios (misma voz que el resto del sitio) */
.form-err {
  font-family: var(--ui); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent); margin: 10px 0 0;
}

/* accesibilidad: texto solo para lectores de pantalla */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-wrap: normal;
}

/* honeypot anti-spam */
.field-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ============================================================
   Autocomplete de país (módulo form, variante descarga)
   Combobox propio que sustituye al <datalist> nativo (que no se
   puede estilar y filtra por subcadena). Hereda .inp y los tokens
   de papel/línea/bronce; sin colores nuevos. Progressive enhancement:
   sin JS, el campo cae al <datalist> nativo.
   ============================================================ */
.lrf-ac { position: relative; display: flex; flex-direction: column; }
.lrf-ac .inp { width: 100%; box-sizing: border-box; }
.lrf-ac-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -26px rgba(32, 34, 46, .55);
}
.lrf-ac-list[hidden] { display: none; }
.lrf-ac-opt {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.lrf-ac-opt[aria-selected="true"],
.lrf-ac-opt:hover { background: var(--paper-2); color: var(--ink); }
.lrf-ac-opt mark { background: none; color: var(--accent); font-weight: 600; }

/* ============================================================
   Muro de aportes de lectores (reader_wall)
   Lista de aprobados + formulario de envío. Compone con el sistema
   existente (.form-card, tokens de papel/línea/bronce); sin colores nuevos.
   ============================================================ */
.reader-wall { max-width: 760px; margin: 0 auto; }

/* lista de aportes aprobados */
.aporte-list { list-style: none; margin: 0 0 clamp(34px, 5vw, 52px); padding: 0; display: flex; flex-direction: column; gap: 18px; }
.aporte-card { background: var(--paper-card); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 24px 28px; }
.aporte-text { font-family: var(--display); font-style: italic; font-size: 1.22rem; line-height: 1.6; color: var(--ink); margin: 0; }
.aporte-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 16px 0 0; font-family: var(--ui); }
.aporte-name { text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; color: var(--accent); }
.aporte-date { font-size: .66rem; letter-spacing: .08em; color: var(--ink-soft); margin-left: auto; }

/* estado vacío: una línea sobria invitando a participar */
.aporte-empty {
  font-family: var(--body); font-weight: 300; font-style: italic;
  font-size: 1.05rem; color: var(--ink-soft); text-align: center;
  margin: 0 0 clamp(28px, 4vw, 44px);
}

/* el formulario hereda .form-card; en el muro ocupa todo el ancho de lectura */
.reader-wall .form-card { max-width: none; }

/* variante banda oscura */
.section.ink .aporte-card { background: rgba(244,239,228,.04); border-color: rgba(244,239,228,.18); border-left-color: var(--gold); }
.section.ink .aporte-text { color: var(--paper); }
.section.ink .aporte-date { color: rgba(244,239,228,.6); }
.section.ink .aporte-empty { color: rgba(244,239,228,.7); }
/* la .buy-card siempre tiene fondo claro; su título (h3) no lleva color propio
   y en bandas 'ink' heredaba el paper de .section.ink → ilegible. Forzar tinta. */
.buy-card h3 { color: var(--ink); }

/* ============================================================
   Modal de detalle de historia (story_grid)
   Reutiliza tokens y componentes existentes (.excerpt, .reflect,
   .chips) — sin colores ni easings nuevos.
   ============================================================ */

/* card clickeable: afordancia de "abrir" sin romper el look del prototipo */
.story-card.has-detail { cursor: pointer; }
.story-card.has-detail:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.story-card .st-open {
  margin-left: auto; font-family: var(--ui); font-weight: 400;
  font-size: 1.5rem; line-height: 1; color: var(--gold);
  align-self: center; transition: transform .35s var(--ease), color .35s var(--ease);
}
.story-card.has-detail:hover .st-open,
.story-card.has-detail:focus-visible .st-open { transform: rotate(90deg); color: var(--accent); }

/* el bloque-fuente del detalle nunca se ve en la rejilla */
.story-card .story-detail { display: none; }

/* overlay oscurecido */
.story-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--page-x);
  background: color-mix(in srgb, var(--band-2) 78%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.story-modal.in { opacity: 1; }
.story-modal[hidden] { display: none; }

/* panel */
.story-modal .sm-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 2 * var(--page-x));
  overflow-y: auto;
  background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--line);
  padding: clamp(32px, 4vw, 56px);
  box-shadow: 0 30px 80px rgba(32, 34, 46, .32);
  transform: translateY(26px); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  outline: none;
}
.story-modal.in .sm-panel { transform: none; opacity: 1; }

/* botón de cierre */
.story-modal .sm-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-size: 1rem; line-height: 1;
  border: 1.5px solid var(--line); background: transparent;
  color: var(--ink-soft); cursor: pointer; border-radius: 50%;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.story-modal .sm-close:hover,
.story-modal .sm-close:focus-visible { border-color: var(--accent); color: var(--accent); }

/* el detalle clonado dentro del panel — estilos propios, sin heredar los
   anchos/márgenes (max-width, margin:auto) de las secciones de página */
.story-modal .sm-body .st-top { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; }
.story-modal .sm-body .st-n { font-family: var(--display); font-style: italic; font-size: 2.2rem; color: var(--gold); line-height: 1; }
.story-modal .sm-body h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0; }
.story-modal .sm-body .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.story-modal .sm-body .prose { display: block; max-width: none; font-family: var(--body); font-weight: 300; font-size: 1.12rem; line-height: 1.78; color: var(--ink-2); margin: 0 0 24px; }
.story-modal .sm-body .excerpt { display: block; max-width: none; margin: 0 0 24px; padding: 6px 0 6px 22px; border: none; border-left: 4px solid var(--gold); background: none; }
.story-modal .sm-body .excerpt .ex-body { color: var(--ink); font-style: italic; }
.story-modal .sm-body .reflect { margin-top: 0; }
/* Foto de la historia dentro del modal (story_grid > historia > imagen):
   panel de ALTO FIJO; la imagen ocupa toda la columna izquierda a sangre
   (sin márgenes, alto completo, object-fit cover) y el texto va a la DERECHA
   con su PROPIO scroll. Solo se activa cuando hay foto (:has); sin foto el
   modal mantiene su comportamiento de siempre. Sin tokens nuevos. */
.story-modal .sm-panel:has(.story-photo) {
  width: min(940px, 100%);
  height: min(86vh, 660px);
  padding: 0;            /* la imagen llega a sangre; el texto lleva su padding */
  overflow: hidden;      /* el panel no scrollea: lo hace .sd-text */
}
.story-modal .sm-body:has(.story-photo) {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}
.story-modal .sm-body .story-photo { grid-column: 1; margin: 0; height: 100%; overflow: hidden; }
.story-modal .sm-body .story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-modal .sm-body .sd-text {
  grid-column: 2; height: 100%; min-height: 0; overflow-y: auto;
  padding: clamp(30px, 3.5vw, 52px);
}
@media (max-width: 640px) {
  .story-modal .sm-panel:has(.story-photo) { width: min(560px, 100%); height: min(88vh, 720px); }
  .story-modal .sm-body:has(.story-photo) { grid-template-columns: 1fr; grid-template-rows: minmax(0, 38%) minmax(0, 62%); }
  .story-modal .sm-body .story-photo { grid-column: 1; }
  .story-modal .sm-body .sd-text { grid-column: 1; padding: clamp(22px, 6vw, 30px); }
}

/* scroll del fondo bloqueado mientras el modal está abierto */
body.sm-locked { position: fixed; width: 100%; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .story-modal, .story-modal .sm-panel { transition: none; }
  .story-modal .sm-panel { transform: none; }
  .story-card .st-open { transition: none; }
}

/* timeline: el año va SIEMPRE en una línea. La columna parte de 120px y crece
   hasta el valor más largo del bloque (S. XIII, 1863–65, 2500 a. c.) en vez de
   romper en dos filas. Los años cortos (2020) mantienen el ancho mínimo. */
.timeline-row { grid-template-columns: minmax(120px, max-content) 1fr; }
.timeline-row .ty { white-space: nowrap; }

/* cta_central en modo "capturar correo": reusa el gesto .news del footer
   (mismos valores literales de hifi.css) centrado en la banda. shell.js lo
   cablea solo: selecciona todos los .news de la página. Con país opcional
   (.cta-news--pais) apila el combobox de país sobre la fila email+botón. */
.cta-news { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.cta-news-row { display: flex; gap: 0; }
.cta-news-row input { flex: 1; background: transparent; border: 1px solid rgba(244,239,228,.3); border-right: none; color: var(--paper); padding: 11px 14px; font-family: var(--body); font-size: .92rem; }
.cta-news-row button { background: var(--gold); border: 1px solid var(--gold); color: var(--band); padding: 0 18px; font-family: var(--ui); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 700; cursor: pointer; }
/* país (opcional) dentro de la banda oscura: mismo gesto que el input de email;
   el desplegable .lrf-ac-list conserva su fondo papel (popover legible). */
.cta-news .lrf-ac { width: 100%; }
.cta-news .inp { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid rgba(244,239,228,.3); color: var(--paper); padding: 11px 14px; font-family: var(--body); font-size: .92rem; }
.cta-news input::placeholder { color: rgba(244,239,228,.5); }

/* encuestas: pista de que las opciones se votan. Sin JS no hay voto posible,
   así que solo aparece con body.js-ix; al votar (.voted) se retira y toma el
   relevo el "Gracias por votar." de shell.js. Mismo gesto tipográfico que
   .poll-thanks (ui .66rem uppercase), en tinta suave para no competir con el
   acento. El foco visible cubre la operación con teclado. */
.poll-hint { display: none; }
body.js-ix .poll .poll-hint {
  display: block; font-family: var(--ui); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-soft); margin: 0 0 16px;
}
body.js-ix .poll.voted .poll-hint { display: none; }
body.js-ix .poll-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* banda con imagen de fondo (campo fondo_img del timeline, pintado por
   lrf_render_modules sobre el <section>): cubre el ancho COMPLETO de la banda,
   no solo el área segura. La opacidad la fija el editor (estilo inline). El
   contenido del .container queda por encima. Sin imagen, nada de esto se emite. */
.section.has-bg { position: relative; }
.section.has-bg > .container { position: relative; z-index: 1; }
.section-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}

/* portada de páginas internas (.pg-hero): el prototipo dejaba el lado derecho
   y el pie vacíos. Se rellena con el MISMO vocabulario gráfico ya existente
   —marca de estrella (el glifo del favicon) + filete de oro— sin nada
   ilustrativo (DESIGN.md). La estrella precede al numeral; el filete cierra la
   cabecera reusando el gesto del eyebrow (línea fina de oro). */
.pg-hero .secno { display: inline-flex; align-items: center; gap: 12px; }
.pg-hero .secno::before {
  content: ""; flex: none; width: .9em; height: .9em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 12 l5.5 13.5 14.5 1.5 -11 10 3.5 14.5 -12.5 -8 -12.5 8 3.5 -14.5 -11 -10 14.5 -1.5 z' fill='%23b08b4f'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg-hero::after {
  content: ""; display: block; width: 72px; height: 1.5px;
  margin-top: clamp(28px, 4vw, 40px); background: var(--gold);
}

/* Variante con ilustración lateral (page_hero > imagen). El prototipo dejaba el
   lado derecho vacío; cuando una página define imagen, la cabecera pasa a una
   rejilla editorial asimétrica (texto | lámina) sin tocar las demás portadas.
   La lámina ya trae su propio marco dorado en la ilustración: solo se asienta
   con una sombra suave; nada de colores ni marcos nuevos. */
.pg-hero.has-figure {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .86fr);
  gap: clamp(32px, 5.5vw, 84px);
  align-items: center;
}
.pg-hero.has-figure::after { display: none; }            /* el filete se recoloca bajo el texto */
.pg-hero.has-figure .pg-hero-text::after {
  content: ""; display: block; width: 72px; height: 1.5px;
  margin-top: clamp(28px, 4vw, 40px); background: var(--gold);
}
/* Lámina flotante (sin marco): la ilustración ya trae su propio marco dorado en
   Ω, así que no se le añade ninguno —ni paspartú ni filete—. Se eleva del papel
   con una sombra cálida en dos capas (contacto cercano + ambiente difuso) y
   entra con un fade-up elegante (ease-out). Sin colores nuevos: la sombra es la
   tinta sepia del tema a baja opacidad. */
.pg-hero-figure {
  margin: 0;
  justify-self: end;
  max-width: 470px;
  animation: lrf-hero-figure-in .8s cubic-bezier(.2, .7, .2, 1) both;
}
.pg-hero-figure img {
  width: 100%; height: auto; display: block;
  filter:
    drop-shadow(0 4px 12px rgba(40, 26, 10, .12))
    drop-shadow(0 30px 56px rgba(40, 26, 10, .26));
}
@keyframes lrf-hero-figure-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .pg-hero.has-figure { grid-template-columns: 1fr; }
  .pg-hero-figure {
    justify-self: center;
    max-width: min(360px, 80vw);
    margin-top: clamp(24px, 6vw, 34px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-hero-figure { animation: none; }
}

/* botón opcional bajo la biografía (author_welcome > enlace_boton).
   El prototipo no traía CTA aquí; se compone con el .btn existente y se le da
   el mismo ritmo vertical que el enlace .more (margin-top 22px). */
.welcome-body .welcome-cta { margin: 22px 0 0; }

/* ============================================================
   Lightbox de imágenes (galerías, retratos, portadas)
   El prototipo no traía clic-para-ampliar; se compone con el MISMO
   vocabulario del modal de historias (.story-modal): overlay oscuro con
   blur, cierre redondo, bloqueo de scroll (body.sm-locked). Sin colores
   ni easings nuevos.
   ============================================================ */

/* afordancia: la imagen ampliable invita al clic */
img.zoomable { cursor: zoom-in; }
img.zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--page-x);
  background: color-mix(in srgb, var(--band-2) 88%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.lightbox.in { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox .lb-fig {
  position: relative; margin: 0;
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 2 * var(--page-x));
  display: flex; flex-direction: column; align-items: center;
  transform: scale(.96); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  outline: none;
}
.lightbox.in .lb-fig { transform: none; opacity: 1; }

.lightbox .lb-img {
  display: block; max-width: 100%;
  max-height: calc(100vh - 2 * var(--page-x) - 52px);
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(32, 34, 46, .45);
}

.lightbox .lb-cap {
  margin: 16px 0 0; text-align: center;
  font-family: var(--ui); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper);
}
.lightbox .lb-cap[hidden] { display: none; }

.lightbox .lb-close {
  position: absolute; top: var(--page-x); right: var(--page-x);
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-size: 1rem; line-height: 1;
  border: 1.5px solid var(--paper); background: var(--band-2);
  color: var(--paper); cursor: pointer; border-radius: 50%;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.lightbox .lb-close:hover,
.lightbox .lb-close:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Polaroid con leyenda (Archivo: img_grid y archive_subsections)
   El marco blanco + sombra siguen viviendo en .img-slot (pages.css). Cada
   polaroid se envuelve en <figure class="polaroid"> para poder rotular la
   franja blanca inferior; por eso la rotación/hover pasan al figure (gira la
   pieza entera) y se neutralizan en el .img-slot interior. theme.css carga
   después de pages.css, así que estos overrides ganan sin !important.
   ============================================================ */
.img-grid .polaroid,
.subsec .ss-imgs .polaroid { position: relative; margin: 0; }
.img-grid .polaroid:nth-child(odd),
.subsec .ss-imgs .polaroid:nth-child(odd) { transform: rotate(-1.5deg); }
.img-grid .polaroid:nth-child(even),
.subsec .ss-imgs .polaroid:nth-child(even) { transform: rotate(1.3deg); }
.img-grid .polaroid:hover,
.subsec .ss-imgs .polaroid:hover { transform: rotate(0deg) scale(1.025); z-index: 2; }
/* el marco no rota por su cuenta (lo hace el figure); conserva su sombra/hover */
.img-grid .polaroid .img-slot,
.img-grid .polaroid:hover .img-slot,
.subsec .ss-imgs .polaroid .img-slot,
.subsec .ss-imgs .polaroid:hover .img-slot { transform: none; }
/* la leyenda se asienta en la franja blanca inferior del polaroid (los 32px
   de border-bottom del marco). Va EN FLUJO justo tras el marco y se sube a la
   franja con margen negativo: queda clavada al marco aunque la rejilla estire
   el <figure> (align-items stretch con polaroids de distinta altura en la
   misma fila) — anclada al bottom del figure, se salía del área blanca al
   cambiar el ancho. El marco pasa a block para eliminar el hueco de línea
   base del <img>. z-index 3 para quedar por encima del .img-slot, que en
   :hover recibe position:relative; z-index:2 desde pages.css. */
.polaroid > .img-slot { display: block; }
.polaroid > figcaption {
  position: relative; z-index: 3;
  height: 30px; margin: -31px 10px 0; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic;
  font-size: clamp(.72rem, .9vw, .82rem); line-height: 1.05;
  color: var(--ink-soft); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .img-grid .polaroid, .subsec .ss-imgs .polaroid { transition: none; }
}
/* opción blanco y negro (img_grid > campo bn; archive_subsections > bn por subsección):
   pone las fotos del polaroid en escala de grises; el marco blanco no se toca. */
.img-grid.is-bn .polaroid img,
.subsec .ss-imgs.is-bn .polaroid img { filter: grayscale(1); transition: filter .45s var(--ease); }
/* el zoom hereda el blanco y negro de la miniatura pulsada (shell.js añade .is-bn). */
.lightbox .lb-img.is-bn { filter: grayscale(1); }

/* ============================================================
   Prosa con foto destacada al costado (módulo prose, imágenes con leyenda;
   p. ej. "Lo que quedó fuera" + el manuscrito de brainstorming).
   La foto flota a la derecha: el texto de la prosa y la nota del autor
   agrupada fluyen a su izquierda y rellenan el alto de la imagen, así un
   texto corto no deja un hueco enorme junto a una foto alta. Marco/leyenda
   como los polaroids del Archivo, pero a aspecto natural: NO recorta.
   ============================================================ */
.prose-aside { position: relative; margin: 0; transform: rotate(-1.4deg); }
.prose-aside--float {
  float: right;
  width: clamp(210px, 36%, 290px);
  margin: 4px 0 22px 44px;
}
/* la sección contiene el float (no se desborda a la siguiente). */
.container:has(> .prose-aside--float) { display: flow-root; }
.prose-aside .img-slot {
  width: 100%; height: auto;
  border: 9px solid #fff; border-bottom-width: 38px; background: #fff;
  box-shadow: 0 16px 32px rgba(32,34,46,.16), 0 2px 6px rgba(32,34,46,.12);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.prose-aside:hover { transform: rotate(0deg) scale(1.02); z-index: 2; }
.prose-aside:hover .img-slot {
  box-shadow: 0 26px 50px rgba(32,34,46,.24), 0 4px 10px rgba(32,34,46,.14);
}
.prose-aside > figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 36px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 4px;
  font-family: var(--display); font-style: italic;
  font-size: clamp(.78rem, .95vw, .9rem); line-height: 1.05;
  color: var(--ink-soft); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dark .prose-aside .img-slot { border-color: #ece5d4; background: #ece5d4; }
@media (prefers-reduced-motion: reduce) { .prose-aside, .prose-aside .img-slot { transition: none; } }
@media (max-width: 760px) {
  .prose-aside--float { float: none; width: auto; max-width: 320px; margin: 0 auto 26px; }
}

/* ============================================================
   Footer: CTA del boletín, antes del formulario.
   ============================================================ */
.footer .f-news-cta {
  margin: 24px 0 0;
  max-width: 34ch;
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.32;
  color: var(--paper);
}
/* el CTA de ebook (cta_central) enlaza a #boletin en el footer; deja aire para
   que la cabecera sticky no tape el destino al hacer scroll. */
#boletin { scroll-margin-top: 96px; }

/* ============================================================
   "Los lugares del libro" (archive_subsections): enlace de material
   adicional al Cuaderno de Viaje bajo cada subsección. El prototipo no lo
   traía; reutiliza la afordancia del enlace .more (ui, versalitas, oro,
   flecha que avanza al hover). Sin colores ni easings nuevos.
   ============================================================ */
.subsec-extra {
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-top: 18px;
}
.subsec-extra .ar { transition: transform .35s var(--ease); }
.subsec-extra:hover .ar { transform: translateX(5px); }

/* ============================================================
   Nav desktop: estado activo más claro. El prototipo solo teñía el activo
   (color:var(--ink)) y ese matiz nunca se portó al tema (el fallback marca
   la página actual con a.current pero no había regla). Aquí: tinta fuerte +
   el subrayado de acento queda completo y fijo (scaleX(1)) en el activo, no
   solo al hover. Cubre el fallback (.current) y un menú WP (aria-current /
   current-menu-item). En móvil el subrayado ya está oculto, así que esto solo
   afecta a desktop. Sin colores ni easings nuevos.
   ============================================================ */
.nav-menu a.current,
.nav-menu a[aria-current="page"],
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { color: var(--ink); }
.nav-menu a.current::after,
.nav-menu a[aria-current="page"]::after,
.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after { transform: scaleX(1); }

/* ============================================================
   Popup de evento (Ajustes del sitio → Evento)
   Reutiliza el vocabulario del modal de historias: overlay tinta
   + blur, panel papel, cierre redondo, bloqueo body.sm-locked.
   ============================================================ */
.evt-pop {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--page-x);
  background: color-mix(in srgb, var(--band-2) 82%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.evt-pop.in { opacity: 1; }
.evt-pop[hidden] { display: none; }

.evt-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 2 * var(--page-x));
  display: grid; grid-template-columns: .85fr 1.15fr;
  overflow: hidden auto;
  background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(32, 34, 46, .32);
  transform: translateY(26px); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  outline: none;
}
.evt-pop.in .evt-panel { transform: none; opacity: 1; }

.evt-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-size: 1rem; line-height: 1;
  border: 1.5px solid var(--line); background: var(--paper-card);
  color: var(--ink-soft); cursor: pointer; border-radius: 50%;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.evt-close:hover,
.evt-close:focus-visible { border-color: var(--accent); color: var(--accent); }

/* banda tinta: portada flotante + logo de la librería */
.evt-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: clamp(28px, 4vw, 44px);
  background: var(--ink);
}
.evt-media .evt-cover {
  width: min(200px, 72%); height: auto; aspect-ratio: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}
.evt-media .evt-logo { width: 92px; height: auto; aspect-ratio: auto; opacity: .92; }

/* cuerpo papel */
.evt-body { padding: clamp(28px, 4.5vw, 52px); display: flex; flex-direction: column; gap: 8px; }
.evt-eyebrow {
  font-family: var(--ui); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 6px;
}
.evt-titulo { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0; }
.evt-titulo em { color: var(--accent); }
.evt-fecha {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--gold); margin: 10px 0 0;
}
.evt-lugar {
  font-family: var(--ui); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); margin: 4px 0 0;
}
.evt-dir { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.evt-texto { font-weight: 300; line-height: 1.7; color: var(--ink-2); margin: 12px 0 0; }
.evt-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.evt-skip {
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--ui); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .35s var(--ease);
}
.evt-skip:hover,
.evt-skip:focus-visible { color: var(--accent); }

@media (max-width: 720px) {
  .evt-panel { grid-template-columns: 1fr; width: min(480px, 100%); }
  .evt-media { flex-direction: row; gap: 18px; padding: 18px; }
  .evt-media .evt-cover { width: 96px; }
  .evt-media .evt-logo { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .evt-pop, .evt-panel { transition: none; }
}