/* ============================================================================
   The Scrolling Economy — CAPA DE NAVEGACION.  Mateo Ortiz, 2026-09-24.
   Fila R4 del brief `01-brief-creativo-edicion-web-libro.md` v1.4.

   Archivo aparte, como `ux.css` y `motion.css`.  No toca una linea de
   `book.css` (Andres), ni de `ux.css` (el quiz), ni de `motion.css`
   (Valentina).  Se retira quitando dos lineas del generador.

   ---------------------------------------------------------------------------
   EL PROBLEMA, MEDIDO
   ---------------------------------------------------------------------------
   El capitulo 3 mide 29.627 px a 390: TREINTA Y CINCO pantallas de telefono.
   De esas 35, la navegacion estaba en 1.  La barra de tres enlaces mide 90 px,
   es `position:static`, se va con el primer scroll y no vuelve.  En las 34
   pantallas restantes el lector no puede saber en que capitulo esta, en que
   parte, en que seccion, cuanto queda ni que viene despues.  Al final del
   capitulo, dos palabras grises: "Previous" y "Next".  Ninguna dice a donde.

   ---------------------------------------------------------------------------
   DE DONDE SALE LA FORMA — Y NO ES DE UNA WEB
   ---------------------------------------------------------------------------
   Del interior 7x10, que resolvio esto mismo en 216 paginas con dos elementos
   y ninguna palabra (`build/book_7x10.css`, lineas 47-52):

     .rh      6,5 pt · versalitas · letter-spacing .1em · --ink2 · margen de
              cabeza.  De que trata la pagina que estas mirando.
     .folio   8 pt · tabular-nums · con un CUADRADO de 6 pt del color de la
              parte al lado.  Donde estas en el objeto.

   Aqui se compone lo mismo en una linea, porque una pantalla no tiene verso y
   recto.  El orden es el del impreso: el folio en el borde exterior, el
   titulillo en el centro.

   Y la regla del impreso que hace que esto no rompa ningun contraste (D89):
   EL COLOR DE PARTE APARECE COMO CAMPO O COMO CUADRADO, NUNCA COMO TEXTO
   PEQUENO.  El cuadrado del folio es exactamente eso, y por eso el ambar
   (1,53:1 sobre crema) puede vivir aqui sin ser ilegible: no hay nada que leer
   en el, es un campo.

   NINGUN COLOR NUEVO.  Los tres de marca (cobalto #1F2BD1, ambar #FFB627, rosa
   #F7A6B1) ya estan en el sistema como --p1/--p2/--p3, con su par de campo y su
   tinta medidos en D89.  Esta hoja no declara un solo hex.

   ---------------------------------------------------------------------------
   POR QUE STICKY Y NO FIXED
   ---------------------------------------------------------------------------
   §14.5 del brief: `position:fixed` se da por roto en el Safari de Carlos y se
   evita.  Sticky ademas RESERVA SU CAJA, asi que el titulillo no tapa ni una
   linea de texto — un `fixed` opaco de 44 px se come las cuatro primeras lineas
   de cada salto de ancla y hay que compensarlo a mano.

   CERO CLS.  El generador emite el titulillo ya montado, con su alto declarado
   (--rh-h) y su caja reservada.  El JS solo escribe texto DENTRO de cajas que
   ya existen y atributos.  El mapa se abre en `position:absolute`: no empuja.

   ---------------------------------------------------------------------------
   LO QUE ESTA HOJA ARREGLA Y ESTABA ESCRITO COMO DEFECTO
   ---------------------------------------------------------------------------
   `ux.css` dejo dicho: «los titulos del censo son sr-only y un lector vidente
   nunca ve de que partes se compone el capitulo: es un defecto real».  El mapa
   es su reparacion — los diez nombres, visibles, con la misma notacion de regla
   que el censo y la tira, y los numeros de figura de cada seccion.
   ========================================================================= */

:root{
  --rh-h:44px;         /* el alto del titulillo.  Reservado, nunca calculado. */
  --rh-sq:10px;        /* el cuadrado del folio: los 6 pt del impreso */
  --rh-gap:14px;
  --rh-z:15;           /* debajo de la tira (20) y de cualquier <dialog> */
}
@media (max-width:640px){
  :root{--rh-sq:9px;--rh-gap:10px}
}

