/* Vistas de exposición. Presentación: agua profunda (oscura, alto contraste). Metodología: niebla (clara, estudio).
   Color con significado: agua = dato hídrico/dato; bosque = cálculo/conservación; ocre = hipótesis/condición;
   lila = supuesto; coral = residual/faltante. Sin dependencias. */
:root{
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"URW Palladio L",P052,"Book Antiqua",Georgia,serif;
  --sans:"Segoe UI","Noto Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,3vw,52px);
  --u01:#3fae72;--u02:#5fbf7a;--u03:#93d69a;--u04:#5cc6e4;--u05:#46b3c9;--u06:#7fb7d6;--u07:#d4cf6e;--u08:#acd46c;
  --u09:#72d6b4;--u10:#9db4c8;--u11:#c9a77f;--u12:#dba86a;--u13:#f2b84b;--u14:#aeb9f7;--u15:#eba6cc;
}
body[data-vista="presentacion"]{
  --fondo:#0b2a2b;--fondo-2:#0f3633;--panel:#123f3b;--panel-2:#17504a;--linea:#2a5e57;
  --texto:#eaf4ef;--texto-2:#a8c8bf;--agua:#62c8e8;--bosque:#8fd6a0;--ocre:#f2b84b;--lila:#c4b0f5;--coral:#f59a9a;
  --tinta-seg:#0b2a2b;
}
body[data-vista="metodologia"]{
  --fondo:#edf3f0;--fondo-2:#e3ece8;--panel:#fafcfb;--panel-2:#ffffff;--linea:#c5d6cf;
  --texto:#11302a;--texto-2:#4b605a;--agua:#1b6987;--bosque:#2d6a3f;--ocre:#94590a;--lila:#5f4b85;--coral:#a33a3a;
  --tinta-seg:#11302a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font:clamp(16px,.5vw + 12px,21px)/1.5 var(--sans);font-variant-numeric:tabular-nums}
body[data-vista="presentacion"]{background:radial-gradient(120% 90% at 85% 0%,#14463f 0%,var(--fondo) 55%) fixed,var(--fondo)}
a{color:var(--agua);text-underline-offset:.18em}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
.salto{position:absolute;left:-999px;top:0;background:var(--texto);color:var(--fondo);padding:.5rem .8rem;z-index:9}
.salto:focus{left:8px;top:8px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body>*,.barra-sup>*,.pie>*,.lamina>*,.figura>*,.texto>*{min-width:0}
svg{max-width:100%}

/* Barra superior */
.barra-sup{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;padding:.5rem var(--gutter);border-bottom:1px solid var(--linea);font-size:.76rem;background:color-mix(in srgb,var(--fondo) 85%,transparent)}
.raiz{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--texto);text-decoration:none}
.vistas{display:flex;flex-wrap:wrap;gap:.2rem}
.vistas a{padding:.28rem .7rem;border-radius:999px;text-decoration:none;color:var(--texto);border:1px solid transparent}
.vistas a[aria-current="page"]{border-color:var(--agua);color:var(--agua)}
.anexo{margin:0;color:var(--texto-2)}
.controles{display:flex;flex-wrap:wrap;gap:.3rem;margin-left:auto}
.controles button{background:transparent;border:1px solid var(--linea);border-radius:6px;padding:.26rem .6rem;cursor:pointer;color:var(--texto)}
.controles button[aria-pressed="true"]{background:var(--agua);border-color:var(--agua);color:var(--tinta-seg)}
.controles kbd{font:inherit;opacity:.6;margin-left:.3em}

/* Río de tiempo / etapas */
.rio{display:flex;gap:3px;padding:.4rem var(--gutter) .45rem;border-bottom:1px solid var(--linea)}
.tramo{flex:var(--s,1) 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:.28rem .5rem .3rem;border:0;border-top:4px solid var(--linea);background:transparent;text-align:left;cursor:pointer;line-height:1.2;color:var(--texto)}
.tramo .t{font-size:.66rem;color:var(--texto-2)}
.tramo .n{font-size:.76rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tramo.hecho{border-top-color:var(--bosque)}
.tramo[aria-current="step"]{border-top-color:var(--agua);background:color-mix(in srgb,var(--agua) 16%,transparent)}
.tramo[aria-current="step"] .n{color:var(--agua)}
.rio .fuera{flex:0 0 auto;align-self:center;font-size:.68rem;color:var(--texto-2);padding-left:.5rem}

/* Láminas */
.escenario{position:relative}
.lamina{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1rem,3vw,3.2rem);align-content:start;padding:clamp(1rem,3vh,2.4rem) var(--gutter) 1.6rem}
.lamina.ancha{grid-template-columns:minmax(0,1fr)}
.bloque{margin:0 0 .5rem;font-size:.76rem;color:var(--texto-2)}
.bloque b{color:var(--agua);font-weight:600}
.lamina h1,.lamina h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,1rem + 2.6vw,3.9rem);line-height:1.05;letter-spacing:-.012em;margin:0 0 .9rem;max-width:21ch;text-wrap:balance}
.lamina.ancha h1,.lamina.ancha h2{max-width:32ch}
.bajada{font-size:clamp(1rem,.85rem + .5vw,1.4rem);line-height:1.42;max-width:46ch;margin:0 0 .9rem;color:var(--texto)}
.lamina p{max-width:64ch}
.aviso{border-left:4px solid var(--ocre);background:color-mix(in srgb,var(--ocre) 13%,transparent);padding:.5rem .8rem;margin:.8rem 0;font-size:.84rem;max-width:64ch}
.aviso.agua{border-color:var(--agua);background:color-mix(in srgb,var(--agua) 12%,transparent)}
.aviso.coral{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.fuente{font-size:.7rem;color:var(--texto-2);margin-top:.7rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0;padding:0;list-style:none}
.etiquetas li{border:1px solid var(--linea);border-radius:999px;padding:.18rem .65rem;font-size:.78rem}

/* Botones de selección (tablero, escenario, hallazgos) */
.selector{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 .6rem;padding:0;border:0}
.selector legend{font-size:.7rem;color:var(--texto-2);padding:0;margin-bottom:.25rem;width:100%}
.selector button{border:1px solid var(--linea);background:var(--panel);border-radius:999px;padding:.3rem .75rem;cursor:pointer;font-size:.8rem;color:var(--texto)}
.selector button[aria-pressed="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.selector button.hipo{border-style:dashed}

/* Río del fondo (Sankey) */
.sankey{width:100%;height:auto;display:block;overflow:visible}
.sankey text{font-family:var(--sans);fill:var(--texto)}
.sankey .brazo{opacity:.88;transition:opacity .3s}
.sankey .corriente{fill:none;stroke:#fff;stroke-opacity:.45;stroke-linecap:round;stroke-dasharray:2 22}
.sankey .fuente-caudal{fill:var(--agua)}
@media (prefers-reduced-motion:no-preference){.sankey .corriente{animation:fluir 2.6s linear infinite}}
@keyframes fluir{to{stroke-dashoffset:-48}}
.leyenda-unidades{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1rem}
.leyenda-unidades li{display:grid;grid-template-columns:.9rem 2.2rem minmax(0,1fr) auto;gap:.4rem;align-items:baseline;font-size:.8rem;border-bottom:1px solid var(--linea);padding:.25rem 0}
.leyenda-unidades i{width:.9rem;height:.9rem;border-radius:3px;background:var(--c);align-self:center}
.leyenda-unidades b{font-size:.9rem}
.leyenda-unidades small{display:block;color:var(--texto-2);font-size:.7rem}
.leyenda-unidades .num{text-align:right;font-weight:700;white-space:nowrap}
.leyenda-unidades .num small{font-weight:400}

/* Barras apiladas con transición (tablero, máximas, reapertura) */
.pila{display:flex;height:clamp(2.8rem,7vh,4rem);border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--linea) calc(20% - 1px) 20%);position:relative}
.pila .seg{width:calc(var(--m,0) / 50 * 1%);flex:none;display:flex;flex-direction:column;justify-content:center;padding:0 .3rem;background:var(--c);color:var(--tinta-seg);overflow:hidden;border-right:2px solid var(--fondo);line-height:1.05;cursor:pointer;border-top:0;border-bottom:0;border-left:0;text-align:left;transition:width .7s cubic-bezier(.3,.7,.2,1),opacity .4s}
.pila .seg[data-m="0"]{border-right-width:0;padding:0}
.pila .seg.saldo[data-m="0"]{border:0}
.pila .seg b{font-size:.86rem}
.pila .seg span{font-size:.66rem;white-space:nowrap}
.pila .seg.hipo{background:repeating-linear-gradient(135deg,var(--c) 0 8px,color-mix(in srgb,var(--c) 60%,var(--fondo)) 8px 12px)}
.pila .seg.saldo{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--linea) 6px 8px);color:var(--texto);border:1px dashed var(--texto-2)}
.pila .seg[aria-expanded="true"]{outline:3px solid var(--texto);outline-offset:-3px}
.eje{display:flex;justify-content:space-between;font-size:.64rem;color:var(--texto-2);margin-top:.2rem}
.eje span{width:0;white-space:nowrap;display:flex;justify-content:center}
.eje span:first-child{justify-content:flex-start}.eje span:last-child{justify-content:flex-end}
.kpis{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:.6rem 0}
.kpis p{margin:0;font-size:.74rem;color:var(--texto-2);line-height:1.2}
.kpis b{display:block;font-family:var(--serif);font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem);color:var(--texto);line-height:1}
.desglose{margin:.5rem 0 0;padding:.6rem .8rem;border:1px solid var(--linea);border-left:5px solid var(--c,var(--agua));border-radius:4px;background:var(--panel);font-size:.82rem}
.desglose h4{margin:0 0 .2rem;font-size:.95rem}
.desglose p{margin:.15rem 0}

