@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · PORTADA v29 (BRIEF_v29: «todo al nivel del Ecosistema»)
   Se carga después de v27-portada.css. Cada sección clara o plana toma el
   lenguaje de /ecosistema/: foto a sangre con texto en capas, vidrio, un
   dispositivo fijo que acompaña un recorrido y diagramas vivos.
   · .q29   Qué somos: foto de fondo que cambia con la pestaña; placas de vidrio
   · .c29   Comunidades: la escena al fondo, índice grande de las cinco
   · .f29   Un fin, cuatro frentes: las barras cuelgan del fin
   · .m29   Cómo se mide: la regla del ICT-5 como medidor de cinco columnas
   · .o29   Observatorio: mapa de las 13 provincias del Cusco (sin OxI)
   · .p29   Proyectos: mapa fijo que se aleja de la comunidad al país
   · .fu29  Quién está detrás: retrato a sangre
   · .faq29 Preguntas: foto fija con el título en capas e íconos propios
   Mismos tokens y tipografías del sitio. Sin filetes laterales de color.
   ========================================================================== */


/* =============================================================== QUÉ SOMOS (v30: pirámide centrada) */
/* v30 (corrección 1): todo centrado, en web y en celular. Cabecera centrada; tres placas apiladas y centradas,
   cada una más ancha que la de arriba (el fin corona, la escuela es la base), con su medallón de foto centrado
   sobre el borde y el texto centrado; el panel de la pestaña elegida, centrado bajo la base. */
.q29{ position:relative; isolation:isolate; overflow:clip; background:var(--papel); color:var(--tinta);
  padding-block:clamp(6rem,11vw,9.5rem) clamp(4rem,7vw,6rem) }
.q29__fondos{ position:absolute; inset:0; z-index:-2; background:var(--piedra) }
.q29__foto{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--curva), visibility 0s linear 1.1s }
.q29__foto[data-on]{ opacity:1; visibility:visible; transition:opacity 1.1s var(--curva), visibility 0s }
.q29__foto picture{ position:absolute; inset:0; display:block }
.q29__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block;
  transform:scale(1.07); transition:transform 8s var(--salida) }
.q29__foto[data-on] img{ transform:scale(1) }
.q29__foto figcaption{ position:absolute; z-index:2; left:50%; bottom:clamp(1.1rem,2vw,1.6rem); transform:translateX(-50%);
  width:max-content; max-width:min(46ch, calc(100% - 2 * var(--canal))); text-align:center;
  font-family:var(--sans); font-size:.82rem; font-weight:500; line-height:1.4; color:var(--tinta-2) }
/* el velo: papel en el eje central, donde va la pirámide; la foto respira a los lados */
.q29::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 62% at 50% 52%, rgba(244,242,238,.9) 0%, rgba(244,242,238,.78) 55%, rgba(244,242,238,0) 100%),
    linear-gradient(180deg, rgba(244,242,238,.82) 0%, rgba(244,242,238,.5) 30%, rgba(244,242,238,.5) 70%, rgba(244,242,238,.86) 100%) }
.q30__in{ display:grid; justify-items:center; text-align:center; row-gap:clamp(2.25rem,4.5vw,3.5rem) }
.q30__cab{ display:grid; justify-items:center; max-width:52rem }
.q30__cab .antetitulo{ color:var(--petroleo) }
.q29__t.q30__t{ font-family:var(--lee); font-weight:400; font-size:clamp(1.95rem,1.15rem + 2.6vw,3.6rem); line-height:1.08;
  letter-spacing:-.018em; color:var(--tinta); max-width:22ch; margin:0 auto; text-wrap:balance }
.q30__lado{ display:grid; justify-items:center; gap:.6rem; margin-top:clamp(1.1rem,2.2vw,1.6rem); max-width:46ch }
.q30__lado p{ margin:0; font-size:1.06rem; line-height:1.6; color:var(--tinta-2); text-wrap:pretty }
.q30__lado p:first-child{ font-family:var(--sans); font-weight:600; font-size:1.08rem; line-height:1.5; color:var(--tinta) }

/* la pirámide: tres placas centradas que se ensanchan hacia la base */
.q30__piramide{ display:grid; justify-items:center; width:100%; max-width:40rem }
.q30__capas{ --alto:4.4rem; display:grid; justify-items:center; row-gap:2.1rem; width:100%; padding-top:1.5rem;
  margin-bottom:clamp(1.6rem,3vw,2.1rem) }
.q30__capas[hidden]{ display:none }
.q29__capa{ appearance:none; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:var(--alto); padding:1.65rem 1rem .7rem; border-radius:1rem;
  border:1px solid rgba(14,23,38,.12); background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 34px -28px rgba(14,23,38,.55);
  color:var(--tinta); font:inherit; text-align:center; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--salida), box-shadow .3s ease }
.q29__capa:nth-child(1){ width:52% }
.q29__capa:nth-child(2){ width:76% }
.q29__capa:nth-child(3){ width:100% }
.q29__capa:hover{ background:rgba(255,255,255,.9); transform:translateY(-2px) }
.q29__capa[aria-selected="true"]{ background:var(--noche); color:var(--papel); border-color:var(--noche); box-shadow:0 22px 40px -24px rgba(10,26,47,.7) }
.q29__capa:focus-visible{ outline:3px solid var(--sol); outline-offset:3px }
/* medallón centrado sobre el borde superior */
.q29__mini{ position:absolute; top:0; left:50%; width:2.8rem; height:2.8rem; transform:translate(-50%,-55%); border-radius:50%;
  background:var(--mini) center / cover no-repeat; box-shadow:0 0 0 3px var(--papel), 0 8px 18px -8px rgba(14,23,38,.55);
  transition:box-shadow .3s ease }
.q29__capa[aria-selected="true"] .q29__mini{ box-shadow:0 0 0 3px var(--sol-2), 0 8px 18px -8px rgba(14,23,38,.55) }
.q29__tt{ display:grid; justify-items:center; gap:.05rem; min-width:0 }
.q29__nivel{ font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--petroleo) }
.q29__capa[aria-selected="true"] .q29__nivel{ color:var(--sol-2) }
.q29__nombre{ font-family:var(--sans); font-size:1.04rem; font-weight:650; letter-spacing:-.01em; line-height:1.25 }

/* el panel, centrado bajo la base, en vidrio */
.q30__vidrio{ width:100%; padding:clamp(1.25rem,2.6vw,1.9rem) clamp(1.1rem,3vw,2.25rem); border-radius:1.25rem; text-align:center;
  background:rgba(244,242,238,.7); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.75); box-shadow:0 34px 70px -46px rgba(14,23,38,.55) }
.q29__panel + .q29__panel{ margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--filete) }
.qs--js .q29__panel + .q29__panel{ margin-top:0; padding-top:0; border-top:0 }
.q29__panel[hidden]{ display:none }
.qs--js .q29__panel:not([hidden]){ animation:q29-entra .5s var(--salida) both }
@keyframes q29-entra{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.q29__pt{ font-family:var(--sans); font-size:1.15rem; font-weight:650; margin:0 0 .5rem; color:var(--tinta) }
.q29__pt span{ display:block; font-size:.82rem; font-weight:600; color:var(--petroleo) }
.qs--js .q29__pt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.q29__d{ margin:0 auto; font-size:1.06rem; line-height:1.6; color:var(--tinta); max-width:52ch; text-wrap:pretty }
.q29__lugar{ margin:.9rem auto 0; font-family:var(--sans); font-size:.92rem; line-height:1.5; color:var(--tinta-2); max-width:52ch }
.q29__lugar span{ display:block; font-size:.8rem; font-weight:650; color:var(--petroleo); margin-bottom:.15rem }
.q29__ir{ margin:1.1rem 0 0; display:flex; justify-content:center }
.q29 .boton--vidrio{ background:rgba(255,255,255,.55); color:var(--tinta); border-color:rgba(14,23,38,.28) }
.q29 .boton--vidrio:hover{ background:var(--noche); color:var(--papel); border-color:var(--noche) }

@media (max-width:63.99rem){
  .q29{ padding-top:clamp(4.5rem,12vw,6rem) }
  .q29__foto img{ object-position:var(--pos-m, var(--pos)) }
  .q29::before{ background:
    radial-gradient(ellipse 80% 55% at 50% 50%, rgba(244,242,238,.9) 0%, rgba(244,242,238,.8) 60%, rgba(244,242,238,.55) 100%),
    linear-gradient(180deg, rgba(244,242,238,.7) 0%, rgba(244,242,238,.6) 100%) }
}
@media (max-width:47.99rem){
  .q29__foto figcaption{ display:none }
  .q30__capas{ row-gap:1.9rem }
  .q29__capa:nth-child(1){ width:64% }
  .q29__capa:nth-child(2){ width:82% }
  .q29__capa{ padding-inline:.6rem }
  .q29__nombre{ font-size:.98rem }
}

/* =============================================================== COMUNIDADES */
.c29{ position:relative; isolation:isolate; overflow:clip; background:var(--noche-hondo); color:var(--papel);
  padding-block:clamp(5rem,9vw,8rem) clamp(3rem,6vw,4.5rem) }
.c29__cab{ max-width:46rem }
.c29__cab .antetitulo{ color:var(--sol-2) }
.c29__t{ font-family:var(--sans); font-weight:600; font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem); line-height:1.05;
  letter-spacing:-.03em; color:var(--papel); margin:0; max-width:17ch; text-wrap:balance }
.c29__def{ margin:clamp(1.1rem,2vw,1.6rem) 0 0; font-family:var(--lee); font-size:clamp(1.04rem,.98rem + .25vw,1.18rem); line-height:1.6; color:#D7E0E2; max-width:50ch }
.c29__def em{ color:var(--papel) }
.c29__lista{ list-style:none; margin:0; padding:0 }
.c29__foto{ display:block }
.c29__foto picture{ display:block; width:100%; height:100% }
.c29__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block }
.c29__a{ color:var(--papel); text-decoration:none }
.c29__a:focus-visible{ outline:3px solid var(--sol); outline-offset:4px; border-radius:.5rem }
.c29__n{ font-family:var(--sans); font-weight:600; letter-spacing:-.02em; line-height:1.1; font-size:clamp(1.35rem,.95rem + 1.05vw,2rem);
  text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.3em;
  transition:text-decoration-color .3s ease }