/* ==========================================================================
   1 · EL TITULILLO
   ========================================================================== */

/* El contenedor es de ancho completo para que el corte de papel llegue a los
   dos bordes de la pantalla, igual que hace la tira abajo.  El contenido de
   dentro se alinea a la caja del libro (--shell). */
.rh{position:sticky;top:0;z-index:var(--rh-z);
  background:var(--paper);
  /* --rule da 1,27:1 sobre el papel: el texto que pasa por debajo de la barra
     pegajosa se leia como una linea cortada. --ink2 da 4,61:1. */
  border-bottom:1px solid var(--ink2);
  /* saca la barra de los 32 px de padding de <main> y la lleva al borde */
  margin:0 calc(var(--pad) * -1);
  /* sin margen propio: el aire debajo de la banda ya lo pone --after-band, que
     Andres midio.  Un margen aqui solo se veria en el unico punto donde la barra
     esta en el flujo y sumaria 22 px al doblez de la apertura. */
  margin-bottom:0}

.rhbar{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);
  height:var(--rh-h);
  display:flex;align-items:center;gap:var(--rh-gap)}

/* ---- el folio: cuadrado + n/12, y es el enlace al indice ----------------- */
.rhfolio{display:flex;align-items:center;gap:7px;flex:0 0 auto;
  height:var(--rh-h);           /* objetivo tactil completo, SC 2.5.8 */
  text-decoration:none;color:var(--ink)}
.rhsq{width:var(--rh-sq);height:var(--rh-sq);flex:0 0 auto;
  background:var(--part);display:block}
.rhsq[data-p="1"]{background:var(--p1)}
.rhsq[data-p="2"]{background:var(--p2)}
.rhsq[data-p="3"]{background:var(--p3)}
/* sin parte (portada, fuentes, comprobado-y-no-impreso): la marca estructural,
   que dice "esto es del libro" y no "esta parte".  `--mark` ya trae su valor de
   noche (#8FA0FF), asi que aqui no hace falta nada. */
.rhsq[data-p="0"]{background:var(--mark)}

/* DE NOCHE EL CUADRADO USA LA TINTA, NO EL CAMPO.
   No es un color nuevo: D89 declara las dos caras de cada familia y dice para
   que sirve cada una — «CAMPO (con -on encima)» y «TINTA (texto, filete,
   INDICADOR)».  Medido sobre el papel de noche (#161514): el cobalto de campo
   da 2,02:1 y el cuadrado desaparece.  A 10 px deja de ser un campo y es un
   indicador, asi que le toca la tinta.  Con las tres tintas de noche que D89 ya
   nombra —#8FA0FF / #E0A733 / #F7A6B1— sale 7,50 · 8,46 · 9,59:1.  El ambar y
   el rosa de campo ya pasaban de noche (10,40 y 9,59); van a tinta igual para
   que la regla sea UNA y no una excepcion por familia.
   De dia el campo si se ve como campo y se queda como en el folio impreso.
   Mismos guardas que `book.css` para que `data-theme` mande sobre el sistema. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rhsq[data-p="1"]{background:var(--p1-ink)}
  :root:not([data-theme="light"]) .rhsq[data-p="2"]{background:var(--p2-ink)}
  :root:not([data-theme="light"]) .rhsq[data-p="3"]{background:var(--p3-ink)}
}
:root[data-theme="dark"] .rhsq[data-p="1"]{background:var(--p1-ink)}
:root[data-theme="dark"] .rhsq[data-p="2"]{background:var(--p2-ink)}
:root[data-theme="dark"] .rhsq[data-p="3"]{background:var(--p3-ink)}
.rhno{font-size:var(--micro);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}
.rhsl{color:var(--ink2);margin:0 .1em;font-weight:400}
.rhtot{color:var(--ink2);font-weight:400}
.rhfolio:hover .rhno{text-decoration:underline;text-underline-offset:3px}

/* ---- el centro: el titulillo propiamente dicho --------------------------- */
/* Tres huecos y el ancho decide cuantos se ven.  Es lo que hace un libro
   impreso: el verso lleva el titulo del LIBRO y el recto el del CAPITULO, y si
   la medida no da, se acorta.  Aqui el orden de sacrificio es el mismo.
   Nada de esto es esencial-solo-en-hover: los tres estan tambien en el mapa. */