/* Esquema territorial (no es mapa) */
.esquema{margin:.8rem 0 0;border:1px dashed var(--texto-2);border-radius:8px;padding:.6rem;position:relative}
.esquema>.rotulo{margin:0 0 .45rem;font-size:.7rem;color:var(--ocre);font-weight:600}
.esquema .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.banda{grid-column:1/-1;border-radius:6px;padding:.3rem .5rem;font-size:.72rem;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;background:color-mix(in srgb,var(--u03) 14%,transparent);border:1px solid color-mix(in srgb,var(--u03) 50%,transparent)}
.banda.mr{grid-column:2/4;background:color-mix(in srgb,var(--u04) 14%,transparent);border-color:color-mix(in srgb,var(--u04) 50%,transparent)}
.muni{border:1px solid var(--linea);border-radius:6px;padding:.4rem;min-height:5.4rem;background:var(--panel);transition:opacity .3s,border-color .3s}
.muni h4{margin:0 0 .3rem;font-size:.85rem}
.muni.apagado{background:transparent;border-style:dashed}
.muni small{color:var(--texto-2);font-size:.72rem}
.muni.activo{border-color:var(--agua);box-shadow:inset 0 0 0 1px var(--agua)}
.ficha{display:inline-flex;align-items:center;gap:.25rem;border-radius:4px;padding:.12rem .4rem;margin:.12rem;font-size:.72rem;font-weight:700;background:var(--c);color:var(--tinta-seg)}
.ficha.hipo{background:transparent;color:var(--c);border:1.5px dashed var(--c)}
.bandeja{margin-top:.4rem;font-size:.72rem;color:var(--texto-2);border-top:1px dashed var(--linea);padding-top:.35rem}
.bandeja .ficha{background:transparent;color:var(--c);border:1.5px dashed var(--c)}

