/* v25 · Proyectos: la ficha de cada proyecto y su lectura como desarrollo territorial. Prefijo py-.
   Cada proyecto se cuenta en un solo bloque: el texto y una ficha con foto real;
   debajo, los cuatro frentes en su orden (encendidos con su acento los que activa),
   los sistemas del territorio con su foto del árbol y el momento del ciclo en una línea de seis.
   Acentos de frente iguales a /que-hacemos/: brújula, escuela, coar y lab. */
.py{ --py-tierra:color-mix(in oklab, var(--piedra) 42%, var(--papel)); --py-tierra-2:color-mix(in oklab, var(--piedra) 70%, var(--papel));
  background:var(--papel); padding-block:clamp(3.5rem,7vw,6.25rem) }

/* ---------------------------------------------------------------- Texto y ficha */
.py-intro{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--e-xl) clamp(2.5rem,6vw,6rem); align-items:start }
.py-intro__txt{ padding-top:clamp(0rem,1.5vw,1.25rem) }
.py-intro__txt .lede{ font-size:clamp(1.18rem,1rem + .6vw,1.5rem); line-height:1.5; color:var(--tinta); max-width:34ch }
.py-intro__txt .cuerpo{ margin-top:1.1rem; max-width:58ch }
.py-intro__txt .lede + .cuerpo{ margin-top:1.6rem }
.py-intro .py-frentes{ margin-top:clamp(2.5rem,4.5vw,3.5rem) }
.py-intro .py-fr{ grid-template-columns:1fr; gap:.55rem }
/* Solo los frentes activos, en filas: se adapta a dos o tres sin dejar huecos. */
.py-intro .py-fr__i a{ grid-template-columns:1fr; grid-template-rows:auto auto; row-gap:.2rem; min-height:0; padding:1rem 1.35rem 1.1rem }
.py-intro .py-fr__i b{ margin-top:0 }
/* Un solo sistema: la columna se ciñe a la píldora y el ciclo toma el resto. */
.py-lee__g:has(.py-sis li:only-child){ grid-template-columns:max-content minmax(0,1fr) }
.py-sis ul:has(> li:only-child){ grid-template-columns:1fr }

.py-ficha{ margin:0; background:var(--py-tierra); border-radius:22px; padding:.55rem .55rem 1.25rem }
.py-ficha__foto{ position:relative; aspect-ratio:16 / 10; border-radius:17px; overflow:hidden; background:var(--py-tierra-2) }
.py-ficha__foto picture, .py-ficha__foto img{ display:block; width:100%; height:100% }
.py-ficha__foto img{ object-fit:cover; object-position:var(--pos, 50% 50%) }
.py-ficha__pie{ position:absolute; left:.75rem; bottom:.7rem; max-width:calc(100% - 1.5rem); padding:.28rem .7rem .32rem; border-radius:999px;
  font-family:var(--lee); font-style:italic; font-size:.84rem; line-height:1.3; color:var(--papel); background:rgba(10,26,47,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.py-ficha__dl{ margin:1.05rem .95rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem }
.py-ficha__dl > div{ padding-top:.65rem; border-top:1px solid rgba(14,23,38,.13); min-width:0 }
.py-ficha__dl > div:first-child, .py-ficha__dl > div:nth-child(4):last-child{ grid-column:1 / -1 }
.py-ficha__dl dt{ font-family:var(--lee); font-style:italic; font-size:.88rem; color:var(--petroleo); margin-bottom:.2rem }
.py-ficha__dl dd{ margin:0; font-family:var(--sans); font-size:.98rem; line-height:1.42; color:var(--tinta) }

/* ---------------------------------------------------------------- Encabezados internos */
.py-lee{ margin-top:clamp(2.75rem,5vw,4.25rem) }
.py-cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1rem; margin-bottom:1rem }
.py-cab__t{ font-family:var(--sans); font-size:1.08rem; font-weight:650; letter-spacing:-.01em; color:var(--tinta); margin:0 }
.py-cab__n{ font-family:var(--lee); font-style:italic; font-size:.95rem; color:var(--mudo); margin:0 }

/* ---------------------------------------------------------------- Los cuatro frentes */
.py-fr{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem }
.py-fr__i{ min-width:0 }
.py-fr__i a{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-rows:auto auto 1fr; align-content:start; gap:.4rem;
  height:100%; min-height:10rem; padding:1.1rem 1.2rem 1.25rem; border-radius:18px; text-decoration:none; color:var(--tinta);
  border:1.5px dashed rgba(14,23,38,.2) }
.py-fr__i a::before{ content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in oklab, var(--c) 82%, var(--papel));
  transform-origin:left center; transform:scaleX(0) }
