/* v32 · Frentes de /que-hacemos/ (territorio_frentes.py). Se carga antes de v28-que-hacemos.css:
   por eso los ajustes sobre clases antiguas llevan el modificador --v32 de su sección.
   1. Diagnóstico: ficha de campo (papel cuadriculado, escalas marcadas a mano, foto impresa) y prioridades centradas.
   2. Dinámica social: mapa de actores y vínculos; ciclo del acuerdo sin anillo.
   3. Proyectos educativos: docentes, directivos y familias, sobre una base común.
   4. Proyectos productivos: tres estaciones del camino. */

/* ------------------------------------------------------------------ 1 · Ficha de línea base (sobria, editorial) */
.fc{ --tinta-campo:var(--tinta); --rojo-campo:#A8402F; margin:clamp(2.2rem,4.5vw,3.4rem) 0 0 }
.fc__hoja{ padding:clamp(1.4rem,3.4vw,2.8rem); border-radius:20px; background:#FFFEFB;
  box-shadow:0 0 0 1px rgba(14,23,38,.08), 0 26px 60px -46px rgba(10,26,47,.5) }
.fc__arriba{ display:grid; gap:clamp(1.4rem,3vw,2.6rem); padding-bottom:clamp(1.4rem,2.6vw,2rem); border-bottom:1px solid var(--filete-firme) }
@media (min-width:62rem){ .fc__arriba{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start } }
.fc__cab{ display:grid; gap:.35rem }
.fc__serie{ margin:0; font:600 .9rem/1.2 var(--sans); color:var(--fr-cd) }
.fc__t{ margin:0 0 .7rem; max-width:24ch; font:650 clamp(1.3rem,1.05rem + .8vw,1.7rem)/1.15 var(--sans); letter-spacing:-.018em; color:var(--tinta); text-wrap:balance }
.fc__datos{ display:grid; margin:0 }
.fc__datos div{ display:grid; grid-template-columns:8.2rem minmax(0,1fr); gap:.8rem; align-items:baseline; padding:.55rem 0; border-top:1px solid var(--filete) }
.fc__datos dt{ font:500 .86rem/1.3 var(--sans); color:var(--mudo) }
.fc__datos dd{ margin:0; font:400 1rem/1.45 var(--lee); color:var(--tinta) }
.fc__foto{ margin:0 }
.fc__foto img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:40% 50%; border-radius:12px }
.fc__foto figcaption{ display:flex; flex-wrap:wrap; gap:.15rem .5rem; margin-top:.6rem; font:400 .88rem/1.4 var(--sans); color:var(--mudo) }
.fc__foto figcaption b{ font-weight:650; color:var(--tinta) }