/* Cadena factor → función → evidencia faltante → residual */
.cadena-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin:.8rem 0 0;padding:0;list-style:none;position:relative}
.cadena-r>li{position:relative;border-top:3px solid var(--c);padding-top:.35rem;font-size:.76rem}
.cadena-r>li h4{margin:0 0 .25rem;font-size:.8rem;color:var(--c)}
.cadena-r>li ul{margin:0;padding-left:1rem}
.cadena-r>li+li::before{content:"";position:absolute;left:-1.25rem;top:-.5rem;border-left:9px solid var(--texto-2);border-top:6px solid transparent;border-bottom:6px solid transparent}
.razon{font-size:.66rem;color:var(--texto-2);margin:.35rem 0 0}

/* Matriz de hallazgos */
.matriz{border-collapse:separate;border-spacing:3px;width:100%;font-size:.76rem}
.matriz th{font-weight:600;text-align:left;padding:.15rem .3rem;font-size:.72rem;color:var(--texto-2)}
.matriz thead th{text-align:center}
.matriz td{position:relative;padding:.35rem .35rem .3rem;border-radius:4px;background:var(--panel);line-height:1.1;transition:opacity .35s,box-shadow .35s}
.matriz td .rel{display:block;height:5px;border-radius:3px;background:var(--linea);margin-top:.3rem;overflow:hidden}
.matriz td .rel i{display:block;height:100%;width:calc(var(--v) * 100%);background:var(--ccat)}
.matriz td small{color:var(--texto-2);font-size:.66rem;margin-left:.25rem}
.matriz.foco td{background:transparent;color:var(--texto-2)}
.matriz.foco td.on{background:var(--panel-2);color:var(--texto);box-shadow:0 0 0 3px var(--ocre)}
.cat1{--ccat:#5d8f86}.cat2{--ccat:#7fb3a0}.cat3{--ccat:#bcd67a}.cat4{--ccat:#f2b84b}.cat5{--ccat:#f59a7a}
.lectura-h{min-height:7.5rem;margin-top:.6rem;padding:.6rem .8rem;border-radius:6px;background:var(--panel);border-left:5px solid var(--ocre);font-size:.9rem}
.lectura-h .f{display:block;margin-top:.35rem;color:var(--agua);font-size:.82rem}
.chip-riesgo{display:inline-flex;gap:.4rem;align-items:center;margin-top:.4rem;padding:.25rem .6rem;border-radius:999px;border:1.5px solid var(--coral);color:var(--coral);font-size:.78rem;font-weight:700}

/* Máximas: siete empates */
.maximas{display:grid;gap:.45rem;margin:.4rem 0 0}
.max{display:grid;grid-template-columns:5.4rem minmax(0,1fr) 4.6rem;gap:.5rem;align-items:center}
.max .rot{font-size:.74rem;font-weight:700}
.max .tot{font-size:.7rem;color:var(--texto-2);text-align:right}
.max .pila{height:1.9rem}
.max .pila .seg{cursor:default}
.max .pila .seg b{font-size:.7rem}
.max.d6 .rot{color:var(--agua)}
.max.d6 .pila{box-shadow:0 0 0 2px var(--agua)}
.max.hip .pila{opacity:.85;outline:1.5px dashed var(--ocre);outline-offset:2px}
.maximas .pila .seg{transform-origin:left;transition:transform .6s cubic-bezier(.3,.7,.2,1),width .7s}
.maximas:not(.visto) .pila .seg{transform:scaleX(0)}
.puerta{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 0;padding:0;list-style:none;counter-reset:p}
.puerta li{counter-increment:p;font-size:.74rem;border:1px solid var(--linea);border-radius:4px;padding:.2rem .5rem;background:var(--panel)}
.puerta li::before{content:counter(p) " ";color:var(--ocre);font-weight:700}

/* Escenario: puntos que se desplazan */
.ssp{width:100%;height:auto;display:block}
.ssp text{font-family:var(--sans);fill:var(--texto)}
.ssp .t2{fill:var(--texto-2)}
.ssp .rej line{stroke:var(--linea)}
.ssp .fantasma{fill:none;stroke:var(--texto-2);stroke-width:2}
.ssp .punto{fill:var(--agua)}
.ssp .resid .punto{fill:var(--coral)}
.ssp .traza{stroke:var(--agua);stroke-width:4;stroke-linecap:round;opacity:.7}
.ssp .resid .traza{stroke:var(--coral)}
.ssp .mov{transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.ssp .traza{transition:x2 .8s cubic-bezier(.3,.7,.2,1)}
.ssp-lista{display:none;list-style:none;margin:.4rem 0 0;padding:0;gap:.3rem}
.ssp-lista li{display:grid;grid-template-columns:minmax(0,1fr);border-left:4px solid var(--agua);padding:.25rem .5rem;background:var(--panel);font-size:.84rem;line-height:1.3}
.ssp-lista li.resid{border-left-color:var(--coral)}
.ssp-lista span{font-variant-numeric:tabular-nums}
.valores-r{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:.6rem 0 0;font-size:.82rem}
.valores-r b{font-family:var(--serif);font-size:1.25rem;display:block}

/* Escalera 3D conceptual de evidencia */
.escalera{perspective:900px;margin:1rem 0 .4rem;height:15rem;position:relative}
.escalera .pl{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(52deg) rotateZ(-32deg);transform-origin:50% 60%}
@media (prefers-reduced-motion:no-preference){.escalera .pl{animation:mecer 9s ease-in-out infinite alternate}}
@keyframes mecer{from{transform:rotateX(52deg) rotateZ(-34deg)}to{transform:rotateX(50deg) rotateZ(-26deg)}}
.esc{position:absolute;left:calc(8% + var(--i) * 17%);top:calc(56% - var(--i) * 13%);width:30%;height:26%;transform-style:preserve-3d;transform:translateZ(calc(var(--i) * 26px))}
.esc .cara{position:absolute;inset:0;border-radius:4px;background:color-mix(in srgb,var(--c) 85%,var(--fondo));border:1px solid var(--c);display:flex;align-items:center;justify-content:center;text-align:center;padding:.2rem;font-size:.72rem;font-weight:700;color:var(--tinta-seg)}
.esc.fantasma .cara{background:transparent;color:var(--coral);border:2px dashed var(--coral)}
.esc-leyenda{list-style:none;margin:.2rem 0 0;padding:0;font-size:.78rem}
.esc-leyenda li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.3rem;padding:.2rem 0;border-bottom:1px solid var(--linea)}
.esc-leyenda li b{color:var(--c)}

/* Abiertas, cifras, estados, preguntas */
.abiertas{list-style:none;margin:.3rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.abiertas li{border:1.5px dashed var(--coral);color:var(--coral);border-radius:4px;padding:.18rem .5rem;font-size:.78rem}
.cifras{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin:.6rem 0}
.cifras p{margin:0;font-size:.78rem;max-width:20ch;line-height:1.25;color:var(--texto-2)}
.cifras b{display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--texto)}
.cambios{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0;font-size:.78rem}
.cambios .sale{color:var(--coral);text-decoration:line-through}
.cambios .entra{color:var(--ocre);font-weight:700}
.estados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,2rem);margin-top:.6rem}
.estados section{border-top:6px solid var(--c);padding-top:.5rem}
.estados h3{font-family:var(--serif);font-size:clamp(1.1rem,.9rem + .7vw,1.6rem);margin:0 0 .3rem;color:var(--c)}
.estados ul{margin:0;padding-left:1.1rem;font-size:.86rem}
.estados li{margin:.25rem 0}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 2rem;margin:0;padding:0;list-style:none}
.qa li{border-bottom:1px solid var(--linea);padding:.4rem 0;font-size:.82rem;line-height:1.3}
.qa li>b{display:block;font-size:.9rem;margin-bottom:.12rem}
.qa em{font-style:normal;color:var(--agua);font-weight:600}
.equipo{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}
.equipo p{margin:0;border:1px solid var(--linea);border-radius:6px;padding:.4rem .7rem;font-size:.8rem;background:var(--panel)}
.equipo b{display:block;font-size:1rem}