.c29__r{ font-family:var(--lee); font-size:1rem; line-height:1.45; color:#E3EAEA }
.c29__q{ font-family:var(--sans); font-size:.84rem; line-height:1.45; color:#AFC0C4 }
.c29__ir{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; margin-top:.35rem;
  box-shadow:inset 0 0 0 1.5px rgba(244,242,238,.4); color:var(--papel); transition:background .3s ease, color .3s ease, box-shadow .3s ease }
.c29__pie{ font-family:var(--sans); font-size:.82rem; line-height:1.45; color:#E7E2D6; margin:0 }
.c29__dir{ display:block; font-weight:650; color:var(--cm) }
.c29__hub{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:clamp(1.25rem,2.5vw,1.75rem); border-top:1px solid rgba(244,242,238,.16) }
.c29__eco{ margin:0; font-family:var(--lee); font-size:1rem; line-height:1.55; color:#C9D4D7; max-width:56ch }
.c29__eco a{ color:var(--papel); text-underline-offset:.2em }
.c29__eco a:hover{ color:var(--sol-2) }
.c29__acc{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0 }

/* Escena al fondo (pantallas anchas) */
@media (min-width:64rem){
  .c29{ min-height:min(112svh, 62rem); display:flex; flex-direction:column }
  .c29__in{ flex:1; display:flex; flex-direction:column; width:100% }
  .c29__escena{ margin-top:auto; padding-top:clamp(8rem,16vw,15rem) }
  /* el velo: arriba para el título, abajo para el índice */
  .c29::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(6,17,31,.88) 0%, rgba(6,17,31,.5) 30%, rgba(6,17,31,.22) 50%, rgba(6,17,31,.8) 74%, rgba(6,17,31,.96) 100%),
      linear-gradient(90deg, rgba(6,17,31,.62) 0%, rgba(6,17,31,0) 58%) }
  .c29__lista{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(1rem,2vw,2rem) }
  .c29__foto{ position:absolute; inset:0; z-index:-4; opacity:0; visibility:hidden }
  .c29__i[data-prev] .c29__foto{ z-index:-3; opacity:1; visibility:visible }
  .c29__i[data-on] .c29__foto{ z-index:-2; opacity:1; visibility:visible; animation:c29-cortina 1s var(--salida) both }
  .c29__lista[data-dir="atras"] .c29__i[data-on] .c29__foto{ animation-name:c29-cortina-atras }
  .c29__foto img{ transform:scale(1.05); transition:transform 7s var(--salida) }
  .c29__i[data-on] .c29__foto img{ transform:scale(1) }
  /* un velo breve del color de la comunidad acompaña la cortina */
  .c29__foto::after{ content:""; position:absolute; inset:0; background:var(--cm); opacity:0; mix-blend-mode:soft-light }
  .c29__i[data-on] .c29__foto::after{ animation:c29-tinte 1.4s ease both }
  .c29__a{ display:grid; grid-template-rows:auto auto 1fr auto; align-content:start; gap:.45rem; height:100%; padding-top:1.1rem; border-top:1px solid rgba(244,242,238,.3);
    opacity:.66; transition:opacity .35s ease, border-color .35s ease }
  .c29__i[data-on] .c29__a,.c29__a:hover,.c29__a:focus-visible{ opacity:1 }
  .c29__i[data-on] .c29__a{ border-top-color:rgba(244,242,238,.7) }
  .c29__i[data-on] .c29__n{ text-decoration-color:var(--cm) }
  .c29__i[data-on] .c29__ir{ background:var(--cm); color:var(--noche); box-shadow:none }
  .c29__ir{ align-self:end }
  .c29__pie{ position:absolute; top:clamp(5rem,9vw,8rem); right:max(var(--canal), calc((100vw - var(--ancho)) / 2 + var(--canal)));
    max-width:24ch; text-align:right; opacity:0; transition:opacity .4s ease; text-shadow:0 1px 12px rgba(6,17,31,.8) }
  .c29__i[data-on] .c29__pie{ opacity:1; transition-delay:.25s }
}
@keyframes c29-cortina{ from{ clip-path:inset(0 0 0 100%) } to{ clip-path:inset(0 0 0 0) } }
@keyframes c29-cortina-atras{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes c29-tinte{ 0%{ opacity:.55 } 100%{ opacity:0 } }

/* Carrusel (celular y tableta) */
@media (max-width:63.99rem){
  .c29__escena{ margin-top:clamp(1.75rem,5vw,2.5rem) }
  .c29__lista{ display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--canal)); padding:0 var(--canal) .25rem; scroll-padding-inline:var(--canal); scrollbar-width:none }
  .c29__lista::-webkit-scrollbar{ display:none }
  .c29__i{ position:relative; isolation:isolate; flex:0 0 min(84%, 25rem); scroll-snap-align:start; border-radius:1rem; overflow:hidden;
    min-height:clamp(27rem,128vw,34rem); display:flex; flex-direction:column; justify-content:flex-end; background:var(--noche) }
  .c29__foto{ position:absolute; inset:0; z-index:-2 }
  .c29__i::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(to top, rgba(6,17,31,.96) 0, rgba(6,17,31,.82) 36%, rgba(6,17,31,.18) 70%, rgba(6,17,31,.35) 100%) }
  .c29__a{ display:grid; gap:.4rem; padding:1.3rem 1.25rem 1.4rem }
  .c29__n{ text-decoration-color:var(--cm) }
  .c29__ir{ background:var(--cm); color:var(--noche); box-shadow:none }
  .c29__pie{ position:absolute; top:1rem; left:1.25rem; right:1.25rem; font-size:.78rem; text-shadow:0 1px 10px rgba(6,17,31,.85) }
  .c29__pie > span:not(.c29__dir){ display:none }
  .c29__mando:not([hidden]){ display:flex; align-items:center; gap:.75rem; margin-top:1.1rem }
  .c29__btn{ appearance:none; flex:0 0 auto; width:var(--toque); height:var(--toque); border-radius:50%; border:0; display:grid; place-items:center;
    background:rgba(244,242,238,.08); box-shadow:inset 0 0 0 1px rgba(244,242,238,.32); color:var(--papel); cursor:pointer }
  .c29__btn svg{ width:1.15rem; height:1.15rem }
  .c29__btn:disabled{ opacity:.35; cursor:default }
  .c29__btn:focus-visible{ outline:3px solid var(--sol); outline-offset:3px }
  .c29__estado{ margin:0; font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--papel); white-space:nowrap }
  .c29__regla{ flex:1; height:2px; background:rgba(244,242,238,.18); position:relative; overflow:hidden; border-radius:2px }
  .c29__regla i{ position:absolute; inset:0 auto 0 0; width:20%; background:var(--cm, var(--sol-2)); transform:translateX(calc(var(--k,0) * 100%));
    transition:transform .4s var(--salida), background .3s ease }
  .c29__hub{ flex-direction:column; align-items:flex-start }
}

/* =============================================================== FRENTES (v30: el fin y sus ramas) */
/* v30 (corrección 2): las barras que se abren se quedan. Cabecera centrada; el fin es un nudo con halo y de él
   bajan cuatro ramas curvas que siguen el ancho de cada barra (v29-portada.js). La rama del frente abierto se
   enciende en sol y corre como un flujo; cada rama termina en un nudo sobre su barra. */
.f29{ position:relative; isolation:isolate; overflow:clip; background:var(--papel) }
.f29__curvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; fill:none; stroke:var(--petroleo); opacity:.14 }
.f29__curvas path{ stroke-width:1; vector-effect:non-scaling-stroke }
.f30::after{ content:""; position:absolute; z-index:-1; left:50%; top:clamp(14rem,24vw,19rem); width:min(70rem,120vw); height:28rem; transform:translateX(-50%);
  pointer-events:none; background:radial-gradient(closest-side, rgba(217,164,65,.16), rgba(217,164,65,0)) }
.f30__cab{ display:grid; justify-items:center; text-align:center; max-width:52rem; margin-inline:auto }
.f30__cab .antetitulo{ color:var(--petroleo) }
.f29__t{ font-family:var(--sans); font-weight:600; font-size:clamp(2.3rem,1.3rem + 3.2vw,4.4rem); line-height:1; letter-spacing:-.035em; color:var(--tinta); margin:0 }
.f30__lede{ margin:clamp(1rem,2vw,1.4rem) auto 0; font-family:var(--lee); font-size:1.1rem; line-height:1.6; color:var(--tinta-2); max-width:56ch; text-wrap:pretty }
.f29__arbol{ display:grid; justify-items:center; margin-top:clamp(2.25rem,4.5vw,3.5rem) }
.f29__fin{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:.1rem; margin:0; padding:.8rem 1.9rem .85rem; border-radius:999px;
  background:var(--noche); color:var(--papel); text-align:center;
  box-shadow:inset 0 0 0 1.5px var(--sol), 0 0 0 7px rgba(217,164,65,.14), 0 0 0 15px rgba(217,164,65,.06), 0 24px 44px -24px rgba(10,26,47,.7) }