/* line-height 1,35 y NO 1.  Con `line-height:1` mas `overflow:hidden`, la caja
   mide exactamente la altura de la fuente y el acento de una MAYUSCULA queda
   fuera: a 1200 el titulillo espanol leia "LA ECONOMIA DEL FEED" sin la tilde
   de la I, y en ingles no pasaba nada.  Es el §7 del contrato en una linea —
   no son dos traducciones, son dos maquetas—, y por eso esto se mira en los dos
   idiomas o no se mira.  El alto de la barra no cambia: lo fija `.rhbar`. */
.rhttl{margin:0;min-width:0;flex:1 1 auto;
  display:flex;align-items:baseline;gap:.62em;
  font-size:var(--micro);line-height:1.35;font-weight:500;
  text-transform:uppercase;letter-spacing:.085em;color:var(--ink2);
  white-space:nowrap;overflow:hidden}
.rhbook{display:none;flex:0 0 auto;color:var(--ink2)}
.rhch{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;color:var(--ink);line-height:1.35}
/* la seccion en curso.  La escribe el JS y solo aparece donde cabe. */
.rhsec{display:none;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;line-height:1.35;
  text-transform:none;letter-spacing:0;font-weight:400;
  font-family:var(--serif);font-size:var(--evidence);color:var(--ink2)}
.rhsec:not(:empty)::before{content:"";display:inline-block;width:1.1em}

/* ---- la derecha: el boton del mapa --------------------------------------- */
/* NO es una hamburguesa y no lleva icono de tres rayas (regla 6 del playbook).
   Lleva la notacion del propio libro: la cifra "4/10" en tabular-nums y, debajo,
   la MISMA regla de 2 px que dibuja `.census .ticks a`.  Es el mismo objeto que
   el censo, no uno que se le parece. */
.rhmap{flex:0 0 auto;display:flex;align-items:center;gap:.55em;
  height:var(--rh-h);padding:0;margin:0;border:0;background:none;
  font:inherit;font-size:var(--micro);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.rhmapl{display:none;text-transform:uppercase;letter-spacing:.085em;
  font-weight:500;color:var(--ink2);line-height:1.35}
/* En un capitulo el boton lleva la cifra "4/10", que ya es algo que leer.  En
   Fuentes y en Comprobado-y-no-impreso no hay secciones y por tanto no hay
   cifra: sin el rotulo quedaba un filete de 26 px sin nombre, que es justo el
   boton-misterio que este sistema no usa.  Ahi el titulo es corto y cabe. */
[data-rh="page"] .rhmapl{display:block}
/* ...y como ahi el rotulo se ve en todos los anchos, el del panel sobra en todos
   los anchos: "CONTENTS" dos veces a 40 px de distancia. */
[data-rh="page"] .maptop{display:none}
[data-rh="page"] .mapsecs > .maplist{margin-top:.15rem}
.rhcount{font-variant-numeric:tabular-nums lining-nums;font-weight:600;
  letter-spacing:.01em;line-height:1}
/* Dos digitos SIEMPRE reservados.  `tabular-nums` iguala el ancho de cada cifra
   pero no el numero de cifras: al pasar de la seccion 9 a la 10 la caja crecia
   y empujaba el filete del boton.  Medido: tres saltos de 0,00008 leyendo el
   capitulo 3 entero.  Pequeno, pero el numero de esta pagina es CERO. */
.rhi{display:inline-block;min-width:2ch;text-align:right}
/* la regla del censo, en horizontal y a la derecha de la cifra */
.rhmapr{display:block;width:26px;height:var(--rh-sq);
  border-top:2px solid var(--ink);align-self:center}
.rhmap:hover .rhmapr{border-top-width:4px}
.rhmap[aria-expanded="true"] .rhmapr{border-top-width:4px;border-top-color:var(--ink)}

/* ==========================================================================
   2 · EL MAPA — el censo desplegado, con nombres
   ========================================================================== */

/* `position:absolute` dentro del sticky: se dibuja ENCIMA del texto y no
   empuja una sola linea, asi que no puede sumar CLS ni mover la lectura.
   `hidden` y no `visibility`: esta caja no tiene que ocupar sitio cuando esta
   cerrada — la clausula A3 habla de lo que se oculta POR MODO y debe conservar
   su hueco, y un desplegable no es eso. */
.mapsheet{position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--ink);
  max-height:calc(100vh - var(--rh-h));
  max-height:calc(100dvh - var(--rh-h));
  overflow-y:auto;overscroll-behavior:contain}
