/* v29 (agente ESP): copia de v26-sector-publico.css con dos selectores rotos reparados y, al final, la capa v29:
   #cifras como capítulo con foto a sangre, carriles e insignias en el recorrido y #niveles en noche con los anillos fijos.
   v26 → v27 · Comunidad Sector público (agente SECTOR PÚBLICO). La pieza propia son tres bandas:
   1. #cifras (noche): las tres cifras verificadas, cada una con su barra de proporción que se dibuja una vez.
   2. #presupuesto (papel): «Del presupuesto al aula», el gran momento. Un dibujo del recorrido del dinero
      (dos variantes: ancha y celular) cambia de forma según la fuente; el sol avanza por la ruta hasta la fase
      elegida y, en la cuarta, llega al aula. Bajo cada fase, la marca de dónde entra Conecta.
   3. #niveles (blanca): los niveles de gobierno y con quién trabaja Conecta en cada uno.
   Sin JS: cifras y niveles completos; el ciclo se lee con sus cuatro fases seguidas y las tres fuentes.
   v28: sin rayas laterales, sin píldoras tintadas ni cajas claras; anillos de niveles; fuentes en <details>. */

.sp-cif, .sp-pre{ --sp:var(--cm, #9CC0E0); --sp-hondo:color-mix(in oklab, var(--sp) 42%, var(--tinta)) }

/* Cabeceras */
.sp-cab{ max-width:46rem; margin:0 0 clamp(2rem,4vw,3rem) }
.sp-pre .sp-cab .antetitulo{ color:var(--petroleo) }
.sp-cab .h2{ margin:0 0 var(--e-sm); text-wrap:balance; max-width:22ch }
.sp-cab .entrada{ margin:0; max-width:62ch; text-wrap:pretty }

.sp-fuente{ display:inline-flex; align-items:baseline; gap:.35em; font-size:.82rem; line-height:1.4; color:var(--mudo);
  text-decoration:underline; text-decoration-color:var(--filete-firme, var(--filete)); text-underline-offset:.2em;
  transition:color .2s var(--curva), text-decoration-color .2s var(--curva) }
.sp-fuente:hover{ color:var(--tinta); text-decoration-color:currentColor }
.sp-fuente svg{ flex:none; transform:translateY(1px) }
.sp-fuente:focus-visible{ outline:2px solid var(--foco, var(--petroleo)); outline-offset:3px; border-radius:2px }

.sp-marca{ flex:none; width:1.15em; height:.8em; fill:none; stroke:currentColor; stroke-width:1.6 }

/* ============================================================ 1 · Tres cifras (noche) */
.sp-cif .sp-cab .h2{ max-width:24ch; color:var(--papel) }
.sp-cifras{ list-style:none; margin:0; padding:0; display:grid; gap:2.6rem }
@media (min-width:60rem){ .sp-cifras{ grid-template-columns:1.2fr 1fr 1fr; gap:0 } }
.sp-cifra{ display:flex; flex-direction:column; gap:.9rem; min-width:0; padding-top:1.4rem; border-top:1px solid var(--filete-oscuro) }
@media (min-width:60rem){
  .sp-cifras{ column-gap:clamp(2rem,4vw,4rem) }
  .sp-cifra{ padding-top:1.4rem }
}
.sp-cifra__n{ margin:0; font-family:var(--lee); font-weight:500; font-size:clamp(2.6rem,1.7rem + 2.8vw,4.4rem); line-height:.98;
  letter-spacing:-.025em; color:var(--papel); font-variant-numeric:lining-nums tabular-nums; text-wrap:balance }
.sp-cifra__u{ display:block; margin-top:.3rem; font-family:var(--sans); font-size:clamp(1rem,.9rem + .4vw,1.25rem); font-weight:600;
  letter-spacing:0; color:var(--sp) }
.sp-cifra__t{ margin:0; font-family:var(--lee); font-size:1.02rem; line-height:1.6; color:var(--suave-claro); max-width:40ch; text-wrap:pretty }
.sp-cif .sp-fuente{ margin-top:auto; padding-top:.4rem; color:rgba(244,242,238,.62); text-decoration-color:rgba(244,242,238,.3) }
.sp-cif .sp-fuente:hover{ color:var(--papel) }

/* Barras de proporción: se dibujan una sola vez al entrar en pantalla */
.sp-bar{ display:grid; gap:.45rem }
.sp-bar__k{ margin:0; font-family:var(--sans); font-size:.8rem; font-weight:600; color:rgba(244,242,238,.6) }
.sp-bar__p{ display:flex; height:.5rem; border-radius:.25rem; overflow:hidden; background:rgba(244,242,238,.12) }
.sp-bar__p i{ display:block; width:var(--p); height:100%; transform-origin:left center; transition:transform 1.1s var(--curva) calc(var(--retardo,0s) + .35s) }
.sp-bar__p i + i{ transition-delay:calc(var(--retardo,0s) + .75s) }
.sp-bar__a, .sp-ley--a{ background:var(--sp) }
.sp-bar__b, .sp-ley--b{ background:color-mix(in srgb, var(--sp) 48%, var(--noche)) }
.sp-bar__p i + i{ box-shadow:inset 2px 0 0 var(--noche) }
.rv .sp-cifra:not(.visto) .sp-bar__p i{ transform:scaleX(0) }
.sp-bar__l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; font-family:var(--sans); font-size:.84rem; line-height:1.4; color:var(--suave-claro) }
.sp-bar__l li{ display:inline-flex; align-items:center; gap:.45rem }
.sp-ley{ flex:none; width:.85rem; height:.32rem; border-radius:.16rem }

/* ============================================================ 2 · Del presupuesto al aula (papel) */
.sp-ciclo{ display:grid; gap:clamp(1.6rem,3vw,2.4rem) }

/* Selector de fuente: radios nativos (flechas del teclado incluidas), con el ícono del origen */
.sp-srcs{ margin:0; padding:0; border:0; min-width:0 }
.sp-srcs__k{ padding:0; margin:0 0 .75rem; font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--tinta) }
.sp-srcs__op{ display:grid; gap:.6rem }
@media (min-width:44rem){ .sp-srcs__op{ grid-template-columns:repeat(3,1fr) } }
.sp-src{ position:relative; display:grid; grid-template-columns:1fr auto; column-gap:.75rem; row-gap:.2rem; padding:.85rem 1rem .9rem 2.6rem;
  border-radius:.6rem; cursor:pointer; background:rgba(255,255,255,.55); border:1px solid var(--filete);
  transition:background-color .2s var(--curva), border-color .2s var(--curva), box-shadow .2s var(--curva), transform .2s var(--curva) }