/* Tipos de afirmación (metodología) con tooltip */
.tipo{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700;padding:.06rem .45rem .06rem .3rem;border-radius:3px;white-space:nowrap;vertical-align:.08em;position:relative}
.tipo::before{content:"";width:.66rem;height:.66rem;flex:none}
.tipo.dato{background:color-mix(in srgb,var(--agua) 16%,transparent);color:var(--agua)}.tipo.dato::before{background:var(--agua)}
.tipo.calculo{background:color-mix(in srgb,var(--bosque) 16%,transparent);color:var(--bosque)}.tipo.calculo::before{background:var(--bosque);border-radius:50%}
.tipo.inferencia{background:color-mix(in srgb,var(--ocre) 16%,transparent);color:var(--ocre)}.tipo.inferencia::before{width:0;height:0;border-left:.36rem solid transparent;border-right:.36rem solid transparent;border-bottom:.64rem solid var(--ocre)}
.tipo.supuesto{background:color-mix(in srgb,var(--lila) 16%,transparent);color:var(--lila)}.tipo.supuesto::before{background:var(--lila);transform:rotate(45deg) scale(.8)}
.tipo.faltante{color:var(--coral);outline:1.5px dashed var(--coral);outline-offset:-1.5px}.tipo.faltante::before{border:2px dashed var(--coral);border-radius:50%}
.tipo[data-tip]:hover::after,.tipo[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 4px);z-index:5;width:max-content;max-width:16rem;white-space:normal;font-weight:400;font-size:.72rem;line-height:1.3;padding:.35rem .5rem;border-radius:4px;background:var(--texto);color:var(--fondo)}