.py-fr__i[data-on] a{ border-color:transparent }
.py-fr__i[data-on] a::before{ transform:none }
.py-fr__n{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font-family:var(--lee); font-size:1rem; line-height:1;
  color:var(--mudo); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--c) 75%, var(--tinta)) }
.py-fr__i[data-on] .py-fr__n{ color:var(--tinta); background:rgba(255,255,255,.72); box-shadow:none }
.py-fr__i b{ margin-top:.55rem; font-family:var(--sans); font-size:1.03rem; font-weight:650; line-height:1.22; letter-spacing:-.01em; color:var(--mudo) }
.py-fr__i[data-on] b{ color:var(--tinta) }
.py-fr__d{ font-family:var(--lee); font-size:.94rem; line-height:1.42; color:var(--mudo); font-style:italic }
.py-fr__i[data-on] .py-fr__d{ color:var(--tinta-2); font-style:normal }
.py-fr__i a:hover b{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
.py-fr__i a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }

/* Un solo momento de movimiento: al entrar, los frentes activos se encienden en su orden. */
.rv .py-frentes:not(.visto) .py-fr__i[data-on] a::before{ transform:scaleX(0) }
.rv .py-frentes .py-fr__i[data-on] a::before{ transition:transform .75s var(--curva); transition-delay:calc(.25s + var(--i) * .14s) }

/* ---------------------------------------------------------------- Sistemas y momento del ciclo */
.py-lee__g{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--e-xl) clamp(2.5rem,6vw,6rem); align-items:start }
.py-sis .py-cab__t, .py-etapa .py-cab__t{ margin-bottom:1rem }
.py-sis ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem }
.py-sis a{ display:flex; align-items:center; gap:.85rem; height:100%; padding:.45rem 1rem .45rem .45rem; border-radius:999px; background:var(--py-tierra);
  text-decoration:none; color:var(--tinta) }
.py-sis img{ flex:none; width:3.25rem; height:3.25rem; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--papel) }
.py-sis span{ display:grid; min-width:0; line-height:1.3 }
.py-sis b{ font-family:var(--sans); font-size:.98rem; font-weight:650 }
.py-sis small{ font-family:var(--lee); font-size:.88rem; color:var(--tinta-2) }
.py-sis a:hover b{ text-decoration:underline; text-underline-offset:3px }
.py-sis a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }

.py-ciclo{ --paso:calc(100% / 6); position:relative; list-style:none; margin:1.35rem 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) }
.py-ciclo::before, .py-ciclo::after{ content:""; position:absolute; top:calc(.45rem - 1px); left:calc(var(--paso) / 2); height:2px; border-radius:2px }
.py-ciclo::before{ right:calc(var(--paso) / 2); background:color-mix(in oklab, var(--piedra) 80%, var(--tinta)) }
.py-ciclo::after{ width:calc(var(--paso) * var(--k)); background:var(--sol); transform-origin:left center }
.py-ciclo li{ position:relative; z-index:1; display:grid; justify-items:center; align-content:start; gap:.6rem; text-align:center; min-width:0 }
.py-ciclo i{ display:block; width:.9rem; height:.9rem; border-radius:50%; background:var(--papel); box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--piedra) 70%, var(--tinta)) }
.py-ciclo span{ font-family:var(--sans); font-size:.8rem; line-height:1.2; color:var(--mudo); white-space:nowrap }
.py-ciclo li[aria-current] i{ width:1.5rem; height:1.5rem; margin-top:-.3rem; margin-bottom:-.3rem; background:var(--sol);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--sol) 26%, transparent) }
.py-ciclo li[aria-current] span{ font-size:.9rem; font-weight:650; color:var(--tinta) }
.rv .py-etapa:not(.visto) .py-ciclo::after{ transform:scaleX(0) }
.rv .py-etapa .py-ciclo::after{ transition:transform .9s var(--curva) .35s }
.py-etapa__d{ margin:1.5rem 0 0; font-family:var(--lee); font-size:1rem; line-height:1.5; color:var(--tinta-2) }
.py-etapa__d b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.py-etapa__liga{ margin:.55rem 0 0; font-size:.94rem }

