/* 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-niv{ --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, .sp-niv .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){
  .sp-fila{ grid-template-columns:4% 92% 4% }
  .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); white-space:nowrap }
  .sp-tab__c{ display:block; font-family:var(--sans); font-size:.82rem; 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:.3rem .35rem; border-radius:.45rem; font-size:.7rem }
}

/* ============================================================ 3 · Niveles de gobierno (blanca) */
.sp-niv__rej{ display:grid; gap:clamp(1.5rem,4vw,4rem); align-items:start }
@media (min-width:60rem){ .sp-niv__rej{ grid-template-columns:minmax(17rem,22rem) minmax(0,1fr) } .sp-anillos{ position:sticky; top:calc(var(--alto-nav, 4rem) + 4rem) } }
.sp-anillos{ margin:0; max-width:22rem; justify-self:center; width:100% }
.sp-anillos svg{ display:block; width:100%; height:auto; overflow:visible }
.sp-anillos figcaption{ margin-top:.5rem; text-align:center; font-family:var(--lee); font-style:italic; font-size:.9rem; color:var(--mudo) }
.sp-an circle, .sp-an__lazo{ fill:var(--blanco); stroke:var(--filete-firme); stroke-width:1.4; transition:fill .35s var(--curva), stroke .35s var(--curva) }
.sp-an text{ font-family:var(--sans); font-size:12px; font-weight:650; fill:var(--mudo); transition:fill .3s var(--curva) }
.sp-an--nacional circle{ fill:var(--papel) }
.sp-an__lazo{ fill:none; stroke-dasharray:3 4 }
.sp-an--manco .sp-an__vec{ fill:transparent }
.sp-an__aula{ fill:var(--blanco); stroke:var(--tinta); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round }
.sp-an__aula .sp-aula__b{ fill:var(--tinta) }
[data-on="nacional"] .sp-an--nacional circle, [data-on="regional"] .sp-an--regional circle,
[data-on="provincial"] .sp-an--provincial circle, [data-on="distrital"] .sp-an--distrital circle{ fill:color-mix(in srgb, var(--sp) 55%, var(--blanco)); stroke:var(--tinta) }
[data-on="manco"] .sp-an--manco .sp-an__vec, [data-on="manco"] .sp-an--distrital circle{ fill:color-mix(in srgb, var(--sp) 55%, var(--blanco)) }
[data-on="manco"] .sp-an__lazo{ stroke:var(--tinta); stroke-width:2 }
[data-on="nacional"] .sp-an--nacional text, [data-on="regional"] .sp-an--regional text, [data-on="provincial"] .sp-an--provincial text,
[data-on="distrital"] .sp-an--distrital text, [data-on="manco"] .sp-an--manco text{ fill:var(--tinta) }
.sp-niveles{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-firme) }
.sp-nv{ display:grid; gap:.9rem 2.5rem; padding:1.5rem 0 1.6rem; border-bottom:1px solid var(--filete); transition:opacity .3s var(--curva) }
@media (min-width:46rem){ .sp-nv{ grid-template-columns:1fr 1fr } .sp-nv__id{ grid-column:1 / -1 } }
@media (min-width:60rem){ [data-on] .sp-nv:not(.sp-on){ opacity:.62 } }
.sp-nv__id{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem }
.sp-nv--nacional .sp-nv--regional .sp-nv--provincial .sp-nv--distrital .rv .sp-nv:not(.visto) .sp-nv__t{ margin:0; font-family:var(--sans); font-size:var(--t-seccion, 1.4rem); line-height:1.2; font-weight:650; color:var(--tinta) }
.sp-nv__n{ margin:0; font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--mudo); font-variant-numeric:tabular-nums }
.sp-nv__c p{ margin:0; font-family:var(--lee); font-size:1rem; line-height:1.6; color:var(--tinta); text-wrap:pretty }
.sp-nv__c .sp-nv__k{ display:flex; align-items:center; gap:.4rem; margin:0 0 .3rem; font-family:var(--sans); font-size:.82rem; font-weight:650; line-height:1.3; color:var(--mudo) }
.sp-nv__c--con .sp-nv__k{ color:var(--sp-hondo) }
.sp-nv__c a{ color:inherit; text-decoration:underline; text-decoration-color:var(--filete-firme); text-underline-offset:.2em }
.sp-nv__c a:hover{ text-decoration-color:currentColor }
.sp-nv__c a:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px; border-radius:2px }
.sp-nv--manco{ border-bottom-color:var(--filete-firme) }

/* 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,   .sp-flujo{ animation:none }
  .sp-js .sp-fase.sp-entra-anim{ animation:none }
  .rv .sp-cifra:not(.visto) .sp-bar__p i, .rv .sp-nv:not(.visto) }

/* 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%) }
}