.f29__fin b{ font-family:var(--sans); font-size:clamp(1.05rem,.95rem + .4vw,1.3rem); font-weight:650; letter-spacing:-.01em }
.f29__fin span{ font-family:var(--lee); font-style:italic; font-size:.95rem; color:var(--sol-2) }
.f29__tallo{ display:block; width:2px; height:1.9rem; background:var(--sol); transform-origin:top }
.f30__ramas{ display:none }
.f29__barras{ margin-top:0 }
.f29__mas{ margin-top:clamp(1.75rem,3.5vw,2.75rem) }
.f30__mas{ text-align:center }
@media (min-width:72rem){
  .f30__tallo{ height:.6rem }
  .f30__ramas{ display:block; position:relative; width:100%; height:4.25rem }
  .f30__ramas svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
  .f30__rama{ fill:none; stroke:rgba(14,23,38,.24); stroke-width:1.6; vector-effect:non-scaling-stroke; transition:stroke .35s ease }
  .f30__rama[data-on]{ stroke:var(--sol); stroke-width:2.4; stroke-dasharray:7 7; animation:f30-flujo 1.1s linear infinite }
  .f30__nudo{ position:absolute; bottom:-.42rem; width:.84rem; height:.84rem; margin-left:-.42rem; border-radius:50%;
    background:var(--papel); box-shadow:inset 0 0 0 2px rgba(14,23,38,.32); transition:background .35s ease, box-shadow .35s ease, transform .35s var(--salida) }
  .f30__nudo[data-on]{ background:var(--sol); box-shadow:0 0 0 4px rgba(217,164,65,.22); transform:scale(1.15) }
  .f30__barras{ margin-top:.5rem }
}
@keyframes f30-flujo{ to{ stroke-dashoffset:-14 } }
/* el árbol se dibuja una vez al entrar */
.rv .f29__arbol:not(.visto) .f29__tallo{ transform:scaleY(0) }
.rv .f29__arbol:not(.visto) .f30__ramas{ opacity:0 }
.f29__tallo{ transition:transform .6s var(--salida) .35s }
.f30__ramas{ transition:opacity .6s ease .7s }

