/* ============================================================================
   ITINERARIO · capa de LECTURA (sobre frontera.css)
   «La frontera, explicada paso a paso.»

   Hereda los tokens de Frontera (frontera.css, cargado antes) y los AMPLÍA para lectura
   larga en penumbra: una columna legible es la protagonista; la sala oscura es ahora una
   lámpara de lectura. No rompe ningún token heredado; añade encima. Tokens y contrastes
   verificados en docs/IDENTIDAD-LECTURA.md.
   ============================================================================ */

:root {
  /* — Lectura: texto y enlaces (contraste verificado sobre --ink #0B0F1A) — */
  --paper-read: #F0EBDF;   /* cuerpo de texto largo (16:1). Distinto de --paper (etiquetas). */
  --read-soft:  #C8C3B6;   /* secundario de lectura: pies, notas, ejes (10.9:1). */
  --link:       #9CC6E0;   /* enlaces: azul frío, hermano de --cool (10.5:1). NO ámbar. */
  --link-hover: #C2DCEE;
  --term-key:   var(--guide); /* término clave = el "norte" del lector (amarillo guía). */
  --term-key-rule: rgba(242, 200, 121, 0.35);

  /* — Superficies (alias de los heredados + un hueco hundido) — */
  --surface-card:      var(--ink-raised); /* tarjeta de widget: lo que se TOCA. */
  --surface-card-line: var(--line);
  --surface-inset:     #0E1320;           /* hueco hundido (lienzo de widget). */

  /* — Medida y ritmo — */
  --measure:      66ch;
  --measure-wide: 50rem;
  --read-rhythm:  1.7;
  --read-flow:    1.35em;

  /* — Escala tipográfica modular (razón 1.25, anclada en 18px) — */
  --step--1: 0.889rem;
  --step-0:  1.125rem;
  --step-1:  1.406rem;
  --step-2:  1.758rem;
  --step-3:  2.197rem;

  --reto-accent: var(--accent);
}

/* La lectura SÍ scrollea (Frontera lo prohíbe con overflow:hidden + height:100%).
   CLAVE: devolver a html/body el flujo natural (overflow VISIBLE, alto automático) para que
   scrollee la VENTANA, como cualquier página normal. Poner overflow:auto/hidden en <html> con
   alto automático lo convierte en su propio contenedor de scroll dimensionado al contenido —
   y entonces no desborda, así que no scrollea (era el bug). El recorte del desbordamiento
   horizontal de los widgets sangrados se hace en `main` (ver abajo), nunca aquí. */
html, body.lectura {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overscroll-behavior-y: contain;
}
body.lectura {
  color: var(--paper-read);
  font-size: var(--step-0);
  line-height: var(--read-rhythm);
  padding-bottom: 4rem;
}

/* — Saltar al contenido (accesibilidad) — */
.skip {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 80;
  background: var(--ink-raised);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 4px;
  transition: top 160ms var(--ease);
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* — Hairline de progreso de scroll (no es barra de gamificación) — */
.progreso-scroll {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 90ms linear;
  pointer-events: none;
}

/* ── Cabecera del shell ───────────────────────────────────────────────── */
.shell-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px clamp(16px, 5vw, 40px);
  background: var(--ink);
}
/* El fundido a la página va DEBAJO de la cabecera: si viviera dentro, el texto del capítulo se leería tras el
   subtítulo al hacer scroll (visto a 1100×920 en el cap. 4). */
.shell-top::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 20px;
  background: linear-gradient(to bottom, var(--ink), rgba(11, 15, 26, 0));
  pointer-events: none;
}
.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--paper); }
.marca-icono { width: 34px; height: 34px; color: var(--paper); flex: 0 0 auto; }
.marca-icono .marca-svg { width: 100%; height: 100%; display: block; }
.marca-icono .estrella { transform-box: fill-box; transform-origin: center; animation: latido 4.5s ease-in-out infinite; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark { font-size: var(--step-1); letter-spacing: 0.05em; color: var(--paper); }
.tagline { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); margin-top: 2px; }

