/* /que-hacemos/ · v32 (QH-A) · Se enlaza después de v28-que-hacemos.css.
   1. Índice «Qué hacemos, en siete capítulos»: un recorrido que empieza en el 1 y termina en el 7.
   2. Especialidad: cada ficha, centrada sobre el centro visual de su región en el dibujo.
   3. Las tres realidades en cifras: barras rotuladas, con la raya del Perú y la fuente de cada cifra. */

/* ================================================================ 1 · ÍNDICE COMO RECORRIDO */
.dt-ind--v32 .dt-ind__l{ --riel:2.75rem; --linea:color-mix(in srgb, var(--tinta) 28%, transparent) }
.dt-ind--v32 .dt-ind__l::before{ content:none }
.dt-ind--v32 .dt-ind__i{ position:relative; min-width:0 }
.dt-ind--v32 .dt-ind__l a{ align-content:start; gap:.85rem; padding:0 1.1rem .4rem 0 }
.dt-ind--v32 .dt-ind__n{ width:var(--riel); height:var(--riel); background:#fff; box-shadow:inset 0 0 0 1.5px var(--tinta);
  font:650 1.05rem/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:0 }
.dt-ind--v32 .dt-ind__tx{ gap:.35rem }
.dt-ind--v32 .dt-ind__tx b{ font-size:1.04rem }
/* El tramo que une cada número con el siguiente, con su punta; el 7 no tiene tramo: ahí termina el recorrido. */
.dt-ind--v32 .dt-ind__i:not(:last-child)::after,
.dt-ind--v32 .dt-ind__i:not(:last-child)::before{ content:""; position:absolute; pointer-events:none }
.dt-ind--v32 .dt-ind__i:not(:last-child)::after{ background:var(--linea) }
.dt-ind--v32 .dt-ind__i:not(:last-child)::before{ width:7px; height:7px; border-top:1.5px solid var(--linea); border-right:1.5px solid var(--linea) }
/* La llegada: el 7, lleno y con doble anillo. */
.dt-ind--v32 .dt-ind__i--fin .dt-ind__n{ background:var(--noche); color:var(--papel); box-shadow:0 0 0 4px var(--papel), 0 0 0 5.5px var(--noche) }
.dt-ind--v32 .dt-ind__l a:hover .dt-ind__n, .dt-ind--v32 .dt-ind__l a:focus-visible .dt-ind__n{ background:var(--petroleo); color:var(--papel); box-shadow:none }
.dt-ind--v32 .dt-ind__i--fin a:hover .dt-ind__n, .dt-ind--v32 .dt-ind__i--fin a:focus-visible .dt-ind__n{ box-shadow:0 0 0 4px var(--papel), 0 0 0 5.5px var(--petroleo) }
@media (prefers-reduced-motion:no-preference){
  .dt-ind--v32 .dt-ind__n{ transition:background .2s, color .2s, box-shadow .2s, transform .25s var(--salida) }
  .dt-ind--v32 .dt-ind__l a:hover .dt-ind__n{ transform:translateY(-2px) }
}
@media (min-width:64rem){
  .dt-ind--v32 .dt-ind__l{ margin-top:clamp(2rem,3.4vw,2.8rem) }
  .dt-ind--v32 .dt-ind__i:not(:last-child)::after{ top:calc(var(--riel) / 2 - .75px); left:calc(var(--riel) + .55rem); right:.6rem; height:1.5px }
  .dt-ind--v32 .dt-ind__i:not(:last-child)::before{ top:calc(var(--riel) / 2 - 4px); right:.6rem; transform:rotate(45deg) }
}
@media (max-width:63.99rem){
  .dt-ind--v32 .dt-ind__l{ --riel:2.45rem; gap:0; max-width:40rem }
  .dt-ind--v32 .dt-ind__l a{ grid-template-columns:var(--riel) minmax(0,1fr); column-gap:1rem; align-items:start; padding:.45rem 0 1.05rem }
  .dt-ind--v32 .dt-ind__tx{ padding-top:.32rem }
  .dt-ind--v32 .dt-ind__i:not(:last-child)::after{ left:calc(var(--riel) / 2 - .75px); top:calc(.45rem + var(--riel) + .35rem); bottom:.05rem; width:1.5px }
  .dt-ind--v32 .dt-ind__i:not(:last-child)::before{ left:calc(var(--riel) / 2 - 3.5px); bottom:.1rem; transform:rotate(135deg) }
}