.fc__g{ display:grid; gap:clamp(1.8rem,3.4vw,2.8rem); padding-block:clamp(1.5rem,3vw,2.2rem) }
@media (min-width:62rem){ .fc__g{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .fc__g > .fc-bloque + .fc-bloque{ padding-left:clamp(1.6rem,3vw,2.6rem); border-left:1px solid var(--filete) } }
.fc-bloque__k{ margin:0 0 .8rem; font:500 .9rem/1.3 var(--sans); color:var(--mudo) }
.fc-bloque__k b{ font-weight:700; color:var(--tinta) }
.fc-esc{ list-style:none; margin:0; padding:0; display:grid }
.fc-r{ display:grid; grid-template-columns:minmax(6.5rem,8.5rem) minmax(0,1fr); gap:.6rem; align-items:center; min-height:2.5rem; border-bottom:1px solid var(--filete) }
.fc-r__n{ font:600 .95rem/1.2 var(--sans); color:var(--tinta-2) }
.fc-r__esc{ display:grid; grid-template-columns:repeat(5, 2.1rem); justify-content:start }
.fc-r__esc i{ display:grid; place-items:center; width:1.7rem; height:1.7rem; margin:auto; border-radius:50%; font:500 .84rem/1 var(--sans); font-style:normal; color:rgba(14,23,38,.36) }
.fc-r__esc i.si{ font-weight:700; color:#fff; background:var(--noche) }
.fc-r.es-min .fc-r__n{ color:var(--rojo-campo) }
.fc-r.es-min .fc-r__esc i.si{ background:var(--rojo-campo) }
.fc-nota{ margin:1rem 0 0; font:400 .98rem/1.5 var(--lee); color:var(--tinta-2); text-wrap:pretty }
.fc-nota b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }

.fc-pr{ padding-top:clamp(1.4rem,2.8vw,2rem); border-top:1px solid var(--filete-firme); text-align:center }
.fc-pr__k{ margin:0 auto 1.3rem; font:650 1.08rem/1.3 var(--sans); color:var(--tinta) }
.fc-pr__l{ list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.6rem); max-width:64rem; justify-items:center }
.fc-pr__l li{ display:flex; flex-direction:column; align-items:center; max-width:19rem; text-align:center }
.fc-pr__n{ display:grid; place-items:center; width:2.5rem; height:2.5rem; margin-bottom:.6rem; border-radius:50%; font:600 1.2rem/1 var(--lee); color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--tinta) }
.fc-pr__l b{ font:650 1.1rem/1.25 var(--sans); color:var(--tinta) }
.fc-pr__l small{ margin-top:.15rem; font:500 .84rem/1.3 var(--sans); color:var(--rojo-campo) }
.fc-pr__l p{ margin:.55rem 0 0; font:400 .98rem/1.5 var(--lee); color:var(--tinta-2); text-wrap:pretty }
.fc-pr__l .fr-ir{ padding-block:.4rem 0 }
@media (max-width:40rem){
  .fc__datos div{ grid-template-columns:minmax(0,1fr); gap:.1rem }
  .fc-r{ grid-template-columns:minmax(0,1fr) auto }
  .fc-r__esc{ grid-template-columns:repeat(5, 1.95rem) }
  .fc-pr__l{ grid-template-columns:minmax(0,1fr); gap:1.8rem }
}

/* ------------------------------------------------------------------ 2 · Mapa de actores */
.vn{ margin-top:clamp(2.6rem,5vw,4rem); padding:clamp(1.3rem,3vw,2.4rem); border-radius:28px;
  background:radial-gradient(120% 90% at 30% 20%, rgba(143,176,180,.10), transparent 60%), rgba(244,242,238,.035);
  box-shadow:inset 0 0 0 1px var(--filete-oscuro) }
