/* /que-hacemos/ · v28 (2 nov 2026) · v29 (2 nov 2026, QH-A: lámina nueva, #escuchar, frentes, secciones claras al estilo del Ecosistema)
   1. «Tres realidades»: el Perú en corte, del mar a la selva (prefijo pe-). Reemplaza el mapa y el gráfico de brechas.
   2. Limpieza anti-IA del resto de la página: sin rayas laterales, sin píldoras con punto, sin cajas teñidas repetidas.
   Se enlaza al final, después de las hojas de cada pieza. */

/* ================================================================ 1 · NUESTRA ESPECIALIDAD (v29: la lámina del mar a la selva) */
.dt-reg{ background:var(--papel) }
.pe{
  --c-costa:#D0A12C;  --o-costa:#7A5A0E;
  --c-sierra:#B05A2C; --o-sierra:#6E3517;
  --c-selva:#00806A;  --o-selva:#004D40;
  color:var(--tinta);
}
.pe [data-r="costa"]{ --rc:var(--c-costa); --ro:var(--o-costa) }
.pe [data-r="sierra"]{ --rc:var(--c-sierra); --ro:var(--o-sierra) }
.pe [data-r="selva"]{ --rc:var(--c-selva); --ro:var(--o-selva) }
.pe-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

.pe__cab{ display:grid; gap:1rem 4rem; align-items:end }
@media (min-width:62rem){ .pe__cab{ grid-template-columns:minmax(0,5fr) minmax(0,6fr) } }
.pe__ante{ margin:0 0 .6rem }
.pe__t{ margin:0; font-family:var(--sans); font-size:clamp(2rem,1.3rem + 2.6vw,3.6rem); font-weight:650; line-height:1.02; letter-spacing:-.03em; max-width:13ch; text-wrap:balance }
.pe__entra{ margin:0; font-family:var(--lee); font-size:1.12rem; line-height:1.62; color:var(--tinta-2); max-width:48ch }

/* Mando: elegir región o comparar una cifra. Un control segmentado, como en el Ecosistema. */
.pe-mando{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 2rem; margin-top:clamp(2.2rem,4.5vw,3.5rem) }
.pe-mando__k{ margin:0; font:400 1rem/1.45 var(--lee); color:var(--mudo) }
.pe-mando__k b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.pe-mira{ display:inline-flex; flex-wrap:wrap; gap:3px; padding:4px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.08), 0 10px 26px -18px rgba(10,26,47,.45) }
.pe-m{ min-height:var(--toque,44px); padding:0 1.05rem; border:0; border-radius:999px; background:none; cursor:pointer; font:600 .93rem/1.2 var(--sans); color:var(--tinta-2); transition:background .22s, color .22s }
.pe-m:hover{ background:rgba(14,23,38,.05); color:var(--tinta) }
.pe-m[aria-pressed="true"]{ background:var(--noche); color:var(--papel) }
.pe-m:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px }

/* La escena: la lámina enmarcada, con las cifras en tarjetas translúcidas sobre el cielo */
.pe-escena{ margin:1rem 0 0 }
.pe-corte{ position:relative; border-radius:28px; overflow:hidden; background:#E4ECEE; box-shadow:0 0 0 1px rgba(14,23,38,.07), 0 40px 80px -48px rgba(10,26,47,.55) }
.pe-corte__in{ position:relative }
.pe-svg{ display:block; width:100%; height:auto }
.pe-cols{ position:absolute; z-index:2; inset:0 0 auto 0; display:grid; grid-template-columns:440fr 610fr 550fr; margin:0; padding:clamp(.8rem,1.5vw,1.3rem) 0 0; list-style:none; pointer-events:none }
/* v30: cada tarjeta, centrada sobre su tramo; las tres con la misma altura. */
.pe-col{ display:flex; justify-content:center; align-items:stretch; min-width:0; padding-inline:clamp(.5rem,1vw,1rem) }
.pe-r{ pointer-events:auto; display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; width:min(100%,15.5rem); padding:.85rem 1.05rem .95rem; text-align:left; cursor:pointer; font:inherit;
  color:color-mix(in srgb, var(--ro) 80%, var(--papel));
  border:1px solid rgba(255,255,255,.75); border-radius:18px; background:rgba(248,246,241,.62);
  -webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 30px -20px rgba(10,26,47,.5); transition:background .25s, box-shadow .25s, color .25s, transform .25s var(--salida) }
.pe-r:hover{ background:rgba(255,255,255,.82); color:var(--ro) }
.pe-r[aria-selected="true"]{ background:rgba(255,255,255,.93); color:var(--ro); box-shadow:0 0 0 2px var(--rc), 0 18px 36px -20px rgba(10,26,47,.55) }
.pe-r:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }
.pe-r__n{ display:flex; align-items:center; gap:.45rem; font:650 1rem/1 var(--sans); color:var(--tinta) }
.pe-r__n::after{ content:"Elegida"; font:italic 400 .8rem/1 var(--lee); color:var(--mudo); opacity:0; transition:opacity .2s }
.pe-r[aria-selected="true"] .pe-r__n::after{ opacity:1 }
.pe-r__v{ display:flex; align-items:baseline; gap:.15rem; font-family:var(--sans); color:inherit; font-variant-numeric:tabular-nums }
.pe-r__v b{ font-size:clamp(2.1rem,1.3rem + 2.2vw,3.4rem); font-weight:650; line-height:.95; letter-spacing:-.035em }
.pe-r__v small{ font-size:1.05rem; font-weight:600 }
.pe-r__c{ font:400 .9rem/1.4 var(--lee); color:var(--tinta-2) }
.pe-r__regla{ position:relative; display:none; width:100%; height:4px; margin:.3rem 0 .15rem; border-radius:2px; background:rgba(14,23,38,.12) }
.pe-r__regla i{ position:absolute; left:0; top:0; bottom:0; width:var(--w,0%); border-radius:2px; background:var(--rc); transition:width .5s var(--salida) }
.pe-r__regla em{ position:absolute; top:-5px; height:14px; width:2px; margin-left:-1px; left:var(--p,0%); background:var(--tinta); transition:left .5s var(--salida) }
.pe:not([data-m="clave"]) .pe-r__regla{ display:block }

