/* ==========================================================================
   /modelo-ukamau — hoja de la página. Se carga después de style.css y sólo
   añade los componentes que esta página necesita; los tokens, la retícula,
   la tipografía y la accesibilidad vienen del sistema global.

   Ver .claude/skills/feman-design-system/references/modelo-ukamau.md

   Principio: el Modelo Ukamau se representa como una experiencia territorial
   sistematizada. La página no convence, muestra el trabajo hecho. De ahí que
   la estructura la den las líneas y la retícula, no las cajas: la versión
   anterior tenía 173 elementos con radio, 47 con sombra y 42 cajas en
   17.400 px, y todo pesaba lo mismo.
   ========================================================================== */

.modelo {
  --nav-alto: 52px;   /* alto de la navegación interna, para los anclajes */
}

/* Anclaje bajo la cabecera fija + la navegación interna */
.modelo :where(section[id], article[id]) { scroll-margin-top: calc(72px + var(--nav-alto) + 16px); }
@media (max-width: 1023px) { .modelo :where(section[id], article[id]) { scroll-margin-top: calc(64px + var(--nav-alto) + 12px); } }

/* --------------------------------------------------------------------------
   HERO — la apertura es la organización, no el edificio: el barrio construido
   ya abre la portada del sitio. Aquí manda la comunidad movilizada.
   -------------------------------------------------------------------------- */
.mu-hero { background: var(--ink); color: var(--ink-invert-2); padding: 0; }
.mu-hero .mu-hero-grid { display: grid; grid-template-columns: 1fr; }
.mu-hero figure { position: relative; margin: 0; order: -1; }
.mu-hero figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 42%; }
.mu-hero figcaption { padding: 10px var(--pad-x-sm) 0; color: var(--ink-invert-3); max-width: 62ch; }
.mu-hero-texto { padding: var(--s-6) var(--pad-x-sm) var(--s-7); }
.mu-hero .kicker { color: var(--gold); }
.mu-hero h1 { color: #fff; max-width: 17ch; margin-bottom: var(--s-4); }
.mu-hero .mu-def { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-invert-2); max-width: 58ch; }

/* Dos cifras de apertura: la evidencia entra antes que cualquier argumento */
.mu-hero-cifras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-5); border-top: 1px solid var(--rule-invert);
}
.mu-hero-cifras div { padding: var(--s-4) var(--s-4) 0 0; }
.mu-hero-cifras div + div { border-left: 1px solid var(--rule-invert); padding-left: var(--s-4); }
.mu-hero-cifras b { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 700; color: #fff; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.mu-hero-cifras span { display: block; font-size: var(--fs-caption); color: var(--ink-invert-3); margin-top: var(--s-2); line-height: var(--lh-tight); }

@media (min-width: 768px) {
  .mu-hero-texto { padding: var(--s-7) var(--pad-x-md); }
  .mu-hero figure img { aspect-ratio: 16 / 9; }
  .mu-hero figcaption { padding-inline: var(--pad-x-md); }
}
@media (min-width: 1024px) {
  .mu-hero .mu-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; min-height: 600px; }
  .mu-hero figure { order: 0; overflow: hidden; }
  .mu-hero figure img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .mu-hero figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none;
    background: rgba(23,22,20,.88); color: rgba(255,255,255,.86);
    padding: 12px var(--s-5); font-size: var(--fs-caption); line-height: 1.35;
  }
  .mu-hero-texto {
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s-8) var(--s-7) var(--s-8) max(var(--pad-x), calc((100vw - var(--max-w)) / 2));
  }
}

/* --------------------------------------------------------------------------
   NAVEGACIÓN INTERNA — la página es larga a propósito; debe poder recorrerse.
   Discreta y editorial: una fila de enlaces con regla, no una barra de app.
   -------------------------------------------------------------------------- */
