/* Observatorio Conecta, capa v32: seis temas (personas, salud, educación, economía, servicios, gobernanza),
   la ficha regional con perfil de un vistazo, su lugar en cada tema, lectura y vecinas; el mapa del país con el modo
   «frente al Perú»; el marcador del comparador y «Lo que hay dentro» en la portada. Se apoya en v26, v27 y v30. */

/* ---------- Rampas de los temas nuevos (los slugs de v30 siguen definidos en v30) ---------- */
[data-tema="educacion"]{ --c0:#1B3346; --c1:#22505D; --c2:#2E7372; --c3:#6E9E8F; --c4:#D8CBB3 }
[data-tema="servicios"]{ --c0:#24433F; --c1:#2B5A4B; --c2:#4D7E52; --c3:#97AA6B; --c4:#E6D69B }
[data-tema="gobernanza"]{ --c0:#2B3452; --c1:#36406A; --c2:#56608F; --c3:#8D93B8; --c4:#CFCDE3 }
.pe-mm[data-tema="gobernanza"] .pe-mm__k{ color:var(--c1) }

/* Modo «frente al Perú»: mejor o peor (indicadores con sentido); por encima o por debajo (sin sentido) */
.obs{ --pe-mejor:#62B3A5; --pe-peor:#D9774A }
[data-c="b"]{ --cc:var(--pe-mejor) } [data-c="p"]{ --cc:var(--pe-peor) }
[data-c="e"]{ --cc:var(--c4) } [data-c="d"]{ --cc:var(--c1) } [data-c="i"]{ --cc:var(--piedra) }
.pe-ley--pais{ grid-template-columns:repeat(2,minmax(0,1fr)) auto }
.pe-ley[hidden]{ display:none }
.pe-modo[hidden]{ display:none }
.pe-modo input:checked + span{ background:rgba(216,203,179,.16); box-shadow:inset 0 0 0 1.5px var(--piedra) }
.pe-ficha__dif{ font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--piedra); margin:.1rem 0 0 }
.pe-ficha__dif[hidden]{ display:none }

/* Tabla completa: filtro por los temas nuevos */
.pe-tabla__t[data-ver="educacion"] [data-t]:not([data-t="educacion"]),
.pe-tabla__t[data-ver="servicios"] [data-t]:not([data-t="servicios"]),
.pe-tabla__t[data-ver="gobernanza"] [data-t]:not([data-t="gobernanza"]){ display:none }

/* ================================================================== FICHA · PERFIL DE UN VISTAZO */
.pe-res__cif--temas{ grid-template-columns:repeat(6,minmax(0,1fr)) }
.pe-res__cif--temas li{ border-left:0 }
.pe-res__cif--temas li + li{ border-left:1px solid rgba(244,242,238,.12) }
.pe-res__cif--temas em{ font-style:normal; font-family:var(--sans); font-size:.78rem; font-weight:650; color:#8FD0C9; margin-bottom:.2rem }
.pe-res__cif--temas b{ font-size:clamp(1.8rem,1.3rem + 1.3vw,2.6rem) }
.pe-res__cif--temas span{ font-size:.88rem }
@media (max-width:79.99rem){
  .pe-res__cif--temas{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .pe-res__cif--temas li + li{ border-left:1px solid rgba(244,242,238,.12) }
  .pe-res__cif--temas li:nth-child(3n+1){ border-left:0 }
  .pe-res__cif--temas li:nth-child(n+4){ border-top:1px solid rgba(244,242,238,.12) }
}
@media (max-width:47.99rem){
  .pe-res__cif--temas{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pe-res__cif--temas li, .pe-res__cif--temas li + li{ border-left:0 !important; border-top:0 }
  .pe-res__cif--temas li:nth-child(even){ border-left:1px solid rgba(244,242,238,.12) !important }
  .pe-res__cif--temas li:nth-child(n+3){ border-top:1px solid rgba(244,242,238,.12) }
}

.pe-res__dos{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.75rem,4vw,4rem); align-items:start; margin-top:clamp(2rem,4vw,3rem) }
.pe-res__dos > .pe-pos, .pe-res__dos > .pe-lec{ margin-top:0 }
@media (max-width:63.99rem){ .pe-res__dos{ grid-template-columns:minmax(0,1fr) } }

/* Su lugar en cada tema: una pista de 1.º a último por tema */
.pe-pos{ margin-top:clamp(2rem,4vw,3rem) }
.pe-pos__h, .pe-lec__h{ font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--papel); margin:0 0 .5rem }
.pe-pos__eje{ display:flex; justify-content:space-between; margin:0 0 .2rem calc(8.5rem + 1rem); margin-right:calc(15rem + 1rem); font-family:var(--sans); font-size:.72rem; color:var(--suave-claro) }
.pe-pos__l{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(244,242,238,.14) }
.pe-pos__f a{ display:grid; grid-template-columns:8.5rem minmax(0,1fr) 15rem; gap:1rem; align-items:center; padding:.85rem .2rem; border-bottom:1px solid rgba(244,242,238,.14);
  color:var(--papel); text-decoration:none; transition:background-color .2s ease }
.pe-pos__f a:hover{ background:rgba(244,242,238,.05) }
.pe-pos__f a:focus-visible{ outline:2px solid var(--piedra); outline-offset:-2px }
.pe-pos__t{ display:grid; font-family:var(--sans); font-weight:650; font-size:.98rem; line-height:1.2 }
.pe-pos__t small{ font-weight:400; font-size:.74rem; color:var(--suave-claro); margin-top:.15rem }
.pe-pos__pista{ position:relative; height:1.6rem; margin-inline:.55rem }
.pe-pos__pista::before{ content:""; position:absolute; left:-.55rem; right:-.55rem; top:50%; height:6px; margin-top:-3px; border-radius:3px;
  background:linear-gradient(90deg, rgba(98,179,165,.55), rgba(216,203,179,.22) 50%, rgba(217,119,74,.55)) }
.pe-pos__pista i, .pe-pos__pista b{ position:absolute; top:50%; left:var(--x); transform:translate(-50%,-50%); border-radius:50% }
.pe-pos__pista i{ width:.55rem; height:.55rem; background:var(--papel); opacity:.55 }
.pe-pos__pista b{ width:1.15rem; height:1.15rem; background:var(--obs-res-claro); box-shadow:0 0 0 3px var(--obs-hondo, #081A2C) }
.pe-pos__v{ font-family:var(--sans); font-size:.8rem; line-height:1.4; color:var(--suave-claro) }
.pe-pos__v b{ display:block; font-weight:650; font-size:.88rem; color:var(--papel) }
.pe-pos__nota{ font-family:var(--sans); font-size:.78rem; line-height:1.5; color:var(--suave-claro); max-width:68ch; margin:.8rem 0 0 }
@media (max-width:47.99rem){
  .pe-pos__eje{ margin-left:0; margin-right:0 }
  .pe-pos__f a{ grid-template-columns:minmax(0,1fr); gap:.45rem }
  .pe-pos__pista{ grid-row:3 }
  .pe-pos__v{ grid-row:2 }
}

/* Lo que dicen los datos (lectura) */
.pe-lec{ margin-top:clamp(2rem,4vw,3rem); padding:clamp(1.1rem,2.4vw,1.6rem); border-radius:12px; background:rgba(244,242,238,.06); box-shadow:inset 0 0 0 1px rgba(244,242,238,.12) }
.pe-lec__t{ font-family:var(--lee); font-size:clamp(1.02rem,.96rem + .3vw,1.15rem); line-height:1.6; color:#E7ECEE; margin:0; max-width:52ch }
.pe-lec__f{ font-family:var(--sans); font-size:.76rem; line-height:1.45; color:var(--suave-claro); margin:.8rem 0 0 }

/* ================================================================== FICHA · VECINAS */
.pe-vc .pe-tema__cab > div .antetitulo{ margin:0 0 var(--e-xs) }
.pe-vc__marco{ --obs-fondo-tabla:var(--papel) }
.pe-vc__t{ min-width:100% }
.pe-vc__t thead th{ vertical-align:bottom; font-size:.82rem; min-width:6.4rem; white-space:normal }
.pe-vc__t thead th a{ color:var(--tinta); text-decoration-color:var(--filete-firme); text-underline-offset:.18em }
.pe-vc__t thead th a:hover{ color:var(--petroleo) }
.pe-vc__t tbody th{ min-width:13rem; max-width:19rem; font-weight:600 }
.pe-vc__t tbody th a{ color:var(--tinta); text-decoration:none }
.pe-vc__t tbody th a:hover{ color:var(--petroleo); text-decoration:underline; text-underline-offset:.18em }
.pe-vc__t tbody th small{ display:block; font-weight:400; font-size:.74rem; color:var(--mudo); margin-top:.15rem }
.pe-vc__t td{ position:relative; vertical-align:middle }
.pe-vc__t td span{ display:block; font-variant-numeric:tabular-nums lining-nums }
.pe-vc__t td i{ display:block; height:4px; width:var(--w); max-width:100%; margin:.35rem 0 0 auto; border-radius:2px; background:rgba(20,80,79,.28) }
.pe-vc__t td sup{ font-size:.7em; margin-left:.1em; color:var(--mudo) }
.pe-vc__t .pe-vc__yo{ background:rgba(180,83,42,.07) }
.pe-vc__t thead .pe-vc__yo{ color:var(--obs-res) }
.pe-vc__t td.pe-vc__yo span{ font-weight:700; color:var(--obs-res) }
.pe-vc__t td.pe-vc__yo i{ background:var(--obs-res) }
.pe-vc__t td.pe-vc__mejor span{ font-weight:700; color:var(--petroleo) }
.pe-vc__t td.pe-vc__mejor i{ background:var(--petroleo) }
.pe-vc__t td.pe-vc__yo.pe-vc__mejor span{ color:var(--petroleo) }
.pe-vc__t .pe-vc__pe{ color:var(--mudo); border-left:1px solid var(--filete) }
.pe-vc__t td.sd{ color:var(--mudo); font-size:.82em }
.pe-vc__nota{ margin-top:var(--e-sm) }
.pe-vc__acc{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; margin-top:var(--e-md); padding-top:var(--e-sm); border-top:1px solid var(--filete) }
.pe-vc__k{ font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--tinta); margin:0 }
.pe-vc__acc ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem 1.2rem }
.pe-vc__acc a{ font-family:var(--sans); font-size:.88rem; color:var(--petroleo); text-underline-offset:.2em; text-decoration-thickness:1px }
.pe-vc__acc a:hover{ text-decoration-thickness:2px }

/* Puntos de las vecinas en las pistas de cada tema */
.obs-pf__pista i.pe-vec{ opacity:1; background:var(--papel); box-shadow:inset 0 0 0 2.5px var(--petroleo), 0 0 0 2px var(--papel) }
.pe-tema.banda--niebla .obs-pf__pista i.pe-vec{ background:var(--niebla); box-shadow:inset 0 0 0 2.5px var(--petroleo), 0 0 0 2px var(--niebla) }

/* Cabecera de cada tema: texto y resumen */
.pe-tema__txt{ display:grid; gap:.6rem }
.pe-tema__txt .entrada{ margin:0; font-size:1rem }
.pe-tema__res{ font-family:var(--sans); font-size:.88rem; font-weight:600; line-height:1.45; color:var(--petroleo); margin:0 }
.pe-ancla{ display:block; position:relative; top:calc(-1 * (var(--alto-nav) + 4rem)); height:0; visibility:hidden }

/* ================================================================== COMPARADOR · MARCADOR */
.pe-comp__vec{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:var(--e-sm) 0 0 }
.pe-comp__vec[hidden]{ display:none }
.pe-comp__veck{ font-family:var(--sans); font-size:.84rem; color:var(--mudo); margin-right:.2rem }
.pe-comp__vec button{ font:inherit; font-family:var(--sans); font-size:.84rem; font-weight:600; color:var(--tinta); background:transparent; border:0; min-height:2.4rem; padding:0 .85rem;
  border-radius:999px; box-shadow:inset 0 0 0 1px var(--filete-firme); cursor:pointer }
.pe-comp__vec button:hover{ box-shadow:inset 0 0 0 1px var(--obs-res) }
.pe-comp__vec button[aria-pressed="true"]{ background:var(--obs-res); color:var(--blanco); box-shadow:none }
.pe-comp__vec button:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px }
.pe-cres{ margin:var(--e-md) 0 var(--e-md); padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.8rem); border-radius:12px; background:var(--blanco); box-shadow:0 1px 0 var(--filete), 0 12px 30px -24px rgba(10,26,47,.5) }
.pe-cres__t{ font-family:var(--sans); font-size:clamp(1.02rem,.95rem + .35vw,1.2rem); font-weight:500; line-height:1.4; color:var(--tinta); margin:0 0 var(--e-sm) }
.pe-cres__t b{ font-weight:700 }
.pe-cres__q{ font-weight:700 }
.pe-cres__q.a{ color:var(--petroleo) } .pe-cres__q.b{ color:var(--obs-res) }
.pe-cres__l{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.pe-cres__l li{ display:grid; grid-template-columns:7.5rem minmax(0,1fr) 4.5rem; gap:.9rem; align-items:center; font-family:var(--sans) }
.pe-cres__l li.vacio{ opacity:.45 }
.pe-cres__l li[hidden]{ display:none }
.pe-cres__k{ font-size:.88rem; font-weight:600; color:var(--tinta) }
.pe-cres__b{ display:flex; height:.75rem; border-radius:4px; overflow:hidden; background:var(--filete) }
.pe-cres__b i{ display:block; width:var(--w); height:100%; transition:width .4s var(--curva) }
.pe-cres__b i.a{ background:#14504F } .pe-cres__b i.b{ background:#B4532A } .pe-cres__b i.e{ background:var(--piedra) }
.pe-cres__n{ display:flex; justify-content:space-between; font-size:.88rem; font-variant-numeric:tabular-nums }
.pe-cres__n b.a{ color:var(--petroleo) } .pe-cres__n b.b{ color:var(--obs-res) }
.pe-cres__nota{ font-family:var(--sans); font-size:.78rem; line-height:1.5; color:var(--mudo); margin:var(--e-sm) 0 0; max-width:72ch }
@media (max-width:47.99rem){ .pe-cres__l li{ grid-template-columns:6.2rem minmax(0,1fr) 3.6rem; gap:.6rem } }
@media (prefers-reduced-motion:reduce){ .pe-cres__b i{ transition:none } }

/* ================================================================== PORTADA · LO QUE HAY DENTRO */
.pe-dentro{ padding-block:clamp(3.5rem,7vw,6rem) clamp(1rem,3vw,2rem) }
.pe-dentro__cab{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--e-sm) clamp(2rem,5vw,5rem); align-items:end; margin-bottom:var(--e-md) }
.pe-dentro__h{ font-family:var(--sans); font-weight:650; font-size:clamp(2rem,1.3rem + 2.4vw,3.3rem); letter-spacing:-.03em; line-height:1.02; margin:0; color:var(--tinta) }
.pe-dentro__cab .entrada{ margin:0; font-size:1.02rem }
.pe-dentro__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--filete-firme) }
.pe-dentro__l li + li{ border-left:1px solid var(--filete) }
.pe-dentro__l a{ display:grid; gap:.3rem; align-content:start; height:100%; box-sizing:border-box; padding:clamp(1.1rem,2.4vw,1.6rem) clamp(.9rem,2vw,1.4rem) clamp(1.2rem,2.4vw,1.7rem);
  color:var(--tinta); text-decoration:none; transition:background-color .2s ease }
.pe-dentro__l a:hover{ background:rgba(20,80,79,.05) }
.pe-dentro__l a:focus-visible{ outline:2px solid var(--petroleo); outline-offset:-2px }
.pe-dentro__l b{ font-family:var(--lee); font-weight:500; font-size:clamp(2.4rem,1.8rem + 2vw,3.4rem); line-height:1.12; margin-bottom:.2rem; letter-spacing:-.02em; color:var(--petroleo); font-variant-numeric:lining-nums }
.pe-dentro__l span{ font-family:var(--sans); font-weight:650; font-size:1rem; line-height:1.3 }
.pe-dentro__l small{ font-family:var(--sans); font-size:.84rem; line-height:1.45; color:var(--mudo) }
@media (max-width:63.99rem){
  .pe-dentro__cab{ grid-template-columns:minmax(0,1fr) }
  .pe-dentro__l{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pe-dentro__l li:nth-child(3){ border-left:0 }
  .pe-dentro__l li:nth-child(n+3){ border-top:1px solid var(--filete) }
}
@media (max-width:29.99rem){
  .pe-dentro__l{ grid-template-columns:minmax(0,1fr) }
  .pe-dentro__l li + li{ border-left:0; border-top:1px solid var(--filete) }
}
@media (max-width:47.99rem){
  .pe-vc__t tbody th{ min-width:8.6rem; max-width:10.5rem; font-size:.86rem }
  .pe-vc__t thead th{ min-width:5.6rem; font-size:.78rem }
}

/* v32 · Notas de método visibles y datos solo de ficha */
.pe-mapa__met{ font-family:var(--sans); font-size:.8rem; line-height:1.45; color:var(--suave-claro); max-width:62ch; margin:.25rem 0 0 }
.pe-mapa__met[hidden]{ display:none }
.pe-pf__met{ font-family:var(--sans); font-size:.78rem; line-height:1.45; color:var(--tinta-2, #34404F); margin:.35rem 0 0; max-width:52ch }
.pe-pf__met b{ font-weight:650 }
.pe-sf{ margin-top:var(--e-md); padding-top:var(--e-sm); border-top:1px solid var(--filete) }
.pe-sf__h{ font-family:var(--sans); font-size:1rem; font-weight:650; color:var(--tinta); margin:0 0 .2rem }
.pe-sf__i{ font-family:var(--sans); font-size:.82rem; color:var(--mudo); margin:0 0 .6rem }
.pe-sf ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.8rem 2rem }
.pe-sf li{ padding:.7rem 0; border-bottom:1px solid var(--filete); scroll-margin-top:calc(var(--alto-nav) + 4.5rem) }
.pe-sf__k{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; margin:0; font-family:var(--sans) }
.pe-sf__k span{ flex:1 1 100%; font-size:.9rem; font-weight:600; color:var(--tinta) }
.pe-sf__k span i{ font-style:normal; font-weight:400; font-size:.78rem; color:var(--mudo) }
.pe-sf__k b{ font-family:var(--lee); font-weight:500; font-size:1.6rem; line-height:1.15; color:var(--tinta-2, #34404F) }
.pe-sf__k small{ font-size:.8rem; color:var(--mudo) }
.pe-sf__n{ font-family:var(--sans); font-size:.8rem; line-height:1.5; color:var(--mudo); margin:.3rem 0 0 }
.pe-sf__n a{ color:var(--petroleo); text-underline-offset:.18em }
[data-tema="ambiente"]{ --c0:#2A3A2C; --c1:#36502F; --c2:#5E7A3A; --c3:#A3B060; --c4:#E8E0A8 }
.pe-tabla__t[data-ver="ambiente"] [data-t]:not([data-t="ambiente"]){ display:none }

/* v32 · Las 27 fichas en siluetas: contorno claro para que las regiones oscuras (Callao) se lean sobre el fondo,
   Lima sin dato con relleno tenue y Lima Metropolitana y Lima Provincias marcadas sobre la silueta de Lima */
.pe-ri__l li[data-c] svg use{ stroke:rgba(216,203,179,.5); stroke-width:1.2; vector-effect:non-scaling-stroke; paint-order:stroke }
.pe-ri__l li[data-c="x"] svg{ fill:rgba(216,203,179,.13); stroke:none; stroke-dasharray:none }
.pe-ri__l li[data-c="x"] svg use{ stroke:rgba(216,203,179,.55); stroke-dasharray:none }
.pe-ri__l li[data-c] svg use.pe-ri__base{ fill:rgba(216,203,179,.14) }
.pe-ri__l li[data-c] svg circle.pe-ri__pt{ fill:var(--cc); stroke:var(--papel); stroke-width:1.6; vector-effect:non-scaling-stroke }
.pe-ri__l li[data-c] svg circle.pe-ri__hueco{ fill:var(--obs-hondo, #081A2C); stroke:rgba(216,203,179,.7); stroke-width:1.4; vector-effect:non-scaling-stroke }
.pe-ri__l a:hover svg use.pe-ri__base{ fill:rgba(216,203,179,.22) }

/* v32 · Pista de desplazamiento también en pantallas anchas: aviso, degradado en el borde derecho y sombra en la columna fija */
@media (min-width:48rem){
  .obs-tabla-marco.con-desborde .obs-desliza{ display:flex; align-items:center; gap:.4rem; justify-content:flex-end; margin:0 0 .35rem;
    font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--petroleo) }
  .obs-tabla-marco.con-desborde .obs-desliza::after{ content:""; width:.45rem; height:.45rem; border-right:1.6px solid currentColor; border-top:1.6px solid currentColor; transform:rotate(45deg) }
  .obs-tabla-marco.con-desborde::after{ content:""; position:absolute; top:2.2rem; right:0; bottom:0; width:4rem; pointer-events:none; z-index:2;
    background:linear-gradient(to right, rgba(230,235,235,0), var(--obs-fondo-tabla, var(--papel)) 80%); transition:opacity .2s ease }
  .obs-tabla-marco.con-desborde.al-final::after{ opacity:0 }
  .obs-tabla-marco.con-desborde .obs-tabla tbody th, .obs-tabla-marco.con-desborde .obs-tabla thead th:first-child{ box-shadow:6px 0 8px -6px rgba(10,26,47,.25) }
}
@media (prefers-reduced-motion:reduce){ .obs-tabla-marco::after{ transition:none } }