.sp-src input{ position:absolute; left:1rem; top:1.05rem; width:1.05rem; height:1.05rem; margin:0; accent-color:var(--noche) }
.sp-src__t{ grid-column:1; font-weight:650; font-size:1rem; line-height:1.25; color:var(--tinta) }
.sp-src__d{ grid-column:1 / -1; font-size:.86rem; line-height:1.4; color:var(--mudo) }
.sp-src__i{ grid-column:2; grid-row:1; width:2rem; height:1.75rem; fill:none; stroke:var(--mudo); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round;
  transition:stroke .2s var(--curva) }
.sp-src:hover{ background:var(--blanco); border-color:var(--filete-firme, var(--filete)) }
.sp-src:has(input:checked){ background:var(--blanco); border-color:var(--tinta); box-shadow:0 10px 26px -20px rgba(14,23,38,.5) }
.sp-src:has(input:checked) .sp-src__i{ stroke:var(--tinta) }
.sp-src:has(input:focus-visible){ outline:2px solid var(--petroleo); outline-offset:3px }
.sp-src:active{ transform:translateY(1px) }

/* El dibujo del recorrido */
.sp-linea{ display:grid; gap:.25rem }
.sp-lienzo{ position:relative }
.sp-mapa{ display:block; width:100%; height:auto; overflow:visible }
.sp-mapa--movil{ display:none }
@media (max-width:40rem){ .sp-mapa--ancho{ display:none } .sp-mapa--movil{ display:block } }