.mu-nav { position: sticky; top: 72px; z-index: 90; background: var(--white); border-bottom: 1px solid var(--rule); }
@media (max-width: 1023px) { .mu-nav { top: 64px; } }
.mu-nav ul {
  list-style: none; display: flex; gap: var(--s-5); max-width: var(--max-w);
  margin-inline: auto; padding-inline: var(--pad-x);
  overflow-x: auto; scrollbar-width: none;
}
.mu-nav ul::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) { .mu-nav ul { padding-inline: var(--pad-x-md); gap: var(--s-4); } }
@media (max-width: 767px)  { .mu-nav ul { padding-inline: var(--pad-x-sm); } }
.mu-nav a {
  display: block; white-space: nowrap; padding: 15px 0 13px;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.mu-nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.mu-nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--brick); }

/* --------------------------------------------------------------------------
   BLOQUE EDITORIAL BASE
   -------------------------------------------------------------------------- */
.mu-bloque { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
@media (min-width: 1024px) {
  .mu-bloque { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
}
.modelo p { color: var(--ink-soft); }
.modelo .band-ink p { color: var(--ink-invert-2); }
.modelo .lead + p, .modelo p + p { margin-top: var(--s-3); }
.modelo strong { color: var(--ink); }
.modelo .band-ink strong { color: #fff; }

/* Definición destacada: la voz del documento canónico */
.mu-definicion {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.4;
  color: var(--ink); border-left: 3px solid var(--brick); padding: var(--s-2) 0 var(--s-2) var(--s-4);
  max-width: 30ch;
}
.band-ink .mu-definicion { color: #fff; border-left-color: var(--gold); }

/* Preguntas: lo que el Modelo pone en juego */
.mu-preguntas { list-style: none; margin-top: var(--s-4); border-top: 1px solid var(--rule); max-width: 52ch; }
.mu-preguntas li {
  font-size: 1.08rem; font-weight: 600; color: var(--ink);
  padding: var(--s-3) 0 var(--s-3) var(--s-5); border-bottom: 1px solid var(--rule); position: relative;
}
.mu-preguntas li::before { content: '?'; position: absolute; left: 0; top: var(--s-3); color: var(--brick); font-weight: 700; }

/* «No es»: la delimitación negativa, en columna con reglas */
.mu-no-es { border-top: 2px solid var(--rule-strong); padding-top: var(--s-4); }
.mu-no-es h3 { margin-bottom: var(--s-3); }
.mu-no-es ul { list-style: none; display: grid; gap: 0; }
.mu-no-es li {
  font-size: var(--fs-small); color: var(--ink); padding: 9px 0 9px var(--s-4);
  border-bottom: 1px solid var(--rule); position: relative;
}
.mu-no-es li::before { content: '×'; position: absolute; left: 0; color: var(--brick-deep); font-weight: 700; }
.mu-no-es p { font-size: var(--fs-small); margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   CRONOLOGÍA — la genealogía. Cada hito dice qué cambió, no sólo qué pasó.
   -------------------------------------------------------------------------- */
.mu-crono { list-style: none; margin-top: var(--s-6); border-top: 2px solid var(--rule-strong); }
.mu-crono > li { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.mu-crono .anio {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.mu-crono .hecho { font-size: var(--fs-body); color: var(--ink); }
.mu-crono .cambio { display: block; font-size: var(--fs-small); color: var(--ink-soft); margin-top: 6px; max-width: 62ch; }
.mu-crono .fuente { margin-top: 6px; }
/* Los hitos que marcan un cambio de etapa pesan más */
.mu-crono > li.hito { border-bottom-color: var(--rule-strong); }
.mu-crono > li.hito .anio { color: var(--brick-deep); }
.mu-crono > li.hito .hecho { font-weight: 600; }
@media (min-width: 768px) {
  .mu-crono > li { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5); align-items: baseline; }
}

/* --------------------------------------------------------------------------
   EL CICLO — diagrama de plano: líneas finas y nodos rectangulares sobre
   tinta. Nada de nodos blancos flotando con sombra.
   -------------------------------------------------------------------------- */
.mu-ciclo { position: relative; width: min(660px, 100%); aspect-ratio: 1; margin: var(--s-6) auto var(--s-3); }
.mu-ciclo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mu-ciclo .arco { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mu-ciclo .arco-retorno { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 6 6; }
.mu-ciclo .rot { font-family: var(--text); font-size: 12px; font-weight: 600; fill: rgba(255,255,255,.8); letter-spacing: .04em; }
.mu-ciclo .rot tspan.g { fill: var(--gold); }
.mu-ciclo-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 36%; text-align: center; }
.mu-ciclo-centro strong { display: block; font-size: clamp(.95rem, 2.1vw, 1.2rem); color: #fff; line-height: 1.25; }
.mu-ciclo-centro span { display: block; font-size: var(--fs-caption); color: var(--ink-invert-3); margin-top: 6px; }
.mu-ciclo-nodo {
  position: absolute; width: 26%; transform: translate(-50%,-50%);
  background: var(--ink); color: #fff; border: 1px solid var(--gold);
  padding: 10px 8px; text-align: center; text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.mu-ciclo-nodo:hover, .mu-ciclo-nodo:focus-visible { background: var(--gold); color: var(--ink); }
.mu-ciclo-nodo:hover .n, .mu-ciclo-nodo:focus-visible .n { color: var(--ink); }
.mu-ciclo-nodo .n { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; color: var(--gold); }
.mu-ciclo-nodo .t { display: block; font-size: clamp(.72rem, 1.6vw, .92rem); font-weight: 700; line-height: 1.2; margin-top: 3px; }
.mu-ciclo-nodo.n1 { left: 50%;   top: 11.7%; }
.mu-ciclo-nodo.n2 { left: 83.2%; top: 30.8%; }
.mu-ciclo-nodo.n3 { left: 83.2%; top: 69.2%; }
.mu-ciclo-nodo.n4 { left: 50%;   top: 88.3%; }
.mu-ciclo-nodo.n5 { left: 16.8%; top: 69.2%; }
.mu-ciclo-nodo.n6 { left: 16.8%; top: 30.8%; }

/* Bajo 760px el círculo se sustituye por una lista vertical, no se encoge */
.mu-ciclo-lista { display: none; }
@media (max-width: 760px) {
  .mu-ciclo { display: none; }
  .mu-ciclo-lista { display: block; list-style: none; margin-top: var(--s-5); border-top: 1px solid var(--rule-invert); }
  .mu-ciclo-lista li { border-bottom: 1px solid var(--rule-invert); }
  .mu-ciclo-lista a { display: flex; gap: var(--s-3); align-items: baseline; padding: 14px 0; text-decoration: none; color: #fff; min-height: 48px; }
  .mu-ciclo-lista .n { font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; color: var(--gold); }
  .mu-ciclo-lista .t { font-weight: 700; }
  .mu-ciclo-lista .retorno { padding: 14px 0; font-size: var(--fs-small); color: var(--ink-invert-2); }
  .mu-ciclo-lista .retorno strong { color: var(--gold); }
}

/* --------------------------------------------------------------------------
   LOS SEIS COMPONENTES — filas editoriales numeradas, no tarjetas
   -------------------------------------------------------------------------- */
.mu-componentes { border-top: 2px solid var(--rule-strong); margin-top: var(--s-6); }
.mu-componente { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); }
.mu-componente .num {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--brick-deep);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.mu-componente h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -.015em; }
.mu-componente .funcion { font-size: var(--fs-lead); color: var(--ink); line-height: 1.5; margin-top: var(--s-2); max-width: 56ch; }
.mu-componente .detalle { margin-top: var(--s-4); }
.mu-componente figure { margin-top: var(--s-4); }
.mu-componente figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  .mu-componente { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-5); }
  .mu-componente .num { grid-row: span 2; }
}

/* «Incluye»: vocabulario del componente, separado por puntos medios, no chips */
.mu-incluye { list-style: none; display: flex; flex-wrap: wrap; margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); }
.mu-incluye li::after { content: ' · '; color: var(--rule); }
.mu-incluye li:last-child::after { content: ''; }
.mu-incluye li { margin-right: .4em; }

/* Frase del documento canónico */
.mu-frase {
  font-family: var(--serif); font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.4;
  color: var(--ink); border-left: 3px solid var(--brick); padding: var(--s-2) 0 var(--s-2) var(--s-4);
  margin-top: var(--s-4); max-width: 34ch;
}
.mu-frase.fuerte { font-weight: 700; }

/* Fórmula: lucha = movilización + propuesta + negociación */
.mu-formula {
  display: inline-block; margin-top: var(--s-3); padding: 10px var(--s-3);
  border: 1px solid var(--ink); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .02em; color: var(--ink);
}

/* --------------------------------------------------------------------------
   DISPOSITIVOS Y SOPORTES — columnas con reglas, sin tarjetas
   -------------------------------------------------------------------------- */
.mu-cols { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--rule-strong); margin-top: var(--s-6); }
.mu-cols > div { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.mu-cols h3 { font-size: var(--fs-h3); }
.mu-cols .verbo { font-size: var(--fs-small); font-weight: 600; color: var(--brick-deep); margin-top: var(--s-1); }
.mu-cols p { font-size: var(--fs-small); margin-top: var(--s-2); }
@media (min-width: 900px) {
  .mu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .mu-cols > div { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: none; border-right: 1px solid var(--rule); }
  .mu-cols > div:last-child { border-right: none; }
  .mu-cols > div + div { padding-left: var(--s-5); }
  .mu-cols.de-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Matriz dispositivo × componente: gramática de plano.
   En móvil no se hace scroll horizontal: se dice en una línea, que es lo que
   la matriz demuestra (los tres dispositivos están en los seis momentos). */
.mu-matriz { margin-top: var(--s-5); }
.mu-matriz table { border-collapse: collapse; width: 100%; }
.mu-matriz caption { caption-side: bottom; text-align: left; font-size: var(--fs-caption); color: var(--ink-mute); padding-top: var(--s-3); line-height: var(--lh-tight); }
.mu-matriz th {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); text-align: center; padding: 0 6px var(--s-2); border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom; line-height: 1.25;
}
.mu-matriz th.fila { text-align: left; text-transform: none; font-size: var(--fs-body); letter-spacing: 0; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.mu-matriz thead th.fila { border-bottom-color: var(--rule-strong); }
.mu-matriz td { border-bottom: 1px solid var(--rule); text-align: center; padding: var(--s-3) 6px; }
.mu-matriz td i { display: inline-block; width: 12px; height: 12px; background: var(--brick); }
@media (max-width: 767px) { .mu-matriz { display: none; } }
.mu-matriz-movil { display: none; }
@media (max-width: 767px) {
  .mu-matriz-movil { display: block; margin-top: var(--s-4); border-top: 1px solid var(--rule); }
  .mu-matriz-movil p { font-size: var(--fs-small); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); margin: 0; }
  .mu-matriz-movil strong { display: block; color: var(--ink); }
}

/* --------------------------------------------------------------------------
   MAESTRANZA 1 Y 2 — dos fichas de proyecto, con reglas
   -------------------------------------------------------------------------- */
.mu-barrios { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-6); border-top: 2px solid var(--rule-strong); }
.mu-barrio { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.mu-barrio .etapa { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-deep); }
.mu-barrio h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.015em; margin-top: var(--s-1); }
.mu-barrio dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin: var(--s-4) 0; padding: var(--s-3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mu-barrio dt { font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.mu-barrio dd { margin: 2px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mu-barrio dd b { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.mu-barrio ul { margin: var(--s-2) 0 0 var(--s-4); }
.mu-barrio li { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 4px; }
.mu-barrio .aprendizaje { font-size: var(--fs-small); border-left: 3px solid var(--brick); padding-left: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 900px) {
  .mu-barrios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-barrio { padding-right: var(--s-6); border-right: 1px solid var(--rule); }
  .mu-barrio:last-child { border-right: none; padding-right: 0; padding-left: var(--s-6); }
  .mu-barrio dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   EVIDENCIA — olas, hallazgos y la barra de convivencia
   -------------------------------------------------------------------------- */
.mu-olas { width: 100%; border-collapse: collapse; margin-top: var(--s-5); font-variant-numeric: tabular-nums; }
.mu-olas caption { caption-side: bottom; text-align: left; font-size: var(--fs-caption); color: var(--ink-mute); padding-top: var(--s-3); line-height: var(--lh-tight); max-width: 76ch; }
.mu-olas th { font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-align: left; padding: 0 var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--rule-strong); }
.mu-olas td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-soft); }
.mu-olas td:first-child { font-weight: 700; color: var(--ink); font-size: var(--fs-body); }
.mu-olas .num { text-align: right; padding-right: 0; font-weight: 600; color: var(--ink); }

.mu-hallazgos { border-top: 2px solid var(--rule-strong); margin-top: var(--s-6); }
.mu-hallazgo { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.mu-hallazgo .cifra {
  font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 700;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.mu-hallazgo .dice { font-size: var(--fs-body); color: var(--ink); max-width: 58ch; }
.mu-hallazgo .suma { display: block; font-size: var(--fs-small); color: var(--ink-soft); margin-top: 6px; }
@media (min-width: 768px) {
  .mu-hallazgo { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5); align-items: baseline; }
}

/* Barra de convivencia: una sola serie, en la escala del sistema */
.mu-barra { margin-top: var(--s-6); }
.mu-barra h3 { font-size: var(--fs-h3); }
.mu-barra .pista { display: flex; height: 28px; margin-top: var(--s-3); border: 1px solid var(--rule-strong); }
.mu-barra .pista span { display: block; height: 100%; }
.mu-barra .s1 { background: var(--brick); }
.mu-barra .s2 { background: var(--ink); }
.mu-barra .s3 { background: #8C877F; }
.mu-barra .s4 { background: #B9B3A9; }
.mu-barra .s5 { background: var(--paper-2); }
.mu-barra ul { list-style: none; display: grid; gap: 6px; margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); }
.mu-barra li { display: flex; gap: var(--s-2); align-items: baseline; }
.mu-barra i { flex: none; width: 12px; height: 12px; border: 1px solid var(--rule-strong); }
@media (min-width: 768px) { .mu-barra ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } }

/* Dos columnas honestas: lo demostrado y lo pendiente */
.mu-saber { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-6); border-top: 2px solid var(--rule-strong); }
.mu-saber > div { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.mu-saber h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.mu-saber ul { list-style: none; }
.mu-saber li { font-size: var(--fs-small); color: var(--ink); padding: 8px 0 8px var(--s-4); position: relative; border-bottom: 1px solid var(--rule); }
.mu-saber li:last-child { border-bottom: none; }
.mu-saber .demostrado li::before { content: '✓'; position: absolute; left: 0; color: var(--brick-deep); font-weight: 700; }
.mu-saber .pendiente li::before { content: '…'; position: absolute; left: 0; color: var(--ink-mute); font-weight: 700; }
@media (min-width: 900px) {
  .mu-saber { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .mu-saber > div { border-bottom: none; padding-right: var(--s-6); border-right: 1px solid var(--rule); }
  .mu-saber > div:last-child { border-right: none; padding-right: 0; padding-left: var(--s-6); }
}

/* --------------------------------------------------------------------------
   ACTORES · TRANSFERIBILIDAD · RIESGOS — listas con reglas
   -------------------------------------------------------------------------- */
.mu-actores { border-top: 2px solid var(--rule-strong); margin-top: var(--s-6); }
.mu-actor { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.mu-actor h3 { font-size: var(--fs-h3); }
.mu-actor p { font-size: var(--fs-small); }
.mu-actor .limite { display: block; font-size: var(--fs-small); color: var(--brick-deep); margin-top: 6px; }
.mu-actor.sujeto { background: var(--ink); color: var(--ink-invert-2); padding: var(--s-5) var(--s-5) var(--s-5) var(--s-4); border-bottom: none; }
.mu-actor.sujeto h3 { color: #fff; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.mu-actor.sujeto p { color: var(--ink-invert-2); font-size: var(--fs-body); }
.mu-actor.sujeto .rol { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
@media (min-width: 768px) {
  .mu-actor { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); align-items: baseline; }
  .mu-actor.sujeto { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.mu-transfer { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-6); border-top: 1px solid var(--rule-invert); }
.mu-transfer > div { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule-invert); }
.mu-transfer h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: var(--s-3); }
.mu-transfer ul { list-style: none; }
.mu-transfer li { font-size: var(--fs-small); color: var(--ink-invert-2); padding: 6px 0 6px var(--s-4); position: relative; }
.mu-transfer .nucleo li::before { content: '●'; position: absolute; left: 0; top: 9px; font-size: .55em; color: var(--gold); }
.mu-transfer .adaptable li::before { content: '◐'; position: absolute; left: 0; color: rgba(255,255,255,.65); font-size: .8em; }
.mu-transfer .no li::before { content: '×'; position: absolute; left: 0; color: rgba(255,255,255,.65); font-weight: 700; }
@media (min-width: 900px) {
  .mu-transfer { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-invert); }
  .mu-transfer > div { border-bottom: none; padding-right: var(--s-5); border-right: 1px solid var(--rule-invert); }
  .mu-transfer > div:last-child { border-right: none; padding-right: 0; }
  .mu-transfer > div + div { padding-left: var(--s-5); }
}

.mu-riesgos { list-style: none; margin-top: var(--s-5); border-top: 1px solid var(--rule-invert); columns: 1; }
.mu-riesgos li { font-size: var(--fs-small); color: var(--ink-invert-2); padding: 11px 0 11px var(--s-4); border-bottom: 1px solid var(--rule-invert); position: relative; break-inside: avoid; }
.mu-riesgos li::before { content: '!'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
@media (min-width: 900px) { .mu-riesgos { columns: 2; column-gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   CONOCIMIENTO — grito/regla, investigación y el libro como objeto
   -------------------------------------------------------------------------- */
.mu-gr { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-6); border-top: 2px solid var(--rule-strong); }
.mu-gr > div { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.mu-gr h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; color: var(--brick-deep); }
.mu-gr .regla h3 { color: var(--ink); }
.mu-gr p { font-size: var(--fs-small); margin-top: var(--s-2); }
@media (min-width: 768px) {
  .mu-gr { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .mu-gr > div { border-bottom: none; padding-right: var(--s-6); border-right: 1px solid var(--rule); }
  .mu-gr > div:last-child { border-right: none; padding-right: 0; padding-left: var(--s-6); }
}

.mu-conocimiento { list-style: none; border-top: 2px solid var(--rule-strong); margin-top: var(--s-6); }
.mu-conocimiento li { display: grid; grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.mu-conocimiento .tipo { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-deep); }
.mu-conocimiento .ref { font-size: var(--fs-body); color: var(--ink); max-width: 68ch; }
.mu-conocimiento .meta { display: block; font-size: var(--fs-small); color: var(--ink-soft); margin-top: 6px; }
@media (min-width: 768px) {
  .mu-conocimiento li { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5); align-items: baseline; }
}

/* El libro, como objeto de la sistematización y no como anuncio */
.mu-libro { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid var(--rule-strong); }
.mu-libro img { width: 100%; max-width: 180px; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 18px 34px -18px rgba(23,22,20,.45); }
.mu-libro p { font-size: var(--fs-small); }
@media (min-width: 768px) {
  .mu-libro { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .mu-libro img { max-width: 200px; }
}

/* Reconocimientos */
.mu-reco { list-style: none; border-top: 2px solid var(--rule-strong); margin-top: var(--s-6); }
.mu-reco li { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.mu-reco b { font-size: var(--fs-body); color: var(--ink); }
.mu-reco p { font-size: var(--fs-small); }
.mu-reco cite { display: block; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink); margin-top: 6px; }
@media (min-width: 768px) {
  .mu-reco li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); align-items: baseline; }
}

/* --------------------------------------------------------------------------
   CIERRE
   -------------------------------------------------------------------------- */
.mu-cierre .lead { max-width: 62ch; }
.mu-cierre .cita { font-size: var(--fs-caption); color: var(--ink-invert-3); max-width: 78ch; margin-top: var(--s-5); line-height: var(--lh-tight); }
.mu-cierre .cita a { color: #fff; }

/* Nota al pie de una sección: fuente, método o regla de lectura */
.mu-nota {
  font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s-4);
  border-left: 3px solid var(--rule); padding-left: var(--s-3); max-width: 74ch;
}
.band-ink .mu-nota { color: var(--ink-invert-2); border-left-color: var(--rule-invert); }

@media print {
  .mu-nav, .modelo .acciones, .mu-hero .acciones { display: none; }
  .mu-hero, .band-ink { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   DENSIDAD EDITORIAL
   --------------------------------------------------------------------------
   La primera versión conservaba todo el contenido pero lo componía en filas
   de una sola columna: quedó en 23.695 px, un 36 % más alta que la página
   antigua con el mismo texto. El problema no era el contenido sino
   desaprovechar la retícula de 12 columnas. Aquí se recupera la densidad sin
   tocar ni una palabra: pares de columnas donde el orden de lectura lo
   permite, y un ritmo interno algo más ceñido en las listas largas.
   ========================================================================== */

/* Los componentes reparten nombre y desarrollo en dos columnas reales */
@media (min-width: 1024px) {
  .mu-componente { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5); align-items: start; padding: var(--s-5) 0; }
  .mu-componente .num { grid-row: auto; }
  .mu-comp-cab .funcion { margin-top: var(--s-2); }
  .mu-comp-cuerpo .mu-incluye { margin-top: 0; }
  .mu-comp-cuerpo .mu-frase { max-width: none; }
  .mu-comp-cuerpo .detalle { margin-top: var(--s-3); }
}

/* Hallazgos y actores de a dos: siguen siendo filas con regla, no tarjetas */
@media (min-width: 1024px) {
  .mu-hallazgos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .mu-hallazgo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-4); padding: var(--s-4) 0; }
  .mu-hallazgo .cifra { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }

  .mu-actores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .mu-actor { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; }
  .mu-actor.sujeto { grid-column: 1 / -1; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); }
}

/* Ritmo interno de las listas largas */
.mu-crono > li { padding: 18px 0; }
.mu-conocimiento li { padding: 18px 0; }
.mu-reco li { padding: 20px 0; }
.modelo .mt-48 { margin-top: 40px; }

/* La fotografía del barrio es apaisada: a 3/4 y ancho completo medía
   1.650 px de alto y desequilibraba la sección. */
.mu-foto-barrio { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 62%; }

/* Ritmo de las columnas de dispositivos y soportes: el texto es corto y la
   caja generosa los separaba más de lo que su contenido pide. */
.mu-cols > div { padding: 20px 0; }
@media (min-width: 900px) { .mu-cols > div { padding: var(--s-4) var(--s-5) var(--s-4) 0; } }
.mu-actor { padding: 18px 0; }
.mu-hallazgo { padding: 20px 0; }

/* ==========================================================================
   CORRECCIONES DE LA VERIFICACIÓN
   ========================================================================== */

/* El hero es una banda de tinta pero no lleva la clase .band-ink, así que el
   enlace se quedaba en ladrillo sobre negro: 2,29:1. */
.mu-hero .enlace { color: #fff; border-bottom-color: var(--gold); }
.mu-hero .enlace:hover { color: var(--gold); }

/* Anchos de la barra de convivencia. Son resultados publicados y fijos, así
   que viven en la hoja y no como style= en el HTML. */
.mu-barra .w-98  { width: 9.8%; }
.mu-barra .w-529 { width: 52.9%; }
.mu-barra .w-216 { width: 21.6%; }
.mu-barra .w-10  { width: 1%; }
.mu-barra .w-147 { width: 14.7%; }

/* Medida de línea: el cuerpo de la cronología y las notas se pasaban de 80
   caracteres en pantallas anchas. */
.mu-crono .hecho { max-width: 64ch; }
.mu-nota { max-width: 66ch; }
.mu-cierre .cita { font-size: var(--fs-small); max-width: 68ch; }

/* La portada dentro del bloque del libro pasó a <figure>: el grid apunta ahora
   a la figura, no a la imagen suelta. */
.mu-libro > figure { margin: 0; }
.mu-libro figure img { width: 100%; max-width: 180px; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 18px 34px -18px rgba(23,22,20,.45); }
.mu-libro figcaption { max-width: 200px; }
@media (min-width: 768px) { .mu-libro figure img { max-width: 200px; } }

/* Especificidad: `.modelo p` y `.modelo .band-ink p` ganaban sobre
   `.mu-definicion`, así que la frase canónica salía en gris sobre tinta
   (2,4:1) en el hero y en transferibilidad. Se iguala la especificidad. */
.modelo .mu-definicion { color: var(--ink); }
.modelo .mu-hero .mu-definicion,
.modelo .band-ink .mu-definicion { color: #fff; border-left-color: var(--gold); }

/* ==========================================================================
   EL CICLO EN MÓVIL: que se lea como ciclo, no como seis pasos sueltos
   --------------------------------------------------------------------------
   La lista conservaba los seis componentes y el retorno, pero la relación
   circular sólo estaba dicha con palabras: visualmente eran seis filas
   independientes, y el retorno parecía un séptimo elemento porque lo separaba
   la misma regla que a los demás.

   Se traslada la gramática del diagrama de escritorio: línea continua en oro
   recorriendo los seis componentes —como los arcos— y línea discontinua con
   una flecha que sube para el retorno, igual que el arco punteado que cierra
   el círculo.
   ========================================================================== */
@media (max-width: 760px) {
  .mu-ciclo-lista li:not(.retorno) { position: relative; padding-left: 22px; }
  .mu-ciclo-lista li:not(.retorno)::before {
    content: ''; position: absolute; left: 3px; top: 0; bottom: 0;
    width: 1px; background: rgba(255, 209, 26, .45);
  }
  /* la flecha de avance entre componentes, sobre la propia línea */
  .mu-ciclo-lista li:not(.retorno)::after {
    content: ''; position: absolute; left: 0; bottom: -4px;
    width: 7px; height: 7px; border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold); transform: rotate(45deg);
  }
  .mu-ciclo-lista li:nth-last-child(2)::after { display: none; }

  .mu-ciclo-lista .retorno {
    position: relative; padding-left: 22px; border-bottom: none;
    border-top: 1px dashed rgba(255, 255, 255, .38); margin-top: 4px;
  }
  .mu-ciclo-lista .retorno::before {
    content: ''; position: absolute; left: 3px; top: 14px; bottom: 0;
    width: 0; border-left: 1px dashed rgba(255, 209, 26, .55);
  }
  /* la flecha que vuelve a 01 */
  .mu-ciclo-lista .retorno::after {
    content: ''; position: absolute; left: 0; top: 12px;
    width: 7px; height: 7px; border-left: 1px solid var(--gold);
    border-top: 1px solid var(--gold); transform: rotate(45deg);
  }
}