/* ================================================================ 2 · FICHAS CENTRADAS SOBRE SU REGIÓN
   Cada ficha se ubica en el centro visual de su región (--ax, del dibujo) y no sale del marco. */
.pe-cols{ display:block; padding:0 }
.pe-col{ --cw:min(15.5rem, 29%); position:absolute; top:clamp(.8rem,1.5vw,1.3rem); display:block; width:var(--cw); padding:0;
  left:clamp(.6rem, calc(var(--ax) - var(--cw) / 2), calc(100% - var(--cw) - .6rem)) }
.pe-col .pe-r{ width:100% }
@media (min-width:48rem){ .pe-r__c{ min-height:4.2em } }
.pe-rot--r{ font-size:16px }
.pe-rot__m{ fill:none; stroke:#F4F2EE; stroke-width:2; stroke-linecap:round; opacity:.35; transition:opacity .35s, stroke .35s }
.pe[data-r="costa"] .pe-rot__m[data-r="costa"], .pe[data-r="sierra"] .pe-rot__m[data-r="sierra"], .pe[data-r="selva"] .pe-rot__m[data-r="selva"]{ opacity:1; stroke:color-mix(in srgb, var(--rc) 55%, #fff) }
.pe-lim{ opacity:.35 }
@media (max-width:47.99rem){
  /* En celular el dibujo se recorre de lado; la ficha elegida queda al centro de la pantalla y sobre su región. */
  .pe-col{ --cw:13.5rem; left:calc(clamp(50vw, var(--ax), 100% - 50vw) - var(--cw) / 2) }
  .pe-r{ width:100% }
}

/* ================================================================ 3 · LAS TRES REALIDADES EN CIFRAS */
.pe-pt--v32 .pe-pt__cab{ display:grid; gap:.4rem; align-items:start }
.pe-pt--v32 .pe-pt__k{ margin:0; font-style:normal; color:var(--tinta-2); max-width:60ch }
.pe-ci__l{ list-style:none; margin:clamp(.6rem,1.4vw,1rem) 0 0; padding:0 }
.pe-ci{ display:grid; gap:1rem clamp(2rem,5vw,4.5rem); padding:clamp(.85rem,1.6vw,1.1rem) clamp(.4rem,1vw,.9rem); border-top:1px solid rgba(14,23,38,.08); border-radius:4px; transition:background .3s }
@media (min-width:62rem){
  .pe-ci__l{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2.5rem,5vw,4.5rem) }
  .pe-ci{ align-content:start }
}
.pe-ci{ gap:.9rem }
.pe-ci--obs{ align-content:center; border-radius:18px; border-top:0; margin-top:1rem; padding:1.2rem 1.4rem !important; background:#F7F5EF }
.pe-ci--obs .pe-pt__pie{ margin:0; padding:0; border:0 }
@media (max-width:61.99rem){ .pe-ci--obs{ margin-top:.6rem } }
.pe-ci__t{ min-width:0 }
.pe-ci__q{ margin:0; font:600 .92rem/1.35 var(--sans); color:var(--mudo) }
.pe-ci__a{ margin:.3rem 0 0; font:650 clamp(1.12rem,1rem + .45vw,1.34rem)/1.25 var(--sans); letter-spacing:-.012em; color:var(--tinta); text-wrap:balance }
.pe-ci__m{ margin:.35rem 0 0; font:italic 400 .88rem/1.4 var(--lee); color:var(--mudo) }
.pe-ci__g{ min-width:0 }
.pe-ci__barras{ --nw:4.1rem; --cw2:4.6rem; --gap:.8rem; position:relative; padding-top:1.3rem }
.pe-ci__barras ul{ list-style:none; margin:0; padding:0; display:grid; gap:.28rem }
.pe-bar{ display:grid; grid-template-columns:var(--nw) minmax(0,1fr) var(--cw2); column-gap:var(--gap); align-items:center; min-height:1.4rem }
.pe-bar__n{ font:600 .9rem/1 var(--sans); color:var(--ro) }
.pe-bar__pista{ position:relative; display:block; height:.85rem; border-radius:999px; background:rgba(14,23,38,.07); overflow:hidden }
.pe-bar__v{ position:absolute; inset:0 auto 0 0; width:var(--x); border-radius:999px; background:var(--rc) }
.pe-bar__c{ font:650 1.05rem/1 var(--sans); color:var(--ro); font-variant-numeric:tabular-nums; white-space:nowrap }
.pe-bar__c small{ font-size:.78rem; font-weight:600 }
/* La raya del Perú cruza las tres pistas en su valor; el rótulo va arriba. */
.pe-ci__peru{ position:absolute; z-index:2; top:1rem; bottom:-.15rem; width:2px; margin-left:-1px; border-radius:1px; background:var(--tinta); box-shadow:0 0 0 1px rgba(255,255,255,.8);
  left:calc(var(--nw) + var(--gap) + (100% - var(--nw) - var(--cw2) - 2 * var(--gap)) * var(--pe-n)) }
.pe-ci__peru span{ position:absolute; bottom:calc(100% + .3rem); left:50%; transform:translateX(-50%); white-space:nowrap; font:600 .76rem/1 var(--sans); color:var(--tinta-2) }
.pe-ci__f{ margin:.5rem 0 0; font:400 .8rem/1.45 var(--sans); color:var(--mudo) }
.pe-ci__f .pe-fuente{ color:var(--tinta-2) }
/* La cifra que se compara arriba, en «Compare una cifra», se marca con un fondo suave. */
.pe[data-m="pobreza"] .pe-ci[data-k="pobreza"], .pe[data-m="anemia"] .pe-ci[data-k="anemia"], .pe[data-m="dcronica"] .pe-ci[data-k="dcronica"],
.pe[data-m="agua"] .pe-ci[data-k="agua"], .pe[data-m="desague"] .pe-ci[data-k="desague"]{ background:#F7F5EF }
@media (prefers-reduced-motion:no-preference){
  .pe-bar__v{ transition:width 1s var(--salida) }
  .pe-ci:nth-child(2) .pe-bar__v{ transition-delay:.08s } .pe-ci:nth-child(3) .pe-bar__v{ transition-delay:.16s }
  .pe-ci:nth-child(4) .pe-bar__v{ transition-delay:.24s } .pe-ci:nth-child(5) .pe-bar__v{ transition-delay:.32s }
  .pe--js .pe-pt--v32:not(.es-visto) .pe-bar__v{ width:0 }
}
@media (max-width:47.99rem){
  .pe-ci{ padding-inline:0 }
  .pe-ci__barras{ --nw:3.5rem; --cw2:3.9rem; --gap:.6rem }
  .pe-bar__n{ font-size:.85rem }
  .pe-bar__c{ font-size:.98rem }
}

/* v32b · Segunda línea de cada ficha: lo que distingue a la región (solo con «Pobreza total»). */
.pe-r__d{ display:block; margin-top:.35rem; padding-top:.45rem; border-top:1px solid rgba(14,23,38,.1); font:400 .8rem/1.4 var(--sans); color:var(--tinta-2) }
.pe-r__d b{ font-weight:650; color:var(--ro) }
.pe:not([data-m="clave"]) .pe-r__d{ display:none }
@media (min-width:48rem){ .pe-r__c{ min-height:0 } }