/* MEDIDA_MAPA_V1 · (todas las reglas van bajo .mp-escena: dentro de .seccion, «.seccion p» pesa 0,1,1 y pisaba a «.mp-cifra»)
   /medida/: el mapa fijo y el relato que pasa por delante. Solo la pide esa página (web.py la publica con
   hash, aparte de estilo.css). Todo va con prefijo mp- para no chocar con el sitio; los colores y las fuentes son los del
   sitio (variables de estilo.css). Nace del prototipo redisenio/est_medida_fable/ (DISENO.md). */
.mp-escena .mp-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mp-escena .mp-solo-js{display:none}
html.mp-js .mp-solo-js{display:revert}

/* ── la escena: el mapa fijo y el relato ─────────────────────────────────────── */
.mp-escena{display:grid;grid-template-columns:minmax(0,1fr);padding:0 0 1rem}
.mp-escena .mp-mapa{--mp-cab:6rem;--mp-alto:min(42vh,30rem);position:sticky;top:var(--mp-cab);z-index:2;background:var(--grano),linear-gradient(rgba(242,235,221,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(242,235,221,.032) 1px,transparent 1px) var(--fondo);background-size:72px 72px,96px 96px,96px 96px;padding:.5rem 0 .4rem;
  display:flex;flex-direction:column;justify-content:center;gap:.45rem;height:var(--mp-alto)}
.mp-escena .mp-mapa::after{content:"";position:absolute;left:0;right:0;bottom:-1.6rem;height:1.6rem;background:linear-gradient(var(--fondo),rgba(20,17,16,0));pointer-events:none}
.mp-escena .mp-lienzo{position:relative;width:100%;max-width:calc((var(--mp-alto) - 4.6rem) * 1000 / 740);aspect-ratio:1000/740;margin-inline:auto;flex:0 1 auto;min-height:0}
.mp-escena .mp-lienzo img,.mp-escena .mp-lienzo canvas{display:block;width:100%;height:100%;object-fit:contain}
.mp-escena .mp-lienzo canvas{position:absolute;inset:0;margin:auto}
html.mp-js.mp-mapa-listo .mp-lienzo img{visibility:hidden}
.mp-escena .mp-leyenda{display:flex;gap:.3rem 1.2rem;flex-wrap:wrap;align-items:baseline;font-family:var(--mono);font-size:.78rem;line-height:1.35;color:var(--tinta-3);letter-spacing:-.01em;min-height:1.2rem;margin:0}
.mp-escena .mp-leyenda b{font-weight:500;color:var(--tinta)}
.mp-escena .mp-leyenda i{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-right:.45em;vertical-align:.02em;background:var(--mudo)}
.mp-escena .mp-leyenda i.mp-luz{background:var(--acento);box-shadow:0 0 6px rgba(79,208,168,.75)}
.mp-escena .mp-leyenda i.mp-tenue{background:#4a423a}
/* el mando del reloj: un deslizador nativo, con la fecha delante. Solo con JavaScript y solo en el capítulo del reloj */
.mp-escena .mp-mando{display:none;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.8rem;color:var(--tinta-3)}
html.mp-js .mp-mapa.mp-con-reloj .mp-mando{display:grid}
.mp-escena .mp-mando output{font-weight:500;color:var(--tinta);min-width:7.5ch;font-variant-numeric:tabular-nums}
.mp-escena .mp-mando input[type=range]{width:100%;margin:0;accent-color:var(--acento);height:1.4rem}
.mp-escena .mp-mando .mp-tope{color:var(--tinta-4)}

/* ── el relato: un paso por idea; el número lo pone seccion() del sitio (h2.et) ── */
.mp-escena .mp-relato{min-width:0}
.mp-escena .mp-paso{scroll-margin-top:calc(var(--mp-cab,6rem) + 1rem)}
.mp-escena .mp-paso.seccion{padding:2.6rem 0 2.2rem}
.mp-escena .mp-portada{padding:1.2rem 0 2rem}
.mp-escena .mp-portada .et{margin-bottom:.8rem}
.mp-escena .mp-h1{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,5.6vw,3.2rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 1rem;text-wrap:balance}
.mp-escena .mp-entradilla{font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.35;color:var(--tinta-2);margin:0 0 1.4rem;max-width:34rem;text-wrap:pretty}
.mp-escena .mp-paso p.en-obras{margin:0 0 1.6rem;max-width:34rem}

/* la cifra protagonista: grande, en color, con su frase, su base y la propuesta en verde */
.mp-escena .mp-dato{display:grid;gap:.15rem .9rem;margin:0 0 1.5rem}
.mp-escena .mp-dato+.mp-dato{margin-top:1.9rem}
.mp-escena .mp-cifra{font-family:var(--display);font-weight:600;font-size:clamp(3.4rem,9vw,5.6rem);line-height:.92;letter-spacing:-.045em;margin:0;white-space:nowrap}
.mp-escena .mp-cifra small{font-size:.5em;letter-spacing:-.02em;margin-left:.08em}
.mp-escena .mp-menor .mp-cifra{font-size:clamp(2.5rem,6vw,3.6rem)}
.mp-escena .mp-frase{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.18;letter-spacing:-.016em;margin:.35rem 0 0;text-wrap:balance;max-width:30rem;color:var(--tinta)}
.mp-escena .mp-menor .mp-frase{font-size:clamp(1.05rem,1.6vw,1.2rem)}
.mp-escena .mp-base{font-family:var(--mono);font-size:.8125rem;line-height:1.4;color:var(--tinta-3);letter-spacing:-.015em;margin:.45rem 0 0;max-width:34rem}
.mp-escena .mp-base b{font-weight:500;color:var(--tinta-2)}
.mp-escena .mp-propuesta{font-family:var(--display);font-weight:500;font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.25;color:var(--acento);margin:.55rem 0 0;max-width:32rem}
.mp-escena .mp-propuesta::before{content:"→ "}
.mp-escena .mp-como{margin:.6rem 0 0;max-width:34rem}
.mp-escena .mp-como summary{cursor:pointer;font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:var(--tinta-3);list-style:none}
.mp-escena .mp-como summary::before{content:"+ ";color:var(--tinta-4)}
.mp-escena .mp-como[open] summary::before{content:"− "}
.mp-escena .mp-como summary::-webkit-details-marker{display:none}
.mp-escena .mp-como summary:hover{color:var(--acento)}
.mp-escena .mp-como p{font-family:var(--sans);font-size:.9rem;line-height:1.5;color:var(--tinta-2);margin:.4rem 0 .2rem}
.mp-escena .mp-como p+p{margin-top:.3rem}
.mp-escena .mp-reparto{display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.3rem 0 0;padding:0;list-style:none}
.mp-escena .mp-reparto li{font-family:var(--mono);font-size:.82rem;color:var(--tinta-3);line-height:1.3}
.mp-escena .mp-reparto b{display:block;font-family:var(--display);font-weight:600;font-size:1.45rem;letter-spacing:-.03em;color:var(--tinta);line-height:1.05}

/* capas del mapa: una lista tipográfica con una muestra de color, no botones de plantilla */
.mp-escena .mp-capas{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--linea)}
.mp-escena .mp-capas li{border-bottom:1px solid var(--linea-2)}
.mp-escena .mp-capas button{all:unset;cursor:pointer;display:grid;grid-template-columns:1.1rem minmax(0,1fr) auto;align-items:baseline;gap:.6rem;width:100%;padding:.55rem .2rem;font-family:var(--mono);font-size:.95rem;letter-spacing:-.015em;color:var(--tinta);box-sizing:border-box}
.mp-escena .mp-capas button:hover,.mp-escena .mp-capas button:focus-visible{background:var(--fondo-2)}
.mp-escena .mp-capas button:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
.mp-escena .mp-capas .mp-m{width:.6rem;height:.6rem;border-radius:50%;background:var(--c);opacity:.55;transition:opacity .2s,box-shadow .2s;align-self:center}
.mp-escena .mp-capas button[aria-pressed=true] .mp-m{opacity:1;box-shadow:0 0 8px var(--c)}
.mp-escena .mp-capas button[aria-pressed=true] .mp-n{font-weight:500}
.mp-escena .mp-capas .mp-n i{font-style:normal;color:var(--tinta-3);font-size:.8rem;margin-left:.35rem}
.mp-escena .mp-capas .mp-v{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-escena .mp-capas .mp-v small{font-family:var(--mono);font-weight:400;font-size:.72rem;color:var(--tinta-3);margin-left:.35rem;letter-spacing:0}
html:not(.mp-js) .mp-capas button{cursor:default;pointer-events:none}

/* barras: la tecnología a la izquierda, la barra de puntos y el porcentaje, como en el gráfico */
.mp-escena .mp-barras{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.18rem}
.mp-escena .mp-barras li{display:grid;grid-template-columns:minmax(0,18.5rem) minmax(0,1fr) 3.2rem;align-items:center;gap:.7rem;padding:.22rem 0}
.mp-escena .mp-barras .mp-n{font-family:var(--mono);font-size:.9rem;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--tinta)}
.mp-escena .mp-barras .mp-n i{font-style:normal;color:var(--tinta-3);font-size:.74rem;margin-left:.3rem}
.mp-escena .mp-barras .mp-b{height:.45rem;background:repeating-linear-gradient(90deg,rgba(156,141,124,.4) 0 2px,transparent 2px 5px);position:relative;border-radius:2px}
.mp-escena .mp-barras .mp-b i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:2px}
.mp-escena .mp-barras .mp-b.mp-sola{background:none}
.mp-escena .mp-barras .mp-v{font-family:var(--display);font-weight:600;font-size:1rem;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;color:var(--tinta)}
.mp-escena .mp-barras.mp-fin li{grid-template-columns:2.6rem minmax(0,17rem) minmax(0,1fr) 3.2rem}
.mp-escena .mp-barras .mp-a{font-family:var(--mono);font-size:.9rem;color:var(--tinta-3)}
.mp-escena .mp-barras.mp-fin .mp-n{white-space:normal;line-height:1.2}
.mp-escena .mp-barras .mp-n a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea-3)}
.mp-escena .mp-barras .mp-n a:hover{color:var(--acento);border-color:var(--acento)}
.mp-escena .mp-rotulo{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.018em;margin:0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;color:var(--tinta)}
.mp-escena .mp-rotulo span{font-family:var(--mono);font-weight:400;font-size:.8rem;color:var(--tinta-3);letter-spacing:-.01em}
.mp-escena .mp-dato+.mp-rotulo{margin-top:.4rem}