/* Grafo de método (metodología) */
.grafo{width:100%;height:auto;display:block}
.grafo .nodo rect{fill:var(--panel-2);stroke:var(--texto);stroke-width:1.5;transition:fill .2s}
.grafo .nodo{cursor:pointer}
.grafo .nodo:hover rect,.grafo .nodo:focus-visible rect{fill:color-mix(in srgb,var(--agua) 14%,var(--panel-2))}
.grafo .nodo.activo rect{fill:var(--texto)}
.grafo .nodo.activo text{fill:var(--fondo)}
.grafo text{font-family:var(--sans);fill:var(--texto)}
.grafo .flecha{stroke:var(--texto-2);stroke-width:2;fill:none;stroke-dasharray:6 6}
@media (prefers-reduced-motion:no-preference){.grafo .flecha{animation:fluir 3s linear infinite}}
.grafo .nodo:focus{outline:none}
.grafo .nodo:focus-visible rect{stroke:var(--ocre);stroke-width:3}
.panel-nodo{margin-top:.6rem;padding:.7rem .9rem;border-radius:6px;background:var(--panel);border:1px solid var(--linea);min-height:12rem}
.panel-nodo h3{margin:0 0 .3rem;font-family:var(--serif);font-size:1.3rem}
.panel-nodo .doble{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.panel-nodo h4{margin:.2rem 0;font-size:.8rem}
.libro{list-style:none;margin:.2rem 0 0;padding:0}
.libro li{display:grid;grid-template-columns:6.6rem minmax(0,1fr);gap:.5rem;align-items:baseline;padding:.36rem 0;border-bottom:1px solid var(--linea);font-size:.84rem;line-height:1.32;transition:opacity .25s}
.libro li small{display:block;color:var(--texto-2);font-size:.7rem;margin-top:.1rem}
.capas{perspective:1000px;height:14rem;margin:.6rem 0;position:relative}
.capas .pila3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-28deg);transform-origin:50% 55%}
.capa{position:absolute;left:18%;width:58%;height:42%;top:30%;border-radius:6px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 22%,transparent);transform:translateZ(calc(var(--i) * 30px));display:flex;align-items:flex-start;padding:.3rem .5rem;font-size:.72rem;font-weight:700;color:var(--c)}
.capa.falta{border-style:dashed;background:transparent}

/* Modo oral: filas grandes estáticas, llave del 56 %, panel municipal y H marcadas */
.max.grande{grid-template-columns:6.2rem minmax(0,1fr) 5.6rem}
.max.grande .rot{font-size:.86rem}
.max.grande .tot{font-size:.78rem;color:var(--texto)}
.max.grande .pila{height:clamp(2.4rem,6vh,3.2rem)}
.max.grande .pila .seg b{font-size:.84rem}
.max.grande .pila .seg span{font-size:.64rem}
.comp{gap:.7rem}
.comp .max.d6{margin-bottom:1.6rem}
.eje-oral{margin:0 6.7rem 0 6.7rem}
.llave56{position:absolute;top:calc(100% + 3px);height:.5rem;border:2px solid var(--ocre);border-top:0}
.llave56 span{position:absolute;top:.55rem;left:0;white-space:nowrap;font-size:.7rem;font-weight:700;color:var(--ocre)}
.rotulo-esq{margin:.9rem 0 .35rem;font-size:.72rem;color:var(--ocre);font-weight:600}
.muni-oral{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.muni-oral section{border:1px solid var(--linea);border-radius:6px;padding:.45rem .55rem;background:var(--panel)}
.muni-oral h4{margin:0 0 .25rem;font-size:.92rem}
.muni-oral p{margin:.15rem 0;font-size:.74rem}
.muni-oral p>b{display:inline-block;width:1.9rem;color:var(--texto-2)}
.muni-oral .fac{color:var(--texto-2);font-size:.7rem;line-height:1.3}
.muni-oral .res-rot{margin:.3rem 0 0;font-size:.68rem;font-weight:700;color:var(--coral);border-top:1px dashed var(--linea);padding-top:.2rem}
.muni-oral .res{margin:.1rem 0 0;padding-left:.9rem;font-size:.7rem;color:var(--coral);line-height:1.3}
.muni-oral small{color:var(--texto-2)}
.hallazgos{list-style:none;margin:.2rem 0 0;padding:0}
.hallazgos li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.4rem;margin:.38rem 0;font-size:.84rem;line-height:1.3}
.hallazgos li>b{font-family:var(--serif);color:var(--ocre);font-size:1rem}
.hallazgos .f{display:block;color:var(--agua);font-size:.76rem}
.hallazgos li{transition:background-color .3s}
.hallazgos li.activo{background:color-mix(in srgb,var(--ocre) 16%,transparent);border-radius:4px}
.matriz td[data-h]::after{content:attr(data-h);position:absolute;top:-.55rem;right:-.15rem;background:var(--ocre);color:var(--fondo);font-size:.6rem;font-weight:700;padding:0 .25rem;border-radius:3px;line-height:1.4}
.comp .cambios{margin:-.3rem 0 .2rem 6.7rem}