.sp-carril{ fill:none; stroke:var(--filete); stroke-width:calc(1px * var(--s)); stroke-dasharray:calc(2px * var(--s)) calc(6px * var(--s)) }
.sp-carril--emp{ opacity:0; transition:opacity .35s var(--curva) }
.sp-mapa[data-src="oxi"] .sp-carril--emp{ opacity:1 }
.sp-rot{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--mudo) }
.sp-rot--f{ font-family:var(--lee); font-style:italic; font-weight:400; font-size:13.5px; fill:var(--sp-hondo) }

/* Lo que solo aparece con una fuente */
.sp-g-canon, .sp-g-presupuesto, .sp-g-oxi{ opacity:0; transition:opacity .4s var(--curva) }
.sp-mapa[data-src="canon"] .sp-g-canon, .sp-mapa[data-src="presupuesto"] .sp-g-presupuesto, .sp-mapa[data-src="oxi"] .sp-g-oxi{ opacity:1 }
.sp-origen{ fill:var(--blanco); stroke:var(--tinta); stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.sp-nodo-mef{ fill:var(--papel); stroke:var(--tinta); stroke-width:calc(2px * var(--s)) }
.sp-hilo{ fill:none; stroke:var(--tinta); stroke-width:calc(2px * var(--s)); stroke-dasharray:calc(1px * var(--s)) calc(5px * var(--s)); stroke-linecap:round }
.sp-enlace{ fill:none; stroke:var(--sp-hondo); stroke-width:calc(1.5px * var(--s)); stroke-dasharray:calc(3px * var(--s)) calc(4px * var(--s)) }

/* La ruta: base tenue, tramo recorrido en tinta y el dinero que fluye encima, en el acento */
.sp-base, .sp-rec, .sp-rec-m, .sp-flujo{ fill:none; stroke-linecap:round; stroke-linejoin:round }
.sp-base{ stroke:color-mix(in srgb, var(--sp) 55%, transparent); stroke-width:calc(5px * var(--s)) }
.sp-rec{ stroke:var(--noche); stroke-width:calc(6px * var(--s)) }
.sp-rec-m{ stroke:#fff; stroke-width:calc(14px * var(--s)) }
.sp-flujo{ stroke:var(--sp); stroke-width:calc(2.2px * var(--s)); stroke-dasharray:calc(5px * var(--s)) calc(13px * var(--s));
  animation:sp-fluye 1.1s linear infinite }
@keyframes sp-fluye{ to{ stroke-dashoffset:calc(-18px * var(--s)) } }

/* Estaciones (fases) */
.sp-st{ cursor:pointer; transition:transform .55s var(--curva) }
.sp-st circle{ fill:var(--papel); stroke:var(--filete-firme); stroke-width:calc(1.5px * var(--s)); transition:fill .25s var(--curva), stroke .25s var(--curva) }
.sp-st text{ font-family:var(--sans); font-weight:700; fill:var(--tinta); pointer-events:none }
.sp-st:hover circle{ stroke:var(--sp-hondo) }
.sp-st.sp-pasada circle{ fill:var(--blanco); stroke:var(--noche) }
.sp-st.sp-on circle{ fill:var(--noche); stroke:var(--sp); stroke-width:calc(5px * var(--s)) }
.sp-st.sp-on text{ fill:var(--papel) }

/* El aula: se enciende cuando el recorrido llega a la cuarta fase */
.sp-aula{ fill:var(--blanco); stroke:var(--tinta); stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.sp-aula__f, .sp-aula__b{ transition:fill .45s var(--curva) }
.sp-llega .sp-aula__f{ fill:var(--sp) }
.sp-llega .sp-aula__b{ fill:var(--tinta) }

/* El sol */
.sp-sol{ pointer-events:none; filter:drop-shadow(0 3px 5px rgba(10,26,47,.28)) }
.sp-sol circle{ fill:var(--sp) }
.sp-sol .sp-sol__a{ fill:none; stroke:var(--noche); stroke-opacity:.3; stroke-width:calc(1.2px * var(--s)) }
.sp-sol text{ font-family:var(--sans); font-weight:700; fill:var(--noche) }

/* Fila de pestañas alineada con las columnas del dibujo: origen 10 %, cuatro fases de 20 %, aula 10 % */
.sp-fila{ display:grid; grid-template-columns:10% 80% 10%; align-items:start }
.sp-fila__o, .sp-fila__a{ margin:0; padding-top:.5rem; display:grid; gap:.1rem; font-family:var(--sans); font-size:.78rem; line-height:1.3; color:var(--mudo) }
.sp-fila__a{ text-align:right }
.sp-fila__o b, .sp-fila__a b{ font-size:.86rem; font-weight:650; color:var(--tinta); text-wrap:balance }
@media (max-width:52rem){ .sp-fila__o, .sp-fila__a{ display:none } }

.sp-hitos{ grid-column:2; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr) }
.sp-hito{ display:flex; justify-content:center; min-width:0 }
.sp-tab{ display:grid; justify-items:center; align-content:start; gap:.5rem; width:100%; padding:.5rem .3rem .65rem; margin:0; border:0; border-radius:.55rem;
  background:transparent; color:var(--mudo); font:inherit; cursor:pointer; text-align:center;
  transition:background-color .2s var(--curva), color .2s var(--curva) }
.sp-tab__t{ font-family:var(--sans); font-size:clamp(.8rem,.7rem + .3vw,.98rem); font-weight:650; line-height:1.25; max-width:14ch; text-wrap:balance }
.sp-tab:hover{ color:var(--tinta); background:rgba(255,255,255,.6) }
.sp-tab[aria-selected="true"]{ color:var(--tinta); background:var(--blanco); box-shadow:0 0 0 1px var(--filete) }
.sp-tab:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px }

/* La marca de Conecta bajo cada fase */
.sp-tab__m{ display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--lee); font-style:italic; font-size:.82rem; line-height:1.25; color:var(--sp-hondo); transition:color .2s var(--curva) }
.sp-tab[aria-selected="true"] .sp-tab__m{ color:var(--tinta) }
.sp-tab__mc, .sp-tab__c{ display:none }