/* la edad: un año por columna, 2007 → 2026; lo de diez años o más, en rojo */
.mp-escena .mp-anios{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:2px;align-items:end;height:7.5rem;margin:1.2rem 0 0;padding:0;list-style:none;border-bottom:1px solid var(--linea)}
.mp-escena .mp-anios li{display:grid;align-items:end;height:100%;position:relative}
.mp-escena .mp-anios i{display:block;background:var(--tinta-4);border-radius:2px 2px 0 0;min-height:2px}
.mp-escena .mp-anios li.mp-viejo i{background:var(--alto)}
.mp-escena .mp-anios li.mp-hoy i{background:var(--acento)}
.mp-escena .mp-ejes{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--tinta-3);margin:.35rem 0 0}
.mp-escena .mp-ejes b{font-weight:500;color:var(--alto-t)}
.mp-escena .mp-ejes .mp-h{color:var(--acento)}

/* la curva del reloj: los ayuntamientos acumulados por día, en SVG; con JavaScript, un cursor sigue al deslizador */
.mp-escena .mp-linea{display:block;width:100%;height:4.2rem;margin:1rem 0 0}
.mp-escena .mp-linea path{fill:none;stroke:var(--acento);stroke-width:2;stroke-linejoin:round}
.mp-escena .mp-linea .mp-area{fill:rgba(79,208,168,.12);stroke:none}
.mp-escena .mp-linea .mp-eje{stroke:var(--linea-3);stroke-width:1}
.mp-escena .mp-linea .mp-cursor{stroke:var(--tinta);stroke-width:1;opacity:0}
html.mp-js .mp-linea .mp-cursor{opacity:.8}
.mp-escena .mp-linea text{font-family:var(--mono);font-size:14px;fill:var(--tinta-3)}
.mp-escena button.mp-ir{all:unset;cursor:pointer;font:inherit;font-weight:500;color:var(--acento);border-bottom:1px solid currentColor;padding-bottom:.05em}
.mp-escena button.mp-ir:hover{color:var(--acento-2)}
.mp-escena button.mp-ir:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