.mapsheet[hidden]{display:none}
.mapin{max-width:var(--shell);margin:0 auto;padding:1.25rem var(--pad) 1.5rem}

.maplab{margin:0 0 .5em;font-size:var(--micro);font-weight:500;line-height:1.3;
  text-transform:uppercase;letter-spacing:.085em;color:var(--ink2)}
.maptop{color:var(--ink2)}

/* ---- las secciones -------------------------------------------------------
   Cada linea ES una raya del censo con su nombre debajo.  La notacion se copia
   tramo a tramo de `.census .ticks` y de `.spend .seg`: solido = leido en
   origen, --ink2 = resumen y registro, discontinuo = registro / preprint,
   punteado = marco del propio libro, doble = todavia en revision.
   La profundidad NUNCA se marca con color (D84). */
.maplist{list-style:none;margin:0;padding:0}
.maplist li{margin:0 0 2px}
.maplist a{display:flex;align-items:baseline;gap:.7em;
  padding:.5em 0 .62em;text-decoration:none;color:var(--ink);
  border-top:2px solid var(--ink)}
.maplist li[data-depth="abstract"] a{border-top-color:var(--ink2)}
.maplist li[data-depth="record"] a,
.maplist li[data-depth="preprint"] a{border-top-style:dashed;border-top-color:var(--ink2)}
.maplist li[data-none] a{border-top-style:dotted;border-top-color:var(--ink2)}
/* la doble, que es la forma que no usa ningun otro estado: "aqui el libro
   todavia no se ha comprobado".  Va en ocre --p2-ink (4,88:1), no en ladrillo:
   el ladrillo esta retirado del sistema (D88). */
.maplist li[data-none="revisar"] a{border-top-style:double;border-top-width:4px;
  border-top-color:var(--p2-ink)}

.mapno{flex:0 0 auto;min-width:calc(1.6ch + var(--rh-sq) + .5em);font-size:var(--micro);font-weight:500;
  font-variant-numeric:tabular-nums lining-nums;color:var(--ink2);line-height:1.35}
.mapname{flex:1 1 auto;min-width:0;font-size:var(--evidence);line-height:1.35}
/* los numeros de figura de esa seccion: como se vuelve a un grafico que viste */
.mapfigs{flex:0 0 auto;display:flex;gap:.45em;
  font-size:var(--micro);font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink2);line-height:1.35}
.mapfigs b{font-weight:500}

/* donde estas.  Cuadrado de la parte + el nombre en tinta plena: el mismo
   cuadrado del folio, que es lo unico que este sistema usa para decir "aqui".
   El hueco del cuadrado esta SIEMPRE reservado dentro del numero — vacio en las
   otras nueve — para que la columna de cifras no se mueva al cambiar de seccion.
   Una marca que desplaza la maqueta no senala dentro de ella. */
.mapno::before{content:"";display:inline-block;
  width:var(--rh-sq);height:var(--rh-sq);margin-right:.5em;
  vertical-align:-.02em;background:none}
.maplist li[data-here] a{border-top-width:4px}
.maplist li[data-here] .mapno::before{background:var(--part)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .maplist li[data-here] .mapno::before{background:var(--part-ink)}
}
:root[data-theme="dark"] .maplist li[data-here] .mapno::before{background:var(--part-ink)}
.maplist li[data-here] .mapname{color:var(--ink);font-weight:600}
.maplist li[data-here] .mapno{color:var(--ink)}

/* gastado: la MISMA marca de la tira — 2 x 7 px de tinta en el extremo del
   tramo.  No es un color nuevo ni un icono: es el trinquete, quieto. */
.maplist li[data-spent]{position:relative}
.maplist li[data-spent]::after{content:"";position:absolute;right:0;top:0;
  width:2px;height:7px;background:var(--ink)}
.maplist li[data-spent] .mapname{color:var(--ink2)}
.maplist li[data-spent][data-here] .mapname{color:var(--ink)}