/* Capas del dibujo */
.pe-rio{ fill:none; stroke-linecap:round }
.pe-ola{ fill:none; stroke:#F4F2EE; stroke-width:1.5; stroke-linecap:round; opacity:.8 }
.pe-toque{ fill:transparent; cursor:pointer }
.pe-velo{ opacity:0; transition:opacity .45s var(--salida); pointer-events:none }
.pe[data-r="costa"] .pe-velo:not([data-r="costa"]),
.pe[data-r="sierra"] .pe-velo:not([data-r="sierra"]),
.pe[data-r="selva"] .pe-velo:not([data-r="selva"]){ opacity:.2 }
.pe[data-h="costa"] .pe-velo[data-r="costa"], .pe[data-h="sierra"] .pe-velo[data-r="sierra"], .pe[data-h="selva"] .pe-velo[data-r="selva"],
.pe:has(.pe-r[data-r="costa"]:hover) .pe-velo[data-r="costa"],
.pe:has(.pe-r[data-r="sierra"]:hover) .pe-velo[data-r="sierra"],
.pe:has(.pe-r[data-r="selva"]:hover) .pe-velo[data-r="selva"]{ opacity:.08 }
.pe-tinte{ fill:var(--rc); opacity:0; transition:opacity .45s var(--salida) }
.pe[data-r="costa"] .pe-tinte[data-r="costa"], .pe[data-r="sierra"] .pe-tinte[data-r="sierra"], .pe[data-r="selva"] .pe-tinte[data-r="selva"]{ opacity:.26 }
.pe-lim{ fill:none; stroke:#F4F2EE; stroke-width:1.2; stroke-dasharray:3 5; opacity:.55 }
.pe-rot{ font:italic 400 17px/1 var(--lee); fill:#F4F2EE; opacity:.82 }
.pe-rot--r{ font-family:var(--sans); font-style:normal; font-weight:600; font-size:15px; opacity:.7 }
.pe[data-r="costa"] .pe-rot--r[data-r="costa"], .pe[data-r="sierra"] .pe-rot--r[data-r="sierra"], .pe[data-r="selva"] .pe-rot--r[data-r="selva"]{ opacity:1 }
.pe-grano{ mix-blend-mode:multiply; opacity:.32; pointer-events:none }

.pe-pie{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1.5rem; margin:.9rem .3rem 0; font:400 .88rem/1.5 var(--sans); color:var(--mudo) }
.pe-pie [data-pe-ref]{ color:var(--tinta-2); font-weight:500 }

/* El dibujo se arma una sola vez, de atrás hacia adelante */
@media (prefers-reduced-motion:no-preference){
  .pe--js .pe-capa, .pe--js .pe-bosque, .pe--js .pe-pueblo, .pe--js .pe-barrio{ transition:transform 1.1s var(--salida), opacity .9s ease }
  .pe--js:not(.pe--visto) .pe-capa--bruma{ transform:translateY(26px); opacity:0 }
  .pe--js:not(.pe--visto) .pe-capa--lejos{ transform:translateY(34px); opacity:0 }
  .pe--js:not(.pe--visto) .pe-capa--cerros{ transform:translateY(24px); opacity:0 }
  .pe--js:not(.pe--visto) .pe-capa--tierra{ transform:translateY(22px) }
  .pe--js:not(.pe--visto) .pe-capa--lomas{ transform:translateY(18px) }
  .pe--js:not(.pe--visto) .pe-bosque, .pe--js:not(.pe--visto) .pe-pueblo, .pe--js:not(.pe--visto) .pe-barrio{ opacity:0 }
  .pe--js .pe-capa--lejos{ transition-delay:.12s } .pe--js .pe-capa--cerros{ transition-delay:.22s }
  .pe--js .pe-capa--lomas{ transition-delay:.3s } .pe--js .pe-bosque, .pe--js .pe-pueblo, .pe--js .pe-barrio{ transition-delay:.55s }
  .pe--js .pe-rio{ stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--curva) .7s }
  .pe--js:not(.pe--visto) .pe-rio{ stroke-dashoffset:1 }
  .pe-r:active{ transform:scale(.985) }
  .pe-p.pe-entra{ animation:pe-aparece .32s var(--salida) both }
}
@keyframes pe-aparece{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* Lectura y ruta de la región elegida: una tarjeta clara, como en el Ecosistema */
.pe-ps{ margin-top:clamp(2rem,4vw,3rem) }
.pe-p{ display:grid; gap:0; padding:clamp(1.5rem,3.6vw,3rem); border-radius:28px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 30px 70px -48px rgba(10,26,47,.5) }
.pe-p[hidden]{ display:none }
.pe-p + .pe-p{ margin-top:1.5rem }
.pe--js .pe-p + .pe-p{ margin-top:0 }
.pe-p:focus{ outline:none }
.pe-p:focus-visible{ outline:2px solid var(--petroleo); outline-offset:6px }
.pe-lee{ display:grid; gap:1rem 4rem; align-items:start }
@media (min-width:62rem){ .pe-lee{ grid-template-columns:minmax(0,5fr) minmax(0,6fr) } }
.pe-lee__r{ margin:0 0 .5rem; font:italic 400 1.1rem/1 var(--lee); color:var(--ro) }
.pe-lee__t{ margin:0; font-family:var(--sans); font-size:clamp(1.55rem,1.1rem + 1.4vw,2.35rem); font-weight:650; line-height:1.08; letter-spacing:-.022em; max-width:17ch; text-wrap:balance }
.pe-lee__p{ margin:0; font-family:var(--lee); font-size:1.1rem; line-height:1.62; color:var(--tinta-2); max-width:48ch }
.pe-lee__dato{ margin:1rem 0 0; font-family:var(--lee); font-size:1rem; line-height:1.6; color:var(--tinta); max-width:50ch }
.pe-lee__fs{ font:400 .8rem/1.5 var(--sans); color:var(--mudo) }
.pe-fuente{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent) }
.pe-fuente:hover{ color:var(--tinta); text-decoration-color:currentColor }
.pe-fuente:focus-visible, .pe-fuentes summary:focus-visible, .pe-ir:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px; border-radius:2px }

.pe-ru{ --g:clamp(1.2rem,2.6vw,2.4rem); margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--filete) }
.pe-ru__cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem }
.pe-ru__h{ margin:0; font:650 1.2rem/1.2 var(--sans) }
.pe-ru__k{ margin:0; font:italic 400 1rem/1.4 var(--lee); color:var(--mudo) }
.pe-ru__l{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:1.6rem var(--g) }
@media (min-width:62rem){ .pe-ru__l{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.pe-ru__l li{ position:relative; display:grid; align-content:start }
.pe-ru__n{ display:grid; place-items:center; width:2.6rem; height:2.6rem; margin-bottom:.8rem; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px var(--rc); font:400 1.2rem/1 var(--lee); color:var(--ro) }
.pe-ru__l b{ font:650 1.08rem/1.25 var(--sans); color:var(--tinta) }
.pe-ru__l small{ font:400 .82rem/1.4 var(--sans); color:var(--mudo) }
.pe-ru__l p{ margin:.45rem 0 0; font:400 1rem/1.55 var(--lee); color:var(--tinta-2) }
@media (min-width:62rem){
  .pe-ru__l li:not(:last-child)::after{ content:""; position:absolute; top:1.3rem; left:3.2rem; right:calc(.6rem - var(--g)); height:1.5px; background:color-mix(in srgb, var(--rc) 55%, transparent) }
  .pe-ru__l li:not(:last-child)::before{ content:""; position:absolute; top:calc(1.3rem - 4px); right:calc(.6rem - var(--g)); width:7px; height:7px; border-top:1.5px solid color-mix(in srgb, var(--rc) 75%, var(--tinta)); border-right:1.5px solid color-mix(in srgb, var(--rc) 75%, var(--tinta)); transform:rotate(45deg) }
}
@media (max-width:61.99rem){
  .pe-ru__l li{ grid-template-columns:2.6rem minmax(0,1fr); column-gap:1rem }
  .pe-ru__n{ grid-row:1 / span 3; margin:0 }
  .pe-ru__l li:not(:last-child)::after{ content:""; position:absolute; left:1.3rem; top:3rem; bottom:-1.3rem; width:1.5px; background:color-mix(in srgb, var(--rc) 50%, transparent) }
}
.pe-ru__fin{ display:grid; gap:.3rem 2rem; margin-top:1.8rem; padding:1.15rem 1.35rem; border-radius:18px; background:color-mix(in srgb, var(--rc) 11%, var(--papel)) }
@media (min-width:48rem){ .pe-ru__fin{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); align-items:baseline } }
.pe-ru__fk{ margin:0; font:italic 400 1.15rem/1.3 var(--lee); color:var(--ro) }
.pe-ru__ft{ margin:0; font:400 1rem/1.6 var(--lee); color:var(--tinta-2); max-width:70ch }
.pe-ir{ font:600 .95rem/1.4 var(--sans); color:var(--petroleo); white-space:nowrap; text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
.pe-ir svg{ display:inline-block; vertical-align:-1px; margin-left:.3rem }

/* Fuentes y cifras completas */
.pe-fuentes{ margin-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--filete); padding-top:.4rem }
.pe-fuentes summary{ display:inline-flex; align-items:center; gap:.5rem; min-height:var(--toque,44px); cursor:pointer; list-style:none; font:600 .92rem/1.3 var(--sans); color:var(--tinta-2) }
.pe-fuentes summary::-webkit-details-marker{ display:none }
.pe-fuentes summary::after{ content:""; width:.5rem; height:.5rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s }
.pe-fuentes[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.pe-fuentes__c{ padding:.5rem 0 1rem; max-width:52rem; font:400 .88rem/1.55 var(--sans); color:var(--tinta-2) }
.pe-fuentes__c ul{ margin:.8rem 0 0; padding-left:1.1rem }
.pe-fuentes__c li + li{ margin-top:.3rem }
.pe-tabla{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin-bottom:1rem }
.pe-tabla caption{ text-align:left; padding-bottom:.5rem; font-weight:600; color:var(--tinta) }
.pe-tabla th, .pe-tabla td{ padding:.45rem .5rem; border-bottom:1px solid var(--filete); text-align:right }
.pe-tabla th:first-child{ text-align:left; font-weight:500 }
.pe-tabla thead th{ font-weight:650; color:var(--tinta) }

.pe-desliza{ display:none }
@media (max-width:47.99rem){
  /* En celular la lámina no se encoge: mide 60rem y se recorre con el dedo, con las cifras sobre su tramo. */
  .pe-corte{ margin-inline:calc(var(--canal, 1rem) * -1); border-radius:0; box-shadow:none; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .pe-corte::-webkit-scrollbar{ display:none }
  .pe-corte__in{ width:60rem }
  .pe-col{ scroll-snap-align:start; scroll-margin-left:var(--canal, 1rem) }
  .pe-r{ width:13.5rem; padding:.7rem .9rem .8rem }
  .pe-r__v b{ font-size:2.4rem }
  .pe-r__c{ font-size:.86rem }
  .pe-desliza{ display:flex; align-items:center; gap:.5rem; margin:.6rem 0 0; font:italic 400 .92rem/1.3 var(--lee); color:var(--mudo) }
  .pe-desliza::after{ content:""; width:2.2rem; height:1px; background:currentColor }
  .pe--fin .pe-desliza{ visibility:hidden }
  .pe-mando{ gap:.7rem }
  .pe-mira{ border-radius:20px }
  .pe-m{ padding:0 .8rem; font-size:.88rem }
  .pe-p{ border-radius:22px }
}

/* ================================================================ 2 · LIMPIEZA ANTI-IA */
/* Apertura: el antetítulo deja de ser una píldora con punto */
.dt-ap__ante{ margin:0 0 1rem; font:italic 400 1.1rem/1.3 var(--lee); color:var(--piedra) }

/* Diagnóstico: los tres pasos sin hilo vertical; el número del icono basta */
.fr-hilo__i::before{ display:none }
.fr-hilo__i{ padding-bottom:1.6rem }

/* «Qué recibe usted»: sin caja teñida. Una frase con su rótulo en cursiva, sobre un filete */
.fr-recibe{ padding:1rem 0 0; border-radius:0; background:none; border-top:1px solid var(--filete-firme); gap:.25rem }
.fr-recibe b{ font:italic 400 1rem/1.3 var(--lee); color:var(--mudo) }
.fr-recibe span{ font-family:var(--sans); font-size:clamp(1.05rem,1rem + .3vw,1.22rem); font-weight:600; line-height:1.4; letter-spacing:-.005em }
.fr-pro__pie .fr-recibe{ background:none }
.oscuro .fr-recibe{ background:none; border-top-color:rgba(244,242,238,.25) }
.oscuro .fr-recibe b{ color:rgba(244,242,238,.7) }

/* Iniciativas: nombres enlazados en línea, sin píldora ni punto */
.fr-edu__base{ background:none; border-radius:0; padding:1.4rem 0 0; border-top:1px solid var(--filete-firme) }
.fr-edu__esp{ gap:.2rem 1.6rem }
.fr-edu__esp a{ padding:0; border-radius:0; background:none !important; box-shadow:none; font-size:1rem; color:var(--tinta); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--c) 80%, var(--tinta)); text-decoration-thickness:2px; text-underline-offset:.3em }
.fr-edu__esp a::before{ display:none }
.fr-edu__esp a:hover{ color:var(--petroleo) }

/* «Qué recibe quien nos encarga»: lista numerada, no cuatro cajas iguales */
.fr-enc .qenc__ent{ gap:0 2rem }
.fr-enc .qenc__ent li{ background:none; border-radius:0; padding:.9rem 0; border-top:1px solid var(--filete); align-content:start; grid-template-rows:auto 1fr }
.fr-enc .qenc__en{ width:auto; height:auto; border-radius:0; background:none; color:var(--petroleo); font:400 1.6rem/1 var(--lee); place-items:start }
.fr-enc .qenc__fr a{ min-height:var(--toque,44px); padding:0; border:0; box-shadow:none; outline-offset:2px; border-radius:0; background:none; text-decoration:underline; text-underline-offset:.25em; color:var(--petroleo) }
.fr-enc .qenc__fr a:hover{ background:none; color:var(--tinta) }
.fr-enc .qenc__fr{ gap:.2rem 1.2rem }



/* Seis momentos: la etiqueta sobre la foto sobra (la etapa ya se lee arriba) */
.dt-mom__et{ display:none }


/* Cómo se financia: los roles y las vías como texto en el color de su tramo, sin píldora ni punto */
.cf-chip{ padding:0; border-radius:0; background:none !important; box-shadow:none !important; color:var(--rc); font-size:.88rem }
.cf-chip::before{ display:none }
.cf-roles ul{ gap:.2rem 1.1rem }
.cf-panel__fila .cf-chip{ padding:0; font-size:1.05rem }

/* ================================================================ 3 · CIERRE: la foto en su franja, el texto sobre fondo libre */
.dt-cta{ --cta-foto:clamp(15rem,36vw,32rem); padding-top:0 }
.dt-cta::after{ display:none }
.dt-cta__foto{ position:relative; inset:auto; z-index:auto; height:var(--cta-foto); margin-bottom:var(--banda) }
.dt-cta__foto img{ object-position:50% 42% }
.dt-cta__pie{ top:calc(var(--cta-foto) - 2.1rem); bottom:auto; text-shadow:0 1px 6px rgba(0,0,0,.55); color:rgba(244,242,238,.9) }
.dt-cta__pasos{ gap:0 }
.dt-cta__pasos li{ padding:var(--e-md) 0; border-radius:0; background:none; border-top:1px solid rgba(244,242,238,.18) }
.dt-cta__pasos li:last-child{ border-bottom:1px solid rgba(244,242,238,.18) }
.dt-cta__pasos span{ width:auto; height:auto; border-radius:0; background:none; color:var(--piedra); font:400 2rem/1 var(--lee); place-items:start }
@media (max-width:47.99rem){ .dt-cta{ --cta-foto:clamp(14rem,62vw,20rem) } .dt-cta__foto img{ object-position:50% 40% } }

/* ================================================================ 5 · v29 · ENTRAMOS POR LA ESCUELA (#escuchar)
   Lenguaje del Ecosistema: foto real a sangre que se queda fija, texto en capas y un recorrido de cuatro pasos.
   v29b: cada paso trae su foto de Ticumpinía (se funden al cambiar), pasos más bajos, inactivos al 72 %,
   luz cálida a la izquierda. En celular, la primera foto arriba y cada paso con su propia foto. */
.esc{ position:relative; isolation:isolate; color:var(--papel);
  background:radial-gradient(55% 45% at 12% 30%, rgba(217,164,65,.14), transparent 70%), radial-gradient(50% 40% at 10% 85%, rgba(235,163,175,.08), transparent 70%), var(--noche) }
.esc__escena{ position:relative }
.esc__foto{ position:relative; overflow:hidden }
.esc__foto picture, .esc__foto img{ display:block; width:100%; height:100% }
.esc__foto img{ object-fit:cover; object-position:var(--pos, 50% 50%) }
.esc__riel{ display:none }
.esc__txt{ position:relative; z-index:1 }
.esc__ante{ margin:0 0 .9rem; font:600 .95rem/1.2 var(--sans); color:var(--sol, #D9A441) }
.esc__t{ margin:0; font-family:var(--sans); font-size:clamp(2.1rem,1.3rem + 2.4vw,3.4rem); font-weight:650; line-height:1.02; letter-spacing:-.03em; max-width:14ch; text-wrap:balance; color:var(--papel) }
.esc__lede{ margin:1.2rem 0 0; font-family:var(--lee); font-size:clamp(1.08rem,1rem + .35vw,1.25rem); line-height:1.6; color:#E2E7E4; max-width:40ch }
.esc__pasos{ list-style:none; margin:0; padding:0 }
.esc-paso__c{ position:relative; padding:1.3rem 1.5rem 1.4rem 4.6rem; border-radius:20px; border:1px solid rgba(244,242,238,.16);
  background:rgba(28,40,58,.62); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8); transition:opacity .4s ease, border-color .4s ease, background .4s ease }
.esc-paso__n{ position:absolute; left:1.3rem; top:1.25rem; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  font:400 1.15rem/1 var(--lee); color:var(--sol-2, #E8C270); box-shadow:inset 0 0 0 1.2px rgba(217,164,65,.6); background:radial-gradient(circle at 35% 30%, rgba(217,164,65,.22), var(--noche-hondo) 75%) }
.esc-paso h3{ margin:0; font:650 1.25rem/1.2 var(--sans); letter-spacing:-.01em; color:var(--papel) }
.esc-paso p{ margin:.45rem 0 0; font:400 1.02rem/1.58 var(--lee); color:#DDE3E2 }
.esc-paso__foto{ display:none }
.esc__ir{ margin:2rem 0 0 }
.esc__pie{ position:relative; z-index:1; margin:0; padding-block:1rem 1.4rem; font:400 .82rem/1.4 var(--sans); color:rgba(244,242,238,.72); text-align:right }

@media (min-width:62rem){
  .esc__escena{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; z-index:0 }
  .esc__foto{ position:absolute; inset:0 0 0 34%; height:auto; opacity:0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%) }
  .esc__foto.es-on{ opacity:1 }
  .esc__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,26,47,.35), transparent 24%, transparent 68%, rgba(10,26,47,.72)) }
  .esc__riel{ position:absolute; left:0; right:0; bottom:2rem; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; margin:0 auto; padding-left:calc(34% + 1rem); list-style:none; counter-reset:esc }
  .esc__riel li{ counter-increment:esc; display:flex; align-items:center; gap:.4rem; padding:.5rem .75rem; border-radius:999px; font:600 .78rem/1 var(--sans); white-space:nowrap; color:rgba(244,242,238,.75);
    background:rgba(10,26,47,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(244,242,238,.12); transition:color .3s, border-color .3s, background .3s }
  .esc__riel li::before{ content:counter(esc); font:400 .95rem/1 var(--lee); color:var(--sol, #D9A441) }
  .esc__riel li.es-on{ color:var(--papel); border-color:rgba(217,164,65,.6); background:rgba(17,37,63,.8) }
  .esc__txt{ margin-top:-100vh; margin-top:-100svh; padding-bottom:10vh }
  .esc__cab{ min-height:72vh; min-height:72svh; display:flex; flex-direction:column; justify-content:center; max-width:30rem; padding-top:calc(var(--alto-nav, 4.25rem) + 4rem) }
  .esc__pasos{ max-width:30rem; display:grid; gap:1.2rem }
  .esc-paso{ min-height:36vh; min-height:36svh; display:flex; align-items:center }
  .esc-paso__c{ width:100% }
  .esc--js .esc-paso:not(.es-on) .esc-paso__c{ opacity:.72 }
  .esc--js .esc-paso.es-on .esc-paso__c{ border-color:rgba(217,164,65,.5); background:rgba(32,44,62,.78) }
  .esc__ir{ max-width:30rem }
  .esc__pie{ max-width:none; text-align:left; padding-top:0 }
  .esc__ir{ margin-bottom:1.2rem }
}
@media (min-width:62rem) and (prefers-reduced-motion:no-preference){
  .esc__foto{ transition:opacity .9s ease }
  .esc__foto img{ transform:scale(1.04); transition:transform 6s var(--curva) }
  .esc__foto.es-on img{ transform:scale(1) }
}
@media (max-width:61.99rem){
  .esc__foto{ aspect-ratio:4/3; max-height:70vh; width:100% }
  .esc__foto:not([data-esc="0"]){ display:none }
  .esc__foto::after{ content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(180deg, transparent, var(--noche)) }
  .esc__txt{ margin-top:-3.5rem; padding-bottom:1rem }
  .esc__pasos{ position:relative; margin-top:2rem; display:grid; gap:.9rem }
  .esc__pasos::before{ content:""; position:absolute; left:2.5rem; top:1.5rem; bottom:1.5rem; width:1px; background:rgba(217,164,65,.35); z-index:-1 }
  .esc-paso__c{ padding:1.1rem 1.2rem 1.2rem 4.2rem }
  .esc-paso__n{ left:1.1rem; top:1.05rem }
  .esc-paso__foto{ display:block; margin-top:.9rem; border-radius:14px; overflow:hidden; aspect-ratio:16/10 }
  .esc-paso__foto img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%) }
  .esc-paso:first-child .esc-paso__foto{ display:none }
  .esc__pie{ text-align:left }
}

/* Frase que lleva de los frentes a la medición, al cierre de «Qué recibe quien nos encarga» */
.fr-enc__sigue{ margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding-top:1.4rem; max-width:44rem; border-top:1px solid var(--filete); text-align:center; font:400 1.1rem/1.6 var(--lee); color:var(--tinta-2) }
.fr-enc__sigue .dt-ir{ margin-left:.3rem; white-space:nowrap }

/* ================================================================ 6 · v29 · LOS CUATRO FRENTES */
/* Introducción: banda oscura con el diagrama del Ecosistema (el fin arriba, los frentes abajo, la escuela como base) */
.fr-intro.oscuro{ position:relative; overflow:hidden; padding-block:var(--banda); background:radial-gradient(45% 60% at 74% 38%, rgba(217,164,65,.09), transparent 70%), linear-gradient(180deg, var(--noche-hondo), var(--noche) 85%) }
.fr-intro .fr-intro__g{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(2.5rem,6vw,6rem) }
.fr-intro__ante{ margin:0 0 .9rem; font:600 .95rem/1.2 var(--sans); color:var(--sol, #D9A441) }
.fr-intro__t{ margin:0; font-family:var(--sans); font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem); font-weight:650; line-height:1.04; letter-spacing:-.028em; max-width:15ch; text-wrap:balance; color:var(--papel) }
.fr-intro .fr-intro__e{ margin:1.2rem 0 0; font-family:var(--lee); font-size:clamp(1.06rem,1rem + .3vw,1.2rem); line-height:1.62; color:#C9D4D7; max-width:44ch }
.fr-mapa{ display:grid; justify-items:center; width:100%; max-width:40rem; justify-self:center }
.fr-mapa__fin{ position:relative; z-index:1; display:grid; justify-items:center; gap:.1rem; margin:0; padding:1rem 2rem .95rem; border-radius:999px; text-align:center;
  background:radial-gradient(120% 140% at 50% 20%, #142C4A, var(--noche-hondo) 75%);
  box-shadow:inset 0 0 0 1.2px rgba(217,164,65,.6), 0 0 0 10px rgba(217,164,65,.05), 0 24px 60px -24px rgba(0,0,0,.7) }
.fr-mapa__fin b{ font:700 clamp(1.05rem,.95rem + .5vw,1.3rem)/1.2 var(--sans); color:var(--papel) }
.fr-mapa__fin i{ font:italic 400 .95rem/1.2 var(--lee); color:var(--sol-2, #E8C270) }
.fr-mapa__hilos{ display:block; width:100%; height:clamp(4.5rem,8vw,6.5rem); margin-top:-.2rem; overflow:visible }
.fr-mapa__hilos path{ fill:none; stroke-width:1.3; opacity:.7 }
.fr-mapa__l{ list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) }
.fr-mapa__l a{ display:grid; justify-items:center; gap:.35rem; padding:.3rem .25rem .6rem; border-radius:16px; text-align:center; text-decoration:none; color:var(--papel); transition:background .25s }
.fr-mapa__l a:hover{ background:rgba(244,242,238,.05) }
.fr-mapa__l a:focus-visible{ outline:2px solid var(--piedra); outline-offset:2px }
.fr-mapa__ic{ display:grid; place-items:center; width:clamp(3.4rem,2.8rem + 1.6vw,4.3rem); aspect-ratio:1; margin-bottom:.25rem; border-radius:50%; color:var(--c);
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 26%, var(--noche-2)), var(--noche-hondo) 75%);
  box-shadow:inset 0 0 0 1.4px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 9%, transparent); transition:box-shadow .3s, transform .3s var(--salida) }
.fr-mapa__l a:hover .fr-mapa__ic{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.6px var(--c), 0 0 0 8px color-mix(in srgb, var(--c) 16%, transparent), 0 0 26px color-mix(in srgb, var(--c) 30%, transparent) }
.fr-mapa__ic .fr-ic{ width:1.8rem; height:1.8rem }
.fr-mapa__l b{ font:600 .95rem/1.25 var(--sans) }
.fr-mapa__l small{ font:italic 400 .9rem/1.3 var(--lee); color:#B9C4CC }
.fr-mapa__base{ width:100%; margin:1.2rem 0 0; padding:.85rem 1rem; border-radius:999px; text-align:center; border:1px solid rgba(244,242,238,.16); background:rgba(17,37,63,.6); font:600 .92rem/1.3 var(--sans); color:#DCE3E6 }
@media (max-width:61.99rem){ .fr-intro .fr-intro__g{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:40rem){
  .fr-mapa__hilos{ display:none }
  .fr-mapa__l{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-top:1.2rem }
  .fr-mapa__base{ border-radius:18px }
}

/* Tarjeta clara del Ecosistema: fondo blanco, esquinas amplias, sombra larga y suave */
.fr-tarjeta{ margin-top:clamp(2rem,4vw,3.25rem); padding:clamp(1.4rem,3.4vw,2.8rem); border-radius:28px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 30px 70px -48px rgba(10,26,47,.5) }
.fr-tarjeta .fr-recibe{ margin-top:1.6rem }

/* 1 · Diagnóstico: cabecera y foto; debajo, el flujo escuchar → medir → devolver, con su vuelta */
.fr-diag{ background:var(--papel) }
.fr-diag__top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center }
.fr-diag .fr-diag__foto{ position:relative; top:auto; margin:0 }
.fr-diag .fr-diag__foto img{ aspect-ratio:16/11; border-radius:24px; object-position:55% 50% }
.fr-diag .fr-diag__foto figcaption{ position:absolute; left:1rem; bottom:1rem; margin:0; padding:.45rem .9rem; border-radius:999px; font:500 .82rem/1.3 var(--sans); color:var(--papel);
  background:rgba(10,26,47,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.fr-flujo{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
.fr-flujo__i{ position:relative; display:grid; justify-items:center; align-content:start; padding-inline:clamp(.8rem,2vw,1.8rem); text-align:center }
.fr-flujo__i:not(:last-child)::after{ content:""; position:absolute; top:2.1rem; left:calc(50% + 2.9rem); right:calc(2.9rem - 50%); height:1.5px; background:var(--fr-cd) }
.fr-flujo__i:not(:last-child)::before{ content:""; position:absolute; top:calc(2.1rem - 4px); right:calc(2.9rem - 50%); width:8px; height:8px; border-top:1.5px solid var(--fr-cd); border-right:1.5px solid var(--fr-cd); transform:rotate(45deg) }
.fr-flujo__nodo{ position:relative; display:grid; place-items:center; width:4.2rem; height:4.2rem; border-radius:50%; color:var(--tinta);
  background:color-mix(in srgb, var(--c) 22%, #fff); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, var(--tinta)), 0 0 0 8px color-mix(in srgb, var(--c) 10%, transparent) }
.fr-flujo__nodo .fr-ic{ width:1.5rem; height:1.5rem }
.fr-flujo__nodo em{ position:absolute; top:-.25rem; right:-.25rem; display:grid; place-items:center; width:1.45rem; height:1.45rem; border-radius:50%; font:600 .74rem/1 var(--sans); font-style:normal; color:var(--papel); background:var(--noche) }
.fr-flujo h3{ margin:1.1rem 0 .4rem; font:650 1.3rem/1.2 var(--sans); letter-spacing:-.015em; color:var(--tinta) }
.fr-flujo p{ margin:0; max-width:34ch; font:400 1rem/1.58 var(--lee); color:var(--tinta-2) }
.fr-flujo .fr-flujo__ve{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 1.2rem; margin-top:.5rem }
.fr-flujo__abajo{ position:relative; margin-top:.4rem }
.fr-flujo__vuelta{ display:block; width:100%; height:3.6rem; overflow:visible }
.fr-flujo__vuelta path{ fill:none; stroke:var(--fr-cd); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.fr-flujo__vtxt{ position:absolute; left:50%; bottom:-.15rem; transform:translateX(-50%); margin:0; padding:0 1rem; white-space:nowrap; background:#fff; font:italic 400 1.02rem/1.3 var(--lee); color:var(--fr-cd) }
@media (max-width:61.99rem){
  .fr-diag__top{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:47.99rem){
  .fr-flujo{ grid-template-columns:minmax(0,1fr); gap:1.6rem }
  .fr-flujo__i{ grid-template-columns:3.4rem minmax(0,1fr); justify-items:start; column-gap:1rem; padding:0; text-align:left }
  .fr-flujo__nodo{ grid-row:1 / span 3; width:3.4rem; height:3.4rem; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, var(--tinta)) }
  .fr-flujo h3{ margin:.3rem 0 .3rem }
  .fr-flujo .fr-flujo__ve{ justify-content:flex-start }
  .fr-flujo__i:not(:last-child)::after{ top:3.8rem; bottom:-1.4rem; left:1.7rem; right:auto; width:1.5px; height:auto }
  .fr-flujo__i:not(:last-child)::before{ display:none }
  .fr-flujo__vuelta{ display:none }
  .fr-flujo__abajo{ margin-top:1.4rem }
  .fr-flujo__vtxt{ position:static; transform:none; padding:0; white-space:normal }
}

/* 2 · Dinámica social: el anillo con nodos de borde fino y luz suave */
.fr-anillo__nodo circle{ stroke-width:1.4 }
.fr-ciclo{ border-radius:24px }

/* 3 · Proyectos educativos: visor con esquinas amplias y pie de vidrio */
.fr-edu{ background:var(--papel) }
.fr-visor__marco{ border-radius:24px; box-shadow:0 30px 70px -48px rgba(10,26,47,.55) }
.fr-visor__f figcaption{ left:1rem; right:auto; bottom:1rem; padding:.5rem .95rem; border-radius:999px; background:rgba(10,26,47,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.fr-visor__bs{ gap:.6rem; margin-top:.75rem }
.fr-visor__b{ border-radius:14px }
.fr-visor__b[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--papel), 0 0 0 4px var(--fr-cd) }
.fr-edu__txt{ padding:clamp(1.4rem,3vw,2.2rem); border-radius:28px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 30px 70px -48px rgba(10,26,47,.5) }

/* 4 · Proyectos productivos: dos fotos parejas y el camino de tres pasos centrado, de un nodo al otro */
.fr-pro .fr-pro__fotos{ align-items:end }
.fr-pro .fr-pro__fotos figure:last-child{ margin-top:0; margin-bottom:2.5rem }
.fr-pro .fr-pro__fotos img{ border-radius:20px }
.fr-pro__camino{ text-align:center }
.fr-camino__k{ margin:0; font:italic 400 1.1rem/1.3 var(--lee); color:var(--fr-cd) }
.fr-pro .fr-camino{ margin:1.6rem auto 0; max-width:62rem; gap:0 }
.fr-pro .fr-camino::before{ display:none }
.fr-pro .fr-camino li{ display:grid; justify-items:center; align-content:start; padding-inline:clamp(.8rem,2vw,1.8rem); text-align:center }
.fr-pro .fr-camino__n{ margin:0; box-shadow:0 0 0 6px #fff, 0 0 0 7px color-mix(in srgb, var(--c) 45%, transparent) }
.fr-pro .fr-camino li:not(:last-child)::after{ content:""; position:absolute; top:1.35rem; left:calc(50% + 2.3rem); right:calc(2.3rem - 50%); height:2px; border-radius:1px; background:var(--fr-cd) }
.fr-pro .fr-camino li:not(:last-child)::before{ content:""; position:absolute; top:calc(1.35rem - 4px); right:calc(2.3rem - 50%); width:8px; height:8px; border-top:2px solid var(--fr-cd); border-right:2px solid var(--fr-cd); transform:rotate(45deg) }
.fr-pro .fr-camino p{ max-width:28ch }
@media (max-width:47.99rem){
  .fr-pro__camino{ text-align:left }
  .fr-pro .fr-camino{ gap:1.5rem }
  .fr-pro .fr-camino li{ display:grid; grid-template-columns:2.7rem minmax(0,1fr); justify-items:start; column-gap:1rem; padding:0; text-align:left }
  .fr-pro .fr-camino li:not(:last-child)::after{ top:3.3rem; bottom:-1.2rem; left:1.3rem; right:auto; width:2px; height:auto }
  .fr-pro .fr-camino li:not(:last-child)::before{ display:none }
  .fr-pro .fr-pro__fotos figure:last-child{ margin-bottom:1.6rem }
}

/* Qué recibe quien nos encarga: el panel como tarjeta clara */
.fr-enc{ background:var(--papel) }
.fr-enc .qenc__panel{ border-radius:28px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 30px 70px -48px rgba(10,26,47,.5) }

/* Frase puente entre los frentes y la medición */
.dt-puente{ background:var(--papel) }

/* ===================================================================== v30 · QH-A
   Costa, sierra y selva: panel de la región con foto, evolución de la pobreza y ocho cifras. */
.pe-p{ padding:0; overflow:hidden; gap:0 }
.pe-p__top{ display:grid }
@media (min-width:62rem){ .pe-p__top{ grid-template-columns:minmax(0,5fr) minmax(0,6fr) } }
.pe-p__foto{ position:relative; margin:0; min-height:clamp(17rem,42vw,30rem); overflow:hidden; background:#2A3A3F }
.pe-p__foto picture, .pe-p__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.pe-p__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,18,28,.82) 0%, rgba(8,18,28,.42) 38%, rgba(8,18,28,0) 66%) }
.pe-p__cap{ position:absolute; z-index:1; left:0; right:0; bottom:0; padding:clamp(1.3rem,3vw,2.4rem) }
.pe-p__cap .pe-lee__r{ margin:0 0 .55rem; font:italic 400 1.1rem/1 var(--lee); color:color-mix(in srgb, var(--rc) 55%, #fff) }
.pe-p__cap .pe-lee__t{ margin:0; color:#fff; font-size:clamp(1.6rem,1.15rem + 1.5vw,2.5rem); max-width:16ch; text-shadow:0 1px 18px rgba(0,0,0,.25) }
.pe-p .pe-lee{ display:block; padding:clamp(1.5rem,3.4vw,2.8rem) }
.pe-p .pe-lee__p{ font-size:1.12rem }
/* Evolución de la pobreza, 2016-2025 */
.pe-ev{ margin:1.6rem 0 0; padding-top:1.3rem; border-top:1px solid var(--filete); max-width:32rem }
.pe-ev__t{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .7rem; margin-bottom:.5rem }
.pe-ev__t b{ font:650 1rem/1.3 var(--sans); color:var(--tinta) }
.pe-ev__t span{ font:italic 400 .92rem/1.3 var(--lee); color:var(--mudo) }
.pe-ev__svg{ display:block; width:100%; height:auto; overflow:visible }
.pe-ev__g{ stroke:rgba(14,23,38,.1); stroke-width:1 }
.pe-ev__2020{ stroke:rgba(14,23,38,.18); stroke-width:1; stroke-dasharray:2 3 }
.pe-ev__eje{ font:500 9.5px/1 var(--sans); fill:var(--mudo) }
.pe-ev__pe{ fill:none; stroke:#7D838C; stroke-width:1.5; stroke-dasharray:4 3; stroke-linejoin:round }
.pe-ev__r{ fill:none; stroke:var(--rc); stroke-width:2.8; stroke-linejoin:round; stroke-linecap:round }
.pe-ev__p{ fill:var(--rc); stroke:#fff; stroke-width:1.6 }
.pe-ev__v{ font:650 11px/1 var(--sans); fill:var(--ro) }
.pe-ev__vp{ font:500 11px/1 var(--sans); fill:#5F656D }
.pe-ev__lee{ margin:.5rem 0 0; font:400 .95rem/1.55 var(--lee); color:var(--tinta-2); max-width:44ch }
@media (prefers-reduced-motion:no-preference){
  .pe-p.pe-entra .pe-ev__r{ stroke-dasharray:1; animation:pe-traza 1s var(--salida) .15s both }
  .pe-p.pe-entra .pe-fi__regla i{ animation:pe-crece .7s var(--salida) .1s both }
}
@keyframes pe-traza{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
@keyframes pe-crece{ from{ width:0 } }
/* La región en ocho cifras */
.pe-ficha{ padding:clamp(1.5rem,3.4vw,2.8rem); background:color-mix(in srgb, var(--rc) 6%, #FBFAF7); border-top:1px solid rgba(14,23,38,.06) }
.pe-ficha__cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem 1.5rem }
.pe-ficha__h{ margin:0; font:650 1.2rem/1.2 var(--sans); color:var(--tinta) }
.pe-ficha__k{ margin:0; font:italic 400 .95rem/1.4 var(--lee); color:var(--mudo) }
.pe-ficha__l{ list-style:none; margin:1.3rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem clamp(1rem,2.6vw,2.2rem) }
@media (min-width:62rem){ .pe-ficha__l{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.pe-fi{ display:grid; align-content:start; gap:.35rem; padding-top:.9rem; border-top:1px solid rgba(14,23,38,.12); min-width:0 }
.pe-fi__n{ font:600 .86rem/1.3 var(--sans); color:var(--tinta-2); min-height:2.6em }
.pe-fi__v{ display:flex; align-items:baseline; gap:.12rem; font-family:var(--sans); color:var(--ro); font-variant-numeric:tabular-nums }
.pe-fi__v b{ font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem); font-weight:650; line-height:1; letter-spacing:-.03em }
.pe-fi__v small{ font-size:.9rem; font-weight:600 }
.pe-fi__regla{ position:relative; display:block; height:4px; margin:.25rem 0 .1rem; border-radius:2px; background:rgba(14,23,38,.1) }
.pe-fi__regla i{ position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:2px; background:var(--rc) }
.pe-fi__regla em{ position:absolute; top:-4px; height:12px; width:2px; margin-left:-1px; left:var(--p); background:var(--tinta) }
.pe-fi__d{ font:400 .84rem/1.4 var(--lee); color:var(--mudo) }
.pe-p .pe-ru{ margin:0; padding:clamp(1.5rem,3.4vw,2.8rem); border-top:1px solid var(--filete) }
.pe-tabla__caja{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.pe-tabla__f{ font-size:.78rem; color:var(--mudo); white-space:nowrap }
@media (max-width:47.99rem){
  .pe-fi__n{ font-size:.82rem }
  .pe-ev__lee{ font-size:.92rem }
}
@media (max-width:47.99rem){
  /* el mando: seis opciones en dos columnas parejas */
  .pe-mira{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; border-radius:22px }
  .pe-m{ padding:0 .6rem }
  .pe-ev__eje{ font-size:12.5px }
  .pe-ev__v, .pe-ev__vp{ font-size:13.5px }
}

/* ===================================================================== v30 · QH-A · los cuatro frentes */
/* Diagnóstico: Escuchar, Medir, Devolver, cada uno con su foto, su nodo y lo que deja */
.fr-dg{ margin-top:clamp(2.6rem,5vw,4rem) }
.fr-dg__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.6rem); counter-reset:dg }
.fr-dg__p{ position:relative; display:grid; justify-items:center; align-content:start; text-align:center; min-width:0 }
.fr-dg__foto{ position:relative; width:100%; margin:0; border-radius:24px; overflow:hidden; aspect-ratio:4/3; background:#D9D3C7; box-shadow:0 26px 60px -40px rgba(10,26,47,.6) }
.fr-dg__foto img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform .7s var(--salida) }
.fr-dg__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,18,28,.55), rgba(8,18,28,0) 45%) }
.fr-dg__num{ position:absolute; z-index:1; left:1.1rem; bottom:.55rem; font:400 clamp(3rem,2.2rem + 2.4vw,4.6rem)/1 var(--lee); color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.25) }
.fr-dg__nodo{ position:relative; z-index:2; display:grid; place-items:center; width:4.4rem; height:4.4rem; margin-top:-2.2rem; border-radius:50%; background:#fff; color:var(--fr-cd);
  box-shadow:0 0 0 6px var(--papel), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, var(--tinta)), 0 14px 26px -16px rgba(10,26,47,.6) }
.fr-dg__nodo .fr-ic{ width:1.6rem; height:1.6rem }
/* el hilo entre nodos: sale del borde de un nodo y llega, con su flecha, al borde del siguiente */
.fr-dg__l{ --g:clamp(1.2rem,3vw,2.6rem); container-type:inline-size; gap:var(--g) }
.fr-dg__foto{ z-index:1 }
.fr-dg__p:not(:last-child)::after{ content:""; position:absolute; z-index:0; top:calc((100cqw - 2 * var(--g)) / 4); left:50%; width:calc(50% + var(--g) - 4px); height:1.5px; background:var(--fr-cd) }
.fr-dg__p:not(:last-child)::before{ content:""; position:absolute; z-index:0; top:calc((100cqw - 2 * var(--g)) / 4 - 4px); left:calc(100% + var(--g) - 11px); width:8px; height:8px; border-top:1.5px solid var(--fr-cd); border-right:1.5px solid var(--fr-cd); transform:rotate(45deg) }
.fr-dg__p h3{ margin:1rem 0 .4rem; font:650 clamp(1.35rem,1.1rem + .8vw,1.7rem)/1.15 var(--sans); letter-spacing:-.02em; color:var(--tinta) }
.fr-dg__d{ margin:0; max-width:34ch; font:400 1rem/1.6 var(--lee); color:var(--tinta-2) }
.fr-dg__deja{ display:grid; gap:.2rem; margin:1rem 0 0; padding:.85rem 1.1rem; width:min(100%,22rem); border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06); font:600 .98rem/1.4 var(--sans); color:var(--tinta) }
.fr-dg__deja b{ font:italic 400 .92rem/1.2 var(--lee); color:var(--fr-cd) }
.fr-dg__ve{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin:.9rem 0 0 }
.fr-dg .fr-flujo__abajo{ margin-top:.6rem; padding-inline:16.6% }
.fr-dg .fr-flujo__vtxt{ background:var(--papel) }
.fr-dg .fr-recibe{ margin-top:2rem }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .fr-dg__p:hover .fr-dg__foto img{ transform:scale(1.035) } }
@media (max-width:61.99rem){
  .fr-dg__l{ grid-template-columns:minmax(0,1fr); gap:2.6rem; max-width:34rem; margin-inline:auto }
  .fr-dg__p:not(:last-child)::after{ content:""; position:absolute; top:auto; bottom:-2.1rem; left:50%; width:1.5px; height:1.6rem; margin-left:-.75px; background:var(--fr-cd) }
  .fr-dg__p:not(:last-child)::before{ content:""; position:absolute; top:auto; bottom:-2.15rem; left:50%; width:8px; height:8px; margin-left:-4.5px; border-top:1.5px solid var(--fr-cd); border-right:1.5px solid var(--fr-cd); transform:rotate(135deg) }
  .fr-dg .fr-flujo__abajo{ padding-inline:0 }
}
/* Dinámica social: la mesa y el anillo */
.fr-anillo--v30{ width:min(100%,23rem); margin:1.4rem auto 1rem; color:var(--c) }
.fr-anillo__pista{ fill:none; stroke:rgba(244,242,238,.07); stroke-width:14 }
.fr-anillo--v30 .fr-anillo__arcos path{ stroke:var(--c); stroke-width:2.4; stroke-opacity:.85; stroke-linecap:round; transition:stroke-width .25s ease, stroke-opacity .25s ease }
.fr-anillo--v30 .fr-anillo__arcos path[data-on="true"]{ stroke-width:4; stroke-opacity:1 }
.fr-anillo--v30 .fr-anillo__nodo circle{ fill:#14263A; stroke:var(--c); stroke-width:1.8 }
.fr-anillo--v30 .fr-anillo__nodo text{ font-size:15px }
.fr-mesa{ fill:url(#fr-mesaG); stroke:rgba(244,242,238,.28); stroke-width:1.2 }
.fr-mesa__as circle{ fill:#1C3140; stroke:rgba(244,242,238,.4); stroke-width:1.1 }
.fr-mesa__pe{ fill:none; stroke:var(--papel); stroke-width:1.3; stroke-linecap:round }
.fr-mesa__t{ font:500 11.5px/1 var(--sans); fill:#C9D3D8; text-anchor:middle }
.fr-anillo--v30 .fr-anillo__m{ font-size:15px }
.fr-ciclo__l li{ cursor:default }
.fr-ciclo__l li:focus-visible{ outline:2px solid var(--c); outline-offset:2px }
.fr-ciclo__k{ margin:.9rem 0 0; font:italic 400 .92rem/1.4 var(--lee); color:#B9C5CB }
/* Educativos: a quién acompañamos */
.fr-edu__quien--v30{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:.2rem }
.fr-edu__quien--v30 li{ display:grid; justify-items:start; align-content:start; gap:.15rem; padding:.95rem 1rem 1rem; border:0; border-radius:16px; background:color-mix(in srgb, var(--c) 12%, #FBFAF7); font-size:.92rem; line-height:1.35 }
.fr-edu__quien--v30 li .fr-ic{ width:2rem; height:2rem; margin-bottom:.45rem; color:var(--fr-cd) }
.fr-edu__quien--v30 b{ font-size:1rem }
.fr-edu__quien--v30 span{ font-family:var(--lee); font-style:italic; color:var(--tinta-2) }
@media (max-width:30rem){ .fr-edu__quien--v30{ grid-template-columns:minmax(0,1fr) } .fr-edu__quien--v30 li{ grid-template-columns:auto minmax(0,1fr); column-gap:.8rem; align-items:center } .fr-edu__quien--v30 .fr-ic{ grid-row:1 / span 2; margin:0 } }
/* Productivos: títulos alineados por abajo para que la fila 1-2-3 quede pareja */
@media (min-width:48rem){
  .fr-pro .fr-camino h3{ display:flex; align-items:flex-end; justify-content:center; min-height:2.5em; margin-top:.9rem; text-wrap:balance }
}
/* Diagnóstico: en escritorio, las seis filas de cada paso se alinean entre columnas (foto, nodo, verbo, texto, deja, enlaces) */
@media (min-width:62rem){
  @supports (grid-template-rows:subgrid){
    .fr-dg__l{ grid-template-rows:repeat(6,auto); row-gap:0 }
    .fr-dg__p{ grid-row:span 6; grid-template-rows:subgrid }
    .fr-dg__deja{ align-self:stretch; align-content:center }
  }
}
/* v30: «En cada momento, esto puede pedirnos», sin foto: una sola columna centrada */
.dt-comp__in--solo{ grid-template-columns:minmax(0,1fr); justify-items:center }
.dt-comp__in--solo > div{ width:min(100%,46rem) }
.dt-comp__in--solo .h2, .dt-comp__in--solo .entrada{ text-align:center; margin-inline:auto }
.dt-comp__in--solo .dt-sigue{ text-align:center }
/* v30b: en celular la foto del panel es más alta, para que el titular quede bajo las caras y no encima */
@media (max-width:61.99rem){ .pe-p__foto{ min-height:clamp(24rem,95vw,30rem) } }
/* v30b: en celular el recorrido se detiene con la tarjeta centrada (antes, contra el borde izquierdo) */
@media (max-width:47.99rem){ .pe-col{ scroll-snap-align:center; scroll-margin-left:0 } }

/* ===================================================================== v31 · QH-A · SIETE CAPÍTULOS
   Índice visible bajo la apertura, un solo subíndice fijo (el cap. 4 abre 4.1 a 4.4), puentes al pie de cada
   capítulo, cap. 1 con gráfico de puntos, cap. 2 sin vacíos, cap. 4 con ficha de línea base y cap. 7 por perfil. */

/* ---- Índice: siete capítulos, unidos por un riel */
.dt-ind{ position:relative; background:var(--papel); padding-block:clamp(2.6rem,5vw,4rem) clamp(2.4rem,4.5vw,3.6rem); border-bottom:1px solid var(--filete) }
.dt-ind__cab{ display:grid; gap:.5rem 3rem; align-items:end }
@media (min-width:62rem){ .dt-ind__cab{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) } }
.dt-ind__t{ margin:0; font:650 clamp(1.5rem,1.2rem + 1vw,2.1rem)/1.1 var(--sans); letter-spacing:-.022em; color:var(--tinta); text-wrap:balance }
.dt-ind__d{ margin:0; font:400 1.04rem/1.55 var(--lee); color:var(--tinta-2); max-width:46ch }
.dt-ind__l{ --riel:1.6rem; position:relative; list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:0; display:grid; gap:0; counter-reset:none }
.dt-ind__l::before{ content:""; position:absolute; z-index:0; background:linear-gradient(90deg, var(--ac-brujula), var(--ac-escuela) 30%, var(--ac-coar) 60%, var(--ac-lab) 85%, var(--petroleo)); opacity:.55 }
.dt-ind__l a{ position:relative; z-index:1; display:grid; gap:.7rem; height:100%; padding:0 .9rem 1rem 0; text-decoration:none; color:var(--tinta); border-radius:14px; transition:color .2s }
.dt-ind__n{ display:grid; place-items:center; width:var(--riel); height:var(--riel); margin-top:calc(var(--riel) * -0); border-radius:50%; background:var(--papel);
  box-shadow:inset 0 0 0 1.3px var(--tinta); font:400 .95rem/1 var(--lee); color:var(--tinta); transition:background .2s, color .2s, box-shadow .2s }
.dt-ind__tx{ display:grid; gap:.3rem }
.dt-ind__tx b{ font:650 1.02rem/1.25 var(--sans); letter-spacing:-.01em; text-wrap:balance }
.dt-ind__tx small{ font:400 .92rem/1.45 var(--lee); color:var(--mudo); text-wrap:pretty }
.dt-ind__l a:hover .dt-ind__n, .dt-ind__l a:focus-visible .dt-ind__n{ background:var(--noche); color:var(--papel); box-shadow:none }
.dt-ind__l a:hover b{ color:var(--petroleo) }
.dt-ind__l a:focus-visible{ outline:2px solid var(--petroleo); outline-offset:4px }
@media (min-width:64rem){
  .dt-ind__l{ grid-template-columns:repeat(7,minmax(0,1fr)) }
  .dt-ind__l::before{ left:0; right:0; top:calc(var(--riel) / 2); height:1.5px }
}
@media (max-width:63.99rem){
  .dt-ind__l{ grid-template-columns:minmax(0,1fr); gap:.2rem }
  .dt-ind__l::before{ top:.8rem; bottom:1.4rem; left:calc(var(--riel) / 2 - .75px); width:1.5px; background:linear-gradient(180deg, var(--ac-brujula), var(--ac-escuela) 30%, var(--ac-coar) 60%, var(--ac-lab) 85%, var(--petroleo)) }
  .dt-ind__l a{ grid-template-columns:var(--riel) minmax(0,1fr); column-gap:1rem; padding:.55rem 0 .7rem; min-height:var(--toque,44px) }
}

/* ---- Subíndice único: número y rótulo; dentro del cap. 4 se abren 4.1 a 4.4 y los demás quedan en su número */
.dt-sub{ border-bottom:1px solid var(--filete) }
.dt-sub .subnav__in{ align-items:stretch }
.dt-sub a{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap }
.dt-sub__n{ display:inline-grid; place-items:center; min-width:1.45rem; height:1.45rem; padding:0 .3rem; border-radius:999px; font:600 .74rem/1 var(--sans); color:var(--mudo); box-shadow:inset 0 0 0 1px rgba(14,23,38,.18); transition:background .2s, color .2s, box-shadow .2s }
.dt-sub a[aria-current="true"] .dt-sub__n{ background:var(--petroleo); color:var(--papel); box-shadow:none }
.dt-sub__g{ display:none; align-items:stretch }
.dt-sub[data-en="4"] .dt-sub__g{ display:inline-flex }
.dt-sub[data-en="4"] a[data-cap]:not([data-cap="4"]) .dt-sub__t{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.dt-sub[data-en="4"] a[data-cap]:not([data-cap="4"]){ padding-inline:.45rem }
.dt-sub__s{ position:relative; font-size:.82rem !important }
.dt-sub__s .dt-sub__n{ min-width:auto; height:auto; padding:0; box-shadow:none; font:600 .74rem/1 var(--sans); color:var(--mudo); background:none !important }
.dt-sub__s[aria-current="true"]{ color:var(--tinta) !important }
.dt-sub__s[aria-current="true"] .dt-sub__n{ color:var(--petroleo) }
.dt-sub__s i{ position:absolute; left:.9rem; right:.9rem; bottom:.55rem; height:2px; border-radius:1px; background:rgba(14,23,38,.1); overflow:hidden }
.dt-sub__s i::after{ content:""; position:absolute; inset:0; background:var(--petroleo); transform-origin:0 50%; transform:scaleX(var(--p,0)) }
.dt-sub__g a:first-child{ padding-left:.9rem !important }
@media (max-width:63.99rem){ .dt-sub{ display:none } }
@media (min-width:64rem) and (prefers-reduced-motion:no-preference){ .dt-sub__g{ animation:dt-sub-abre .35s var(--salida) both } }
@keyframes dt-sub-abre{ from{ opacity:0; transform:translateX(-6px) } }

/* ---- Puente al pie de cada capítulo */
.dt-puente--v31{ padding-block:clamp(2.4rem,5vw,3.6rem); background:var(--papel) }
.dt-puente--v31 p{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.4rem 1.1rem; max-width:none; margin-inline:auto; text-align:center }
.dt-puente__t{ font:italic 400 clamp(1.12rem,1rem + .45vw,1.35rem)/1.45 var(--lee); color:var(--tinta-2); text-wrap:balance }
.dt-puente__ir{ display:inline-flex; align-items:center; gap:.45rem; min-height:var(--toque,44px); font:600 .95rem/1.3 var(--sans); color:var(--petroleo); text-decoration:none; white-space:nowrap }
.dt-puente__ir span{ font-weight:500; color:var(--mudo) }
.dt-puente__ir:hover{ text-decoration:underline; text-underline-offset:.2em }
.dt-puente__ir:focus-visible{ outline:2px solid var(--petroleo); outline-offset:3px; border-radius:3px }
.dt-puente__ir svg{ transition:transform .2s var(--salida) }
.dt-puente__ir:hover svg{ transform:translateX(3px) }
.dt-puente--v31 + .banda, .dt-puente--v31 + section:not(.oscuro){ padding-top:clamp(1rem,2.5vw,2rem) }
@media (max-width:47.99rem){ .dt-puente--v31 p{ flex-direction:column; align-items:center; gap:.2rem } .dt-puente__ir{ white-space:normal } }

/* ---- Cap. 1 · una línea por región, el gráfico de puntos y el financiamiento en una frase */
.pe-mando--solo{ margin:clamp(1.8rem,3.6vw,2.8rem) 0 .2rem }
.pe-uno{ margin:0; padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.5rem,3.4vw,2.8rem); border-top:1px solid var(--filete); background:color-mix(in srgb, var(--rc) 6%, #FBFAF7);
  font:400 1.02rem/1.6 var(--lee); color:var(--tinta-2) }
.pe-uno b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.pe-uno .pe-ir{ margin-left:.2rem }

.pe-pt{ margin:clamp(2rem,4vw,3rem) 0 0; padding:clamp(1.4rem,3vw,2.4rem); border-radius:28px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 30px 70px -48px rgba(10,26,47,.5) }
.pe-pt__cab{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:.8rem 2rem }
.pe-pt__h{ margin:0; font:650 clamp(1.25rem,1.05rem + .7vw,1.6rem)/1.15 var(--sans); letter-spacing:-.018em; color:var(--tinta) }
.pe-pt__k{ margin:.4rem 0 0; font:italic 400 .98rem/1.45 var(--lee); color:var(--mudo); max-width:52ch }
.pe-pt__ley{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin:0; padding:0; list-style:none; font:600 .84rem/1.2 var(--sans); color:var(--tinta-2) }
.pe-pt__ley li{ display:inline-flex; align-items:center; gap:.4rem }
.pe-pt__ley i{ width:.8rem; height:.8rem; border-radius:50%; background:var(--rc); box-shadow:0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--rc) 40%, transparent) }
.pe-pt__ley .pe-pt__ley-pe i{ width:3px; height:1rem; border-radius:1px; background:var(--tinta); box-shadow:none }
.pe-pt__cuerpo{ --col:minmax(11rem,15rem); margin-top:1.4rem }
.pe-pt__eje, .pe-pt__f{ display:grid; grid-template-columns:var(--col) minmax(0,1fr); column-gap:clamp(1rem,2.5vw,2rem); align-items:center }
.pe-pt__esc{ position:relative; display:block; height:1.2rem; margin-inline:.6rem }
.pe-pt__esc span{ position:absolute; left:var(--x); transform:translateX(-50%); font:500 .76rem/1 var(--sans); color:var(--mudo); font-variant-numeric:tabular-nums }
.pe-pt__l{ list-style:none; margin:0; padding:0 }
.pe-pt__f{ padding-block:1.05rem; border-top:1px solid rgba(14,23,38,.08) }
.pe-pt__n{ display:grid; gap:.15rem; font:600 .95rem/1.3 var(--sans); color:var(--tinta) }
.pe-pt__n small{ font:italic 400 .84rem/1.2 var(--lee); color:var(--mudo) }
.pe-pt__pista{ position:relative; display:block; height:3.4rem; margin-inline:.6rem; background:linear-gradient(90deg, rgba(14,23,38,.07) 1px, transparent 1px) 0 50% / 25% 100% repeat-x }
.pe-pt__pista::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(14,23,38,.12) }
.pe-pt__rango{ position:absolute; top:calc(50% - 1.5px); height:3px; left:var(--a); width:calc(var(--b) - var(--a)); border-radius:2px; background:rgba(14,23,38,.22) }
.pe-pt__peru{ position:absolute; left:var(--x); top:calc(50% - .75rem); width:3px; height:1.5rem; margin-left:-1.5px; border-radius:1px; background:var(--tinta) }
.pe-pt__peru span{ position:absolute; top:calc(100% + .25rem); left:50%; transform:translateX(-50%); white-space:nowrap; font:500 .74rem/1 var(--sans); color:var(--tinta-2) }
.pe-pt__p{ position:absolute; left:var(--x); top:50%; width:.95rem; height:.95rem; margin:-.475rem 0 0 -.475rem; border-radius:50%; background:var(--rc); box-shadow:0 0 0 2px #fff;
  transition:transform .3s var(--salida), box-shadow .3s, left .9s var(--salida) }
.pe-pt__p span{ position:absolute; bottom:calc(100% + .35rem); left:50%; transform:translateX(-50%); white-space:nowrap; font:650 .9rem/1 var(--sans); color:var(--ro); font-variant-numeric:tabular-nums; opacity:0; transition:opacity .25s }
.pe[data-r="costa"] .pe-pt__p[data-r="costa"], .pe[data-r="sierra"] .pe-pt__p[data-r="sierra"], .pe[data-r="selva"] .pe-pt__p[data-r="selva"]{ z-index:2; transform:scale(1.3); box-shadow:0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--rc) 45%, transparent) }
.pe[data-r="costa"] .pe-pt__p[data-r="costa"] span, .pe[data-r="sierra"] .pe-pt__p[data-r="sierra"] span, .pe[data-r="selva"] .pe-pt__p[data-r="selva"] span{ opacity:1 }
.pe[data-r="costa"] .pe-pt__ley li[data-r="costa"], .pe[data-r="sierra"] .pe-pt__ley li[data-r="sierra"], .pe[data-r="selva"] .pe-pt__ley li[data-r="selva"]{ color:var(--ro) }
.pe--js .pe-pt:not(.es-visto) .pe-pt__p{ left:0 }
@media (prefers-reduced-motion:reduce){ .pe-pt__p{ transition:none } }
.pe-pt__pie{ margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--filete); font:400 .98rem/1.55 var(--lee); color:var(--tinta-2) }
.pe-pt__pie .pe-ir{ white-space:normal }
@media (max-width:47.99rem){
  .pe-pt{ border-radius:22px; padding:1.2rem 1.1rem 1.3rem }
  .pe-pt__eje, .pe-pt__f{ grid-template-columns:minmax(0,1fr) }
  .pe-pt__eje .pe-pt__n{ display:none }
  .pe-pt__f{ row-gap:.3rem; padding-block:.85rem .6rem }
  .pe-pt__pista, .pe-pt__esc{ margin-inline:.5rem }
}
.pe-fin{ margin:clamp(1.6rem,3vw,2.2rem) 0 0; max-width:62rem; font:400 1.02rem/1.62 var(--lee); color:var(--tinta-2) }
.pe-fin b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }

/* ---- Cap. 2 · Cómo entramos: los cuatro pasos juntos, sin vacíos; lo que deja cada uno */
.esc-paso__deja{ margin:.6rem 0 0 !important; padding-top:.55rem; border-top:1px solid rgba(244,242,238,.14); font:400 .95rem/1.5 var(--lee) !important; color:#E7D9B8 !important }
.esc-paso__deja b{ margin-right:.35rem; font:italic 400 .95rem/1 var(--lee); color:var(--sol-2, #E8C270) }
.esc__vuelta{ margin:1.4rem 0 0; max-width:30rem; font:italic 400 1.05rem/1.5 var(--lee); color:#C9D4D7 }
@media (min-width:62rem){
  .esc--v31 .esc__cab{ min-height:0; padding-top:clamp(6rem,14vh,9rem); padding-bottom:2.2rem }
  .esc--v31 .esc__pasos{ gap:.9rem }
  .esc--v31 .esc-paso{ min-height:0 }
  .esc--v31 .esc__txt{ padding-bottom:clamp(4rem,12vh,7rem) }
  .esc--v31 .esc__foto{ inset:0 0 0 30% }
}

/* ---- Cap. 3 · el puente del IDT‑5, al pie del árbol */
.ar-pie{ position:relative; margin-top:clamp(2rem,4vw,3rem) }
.ar-pie > section{ background:none !important; padding-block:clamp(1.6rem,3.5vw,2.6rem) 0 !important }
.ar-pie > section > .pagina{ padding-top:clamp(1.6rem,3.5vw,2.4rem); border-top:1px solid rgba(244,242,238,.14) }

/* ---- Cap. 4 · cabecera compacta: la tira de los cuatro frentes */
.fr-intro--v31.oscuro{ padding-block:clamp(3rem,6vw,4.6rem) }
.fr-intro--v31 .pagina{ display:grid; gap:clamp(1.8rem,3.5vw,2.6rem) }
.fr-intro--v31 .fr-intro__t{ max-width:none }
.fr-intro--v31 .fr-intro__txt{ display:grid; gap:.2rem 4rem; align-items:end }
@media (min-width:62rem){ .fr-intro--v31 .fr-intro__txt{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .fr-intro--v31 .fr-intro__ante{ grid-column:1 / -1 } }
.fr-intro--v31 .fr-intro__e{ margin:0 }
.fr-tira{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem }
.fr-tira li{ position:relative }
.fr-tira a{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:.9rem; row-gap:.15rem; align-items:center; height:100%;
  padding:1rem 1.1rem 1.05rem; border-radius:18px; text-decoration:none; color:var(--papel);
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, rgba(17,37,63,.85)), rgba(10,26,47,.7)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, rgba(244,242,238,.08));
  transition:transform .25s var(--salida), box-shadow .25s }
.fr-tira a:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.3px var(--c), 0 18px 40px -26px color-mix(in srgb, var(--c) 60%, transparent) }
.fr-tira a:focus-visible{ outline:2px solid var(--papel); outline-offset:3px }
.fr-tira__ic{ grid-row:1 / span 3; display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:50%; color:var(--c);
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 26%, var(--noche-2)), var(--noche-hondo) 75%); box-shadow:inset 0 0 0 1.3px var(--c) }
.fr-tira__ic .fr-ic{ width:1.35rem; height:1.35rem }
.fr-tira__n{ font:600 .74rem/1 var(--sans); letter-spacing:.02em; color:color-mix(in srgb, var(--c) 70%, var(--papel)) }
.fr-tira b{ font:650 .98rem/1.2 var(--sans) }
.fr-tira small{ font:italic 400 .9rem/1.25 var(--lee); color:#B9C4CC }
@media (min-width:62rem){
  .fr-tira li:not(:last-child)::after{ content:""; position:absolute; z-index:1; top:50%; right:-.62rem; width:.45rem; height:.45rem; margin-top:-.22rem; border-top:1.5px solid rgba(244,242,238,.5); border-right:1.5px solid rgba(244,242,238,.5); transform:rotate(45deg) }
}
@media (max-width:61.99rem){ .fr-tira{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:30rem){ .fr-tira{ grid-template-columns:minmax(0,1fr); gap:.55rem } .fr-tira a{ padding:.8rem 1rem } }

/* ---- 4.1 · Diagnóstico: cabecera e investigación; la ficha de línea base */
.fr-diag--v31 .fr-diag__top{ align-items:end }
.fr-diag__inv{ margin:0; padding:1.1rem 1.3rem; border-radius:18px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06); font:400 1.02rem/1.6 var(--lee); color:var(--tinta-2) }
.fr-diag__inv b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.fr-diag__inv .fr-ir, .fr-diag__met .fr-ir{ margin-left:.9rem; white-space:nowrap }
.fr-diag__met{ margin:1.2rem 0 0; font:400 .98rem/1.6 var(--lee); color:var(--mudo); text-align:center }
.lb{ margin:clamp(2rem,4vw,3rem) 0 0; padding:clamp(1.4rem,3.2vw,2.6rem); border-radius:28px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 30px 70px -48px rgba(10,26,47,.5);
  background-image:repeating-linear-gradient(0deg, transparent 0 31px, rgba(14,23,38,.025) 31px 32px) }
.lb__cab{ display:grid; gap:.4rem 3rem; align-items:end; padding-bottom:1.3rem; border-bottom:1.5px dashed rgba(14,23,38,.16) }
@media (min-width:62rem){ .lb__cab{ grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr) } }
.lb__ej{ justify-self:start; margin:0; padding:.38rem .8rem; border-radius:6px; font:700 .72rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#8A5A12; background:#FBEFD6; box-shadow:inset 0 0 0 1px #E9CF97 }
.lb__t{ margin:0; font:650 clamp(1.2rem,1rem + .7vw,1.55rem)/1.15 var(--sans); letter-spacing:-.018em; color:var(--tinta) }
.lb__d{ margin:0; font:italic 400 .95rem/1.5 var(--lee); color:var(--mudo) }
.lb__g{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); padding-block:clamp(1.4rem,2.8vw,2rem) }
@media (min-width:62rem){ .lb__g{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) } .lb-idt{ padding-left:clamp(1.6rem,3vw,2.6rem); border-left:1px solid var(--filete) } }
.lb__k{ margin:0 0 1rem; font:500 .9rem/1.2 var(--sans); color:var(--mudo) }
.lb__k b{ font-weight:700; color:var(--tinta) }
.lb__res{ margin:1rem 0 0; font:400 .98rem/1.55 var(--lee); color:var(--tinta-2) }
.lb__res b{ display:inline-block; margin-right:.4rem; padding:.18rem .55rem; border-radius:6px; font:650 .86rem/1.3 var(--sans); color:#fff; background:var(--noche) }
.lb__res span{ display:block; margin-top:.15rem; font-size:.9rem; color:var(--mudo) }
/* ICT‑5: cinco barras de cinco tramos; la línea del nivel y la del promedio */
.lb-ict__caja{ --colN:7.4rem; --colV:1.6rem; position:relative }
.lb-ict__l{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.lb-ict__f{ display:grid; grid-template-columns:var(--colN) minmax(0,1fr) var(--colV); gap:.8rem; align-items:center }
.lb-ict__n{ font:600 .92rem/1.2 var(--sans); color:var(--tinta-2) }
.lb-ict__b{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; height:1.15rem }
.lb-ict__b i{ border-radius:3px; background:rgba(14,23,38,.08) }
.lb-ict__b i.on{ background:color-mix(in srgb, var(--ac-escuela) 70%, var(--noche)) }
.lb-ict__f.es-min .lb-ict__b i.on{ background:var(--ac-escuela) }
.lb-ict__f.es-min .lb-ict__n, .lb-ict__f.es-min .lb-ict__v{ color:#9C2F45 }
.lb-ict__v{ font:650 1rem/1 var(--sans); text-align:right; font-variant-numeric:tabular-nums }
.lb-ict__linea, .lb-ict__prom{ position:absolute; top:-.4rem; bottom:-.4rem; width:0; pointer-events:none;
  left:calc(var(--colN) + .8rem + (100% - var(--colN) - var(--colV) - 1.6rem) * var(--x) / 5) }
.lb-ict__linea{ --x:var(--nivel); border-left:2px solid #9C2F45 }
.lb-ict__prom{ --x:var(--prom); border-left:1.5px dashed rgba(14,23,38,.45) }
.lb-ict__linea::after, .lb-ict__prom::after{ position:absolute; top:-1.15rem; left:0; transform:translateX(-50%); white-space:nowrap; font:600 .72rem/1 var(--sans) }
.lb-ict__linea::after{ content:"nivel"; color:#9C2F45 }
.lb-ict__prom::after{ content:"promedio"; color:var(--mudo); font-weight:500 }
.lb-ict__caja{ margin-top:1.4rem }
/* IDT‑5: el barril */
.lb-idt__svg{ display:block; width:100%; max-width:26rem; height:auto; margin-inline:auto; overflow:visible }
.lb-idt__t{ fill:#C9A97A; stroke:#8E6A3C; stroke-width:1.2 }
.lb-idt__t.es-min{ fill:#E6B7A5; stroke:#A2452C }
.lb-idt__veta{ stroke:rgba(110,70,30,.25); stroke-width:1; fill:none }
.lb-idt__aro{ stroke:#5E4A33; stroke-width:3; stroke-linecap:round; opacity:.55 }
.lb-idt__agua{ fill:#5B9BBF; opacity:.42 }
.lb-idt__nivel{ stroke:#2C6E91; stroke-width:1.6; stroke-dasharray:5 4 }
.lb-idt__gota{ fill:#5B9BBF; stroke:#2C6E91; stroke-width:.8 }
.lb-idt__v{ font:650 13px/1 var(--sans); fill:var(--tinta); text-anchor:middle }
.lb-idt__v.es-min{ fill:#A2452C }
.lb-idt__i{ font:500 11px/1 var(--sans); fill:var(--mudo); text-anchor:middle }
.lb-idt__ley{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem 1.4rem; font:500 .88rem/1.35 var(--sans); color:var(--tinta-2) }
.lb-idt__ley li{ display:grid; grid-template-columns:1.3rem minmax(0,1fr) auto; gap:.4rem; align-items:baseline; padding:.2rem 0; border-bottom:1px dotted rgba(14,23,38,.14) }
.lb-idt__ley span{ font:500 .76rem/1 var(--sans); color:var(--mudo) }
.lb-idt__ley b{ font-weight:650; font-variant-numeric:tabular-nums }
.lb-idt__ley li.es-min{ color:#A2452C }
@media (prefers-reduced-motion:no-preference){
  .lb.es-visto .lb-idt__agua{ animation:lb-sube 1.2s var(--salida) .2s both; transform-box:fill-box; transform-origin:50% 100% }
  .lb.es-visto .lb-ict__b i.on{ animation:lb-llena .5s var(--salida) both }
  .lb.es-visto .lb-ict__f:nth-child(2) .lb-ict__b i{ animation-delay:.06s } .lb.es-visto .lb-ict__f:nth-child(3) .lb-ict__b i{ animation-delay:.12s }
  .lb.es-visto .lb-ict__f:nth-child(4) .lb-ict__b i{ animation-delay:.18s } .lb.es-visto .lb-ict__f:nth-child(5) .lb-ict__b i{ animation-delay:.24s }
}
@keyframes lb-sube{ from{ transform:scaleY(0) } }
@keyframes lb-llena{ from{ opacity:.15 } }
/* Qué limita más y dónde invertir primero */
.lb-pr{ padding-top:1.3rem; border-top:1.5px dashed rgba(14,23,38,.16) }
.lb-pr__k{ margin:0 0 1rem; font:650 1.02rem/1.3 var(--sans); color:var(--tinta) }
.lb-pr__l{ list-style:none; margin:0; padding:0; display:grid; gap:1rem 1.8rem }
@media (min-width:62rem){ .lb-pr__l{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.lb-pr__l li{ display:grid; grid-template-columns:2rem minmax(0,1fr); column-gap:.8rem; align-content:start }
.lb-pr__n{ grid-row:1 / span 3; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font:400 1rem/1 var(--lee); color:#fff; background:var(--noche) }
.lb-pr__l b{ font:650 1rem/1.25 var(--sans); color:var(--tinta) }
.lb-pr__l small{ font:500 .8rem/1.3 var(--sans); color:var(--mudo) }
.lb-pr__l p{ margin:.35rem 0 0; font:400 .96rem/1.55 var(--lee); color:var(--tinta-2) }
.lb-pr__l a{ font:600 .88rem/1 var(--sans); color:var(--petroleo); white-space:nowrap }
@media (max-width:47.99rem){
  .lb{ border-radius:22px; padding:1.2rem 1.1rem }
  .lb-ict__caja{ --colN:6.4rem; --colV:1.2rem }
  .lb-ict__f{ gap:.55rem }
  .lb-ict__linea, .lb-ict__prom{ left:calc(var(--colN) + .55rem + (100% - var(--colN) - var(--colV) - 1.1rem) * var(--x) / 5) }
  .lb-idt__ley{ grid-template-columns:minmax(0,1fr) }
  .fr-diag__inv .fr-ir, .fr-diag__met .fr-ir{ display:inline-block; margin:.3rem 1rem 0 0 }
}

/* ---- 4.3 · las iniciativas en una línea */
.fr-edu__lin{ margin:clamp(1.8rem,3.5vw,2.6rem) 0 0; padding-top:1.2rem; border-top:1px solid var(--filete); font:400 1.02rem/1.6 var(--lee); color:var(--tinta-2) }
.fr-edu__lin b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.fr-edu__lin .fr-ir{ margin-left:.4rem; white-space:nowrap }

/* ---- Cap. 7 · lo que recibe cada perfil, frente por frente; lo que puede exigirnos */
.qenc__k{ margin:0; font:italic 400 1rem/1.3 var(--lee); color:var(--mudo) }
.qenc__ent7{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
.qenc__ent7 li{ --cd:color-mix(in oklab, var(--c) 55%, var(--tinta)); display:grid; grid-template-columns:minmax(9.5rem,12rem) minmax(0,1fr); gap:.3rem 1.2rem; padding:.75rem 0; border-top:1px solid var(--filete) }
.qenc__fr7{ display:flex; align-items:baseline; gap:.5rem; font:600 .86rem/1.3 var(--sans); color:var(--cd) }
.qenc__fr7 i{ flex:none; display:inline-grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:50%; font:400 .85rem/1 var(--lee); font-style:normal; color:var(--tinta); background:color-mix(in srgb, var(--c) 24%, #fff); box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--c) 70%, var(--tinta)) }
.qenc__ent7 p{ margin:0; font:400 1rem/1.55 var(--lee); color:var(--tinta-2) }
@media (max-width:40rem){ .qenc__ent7 li{ grid-template-columns:minmax(0,1fr) } }
.qenc__paga{ margin:0; padding:.9rem 1.1rem; border-radius:14px; background:color-mix(in srgb, var(--petroleo) 7%, #fff); font:400 .98rem/1.55 var(--lee); color:var(--tinta-2) }
.qenc__paga b{ display:block; margin-bottom:.2rem; font:650 .78rem/1.2 var(--sans); color:var(--petroleo) }
.qex{ display:grid; gap:1.4rem clamp(2rem,5vw,4.5rem); margin:clamp(2.6rem,5vw,4rem) auto 0; max-width:74rem; padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--filete) }
@media (min-width:62rem){ .qex{ grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) } }
.qex__t{ margin:0; font:650 clamp(1.5rem,1.2rem + 1vw,2.1rem)/1.1 var(--sans); letter-spacing:-.022em; color:var(--tinta) }
.qex__d{ margin:.7rem 0 0; font:400 1.04rem/1.6 var(--lee); color:var(--tinta-2); max-width:36ch }
.qex__ir{ margin:.9rem 0 0 }
.qex__l{ list-style:none; margin:0; padding:0; display:grid; gap:0 2rem }
@media (min-width:48rem){ .qex__l{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.qex__l li{ display:grid; grid-template-columns:1.8rem minmax(0,1fr); column-gap:.8rem; padding:.85rem 0; border-top:1px solid var(--filete) }
.qex__n{ grid-row:1 / span 2; font:400 1.35rem/1 var(--lee); color:var(--petroleo) }
.qex__l b{ font:650 1rem/1.35 var(--sans); color:var(--tinta) }
.qex__l li > span:not(.qex__n){ margin-top:.2rem; font:400 .95rem/1.5 var(--lee); color:var(--mudo) }
/* v31 · la banda clara que precede a un puente no duplica su aire de abajo */
.dt-reg:has(+ .dt-puente--v31), .fr-pro:has(+ .dt-puente--v31){ padding-bottom:clamp(1.5rem,3vw,2.5rem) }
.fr:has(+ .dt-puente--v31) .fr-pro{ padding-bottom:clamp(2.5rem,5vw,4rem) }
/* v31 · «Lo que puede exigirnos»: una línea con enlace a la lista única de Nosotros (pedido del integrador) */
.qex--linea{ display:block; max-width:74rem; margin:clamp(2rem,4vw,3rem) auto 0; padding:1.2rem 1.4rem; border-radius:18px; background:#fff; box-shadow:0 0 0 1px rgba(14,23,38,.06);
  font:400 1.06rem/1.6 var(--lee); color:var(--tinta-2) }
.qex--linea b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.qex--linea .fr-ir{ margin-left:.4rem; white-space:nowrap }
/* v31 · ajustes de la revisión a 1440, 1024, 390 y 360 */
.dt-sub[data-en="4"] a[data-cap]:not([data-cap="4"]) .dt-sub__t{ display:none }
@media (max-width:47.99rem){
  .pe-pt__pista{ margin-top:.9rem }
  .fr-cab{ grid-template-columns:minmax(0,1fr) }
  .fr-cab__n{ font-size:3.2rem; line-height:1; margin:0 0 .35rem }
}
.dt-sub .dt-sub__s[aria-current="true"] .dt-sub__n{ color:var(--petroleo) !important }
/* texto solo para lectores de pantalla: recortado con clip-path (pedido del integrador; el detector lo reconoce) */
.pe-sr{ clip:auto; clip-path:inset(50%) }
.lb-ict__prom::after{ top:auto; bottom:-1.2rem }
.lb-ict__caja{ margin-bottom:1.3rem }
/* v31b · IDT‑5 de la ficha en siete barras (sin segundo barril) y selector «Comparar» coordinado con el gráfico de puntos */
.lb-ict__caja--idt .lb-ict__b i.on{ background:color-mix(in srgb, #C9A97A 75%, var(--noche)) }
.lb-ict__caja--idt .lb-ict__f.es-min .lb-ict__b i.on{ background:#D9826A }
.lb-ict__caja--idt .lb-ict__f.es-min .lb-ict__n, .lb-ict__caja--idt .lb-ict__f.es-min .lb-ict__v{ color:#A2452C }
.lb-ict__caja--idt .lb-ict__linea{ border-left-color:#A2452C }
.lb-ict__caja--idt .lb-ict__linea::after{ color:#A2452C }
.lb-ict__caja--idt{ margin-bottom:0 }
.pe-mando{ margin-top:clamp(1.8rem,3.6vw,2.8rem) }
.pe-pt__f{ transition:background .3s }
.pe[data-m="pobreza"] .pe-pt__f[data-k="pobreza"], .pe[data-m="anemia"] .pe-pt__f[data-k="anemia"], .pe[data-m="dcronica"] .pe-pt__f[data-k="dcronica"],
.pe[data-m="agua"] .pe-pt__f[data-k="agua"], .pe[data-m="desague"] .pe-pt__f[data-k="desague"]{ background:linear-gradient(90deg, rgba(14,23,38,.045), rgba(14,23,38,.015)); box-shadow:inset 3px 0 0 var(--noche) }