/* ---------------------------------------------------------------- Calendario de Proyecto País */
.py-cal{ margin-top:clamp(2.75rem,5vw,4rem) }
.py-cal__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem }
.py-cal__l li{ position:relative; display:grid; align-content:start; gap:.3rem; padding:1.15rem 1.25rem 1.3rem; border-radius:18px; background:var(--py-tierra) }
.py-cal__f{ font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--petroleo) }
.py-cal__l b{ font-family:var(--sans); font-size:1.12rem; font-weight:650; letter-spacing:-.01em; color:var(--tinta) }
.py-cal__d{ font-family:var(--lee); font-size:.95rem; line-height:1.45; color:var(--tinta-2) }
.py-cal__l li[data-estado="curso"]{ background:var(--noche) }
.py-cal__l li[data-estado="curso"] .py-cal__f{ color:var(--sol-2) }
.py-cal__l li[data-estado="curso"] b{ color:var(--papel) }
.py-cal__l li[data-estado="curso"] .py-cal__d{ color:#DCE3E6 }
.py-cal__ya{ justify-self:start; order:-1; margin-bottom:.35rem; padding:.18rem .62rem .22rem; border-radius:999px; font-style:normal;
  font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--noche); background:var(--sol-2) }

/* ---------------------------------------------------------------- Pantallas medianas y móviles */
@media (max-width:63.99rem){
  .py-lee__g:has(.py-sis li:only-child){ grid-template-columns:1fr }
  /* En una columna: texto, ficha y luego los frentes. */
  .py-intro{ grid-template-columns:1fr; row-gap:0 }
  .py-intro__txt{ display:contents }
  .py-intro .py-ficha{ order:1; margin-top:var(--e-xl) }
  .py-intro .py-frentes{ order:2; margin-top:var(--e-xl) }
  .py-ficha{ max-width:40rem }
  .py-fr{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .py-lee__g{ grid-template-columns:1fr }
}
@media (max-width:47.99rem){
  .py-fr, .py-intro .py-fr{ grid-template-columns:1fr; gap:.5rem }
  .py-fr__i a, .py-intro .py-fr__i a{ grid-template-columns:1fr; grid-template-rows:auto auto; row-gap:.15rem; min-height:0; padding:.9rem 1.1rem }
  .py-intro .py-fr__i a{ min-height:0 }
  .py-fr__i b{ margin-top:0 }
  .py-sis ul{ grid-template-columns:1fr }
  .py-cal__l{ grid-template-columns:1fr; gap:.5rem }
  .py-ficha__dl{ grid-template-columns:1fr; gap:.8rem; margin-inline:.7rem }
}
@media (max-width:39.99rem){
  /* En móvil solo se rotula el momento actual; los demás quedan para lectores de pantalla. */
  .py-ciclo li:not([aria-current]) span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@media (prefers-reduced-motion:reduce){
  .rv .py-frentes .py-fr__i[data-on] a::before, .rv .py-etapa .py-ciclo::after{ transition:none }
  .rv .py-frentes:not(.visto) .py-fr__i[data-on] a::before{ transform:none }
  .rv .py-etapa:not(.visto) .py-ciclo::after{ transform:none }
}

/* ============================================================================
   v28 (BRIEF_v28, lista negra anti-IA). Sin píldoras con punto, sin números
   que no son secuencia (los tres lugares, los cuatro ámbitos y los ocho
   avances), sin cajas tintadas que solo decoran. El color de cada frente
   queda como subrayado de marcador en su nombre; el ciclo y la gobernanza,
   que sí son dibujos con sentido, siguen igual.
   ========================================================================== */

/* Apertura: rótulo de texto */
.pa__k{ margin:0; font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--sol-2); text-shadow:0 1px 12px rgba(6,17,31,.6) }

/* Frentes que activa: filas con filete y el nombre subrayado con el color del frente */
.py-intro .py-fr{ gap:0; border-bottom:1px solid var(--filete) }
.py-fr__i a, .py-intro .py-fr__i a{ border:0; border-top:1px solid var(--filete); border-radius:0; padding:.95rem 0 1rem; min-height:0 }
.py-fr__i a::before{ content:none }
.py-fr__i b{ justify-self:start; padding:0 .1em; border-radius:2px;
  background:linear-gradient(transparent 60%, color-mix(in oklab, var(--c) 70%, transparent) 60%, color-mix(in oklab, var(--c) 70%, transparent) 94%, transparent 94%) }
.py-fr__i a:hover b{ text-decoration:none; background:linear-gradient(transparent 20%, color-mix(in oklab, var(--c) 60%, transparent) 20%, color-mix(in oklab, var(--c) 60%, transparent) 94%, transparent 94%) }
@media (prefers-reduced-motion:no-preference){ .py-fr__i b{ transition:background .25s var(--curva) } }

/* Ficha: sin el fondo tostado alrededor; la foto y los datos con filetes */
.py-ficha{ background:none; border-radius:0; padding:0 }
.py-ficha__dl{ margin-inline:0 }

/* Sistemas que toca: foto redonda y texto, sin píldora tintada */
.py-sis a{ background:none; padding:.3rem 0; border-radius:0 }

/* Calendario: una línea de tiempo con filetes, sin cajas; la sesión en curso, con su marca */
.py-cal__l{ gap:0 clamp(1rem,2.5vw,2rem) }
.py-cal__l li, .py-cal__l li[data-estado="curso"]{ background:none; border-radius:0; padding:1rem 0 0; border-top:1px solid var(--filete-firme) }
.py-cal__l li[data-estado="curso"]{ border-top-color:var(--tinta) }
.py-cal__l li[data-estado="curso"] .py-cal__f{ color:var(--petroleo) }
.py-cal__l li[data-estado="curso"] b{ color:var(--tinta) }
.py-cal__l li[data-estado="curso"] .py-cal__d{ color:var(--tinta-2) }

/* Lo que ya está cambiando: foto y texto, sin tarjeta blanca ni números */
.pg-ambito{ background:none; box-shadow:none; border-radius:0; overflow:visible }
.pg-ambito:hover{ transform:none; box-shadow:none }
.pg-ambito__foto{ border-radius:var(--r-lg) }
.pg-avs{ padding:1.1rem 0 0 }
.pg-avs li{ grid-template-columns:1fr }
.pg-avs li::before{ content:none }
.pg-cuidado{ background:none; color:var(--tinta-2); border-radius:0; padding:0 }
.pg-cuidado b{ color:var(--tinta) }
.pg-cuidado__ic{ color:var(--petroleo); background:none }

/* v28 · revisión final del integrador
   Apertura: jerarquía en vez de tres tarjetas iguales. Ticumpinía, grande, sube sobre la foto de fondo;
   Callao y Proyecto País van como filas (foto pequeña y texto) a su lado, ya sobre papel. */
.pa-lugar--a .pa-lugar__foto{ aspect-ratio:4 / 3 }
.pa-lugar--a .pa-lugar__txt b{ font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem) }
@media (min-width:48rem){
  .pa__lista{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; align-items:start; column-gap:clamp(1.75rem,3.5vw,3.5rem); row-gap:clamp(1.25rem,2.5vw,2rem) }
  .pa-lugar--a{ grid-row:1 / span 3 }
  .pa-lugar:not(.pa-lugar--a) a{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:1.1rem; align-items:center; height:auto }
  .pa-lugar:not(.pa-lugar--a) .pa-lugar__foto{ aspect-ratio:4 / 3; box-shadow:none }
  .pa-lugar:not(.pa-lugar--a) .pa-lugar__txt{ padding-top:0 }
  .pa-lugar:not(.pa-lugar--a) .pa-lugar__txt b{ font-size:clamp(1.1rem,1rem + .35vw,1.3rem) }
  .pa-lugar:not(.pa-lugar--a) .pa-lugar__ir{ min-height:2.2rem }
  /* la primera fila empieza donde termina la foto de fondo */
  .pa-lugar--b{ margin-top:calc(clamp(7rem,17vw,12.5rem) + .5rem); padding-bottom:clamp(1.25rem,2.5vw,2rem); border-bottom:1px solid var(--filete) }
}
@media (max-width:47.99rem){
  .pa-lugar--a a{ display:flex; flex-direction:column; align-items:stretch; gap:0 }
  .pa-lugar--a .pa-lugar__txt{ padding-top:1rem }
}