.maplist a:hover .mapname{text-decoration:underline;text-underline-offset:3px}

/* ---- los doce capitulos (en Fuentes y en Comprobado-y-no-impreso) -------- */
.mapchs li a{border-top:1px solid var(--rule);align-items:center}
.mapchs .mapno::before{display:none}
.mapchs .mapno{min-width:1.6ch}
.mapchs li.mapopen a{border-top:2px solid var(--ink)}
.mapchs .mapname{font-size:var(--evidence)}

/* ---- la columna de destinos --------------------------------------------- */
.mapgo{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--ink)}
.mapnext{display:flex;align-items:baseline;gap:.7em;text-decoration:none;
  color:var(--ink);margin-bottom:1.1rem}
.mapnext .mapname{font-size:var(--claim);line-height:1.2;font-family:var(--serif)}
/* aqui el cuadrado ya viene en el HTML: el hueco reservado del numero sobra y
   abria 20 px de nada entre el cuadrado y la cifra. */
.mapnext .mapno::before{display:none}
.mapnext .mapno{min-width:0}
.mapnext:hover .mapname{text-decoration:underline;text-underline-offset:3px}
.mapnext .rhsq{align-self:center}

.mapdest{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.35em 1.4em}

/* ---- el apagado de la pasada de feed ------------------------------------
   No es mio: `ux.js` lo trae aqui a proposito (el sitio anterior era la barra
   de tres enlaces, que ya no existe).  Aqui solo se le da su hueco, porque sin
   el aterrizaba como tercer hijo de la reticula y caia debajo de la columna de
   secciones, suelto y con su filete discontinuo a media pagina.
   Va con los destinos y no con las secciones: es una preferencia sobre COMO se
   comporta la pagina, no un sitio al que ir. */
.mapin > .uxpref{margin:1.2rem 0 0;padding-top:.9rem;
  border-top:1px solid var(--rule);
  font-size:var(--micro);color:var(--ink2)}
.mapdest a{display:block;padding:.45em 0;font-size:var(--evidence);
  color:var(--ink);text-decoration:none}
.mapdest a:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   3 · EL CIERRE DEL CAPITULO
   ==========================================================================
   Sustituye a `<nav class="pager">`, que eran dos palabras grises de 15 px
   despues de 35 pantallas y no decian a donde llevaban.  Lo que hace falta al
   terminar es el NOMBRE de lo que viene.  Y si el capitulo siguiente abre
   parte, su cuadrado cambia de color: el cambio de parte se ve antes de leer.
   ========================================================================== */

/* El margen negativo no es un apano: `main` lleva `padding-bottom:7rem` (112 px)
   dimensionado para el pager de dos palabras que aqui se retira, y el quiz suma
   otros 42.  Sin absorberlo quedan 154 px de nada entre el filete de cierre del
   quiz y "NEXT" — a 390 es casi un quinto de pantalla vacia, y se lee como que
   la pagina acabo y luego aparecio algo.  Con -4,5rem quedan 82: un respiro de
   fin de capitulo, no un hueco. */
.chclose{max-width:var(--shell);margin:-4.5rem auto 0;padding:0 var(--pad) 6rem}
.clab{margin:0 0 .55em;font-size:var(--micro);font-weight:500;line-height:1.3;
  text-transform:uppercase;letter-spacing:.085em;color:var(--ink2)}
.cnext{display:flex;align-items:baseline;gap:.7em;
  max-width:var(--prose);
  padding:.7em 0 .8em;border-top:2px solid var(--ink);
  text-decoration:none;color:var(--ink)}
.cnext .rhsq{align-self:center;width:calc(var(--rh-sq) * 1.6);
  height:calc(var(--rh-sq) * 1.6)}
.cno{flex:0 0 auto;font-size:var(--evidence);font-weight:500;color:var(--ink2);
  font-variant-numeric:tabular-nums lining-nums}
.cttl{flex:1 1 auto;min-width:0;font-family:var(--serif);
  font-size:calc(var(--claim) * 1.35);line-height:1.15}
.carr{flex:0 0 auto;color:var(--ink2);font-size:var(--claim)}
.cnext:hover .cttl{text-decoration:underline;text-underline-offset:4px}
.cnext:hover .carr{color:var(--ink)}
/* el capitulo siguiente abre parte: la regla se engrosa igual que el abre-parte
   del indice.  Un cambio de parte no es un capitulo mas. */