.sp-pie{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.6rem 2rem; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--filete) }
.sp-ruta{ margin:0; max-width:68ch; font-family:var(--lee); font-size:1.02rem; line-height:1.55; color:var(--tinta); text-wrap:pretty }
.sp-ruta b{ font-family:var(--sans); font-weight:650 }
.sp-ruta__t{ transition:opacity .25s var(--curva) }
.sp-ruta.sp-cambia .sp-ruta__t{ opacity:.15 }
.sp-ley-c{ display:inline-flex; align-items:center; gap:.4rem; margin:0; font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--sp-hondo) }
.sp-vivo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0 }

/* Paneles de fase */
.sp-fases{ display:grid; gap:clamp(1.5rem,3vw,2.25rem) }
.sp-fase{ display:grid; gap:clamp(1.25rem,3vw,2.5rem); padding:clamp(1.35rem,3.2vw,2.5rem); border-radius:.9rem;
  background:var(--blanco); border:1px solid var(--filete); scroll-margin-top:calc(var(--alto-nav, 4rem) + 1rem) }
@media (min-width:56rem){ .sp-fase{ grid-template-columns:1.15fr 1fr; align-items:start } }
.sp-fase:focus-visible{ outline:2px solid var(--petroleo); outline-offset:4px }
.sp-fase__k{ margin:0 0 .4rem; font-size:.85rem; font-weight:650; color:var(--petroleo) }
.sp-fase__t{ margin:0 0 .35rem; font-size:var(--t-seccion, 1.6rem); line-height:1.2; font-weight:650; color:var(--tinta); text-wrap:balance }
.sp-fase__q{ margin:0 0 var(--e-sm); font-family:var(--lee); font-style:italic; font-size:1.08rem; line-height:1.45; color:var(--sp-hondo) }
.sp-fase__d{ margin:0 0 var(--e-md); font-family:var(--lee); font-size:1.03rem; line-height:1.65; color:var(--tinta-2, var(--tinta)); text-wrap:pretty; max-width:58ch }