/* el cierre: reglas en cuatro líneas, con filete; los enlaces del sitio (.ir-grande) */
.mp-escena .mp-reglas{list-style:none;margin:.4rem 0 1rem;padding:0;display:grid;gap:.75rem;max-width:34rem}
.mp-escena .mp-reglas li{font-family:var(--display);font-size:1.02rem;line-height:1.35;padding-left:.9rem;border-left:2px solid var(--linea-3)}
.mp-escena .mp-enlaces{margin:0;display:flex;flex-wrap:wrap;gap:0 1.6rem}
.mp-escena .mp-nota{font-family:var(--mono);font-size:.78rem;line-height:1.5;color:var(--tinta-3);max-width:34rem;margin:2rem 0 0;padding-top:1rem;border-top:1px solid var(--linea)}

/* ── escritorio: el mapa a la derecha, fijo a toda la altura bajo la cabecera; el relato a la izquierda ── */
@media (min-width:62rem){.mp-escena{grid-template-columns:minmax(0,32rem) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.mp-escena .mp-mapa{--mp-cab:3.5rem;--mp-alto:calc(100vh - var(--mp-cab));order:2;padding:.4rem 0 1.2rem;gap:.9rem;background:none}     /* en escritorio nada pasa por debajo: la luz del sitio se ve */
.mp-escena .mp-mapa::after{display:none}
.mp-escena .mp-lienzo{max-width:calc((var(--mp-alto) - 7.5rem) * 1000 / 740)}
.mp-escena .mp-mando{display:grid;visibility:hidden}
      /* reserva su sitio: el mapa no salta al entrar en el capítulo del reloj */
html.mp-js .mp-mapa.mp-con-reloj .mp-mando{visibility:visible}
.mp-escena .mp-relato{order:1;padding-top:.6rem}
.mp-escena .mp-paso.seccion,.mp-escena .mp-portada{min-height:70vh;padding:3.4rem 0 3rem;display:flex;flex-direction:column;justify-content:center}
.mp-escena .mp-portada{min-height:calc(100vh - 8rem);padding-top:1.2rem}
.mp-escena .mp-paso.mp-corto{min-height:0}
.mp-escena .mp-leyenda{font-size:.82rem}
}
@media (max-width:61.99rem){.mp-escena .mp-cifra{font-size:clamp(3rem,13vw,4.4rem)}
.mp-escena .mp-barras li{grid-template-columns:minmax(0,10.5rem) minmax(0,1fr) 3.2rem}
.mp-escena .mp-barras .mp-n{white-space:normal;line-height:1.15}
.mp-escena .mp-barras .mp-n i{display:block;margin:0}
.mp-escena .mp-barras.mp-fin li{grid-template-columns:2.4rem minmax(0,9.6rem) minmax(0,1fr) 3rem}
.mp-escena .mp-capas button{font-size:.9rem}
.mp-escena .mp-capas .mp-n i{display:block;margin:0;font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){.mp-escena *{transition:none!important;animation:none!important}
}
@media print{.mp-escena .mp-mapa{position:static;height:auto}
.mp-escena .mp-mando,.mp-escena .mp-solo-js{display:none!important}
}