/* Lo que ya está cambiando: una sola foto y la lista de los ocho avances por ámbito */
.pg-cambios__rej{ display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:start }
.pg-cambios__foto{ margin:0 }
.pg-cambios__foto picture{ display:block; aspect-ratio:3 / 2; overflow:hidden; border-radius:var(--r-lg); background:var(--noche-2) }
.pg-cambios__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block }
.pg-cambios__foto figcaption{ margin-top:.6rem; font-family:var(--sans); font-size:.86rem; color:var(--mudo) }
@media (min-width:64rem){
  .pg-cambios__rej{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:clamp(3rem,5vw,5rem) }
  .pg-cambios__foto{ position:sticky; top:calc(var(--alto-nav, 4.5rem) + 1.5rem) }
  .pg-cambios__foto picture{ aspect-ratio:4 / 5 }
}
.pg-ambitos.pg-ambitos--lista{ display:block; border-bottom:1px solid var(--filete-firme) }
.pg-ambitos--lista .pg-ambito{ display:grid; grid-template-columns:1fr; gap:.9rem; padding:clamp(1.25rem,2.5vw,1.75rem) 0; border-top:1px solid var(--filete-firme) }
.pg-ambitos--lista .pg-ambito__k{ position:static; margin:0; color:var(--tinta); font-family:var(--lee); font-weight:500; font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem); letter-spacing:-.01em }
.pg-ambitos--lista .pg-avs{ padding:0; gap:.9rem }
.pg-ambitos--lista .pg-avs li + li{ padding-top:.9rem }
@media (min-width:40rem){
  .pg-ambitos--lista .pg-ambito{ grid-template-columns:minmax(0,10rem) minmax(0,1fr); column-gap:clamp(1.25rem,3vw,2.5rem) }
}

