/* Conecta Comunidad · portada v32
   1. Qué somos (.q30): el velo baja para que la foto de cada parte (fin, condición, punto de partida) se vea al
      cambiar; el texto se sostiene con un velo solo detrás de la cabecera y con el vidrio de las placas.
   2. Un fin, cuatro frentes (.f30): el «para qué» de cada frente con el nombre del glosario, más visible; barras
      algo más bajas.
   3. Comunidades (.c32): seis en fila (entra Salud), con su acento.
   4. Proyectos (.p32): la ficha es una foto a sangre con el texto encima; la escala lleva el nombre y un medallón
      de cada proyecto; el mapa llega desde el país al entrar.
   5. Cómo se mide (.m32): la regla en tres pasos dibujados; el medidor y, al lado, el resultado en un panel.
   6. Observatorio (.o32): cifras de lo que ofrece, mapa con cuatro capas y la ficha de la región que se mira. */

/* ---------------------------------------------------------------- 1 · Qué somos */
.q29.q30::before{
  background:
    radial-gradient(ellipse 40% 27% at 50% 19%, rgba(244,242,238,.82) 0%, rgba(244,242,238,.6) 55%, rgba(244,242,238,0) 100%),
    linear-gradient(180deg, rgba(244,242,238,.62) 0%, rgba(244,242,238,.3) 30%, rgba(244,242,238,.04) 50%, rgba(244,242,238,.04) 72%, rgba(244,242,238,.78) 86%, rgba(244,242,238,.35) 100%) }
.q29.q30 .q30__lado p{ color:var(--tinta) }
.q29.q30 .q29__capa{ background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.8) }
.q29.q30 .q29__capa:hover{ background:rgba(255,255,255,.88) }
.q29.q30 .q29__capa[aria-selected="true"]{ background:var(--noche); border-color:var(--noche) }
.q29.q30 .q30__vidrio{ background:rgba(244,242,238,.78) }
.q29.q30 .q29__foto figcaption{ opacity:1; max-width:none; white-space:nowrap; color:var(--tinta); text-shadow:0 0 10px rgba(244,242,238,.95) }
.q29.q30 .puente31{ text-shadow:0 0 18px rgba(244,242,238,.95), 0 0 4px rgba(244,242,238,.8) }
/* la foto que entra se nota: fundido algo más corto y un leve acercamiento */
.q29.q30 .q29__foto{ transition:opacity .8s var(--curva), visibility 0s linear .8s }
.q29.q30 .q29__foto[data-on]{ transition:opacity .8s var(--curva), visibility 0s }
@media (max-width:63.99rem){
  .q29.q30::before{ background:
    linear-gradient(180deg, rgba(244,242,238,.84) 0%, rgba(244,242,238,.66) 34%, rgba(244,242,238,.2) 58%, rgba(244,242,238,.2) 82%, rgba(244,242,238,.6) 100%) }
}