.vn__cab{ display:grid; gap:.4rem 3rem; margin-bottom:clamp(1rem,2vw,1.6rem) }
@media (min-width:62rem){ .vn__cab{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:end } }
.fr-din .vn__t{ margin:0; font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem); line-height:1.2; color:var(--papel); text-wrap:balance }
.vn__d{ margin:0; font:400 1rem/1.55 var(--lee); color:#DCE3E6 }
.vn__g{ display:grid; gap:clamp(1.4rem,3vw,2.6rem); align-items:start }
@media (min-width:62rem){ .vn__g{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) } }
.vn__mapa{ margin:0 }
.vn__mapa figcaption{ margin-top:.6rem; font:italic 400 .9rem/1.45 var(--lee); color:#B9C5CB }

.vn-svg{ display:block; width:100%; height:auto; overflow:visible; font-family:var(--sans) }
.vn-rio{ fill:none; stroke:rgba(143,176,180,.14); stroke-width:18; stroke-linecap:round }
.vn-rio--2{ stroke:rgba(143,176,180,.38); stroke-width:1.3; stroke-dasharray:1 6 }
.vn-cn{ fill:none; stroke:rgba(216,203,179,.13); stroke-width:1 }
.vn-ra{ fill:none; stroke:rgba(235,163,175,.32); stroke-width:1.3; stroke-dasharray:2 5; transition:stroke .3s ease, stroke-width .3s ease, opacity .3s ease }
.vn-l{ fill:none; stroke:rgba(244,242,238,.34); stroke-width:2; stroke-linecap:round; transition:stroke .3s ease, stroke-width .3s ease, opacity .3s ease }
.vn-lt{ font:italic 400 12.5px var(--lee); fill:#DCE3E6; text-anchor:middle; paint-order:stroke; stroke:#0E2036; stroke-width:5px; stroke-linejoin:round; transition:opacity .3s ease }
.vn-gl{ stroke:var(--k); stroke-opacity:.35; stroke-width:1 }
.vn-gp{ fill:var(--k); fill-opacity:.85 }
.vn-gt{ font-size:12px; fill:#B9C5CB }
.vn-halo{ fill:var(--k); opacity:.08; transition:opacity .3s ease, r .3s ease }
.vn-c{ fill:#13263B; stroke:var(--k); stroke-width:2; transition:stroke-width .3s ease }
.vn-ic{ fill:none; stroke:var(--k); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.vn-t{ font-size:15px; font-weight:650; fill:var(--papel); text-anchor:middle }
.vn-t--m{ font-size:15px }
.vn-t2{ font:italic 400 11.5px var(--lee); fill:#DCE3E6; text-anchor:middle }
.vn-mesa .vn-c{ fill:#1B3048; stroke-width:2.4 }
.vn-silla{ fill:#0E2036; stroke:var(--k); stroke-width:1.6 }
.vn--js .vn-n{ cursor:pointer }

/* actor elegido: sus vínculos se encienden con su color; los demás se apagan */
.vn[data-activo="mesa"] .vn-ra{ stroke:var(--ac-escuela); stroke-width:2; stroke-dasharray:4 5 }
.vn[data-activo="mesa"] .vn-mesa .vn-halo{ opacity:.2 }
.vn[data-activo="comunidad"]{ --on:var(--ac-brujula) }
.vn[data-activo="escuela"]{ --on:var(--ac-coar) }
.vn[data-activo="estado"]{ --on:var(--suave) }
.vn[data-activo="empresa"]{ --on:var(--ac-lab) }
.vn:not([data-activo="mesa"]) .vn-l, .vn:not([data-activo="mesa"]) .vn-ra{ opacity:.16 }
.vn:not([data-activo="mesa"]) .vn-lt{ opacity:0 }
.vn[data-activo="comunidad"] [data-a~="comunidad"], .vn[data-activo="escuela"] [data-a~="escuela"],
.vn[data-activo="estado"] [data-a~="estado"], .vn[data-activo="empresa"] [data-a~="empresa"]{ opacity:1 }
.vn:not([data-activo="mesa"]) .vn-l[data-a]{ stroke:var(--on) }
.vn:not([data-activo="mesa"]) .vn-l{ stroke-width:3 }
.vn:not([data-activo="mesa"]) .vn-ra{ stroke:var(--on) }
.vn[data-activo="comunidad"] .vn-n[data-actor="comunidad"] .vn-halo, .vn[data-activo="escuela"] .vn-n[data-actor="escuela"] .vn-halo,
.vn[data-activo="estado"] .vn-n[data-actor="estado"] .vn-halo, .vn[data-activo="empresa"] .vn-n[data-actor="empresa"] .vn-halo{ opacity:.22 }
.vn[data-activo="comunidad"] .vn-n[data-actor="comunidad"] .vn-c, .vn[data-activo="escuela"] .vn-n[data-actor="escuela"] .vn-c,
.vn[data-activo="estado"] .vn-n[data-actor="estado"] .vn-c, .vn[data-activo="empresa"] .vn-n[data-actor="empresa"] .vn-c{ stroke-width:3.2 }
@media (prefers-reduced-motion:no-preference){
  .vn:not([data-activo="mesa"]) .vn-l{ stroke-dasharray:7 7; animation:vn-fluye 1.4s linear infinite }
  @keyframes vn-fluye{ to{ stroke-dashoffset:-28 } }
}

.vn-bs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:1rem }
.vn-bs .vn-b{ flex:0 0 calc((100% - 1rem) / 3) }
.vn-bs[hidden]{ display:none }
.vn-b{ display:flex; align-items:center; gap:.6rem; min-height:2.9rem; padding:.45rem .8rem .45rem .5rem; border:0; border-radius:12px; cursor:pointer;
  font:600 .95rem/1.2 var(--sans); color:var(--papel); text-align:left; background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px var(--filete-oscuro);
  transition:background-color .25s ease, box-shadow .25s ease }
.vn-b:hover{ background:rgba(244,242,238,.09) }
.vn-b:focus-visible{ outline:2px solid var(--piedra); outline-offset:2px }
.vn-b[aria-pressed="true"]{ background:color-mix(in srgb, var(--k) 18%, #0E2036); box-shadow:inset 0 0 0 1.5px var(--k) }
.vn-b__ic{ display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:50%; color:var(--k); background:rgba(10,26,47,.55) }
.vn-b__ic svg{ width:1.15rem; height:1.15rem }
.vn-fs{ display:grid; gap:1rem }
.vn--js .vn-f:not([data-on]){ display:none }
.vn-f{ padding:1.2rem 1.3rem 1.3rem; border-radius:16px; background:rgba(10,26,47,.5); box-shadow:inset 0 0 0 1px var(--filete-oscuro) }
.vn-f__t{ margin:0 0 .7rem; font:650 1.15rem/1.25 var(--sans); color:var(--k) }
.vn-f dl{ display:grid; gap:.75rem; margin:0 }
.vn-f dt{ font:600 .82rem/1.3 var(--sans); color:#B9C5CB }
.vn-f dd{ margin:.15rem 0 0; font:400 .98rem/1.5 var(--lee); color:#E7ECEE }

@media (max-width:40rem){
  .vn{ padding:1.1rem .9rem 1.2rem; border-radius:20px }
  .vn-t, .vn-t--m{ font-size:25px }
  .vn-gt, .vn-lt, .vn-t2{ display:none }
  .vn-c{ stroke-width:3 }
  .vn-bs .vn-b{ flex-basis:calc((100% - .5rem) / 2) }
  .vn-b{ font-size:.9rem }
}

/* ciclo del acuerdo, sin anillo: cuatro pasos unidos por un hilo */
.fr-ciclo--v32 .fr-ciclo__l{ position:relative; margin-top:1.2rem }
.fr-ciclo--v32 .fr-ciclo__l li{ position:relative }
.fr-ciclo--v32 .fr-ciclo__l li:not(:last-child)::before{ content:""; position:absolute; left:calc(.6rem + .85rem - 1px); top:2.5rem; bottom:-.7rem; width:2px; border-radius:1px; background:color-mix(in srgb, var(--c) 45%, transparent) }
.fr-ciclo--v32 .fr-ciclo__n{ background:#13263B; box-shadow:inset 0 0 0 1.8px var(--c); color:var(--c) }
.fr-din--v32 .fr-din__g{ margin-top:clamp(2.4rem,4.5vw,3.6rem) }

/* ------------------------------------------------------------------ 3 · Proyectos educativos */
.ed3{ margin-top:clamp(2rem,4vw,3rem) }
.ed3__k{ margin:0 0 1.1rem; font:650 1.08rem/1.3 var(--sans); color:var(--tinta) }
.ed3__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.6rem) }
.ed3__i{ display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 26px 60px -44px rgba(10,26,47,.55) }
.ed3__foto{ margin:0 }
.ed3__foto img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:var(--pos, 50% 50%) }
.ed3__txt{ padding:1.15rem 1.3rem 1.4rem }
.ed3__t{ display:flex; flex-direction:column; gap:.1rem; margin:0; font:650 1.25rem/1.2 var(--sans); letter-spacing:-.01em; color:var(--tinta) }
.ed3__t span{ font:italic 400 1rem/1.3 var(--lee); letter-spacing:0; color:var(--fr-cd) }
.ed3__txt p{ margin:.7rem 0 0; font:400 .98rem/1.55 var(--lee); color:var(--tinta-2); text-wrap:pretty }
.ed3__base{ margin-top:.5rem; text-align:center }
.ed3__llave{ display:block; width:calc(100% - 2rem); height:2.2rem; margin:0 auto; overflow:visible }
.ed3__llave path{ fill:none; stroke:var(--fr-cd); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.ed3__base p{ max-width:46rem; margin:.7rem auto 0; padding:1rem 1.4rem; border-radius:16px; font:400 1.05rem/1.55 var(--lee); color:var(--tinta-2);
  background:color-mix(in srgb, var(--c) 22%, #FBFAF7); text-wrap:balance }
.ed3__base b{ display:block; margin-bottom:.15rem; font:650 1.08rem/1.3 var(--sans); color:var(--tinta) }
.fr-edu--v32 .fr-edu__donde--v32{ margin-top:clamp(1.6rem,3vw,2.2rem); text-align:center }
.fr-edu--v32 .fr-edu__donde--v32 b{ display:inline; margin-right:.45rem }
@media (max-width:61.99rem){ .ed3__l{ grid-template-columns:repeat(2,minmax(0,1fr)) } .ed3__i:last-child{ grid-column:1 / -1; flex-direction:row } .ed3__i:last-child .ed3__foto{ flex:1 1 50% } .ed3__i:last-child .ed3__txt{ flex:1 1 50% } .ed3__i:last-child .ed3__foto img{ height:100% } }
@media (max-width:40rem){
  .ed3__l{ grid-template-columns:minmax(0,1fr) }
  .ed3__i:last-child{ flex-direction:column }
  .ed3__i:last-child .ed3__foto img{ height:auto }
  .ed3__llave{ display:none }
  .ed3__base p{ margin-top:1rem; text-align:left }
  .fr-edu--v32 .fr-edu__donde--v32{ text-align:left }
}

/* ------------------------------------------------------------------ 4 · Proyectos productivos */
.pc{ margin-top:clamp(2.6rem,5vw,4rem) }
.pc__k{ margin:0 0 1.4rem; text-align:center; font:italic 400 clamp(1.15rem,1rem + .5vw,1.4rem)/1.3 var(--lee); color:var(--fr-cd) }
.pc__pista{ position:relative }
.pc__hilo{ position:absolute; left:0; right:0; top:2.6rem; width:100%; height:2px; overflow:visible; pointer-events:none }
.pc__hilo path{ fill:none; stroke:var(--fr-cd); stroke-width:2; stroke-dasharray:2 7; stroke-linecap:round; vector-effect:non-scaling-stroke }
.pc__l{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.4rem,3.4vw,3rem) }
.pc__i{ display:flex; flex-direction:column; padding:1.3rem 1.4rem 1.4rem; border-radius:22px;
  background:color-mix(in srgb, var(--c) var(--t), #FFFEFB); box-shadow:0 0 0 1px rgba(14,23,38,.06), 0 24px 56px -42px rgba(10,26,47,.55) }
.pc__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.6rem }
.pc__n{ font:300 clamp(3.6rem,3rem + 2vw,4.8rem)/1 var(--lee); letter-spacing:-.03em; color:var(--fr-cd) }
.pc__dib{ flex:none; width:3.1rem; height:3.1rem; padding:.45rem; border-radius:50%; color:var(--fr-cd); background:rgba(255,255,255,.7) }
.pc__i h3{ margin:0; font:650 1.15rem/1.25 var(--sans); letter-spacing:-.008em; color:var(--tinta); text-wrap:balance }
.pc__i > p{ margin:.5rem 0 0; font:400 .98rem/1.55 var(--lee); color:var(--tinta-2) }
.pc__i > p.pc__deja{ margin-top:auto; padding-top:1rem; font:600 .9rem/1.4 var(--sans); color:var(--fr-cd) }
.pc__i > p.pc__deja::before{ content:""; display:block; width:2.2rem; height:2px; margin:0 0 .7rem; border-radius:1px; background:currentColor; opacity:.55 }
.pc__i h3 + p{ margin-bottom:.4rem }
.pc__fin{ margin:1.6rem auto 0; max-width:34rem; text-align:center; font:650 1.05rem/1.4 var(--sans); color:var(--tinta) }
.pc__fin::before{ content:""; display:block; width:2px; height:1.6rem; margin:0 auto .6rem; background:repeating-linear-gradient(var(--fr-cd) 0 2px, transparent 2px 7px) }
@media (max-width:61.99rem){
  .pc__l{ grid-template-columns:minmax(0,1fr); gap:1.1rem; max-width:34rem; margin-inline:auto }
  .pc__hilo{ display:none }
  .pc__i{ position:relative }
  .pc__i:not(:last-child)::after{ content:""; position:absolute; left:50%; bottom:-1.1rem; width:2px; height:1.1rem; background:repeating-linear-gradient(var(--fr-cd) 0 2px, transparent 2px 6px) }
}
.fr-pro--v32 .fr-pro__fotos figure:first-child img{ object-position:40% 50% }
.fr-pro--v32 .fr-pro__fotos figure:last-child img{ object-position:45% 50% }

@media (prefers-reduced-motion:reduce){
  .vn-l, .vn-ra, .vn-lt, .vn-halo, .vn-c, .vn-b{ transition:none }
}

/* las diagonales (comunidad y empresa, escuela y Estado) pasan por la mesa: en la vista general no se dibujan */
.vn[data-activo="mesa"] .vn--d{ opacity:0 }