.shell-acciones { display: flex; align-items: center; gap: 10px; }
.itinerario-btn, .apoya-btn {
  background: none; border: 1px solid var(--line); color: var(--paper-dim);
  font: inherit; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.itinerario-btn:hover, .apoya-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.apoya-btn { text-decoration: none; white-space: nowrap; }
.apoya-btn[hidden] { display: none; }
.acerca-btn {
  background: none; border: none; color: var(--paper-dim);
  font: inherit; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 4px; cursor: pointer; transition: color 160ms var(--ease);
}
.acerca-btn:hover { color: var(--paper); }
/* Estrecho: en la cabecera solo caben la marca, «♥» y «Capítulos» (medido a 360–390 px). «Acerca de» sigue en
   el pie; «♥» conserva su nombre accesible completo (aria-label) y el diálogo repite «♥ Apoya a Itinerario». */
@media (max-width: 600px) {
  .shell-top { gap: 10px; }
  .shell-acciones { gap: 8px; }
  .acerca-btn, .tagline, .apoya-txt { display: none; }
}

/* ── Itinerario (cajón) ───────────────────────────────────────────────── */
.itinerario {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: start center;
  background: rgba(7, 9, 16, 0.72);
  backdrop-filter: blur(2px);
  overflow-y: auto; padding: 6vh 16px 16px;
  animation: aparece-rapido 160ms var(--ease);
}
.itinerario[hidden] { display: none; }
.itinerario-panel { width: min(680px, 100%); }
.itinerario-panel h2 { font-size: var(--step-2); margin-bottom: 1.2rem; color: var(--paper); }
.indice { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.indice .fila {
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 6px; text-decoration: none; color: var(--paper-read);
  transition: background 140ms var(--ease);
}
.indice .fila:hover { background: var(--ink-raised); }
.indice .fila[aria-current="true"] { background: var(--ink-raised); box-shadow: inset 2px 0 0 var(--accent); }
.indice .num { color: var(--paper-dim); font-size: var(--step-1); text-align: right; }
.indice .fila[aria-current="true"] .num { color: var(--accent); }
.indice .titulo { display: block; font-size: var(--step-0); color: var(--paper); }
.indice .sub { display: block; font-size: var(--step--1); color: var(--read-soft); margin-top: 1px; }
.indice .fila--no-listo .titulo, .indice .fila--no-listo .num { opacity: 0.55; }
.indice .estado { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 auto; }
.indice .estado--leido { background: var(--read-soft); border-color: var(--read-soft); }
.indice .estado--reto { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 6px rgba(143, 177, 164, 0.6); }
.indice-pie { margin-top: 1.4rem; font-size: var(--step--1); color: var(--read-soft); }
.indice-pie .reiniciar-progreso { background: none; border: none; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ── Columna de lectura ───────────────────────────────────────────────── */
/* `overflow-x: clip` recorta el desborde horizontal de los widgets sangrados SIN convertir
   `main` en contenedor de scroll vertical (clip + visible no se coercen entre sí), así la
   ventana sigue scrolleando con normalidad. */
main { display: block; overflow-x: clip; }
.capitulo {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(8px, 3vw, 28px) clamp(20px, 5vw, 40px) 2rem;
  outline: none;
}
.capitulo .kicker { color: var(--accent); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.4rem; }
.capitulo h1 { font-size: var(--step-3); line-height: 1.15; color: var(--paper); font-weight: 400; letter-spacing: 0.01em; }
.capitulo h2 { font-size: var(--step-2); line-height: 1.2; color: var(--paper); font-weight: 400; margin-top: 2.2rem; margin-bottom: 0.2rem; }
.capitulo .entradilla { font-size: var(--step-1); color: var(--read-soft); line-height: 1.5; margin-top: 0.6rem; }
.capitulo p { margin-block: var(--read-flow); }
.capitulo strong { color: var(--term-key); font-weight: 400; }
.capitulo em { color: var(--paper); font-style: italic; }
.capitulo a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(156, 198, 224, 0.4); }
.capitulo a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.capitulo .mono { color: var(--paper); font-size: 0.95em; }
.capitulo .nota-honesta { font-size: var(--step--1); color: var(--read-soft); border-left: 2px solid var(--line); padding-left: 14px; margin-block: 1.3rem; }
.capitulo .formula.mono, .capitulo p.formula .mono { color: var(--paper); }

/* Bloque de fórmula destacado (hueco hundido). */
.capitulo .formula {
  display: block; text-align: center; font-size: var(--step-1);
  background: var(--surface-inset); border: 1px solid var(--surface-card-line);
  border-radius: 8px; padding: 1rem 1.2rem; margin-block: 1.4rem; color: var(--paper);
}

/* ── Widgets (figure) ─────────────────────────────────────────────────── */
.widget { margin-block: 1.8rem; }
.widget--columna { /* al ancho de la columna (por defecto) */ }
.widget--sangrado { width: min(var(--measure-wide), 92vw); margin-inline: calc(50% - min(var(--measure-wide), 92vw) / 2); }
.widget--sangre { width: min(76rem, 96vw); margin-inline: calc(50% - min(76rem, 96vw) / 2); }
.widget-host {
  background: var(--surface-card); border: 1px solid var(--surface-card-line);
  border-radius: 10px; padding: 14px;
}
.widget figcaption {
  margin-top: 0.6rem; font-size: var(--step--1); color: var(--read-soft); line-height: 1.45;
}

/* — Widget de órbita — */
.orbit { display: flex; flex-direction: column; gap: 10px; }
.orbit-lienzo {
  width: 100%; aspect-ratio: 1 / 1; max-height: 64vh;
  background: var(--surface-inset); border-radius: 8px; overflow: hidden;
}
.orbit-lienzo .plano { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.orbit-lienzo .plano.arrastrando { cursor: grabbing; }
.orbit-cartela { font-size: var(--step--1); color: var(--read-soft); line-height: 1.5; }
.orbit-cartela b { color: var(--paper); font-weight: 400; }
.orbit-cartela .oc-destino { color: var(--accent); }
.orbit-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.oc-btn {
  background: var(--ink-raised); border: 1px solid var(--line); color: var(--paper);
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 5px; cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.oc-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.oc-play { min-width: 7.5em; }
.oc-vel { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); color: var(--read-soft); }
.oc-clavar { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--read-soft); cursor: pointer; }
.oc-zoom { display: inline-flex; align-items: center; gap: 5px; }
.oc-btn--zoom { padding: 4px 10px; font-size: 16px; line-height: 1; min-width: 2.2em; }
.oc-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.oc-seg-btn { background: none; border: none; color: var(--read-soft); font: inherit; font-size: 13px; padding: 6px 13px; cursor: pointer; transition: background 140ms var(--ease), color 140ms var(--ease); }
.oc-seg-btn + .oc-seg-btn { border-left: 1px solid var(--line); }
.oc-seg-btn[aria-pressed="true"] { background: var(--ink-raised); color: var(--accent); }
.oc-seg-btn:hover { color: var(--accent); }
.orbit-controles input[type="range"] { -webkit-appearance: none; appearance: none; width: 90px; height: 2px; background: var(--line); border-radius: 2px; outline: none; }
.orbit-controles input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.orbit-controles input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; }
.orbit-controles input[type="checkbox"] { accent-color: var(--accent); }

/* ── Visores de fractal embebidos (mini-Frontera, caps. 4–7) ──────────── */
.viewer { display: flex; flex-direction: column; gap: 10px; }
.viewer-lienzo {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 60vh;
  background: var(--surface-inset); border-radius: 8px; overflow: hidden; touch-action: none;
}
.viewer-lienzo .plano { display: block; width: 100%; height: 100%; }
.viewer-c { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.viewer-c-pt {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid rgba(11, 15, 26, 0.85);
  box-shadow: 0 0 9px rgba(232, 162, 76, 0.85);
}
.viewer-c-lab { position: absolute; left: 15px; top: -3px; color: var(--accent); font-size: 13px; }
.viewer-c--conexo .viewer-c-pt { background: var(--ok); box-shadow: 0 0 9px rgba(143, 177, 164, 0.85); }
.viewer-c--conexo .viewer-c-lab { color: var(--ok); }
.viewer-cartela { font-size: var(--step--1); color: var(--read-soft); line-height: 1.5; }
.viewer-cartela b { color: var(--paper); font-weight: 400; }
.viewer-conexo { color: var(--ok); }
.viewer-polvo { color: var(--accent); }

/* Atlas (cap. 5): Mandelbrot + Julia lado a lado */
.atlas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.atlas-col { display: flex; flex-direction: column; gap: 8px; }
.atlas-cap { font-size: var(--step--1); color: var(--read-soft); text-align: center; }
.atlas-cap b { color: var(--paper); font-weight: 400; }
.atlas .viewer-lienzo { max-height: 42vh; }
@media (max-width: 680px) { .atlas { grid-template-columns: 1fr; } }

/* Zoo de fórmulas (cap. 7) */
.zoo { display: flex; flex-direction: column; gap: 10px; }
.zoo-bar { display: inline-flex; align-items: center; gap: 10px; }
.zoo-select { background: var(--ink-raised); color: var(--paper); border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 13px; padding: 5px 9px; cursor: pointer; }
.zoo-select:focus-visible { outline: 1.5px solid var(--accent); }
.zoo-gesto { font-size: var(--step--1); color: var(--read-soft); line-height: 1.55; min-height: 2.4em; }
.zoo-gesto strong { color: var(--term-key); font-weight: 400; }
.zoo-reto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zoo-num { width: 4em; background: var(--ink-raised); color: var(--paper); border: 1px solid var(--line); border-radius: 4px; font: inherit; padding: 4px 6px; margin-left: 6px; }

/* Cazador de satélites (cap. 8) */
.hunter { display: flex; flex-direction: column; gap: 10px; }
.hunter-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.hunter-lugar { font-size: 12px; }
.hunter-mag { font-size: var(--step--1); color: var(--read-soft); }
.hunter-mag b { color: var(--paper); font-weight: 400; }
.hunter-aviso { color: var(--accent); }
.hunter-quiz { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Curva de Koch (cap. 8 · dimensión) */
.koch { display: flex; flex-direction: column; gap: 10px; }
.koch-lienzo { width: 100%; aspect-ratio: 5 / 2; max-height: 38vh; background: var(--surface-inset); border-radius: 8px; overflow: hidden; }
.koch-lienzo .plano { display: block; width: 100%; height: 100%; }
.koch-cap { font-size: var(--step--1); color: var(--read-soft); line-height: 1.5; }
.koch-cap b { color: var(--paper); font-weight: 400; }

/* ── Reto ─────────────────────────────────────────────────────────────── */
.reto {
  margin-top: 2.6rem; padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--surface-card-line); border-left: 2px solid var(--reto-accent);
  border-radius: 10px; background: var(--surface-card);
}
.reto-kicker { color: var(--reto-accent); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; }
.reto-prompt { font-size: var(--step-1); color: var(--paper); font-weight: 400; margin: 0.3rem 0 1rem; line-height: 1.4; }
.reto .widget { margin-block: 1rem; }
.reto-feedback { min-height: 1.5em; font-size: var(--step-0); line-height: 1.5; margin-top: 0.8rem; transition: color 280ms var(--ease); }
.reto-feedback[data-estado="ok"] { color: var(--ok); }
.reto-feedback[data-estado="pista"] { color: var(--read-soft); }
.reto-marcar {
  margin-top: 1rem; background: none; border: 1px solid var(--line); color: var(--paper-dim);
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 5px; cursor: pointer;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.reto-marcar:hover { color: var(--ok); border-color: var(--ok); }

/* ── Anterior / siguiente ─────────────────────────────────────────────── */
.paso-cap { display: flex; justify-content: space-between; gap: 14px; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.paso-cap a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; max-width: 48%; }
.paso-cap .next { text-align: right; margin-left: auto; }
.paso-cap .dir { font-size: var(--step--1); color: var(--accent); letter-spacing: 0.04em; }
.paso-cap .display { color: var(--paper-read); font-size: var(--step-0); }
.paso-cap a:hover .display { color: var(--paper); }
.paso-cap .vacio { flex: 1; }

/* ── En construcción ──────────────────────────────────────────────────── */
.en-construccion { margin-top: 1.6rem; padding: 1.4rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--read-soft); }
.en-construccion p { margin-block: 0.6rem; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.shell-bottom {
  max-width: var(--measure-wide); margin: 3rem auto 0; padding: 1.2rem clamp(20px, 5vw, 40px);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-top: 1px solid var(--line); color: var(--read-soft); font-size: var(--step--1);
}
.shell-bottom .abrir-frontera { color: var(--link); text-decoration: none; }
.shell-bottom .abrir-frontera:hover { color: var(--link-hover); }
.shell-bottom { flex-wrap: wrap; }
.pie-enlaces { display: inline-flex; align-items: center; gap: 16px; }
.pie-enlaces a, .pie-btn { color: var(--read-soft); text-decoration: none; }
.pie-btn { background: none; border: none; font: inherit; padding: 0; cursor: pointer; }
.pie-enlaces a:hover, .pie-btn:hover { color: var(--paper); }

/* ── «Acerca de» (dialog modal) ───────────────────────────────────────── */
/* margin:auto explícito: el reset de frontera.css (* { margin:0 }) descentraría el modal. */
.about {
  margin: auto; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  color: var(--paper-read); background: var(--ink-raised);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}
.about::backdrop { background: rgba(7, 9, 16, 0.72); backdrop-filter: blur(2px); }
.about-body { position: relative; padding: 22px 24px 20px; font-size: 1rem; line-height: 1.6; }
.about-close { position: absolute; top: 8px; right: 8px; }
.about-x { background: none; border: none; color: var(--paper-dim); font: inherit; font-size: 16px; line-height: 1; padding: 10px 12px; cursor: pointer; }
.about-x:hover { color: var(--paper); }
.about h2 { font-size: var(--step-2); color: var(--paper); line-height: 1.15; margin-right: 2em; }
.about-meta { margin-top: 0.3rem; font-size: var(--step--1); color: var(--paper-dim); }
.about p + p { margin-top: 0.8rem; }
.about strong { color: var(--term-key); font-weight: 400; }
.about .mono { color: var(--paper); }
.about a { color: var(--link); text-underline-offset: 2px; }
.about a:hover { color: var(--link-hover); }
.about-nota { font-size: var(--step--1); color: var(--read-soft); }
.about .about-links { margin-top: 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: var(--step--1); }

/* ── Aviso legal (public/legal.html): un documento que desplaza con normalidad ── */
.legal { max-width: var(--measure); margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(20px, 5vw, 40px) 3rem; font-size: 1rem; line-height: 1.65; }
.legal h1 { font-size: var(--step-3); line-height: 1.15; color: var(--paper); margin: 0.6em 0 0.2em; }
.legal h2 { font-size: var(--step-1); color: var(--paper); margin: 1.8em 0 0.4em; padding-top: 0.8em; border-top: 1px solid var(--line); }
.legal p, .legal li { margin: 0.5em 0 0; }
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--link); text-underline-offset: 2px; }
.legal a:hover { color: var(--link-hover); }
.legal strong { color: var(--paper); font-weight: 600; }
.legal-vuelta a { text-decoration: none; }
.legal-fecha { font-family: var(--font-mono); font-size: var(--step--1); color: var(--paper-dim); }
.legal-titular { margin-top: 0.7em; padding: 10px 12px; font-family: var(--font-mono); font-size: 0.9rem; background: var(--surface-inset); border: 1px solid var(--line); border-radius: 6px; }

/* ── Fallback (config/contenido no carga, p. ej. file://) ─────────────── */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); z-index: 90; transition: opacity var(--fade) var(--ease); }
.overlay.oculto { opacity: 0; pointer-events: none; }
.overlay-inner { max-width: 32rem; padding: 0 2rem; text-align: center; color: var(--read-soft); }
.overlay-inner .display { display: block; font-size: var(--step-3); color: var(--paper); margin-bottom: 1.2rem; }
.overlay-inner p { margin: 0.7rem 0; line-height: 1.6; }
.overlay-inner b { color: var(--accent); font-weight: 400; }
.overlay-inner .detalle { font-size: var(--step--1); color: var(--accent-dim); }