.sp-dl{ margin:0 0 var(--e-md); padding:.8rem 0; border-top:1px solid var(--filete); border-bottom:1px solid var(--filete) }
.sp-dl div{ display:grid; gap:.2rem }
.sp-dl dt{ font-size:.85rem; font-weight:650; color:var(--mudo) }
.sp-dl dd{ margin:0; font-size:.98rem; line-height:1.5; color:var(--tinta) }

.sp-por__k{ margin:0 0 .5rem; font-size:.85rem; font-weight:650; color:var(--mudo) }
.sp-por ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.sp-por li{ display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.7rem; align-items:start; font-size:.96rem; line-height:1.5; color:var(--tinta) }
.sp-por__i{ width:2rem; height:1.75rem; margin-top:.05rem; fill:none; stroke:var(--sp-hondo); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round }
.sp-por li b{ font-weight:650 }
.sp-por .sp-fuente{ margin-left:.15rem }

/* Dónde entra Conecta: el bloque oscuro de cada fase, con la misma marca de la fila */
.sp-fase__b{ display:grid; gap:1rem }
.sp-entra{ padding:1.25rem 1.3rem 1.35rem; border-radius:.7rem; background:var(--noche); color:var(--papel) }
.sp-entra__k{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem; margin:0 0 .6rem; font-size:.88rem; font-weight:650; color:var(--sp) }
.sp-entra__k span{ flex-basis:100%; font-size:1.1rem; color:var(--papel) }
.sp-entra__d{ margin:0; font-family:var(--lee); font-size:1.04rem; line-height:1.6; color:var(--papel); text-wrap:pretty }
.sp-no{ margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid rgba(244,242,238,.18); font-size:.92rem; line-height:1.45; color:var(--suave-claro, #C9D3DA) }
.sp-queda{ margin:0; padding-top:.9rem; border-top:1px solid var(--filete); font-family:var(--lee); font-size:1rem; line-height:1.55; color:var(--tinta) }
.sp-queda span{ display:block; margin-bottom:.15rem; font-size:.85rem; font-weight:650; color:var(--petroleo) }

/* Seguir a la fase siguiente (lo pone el JS) */
.sp-sig{ justify-self:start; display:inline-flex; align-items:center; gap:.5rem; margin:0; padding:.6rem 1rem; border-radius:999px;
  border:1px solid var(--filete-firme); background:transparent; color:var(--tinta); font:600 .92rem/1.2 var(--sans); cursor:pointer;
  transition:background-color .2s var(--curva), border-color .2s var(--curva) }
.sp-sig svg{ display:none }
.sp-sig:hover{ background:var(--papel); border-color:var(--tinta) }
.sp-sig:focus-visible{ outline:2px solid var(--petroleo); outline-offset:3px }

.sp-nota{ margin:clamp(1.5rem,3vw,2rem) 0 0; max-width:72ch; font-size:.88rem; line-height:1.6; color:var(--mudo) }

/* Sin JS / con JS */
.sp-ciclo:not(.sp-js) .sp-srcs, .sp-ciclo:not(.sp-js) .sp-linea{ display:none }
.sp-js .sp-fases{ display:block }
.sp-js .sp-fase[hidden]{ display:none }
.sp-js .sp-por li[data-oculta]{ display:none }
.sp-js .sp-fase.sp-entra-anim{ animation:sp-aparece .35s var(--curva) both }
@keyframes sp-aparece{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* Celular: nombre corto de la fase y de la marca (el nombre completo queda para lectores de pantalla) */
@media (max-width:40rem){
  /* v30: las columnas de la fila coinciden con las del dibujo (fases en 20, 40, 60 y 80 %) */
  .sp-fila{ grid-template-columns:10% 80% 10% }
  .sp-tab{ padding:.4rem .1rem .55rem; gap:.4rem }
  .sp-tab__t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
  .sp-tab__c{ display:block; font-family:var(--sans); font-size:.74rem; font-weight:650; line-height:1.25 }
  .sp-tab__ml{ display:none }
  .sp-tab__mc{ display:inline }
  .sp-tab__m{ flex-direction:column; gap:.1rem; padding:.2rem .1rem; border-radius:.45rem; font-size:.66rem }
}
@media (max-width:24rem){ .sp-tab__mc{ display:none } }
/* Leyenda de los carriles (solo en celular, donde el dibujo no lleva rótulos) */
.sp-carriles{ display:none; flex-wrap:wrap; gap:.3rem 1rem; margin:.2rem 0 .3rem; font-family:var(--sans); font-size:.74rem; color:var(--tinta-2) }
.sp-carriles__i{ display:inline-flex; align-items:center; gap:.4rem }
.sp-carriles__i::before{ content:""; width:1.1rem; height:.6rem; border-radius:.3rem; background:color-mix(in srgb, var(--sp) 9%, var(--papel)) }
.sp-carriles__i--ent::before{ background:color-mix(in srgb, var(--sp) 20%, var(--papel)) }
@media (max-width:40rem){ .sp-carriles{ display:flex } }

/* Movimiento reducido: sin animaciones, contenido completo */
@media (prefers-reduced-motion:reduce){
  .sp-st, .sp-src, .sp-tab, .sp-tab__m, .sp-src__i, .sp-aula__f, .sp-aula__b, .sp-carril--emp, .sp-ruta__t,
  .sp-g-canon, .sp-g-presupuesto, .sp-g-oxi, .sp-bar__p i{ transition:none }
  .sp-flujo{ animation:none }
  .sp-js .sp-fase.sp-entra-anim{ animation:none }
  .rv .sp-cifra:not(.visto) .sp-bar__p i{ transform:none }
  .sp-bar__p i{ transition:none }
}

/* Rótulos y nombres en Archivo; los textos largos siguen en Literata */
.sp-src__t, .sp-src__d, .sp-fase__k, .sp-dl dt, .sp-dl dd, .sp-por__k, .sp-entra__k, .sp-queda span, .sp-no, .sp-fuente, .sp-nota{ font-family:var(--sans) }

/* Fuentes plegadas */
.sp-fyc{ margin-top:clamp(1.75rem,3.5vw,2.5rem); max-width:72ch; font-family:var(--sans); font-size:.84rem; line-height:1.55; color:var(--mudo) }
.sp-fyc summary{ display:inline-flex; align-items:center; gap:.55rem; min-height:44px; cursor:pointer; list-style:none; font-weight:600; color:var(--tinta); border-radius:.3rem }
.sp-fyc summary::-webkit-details-marker{ display:none }
.sp-fyc summary::after{ content:""; width:.45rem; height:.45rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--curva) }
.sp-fyc[open] summary::after{ transform:rotate(-135deg) translateY(-1px) }
.sp-fyc summary:focus-visible{ outline:2px solid var(--foco, var(--petroleo)); outline-offset:3px }
.sp-fyc ul{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.45rem }
.sp-fyc a{ color:inherit; text-decoration:underline; text-decoration-color:var(--filete-firme, var(--filete)); text-underline-offset:.2em }
.sp-fyc a:hover{ color:var(--tinta) }
.sp-fyc--o{ color:rgba(244,242,238,.66) }
.sp-fyc--o summary{ color:var(--papel) }
.sp-fyc--o a{ text-decoration-color:rgba(244,242,238,.3) }
.sp-fyc--o a:hover{ color:var(--papel) }

/* v28 · Apertura: el patio del Colegio Mayor es muy cargado; en pantalla ancha se refuerza el velo izquierdo
   (la foto se corre a la derecha desde comunidad_sector_publico.py). En celular manda el velo de la plantilla. */
@media (min-width:40.01rem){
  .cm .cm-ap .portada__velo{ background:
    linear-gradient(to bottom, rgba(10,26,47,.55) 0, rgba(10,26,47,0) 18%),
    linear-gradient(90deg, rgba(10,26,47,.92) 0, rgba(10,26,47,.8) 34%, rgba(10,26,47,.45) 54%, rgba(10,26,47,0) 74%),
    linear-gradient(to top, rgba(10,26,47,.8) 0, rgba(10,26,47,0) 46%) }
}

/* ============================================================ v29 · capa nueva (agente ESP) */

/* ---------- #presupuesto: carriles, guías de fase e insignias ---------- */
.sp-pre{ background:var(--papel) }
.sp-pre .sp-cab{ margin-inline:auto; text-align:center }
.sp-pre .sp-cab .h2, .sp-pre .sp-cab .entrada{ margin-inline:auto }
.sp-pre .sp-cab .h2{ font-size:clamp(2rem,1.4rem + 2.2vw,3.2rem); line-height:1.05; letter-spacing:-.025em; max-width:20ch }
.sp-linea{ padding:clamp(1rem,2.5vw,2rem) clamp(.75rem,2vw,1.75rem) clamp(.9rem,2vw,1.4rem); border-radius:1.5rem; background:var(--blanco);
  box-shadow:0 0 0 1px var(--filete), 0 34px 70px -48px rgba(14,23,38,.5) }
.sp-banda{ fill:color-mix(in srgb, var(--sp) 9%, var(--papel)); stroke:none }
.sp-banda--ent{ fill:color-mix(in srgb, var(--sp) 20%, var(--papel)) }
.sp-banda--emp{ fill:color-mix(in srgb, var(--piedra) 32%, var(--papel)); opacity:0; transition:opacity .35s var(--curva) }
.sp-mapa[data-src="oxi"] .sp-banda--emp{ opacity:1 }
.sp-guia{ fill:none; stroke:var(--filete-firme); stroke-width:calc(1px * var(--s)); stroke-dasharray:calc(2px * var(--s)) calc(5px * var(--s)) }
.sp-carril{ stroke:transparent }
.sp-rot{ font-size:12.5px; fill:var(--tinta-2) }
.sp-insignia{ fill:var(--blanco); stroke:var(--tinta); stroke-width:calc(1.4px * var(--s)) }
.sp-insignia--aula{ fill:var(--papel); transition:fill .45s var(--curva) }
.sp-llega .sp-insignia--aula{ fill:color-mix(in srgb, var(--sp) 40%, var(--blanco)) }
.sp-origen{ fill:none; stroke-width:2.2 }
.sp-st circle{ fill:var(--blanco); stroke:var(--tinta-2) }
.sp-src{ background:var(--blanco) }
.sp-fase{ border-radius:1.3rem; box-shadow:0 30px 60px -46px rgba(14,23,38,.45) }
.sp-entra{ border-radius:1rem; background:radial-gradient(120% 120% at 100% 0, #13305A 0, var(--noche) 60%) }

/* v29 · el selector queda con dos fuentes; las demás vías se enlazan a Cómo se financia */
@media (min-width:44rem){ .sp-srcs__op{ grid-template-columns:repeat(2,1fr) } }
.sp-otras{ margin:.6rem 0 0; font-family:var(--sans); font-size:.95rem; font-weight:600 }
.sp-otras a{ color:var(--tinta); text-decoration:underline; text-decoration-color:var(--sp-hondo); text-underline-offset:.24em; min-height:44px; display:inline-flex; align-items:center }
.sp-otras a:hover{ text-decoration-thickness:2px }
.sp-otras a:focus-visible{ outline:2px solid var(--petroleo); outline-offset:3px; border-radius:2px }

/* ============================================================ v31 · una sola pieza (agente SOC-SP)
   «Del presupuesto al aula»: cabecera, las dos cifras en una tarjeta noche con la escuela en capas, el ciclo y, al
   cierre, la línea del cliente público del glosario. Sale #niveles (los niveles viven en «Quiénes la forman»). */
.sp-cab--pieza{ margin-bottom:clamp(1.5rem,3vw,2.25rem) }
.sp-pre .sp-cab--pieza .h2{ max-width:21ch; font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem); line-height:1.04; letter-spacing:-.03em }

/* Las dos cifras: tarjeta noche con la foto en capas */
.sp-cif{ position:relative; isolation:isolate; overflow:clip; margin:0 0 clamp(3rem,6vw,4.5rem); padding:clamp(1.5rem,3.5vw,3rem);
  border-radius:1.6rem; background:var(--noche-hondo); color:var(--papel); box-shadow:0 40px 80px -52px rgba(14,23,38,.7) }
.sp-cif__foto{ position:absolute; inset:0; z-index:-1; margin:0 }
.sp-cif__foto picture{ position:absolute; inset:0; display:block }
.sp-cif__img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%; display:block; opacity:.55 }
.sp-cif__foto::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,17,31,.92) 0, rgba(6,17,31,.7) 45%, rgba(6,17,31,.35) 100%), linear-gradient(0deg, rgba(6,17,31,.6) 0, rgba(6,17,31,0) 50%) }
.sp-cif .sp-cifras{ gap:clamp(1.75rem,3vw,2.5rem) }
@media (min-width:60rem){ .sp-cif .sp-cifras{ grid-template-columns:1.2fr 1fr; column-gap:clamp(2rem,4vw,4rem) } }
.sp-cif .sp-cifra{ border-top:1px solid rgba(244,242,238,.2); padding-top:1.2rem }
.sp-cif .sp-cifra__n{ font-family:var(--sans); font-weight:650; color:var(--sp); letter-spacing:-.03em; font-size:clamp(2.6rem,1.8rem + 2.6vw,4.4rem) }
.sp-cif .sp-cifra__u{ color:var(--papel) }
.sp-cif .sp-cifra__t{ font-family:var(--sans); font-size:.98rem; color:#DCE3E6 }
.sp-cif .sp-bar__p{ height:.7rem; border-radius:.35rem }
.sp-cif .sp-bar__p i + i{ box-shadow:inset 2px 0 0 var(--noche-hondo) }
.sp-cif__pie{ margin:clamp(1.25rem,2.5vw,1.75rem) 0 0; font-family:var(--sans); font-size:.76rem; color:rgba(244,242,238,.62) }

/* El ciclo, con su título propio */
.sp-cab--ciclo{ margin-bottom:clamp(1.75rem,3.5vw,2.5rem) }
.sp-ciclo__t{ margin:0 auto var(--e-sm); max-width:24ch; font-family:var(--sans); font-weight:650; font-size:clamp(1.5rem,1.15rem + 1.3vw,2.2rem); line-height:1.12; letter-spacing:-.02em; color:var(--tinta); text-wrap:balance }

/* Cierre: quién paga cuando el cliente es el Estado */
.sp-cierre{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 2.5rem; margin-top:clamp(1.75rem,3.5vw,2.5rem);
  padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.2rem,2.6vw,1.75rem); border-radius:1.1rem; background:var(--blanco); box-shadow:0 0 0 1px var(--filete) }
.sp-cliente{ margin:0; flex:1 1 30rem; display:grid; gap:.3rem; font-family:var(--lee); font-size:clamp(1.05rem,1rem + .3vw,1.2rem); line-height:1.5; color:var(--tinta); text-wrap:pretty }
.sp-cliente__k{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans); font-size:.82rem; font-weight:650; color:var(--sp-hondo) }
.sp-cierre .sp-otras{ margin:0; flex:0 1 auto; max-width:30ch }
@media (max-width:40rem){ .sp-cif{ border-radius:1.2rem } .sp-cif__img{ object-position:40% 50% } }