/* =============================================================== CÓMO SE MIDE */
.m29{ position:relative; isolation:isolate; overflow:clip; background:var(--petroleo-hondo); padding-block:var(--banda) }
.m29__fondo{ position:absolute; inset:0; z-index:-2 }
.m29__fondo picture{ display:block; height:100% }
.m29__fondo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); opacity:.3; filter:grayscale(.35) }
.m29::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(15,59,59,.95) 0%, rgba(15,59,59,.78) 48%, rgba(15,59,59,.9) 100%) }
.m29 .ict.m29__rej{ max-width:none; display:grid; gap:clamp(1.75rem,3.5vw,2.75rem) clamp(2rem,5vw,4.5rem) }
@media (min-width:64rem){
  .m29 .ict.m29__rej{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); grid-template-areas:"cab aparato" "res aparato"; align-items:start }
  .m29__cab{ grid-area:cab } .m29__aparato{ grid-area:aparato } .m29__res{ grid-area:res }
}
.m29__cab .antetitulo{ color:var(--sol-2) }
.m29__t{ font-family:var(--sans); font-weight:600; font-size:clamp(1.9rem,1.2rem + 2.1vw,3.1rem); line-height:1.06; letter-spacing:-.03em; color:var(--papel); margin:0; max-width:18ch; text-wrap:balance }
.m29__entrada{ margin:clamp(1rem,2vw,1.4rem) 0 0; font-family:var(--lee); font-size:1.08rem; line-height:1.6; color:#D4E2E0; max-width:46ch }
.m29__entrada a{ color:var(--papel); text-underline-offset:.2em }
.m29__aparato{ padding:clamp(1.1rem,2.4vw,2rem); border-radius:1.25rem; background:rgba(6,17,31,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(244,242,238,.14) }
.m29 .m29__guia{ display:block; margin:0; font-family:var(--sans); font-size:.92rem; line-height:1.5; color:#DCE7E6; max-width:46ch }

/* el medidor: cinco columnas que se llenan de abajo arriba */
.m29 .m29__filas{ --celda:2.75rem; --hueco:.35rem; --colgap:clamp(.45rem,1.6vw,1.1rem);
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); column-gap:var(--colgap); margin-top:1.4rem }
.m29 .ict__fila,.m29 .ict__fila + .ict__fila{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;
  gap:.55rem; padding:0; border:0; min-width:0 }
.m29 .ict__fila::after{ content:none }
.m29 .ict__niveles{ position:relative; display:flex; flex-direction:column-reverse; gap:var(--hueco) }
.m29 .ict__nivel span{ width:100%; height:var(--celda); border-radius:.5rem }
.m29 .ict__nivel input:checked + span{ transform:none; box-shadow:0 0 0 2px var(--papel) }
/* línea de la más baja (sol) y del promedio (discontinua), que cruzan las cinco columnas */
.m29 .ict__niveles::before,.m29 .ict__niveles::after{ content:""; position:absolute; z-index:2; height:0; pointer-events:none;
  left:calc(var(--colgap) / -2); right:calc(var(--colgap) / -2); transition:bottom .55s var(--salida) }
.m29 .ict__niveles::after{ bottom:calc(var(--min) * (var(--celda) + var(--hueco)) - var(--hueco) / 2 - 1.5px); border-top:3px solid var(--sol-2) }
.m29 .ict__niveles::before{ bottom:calc(var(--prom) * (var(--celda) + var(--hueco)) - var(--hueco) / 2 - 1px); border-top:2px dashed rgba(244,242,238,.75) }
.m29 .ict__fila:first-child .ict__niveles::before,.m29 .ict__fila:first-child .ict__niveles::after{ left:0 }
.m29 .ict__fila:last-child .ict__niveles::before,.m29 .ict__fila:last-child .ict__niveles::after{ right:0 }
.m29 .ict__v{ display:flex; flex-direction:column; align-items:center; gap:.3rem; min-height:3.1rem }
.m29 .ict__v b{ width:auto }
.m29 .ict__manda{ position:static; translate:none; display:inline-block; font-size:.72rem }
.m29 .ict__lab{ flex:none; display:grid; gap:.2rem; text-align:center; justify-items:center }
.m29 .ict__lab b{ font-size:.92rem; line-height:1.25 }
.m29__p{ display:block; font-size:.76rem; font-weight:600; color:#A9C2C0 }
.m29 .ict__fila[data-baja] .m29__p{ color:var(--sol-2) }
.m29 .ict__lab > span{ font-size:.78rem; line-height:1.35; color:#B9CFCD }
.m29__ley{ list-style:none; margin:1.4rem 0 0; padding:1rem 0 0; border-top:1px solid rgba(244,242,238,.14); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  font-family:var(--sans); font-size:.86rem; color:#DCE7E6 }
.m29__ley li{ display:flex; align-items:center; gap:.6rem }
.m29__l{ display:inline-block; width:1.8rem; height:0 }
.m29__l--min{ border-top:3px solid var(--sol-2) }
.m29__l--prom{ border-top:2px dashed rgba(244,242,238,.75) }
.m29 .m29__res{ align-items:flex-start; text-align:left; justify-content:flex-start; padding:0; background:none; box-shadow:none; border-radius:0 }
.m29 .m29__res .ict__acc{ justify-content:flex-start }
.m29 .m29__res .ict__frase{ max-width:38ch }
.m29__pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:clamp(2.25rem,4vw,3.25rem) }
.m29__nota{ margin:0; font-family:var(--sans); font-size:.86rem; color:#B9CFCD }
@media (max-width:47.99rem){
  .m29 .m29__filas{ --celda:2.75rem; --hueco:.3rem }
  .m29 .ict__lab > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .m29 .ict__lab b{ font-size:.74rem; -webkit-hyphens:manual; hyphens:manual }
  .m29 .ict__manda{ font-size:.66rem; padding:.12rem .35rem }
}

/* v30 · el dial de la confianza declarada (corrección 3) */
.m30__medidor{ position:relative; width:min(100%,17.5rem); margin-top:.6rem; display:grid; justify-items:center }
.m30__dial{ display:block; width:100%; height:auto; overflow:visible }
.m30__seg{ fill:var(--sol-2); opacity:clamp(.16, calc(var(--min) - var(--k) + 1), 1); transition:opacity .45s ease }
.m30__nums text{ font-family:var(--sans); font-size:11px; font-weight:600; fill:#A9C2C0; text-anchor:middle }
.m30__aguja{ transform-box:view-box; transform-origin:110px 108px; stroke-linecap:round;
  transition:transform .7s cubic-bezier(.34,1.4,.5,1) }
.m30__aguja--min{ stroke:var(--papel); stroke-width:4; transform:rotate(calc((var(--min) - .5) * 36deg - 90deg)) }
.m30__aguja--prom{ stroke:rgba(244,242,238,.6); stroke-width:2; stroke-dasharray:4 4; transform:rotate(calc((var(--prom) - .5) * 36deg - 90deg)) }
.m30__eje{ fill:var(--papel); stroke:var(--petroleo-hondo); stroke-width:3 }
.m29 .m30__n{ margin:.35rem 0 0; justify-content:center }
.m29 .m30__n b{ font-size:clamp(2.2rem,1.8rem + 1.2vw,2.9rem) }
.m29 .m30__medidor + .ict__barra{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.m29 .m29__res .ict__k{ margin:0 }
.m29 .m29__res .ict__frase{ margin-top:1.1rem }
.m29 .ict__prom-barra{ display:none }
.m29 .ict__prom{ width:min(100%,24rem) }
.m29__nota{ max-width:46ch }
@media (prefers-reduced-motion:reduce){ .m30__seg,.m30__aguja{ transition:none } }

/* =============================================================== OBSERVATORIO */
.o29{ position:relative; isolation:isolate; overflow:clip; background:var(--noche-hondo); color:var(--papel); padding-block:var(--banda) }
.o29__in{ display:grid; gap:clamp(2.25rem,5vw,4.5rem); align-items:center }
@media (min-width:64rem){ .o29__in{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) } }
.o29__cab .antetitulo{ color:var(--ac-lab) }
.o29__t{ font-family:var(--sans); font-weight:600; font-size:clamp(1.9rem,1.2rem + 2.1vw,3.1rem); line-height:1.06; letter-spacing:-.03em; margin:0; max-width:18ch; text-wrap:balance }
.o29__d{ margin:clamp(1rem,2vw,1.4rem) 0 0; font-family:var(--lee); font-size:1.06rem; line-height:1.6; color:#C9D4D7; max-width:48ch }
.o29__puertas{ list-style:none; margin:clamp(1.5rem,3vw,2.25rem) 0 0; padding:0; border-top:1px solid rgba(244,242,238,.12) }
.o29__puertas li{ border-bottom:1px solid rgba(244,242,238,.12) }
.o29__puertas a{ display:flex; align-items:center; gap:1rem; padding:.95rem .25rem; color:var(--papel); text-decoration:none; border-radius:.75rem; transition:background .25s ease }
.o29__puertas a:hover{ background:rgba(244,242,238,.04) }
.o29__puertas a:focus-visible{ outline:3px solid var(--sol); outline-offset:2px }
.o29__pico{ flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; color:var(--ac-lab);
  background:color-mix(in srgb, var(--ac-lab) 12%, var(--noche-hondo)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ac-lab) 60%, transparent);
  transition:transform .3s var(--salida) }
.o29__pico svg{ width:1.25rem; height:1.25rem }
.o29__puertas a:hover .o29__pico{ transform:scale(1.07) }
.o29__ptxt{ display:grid; gap:.1rem; font-family:var(--sans) }
.o29__ptxt b{ font-size:1rem; font-weight:650 }
.o29__ptxt span{ font-size:.86rem; color:#AFC0C4 }
.o29__acc{ margin:clamp(1.5rem,3vw,2rem) 0 0 }
.o29__dato{ margin:0; padding:clamp(1.1rem,2.4vw,1.9rem); border-radius:1.25rem; background:rgba(244,242,238,.035); border:1px solid rgba(244,242,238,.12) }
.o29__k{ margin:0; font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--sol-2) }
.o29__que{ margin:.4rem 0 0; font-family:var(--lee); font-size:clamp(1.1rem,1rem + .4vw,1.32rem); line-height:1.4; color:var(--papel); max-width:36ch }
.o29__lienzo{ position:relative; margin-top:1rem }
.o29__mapa{ display:block; width:100%; height:auto; max-height:32rem; overflow:visible }
.o29__prov path{ stroke:var(--noche-hondo); stroke-width:1.3; stroke-linejoin:round; transition:fill .25s ease, filter .25s ease }
.o29__prov path[data-nivel="0"]{ fill:#1D3E50 }
.o29__prov path[data-nivel="1"]{ fill:#2A6170 }
.o29__prov path[data-nivel="2"]{ fill:#3D8A88 }
.o29__prov path[data-nivel="3"]{ fill:#5FB3AC }
.o29__prov path[data-nivel="4"]{ fill:#A7DCD3 }
.o29__prov{ outline:none; cursor:pointer }
.o29__prov:hover path,.o29__prov:focus-visible path,.o29__prov[data-sel] path{ filter:brightness(1.22); stroke:var(--papel); stroke-width:2.2 }
.o29__prov--lc path{ stroke:var(--sol-2); stroke-width:2.4 }
.o29__marca{ pointer-events:none }
.o29__marca circle{ fill:var(--sol-2); stroke:var(--noche-hondo); stroke-width:2 }
.o29__marca .o29__onda{ fill:none; stroke:var(--sol-2); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:o29-onda 2.6s ease-out infinite }
@keyframes o29-onda{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(3.6); opacity:0 } }
.o29__lectura{ margin:0 0 .6rem; min-height:2.9rem; display:grid; align-content:start; gap:.1rem; font-family:var(--sans); pointer-events:none }
.o29__lectura b{ font-size:1.15rem; font-weight:650; color:var(--papel) }
.o29__lectura span{ font-size:.85rem; color:#AFC0C4 }
.o29__ley{ display:flex; align-items:center; gap:.6rem; margin-top:1rem; font-family:var(--sans); font-size:.8rem; color:#AFC0C4 }
.o29__ley ul{ list-style:none; margin:0; padding:0; display:flex; gap:2px }
.o29__ley i{ display:block; width:1.9rem; height:.55rem; border-radius:2px }
.o29__ley i[data-nivel="0"]{ background:#1D3E50 } .o29__ley i[data-nivel="1"]{ background:#2A6170 } .o29__ley i[data-nivel="2"]{ background:#3D8A88 }
.o29__ley i[data-nivel="3"]{ background:#5FB3AC } .o29__ley i[data-nivel="4"]{ background:#A7DCD3 }
.o29__f{ margin-top:.9rem; font-family:var(--sans); font-size:.84rem; line-height:1.55; color:#AFC0C4; max-width:60ch }
.o29__f a{ color:#DCE3E6; text-underline-offset:.2em }
.o29__f a:hover{ color:var(--papel) }

/* v30 · el Perú, región por región (corrección 4) */
.o30{ --r0:#21445A; --r1:#2B6672; --r2:#3F8F8A; --r3:#6CBDB3; --r4:#B5E3D8 }
.o30::before{ content:""; position:absolute; z-index:-1; right:-10%; top:8%; width:min(64rem,110vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,196,190,.16), rgba(124,196,190,.05) 55%, rgba(124,196,190,0)) }
@media (min-width:64rem){ .o30__in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) } }
.o30__acc{ display:flex; flex-wrap:wrap; gap:.75rem }
.o30__dato{ margin:0; display:grid; justify-items:center; text-align:center }
.o30__dato .o29__que{ margin-inline:auto }
.o30__marco{ position:relative; width:min(100%, calc(38rem * var(--arn))); margin-top:1.1rem }
.o30__lienzo{ position:relative; width:100%; aspect-ratio:var(--ar) }
.o30__mapa{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.o30__reg{ outline:none; cursor:pointer }
.o30__reg path{ fill:var(--r1); stroke:var(--noche-hondo); stroke-width:1.1; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:fill .25s ease, filter .25s ease, stroke .25s ease }
.o30__reg path[data-nivel="0"]{ fill:var(--r0) } .o30__reg path[data-nivel="1"]{ fill:var(--r1) } .o30__reg path[data-nivel="2"]{ fill:var(--r2) }
.o30__reg path[data-nivel="3"]{ fill:var(--r3) } .o30__reg path[data-nivel="4"]{ fill:var(--r4) }
.o30__mapa--sin .o30__reg path{ fill:#24485E; stroke:rgba(124,196,190,.55) }
.o30__mapa:hover .o30__reg:not(:hover):not([data-sel]) path{ filter:saturate(.7) brightness(.82) }
.o30__reg:hover path,.o30__reg:focus-visible path,.o30__reg[data-sel] path{ filter:brightness(1.15); stroke:var(--papel); stroke-width:2.2 }
.o30__reg--piloto path{ stroke:var(--sol-2); stroke-width:2.2 }
.o30__reg:focus-visible path{ stroke:var(--sol); stroke-width:3 }
.o30__lectura{ position:absolute; left:0; bottom:0; z-index:2; width:min(42%,12.5rem); margin:0; text-align:left; min-height:0;
  padding:.7rem .85rem; border-radius:.8rem; background:rgba(6,17,31,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(244,242,238,.12) }
.o30__lectura b{ font-size:1.08rem }
.o30__lectura span{ font-size:.84rem; line-height:1.4; color:#C9D4D7 }
.o30__lectura em{ display:block; margin-top:.2rem; font-style:normal; font-size:.78rem; font-weight:600; color:var(--ac-lab) }
.o30__piloto{ position:absolute; z-index:2; display:flex; align-items:center; gap:.45rem; transform:translate(-.42rem,-50%);
  color:var(--papel); text-decoration:none; font-family:var(--sans); white-space:nowrap }
.o30__piloto i{ position:relative; flex:0 0 auto; width:.84rem; height:.84rem; border-radius:50%; background:var(--sol-2); box-shadow:0 0 0 3px var(--noche-hondo) }
.o30__piloto i::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--sol-2); animation:o30-onda 2.6s ease-out infinite }
@keyframes o30-onda{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(3.4); opacity:0 } }
.o30__piloto span{ display:grid; padding:.35rem .6rem; border-radius:.6rem; background:rgba(6,17,31,.78); border:1px solid rgba(232,194,112,.45);
  font-size:.74rem; line-height:1.25; color:#C9D4D7; text-align:left; transition:background .25s ease }
.o30__piloto b{ font-size:.86rem; font-weight:650; color:var(--sol-2) }
.o30__piloto:hover span{ background:rgba(6,17,31,.95) }
.o30__piloto:focus-visible{ outline:3px solid var(--sol); outline-offset:3px; border-radius:.6rem }
.o30__ley{ width:min(100%,24rem); margin-top:1.1rem }
.o30__ley-t{ margin:0 0 .45rem; font-family:var(--sans); font-size:.8rem; font-weight:600; color:#C9D4D7 }
.o30__escala ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:2px }
.o30__escala i{ display:block; height:.55rem; border-radius:2px }
.o30__escala i[data-nivel="0"]{ background:var(--r0) } .o30__escala i[data-nivel="1"]{ background:var(--r1) } .o30__escala i[data-nivel="2"]{ background:var(--r2) }
.o30__escala i[data-nivel="3"]{ background:var(--r3) } .o30__escala i[data-nivel="4"]{ background:var(--r4) }
.o30__cortes{ position:relative; height:1.1rem; margin:.3rem 1.2rem 0 0; font-family:var(--sans); font-size:.74rem; color:#AFC0C4; font-variant-numeric:tabular-nums }
.o30__cortes span{ position:absolute; top:0; transform:translateX(-50%) }
.o30__cortes span:first-child{ transform:none }
.o30__cortes span:last-of-type{ transform:translateX(-100%) }
.o30__cortes b{ position:absolute; right:-1.2rem; top:0; font-weight:500 }
.o30 .o29__f{ max-width:52ch; margin-inline:auto; text-align:center }
@media (max-width:47.99rem){
  .o30__lectura{ position:relative; width:100%; margin-top:.75rem; text-align:center; justify-items:center; min-height:4.6rem; padding:.55rem .65rem }
  .o30__lectura b{ font-size:.98rem }
  .o30__lectura span{ font-size:.78rem }
  .o30__piloto span{ font-size:.68rem; padding:.28rem .45rem }
  .o30__piloto b{ font-size:.78rem }
}
@media (max-width:26rem){
  .o30__piloto{ gap:.3rem }
  .o30__piloto span{ font-size:0; padding:.25rem .4rem }
  .o30__piloto b{ font-size:.74rem }
}
@media (prefers-reduced-motion:reduce){ .o30__reg path,.o30__piloto span{ transition:none } .o30__piloto i::after{ animation:none; display:none } }

/* =============================================================== PROYECTOS (v30: noche, petróleo y sol) */
/* v30 (corrección 5: «este color no me gusta»): fuera la paleta de tierra. El dispositivo fijo es una pantalla de
   noche, como las del Ecosistema: el Perú en petróleo con bordes finos, la región en un tono más claro y el foco en
   sol, con su onda. La escala (comunidad, región, país) es una regla con tres nudos que se llena al avanzar. Cada
   historia es una foto grande con el texto en una placa de vidrio que se monta sobre ella, en capas. */
.p29{ position:relative; isolation:isolate; overflow:clip; background:var(--papel); color:var(--tinta); padding-block:var(--banda) }
.p29::before{ content:""; position:absolute; z-index:-1; left:-12%; top:18%; width:min(60rem,110vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(20,80,79,.1), rgba(20,80,79,0)) }
.p29__defs{ position:absolute; width:0; height:0; overflow:hidden }
.p29__cab{ display:grid; justify-items:center; text-align:center; max-width:52rem; margin-inline:auto }
.p29__cab .antetitulo{ color:var(--petroleo) }
.p29__t{ font-family:var(--sans); font-weight:600; font-size:clamp(2.2rem,1.3rem + 2.9vw,4.1rem); line-height:1.02; letter-spacing:-.035em; margin:0; max-width:18ch; text-wrap:balance }
.p29__entrada{ margin:clamp(1rem,2vw,1.4rem) auto 0; font-family:var(--lee); font-size:clamp(1.06rem,1rem + .3vw,1.22rem); line-height:1.6; color:var(--tinta-2); max-width:48ch }
.p29__rej{ display:grid; gap:clamp(2rem,5vw,5rem); margin-top:clamp(2.5rem,5vw,4rem) }
/* el mapa */
.p29__tierra{ fill:#1C3850; stroke:rgba(124,196,190,.38); stroke-width:1; transition:fill .9s ease }
.p29__region{ fill:#2A6170; stroke:rgba(124,196,190,.5); stroke-width:1; transition:fill .9s ease }
.p29__foco{ fill:var(--sol); stroke:var(--papel); stroke-width:1.2 }
.p29__mapa .p29__foco{ opacity:0; transition:opacity .6s ease .5s }
.p29[data-paso="0"] .p29__foco--0,.p29[data-paso="1"] .p29__foco--1{ opacity:1 }
.p29[data-paso="2"] .p29__mapa :is(.p29__tierra,.p29__region){ fill:#3F8F8A; stroke:rgba(244,242,238,.45) }
.p29__mini--pais :is(.p29__tierra){ fill:#3F8F8A }
.p29__mpunto{ fill:var(--sol); stroke:var(--papel); stroke-width:1; vector-effect:non-scaling-stroke }
.p29__mapa{ display:block; width:100%; height:min(calc(100svh - var(--alto-nav) - 14rem), 40rem); overflow:hidden }
.p29__g{ transform-box:view-box; transform-origin:0 0; transform:var(--z0); transition:transform 1.4s cubic-bezier(.65,.05,.25,1) }
.p29[data-paso="1"] .p29__g{ transform:var(--z1) }
.p29[data-paso="2"] .p29__g{ transform:var(--z2) }
.p29__marca{ opacity:0; transition:opacity .4s ease }
.p29[data-paso="0"] .p29__marca[data-m="0"],.p29[data-paso="1"] .p29__marca[data-m="1"]{ opacity:1; transition-delay:1.1s }
.p29__marca circle{ fill:var(--sol-2); stroke:var(--noche); stroke-width:3.5 }
.p29__marca .p29__onda{ fill:none; stroke:var(--sol-2); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:o29-onda 2.6s ease-out infinite }
@keyframes o29-onda{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(3.6); opacity:0 } }
.p29__disp{ display:none }
.p29__marco{ position:relative; padding:0 }
@media (min-width:64rem){
  .p29__disp{ overflow:hidden; border-radius:1.4rem;
    background:radial-gradient(120% 90% at 62% 38%, #14324C 0%, var(--noche) 62%, var(--noche-hondo) 100%);
    border:1px solid rgba(124,196,190,.18); box-shadow:0 40px 80px -48px rgba(10,26,47,.75) }
}
.p29__lugar{ position:absolute; left:clamp(1.1rem,2vw,1.6rem); top:clamp(1rem,2vw,1.4rem); margin:0; font-family:var(--lee); font-style:italic; font-size:1.2rem; color:var(--sol-2) }
.p29__lugar span{ display:none }
.p29__lugar span[data-on]{ display:inline; animation:q29-entra .5s var(--salida) both }
/* la regla de la escala, dentro de la pantalla */
.p29__disp nav{ position:relative; padding:1rem clamp(1rem,2vw,1.6rem) .4rem; border-top:1px solid rgba(244,242,238,.1); background:rgba(6,17,31,.55) }
.p29__regla{ --k:0; position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr) }
.p29[data-paso="1"] .p29__regla{ --k:1 } .p29[data-paso="2"] .p29__regla{ --k:2 }
.p29__regla::before,.p29__regla::after{ content:""; position:absolute; top:.45rem; left:16.667%; height:2px; border-radius:2px }
.p29__regla::before{ right:16.667%; background:rgba(244,242,238,.18) }
.p29__regla::after{ width:calc(var(--k) * 33.333%); background:var(--sol); transition:width .9s var(--salida) }
.p29__regla li{ position:relative; text-align:center; font-family:var(--sans); font-size:.88rem; font-weight:600; color:#AFC0C4; transition:color .3s ease }
.p29__regla li::before{ content:""; position:relative; z-index:1; display:block; width:.95rem; height:.95rem; margin:0 auto .45rem; border-radius:50%;
  background:var(--noche); box-shadow:inset 0 0 0 2px rgba(244,242,238,.4); transition:background .4s ease, box-shadow .4s ease }
.p29[data-paso="0"] .p29__regla li:nth-child(-n+1)::before,
.p29[data-paso="1"] .p29__regla li:nth-child(-n+2)::before,
.p29[data-paso="2"] .p29__regla li::before{ background:var(--sol); box-shadow:0 0 0 4px rgba(217,164,65,.2) }
.p29__regla li[aria-current]{ color:var(--papel) }
/* las historias: foto grande y placa de vidrio encima */
.p29__historias{ display:grid; gap:clamp(3.5rem,8vw,6rem) }
.p29__h{ display:grid; align-content:center }
.p29__foto{ display:block; border-radius:1.25rem; overflow:hidden; aspect-ratio:4 / 3; background:var(--noche) }
.p29__foto picture{ display:block; height:100% }
.p29__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block; transition:transform 1.4s var(--curva) }
.p29__h:hover .p29__foto img{ transform:scale(1.03) }
.p29__txt{ position:relative; display:grid; gap:.55rem; margin:clamp(-5rem,-7vw,-3rem) clamp(.75rem,2.5vw,1.75rem) 0; padding:clamp(1.1rem,2.4vw,1.7rem);
  border-radius:1.1rem; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.9); box-shadow:0 30px 60px -38px rgba(14,23,38,.55) }
.p29__txt > p{ margin:0 }
.p29__escala{ display:flex; align-items:center; gap:.75rem; font-family:var(--lee); font-style:italic; font-size:1.25rem; color:var(--petroleo) }
.p29__mini{ display:none }
.p29__sitio{ font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--tinta-2) }
.p29__ht{ font-family:var(--lee); font-weight:400; font-size:clamp(1.9rem,1.3rem + 1.7vw,2.9rem); line-height:1.08; letter-spacing:-.012em; margin:0 0 .2rem; color:var(--tinta); text-wrap:balance }
.p29__d{ font-family:var(--lee); font-size:1.06rem; line-height:1.62; color:var(--tinta-2); max-width:52ch }
.p29__txt .liga{ margin-top:.35rem; display:inline-block }
.p29__cifras{ list-style:none; margin:.6rem 0 .3rem; padding:1rem 0 0; border-top:1px solid rgba(14,23,38,.12); display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem }
.p29__cifras li{ display:grid; gap:.25rem; align-content:start }
.p29__cifras b{ font-family:var(--sans); font-weight:600; font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem); letter-spacing:-.03em; line-height:1; color:var(--petroleo) }
.p29__cifras span{ font-family:var(--lee); font-size:.95rem; line-height:1.45; color:var(--tinta) }
.p29__cifras small{ font-family:var(--sans); font-size:.78rem; line-height:1.45; color:var(--mudo) }
.p29__cifras a{ color:var(--tinta); text-underline-offset:.2em }
.p29__todos{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; text-align:center }
@media (min-width:64rem){
  .p29__rej{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start }
  .p29__disp{ display:block; position:sticky; top:calc(var(--alto-nav) + 1.5rem) }
  .p29__h{ min-height:min(82svh, 46rem) }
}
@media (max-width:63.99rem){
  .p29__mini{ display:block; flex:0 0 auto; width:3.6rem; height:3.6rem; border-radius:.7rem; background:var(--noche); padding:.2rem }
  .p29__mini .p29__tierra,.p29__mini .p29__region{ stroke-width:.6 }
}
@media (max-width:30rem){ .p29__cifras{ grid-template-columns:1fr } .p29__txt{ margin-inline:.5rem } }

/* =============================================================== FUNDADOR (v30: a orillas del río) */
.fu29{ position:relative; isolation:isolate; overflow:clip; background:var(--noche-hondo); color:var(--papel); min-height:min(94svh, 54rem); display:grid; align-items:center }
.fu29__foto{ position:absolute; inset:0 38% 0 0; z-index:-2; margin:0 }
.fu29__foto picture{ display:block; height:100% }
.fu29__foto img{ width:100%; height:100%; object-fit:cover; object-position:55% 62%; display:block }
/* la foto se funde con la noche donde empieza el texto */
.fu29__foto::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(270deg, var(--noche-hondo) 0%, rgba(6,17,31,.75) 12%, rgba(6,17,31,0) 38%),
    linear-gradient(0deg, rgba(6,17,31,.55) 0%, rgba(6,17,31,0) 28%) }
.fu29::before{ content:""; position:absolute; z-index:-1; right:-8%; top:50%; width:min(46rem,80vw); aspect-ratio:1; transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(217,164,65,.12), rgba(217,164,65,0)) }
.fu29__in{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); padding-block:clamp(5rem,9vw,8rem) }
.fu29__txt{ grid-column:2; max-width:32rem }
.fu29__txt .antetitulo{ color:var(--sol-2) }
.fu29__cita{ margin:0; font-family:var(--lee); font-style:italic; font-weight:400; font-size:clamp(1.7rem,1.05rem + 1.7vw,2.6rem); line-height:1.16; letter-spacing:-.01em; color:var(--papel); text-wrap:balance }
.fu29__firma{ display:grid; gap:.1rem; margin:clamp(1.25rem,2.5vw,1.75rem) 0 0; font-family:var(--sans) }
.fu29__firma b{ font-size:1.12rem; font-weight:650 }
.fu29__firma span{ font-size:.92rem; color:var(--sol-2) }
.fu29__bio{ margin:1rem 0 0; font-family:var(--lee); font-size:1.06rem; line-height:1.6; color:#DCE3E6; max-width:42ch }
.fu29__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin:clamp(1.5rem,3vw,2.1rem) 0 0 }
.fu29__acc .liga{ color:var(--papel) }
@media (min-width:48rem) and (max-width:63.99rem){
  .fu29__foto{ inset:0 30% 0 0 }
  .fu29__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}
@media (max-width:47.99rem){
  .fu29{ display:block; min-height:0 }
  .fu29__foto{ position:relative; inset:auto; z-index:0; aspect-ratio:4 / 5; max-height:88svh }
  .fu29__foto img{ object-position:50% 50% }
  .fu29__foto::after{ background:linear-gradient(0deg, var(--noche-hondo) 0%, rgba(6,17,31,.55) 14%, rgba(6,17,31,0) 32%) }
  .fu29::before{ display:none }
  .fu29__in{ grid-template-columns:1fr; position:relative; z-index:1; margin-top:-2.5rem; padding-block:0 clamp(3.5rem,10vw,4.5rem) }
  .fu29__txt{ grid-column:1 }
}

/* =============================================================== PREGUNTAS */
.faq29{ background:var(--papel); padding-block:var(--banda) }
.faq29__rej{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:start }
@media (min-width:64rem){
  .faq29__rej{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) }
  .faq29__lado{ position:sticky; top:calc(var(--alto-nav) + 1.5rem) }
}
.faq29__foto{ position:relative; margin:0; border-radius:1.25rem; overflow:hidden; aspect-ratio:1 / 1; background:var(--piedra) }
.faq29__foto picture{ display:block; height:100% }
.faq29__foto img{ width:100%; height:100%; object-fit:cover; object-position:54% 50%; display:block }
.faq29__capa{ position:absolute; inset:auto 0 0 0; padding:5rem clamp(1.2rem,2.4vw,1.8rem) clamp(1.2rem,2.4vw,1.7rem);
  background:linear-gradient(0deg, rgba(10,26,47,.92) 0%, rgba(10,26,47,.7) 45%, rgba(10,26,47,0) 100%) }
.faq29__capa .antetitulo{ display:block; color:var(--sol-2); margin-bottom:.4rem }
.faq29__t{ display:block; margin:0; font-family:var(--sans); font-weight:600; font-size:clamp(1.8rem,1.2rem + 1.7vw,2.7rem); line-height:1.04; letter-spacing:-.03em; color:var(--papel) }
.faq29__escribe{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem }
.faq29__escribe p{ margin:0; font-family:var(--lee); font-size:1.02rem; line-height:1.55; color:var(--tinta-2); max-width:30ch }
.faq29__lista{ display:grid; gap:.6rem }
.faq29__p{ border-radius:1rem; border:1px solid var(--filete); background:rgba(255,255,255,.35); transition:background .3s ease, border-color .3s ease, box-shadow .3s ease }
.faq29__p:hover{ background:rgba(255,255,255,.75) }
.faq29__p[open]{ background:var(--blanco); border-color:transparent; box-shadow:0 22px 46px -34px rgba(14,23,38,.5) }
.faq29__p summary{ list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1rem; align-items:center;
  padding:1rem 1.1rem; min-height:var(--toque); cursor:pointer; border-radius:1rem }
.faq29__p summary::-webkit-details-marker{ display:none }
.faq29__p summary:focus-visible{ outline:3px solid var(--sol); outline-offset:2px }
.faq29__ico{ display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:50%; color:var(--petroleo); background:rgba(20,80,79,.09);
  transition:background .3s ease, color .3s ease }
.faq29__ico svg{ width:1.4rem; height:1.4rem }
.faq29__p[open] .faq29__ico{ background:var(--petroleo); color:var(--papel) }
.faq29__q{ display:grid; gap:.15rem; min-width:0 }
.faq29__para{ font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--petroleo) }
.faq29__qt{ font-family:var(--sans); font-weight:600; font-size:clamp(1.04rem,.96rem + .35vw,1.26rem); line-height:1.3; letter-spacing:-.01em; color:var(--tinta) }
.faq29__mas{ position:relative; width:2.4rem; height:2.4rem; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--filete-firme); transition:background .3s ease, box-shadow .3s ease, transform .35s var(--salida) }
.faq29__mas::before,.faq29__mas::after{ content:""; position:absolute; left:50%; top:50%; width:.85rem; height:1.6px; margin:-.8px 0 0 -.425rem; background:var(--tinta); border-radius:1px; transition:transform .35s var(--salida) }
.faq29__mas::after{ transform:rotate(90deg) }
.faq29__p[open] .faq29__mas{ background:var(--sol); box-shadow:none }
.faq29__p[open] .faq29__mas::after{ transform:rotate(0) }
.faq29__r{ padding:0 1.25rem 1.35rem calc(1.1rem + 2.9rem + 1rem) }
.faq29__r p{ margin:0; font-family:var(--lee); font-size:1.04rem; line-height:1.62; color:var(--tinta-2); max-width:58ch }
.faq29__r p + p{ margin-top:.75rem }
.faq29__p[open] .faq29__r{ animation:q29-entra .4s var(--salida) both }
@media (max-width:63.99rem){
  .faq29__foto{ aspect-ratio:4 / 3 }
}
@media (max-width:47.99rem){
  .faq29__p summary{ gap:.8rem; padding:.9rem .9rem }
  .faq29__ico{ width:2.5rem; height:2.5rem }
  .faq29__mas{ width:2.1rem; height:2.1rem }
  .faq29__r{ padding:0 1rem 1.2rem 1rem }
}

/* v30 · Preguntas por quién pregunta (corrección 8) */
.faq30 .faq29__foto{ aspect-ratio:16 / 10 }
.faq30__nav{ margin-top:1.25rem }
.faq30__quien{ margin:0 0 .6rem; font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--petroleo) }
.faq30__indice{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem }
.faq30__g{ display:flex; align-items:center; gap:.8rem; min-height:var(--toque); padding:.5rem .8rem .5rem .5rem; border-radius:.9rem;
  color:var(--tinta); text-decoration:none; border:1px solid transparent; transition:background .25s ease, color .25s ease, border-color .25s ease }
.faq30__g:hover{ background:rgba(255,255,255,.7); border-color:var(--filete) }
.faq30__g:focus-visible{ outline:3px solid var(--sol); outline-offset:2px }
.faq30__g[aria-current]{ background:var(--noche); color:var(--papel); border-color:var(--noche) }
.faq30__gico,.faq30__gtico{ flex:0 0 auto; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  color:var(--petroleo); background:rgba(20,80,79,.09); transition:background .25s ease, color .25s ease }
.faq30__gico svg,.faq30__gtico svg{ width:1.25rem; height:1.25rem }
.faq30__g[aria-current] .faq30__gico{ background:var(--sol); color:var(--noche) }
.faq30__g > span:last-child{ display:grid; gap:.05rem; min-width:0 }
.faq30__g b{ font-family:var(--sans); font-size:.98rem; font-weight:650; line-height:1.25 }
.faq30__g small{ font-family:var(--sans); font-size:.8rem; line-height:1.35; color:var(--mudo) }
.faq30__g[aria-current] small{ color:#C9D4D7 }
.faq30__lista{ gap:0 }
.faq30__grupo{ display:grid; gap:.6rem }
.faq30__grupo + .faq30__grupo{ margin-top:clamp(2rem,4vw,2.75rem) }
.faq30--js .faq30__grupo + .faq30__grupo{ margin-top:0 }
.faq30--js .faq30__grupo[hidden]{ display:none }
.faq30--js .faq30__grupo:not([hidden]){ animation:q29-entra .45s var(--salida) both }
.faq30__gt{ display:flex; align-items:center; gap:.8rem; margin:0 0 .35rem; font-family:var(--sans); font-weight:600;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem); letter-spacing:-.02em; color:var(--tinta); outline:none }
.faq30__gt:focus-visible{ outline:3px solid var(--sol); outline-offset:4px; border-radius:.4rem }
.faq30__gtico{ width:2.9rem; height:2.9rem; background:var(--petroleo); color:var(--papel) }
.faq30__gtico svg{ width:1.45rem; height:1.45rem }
.faq30 .faq29__p summary{ grid-template-columns:minmax(0,1fr) auto; padding:1rem 1.1rem 1rem 1.25rem }
.faq30 .faq29__r{ padding:0 1.25rem 1.35rem 1.25rem }
.faq30__escribe{ margin-top:clamp(1.75rem,3.5vw,2.5rem); padding:1.1rem 1.25rem; border-radius:1rem; background:rgba(20,80,79,.06) }
@media (max-width:63.99rem){
  .faq30 .faq29__foto{ aspect-ratio:16 / 9 }
  .faq30__indice{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .faq30__g small{ display:none }
  .faq30__g{ border-color:var(--filete); background:rgba(255,255,255,.4) }
}
@media (max-width:23.5rem){
  .faq30__g{ gap:.5rem; padding-right:.5rem }
  .faq30__gico{ width:2rem; height:2rem }
  .faq30__g b{ font-size:.9rem }
}
@media (prefers-reduced-motion:reduce){ .faq30__g,.faq30__gico{ transition:none } .faq30--js .faq30__grupo:not([hidden]){ animation:none } }

/* =============================================================== MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion:reduce){
  .q29__foto,.q29__foto img,.q29__capa,.c29__foto img,.c29__a,.c29__n,.c29__ir,.c29__pie,.c29__regla i,.f29__tallo,.f30__ramas,.f30__rama,.f30__nudo,.m29 .ict__niveles::before,.m29 .ict__niveles::after,.o29__prov path,.o29__pico,.p29__g,.p29__foco,.p29__marca,
  .p29__tierra,.p29__region,.p29__foto img,.p29__regla li,.faq29__p,.faq29__ico,.faq29__mas,.faq29__mas::after{ transition:none !important }
  .q29__foto img,.c29__foto img{ transform:none !important }
  .qs--js .q29__panel:not([hidden]),.c29__i[data-on] .c29__foto,.c29__i[data-on] .c29__foto::after,.o29__marca .o29__onda,.p29__marca .p29__onda,
  .p29__lugar span[data-on],.faq29__p[open] .faq29__r{ animation:none !important }
  .o29__marca .o29__onda,.p29__marca .p29__onda{ display:none }
  .rv .f29__arbol:not(.visto) .f29__tallo{ transform:none }
  .rv .f29__arbol:not(.visto) .f30__ramas{ opacity:1 }
  .f30__rama[data-on]{ animation:none !important; stroke-dasharray:none }
  .p29__h:hover .p29__foto img{ transform:none }
}

/* =============================================================== v29.1 · ajustes del integrador */
/* Proyectos: la escala son anclas a cada historia (texto subrayado al pasar, no botones) */
.p29__regla a{ display:block; color:inherit; text-decoration:none; padding-bottom:.2rem; min-height:var(--toque) }
.p29__regla a:hover{ color:var(--papel); text-decoration:underline; text-decoration-color:var(--sol); text-underline-offset:.3em }
.p29__regla a:focus-visible{ outline:3px solid var(--sol); outline-offset:3px; border-radius:.3rem }
.p29__h{ scroll-margin-top:calc(var(--alto-nav) + 1.5rem) }

/* Aliados: banda clara con foto tenue y los logos en vidrio claro */
.a29{ position:relative; isolation:isolate; overflow:clip; background:var(--papel) }
.a29__fondo{ position:absolute; inset:0; z-index:-2 }
.a29__fondo picture{ display:block; height:100% }
.a29__fondo img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block }
.a29::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(244,242,238,.96) 0%, rgba(244,242,238,.88) 40%, rgba(244,242,238,.62) 100%) }
.a29__rej{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center }
@media (min-width:64rem){ .a29__rej{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) } }
.a29__cab .antetitulo{ color:var(--petroleo) }
.a29__t{ font-family:var(--sans); font-weight:600; font-size:clamp(1.9rem,1.2rem + 2vw,3rem); line-height:1.06; letter-spacing:-.03em; color:var(--tinta); margin:0; max-width:16ch; text-wrap:balance }
.a29__d{ margin:clamp(1rem,2vw,1.4rem) 0 0; font-family:var(--lee); font-size:1.06rem; line-height:1.6; color:var(--tinta-2); max-width:42ch }
.a29 .a29__mas{ text-align:left; margin-top:clamp(1.25rem,2.5vw,1.75rem) }
.a29__vidrio{ padding:clamp(1.25rem,3vw,2.25rem); border-radius:1.25rem; background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); border:1px solid rgba(255,255,255,.85);
  box-shadow:0 34px 70px -46px rgba(14,23,38,.5) }

/* v30 · Aliados sin los números «Empresas 2 / Instituciones 3» (corrección 7). aliados.js es de PÁGINAS: aquí solo
   se ocultan en la portada; el título de cada grupo queda. */
.a29 .aliados__cuenta{ display:none !important }

/* ================================================================ v31 · la portada engancha y distribuye
   HOJA_DE_RUTA_v31: hero con una línea de cliente y resultado; Qué somos compacta; puentes de una línea entre
   secciones; Proyectos como visor de unos 1300 px (un mapa que hace zoom y la ficha al lado); el Observatorio
   como franja dentro de «Cómo se mide»; fundador y aliados en una sola sección; cuatro preguntas para empezar y
   una puerta por comunidad; «Siguiente» hacia Qué hacemos. */

/* hero: para quién y qué resultado */
.hero__lede--v31{ max-width:50ch; font-size:clamp(1.02rem,.95rem + .35vw,1.2rem); line-height:1.5; text-wrap:balance }
@media (max-width:47.99rem){ .hero__lede--v31{ max-width:34ch; font-size:.98rem } }

/* puentes: una línea en cursiva, con un hilo que baja hacia la sección siguiente */
.puente31{ position:relative; margin:clamp(2.5rem,5vw,3.75rem) auto 0; max-width:42ch; text-align:center; font-family:var(--lee);
  font-style:italic; font-size:clamp(1.08rem,1rem + .4vw,1.32rem); line-height:1.45; color:var(--tinta-2); text-wrap:balance }
.puente31::after{ content:""; display:block; width:1px; height:clamp(1.75rem,3.5vw,2.75rem); margin:1rem auto 0;
  background:linear-gradient(currentColor, transparent); opacity:.55 }
.oscuro .puente31,.m29 .puente31{ color:#D7E0E2 }
.q29 .puente31{ color:var(--tinta) }

/* Qué somos, compacta: la misma pirámide, con menos aire */
.q29.q30{ padding-block:clamp(4.5rem,8vw,6.5rem) clamp(4.5rem,7vw,5.5rem) }
.q29.q30 .q30__in{ row-gap:clamp(1.5rem,3vw,2.25rem) }
.q29.q30 .q30__t{ font-size:clamp(1.85rem,1.15rem + 2.1vw,3.05rem) }
.q29.q30 .q30__lado{ margin-top:clamp(.8rem,1.6vw,1.1rem) }
.q29.q30 .q30__capas{ --alto:3.9rem; row-gap:1.7rem; padding-top:1.3rem; margin-bottom:clamp(1.1rem,2.2vw,1.5rem) }
.q29.q30 .q29__capa{ padding-top:1.5rem }
.q29.q30 .q30__vidrio{ padding:clamp(1.05rem,2vw,1.5rem) clamp(1.1rem,3vw,2rem) }
.q29.q30 .q29__ir{ margin-top:.85rem }
.q29.q30 .puente31{ margin-top:0 }
.q29.q30 .q29__foto figcaption{ bottom:.9rem; font-size:.76rem; opacity:.85 }

/* Comunidades: los dos botones al centro (la línea de iniciativas salió; la cuentan los botones) */
.c31__hub{ justify-content:center }

/* ---------------------------------------------------------------- Proyectos: visor con zoom */
.p31{ padding-block:clamp(4.5rem,8vw,6.5rem) }
.p31::before{ top:30% }
.p31__visor{ position:relative; display:grid; gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(2rem,4vw,3rem) }
.p31__mapa{ position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; border-radius:1.4rem; overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 42% 38%, #163A55 0%, var(--noche) 72%);
  box-shadow:0 40px 80px -50px rgba(10,26,47,.75); min-height:18rem }
.p31 .p29__mapa.p31__svg{ width:100%; height:100%; min-height:0 }
.p31__lugar{ z-index:2 }
.p31__escala{ --k:0; position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:.8rem .6rem .55rem;
  border-top:1px solid rgba(244,242,238,.1); background:rgba(6,17,31,.55) }
.p31__escala[hidden]{ display:none }
.p31[data-paso="1"] .p31__escala{ --k:1 } .p31[data-paso="2"] .p31__escala{ --k:2 }
.p31__escala::before,.p31__escala::after{ content:""; position:absolute; top:calc(.8rem + .3rem + .475rem - 1px); left:calc(.6rem + (100% - 1.2rem) / 6); height:2px; border-radius:2px }
.p31__escala::before{ right:calc(.6rem + (100% - 1.2rem) / 6); background:rgba(244,242,238,.18) }
.p31__escala::after{ width:calc(var(--k) * (100% - 1.2rem) / 3); background:var(--sol); transition:width .9s var(--salida) }
.p31__tab{ appearance:none; position:relative; z-index:1; display:grid; justify-items:center; gap:.4rem; min-height:var(--toque);
  padding:.3rem .25rem .35rem; border:0; border-radius:.6rem; background:none; cursor:pointer;
  font-family:var(--sans); font-size:.9rem; font-weight:600; line-height:1.2; color:#AFC0C4; transition:color .3s ease }
.p31__tab i{ display:block; width:.95rem; height:.95rem; border-radius:50%; background:var(--noche);
  box-shadow:inset 0 0 0 2px rgba(244,242,238,.5); transition:background .4s ease, box-shadow .4s ease }
.p31__tab:hover,.p31__tab[aria-selected="true"]{ color:var(--papel) }
.p31__tab:focus-visible{ outline:3px solid var(--sol); outline-offset:2px }
.p31[data-paso="0"] .p31__tab:nth-child(-n+1) i,
.p31[data-paso="1"] .p31__tab:nth-child(-n+2) i,
.p31[data-paso="2"] .p31__tab i{ background:var(--sol); box-shadow:0 0 0 4px rgba(217,164,65,.22) }
.p31__paneles{ display:grid; gap:clamp(1rem,2vw,1.5rem); min-width:0 }
.p31__h{ display:grid; grid-template-rows:auto auto; border-radius:1.4rem; overflow:hidden; background:var(--blanco);
  box-shadow:0 40px 80px -56px rgba(14,23,38,.6); scroll-margin-top:calc(var(--alto-nav) + 1.5rem) }
.p31__h[hidden]{ display:none }
.p31--js .p31__h:not([hidden]){ animation:q29-entra .5s var(--salida) both }
.p31__foto{ display:block; position:relative; overflow:hidden; aspect-ratio:16 / 10; background:var(--noche) }
.p31__foto picture{ display:block; height:100% }
.p31__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block; transition:transform 1.4s var(--curva) }
.p31__h:hover .p31__foto img{ transform:scale(1.03) }
.p31__txt{ display:grid; gap:.4rem; align-content:start; padding:clamp(1.15rem,2.2vw,1.7rem) clamp(1.2rem,2.6vw,2rem) clamp(1.25rem,2.4vw,1.8rem) }
.p31__txt > p{ margin:0 }
.p31__escala-t{ font-family:var(--lee); font-style:italic; font-size:1.12rem; color:var(--petroleo) }
.p31__ht.p29__ht{ font-size:clamp(1.65rem,1.2rem + 1.3vw,2.4rem); margin:0 }
.p31__ir{ margin-top:.3rem }
.p31__todos{ margin-top:clamp(2rem,4vw,2.75rem) }
@media (min-width:64rem){
  .p31__visor{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start }
  .p31__mapa{ position:sticky; top:calc(var(--alto-nav) + 1.5rem); height:clamp(30rem,42vw,37rem) }
  .p31--js .p31__visor{ align-items:stretch; height:clamp(32rem,44vw,38.5rem) }
  .p31--js .p31__mapa{ position:relative; top:auto; height:auto }
  .p31--js .p31__paneles{ height:100% }
  .p31--js .p31__h{ grid-template-rows:minmax(0,1fr) auto; height:100% }
  .p31--js .p31__visor{ grid-template-rows:minmax(0,1fr) }
  .p31--js .p31__foto{ aspect-ratio:auto; min-height:0 }
  .p31--js .p31__foto picture{ position:absolute; inset:0 }
}
.p31__visor > .vo{ position:absolute }
@media (max-width:63.99rem){
  .p31__mapa{ height:clamp(19rem,62vw,26rem) }
  .p31--js .p31__escala-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
}
@media (max-width:30rem){
  .p31__tab{ font-size:.8rem }
  .p31__foto{ aspect-ratio:4 / 3 }
}

/* ---------------------------------------------------------------- Cómo se mide + Observatorio, una banda */
.m29{ padding-block:clamp(4.5rem,8vw,6.5rem) }
.m29 .puente31{ margin-top:clamp(2.5rem,5vw,3.5rem) }
.o31{ position:relative; isolation:isolate; overflow:clip; margin-top:clamp(3rem,6vw,4.5rem); padding:clamp(1.4rem,3.5vw,3rem);
  border-radius:1.6rem; background:rgba(6,17,31,.66); border:1px solid rgba(244,242,238,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--papel) }
.o31::before{ display:none }
.o31__in{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); align-items:center }
@media (min-width:64rem){ .o31__in{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) } }
.o31__puente{ margin:0 0 clamp(1.25rem,2.5vw,1.75rem); padding-bottom:clamp(1.1rem,2.2vw,1.5rem); border-bottom:1px solid rgba(244,242,238,.12);
  font-family:var(--lee); font-style:italic; font-size:clamp(1.06rem,1rem + .35vw,1.26rem); line-height:1.5; color:#DCE7E6; max-width:40ch }
.o31 .antetitulo{ color:var(--ac-lab) }
.o31__t{ font-family:var(--sans); font-weight:600; font-size:clamp(1.55rem,1.1rem + 1.4vw,2.35rem); line-height:1.08; letter-spacing:-.03em;
  margin:0; color:var(--papel); max-width:20ch; text-wrap:balance }
.o31__d{ margin:1rem 0 0; font-family:var(--lee); font-size:1.04rem; line-height:1.6; color:#C9D4D7; max-width:44ch }
.o31__acc{ margin:clamp(1.25rem,2.5vw,1.75rem) 0 0 }
.o31 .o30__marco{ width:min(100%, calc(31rem * var(--arn))) }
.o31 .o29__que{ font-size:clamp(1.02rem,.96rem + .3vw,1.18rem) }

/* ---------------------------------------------------------------- Quién está detrás: fundador y aliados */
.fu31{ position:relative; background:var(--noche-hondo); color:var(--papel) }
.fu31 .fu29{ min-height:min(82svh, 46rem) }
.fu31 .fu29__in{ padding-block:clamp(4rem,7vw,6rem) }
.al31{ position:relative; padding-block:clamp(2.25rem,4.5vw,3.25rem) clamp(3rem,6vw,4.5rem); border-top:1px solid rgba(244,242,238,.08) }
.al31__in{ display:grid; gap:clamp(1.25rem,3vw,2.5rem); align-items:center }
@media (min-width:64rem){ .al31__in{ grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr) } }
.al31__t{ font-family:var(--sans); font-weight:600; font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem); line-height:1.15; letter-spacing:-.02em; margin:0; color:var(--papel) }
.al31__d{ margin:.5rem 0 0; font-family:var(--lee); font-size:1rem; line-height:1.55; color:#C9D4D7; max-width:34ch }
.al31__mas{ margin:.9rem 0 0 }
.al31 .liga{ color:var(--papel) }
.al31__l{ list-style:none; margin:0; padding:clamp(.9rem,2vw,1.3rem); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem;
  border-radius:1.25rem; background:var(--papel); color:var(--tinta); box-shadow:0 30px 60px -40px rgba(0,0,0,.6) }
.al31__l li{ display:grid; justify-items:center; align-content:start; gap:.3rem; padding:.35rem .2rem; text-align:center; min-width:0 }
.al31__logo{ display:flex; align-items:center; justify-content:center; width:100%; height:4rem; margin-bottom:.2rem }
.al31__logo img{ display:block; width:auto; height:auto; max-width:min(100%,7.5rem); max-height:4rem; object-fit:contain }
.al31__l b{ font-family:var(--sans); font-size:.84rem; font-weight:650; line-height:1.25; overflow-wrap:anywhere }
.al31__l small{ font-family:var(--sans); font-size:.74rem; font-weight:600; line-height:1.3; color:var(--petroleo) }
.al31 .puente31{ margin-top:clamp(2.25rem,4.5vw,3.25rem) }
@media (min-width:48rem) and (max-width:63.99rem){ .al31__l{ grid-template-columns:repeat(5,minmax(0,1fr)) } .al31__logo{ height:3.4rem } .al31__logo img{ max-height:3.4rem } }
@media (max-width:47.99rem){
  .al31__l{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem .6rem }
  .al31__l li:last-child{ grid-column:1 / -1 }
  .al31__logo{ height:3.4rem }
  .al31__logo img{ max-height:3.4rem }
}

/* ---------------------------------------------------------------- Preguntas: cuatro para empezar y una puerta por perfil */
.faq31{ padding-block:clamp(4.5rem,8vw,6.5rem) }
.faq31 .faq29__foto{ aspect-ratio:4 / 5 }
.faq31 .faq29__p summary{ grid-template-columns:minmax(0,1fr) auto; padding:1rem 1.1rem 1rem 1.25rem }
.faq31 .faq29__r{ padding:0 1.25rem 1.35rem 1.25rem }
.faq31__nav{ margin-top:clamp(1.5rem,3vw,2.25rem); padding-top:clamp(1.25rem,2.5vw,1.75rem); border-top:1px solid var(--filete) }
.faq31__k{ margin:0 0 .8rem; font-family:var(--sans); font-size:.92rem; font-weight:650; color:var(--petroleo) }
.faq31__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr)); gap:.5rem }
.faq31__perfil{ display:flex; align-items:center; gap:.8rem; min-height:var(--toque); height:100%; padding:.6rem .9rem .6rem .6rem; border-radius:.9rem;
  border:1px solid var(--filete); background:rgba(255,255,255,.45); color:var(--tinta); text-decoration:none;
  transition:background .25s ease, border-color .25s ease, transform .25s var(--salida), box-shadow .25s ease }
.faq31__perfil:hover{ background:var(--blanco); border-color:transparent; transform:translateY(-2px); box-shadow:0 18px 34px -26px rgba(14,23,38,.5) }
.faq31__perfil:focus-visible{ outline:3px solid var(--sol); outline-offset:2px }
.faq31__pico{ flex:0 0 auto; display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; color:var(--petroleo);
  background:rgba(20,80,79,.09); transition:background .25s ease, color .25s ease }
.faq31__perfil:hover .faq31__pico{ background:var(--petroleo); color:var(--papel) }
.faq31__pico svg{ width:1.25rem; height:1.25rem }
.faq31__perfil > span:last-child{ display:grid; gap:.05rem; min-width:0 }
.faq31__perfil b{ font-family:var(--sans); font-size:.98rem; font-weight:650; line-height:1.25 }
.faq31__perfil small{ font-family:var(--sans); font-size:.8rem; line-height:1.35; color:var(--mudo) }
@media (max-width:63.99rem){ .faq31 .faq29__foto{ aspect-ratio:16 / 9 } }

/* ---------------------------------------------------------------- Siguiente */
.salto31{ padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4.5rem) }
.salto--solo{ grid-template-columns:1fr }
.salto--solo .salto__a{ min-height:clamp(10rem,20vw,15rem) }

@media (prefers-reduced-motion:reduce){
  .p31__escala::after,.p31__tab,.p31__tab i,.p31__foto img,.faq31__perfil,.faq31__pico{ transition:none !important }
  .p31--js .p31__h:not([hidden]){ animation:none !important }
  .p31__h:hover .p31__foto img,.faq31__perfil:hover{ transform:none }
}

/* v31 · hero: el rasgo distintivo en su propia línea; con movimiento reducido el H1 se lee completo (tres verbos) */
.hero__rasgo{ display:block; margin-top:.55rem; font-weight:600; color:var(--sol-2) }
@media (prefers-reduced-motion:reduce){
  .portada--v13 .hero__t{ display:block; font-size:min(var(--t-display), 3rem); max-width:22ch; margin-inline:auto }
  .portada--v13 .hero__f{ display:inline; opacity:1; transform:none; filter:none; transition:none }
}
@media (prefers-reduced-motion:reduce) and (max-width:47.99rem){
  .portada--v13 .hero__t{ font-size:clamp(1.6rem, 7vw, 2rem) }
}