/* ============================================================================
   v31 · PROYECTOS: qué se hizo, dónde, con quién y qué cambió (A5 §3).
   Fichas mínimas en el mapa; el lugar recortado del mismo mapa en cada ficha;
   «No en este encargo» una sola vez (leyenda); enlace al Observatorio del lugar.
   ========================================================================== */
/* Mapa: tres preguntas por proyecto */
.px-mf__q{ margin:1.1rem 0 0; display:grid }
.px-mf__q > div{ display:grid; grid-template-columns:6.6rem minmax(0,1fr); gap:.15rem 1rem; padding:.7rem 0; border-top:1px solid rgba(244,242,238,.12) }
.px-mf__q dt{ font-family:var(--sans); font-size:.8rem; font-weight:650; line-height:1.5; color:var(--c, var(--sol-2)) }
.px-mf__q dd{ margin:0; font-family:var(--lee); font-size:1rem; line-height:1.5; color:#DCE3E6 }
.px-mf__q > div:last-child dd{ color:var(--papel); font-family:var(--sans); font-weight:600 }
@media (max-width:30rem){ .px-mf__q > div{ grid-template-columns:1fr } }

/* Ficha del proyecto: el lugar */
.px-viva__foto{ display:none }
.px-lugar{ position:relative; display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); align-items:center; gap:1.2rem;
  padding:clamp(1rem,2vw,1.4rem) clamp(1.3rem,2.6vw,2rem); border-bottom:1px solid rgba(244,242,238,.1);
  background:radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--noche-2) }
