/* Observatorio Conecta, capa v30: el país por regiones.
   Portada nacional (apertura con el Perú, mapas pequeños por indicador, las regiones como siluetas, el piloto del Cusco),
   /observatorio/peru/ (mapa por tema e indicador, ranking, comparador, tabla, diccionario) y la ficha de cada región.
   Se apoya en v26 y v27 (prefijo obs-); lo nuevo lleva prefijo pe-. Sin JS todo se lee: los controles aparecen
   solo cuando hay JS (.obs-js) y el movimiento solo si no se pidió reducirlo (.obs-anim). */

/* ---------- Rampas por tema: cinco tramos de oscuro a claro, legibles sobre noche ---------- */
.obs{ --c0:#1B3346; --c1:#22505D; --c2:#2E7372; --c3:#6E9E8F; --c4:#D8CBB3; --cx:rgba(216,203,179,.07) }
[data-tema="personas"]{ --c0:#25384F; --c1:#34506A; --c2:#5A7A8E; --c3:#9DB1B5; --c4:#E6DCC9 }
[data-tema="escuela"]{ --c0:#1B3346; --c1:#22505D; --c2:#2E7372; --c3:#6E9E8F; --c4:#D8CBB3 }
[data-tema="salud"]{ --c0:#3E2F42; --c1:#5E3634; --c2:#985035; --c3:#D07E4E; --c4:#F2BC92 }
[data-tema="economia"]{ --c0:#313B2F; --c1:#46552F; --c2:#76803D; --c3:#B6A658; --c4:#EBD59A }
[data-tema="territorio"]{ --c0:#24433F; --c1:#2B5A4B; --c2:#4D7E52; --c3:#97AA6B; --c4:#E6D69B }
[data-tema="estado"]{ --c0:#2B3452; --c1:#36406A; --c2:#56608F; --c3:#8D93B8; --c4:#CFCDE3 }
[data-tema="confianza"]{ --c0:#422A34; --c1:#5B2E3A; --c2:#8A4150; --c3:#C0707A; --c4:#EDB7B3 }
[data-c="0"]{ --cc:var(--c0) } [data-c="1"]{ --cc:var(--c1) } [data-c="2"]{ --cc:var(--c2) }
[data-c="3"]{ --cc:var(--c3) } [data-c="4"]{ --cc:var(--c4) } [data-c="x"]{ --cc:var(--cx) }

.pe-simbolos{ position:absolute; width:0; height:0; overflow:hidden }

/* ================================================================== APERTURA NACIONAL */
.pe-h0__fig{ align-self:center }
.pe-h0__mapa{ width:100%; max-width:27rem; max-height:calc(100vh - 10rem); height:auto; display:block; overflow:visible }
.pe-h0__regs{ filter:drop-shadow(0 0 1.5px rgba(244,242,238,.5)) drop-shadow(0 26px 36px rgba(0,0,0,.55)) }
.pe-h0__regs path, .pe-h0__regs circle{ fill:rgba(244,242,238,.1); stroke:rgba(244,242,238,.4); stroke-width:1.2; stroke-linejoin:round; transition:fill .3s ease }
.pe-h0__regs .sobre{ fill:rgba(240,180,138,.8) }
.pe-h0__regs path:hover{ fill:rgba(244,242,238,.22) }
.pe-h0__regs .sobre:hover{ fill:var(--obs-res-claro) }
.pe-h0 .obs-h0__t{ max-width:13ch }
.pe-h0 .obs-h0__fig figcaption i{ background:rgba(240,180,138,.85) }
.obs-anim .pe-h0__regs .sobre{ animation:pe-encender .9s var(--obs-ease) both; animation-delay:.35s }
@keyframes pe-encender{ from{ fill:rgba(244,242,238,.1) } }

/* ================================================================== CAPÍTULO 1 · EL PAÍS EN MAPAS (múltiplos pequeños) */
.pe-mms{ background:var(--papel) }
.pe-mms__cab{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--e-sm) clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(2rem,4vw,3.25rem) }
.pe-mms__cab .obs-cap{ grid-column:1 / -1; margin:0 }
.pe-mms__h{ font-family:var(--sans); font-weight:650; font-size:clamp(2.1rem,1.3rem + 2.8vw,3.8rem); line-height:1.02; letter-spacing:-.03em; color:var(--tinta); text-wrap:balance; margin:0 }
.pe-mms__cab .entrada{ margin:0; font-size:1.02rem }
.pe-mms__ley{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-family:var(--sans); font-size:.78rem; color:var(--mudo) }
.pe-mms__ley i{ width:1.6rem; height:.7rem; border-radius:2px; background:var(--cc) }
.pe-mms__ley i[data-c="x"]{ margin-left:.9rem; background:var(--noche); box-shadow:inset 0 0 0 1px rgba(216,203,179,.35) }
.pe-mms__ley span:first-child{ margin-right:.2rem }
.pe-mms__ley span:nth-of-type(2){ margin-left:.2rem }
.pe-mms__l{ list-style:none; margin:0; padding:clamp(1.5rem,3vw,2.25rem) 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(9.6rem,1fr)); gap:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem);
  border-top:1px solid var(--filete-firme) }
.pe-mm__k{ font-family:var(--sans); font-size:.76rem; font-weight:700; color:var(--c2); margin-bottom:.2rem }
.pe-mm[data-tema="personas"] .pe-mm__k, .pe-mm[data-tema="estado"] .pe-mm__k{ color:var(--c1) }
.pe-mm a{ display:grid; gap:.3rem; text-decoration:none; color:var(--tinta); border-radius:var(--r-md, 10px) }
.pe-mm__svg{ display:block; width:100%; height:auto; aspect-ratio:.86; padding:.9rem .9rem .7rem; box-sizing:border-box; background:var(--noche); border-radius:var(--r-md, 10px);
  stroke:var(--noche); stroke-width:2; stroke-linejoin:round; transition:transform .25s var(--obs-ease), box-shadow .25s ease }
.pe-mm__svg use, .pe-mm__svg circle, .obs-ar__g .pe-mm__svg use, .obs-ar__g .pe-mm__svg circle{ fill:var(--cc, var(--cx)) }
.pe-mm a:hover .pe-mm__svg{ transform:translateY(-3px); box-shadow:0 14px 28px -14px rgba(10,26,47,.55) }
.pe-mm a:focus-visible{ outline:2px solid var(--petroleo); outline-offset:4px }
.pe-mm__t{ font-family:var(--sans); font-weight:650; font-size:.95rem; line-height:1.3; margin-top:.35rem }
.pe-mm__d, .pe-mm__x{ font-family:var(--sans); font-size:.78rem; line-height:1.4; color:var(--mudo) }
.pe-mm__x{ color:var(--tinta-2) }
.pe-mms__fin{ margin-top:var(--e-lg) }
@media (prefers-reduced-motion:reduce){ .pe-mm__svg{ transition:none } .pe-mm a:hover .pe-mm__svg{ transform:none } }

/* ================================================================== CAPÍTULO 2 · LAS REGIONES COMO SILUETAS */
.pe-ri{ background:radial-gradient(60% 70% at 85% 10%, rgba(20,80,79,.35), transparent 70%), var(--obs-hondo) }
.pe-ri__cab{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--e-sm) clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(2rem,4vw,3.25rem) }
.pe-ri__cab .obs-cap{ grid-column:1 / -1; margin:0 }
.pe-ri__h{ font-family:var(--sans); font-weight:650; font-size:clamp(2.1rem,1.3rem + 2.8vw,3.8rem); line-height:1.02; letter-spacing:-.03em; color:var(--papel); text-wrap:balance; margin:0 }
.pe-ri__cab .entrada{ margin:0; color:#DCE3E6; font-size:1.02rem }
.pe-ri__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(7.4rem,1fr)); gap:clamp(.4rem,1vw,.75rem) }
.pe-ri__l a{ display:grid; justify-items:center; gap:.5rem; padding:.9rem .5rem .8rem; border-radius:var(--r-md, 10px); text-decoration:none; color:#DCE3E6;
  font-family:var(--sans); font-size:.86rem; font-weight:600; line-height:1.25; text-align:center; transition:background-color .2s ease, color .2s ease }
.pe-ri__l svg{ width:100%; max-width:5.2rem; aspect-ratio:1; height:auto; display:block; fill:#7FA3A3; stroke:none; transition:fill .25s ease, transform .3s var(--obs-ease) }
.pe-ri__l svg circle{ fill:#7FA3A3 }
.pe-ri__l svg .pe-ri__aro{ fill:none; stroke:rgba(216,203,179,.45); stroke-width:1.5 }
.pe-ri__l a:hover, .pe-ri__l a:focus-visible{ background:rgba(244,242,238,.06); color:var(--papel) }
.pe-ri__l a:hover svg, .pe-ri__l a:focus-visible svg{ fill:var(--obs-res-claro); transform:scale(1.06) }
.pe-ri__l a:hover svg circle{ fill:var(--obs-res-claro) }
.pe-ri__l a:focus-visible{ outline:2px solid var(--piedra); outline-offset:-2px }
@media (prefers-reduced-motion:reduce){ .pe-ri__l svg{ transition:none } .pe-ri__l a:hover svg{ transform:none } }

/* ================================================================== CAPÍTULO 3 · EL PILOTO DEL CUSCO */
.pe-cus{ padding-block:clamp(5rem,9vw,7.5rem) }
.pe-cus__in{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:center }
.pe-cus__h{ font-family:var(--sans); font-weight:650; font-size:clamp(2.1rem,1.3rem + 2.8vw,3.8rem); line-height:1.02; letter-spacing:-.03em; color:var(--papel); text-wrap:balance; margin:0 0 var(--e-sm) }
.pe-cus .entrada{ color:#DCE3E6 }
.pe-cus__dato{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.4rem 1.25rem; align-items:center; margin-top:var(--e-md); padding-top:var(--e-sm); border-top:1px solid rgba(244,242,238,.16) }
.pe-cus__dato .obs-h0__n{ margin:0; white-space:nowrap }
.pe-cus__r{ font-size:1rem; line-height:1.5; color:#E1E8EA; max-width:40ch; margin:0 }
.pe-cus__acc{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--e-md) }
.pe-cus__acc .boton{ max-width:100%; white-space:normal; text-align:left }
.pe-cus__fig{ margin:0; display:grid; gap:.75rem; justify-items:center }
.pe-cus__fig .obs-h0__mapa{ max-width:32rem }
.pe-cus__fig figcaption{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.82rem; color:#DCE3E6 }
.pe-cus__fig figcaption i{ width:1rem; height:.65rem; border-radius:2px; background:rgba(240,180,138,.85) }

/* Puerta «Perú por regiones» en Qué publica */
.obs-ar .obs-ar__g > svg.pe-mm__svg{ width:auto; height:5.5rem; max-width:100%; padding:0; background:none; stroke:var(--obs-hondo); stroke-width:2; aspect-ratio:auto; fill:none }
.obs-ar .obs-ar__a:hover .pe-mm__svg{ transform:none; box-shadow:none }

/* ================================================================== /observatorio/peru/ · CABECERA */
.pe-cab__acc{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--e-sm) }

/* ================================================================== MAPA DEL PAÍS */
.pe-mapa{ background:var(--noche) }
.pe-mapa__cab{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--e-sm) clamp(2rem,5vw,5rem); align-items:end; margin-bottom:var(--e-md) }
.pe-mapa__cab .antetitulo{ margin:0 0 var(--e-xs) }
.pe-mapa__cab .entrada{ color:#DCE3E6; font-size:1rem; margin:0 }
.obs-js .pe-ctrl{ display:grid }
.pe-ctrl{ gap:.85rem; margin-bottom:var(--e-md); padding-bottom:var(--e-md); border-bottom:1px solid var(--filete-oscuro) }
.pe-ctrl[hidden]{ display:none !important }
.pe-ctrl fieldset{ border:0; margin:0; padding:0; min-width:0 }
.pe-ctrl legend{ float:left; width:6.5rem; padding:.7rem 0 0; font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--suave-claro) }
.pe-temas__l, .pe-inds__g{ display:flex; flex-wrap:wrap; gap:.45rem; margin-left:6.5rem }
.pe-ctrl label{ position:relative; display:inline-flex }
.pe-ctrl input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.pe-ctrl label span{ display:inline-flex; align-items:center; gap:.45rem; min-height:2.75rem; padding:0 1.05rem; border-radius:999px; font-family:var(--sans); font-size:.9rem; font-weight:600; line-height:1.2;
  color:var(--papel); box-shadow:inset 0 0 0 1px var(--filete-piedra); transition:background-color .2s ease, color .2s ease, box-shadow .2s ease }
.pe-temas span small{ font-size:.72rem; font-weight:700; color:var(--suave-claro); font-variant-numeric:tabular-nums }
.pe-ctrl input:hover + span{ box-shadow:inset 0 0 0 1px var(--piedra) }
.pe-temas input:checked + span{ background:var(--piedra); color:var(--noche); box-shadow:none }
.pe-temas input:checked + span small{ color:var(--petroleo) }
.pe-inds input:checked + span{ background:rgba(216,203,179,.16); box-shadow:inset 0 0 0 1.5px var(--piedra) }
.pe-ctrl input:focus-visible + span{ outline:2px solid var(--piedra); outline-offset:3px }
.pe-inds__g[hidden]{ display:none }

.pe-mapa__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,4rem); align-items:start }
.pe-mapa__fig{ margin:0; display:grid; gap:var(--e-sm); position:relative }
@media (min-width:64rem){ .pe-mapa__fig{ position:sticky; top:calc(var(--alto-nav) + 1rem) } }
.pe-mapa__tit{ display:grid; gap:.25rem }
.pe-mapa__t{ font-family:var(--sans); font-weight:650; font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem); line-height:1.15; letter-spacing:-.015em; color:var(--papel); margin:0; text-wrap:balance }
.pe-mapa__p{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin:0; font-family:var(--sans); font-size:.84rem; color:var(--suave-claro) }
.pe-mapa__p [data-m="s"]{ color:var(--piedra); font-weight:650 }
.pe-mapa__p [hidden]{ display:none }
.pe-svg{ display:block; width:100%; height:auto; max-height:min(76vh,46rem); margin-inline:auto; overflow:visible }
.pe-reg{ cursor:pointer }
.pe-reg path{ fill:var(--cc, var(--cx)); stroke:var(--noche); stroke-width:1.1; stroke-linejoin:round; transition:fill .35s ease }
.pe-reg[data-c="x"] path{ stroke:rgba(216,203,179,.28); stroke-dasharray:3 3 }
.pe-reg:hover path{ filter:brightness(1.14) }
.pe-reg:focus{ outline:none }
.pe-reg--punto circle{ fill:var(--cc, var(--cx)); stroke:var(--papel); stroke-width:1.5; transition:fill .35s ease }
.pe-reg--punto line{ stroke:rgba(216,203,179,.55); stroke-width:1 }
.pe-reg--punto text{ font-family:var(--sans); font-size:13px; font-weight:650; fill:var(--suave-claro); text-anchor:end; dominant-baseline:middle }
.pe-reg--punto[aria-current] text{ fill:var(--papel) }
.pe-sel{ fill:none; stroke:var(--papel); stroke-width:2.6; stroke-linejoin:round; pointer-events:none }
.pe-sel.foco{ stroke:#FFFFFF; stroke-width:4 }
.pe-rotsel{ font-family:var(--sans); font-size:14px; font-weight:700; fill:var(--papel); text-anchor:middle; dominant-baseline:middle; pointer-events:none;
  paint-order:stroke; stroke:rgba(6,17,31,.9); stroke-width:4px; stroke-linejoin:round }
.pe-mapa__ley{ display:grid; gap:.4rem; max-width:34rem }
.pe-ley__t{ font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--piedra); margin:0 }
.pe-ley__t span:empty{ display:none }
.pe-ley{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:3px }
.pe-ley li{ display:grid; gap:.3rem; align-content:start; font-family:var(--sans); font-size:.74rem; color:var(--suave-claro); line-height:1.3 }
.pe-ley li[hidden]{ display:none }
.pe-ley__sd{ padding-left:.6rem }
.pe-m{ display:block; height:.6rem; border-radius:1px; background:var(--cc); transition:background-color .3s ease }
.pe-m[data-c="x"]{ width:1.6rem; background:transparent; box-shadow:inset 0 0 0 1px rgba(216,203,179,.4) }
.pe-mapa__fig .obs-fte{ margin-top:0 }

/* Ficha corta: en escritorio flota sobre el océano, abajo a la izquierda del mapa */
.pe-mapa__lienzo{ position:relative }
.pe-ficha{ display:grid; gap:.25rem; padding:var(--e-sm) 0 0; border-top:1px solid var(--filete-piedra); margin-top:var(--e-sm) }
@media (min-width:48rem){
  .pe-ficha{ position:absolute; left:0; bottom:3%; width:min(15.5rem, 34%); margin:0; padding:var(--e-sm) 0 0; background:linear-gradient(rgba(10,26,47,0), rgba(10,26,47,.0)) }
}
.pe-ficha__k{ font-family:var(--sans); font-size:.76rem; color:var(--suave-claro); margin:0 }
.pe-ficha__n{ font-family:var(--lee); font-weight:500; font-size:clamp(1.45rem,1.2rem + .9vw,1.9rem); line-height:1.1; color:var(--papel); margin:0 }
.pe-ficha__v{ font-family:var(--sans); color:#DCE3E6; margin:.3rem 0 0 }
.pe-ficha__v b{ font-family:var(--lee); font-weight:500; font-size:clamp(2.2rem,1.7rem + 1.6vw,3rem); line-height:1; color:var(--c4); letter-spacing:-.02em; margin-right:.25rem; font-variant-numeric:tabular-nums lining-nums }
.pe-ficha__r, .pe-ficha__nac{ font-family:var(--sans); font-size:.84rem; color:var(--suave-claro); margin:0 }
.pe-ficha__nac[hidden]{ display:none }
.pe-ficha__a{ justify-self:start; display:inline-block; line-height:1.3; margin-top:.5rem; padding:.72rem 1.1rem; border-radius:999px; background:var(--piedra); color:var(--noche);
  font-family:var(--sans); font-weight:650; font-size:.88rem; text-decoration:none; transition:background-color .2s ease }
.pe-ficha__a:hover{ background:var(--papel) }
.pe-ficha__a:focus-visible{ outline:2px solid var(--papel); outline-offset:3px }
.obs-anim .pe-ficha [data-f]{ transition:opacity .15s ease }
.pe-ficha.cambia [data-f]{ opacity:.35 }

.pe-mapa__lado{ display:grid; gap:var(--e-md); align-content:start }
.pe-rk__t{ font-family:var(--sans); font-size:.9rem; font-weight:650; color:var(--piedra); margin:0 0 .5rem }
.pe-rk__l{ list-style:none; margin:0; padding:0; border-top:1px solid var(--filete-oscuro) }
.pe-rk__l a{ display:grid; grid-template-columns:1.9rem minmax(6.5rem,9rem) minmax(0,1fr) minmax(4.6rem,auto); gap:.65rem; align-items:center; min-height:2.2rem;
  padding:.1rem .4rem; border-bottom:1px solid var(--filete-oscuro); color:var(--papel); text-decoration:none; font-family:var(--sans); font-size:.86rem; transition:background-color .15s ease }
.pe-rk__l a:hover, .pe-rk__l li.on a{ background:rgba(216,203,179,.09) }
.pe-rk__l li.on .pe-rk__n{ font-weight:700 }
.pe-rk__l a:focus-visible{ outline:2px solid var(--piedra); outline-offset:-2px }
.pe-rk__p{ font-size:.76rem; font-weight:700; color:var(--suave-claro); font-variant-numeric:tabular-nums; text-align:right }
.pe-rk__l li.sd .pe-rk__p{ font-weight:500; font-size:.7rem }
.pe-rk__l li.sd a{ color:var(--suave-claro) }
.pe-rk__b{ height:.55rem; background:rgba(216,203,179,.07); border-radius:1px; overflow:hidden }
.pe-rk__b i{ display:block; height:100%; background:var(--cc); border-radius:1px }
.obs-anim .pe-rk__b i{ transition:width .45s var(--obs-ease), background-color .3s ease }
.pe-rk__v{ text-align:right; font-variant-numeric:tabular-nums lining-nums; color:#DCE3E6; white-space:nowrap }
.pe-rk__nota{ font-family:var(--sans); font-size:.78rem; color:var(--suave-claro); margin:.6rem 0 0; line-height:1.45 }

@media (min-width:64rem){
  .pe-mapa__fig .pe-svg{ max-height:min(72vh,44rem) }
}

/* ================================================================== COMPARADOR */
.pe-comp__cab{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--e-sm) clamp(2rem,5vw,5rem); align-items:end; margin-bottom:var(--e-md) }
.pe-comp__cab .antetitulo{ margin:0 0 var(--e-xs) }
.pe-comp__cab .entrada{ margin:0; font-size:1rem }
.pe-comp{ --pa:var(--petroleo); --pb:var(--obs-res) }
.pe-comp__sel{ display:flex; flex-wrap:wrap; align-items:end; gap:.75rem 1rem; padding:var(--e-sm) 0 var(--e-md); position:sticky; top:var(--alto-nav); z-index:3;
  background:linear-gradient(var(--papel) 85%, rgba(244,242,238,0)) }
.pe-comp__s{ display:grid; gap:.3rem; font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--tinta-2) }
.pe-comp__s span{ display:inline-flex; align-items:center; gap:.45rem }
.pe-comp__s span::before{ content:""; width:1.4rem; height:.55rem; border-radius:1px; background:var(--pa) }
.pe-comp__s--b span::before{ background:var(--pb) }
.pe-comp__s select{ font:inherit; font-size:1rem; font-weight:600; color:var(--tinta); min-height:2.9rem; min-width:13rem; padding:0 2.4rem 0 .9rem; border-radius:10px;
  border:1px solid var(--filete-firme); background:var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1726' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center;
  appearance:none; cursor:pointer }
.pe-comp__s select:disabled{ cursor:default; opacity:1; color:var(--tinta); background-image:none; padding-right:.9rem }
.pe-comp__s select:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px }
.pe-comp__vs{ font-family:var(--lee); font-style:italic; color:var(--mudo); padding-bottom:.7rem }
.pe-comp__sinjs{ flex-basis:100%; margin:0; font-family:var(--sans); font-size:.82rem; color:var(--mudo) }
.obs-js .pe-comp__sinjs{ display:none }
.pe-comp__grid{ display:grid; gap:clamp(1.5rem,3vw,2.25rem) }
.pe-cg{ display:grid; grid-template-columns:minmax(8rem,11rem) minmax(0,1fr); gap:var(--e-sm) clamp(1.5rem,4vw,3rem); border-top:1px solid var(--filete-firme); padding-top:var(--e-sm) }
.pe-cg__t{ font-family:var(--sans); font-weight:650; font-size:clamp(1.1rem,1rem + .4vw,1.35rem); color:var(--tinta); margin:0; padding-top:.2rem }
.pe-cg__l{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.pe-cf{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:.35rem clamp(1rem,3vw,2.5rem); align-items:center; padding:.85rem 0; border-bottom:1px solid var(--filete) }
.pe-cf:last-child{ border-bottom:0 }
.pe-cf__k{ margin:0; display:grid; gap:.15rem; font-family:var(--sans) }
.pe-cf__k span{ font-size:.95rem; font-weight:600; color:var(--tinta); line-height:1.3 }
.pe-cf__k small{ font-size:.76rem; color:var(--mudo) }
.pe-cf__g{ position:relative; display:grid; gap:.35rem }
.pe-cf__f{ display:grid; grid-template-columns:minmax(5.5rem,8rem) minmax(0,1fr) minmax(4.6rem,auto); gap:.6rem; align-items:center; font-family:var(--sans); font-size:.82rem }
.pe-cf__q{ color:var(--tinta-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pe-cf__b{ position:relative; height:.8rem; background:var(--obs-fondo-barra); border-radius:2px; overflow:hidden }
.pe-cf__b i{ position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--pa); border-radius:2px }
.pe-cf__f--b .pe-cf__b i{ background:var(--pb) }
.obs-anim .pe-cf__b i{ transition:width .5s var(--obs-ease) }
.pe-cf__f b{ font-family:var(--sans); font-weight:700; font-size:.92rem; text-align:right; font-variant-numeric:tabular-nums lining-nums; color:var(--tinta); white-space:nowrap }
.pe-cf__b u{ position:absolute; top:0; bottom:0; left:var(--n, 0); width:2px; margin-left:-1px; background:var(--tinta); text-decoration:none }
.pe-cf__ver{ grid-column:2; margin:0; font-family:var(--sans); font-size:.78rem; color:var(--mudo) }
.pe-cf__ver [data-ver]{ font-weight:650; color:var(--tinta-2) }

/* ================================================================== TABLA COMPLETA */
.obs-js .pe-tfil{ display:flex }
.pe-tfil{ flex-wrap:wrap; gap:.4rem; margin-bottom:var(--e-sm) }
.pe-tfil[hidden]{ display:none !important }
.pe-tfil button{ font:inherit; font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--tinta); background:transparent; border:0; min-height:2.6rem; padding:0 1rem;
  border-radius:999px; box-shadow:inset 0 0 0 1px var(--filete-firme); cursor:pointer; transition:background-color .2s ease, color .2s ease }
.pe-tfil button:hover{ box-shadow:inset 0 0 0 1px var(--petroleo) }
.pe-tfil button[aria-pressed="true"]{ background:var(--noche); color:var(--papel); box-shadow:none }
.pe-tfil button:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px }
.pe-tabla__t th button small{ display:block; font-size:.7rem; font-weight:500; color:var(--mudo); margin-top:.15rem; white-space:nowrap }
.pe-tabla__t thead th{ vertical-align:bottom; min-width:7.5rem }
.pe-tabla__t thead th:first-child{ min-width:9rem }
.pe-tabla__t td.sd{ color:var(--mudo); font-size:.82em }
.pe-tabla__t tbody th a{ color:var(--tinta); text-decoration-color:var(--filete-firme); text-underline-offset:.18em }
.pe-tabla__t tbody th a:hover{ color:var(--petroleo); text-decoration-color:currentColor }
.pe-tabla__t[data-ver="personas"] [data-t]:not([data-t="personas"]),
.pe-tabla__t[data-ver="escuela"] [data-t]:not([data-t="escuela"]),
.pe-tabla__t[data-ver="salud"] [data-t]:not([data-t="salud"]),
.pe-tabla__t[data-ver="economia"] [data-t]:not([data-t="economia"]),
.pe-tabla__t[data-ver="territorio"] [data-t]:not([data-t="territorio"]),
.pe-tabla__t[data-ver="estado"] [data-t]:not([data-t="estado"]),
.pe-tabla__t[data-ver="confianza"] [data-t]:not([data-t="confianza"]){ display:none }

/* ================================================================== DICCIONARIO */
.pe-dic__det > summary{ font-size:1rem }
.pe-dic__t{ font-family:var(--sans); font-weight:650; font-size:1.1rem; margin:var(--e-md) 0 .5rem; color:var(--tinta) }
.pe-dic__tab th[scope="row"]{ min-width:14rem; font-weight:600 }
.pe-dic__tab th[scope="row"] small{ display:block; font-weight:400; font-size:.8rem; color:var(--mudo); margin-top:.2rem; line-height:1.4; max-width:44ch }
.pe-dic__tab td a{ color:var(--petroleo); text-underline-offset:.18em }

/* ================================================================== FICHA DE REGIÓN */
.pe-cab .obs-ubica{ max-width:22rem }
.pe-ub path{ fill:rgba(216,203,179,.13); stroke:var(--noche); stroke-width:1.3; stroke-linejoin:round }
.pe-ub path.on{ fill:var(--obs-res-claro) }
.pe-ub__c{ fill:var(--noche); stroke:var(--papel); stroke-width:2.5 }
.pe-ub__pt{ fill:var(--obs-res-claro); stroke:var(--papel); stroke-width:3 }

.pe-res{ background:radial-gradient(55% 70% at 10% 0%, rgba(20,80,79,.35), transparent 70%), var(--obs-hondo) }
.pe-res__cab{ max-width:46rem; margin-bottom:clamp(1.75rem,3.5vw,2.75rem) }
.pe-res__cab .antetitulo{ margin:0 0 var(--e-xs) }
.pe-res__cif{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); border-top:1px solid rgba(244,242,238,.16); border-bottom:1px solid rgba(244,242,238,.16) }
.pe-res__cif li + li{ border-left:1px solid rgba(244,242,238,.12) }
.pe-res__cif a{ display:grid; gap:.35rem; align-content:start; height:100%; box-sizing:border-box; padding:clamp(1.1rem,2.4vw,1.6rem) clamp(.9rem,2vw,1.4rem); text-decoration:none; color:var(--papel); transition:background-color .2s ease }
.pe-res__cif a:hover{ background:rgba(244,242,238,.05) }
.pe-res__cif a:focus-visible{ outline:2px solid var(--piedra); outline-offset:-2px }
.pe-res__cif b{ font-family:var(--lee); font-weight:500; font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem); line-height:1; letter-spacing:-.02em; color:var(--obs-res-claro); font-variant-numeric:lining-nums }
.pe-res__cif span{ font-family:var(--sans); font-size:.92rem; font-weight:600; line-height:1.35; color:#E1E8EA }
.pe-res__cif small{ font-family:var(--sans); font-size:.78rem; color:var(--suave-claro) }
.pe-dest{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(2rem,4vw,3rem) }
.pe-dest__c h3{ font-family:var(--sans); font-size:.95rem; font-weight:650; color:#8FD0C9; margin:0 0 .6rem }
.pe-dest__c--reto h3{ color:var(--obs-res-claro) }
.pe-dest ol{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(244,242,238,.14) }
.pe-dest a{ display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:1rem; align-items:center; padding:.8rem .3rem; border-bottom:1px solid rgba(244,242,238,.14);
  color:var(--papel); text-decoration:none; transition:background-color .2s ease }
.pe-dest a:hover{ background:rgba(244,242,238,.05) }
.pe-dest a:focus-visible{ outline:2px solid var(--piedra); outline-offset:-2px }
.pe-dest__p{ display:grid; justify-items:end; line-height:1 }
.pe-dest__p b{ font-family:var(--lee); font-weight:500; font-size:2rem; color:#8FD0C9; font-variant-numeric:lining-nums tabular-nums }
.pe-dest__c--reto .pe-dest__p b{ color:var(--obs-res-claro) }
.pe-dest__p small{ font-family:var(--sans); font-size:.7rem; color:var(--suave-claro); margin-top:.2rem }
.pe-dest__i{ font-family:var(--sans); font-size:.95rem; font-weight:600; line-height:1.3 }
.pe-dest__i small{ display:block; font-weight:400; font-size:.78rem; color:var(--suave-claro); margin-top:.15rem }
.pe-res__nota{ font-family:var(--sans); font-size:.8rem; line-height:1.5; color:var(--suave-claro); max-width:70ch; margin:var(--e-md) 0 0 }

.pe-tema.banda--niebla.obs-pf{ background:var(--niebla) }
.pe-tema.banda--niebla .obs-pf__pista i, .pe-tema.banda--niebla .obs-pf__yo{ box-shadow:0 0 0 2px var(--niebla) }
.pe-tema.banda--niebla .obs-pf__yo{ box-shadow:0 0 0 4px var(--niebla), 0 6px 16px rgba(180,83,42,.4) }
.pe-tema__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-tema__cab .h2{ margin:0; font-family:var(--sans); font-weight:650; font-size:clamp(2rem,1.3rem + 2.4vw,3.3rem); letter-spacing:-.03em; line-height:1.02 }
.pe-tema__cab .entrada{ margin:0; font-size:1rem }
.pe-pf__txt{ display:grid; gap:.1rem; align-content:start }
.pe-pf__txt .obs-fte{ margin-top:.2rem }
.pe-pf__txt .obs-pf__k span i{ font-style:normal; font-size:.78rem; color:var(--mudo); margin-left:.25rem; white-space:nowrap }
.pe-pf__f{ scroll-margin-top:calc(var(--alto-nav) + 1.5rem) }
.pe-pf__f:target{ background:linear-gradient(90deg, rgba(180,83,42,.07), transparent 60%) }
.pe-sd{ font-family:var(--sans); font-size:.86rem; color:var(--mudo); margin:var(--e-sm) 0 0; max-width:72ch }
.pe-tema--vacio .pe-tema__cab{ margin-bottom:0 }

.pe-piloto{ background:radial-gradient(50% 70% at 90% 50%, rgba(240,180,138,.1), transparent 70%), var(--obs-hondo) }
.pe-otras__acc{ display:flex; flex-wrap:wrap; gap:.25rem 1.75rem; margin-top:var(--e-sm) }
.obs-otras .pe-otras__acc a{ box-shadow:none; padding:0; border-radius:0; min-height:2.5rem; color:var(--petroleo); text-decoration:underline; text-decoration-color:var(--filete-firme); text-underline-offset:.22em }
.obs-otras .pe-otras__acc a:hover{ box-shadow:none; text-decoration-color:currentColor }
.pe-piloto__in{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(2rem,5vw,5rem); align-items:center }
.pe-piloto .entrada{ color:#DCE3E6 }
.pe-piloto__mapa{ display:block; border-radius:12px }
.pe-piloto__mapa svg{ width:100%; height:auto; display:block }
.pe-piloto__mapa path{ fill:rgba(216,203,179,.18); stroke:var(--noche); stroke-width:2; transition:fill .2s ease }
.pe-piloto__mapa path.on{ fill:var(--obs-res-claro) }
.pe-piloto__mapa:hover path{ fill:rgba(216,203,179,.3) }
.pe-piloto__mapa:hover path.on{ fill:var(--obs-res-claro) }
.pe-piloto__mapa:focus-visible{ outline:2px solid var(--piedra); outline-offset:4px }

/* ================================================================== PANTALLAS MEDIANAS Y CHICAS */
@media (max-width:63.99rem){
  .pe-mapa__grid{ grid-template-columns:minmax(0,1fr) }
  .pe-svg{ max-height:none; max-width:36rem }
  .pe-mms__cab, .pe-ri__cab, .pe-mapa__cab, .pe-comp__cab, .pe-tema__cab{ grid-template-columns:minmax(0,1fr) }
  .pe-cus__in, .pe-piloto__in{ grid-template-columns:minmax(0,1fr) }
  .pe-cus__fig{ justify-items:start }
  .pe-cus__fig .obs-h0__mapa{ max-width:24rem }
  .pe-piloto__mapa{ max-width:18rem }
  .pe-h0__mapa{ max-width:20rem }
  .pe-h0__fig{ justify-items:start }
}
@media (max-width:47.99rem){
  .pe-ctrl legend{ float:none; width:auto; padding:0 0 .4rem }
  .pe-temas__l, .pe-inds__g{ margin-left:0 }
  .pe-temas__l{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.35rem; margin-inline:calc(-1 * var(--canal)); padding-inline:var(--canal); scrollbar-width:thin }
  .pe-temas__l label{ flex:0 0 auto }
  .pe-ctrl label span{ min-height:2.6rem; padding:0 .9rem; font-size:.86rem }
  .pe-ley{ grid-template-columns:repeat(5,minmax(0,1fr)) }
  .pe-ley__sd{ grid-column:1 / -1; padding-left:0; grid-template-columns:auto 1fr; align-items:center; gap:.5rem }
  .pe-cg{ grid-template-columns:minmax(0,1fr) }
  .pe-mms__l{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem .8rem }
  .pe-mm__svg{ padding:.6rem }
  .pe-ri__l{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .pe-ri__l a{ padding:.7rem .25rem; font-size:.8rem }
  .pe-cf{ grid-template-columns:minmax(0,1fr) }
  .pe-cf__ver{ grid-column:1 }
  .pe-cf__f{ grid-template-columns:minmax(4.8rem,6.5rem) minmax(0,1fr) auto }
  .pe-comp__s{ flex:1 1 100% }
  .pe-comp__s select{ width:100%; min-width:0 }
  .pe-comp__vs{ display:none }
  .pe-comp__sel{ position:static; background:none }
  .pe-dest{ grid-template-columns:minmax(0,1fr) }
  .pe-res__cif{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pe-res__cif li:nth-child(odd){ border-left:0 }
  .pe-res__cif li:nth-child(n+3){ border-top:1px solid rgba(244,242,238,.12) }
  .pe-cus__dato{ grid-template-columns:minmax(0,1fr) }
  .pe-rk__l a{ grid-template-columns:1.7rem minmax(5.8rem,7.5rem) minmax(0,1fr) auto; gap:.5rem; font-size:.84rem }
}
@media (max-width:23rem){
  .pe-mms__l{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem .6rem }
  .pe-ri__l{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pe-res__cif{ grid-template-columns:minmax(0,1fr) }
  .pe-res__cif li{ border-left:0 !important }
  .pe-res__cif li + li{ border-top:1px solid rgba(244,242,238,.12) }
}
@media (prefers-reduced-motion:reduce){
  .pe-reg path, .pe-reg--punto circle, .pe-m, .pe-rk__b i, .pe-cf__b i, .pe-ficha [data-f]{ transition:none !important }
  .pe-h0__regs .sobre{ animation:none }
}
@media (max-width:47.99rem){
  /* El margen izquierdo del lienzo (donde flota la ficha en escritorio) sobra en celular: se recorta sin perder el rótulo de Callao */
  .pe-mapa__lienzo{ overflow:hidden }
  .pe-mapa__lienzo .pe-svg{ width:131.6%; max-width:none; margin-left:-31.6% }
}
/* Marcas extremas del eje: la primera se alinea a la izquierda y la última a la derecha, para no salirse del borde */
.pe-pf__f .obs-pf__marcas s:first-child span{ left:0; transform:none }
.pe-pf__f .obs-pf__marcas s:last-child span{ left:auto; right:0; transform:none }
.pe-oculto{ display:none }
.pe-rk__l li[hidden]{ display:none }
.pe-tfil button small{ font-size:.72rem; font-weight:700; color:var(--mudo); margin-left:.3rem; font-variant-numeric:tabular-nums }
.pe-tfil button[aria-pressed="true"] small{ color:var(--suave-claro) }
.pe-cfil{ margin-bottom:var(--e-md) }
.pe-cg[hidden]{ display:none }
.pe-tabla__t tbody th small{ display:block; font-size:.72rem; font-weight:500; color:var(--mudo) }
.pe-tabla__t tr.pe-sub th a{ font-weight:500 }
/* El rótulo del Perú se apoya a la derecha o a la izquierda de su raya cuando está cerca de un extremo */
.pe-pf__f .obs-pf__pista u.izq span{ left:-1px; transform:none }
.pe-pf__f .obs-pf__pista u.der span{ left:auto; right:-1px; transform:none }
/* En la ficha regional todas las marcas que no chocan llevan su número */
.pe-pf__f:has(u) .obs-pf__marcas s span{ display:block }
.pe-mm__m{ font-family:var(--sans); font-size:.76rem; font-weight:650; color:var(--petroleo); margin-top:.15rem; text-decoration:underline; text-decoration-color:var(--filete-firme); text-underline-offset:.2em }
.pe-mm a:hover .pe-mm__m{ text-decoration-color:currentColor }
.pe-sinjs{ font-family:var(--sans); font-size:.86rem; color:var(--suave-claro); margin:0 0 var(--e-md) }
.pe-sinjs a{ color:var(--piedra) }
.obs-js .pe-sinjs{ display:none }
.pe-ub path.padre{ fill:rgba(240,180,138,.35) }
/* Ficha regional: nombre, cifra y detalle apilados, para que el texto no quede en una columna angosta */
.pe-pf__txt .obs-pf__k{ grid-template-columns:minmax(0,1fr); gap:.2rem }
.pe-pf__txt .obs-pf__k b{ grid-row:auto; grid-column:1; margin:.15rem 0 .1rem }
.pe-pf__txt .obs-pf__k span{ font-weight:600; color:var(--tinta) }
.pe-pf__txt .obs-pf__k b{ justify-self:start; text-align:left }
.pe-res__cif li{ min-width:0 }
.pe-res__cif b{ overflow-wrap:anywhere }
.pe-rk__enc{ color:var(--piedra) }
.pe-rk__enc[hidden]{ display:none }

/* ---------- v30 · ajustes de la revisión final ---------- */
/* 1. Fichas: el rótulo del Perú baja a una segunda línea, debajo de las marcas del eje, y nunca las pisa */
.pe-pf__f .obs-pf__pista{ margin-bottom:1.35rem }
.pe-pf__f .obs-pf__pista u span{ top:calc(100% + 1.15rem); padding:.05rem .35rem; border-radius:3px; background:var(--papel) }
.pe-tema.banda--niebla .pe-pf__f .obs-pf__pista u span{ background:var(--niebla) }
.pe-pf__f .obs-pf__marcas s span{ white-space:nowrap }
/* 4. Destacados sin puestos en esa mitad */
.pe-dest__vacio{ font-family:var(--sans); font-size:.86rem; color:var(--suave-claro); margin:0; padding:.8rem .3rem; border-top:1px solid rgba(244,242,238,.14) }
/* 5. Barra fija del comparador: fondo opaco a todo el ancho y filete inferior (sombras: no agregan desplazamiento horizontal) */
@media (min-width:48rem){
  .pe-comp__sel{ background:var(--papel); padding-bottom:var(--e-sm); margin-bottom:var(--e-md);
    box-shadow:0 0 0 100vmax var(--papel), 0 1px 0 100vmax var(--filete-firme); clip-path:inset(0 -100vmax -1px -100vmax) }
}
/* 6. Entre 48 y 80 rem la ficha corta va debajo del mapa (no flota), el mapa recorta el margen del océano y el botón no se parte */
.pe-ficha__a{ white-space:nowrap; max-width:100% }
@media (min-width:48rem) and (max-width:79.99rem){
  .pe-ficha{ position:static; width:auto; margin-top:var(--e-sm) }
  .pe-mapa__lienzo{ overflow:hidden }
  .pe-mapa__lienzo .pe-svg{ width:131.6%; max-width:none; margin-left:-31.6% }
}
@media (max-width:63.99rem){ .pe-mapa__lienzo{ max-width:36rem } }
/* En escritorio la ficha flota arriba a la izquierda, en la franja de océano que deja el margen del mapa: no toca Callao ni Lima Metropolitana */
@media (min-width:80rem){ .pe-ficha{ top:0; bottom:auto; width:min(14rem, 31%) } }

/* ================================================================== v31 · RUTA Y FICHAS TÉCNICAS
   Portada: «para quién» en la apertura, mosaico teñido, reglas, «Lo que viene» y cierre.
   Fichas regionales: barra de temas fija, indicadores plegados, una fuente por tema y cierre.
   IDT‑5 y Barómetro: estado de la medición e inventario. */

/* --- Apertura de la portada */
.pe-h0 .obs-h0__grid{ align-items:start }
.pe-h0 .obs-h0__t{ font-size:clamp(2.4rem,1.2rem + 3.2vw,4.1rem) }
.pe-h0 .obs-h0__lede{ margin-top:var(--e-sm) }
.pe-h0__lado{ display:grid; gap:var(--e-sm); justify-items:center; align-content:start }
.pe-h0__lado .pe-h0__mapa{ max-width:23rem; max-height:calc(100vh - 21rem); min-height:16rem }
.pe-h0__lado .obs-h0__dato{ margin-top:0; width:100%; max-width:30rem; box-sizing:border-box }
.pe-h0__lado .obs-h0__n span{ font-size:clamp(3rem,2.4rem + 2vw,4.2rem) }
.obs-pq0{ margin-top:clamp(1.25rem,2.4vw,1.75rem) }
.obs-pq0__k{ margin:0 0 .7rem; font-family:var(--sans); font-size:.86rem; font-weight:700; letter-spacing:.01em; color:var(--obs-sol-2) }
.obs-pq0__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; max-width:44rem }
.obs-pq0__l a{ position:relative; display:grid; gap:.2rem; height:100%; box-sizing:border-box; padding:.8rem 2.3rem .85rem 1rem; border-radius:var(--r-md, 10px);
  text-decoration:none; color:var(--papel); background:rgba(6,17,31,.42); box-shadow:inset 0 0 0 1px rgba(216,203,179,.26);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .2s ease, box-shadow .2s ease }
.obs-pq0__l a::after{ content:""; position:absolute; right:.95rem; top:1.05rem; width:.5rem; height:.5rem; border-top:1.6px solid var(--piedra); border-right:1.6px solid var(--piedra); transform:rotate(45deg); transition:transform .2s ease }
.obs-pq0__l b{ font-family:var(--sans); font-size:.95rem; font-weight:650; line-height:1.25 }
.obs-pq0__l span{ font-family:var(--sans); font-size:.84rem; line-height:1.4; color:#D3DDE0 }
.obs-pq0__l a:hover{ background:rgba(6,17,31,.62); box-shadow:inset 0 0 0 1px var(--piedra) }
.obs-pq0__l a:hover::after{ transform:translateX(3px) rotate(45deg) }
.obs-pq0__l a:focus-visible{ outline:2px solid var(--piedra); outline-offset:2px }
@media (max-width:63.99rem){
  .pe-h0__lado{ justify-items:start }
  .pe-h0__lado .pe-h0__mapa{ max-height:none; min-height:0 }
}
@media (max-width:47.99rem){ .obs-pq0__l{ grid-template-columns:minmax(0,1fr) } }

/* --- Mosaico de fichas, teñido con el indicador de la apertura */
.pe-ri__ley{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin:0 0 var(--e-sm); font-family:var(--sans); font-size:.8rem; color:#DCE3E6 }
.pe-ri__esc{ display:inline-flex; align-items:center; gap:3px; color:var(--suave-claro) }
.pe-ri__esc i{ width:1.5rem; height:.6rem; border-radius:2px; background:var(--cc) }
.pe-ri__esc i:first-child{ margin-left:.4rem } .pe-ri__esc i:last-child{ margin-right:.4rem }
.pe-ri__l li[data-c] svg, .pe-ri__l li[data-c] svg circle{ fill:var(--cc) }
.pe-ri__l li[data-c="f"] svg, .pe-ri__l li[data-c="f"] svg circle{ fill:#7FA3A3 }
.pe-ri__l li[data-c="x"] svg{ fill:transparent; stroke:rgba(216,203,179,.5); stroke-width:1.2; stroke-dasharray:3 3; vector-effect:non-scaling-stroke }
.pe-ri__l li[data-c="x"] svg circle{ fill:transparent }
.pe-ri__l a small{ font-family:var(--sans); font-size:.76rem; font-weight:600; color:var(--suave-claro); font-variant-numeric:tabular-nums; margin-top:-.3rem }
.pe-ri__l a:hover svg, .pe-ri__l a:focus-visible svg{ fill:var(--cc); filter:brightness(1.18) }
.pe-ri__nota{ margin:var(--e-md) 0 0; font-family:var(--sans); font-size:.82rem; color:var(--suave-claro); max-width:70ch }
.pe-ri__esc i:nth-child(1){ --cc:var(--c0) } .pe-ri__esc i:nth-child(2){ --cc:var(--c1) } .pe-ri__esc i:nth-child(3){ --cc:var(--c2) }
.pe-ri__esc i:nth-child(4){ --cc:var(--c3) } .pe-ri__esc i:nth-child(5){ --cc:var(--c4) }

/* --- Cómo se construye */
.obs-rg__cab .entrada{ color:#DCE3E6; margin-top:var(--e-sm) }
.obs-rg__cab .entrada a{ color:var(--papel) }
.obs-rg__pie{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding-top:var(--e-md); border-top:1px solid rgba(216,203,179,.18); font-family:var(--sans); font-size:.92rem; line-height:1.6; color:#C9D4D7; max-width:78ch }
.obs-rg__pie a{ color:var(--papel) }
.obs-rg__cal--claro{ border-top-color:var(--filete-firme) }

/* --- Lo que viene: IDT‑5 y Barómetro */
.obs-lv{ background:linear-gradient(180deg, var(--papel), #EEE9DF); padding-block:clamp(4.5rem,8vw,7rem) }
.obs-lv__cab{ max-width:54rem; margin-bottom:clamp(2rem,4vw,3rem) }
.obs-lv__h{ font-family:var(--sans); font-weight:650; font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem); line-height:1.03; letter-spacing:-.03em; color:var(--t1); text-wrap:balance; margin:0 }
.obs-lv__cab .entrada{ margin-top:var(--e-sm) }
.obs-lv__par{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.4vw,2rem) }
.obs-lv__i{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(1rem,2.4vw,1.75rem); align-items:start; padding:clamp(1.25rem,2.6vw,2rem);
  border-radius:var(--r-xl, 18px); background:#FFFFFF; box-shadow:0 30px 60px -48px rgba(14,23,38,.55), inset 0 0 0 1px rgba(14,23,38,.06) }
.obs-lv__fig{ margin:0; padding:.9rem .6rem .5rem; border-radius:var(--r-lg, 14px); background:var(--papel) }
.obs-lv__fig .obs-tablas{ width:auto; height:9.5rem; max-width:100%; margin-inline:auto }
.obs-lv__t{ font-family:var(--sans); font-weight:650; font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem); line-height:1.05; letter-spacing:-.03em; color:var(--t1); margin:0 }
.obs-lv__s{ font-family:var(--lee); font-size:1rem; color:var(--t2); margin:.3rem 0 0 }
.obs-lv__d{ color:var(--t2); line-height:1.55; margin:.7rem 0 0; max-width:42ch }
.obs-lv__e{ list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; position:relative }
.obs-lv__e li{ position:relative; padding-top:1.35rem; font-family:var(--sans); line-height:1.25 }
.obs-lv__e li::before{ content:""; position:absolute; left:0; top:.2rem; width:.8rem; height:.8rem; border-radius:50%; background:var(--petroleo); box-shadow:0 0 0 3px #FFFFFF }
.obs-lv__e li::after{ content:""; position:absolute; left:.9rem; right:.3rem; top:.58rem; height:2px; background:var(--petroleo); opacity:.45 }
.obs-lv__e li:last-child::after{ display:none }
.obs-lv__e li:not(.on)::before{ background:#FFFFFF; box-shadow:inset 0 0 0 2px var(--obs-res) }
.obs-lv__e li.on + li:not(.on)::before{ animation:obs-late 2.4s ease-in-out infinite }
.obs-lv__e li:nth-child(2):has(+ li:not(.on))::after{ background:repeating-linear-gradient(90deg, var(--obs-res) 0 4px, transparent 4px 8px); opacity:.8 }
.obs-lv__e b{ display:block; font-size:.8rem; font-weight:700; color:var(--t1) }
.obs-lv__e span{ display:block; font-size:.76rem; color:var(--mudo); margin-top:.1rem }
.obs-lv__e li:not(.on) span{ color:var(--obs-res); font-weight:600 }
.obs-lv__a{ display:flex; flex-wrap:wrap; gap:.25rem 1.4rem; margin:1rem 0 0 }
@keyframes obs-late{ 0%,100%{ box-shadow:inset 0 0 0 2px var(--obs-res), 0 0 0 0 rgba(180,83,42,.35) } 50%{ box-shadow:inset 0 0 0 2px var(--obs-res), 0 0 0 6px rgba(180,83,42,0) } }
@media (prefers-reduced-motion:reduce){ .obs-lv__e li.on + li:not(.on)::before{ animation:none } }
@media (max-width:63.99rem){ .obs-lv__par{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:40rem){ .obs-lv__i{ grid-template-columns:minmax(0,1fr) } .obs-lv__fig .obs-tablas{ height:8rem } }

/* --- Cierre de la portada */
.obs-fin{ padding-block:clamp(4.5rem,9vw,7rem) }
.obs-fin__in{ position:relative; z-index:1; max-width:46rem }
.obs-fin__h{ font-family:var(--sans); font-weight:650; font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem); line-height:1.04; letter-spacing:-.03em; color:var(--papel); text-wrap:balance; margin:0 }
.obs-fin .entrada{ color:#DCE3E6; margin-top:var(--e-sm) }
.obs-fin__acc, .pe-fin__acc, .pe-res__acc{ display:flex; flex-wrap:wrap; gap:.75rem; margin:var(--e-md) 0 0 }
.obs-fin__acc .boton, .pe-fin__acc .boton, .pe-res__acc .boton{ max-width:100%; white-space:normal }
.obs-salto{ padding-block:var(--e-xl) var(--e-lg) }

/* --- Ficha regional: apertura */
.pe-cab__ls{ display:flex; flex-wrap:wrap; gap:.6rem; margin:var(--e-md) 0 0 }
.pe-cab__l{ display:grid; gap:.1rem; padding:.65rem 2.2rem .7rem .9rem; position:relative; border-radius:var(--r-md, 10px); text-decoration:none; color:var(--papel);
  background:rgba(6,17,31,.35); box-shadow:inset 0 0 0 1px rgba(216,203,179,.3); transition:background-color .2s ease, box-shadow .2s ease }
.pe-cab__l::after{ content:""; position:absolute; right:.9rem; top:50%; width:.45rem; height:.45rem; margin-top:-.25rem; border-top:1.6px solid var(--piedra); border-right:1.6px solid var(--piedra); transform:rotate(45deg) }
.pe-cab__l b{ font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.02em; color:var(--obs-sol-2) }
.pe-cab__l span{ font-family:var(--sans); font-size:.92rem; font-weight:600 }
.pe-cab__l:hover{ background:rgba(6,17,31,.55); box-shadow:inset 0 0 0 1px var(--piedra) }
.pe-cab__l:focus-visible{ outline:2px solid var(--piedra); outline-offset:2px }

/* --- Ficha regional: barra de temas fija */
.pe-tbar{ position:sticky; top:var(--alto-nav); z-index:6; background:rgba(244,242,238,.95); border-bottom:1px solid var(--filete-firme);
  -webkit-backdrop-filter:saturate(1.2) blur(8px); backdrop-filter:saturate(1.2) blur(8px) }
.pe-tbar__in{ display:flex; align-items:center; gap:.9rem }
.pe-tbar__k{ flex:0 0 auto; margin:0; font-family:var(--sans); font-size:.78rem; font-weight:650; color:var(--mudo) }
.pe-tbar ul{ list-style:none; margin:0; padding:.55rem 0; display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0 }
.pe-tbar ul::-webkit-scrollbar{ display:none }
.pe-tbar li{ flex:0 0 auto }
.pe-tbar a{ display:inline-flex; align-items:center; gap:.45rem; min-height:2.75rem; padding:0 1rem; border-radius:999px; text-decoration:none; font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--tinta-2);
  box-shadow:inset 0 0 0 1px var(--filete-firme); transition:background-color .2s ease, color .2s ease, box-shadow .2s ease }
.pe-tbar a small{ font-size:.72rem; font-weight:700; color:var(--mudo); font-variant-numeric:tabular-nums }
.pe-tbar a:hover{ box-shadow:inset 0 0 0 1px var(--petroleo); color:var(--tinta) }
.pe-tbar a[aria-current="true"]{ background:var(--petroleo); color:var(--papel); box-shadow:none }
.pe-tbar a[aria-current="true"] small{ color:#BFE0DC }
.pe-tbar a:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px }
.pe-tema[id], .pe-pf__f[id]{ scroll-margin-top:calc(var(--alto-nav) + 4.75rem) }
@media (prefers-reduced-motion:reduce){ .pe-tbar a{ transition:none } }
@media (max-width:47.99rem){
  .pe-tbar__k{ display:none }
  .pe-tbar ul{ margin-inline:calc(-1 * var(--canal)); padding-inline:var(--canal) }
  .pe-tbar a{ padding:0 .85rem; font-size:.86rem }
}

/* --- Ficha regional: fila, plegado y fuentes por tema */
.pe-pf__fte{ margin:.35rem 0 0 }
.pe-pf__fte .obs-fte__c{ font-size:.78rem }
.pe-mas{ border-bottom:1px solid var(--filete-firme) }
.pe-mas > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem 1rem; align-items:baseline; padding:1rem 0; font-family:var(--sans) }
.pe-mas > summary::-webkit-details-marker{ display:none }
.pe-mas > summary span{ display:inline-flex; align-items:center; gap:.5rem; min-height:2.75rem; padding:0 1.1rem; border-radius:999px; font-size:.9rem; font-weight:650; color:var(--petroleo); box-shadow:inset 0 0 0 1.5px var(--petroleo); transition:background-color .2s ease, color .2s ease }
.pe-mas > summary span::after{ content:""; width:.45rem; height:.45rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s ease }
.pe-mas[open] > summary span::after{ transform:translateY(2px) rotate(-135deg) }
.pe-mas > summary small{ font-size:.8rem; line-height:1.45; color:var(--mudo) }
.pe-mas > summary:hover span{ background:var(--petroleo); color:var(--papel) }
.pe-mas > summary:focus-visible{ outline:none }
.pe-mas > summary:focus-visible span{ outline:2px solid var(--petroleo); outline-offset:3px }
.pe-mas[open] > summary small{ display:none }
.pe-mas > .obs-pf__l{ border-top:0 }
.pe-ft{ margin-top:var(--e-md) }
.pe-ft__d{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem clamp(1.5rem,4vw,3rem) }
.pe-ft__i h4{ margin:0 0 .25rem; font-family:var(--sans); font-size:.88rem; font-weight:650; color:var(--t1) }
.pe-ft__i p{ margin:.2rem 0 0 }
@media (max-width:47.99rem){ .pe-mas > summary{ grid-template-columns:minmax(0,1fr) } .pe-ft__d{ grid-template-columns:minmax(0,1fr) } }
@media (prefers-reduced-motion:reduce){ .pe-mas > summary span, .pe-mas > summary span::after{ transition:none } }

/* --- Ficha regional: cierre */
.pe-fin{ background:radial-gradient(50% 70% at 90% 30%, rgba(240,180,138,.12), transparent 70%), var(--obs-hondo) }
.pe-fin__in{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--e-md) clamp(2rem,5vw,5rem); align-items:center }
.pe-fin .entrada{ color:#DCE3E6; margin-top:var(--e-sm) }
.pe-fin__proy{ padding:clamp(1.1rem,2.4vw,1.6rem); border-radius:var(--r-lg, 14px); background:rgba(244,242,238,.06); box-shadow:inset 0 0 0 1px rgba(216,203,179,.28) }
.pe-fin__proy p{ margin:0; color:#DCE3E6; line-height:1.55 }
.pe-fin__proy p + p{ margin-top:.5rem }
.pe-fin__proy b{ color:var(--papel); font-family:var(--sans); font-weight:650 }
.pe-fin__k{ font-family:var(--sans); font-size:.8rem; font-weight:700; color:var(--obs-sol-2) !important }
.pe-fin__proy .obs-enlace{ color:var(--papel) }
@media (max-width:63.99rem){ .pe-fin__in{ grid-template-columns:minmax(0,1fr) } }

/* --- Fichas técnicas (IDT‑5 y Barómetro) */
.obs-cab__met{ margin:var(--e-md) 0 0 }
.obs-cab__met .boton{ max-width:100%; white-space:normal }
.obs-em{ list-style:none; margin:0 0 var(--e-lg); padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 }
.obs-em__i{ position:relative; padding:1.6rem 1rem 0 0 }
.obs-em__i::before{ content:""; position:absolute; left:0; top:0; width:1rem; height:1rem; border-radius:50%; background:#FFFFFF; box-shadow:inset 0 0 0 2px var(--obs-res) }
.obs-em__i::after{ content:""; position:absolute; left:1.15rem; right:.15rem; top:.45rem; height:2px; background:repeating-linear-gradient(90deg, var(--obs-res) 0 4px, transparent 4px 8px) }
.obs-em__i:last-child::after{ display:none }
.obs-em__i.on::before{ background:var(--petroleo); box-shadow:0 0 0 4px rgba(20,80,79,.14) }
.obs-em__i.on::after{ background:var(--petroleo) }
.obs-em__i.on:has(+ .obs-em__i:not(.on))::after{ background:repeating-linear-gradient(90deg, var(--petroleo) 0 4px, transparent 4px 8px) }
.obs-prosa .obs-em p{ margin:0 }
.obs-em__k{ font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--mudo) }
.obs-prosa .obs-em .obs-em__e{ margin:.3rem 0 .35rem; display:inline-block; padding:.15rem .6rem; border-radius:999px; font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--obs-res); box-shadow:inset 0 0 0 1.5px var(--obs-res) }
.obs-prosa .obs-em .on .obs-em__e{ color:var(--papel); background:var(--petroleo); box-shadow:none }
.obs-em__d{ font-family:var(--sans); font-size:.86rem; line-height:1.5; color:var(--t2) }
.obs-prosa .obs-h3{ margin-top:var(--e-md) }
.obs-ya{ font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--petroleo) }
.obs-ya--no{ color:var(--mudo); font-weight:500 }
@media (max-width:47.99rem){
  .obs-em{ grid-template-columns:minmax(0,1fr); gap:1.1rem }
  .obs-em__i{ padding:0 0 0 1.8rem }
  .obs-em__i::after{ left:.45rem; right:auto; top:1.15rem; bottom:-1.1rem; width:2px; height:auto; background:repeating-linear-gradient(180deg, var(--obs-res) 0 4px, transparent 4px 8px) }
  .obs-em__i.on::after{ background:var(--petroleo) }
  .obs-em__i.on:has(+ .obs-em__i:not(.on))::after{ background:repeating-linear-gradient(180deg, var(--petroleo) 0 4px, transparent 4px 8px) }
}
/* v31: el puesto y «de N» no se tocan (lo marcaba el detector de textos encimados) */
.pe-dest__p b{ display:block; line-height:1.08 }
.pe-dest__p small{ display:block; line-height:1.25; margin-top:.3rem }