/* ---------------------------------------------------------------- 2 · Frentes */
.f30 .barra25__s{ font-family:var(--lee); font-style:italic; font-size:clamp(1.02rem,.96rem + .25vw,1.16rem); color:var(--sol-2) }
.f30 .barra25__etq{ font-family:var(--sans); font-style:normal; font-size:.78rem; font-weight:600; color:#C9D4D7; letter-spacing:0 }
@media (min-width:72rem){
  .f30 .barras25{ height:clamp(26rem,58vh,31rem) }
}

/* ---------------------------------------------------------------- 3 · Comunidades: seis */
@media (min-width:64rem){
  .c32 .c29__lista{ grid-template-columns:repeat(var(--n,6), minmax(0,1fr)); gap:clamp(.9rem,1.6vw,1.6rem) }
  .c32 .c29__n{ font-size:clamp(1.2rem,.85rem + .85vw,1.75rem) }
  .c32 .c29__r{ font-size:.96rem }
}
.c32 .c29__regla i{ width:calc(100% / var(--n,6)) }

/* ---------------------------------------------------------------- 4 · Proyectos */
.p32 .p31__tab.p32__tab{ grid-template-columns:auto minmax(0,1fr); justify-items:start; align-items:center; gap:.6rem; text-align:left;
  padding:.45rem .5rem; font-size:.84rem }
.p32 .p32__tab i{ width:2.6rem; height:2.6rem; background:var(--noche) var(--mini) center / cover no-repeat;
  box-shadow:0 0 0 2px rgba(244,242,238,.35); filter:grayscale(.6) brightness(.8); transition:filter .4s ease, box-shadow .4s ease }
.p32.p31[data-paso] .p31__tab.p32__tab i{ background:var(--noche) var(--mini) center / cover no-repeat; box-shadow:0 0 0 2px rgba(244,242,238,.35) }
.p32.p31[data-paso] .p31__tab.p32__tab[aria-selected="true"] i{ filter:none; box-shadow:0 0 0 2.5px var(--sol), 0 0 0 6px rgba(217,164,65,.22) }
.p32 .p32__tt{ display:grid; gap:.05rem; min-width:0 }
.p32 .p32__te{ font-family:var(--sans); font-size:.76rem; font-weight:600; color:#AFC0C4 }
.p32 .p32__tn{ font-family:var(--lee); font-weight:400; font-size:1.02rem; line-height:1.15; color:#DCE3E6; overflow-wrap:anywhere }
.p32 .p32__tab[aria-selected="true"] .p32__tn{ color:var(--papel) }
.p32 .p32__tab[aria-selected="true"] .p32__te{ color:var(--sol-2) }
.p32 .p31__escala{ padding:.7rem .7rem .7rem; gap:.25rem }
.p32 .p31__escala::before,.p32 .p31__escala::after{ display:none }
.p32 .p31__lugar{ text-shadow:0 2px 14px rgba(6,17,31,.8) }
@media (min-width:64rem){ .p32 .p31__lugar{ font-size:clamp(1.25rem,1rem + .5vw,1.55rem) } }
.p32[data-intro] .p29__g{ transform:var(--z2); transition:none }
.p32[data-intro] :is(.p29__marca,.p29__foco){ opacity:0 }
.p32[data-intro] .p29__lugar span[data-on]{ opacity:0 }
.p32 .p29__g{ transition:transform 2s cubic-bezier(.65,.05,.25,1) }
/* la ficha: foto a sangre con el texto encima */
.p32 .p32__h{ position:relative; isolation:isolate; background:var(--noche); color:var(--papel) }
.p32 .p32__h .p31__txt{ color:var(--papel) }
.p32 .p32__h .p31__escala-t{ color:var(--sol-2) }
.p32 .p32__h .p29__ht{ color:var(--papel); font-size:clamp(2rem,1.4rem + 1.9vw,3.2rem) }
.p32 .p32__h .p29__sitio{ color:#DCE3E6 }
.p32 .p32__h .p29__d{ color:#E3EAEA; max-width:46ch }
.p32 .p32__h .p31__ir{ margin-top:.65rem }
@media (min-width:64rem){
  .p32.p31--js .p32__h:not([hidden]){ display:block }
  .p32.p31--js .p32__h .p31__foto{ position:absolute; inset:0; z-index:-2 }
  .p32.p31--js .p32__h::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(6,17,31,.05) 0%, rgba(6,17,31,.18) 36%, rgba(6,17,31,.78) 60%, rgba(6,17,31,.94) 100%) }
  .p32.p31--js .p32__h .p31__txt{ position:absolute; left:0; right:0; bottom:0; padding:clamp(1.4rem,2.6vw,2.25rem) }
}
@media (max-width:63.99rem){
  .p32 .p32__h .p31__txt{ background:var(--noche) }
  .p32 .p31__tab.p32__tab{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:.35rem }
  .p32 .p32__tab i{ width:2.2rem; height:2.2rem }
  .p32 .p32__tn{ font-size:.92rem }
}
@media (max-width:30rem){
  .p32 .p32__te{ display:none }
  .p32 .p32__tn{ font-size:.84rem }
}

/* ---------------------------------------------------------------- 5 · Cómo se mide */
.m32 .m29__entrada{ max-width:40ch }
.m32__pasos{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; counter-reset:paso }
.m32__pasos li{ counter-increment:paso; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; align-items:center;
  padding:.85rem 1rem; border-radius:1rem; background:rgba(6,17,31,.34); border:1px solid rgba(244,242,238,.1) }
.m32__gc{ position:relative; display:grid; place-items:center; width:3.6rem; height:3rem; border-radius:.7rem; background:rgba(244,242,238,.06) }
.m32__gc::before{ content:counter(paso); position:absolute; top:-.45rem; left:-.45rem; display:grid; place-items:center; width:1.35rem; height:1.35rem;
  border-radius:50%; background:var(--sol-2); color:var(--noche); font-family:var(--sans); font-size:.74rem; font-weight:700 }
.m32__g{ width:2.7rem; height:1.8rem; overflow:visible }
.m32__g rect{ fill:#6CBDB3 }
.m32__g .m32__g-v{ fill:rgba(244,242,238,.16) }
.m32__g .m32__g-b{ fill:var(--sol-2) }
.m32__g-l{ stroke:var(--sol-2); stroke-width:1.6 }
.m32__pt{ display:grid; gap:.15rem; font-family:var(--sans); font-size:.88rem; line-height:1.45; color:#C9D4D7 }
.m32__pt b{ font-size:1rem; font-weight:650; color:var(--papel) }
.m32 .m32__res{ padding:clamp(1.2rem,2.4vw,1.8rem); border-radius:1.25rem; background:rgba(6,17,31,.46);
  border:1px solid rgba(244,242,238,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.m32 .m32__res .m30__medidor{ margin-inline:auto }
.m32 .m32__res .ict__k{ text-align:center; width:100% }
.m32 .m32__nota{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgba(244,242,238,.12); max-width:none }
.m32 .m32__pie{ justify-content:flex-start; margin-top:clamp(1.5rem,3vw,2.25rem) }
@media (min-width:64rem){
  .m32 .ict.m32__rej{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-areas:"cab pasos" "aparato res"; align-items:stretch; row-gap:clamp(2rem,3.5vw,2.75rem) }
  .m32__cab{ grid-area:cab; align-self:center } .m32__pasos{ grid-area:pasos; align-self:center }
  .m32 .m29__aparato{ grid-area:aparato } .m32 .m32__res{ grid-area:res; display:flex; flex-direction:column; justify-content:center }
}
@media (min-width:40rem) and (max-width:63.99rem){
  .m32__pasos{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .m32__pasos li{ grid-template-columns:1fr; justify-items:start; align-items:start }
}

/* ---------------------------------------------------------------- 6 · Observatorio */
.o32.o31{ padding:clamp(1.4rem,3.5vw,3rem) }
.o32 .o32__puente{ max-width:58ch }
.o32__cab{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:end }
@media (min-width:64rem){ .o32__cab{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.o32__cifras{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem 1.5rem }
.o32__cifras li{ display:grid; gap:.2rem; align-content:start; padding-top:.8rem; border-top:1px solid rgba(244,242,238,.16) }
.o32__cifras b{ font-family:var(--sans); font-weight:600; font-size:clamp(2rem,1.5rem + 1.4vw,2.9rem); line-height:1; letter-spacing:-.035em; color:var(--papel); font-variant-numeric:tabular-nums }
.o32__cifras span{ font-family:var(--sans); font-size:.86rem; line-height:1.4; color:#C9D4D7 }
.o32__visor{ margin:clamp(1.75rem,3.5vw,2.5rem) 0 0; padding:clamp(1rem,2.4vw,1.75rem); border-radius:1.25rem;
  background:rgba(244,242,238,.035); border:1px solid rgba(244,242,238,.1) }
.o32__mando{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem }
.o32__k{ margin:0; font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--ac-lab) }
.o32__capas{ display:flex; flex-wrap:wrap; gap:.4rem }
.o32__capas[hidden]{ display:none }
.o32__capa{ appearance:none; min-height:var(--toque); padding:.45rem 1rem; border-radius:.75rem; border:1px solid rgba(244,242,238,.22);
  background:transparent; color:#DCE3E6; font-family:var(--sans); font-size:.9rem; font-weight:600; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease }
.o32__capa:hover{ background:rgba(244,242,238,.08); color:var(--papel) }
.o32__capa[aria-pressed="true"]{ background:var(--papel); color:var(--noche); border-color:var(--papel) }
.o32__capa:focus-visible{ outline:3px solid var(--sol); outline-offset:2px }
.o32__rej{ display:grid; gap:clamp(1.25rem,3vw,2.5rem); margin-top:clamp(1rem,2vw,1.5rem); align-items:start }
@media (min-width:56rem){ .o32__rej{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) } }
.o32__mapa{ display:grid; justify-items:center }
.o32 .o30__marco{ width:min(100%, calc(30rem * var(--arn))); margin-top:0 }
.o32 .o30__reg path[data-nivel="x"]{ fill:#2B3946; stroke:var(--noche-hondo) }
.o32 .o30__reg path{ transition:fill .5s ease, filter .25s ease }
.o32__ley{ width:min(100%,22rem); margin-top:1rem }
.o32__ley[hidden]{ display:none }
.o32__ley-t{ margin:0 0 .45rem; font-family:var(--sans); font-size:.8rem; font-weight:600; color:#C9D4D7; text-align:center }
.o32__cortes{ display:flex; justify-content:space-between; margin:.3rem 0 0; font-family:var(--sans); font-size:.74rem; color:#AFC0C4; font-variant-numeric:tabular-nums }
.o32__fuente{ margin:.55rem 0 0; font-family:var(--sans); font-size:.76rem; line-height:1.45; color:#AFC0C4; text-align:center }
.o32__fuente a{ color:#DCE3E6; text-underline-offset:.2em }
.o32__sin{ display:flex; align-items:center; gap:.45rem; margin:.5rem 0 0; font-family:var(--sans); font-size:.74rem; color:#AFC0C4 }
.o32__sin i{ display:block; width:1.1rem; height:.55rem; border-radius:2px; background:#2B3946; box-shadow:inset 0 0 0 1px rgba(244,242,238,.2) }
.o32__ficha{ padding:clamp(1.1rem,2.4vw,1.6rem); border-radius:1.1rem; background:var(--papel); color:var(--tinta);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.7) }
.o32__fk{ margin:0; font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--petroleo) }
.o32__nombre{ margin:.15rem 0 0; font-family:var(--lee); font-size:clamp(1.7rem,1.3rem + 1.1vw,2.3rem); line-height:1.1; color:var(--tinta) }
.o32__nota{ margin:.35rem 0 0; font-family:var(--sans); font-size:.84rem; line-height:1.45; color:var(--tinta-2); min-height:1.2em }
.o32__nota:empty{ display:none }
.o32__filas{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.2rem }
.o32__fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"n v" "b b" "p p"; gap:.3rem .8rem;
  padding:.7rem .7rem .6rem; border-radius:.75rem; transition:background .3s ease }
.o32__fila[data-on]{ background:rgba(20,80,79,.08) }
.o32__fn{ grid-area:n; font-family:var(--sans); font-size:.86rem; font-weight:600; line-height:1.35; color:var(--tinta) }
.o32__fv{ grid-area:v; font-family:var(--sans); font-size:1.15rem; font-weight:650; letter-spacing:-.01em; color:var(--tinta); font-variant-numeric:tabular-nums; white-space:nowrap }
.o32__fila[data-sin] .o32__fv{ font-size:.86rem; font-weight:600; color:var(--mudo) }
.o32__barra{ grid-area:b; position:relative; display:block; height:.5rem; border-radius:.25rem; background:rgba(14,23,38,.1) }
.o32__barra i{ position:absolute; inset:0 auto 0 0; width:calc(var(--x) * 100%); border-radius:.25rem; background:#3F8F8A; transition:width .6s var(--salida) }
.o32__fila[data-on] .o32__barra i{ background:var(--petroleo) }
.o32__barra s,.o32__ley-f s{ position:absolute; top:-.25rem; bottom:-.25rem; left:calc(var(--x) * 100%); width:2px; margin-left:-1px; background:var(--tinta); text-decoration:none }
.o32__fp{ grid-area:p; font-family:var(--sans); font-size:.76rem; color:var(--mudo) }
.o32__ley-f{ position:relative; margin:.8rem 0 0; padding-left:1rem; font-family:var(--sans); font-size:.76rem; color:var(--mudo) }
.o32__ley-f s{ --x:0; left:.2rem; top:.1rem; bottom:.1rem }
.o32__ir{ margin:.9rem 0 0 }
.o32__ir .liga{ color:var(--tinta) }
.o32__acc{ margin-top:clamp(1.5rem,3vw,2rem) }
@media (max-width:47.99rem){
  .o32__capas{ display:grid; grid-template-columns:1fr 1fr; width:100% }
  .o32__capa{ padding-inline:.6rem }
  .o32__cifras b{ font-size:1.9rem }
}

@media (prefers-reduced-motion:reduce){
  .q29.q30 .q29__foto,.o32__capa,.o32 .o30__reg path,.o32__fila,.o32__barra i,.p32 .p32__tab i,.p32 .p29__g{ transition:none !important }
  .p32[data-intro] .p29__g{ transform:var(--z0) }
}