/* Página normal (metodología): menú de anclas y secciones largas */
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.5rem)}
body.pagina{scroll-behavior:smooth}
.pagina-grid{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(1rem,3vw,3rem);max-width:1320px;margin:0 auto;padding:0 var(--gutter) 4rem}
.menu{position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;padding:1.4rem 0}
.menu ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--linea)}
.menu a{display:block;padding:.3rem .8rem;font-size:.84rem;color:var(--texto);text-decoration:none;border-left:3px solid transparent;margin-left:-2px}
.menu a:hover,.menu a:focus-visible{border-left-color:var(--agua);color:var(--agua)}
.pagina main{min-width:0}
.seccion{padding:2rem 0 1.6rem;border-bottom:1px solid var(--linea);scroll-margin-top:1rem}
.seccion h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,1.1rem + 2.4vw,3.3rem);line-height:1.08;margin:0 0 .9rem;max-width:24ch}
.seccion h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,1rem + 1.3vw,2.2rem);line-height:1.12;margin:0 0 .7rem}
.seccion h3{font-size:1rem;margin:.9rem 0 .4rem}
.seccion p{max-width:72ch}
.ancho{margin:.6rem 0}
.leyenda-tipos{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:.8rem 0 .4rem;padding:0;list-style:none}
.leyenda-tipos li{font-size:.8rem;display:flex;align-items:center;gap:.4rem;color:var(--texto-2)}
.flujo{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.3rem}
.flujo li{position:relative}
.flujo li+li::before{content:"";position:absolute;left:-1.1rem;top:1.4rem;width:.9rem;border-top:2px dashed var(--texto-2)}
.flujo li+li::after{content:"";position:absolute;left:-.35rem;top:calc(1.4rem - 5px);border-left:7px solid var(--texto-2);border-top:6px solid transparent;border-bottom:6px solid transparent}
.flujo a{display:block;height:100%;padding:.5rem .55rem;border:1.5px solid var(--texto);border-radius:6px;background:var(--panel-2);color:var(--texto);text-decoration:none}
.flujo a:hover,.flujo a:focus-visible{background:color-mix(in srgb,var(--agua) 12%,var(--panel-2))}
.flujo b{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.1}
.flujo small{display:block;font-size:.7rem;color:var(--texto-2);margin-top:.2rem;line-height:1.25}
.capas-caja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem 1.6rem;align-items:center;margin-top:1rem}
.capas-caja .capas{grid-row:span 3}
.capas .pila3d{transition:transform .6s ease}
.capa{transition:transform .6s ease}
.separadas .capa{transform:translateZ(calc(var(--i) * 64px))}
.boton{justify-self:start;border:1px solid var(--texto);background:var(--panel-2);border-radius:6px;padding:.35rem .8rem;cursor:pointer;color:var(--texto)}
.equivalente{list-style:none;margin:0;padding:0;font-size:.84rem}
.equivalente li{padding:.25rem 0;border-bottom:1px solid var(--linea)}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.8rem;margin:.8rem 0}
.roles section{border-top:5px solid var(--c);background:var(--panel-2);padding:.6rem .8rem;border-radius:0 0 6px 6px}
.roles h3{margin:0 0 .3rem;font-size:.95rem}
.roles p{margin:0;font-size:.84rem}
.detalle{margin:.8rem 0;border:1px solid var(--linea);border-radius:6px;padding:.5rem .8rem;background:var(--panel-2)}
.detalle summary{cursor:pointer;font-weight:600}
.tabla-caja{max-width:100%;overflow-x:auto;margin:.6rem 0}
.ejemplos,.hashes{border-collapse:collapse;width:100%;font-size:.82rem}
.ejemplos caption{text-align:left;font-weight:600;padding-bottom:.4rem}
.ejemplos th,.ejemplos td,.hashes th,.hashes td{border-bottom:1px solid var(--linea);padding:.4rem .5rem;text-align:left;vertical-align:top}
.ejemplos thead th,.hashes thead th{font-size:.74rem;color:var(--texto-2)}
.hashes code,.seccion code{font-size:.85em;overflow-wrap:anywhere}
.tarjeta{border:1px solid var(--linea);border-top:5px solid var(--c);border-radius:6px;padding:.7rem .9rem;background:var(--panel-2)}
.tarjeta h3{margin:0 0 .3rem}
.pendiente{display:inline-block;border:1.5px dashed var(--coral);color:var(--coral);border-radius:4px;padding:.15rem .5rem;font-size:.8rem;font-weight:600}
.filtrado .libro li:not(.on){opacity:1;color:var(--texto-2)}
.filtrado .libro li:not(.on) .tipo{filter:grayscale(1)}
.filtrado .libro li.on{background:color-mix(in srgb,var(--ocre) 10%,transparent)}
body.pagina .matriz td{background:var(--panel-2)}

/* Notas de estudio */
.notas{grid-column:1/-1;display:none;background:var(--panel);border:1px solid var(--linea);border-left:6px solid var(--texto-2);border-radius:4px;padding:.8rem 1rem;font-size:.82rem;line-height:1.4}
.notas h3{margin:0 0 .3rem;font-size:.88rem}
.notas dl{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.25rem .8rem;margin:0}
.notas dt{font-weight:700;color:var(--texto-2)}
.notas dd{margin:0}
body.con-notas .notas,body.estudio .notas{display:block}

/* Pie */
.pie{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.4rem var(--gutter);border-top:1px solid var(--linea);font-size:.78rem}
.pie button{border:1px solid var(--texto-2);background:transparent;border-radius:6px;padding:.32rem .9rem;cursor:pointer;color:var(--texto)}
.pie button:disabled{opacity:.3;cursor:default}
.pie .contador{margin:0;font-weight:600}
.pie .habla{margin:0;color:var(--texto-2);flex:1;min-width:0}
.cronometro{font-weight:700;font-size:1rem;padding:.1rem .5rem;border-radius:4px;background:color-mix(in srgb,var(--bosque) 20%,transparent);color:var(--bosque)}
.cronometro.tarde{background:color-mix(in srgb,var(--coral) 20%,transparent);color:var(--coral)}