/* ── Animaciones ──────────────────────────────────────────────────────── */
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes aparece-rapido { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .marca-icono .estrella { animation: none; opacity: 1; }
  .progreso-scroll { transition: none; }
  .itinerario { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Móvil y táctil, sin rediseñar ────────────────────────────────────────
   Ajustes mínimos medidos a 375×812 y 390×844 (rebanada «móvil usable», 19-oct-2026): nada se sale y todo lo
   que se toca mide al menos 44 px con el dedo. Viven en max-width y pointer:coarse, así que el escritorio con
   ratón no cambia. Van AL FINAL de la hoja para ganar la cascada a las reglas base (test en mobile_css.test.js). */
@media (max-width: 600px) {
  /* El selector del zoo (cap. 7) medía 256 px y se salía 11 px a 375: ahora encoge con la barra. */
  .zoo-bar { display: flex; }
  .zoo-select { flex: 1 1 0; min-width: 0; }
}
@media (pointer: coarse) {
  .itinerario-btn, .apoya-btn, .acerca-btn, .oc-btn, .oc-seg-btn, .reto-marcar, .zoo-select, .zoo-num, .about-x,
  .oc-clavar { min-height: 44px; }
  .apoya-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
  .oc-btn, .about-x { min-width: 44px; }
  .marca { min-height: 44px; }
  .reto-ayuda summary { padding-block: 7px; } /* padding y no flex: flex le quitaría el triángulo ▸ */
  .orbit-controles input[type="checkbox"] { width: 22px; height: 22px; }
  /* El carril sigue midiendo 2 px a la vista; el relleno recortado agranda la zona que se puede tocar. */
  .orbit-controles input[type="range"] { height: 44px; padding: 21px 0; background-clip: content-box; }
  .orbit-controles input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .orbit-controles input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
  .pie-enlaces a, .pie-btn, .shell-bottom .abrir-frontera, .indice-pie .reiniciar-progreso, .legal-vuelta a {
    display: inline-block; padding: 12px 4px;
  }
}