.px-lugar__svg{ display:block; width:100%; height:8.5rem; overflow:hidden }
.px-l{ fill:rgba(216,203,179,.06); stroke:rgba(216,203,179,.28); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round }
.px-l--on{ fill:color-mix(in srgb, var(--c) 30%, transparent); stroke:var(--c); stroke-width:1.5 }
.px-l__p{ fill:var(--c); stroke:var(--noche-hondo); stroke-width:2; vector-effect:non-scaling-stroke }
.px-l__o{ fill:none; stroke:var(--c); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.55; transform-box:fill-box; transform-origin:center }
@media (prefers-reduced-motion:no-preference){ .px-l__o{ animation:px-onda 2.8s var(--curva) infinite } }
.px-lugar__t{ display:grid; gap:.15rem; font-family:var(--sans) }
.px-lugar__t small{ font-size:.78rem; font-weight:650; color:var(--c) }
.px-lugar__t b{ font-size:clamp(1.05rem,.95rem + .4vw,1.3rem); font-weight:650; line-height:1.25; letter-spacing:-.01em; color:var(--papel); text-wrap:balance }
@media (max-width:26rem){ .px-lugar{ grid-template-columns:minmax(0,7.5rem) minmax(0,1fr); gap:.9rem } .px-lugar__svg{ height:6.5rem } }

/* Frentes: apagados sin texto; la leyenda, una vez */
.px-fr__l li[data-off]{ opacity:.75 }
.px-fr__ley{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.9rem; font-family:var(--sans); font-size:.76rem; font-weight:600; color:#8FA2A7 }
.px-fr__ley span{ display:inline-flex; align-items:center; gap:.45rem }
.px-fr__ley i{ display:inline-block; width:1.4rem; height:4px; border-radius:2px; background:rgba(244,242,238,.12) }
.px-fr__ley i[data-on]{ background:var(--c, var(--sol-2)) }

/* Sistemas: el enlace al concepto, en Método */
.px-sis__met{ margin-left:.4rem; font-weight:600; color:var(--c, var(--sol-2)); text-underline-offset:.2em; white-space:nowrap }
.px-sis__met:focus-visible{ outline:3px solid var(--sol-2); outline-offset:2px; border-radius:3px }

/* El lugar en datos: Observatorio */
.px-obs{ padding-top:1.3rem; border-top:1px solid rgba(244,242,238,.1) }
.px-obs__l{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.px-obs__l a{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--toque); padding:.75rem 1rem; border-radius:.75rem;
  color:inherit; text-decoration:none; background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px rgba(244,242,238,.1); transition:background .2s ease, box-shadow .2s ease }
.px-obs__l a:hover{ background:rgba(244,242,238,.09); box-shadow:inset 0 0 0 1px var(--c, var(--sol-2)) }
.px-obs__l a:focus-visible{ outline:3px solid var(--sol-2); outline-offset:3px }
.px-obs__l span{ display:grid; gap:.05rem; min-width:0 }
.px-obs__l b{ font-family:var(--sans); font-size:.98rem; font-weight:650; line-height:1.3; color:var(--papel) }
.px-obs__l small{ font-family:var(--sans); font-size:.8rem; color:#A9B9BD }
.px-obs__l .px-flecha{ color:var(--c, var(--sol-2)); transition:transform .25s var(--curva) }
.px-obs__l a:hover .px-flecha{ transform:translateX(3px) }
@media (prefers-reduced-motion:reduce){ .px-obs__l a, .px-obs__l .px-flecha{ transition:none } }

/* Con quién: el mapa de actores y su estado */
.pg-gob .px-gob__k{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; color:var(--sol-2) }
.px-estado{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .65rem; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.01em;
  color:#0E1726; background:var(--sol-2) }
.px-estado::before{ content:""; width:.42rem; height:.42rem; border-radius:50%; background:currentColor }
.px-gob .pg-cab__t{ text-wrap:balance }

/* Cierre: la pregunta de la página siguiente */
.salto__a--sig .salto__k{ text-align:right; justify-content:flex-end }
.px-datos .liga{ color:var(--papel); font-weight:600; text-decoration-color:var(--c, var(--sol-2)) }
.px-lugar__svg{ -webkit-mask-image:radial-gradient(farthest-side, #000 62%, transparent); mask-image:radial-gradient(farthest-side, #000 62%, transparent) }
.px-datos__mas{ display:block; margin-top:.35rem; font-size:.92rem; color:#C9D4D7 }