.cnext[data-open="1"]{border-top-width:4px}

.cdest{list-style:none;margin:1.5rem 0 0;padding:0;max-width:var(--prose);
  display:flex;flex-wrap:wrap;gap:.35em 1.6em}
.cdest a{display:flex;align-items:baseline;gap:.5em;padding:.5em 0;
  font-size:var(--evidence);color:var(--ink2);text-decoration:none;
  border-bottom:1px solid var(--rule)}
.cdest a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cdest .rhsq{align-self:center}
.cdno{font-variant-numeric:tabular-nums lining-nums}

/* ==========================================================================
   4 · EL SALTO DE ANCLA NO SE METE DEBAJO DE LA BARRA
   ==========================================================================
   El defecto clasico de toda cabecera pegajosa: pinchas una seccion del mapa y
   el titulo aterriza tapado.

   UN SOLO MECANISMO NUEVO, Y ES `scroll-padding-top` EN EL CONTENEDOR.  Puesto
   a la vez con un `scroll-margin-top` propio en los destinos, los dos SE SUMAN:
   medido, el h2 aterrizaba a 112 px en vez de a 56.  Y `book.css` YA declara
   `scroll-margin-top:32px` en los titulos, asi que aqui solo hace falta la
   altura de la barra: 44 + 32 = 76 px, que es el margen de cabeza del impreso.
   Anadir mas es declarar tres veces lo mismo.

   El destino de una raya del censo y de una linea del mapa es el TITULO de la
   seccion (`#h-<cap>-<n>`), no la seccion: en el DOM la seccion abre con su
   carril de fuentes y a 390 ese carril es un bloque entero, asi que aterrizar
   en `#sec-XXXX` dejaba el titulo fuera de pantalla, por debajo.
   ========================================================================== */
:root{scroll-padding-top:var(--rh-h)}

/* ==========================================================================
   5 · FOCO
   ==========================================================================
   `book.css` ya declara el anillo global (2 px de tinta + halo de crema,
   15,36:1 sobre papel).  Aqui solo se le da sitio donde la caja llega al borde,
   para que el anillo no quede cortado por el overflow del titulillo.
   ========================================================================== */
.rhfolio:focus-visible,.rhmap:focus-visible{outline-offset:-3px}
.mapsheet a:focus-visible,.chclose a:focus-visible{outline-offset:2px}

/* ==========================================================================
   6 · ANCHOS
   ==========================================================================
   390 · folio + titulo del capitulo + cifra.  Tres datos, ni uno de adorno.
   810 · entra el rotulo del boton y el titulo del libro.
  1200 · entra la seccion en curso en el titulillo (esto es "el carril que en
         telefono no cabe": en escritorio el titulillo puede llevar el verso y
         el recto a la vez) y el mapa se abre a dos columnas sobre la reticula
         del libro — 686 de secciones + 110 de calle + 244 de destinos, que es
         exactamente la maqueta del capitulo.  Un indice compuesto en la misma
         reticula que el texto, no un panel flotante.
   ========================================================================== */

@media (min-width:810px){
  .rhmapl{display:block}
  /* con el rotulo visible en el boton, el mismo rotulo repetido 50 px mas abajo
     dentro del panel es un elemento de mas que no anade nada (P4). */
  .maptop{display:none}
  .mapsecs > .maplist{margin-top:.15rem}
  .rhbook{display:block}
  .rhbook::after{content:"";display:inline-block;width:.62em}
  .rhbook + .rhch::before{content:"·";margin-right:.62em;color:var(--rule)}
}