/* Modo diapositiva */
body.deck{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
body.deck .escenario{overflow:auto;overscroll-behavior:contain}
body.deck .lamina[hidden]{display:none}
body.deck .lamina{min-height:100%}
@media (prefers-reduced-motion:no-preference){body.deck .lamina.entra{animation:entra .35s ease-out}}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.estudio .lamina{border-bottom:2px solid var(--linea);min-height:0}
body:not(.deck) .pie [data-accion="anterior"],body:not(.deck) .pie [data-accion="siguiente"]{display:none}
body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

@media (max-width:980px){
  .lamina{grid-template-columns:minmax(0,1fr)}
  .estados{grid-template-columns:minmax(0,1fr)}
  .cadena-r{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cadena-r>li:nth-child(3)::before{display:none}
  .panel-nodo .doble{grid-template-columns:minmax(0,1fr)}
  .pagina-grid{grid-template-columns:minmax(0,1fr)}
  .menu{position:static;max-height:none;padding:.6rem 0 0;overflow-x:auto}
  .menu ol{display:flex;border-left:0;border-bottom:2px solid var(--linea);width:max-content}
  .menu a{border-left:0;border-bottom:3px solid transparent;margin:0 0 -2px;white-space:nowrap}
  .flujo{grid-template-columns:repeat(4,minmax(0,1fr))}
  .flujo li:nth-child(5)::before,.flujo li:nth-child(5)::after{display:none}
  .dos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .controles{margin-left:0;width:100%}
  .controles button{flex:1 1 auto}
  .controles kbd{display:none}
  .rio{overflow-x:auto;scrollbar-width:thin}
  .tramo{flex:0 0 auto;padding:.25rem .45rem}
  .leyenda-unidades{grid-template-columns:minmax(0,1fr)}
  .pila .seg{padding:0 .12rem}
  .pila .seg b{font-size:.7rem}
  .pila .seg span{font-size:.56rem;white-space:normal}
  .matriz{display:block;max-width:100%;overflow-x:auto;border-spacing:2px;font-size:.66rem}
  .matriz th,.matriz td{padding:.28rem .14rem}
  .matriz small{display:block;margin-left:0}
  .cadena-r{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .cadena-r>li+li::before,.cadena-r>li:nth-child(3)::before{display:block;left:.2rem;top:-1rem;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--texto-2);border-bottom:0}
  .esquema .grid3{grid-template-columns:minmax(0,1fr)}
  .banda,.banda.mr{grid-column:1/-1}
  .max{grid-template-columns:minmax(0,1fr) auto;gap:.15rem .5rem}
  .max .pila{grid-column:1/-1;grid-row:2}
  .ssp{display:none}
  .ssp-lista{display:grid}
  .escalera{height:12rem}
  .qa{grid-template-columns:minmax(0,1fr)}
  .libro li{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .notas dl{grid-template-columns:minmax(0,1fr)}
  .pie .habla{order:5;flex:1 0 100%}
  .grafo-caja{overflow-x:auto}
  .grafo{min-width:620px}
  .maximas+.eje{margin:0!important}
  .max.grande{grid-template-columns:minmax(0,1fr) auto}
  .eje-oral{margin:0}
  .comp .cambios{margin:0}
  .llave56 span{white-space:normal;width:max(100%,12rem)}
  .comp .max.d6{margin-bottom:2.4rem}
  .muni-oral{grid-template-columns:minmax(0,1fr)}
  body[data-vista="presentacion"] .explica.ancho .m62-explain,body[data-vista="presentacion"] .explica.franja .m62-explain{display:flex}
  .flujo{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .flujo li+li::before,.flujo li:nth-child(5)::before{display:block;left:1.2rem;top:-1rem;width:0;height:.8rem;border-top:0;border-left:2px dashed var(--texto-2)}
  .flujo li+li::after,.flujo li:nth-child(5)::after{display:block;left:calc(1.2rem - 5px);top:-.35rem;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--texto-2);border-bottom:0}
  .capas-caja{grid-template-columns:minmax(0,1fr)}
  .capas-caja .capas{grid-row:auto}
  .ejemplos{font-size:.76rem}
}
/* Explicaciones M6-2 (archivos del helper): caja compacta dentro de la columna de texto de la presentación. */
body[data-vista="presentacion"] .explica{margin-top:.6rem}
body[data-vista="presentacion"] .explica .m62-explain{font-size:12.5px;padding:8px 10px;gap:6px;border-radius:10px}
body[data-vista="presentacion"] .explica .m62-explain .m62-svg{max-height:170px}
body[data-vista="presentacion"] .explica.franja{grid-column:1/-1;margin-top:0}
body[data-vista="presentacion"] .explica.franja .m62-explain{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;column-gap:16px;row-gap:4px}
body[data-vista="presentacion"] .explica.franja .m62-explain .m62-svg{grid-row:span 4;max-height:150px}
/* Sin duplicar lo que la lámina ya muestra; se conservan animación, advertencias, resultado condicional y nota conceptual. */
body[data-vista="presentacion"] .explica .m62-head,
body[data-vista="presentacion"] .explica [data-scene="decision"] .m62-cards,
body[data-vista="presentacion"] .explica [data-scene="decision"] .m62-row,
body[data-vista="presentacion"] .explica [data-scene="tablero"] .m62-cards,
body[data-vista="presentacion"] .explica [data-scene="pertinencia"] .m62-cards,
body[data-vista="presentacion"] .explica [data-scene="residual"] .m62-cards,
body[data-vista="presentacion"] .explica [data-scene="residual"] .m62-row+.m62-row,
body[data-vista="presentacion"] .explica [data-scene="sacrificios"] .m62-card:not(:last-child){display:none}
/* En la columna derecha: SVG a la izquierda y notas a la derecha para ahorrar alto. */
/* Lámina 1: la animación del helper sustituye al SVG del río solo si se montó; la leyenda queda siempre visible. */
body[data-vista="presentacion"] #decision .figura:has(.m62-explain) .sankey{display:none}
body[data-vista="presentacion"] #decision .explica{margin:.2rem 0 .4rem}
body[data-vista="presentacion"] #decision .explica .m62-explain .m62-svg{max-height:240px}
body[data-vista="presentacion"] .explica.ancho .m62-explain{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;column-gap:12px;row-gap:6px}
body[data-vista="presentacion"] .explica.ancho .m62-explain .m62-svg{grid-row:span 4;max-height:176px}
/* Escritorio general (p. ej. 1440×900): el río de la escena 1 no supera la mitad del alto para que la leyenda quepa completa. */
@media (min-width:981px){
  body[data-vista="presentacion"] .sankey{max-height:50vh}
  body[data-vista="presentacion"] .leyenda-unidades{margin-top:.35rem}
  body[data-vista="presentacion"] .leyenda-unidades li{padding:.18rem 0}
}
/* Escritorio de poca altura (hasta 920 px: 1280×720 y 1440×900): solo presentación; compacta y escalera en 2D, sin ocultar datos. */
@media (min-width:981px) and (max-height:920px){
  body[data-vista="presentacion"]{font-size:17px}
  body[data-vista="presentacion"] .barra-sup{padding:.2rem var(--gutter);font-size:.68rem;gap:.2rem 1rem}
  body[data-vista="presentacion"] .raiz{font-size:.95rem}
  body[data-vista="presentacion"] .controles kbd{display:none}
  body[data-vista="presentacion"] .controles button{padding:.12rem .45rem}
  body[data-vista="presentacion"] .rio{padding:.15rem var(--gutter)}
  body[data-vista="presentacion"] .tramo{flex-direction:row;align-items:baseline;gap:.35rem;padding:.12rem .4rem;border-top-width:3px}
  body[data-vista="presentacion"] .pie{padding:.15rem var(--gutter)}
  body[data-vista="presentacion"] .pie button{padding:.15rem .7rem}
  body[data-vista="presentacion"] .lamina{padding:.6rem var(--gutter) .5rem;gap:1.5rem}
  body[data-vista="presentacion"] .bloque{margin-bottom:.25rem}
  body[data-vista="presentacion"] .lamina h1,body[data-vista="presentacion"] .lamina h2{font-size:clamp(1.45rem,4vh,2.4rem);margin-bottom:.45rem}
  body[data-vista="presentacion"] .bajada{font-size:.98rem;margin-bottom:.45rem}
  body[data-vista="presentacion"] .aviso{margin:.4rem 0;padding:.3rem .6rem;font-size:.8rem}
  body[data-vista="presentacion"] .fuente{margin-top:.3rem}
  body[data-vista="presentacion"] .sankey{max-height:48vh}
  body[data-vista="presentacion"] .leyenda-unidades{grid-template-columns:repeat(3,minmax(0,1fr));gap:.1rem .8rem;margin-top:.25rem}
  body[data-vista="presentacion"] .leyenda-unidades li{grid-template-columns:.7rem 1.9rem minmax(0,1fr);gap:.1rem .35rem;font-size:.74rem;padding:.12rem 0}
  body[data-vista="presentacion"] .leyenda-unidades .num{grid-column:3;text-align:left}
  body[data-vista="presentacion"] .ssp{max-height:56vh}
  body[data-vista="presentacion"] .escalera{height:8.5rem;margin:.3rem 0 .1rem;perspective:none}
  /* Equivalente fijo en 2D: los cuatro peldaños quedan dentro de su caja, sin rotación ni movimiento. */
  body[data-vista="presentacion"] .escalera .pl{transform:none;animation:none}
  body[data-vista="presentacion"] .esc{left:calc(var(--i) * 25%);top:calc(58% - var(--i) * 18%);width:24%;height:38%;transform:none}
  body[data-vista="presentacion"] .escalera+.fuente{position:relative;z-index:1}
  body[data-vista="presentacion"] .max.grande .pila{height:2.2rem}
  body[data-vista="presentacion"] .comp{gap:.4rem}
  body[data-vista="presentacion"] .comp .max.d6{margin-bottom:1.25rem}
  body[data-vista="presentacion"] .rotulo-esq{margin:.5rem 0 .25rem}
  body[data-vista="presentacion"] .muni-oral section{padding:.3rem .45rem}
  body[data-vista="presentacion"] .matriz{font-size:.74rem}
  body[data-vista="presentacion"] .matriz td{padding:.22rem .3rem}
  body[data-vista="presentacion"] .hallazgos li{margin:.22rem 0;font-size:.8rem}
  body[data-vista="presentacion"] .maximas{gap:.35rem}
  body[data-vista="presentacion"] .max .pila{height:1.7rem}
  body[data-vista="presentacion"] .cifras{margin:.35rem 0;gap:.6rem 1.2rem}
  body[data-vista="presentacion"] .cifras b{font-size:1.9rem}
  body[data-vista="presentacion"] .estados ul{font-size:.82rem}
  body[data-vista="presentacion"] .qa li{padding:.22rem 0;font-size:.76rem}
  body[data-vista="presentacion"] .equipo{margin:.35rem 0}
  body[data-vista="presentacion"] .explica{margin-top:.35rem}
  body[data-vista="presentacion"] .explica .m62-explain{font-size:12px;padding:6px 8px;gap:4px}
  body[data-vista="presentacion"] .explica.ancho .m62-explain .m62-svg{max-height:150px}
  body[data-vista="presentacion"] #decision .explica .m62-explain .m62-svg{max-height:200px}
  body[data-vista="presentacion"] .max .pila{height:1.5rem}
}
@media print{
  .barra-sup .controles,.pie,.rio{display:none}
  body{background:#fff;color:#000}
  .lamina{break-inside:avoid}
  .notas{display:block}
}