@media (min-width:1200px){
  .rhsec{display:block}
  .mapin{display:grid;
    grid-template-columns:var(--prose) var(--rail);
    grid-template-rows:auto 1fr;
    column-gap:var(--gutter);align-items:start;
    padding-top:1.6rem;padding-bottom:1.8rem}
  /* la columna de secciones ocupa las dos filas; la de al lado apila los
     destinos y, debajo, la preferencia que trae `ux.js`. */
  .mapsecs{grid-column:1;grid-row:1 / span 2}
  .mapgo{grid-column:2;grid-row:1}
  .mapin > .uxpref{grid-column:2;grid-row:2;align-self:start;margin-top:1.1rem}
  .mapgo{margin-top:0;padding-top:0;border-top:0}
  .mapdest{display:block}
  .mapdest a{padding:.42em 0}
  .mapdest li + li{border-top:1px solid var(--rule)}
  .mapnext{display:block;margin-bottom:1.3rem}
  .mapnext .rhsq{display:inline-block;margin-right:.5em;vertical-align:.02em}
  .mapnext .mapno{display:inline;margin-right:.35em}
  .mapnext .mapname{display:block;margin-top:.25em}
  .chclose{padding-bottom:7rem}
}

/* ==========================================================================
   8 · EL INDICE DICE LO MISMO QUE EL MAPA
   ==========================================================================
   El mapa del libro (en Fuentes) pinta los doce capitulos con el cuadrado de su
   parte: cobalto 1-3, ambar 4-8, rosa 9-12.  El indice imprimia los TRES abre-
   parte en cobalto, asi que las dos vistas de la misma estructura se
   contradecian — y la contradiccion la introduje yo al hacer el mapa.

   La causa: `book.css` compone `.toc li.part .pname` con `color:var(--part-ink)`
   y en la portada el `<body>` lleva `data-part="0"`, asi que `--part-ink` cae al
   de la parte 1 para los tres.  Los selectores que reparten el color por parte
   quedaron retirados en D84-B y solo repartian `--part`, no `--part-ink`.

   D89 ya revoco aquel retiro con las palabras de Carlos («tenemos tres colores
   de marca definidos por el libro»): esto no decide nada, solo lo aplica donde
   no habia llegado.  Ningun hex nuevo — las tres tintas ya cambian solas con el
   tema (7,90 · 4,88 · 6,26 de dia; 7,50 · 8,46 · 9,59 de noche).
   Se revierte borrando estas tres lineas.
   ========================================================================== */
.toc li.part.p1{--part-ink:var(--p1-ink)}
.toc li.part.p2{--part-ink:var(--p2-ink)}
.toc li.part.p3{--part-ink:var(--p3-ink)}

/* la portada: la pagina ya es el mapa, la barra solo lleva los destinos */
.rhgo{margin:0;flex:0 0 auto;display:flex;gap:1.2em;align-items:center}
.rhgo a{font-size:var(--micro);line-height:1.35;text-transform:uppercase;letter-spacing:.085em;
  font-weight:500;color:var(--ink2);text-decoration:none;
  padding:.5em 0;border-bottom:1px solid var(--rule)}
.rhgo a:hover{color:var(--ink);border-bottom-color:var(--ink)}
[data-rh="cover"] .rhttl{flex:1 1 auto}

/* ==========================================================================
   7 · MOVIMIENTO
   ==========================================================================
   Esta hoja NO DECLARA UNA SOLA `transition`, `animation` NI `@keyframes`.
   Las unicas apariciones de esas tres palabras en el archivo son las de este
   parrafo; fuera de los comentarios no hay ninguna declaracion.

   Por eso aqui no hay bloque de reduced motion: no habria nada que apagar, y
   una regla que no apaga nada es peor que ninguna — parece una salvaguarda y no
   lo es.  El estado con la preferencia puesta y sin ella es EL MISMO, que es la
   version mas fuerte del requisito del contrato §3.

   El mapa abre y cierra en seco y el titulillo cambia de texto sin transicion,
   que es como cambia un titulillo cuando pasas la pagina de un libro: ya esta
   ahi.  Si hace falta coreografia, la cablea Valentina contra estas clases; la
   spec y el punto exacto donde engancharla van en
   `feedback/2026-09-25-mateo-a-valentina-navegacion.md`.

   Tampoco hay `scroll-behavior:smooth` en ninguna parte: el salto de una linea
   del mapa es instantaneo.  Regla 6 del playbook, y ademas un scroll suave de
   28.000 px seria un viaje, no una navegacion.
   ========================================================================== */

@media print{
  /* la barra y el mapa son instrumentos de scroll: en papel no significan nada.
     El cierre SI se imprime — dice cual es el capitulo siguiente, que en papel
     sigue siendo cierto. */
  .rh{display:none}
  .chclose{padding-bottom:0}
}