@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · PÁGINAS v29 (Nosotros, Método, Proyectos, Contacto)
   El lenguaje del Ecosistema llevado a las páginas: capítulos con número,
   foto real a sangre con texto en capas, paneles de vidrio, ritmo entre
   noche y papel, tipografía grande y recorridos.
   Prefijo .pv-  ·  Se carga después de las hojas propias de cada página.
   ========================================================================== */

/* ---------------------------------------------------------------- base común */
.pv-cap{ position:relative; isolation:isolate; overflow:clip; background:var(--noche-hondo); color:#DCE3E6; --c:var(--sol-2) }
.pv-cap--petroleo{ background:linear-gradient(180deg, var(--noche-hondo), #0B2B33 55%, var(--noche-hondo)) }
.pv-claro{ position:relative; isolation:isolate; background:var(--papel); color:var(--tinta-2) }

.pv-etapa{ display:flex; align-items:center; gap:.8rem; margin:0; font-family:var(--sans); font-size:.86rem; font-weight:700; letter-spacing:.01em; line-height:1.4; color:var(--c, var(--sol-2)) }
.pv-n{ flex:0 0 auto; display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--c, var(--sol-2)); color:var(--tinta);
  font-size:.8rem; letter-spacing:0; box-shadow:0 0 0 6px color-mix(in srgb, var(--c, var(--sol-2)) 20%, transparent) }
.pv-etapa--claro{ --c:var(--petroleo); color:var(--petroleo) }
.pv-etapa--claro .pv-n{ color:var(--papel) }

.pv-t{ margin-top:var(--e-sm); font-family:var(--sans); font-weight:640; font-size:clamp(1.9rem,1.2rem + 2.4vw,3.6rem); line-height:1.04; letter-spacing:-.028em;
  color:var(--papel); text-wrap:balance; max-width:22ch }
.pv-t--xl{ font-size:clamp(2.1rem,1.2rem + 3.2vw,4.6rem); max-width:20ch }
.pv-t--claro{ color:var(--tinta) }
.pv-t span{ color:var(--c, var(--sol-2)) }
.pv-t--claro span{ color:var(--petroleo) }
.pv-entrada{ margin-top:var(--e-md); font-family:var(--lee); font-size:var(--t-lede); line-height:1.58; color:#C9D4D7; max-width:52ch; text-wrap:pretty }
.pv-claro .pv-entrada{ color:var(--tinta-2) }
.pv-claro .oscuro .pv-entrada{ color:#C9D4D7 }
.pv-lede{ font-family:var(--lee); font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.5; color:var(--papel); text-wrap:pretty }
.pv-cuerpo{ font-family:var(--lee); font-size:1.04rem; line-height:1.68; color:#C9D4D7; max-width:60ch; text-wrap:pretty }
.pv-claro .pv-cuerpo{ color:var(--tinta-2) }
.pv-claro .oscuro .pv-cuerpo{ color:#C9D4D7 }
.pv-lede + .pv-cuerpo,.pv-cuerpo + .pv-cuerpo{ margin-top:var(--e-sm) }
.pv-sub{ font-family:var(--sans); font-weight:650; font-size:clamp(1.25rem,1.05rem + .7vw,1.7rem); line-height:1.15; letter-spacing:-.02em; color:var(--papel) }
.pv-sub--claro{ color:var(--tinta) }
.pv-cab{ max-width:48rem }
.pv-cab--centro{ margin-inline:auto; text-align:center; display:grid; justify-items:center }
.pv-cab--centro .pv-entrada{ margin-inline:auto }

/* Foto a sangre con texto en capas (como el capítulo COAR del Ecosistema) */
.pv-foto{ position:relative; isolation:isolate; overflow:clip; min-height:min(88vh, 52rem); display:grid; align-items:end }
.pv-foto picture{ display:block; position:absolute; inset:0; z-index:-2 }
.pv-foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 45%) }
.pv-foto::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.72) 22%, rgba(6,17,31,.1) 55%, rgba(6,17,31,0) 70%), linear-gradient(180deg, rgba(6,17,31,.55), rgba(6,17,31,0) 22%) }
.pv-foto__txt{ width:100%; padding-block:7rem clamp(2rem,4vw,3.2rem) }
.pv-foto__txt .pv-t{ text-shadow:0 2px 22px rgba(6,17,31,.55) }
.pv-foto__txt .pv-etapa{ text-shadow:0 1px 10px rgba(6,17,31,.7) }
.pv-foto__rej{ display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:end }
@media (min-width:62rem){ .pv-foto__rej{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) } }
.pv-credito{ position:absolute; right:var(--canal); bottom:.9rem; z-index:1; margin:0; font-family:var(--sans); font-size:.76rem; line-height:1.4; color:rgba(244,242,238,.72); text-align:right; max-width:36ch }

/* Vidrio: la capa transparente sobre la foto */
.pv-vidrio{ border-radius:var(--r-lg); padding:clamp(1.2rem,2.4vw,1.8rem); background:rgba(10,26,47,.5); color:#E3E9EB;
  box-shadow:inset 0 0 0 1px rgba(244,242,238,.14), 0 30px 60px -30px rgba(0,0,0,.6) }
@supports (backdrop-filter:blur(2px)){ .pv-vidrio{ background:rgba(10,26,47,.42); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15) } }
.pv-vidrio p{ font-family:var(--lee); font-size:clamp(1.02rem,.96rem + .3vw,1.18rem); line-height:1.62 }

/* Fondo tenue de foto (como Brújula en el Ecosistema) */
.pv-fondo{ position:absolute; inset:0; z-index:-2; pointer-events:none }
.pv-fondo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); opacity:.16; filter:saturate(.6) }
.pv-fondo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--noche-hondo), transparent 25%, transparent 75%, var(--noche-hondo)) }

@media (max-width:47.99rem){
  .pv-foto{ min-height:0; display:block }
  .pv-foto picture{ position:relative; aspect-ratio:4 / 3.4 }
  .pv-foto img{ object-position:var(--pos-m, var(--pos, 50% 45%)) }
  .pv-foto::after{ inset:0 0 auto; height:calc(100vw * .85); background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,0) 38%), linear-gradient(180deg, rgba(6,17,31,.5), rgba(6,17,31,0) 30%) }
  .pv-foto__txt{ padding-block:0 2rem; margin-top:-3.2rem; position:relative }
  .pv-credito{ position:static; text-align:left; padding:0 var(--canal) 1.4rem; max-width:none; color:#A9B9BD }
}

/* Índice de capítulos (apertura) */
.pv-indice{ margin-top:var(--e-lg) }
.pv-indice ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem }
.pv-indice ol{ gap:.2rem clamp(1.2rem,2.5vw,2rem) }
.pv-indice a{ display:inline-flex; align-items:baseline; gap:.45rem; min-height:var(--toque); padding:.4rem 0; font-family:var(--sans); font-size:.95rem; font-weight:600;
  color:var(--papel); text-decoration:underline; text-decoration-color:rgba(244,242,238,.3); text-underline-offset:.35em; transition:text-decoration-color .2s ease }
.pv-indice a:hover{ text-decoration-color:var(--sol-2) }
.pv-indice__n{ font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--sol-2) }

/* ============================================================================
   NOSOTROS
   ========================================================================== */
/* 01 · El fundador */
.pv-historia{ display:grid; gap:clamp(2rem,4vw,4rem); padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem); align-items:center }
@media (min-width:62rem){ .pv-historia{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) } }
.pv-cita{ margin:0; position:relative; padding-top:2.6rem }
.pv-cita::before{ content:"“"; position:absolute; top:-1.2rem; left:-.3rem; font-family:var(--lee); font-size:7rem; line-height:1; color:var(--sol); opacity:.85 }
.pv-cita blockquote{ margin:0 }
.pv-cita p{ font-family:var(--lee); font-style:italic; font-weight:500; font-size:clamp(1.7rem,1.1rem + 2vw,2.8rem); line-height:1.16; letter-spacing:-.015em; color:var(--papel); text-wrap:balance }
.pv-cita figcaption{ margin-top:var(--e-md); font-family:var(--sans); font-size:.88rem; line-height:1.55; color:#A9B9BD }
.pv-cita cite{ font-style:normal; font-weight:650; color:#DCE3E6 }
.pv-cita a{ margin-left:.4rem; color:var(--sol-2); font-weight:650; text-underline-offset:.22em }
.pv-cita a:hover{ color:var(--papel) }

.pv-formacion{ display:grid; gap:clamp(2rem,4vw,4.5rem); padding-bottom:clamp(4.5rem,8vw,7rem); align-items:start }
@media (min-width:62rem){ .pv-formacion{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) } .pv-retrato{ position:sticky; top:calc(var(--alto-nav) + 2rem) } }
.pv-retrato{ margin:0; position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4 / 5; background:var(--noche-2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(244,242,238,.08) }
.pv-retrato img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,35% 40%) }
.pv-retrato::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,17,31,.85), rgba(6,17,31,0) 38%) }
.pv-retrato figcaption{ position:absolute; z-index:1; left:1.4rem; right:1.4rem; bottom:1.3rem; display:grid; gap:.15rem; font-family:var(--sans); font-size:.9rem; color:#DCE3E6 }
.pv-retrato figcaption b{ font-size:1.3rem; font-weight:650; color:var(--papel); letter-spacing:-.01em }
@media (max-width:61.99rem){ .pv-retrato{ aspect-ratio:16 / 11; max-height:30rem } }
.pv-formacion__txt .pv-cuerpo{ margin-top:var(--e-sm) }

/* Trayecto: una ruta vertical; tramo firme = concluido, punteado = en curso */
.pv-tray{ list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:0; position:relative }
.pv-tray__h{ position:relative; display:grid; grid-template-columns:3rem minmax(0,1fr); column-gap:1.1rem; padding-bottom:1.6rem }
.pv-tray__h > *:not(.pv-tray__nodo){ grid-column:2 }
.pv-tray__h::before{ content:""; position:absolute; left:calc(1.5rem - 1px); top:3rem; bottom:0; width:2px; background:var(--sol) }
.pv-tray__h[data-estado="curso"]::before{ background:repeating-linear-gradient(180deg, rgba(232,194,112,.7) 0 6px, transparent 6px 12px) }
.pv-tray__h:last-child::before{ content:none }
.pv-tray__nodo{ grid-row:1 / span 3; width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-size:.86rem; font-weight:700;
  background:var(--sol); color:var(--tinta); box-shadow:0 0 0 6px rgba(217,164,65,.16) }
.pv-tray__h[data-estado="curso"] .pv-tray__nodo{ background:var(--noche-hondo); color:var(--sol-2); box-shadow:inset 0 0 0 2px var(--sol-2), 0 0 0 6px rgba(217,164,65,.08) }
.pv-tray__k{ font-family:var(--sans); font-size:.82rem; font-weight:650; color:var(--sol-2); padding-top:.2rem }
.pv-tray__k span{ color:#A9B9BD; font-weight:600 }
.pv-tray__t{ margin-top:.2rem; font-family:var(--sans); font-size:clamp(1.08rem,1rem + .35vw,1.3rem); font-weight:640; line-height:1.25; letter-spacing:-.012em; color:var(--papel) }
.pv-tray__u{ margin-top:.25rem; font-family:var(--lee); font-size:.96rem; line-height:1.5; color:#B7C6C9 }
.pv-tray__ley{ display:flex; gap:1.6rem; margin-top:.3rem; font-family:var(--sans); font-size:.82rem; color:#A9B9BD }
.pv-tray__ley span{ display:inline-flex; align-items:center; gap:.55rem }
.pv-tray__ley span::before{ content:""; width:1.8rem; height:2px; background:var(--sol) }
.pv-tray__ley .pv-tray__ley-c::before{ background:repeating-linear-gradient(90deg, rgba(232,194,112,.8) 0 5px, transparent 5px 9px) }

/* 02 · Qué es Conecta */
.pv-foto--puente{ min-height:min(94vh, 56rem) }
.pv-foto--puente::after{ background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.8) 26%, rgba(6,17,31,.15) 62%, rgba(6,17,31,0) 75%), linear-gradient(90deg, rgba(6,17,31,.5), rgba(6,17,31,0) 55%), linear-gradient(180deg, rgba(6,17,31,.55), rgba(6,17,31,0) 22%) }

/* La definición: papel con vida, lema grande y foto que sangra a la izquierda */
.pv-def{ padding-block:clamp(4rem,8vw,7rem); overflow:clip }
.pv-def::before{ content:""; position:absolute; inset:auto -10% -30% 40%; height:70%; z-index:-1; background:radial-gradient(closest-side, rgba(217,164,65,.12), transparent) }
.pv-def .def26{ max-width:none; margin:0; padding:0; border:0; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); column-gap:clamp(2rem,6vw,6rem); align-items:start }
.pv-def .def26__voz{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0 }
.pv-def .def26__cuerpo{ min-width:0 }
.pv-def .def26__lema{ order:2; margin-top:clamp(1.4rem,3vw,2rem); font-size:clamp(2.5rem,1.3rem + 3.6vw,5rem); letter-spacing:-.035em; line-height:.92; color:var(--tinta) }
.pv-def .def26__cat{ order:3; font-size:1.1rem }
.pv-def .def26__foto{ order:1; margin:0 0 0 calc(var(--canal) * -1); max-width:none }
.pv-def .def26__foto picture{ aspect-ratio:5 / 4; border-radius:0 var(--r-xl) var(--r-xl) 0; box-shadow:0 40px 70px -40px rgba(14,23,38,.55) }
.pv-def .def26__foto figcaption{ padding-left:var(--canal) }
.pv-def .def26__antes{ font-size:1.15rem; color:#6B7480 }
.pv-def .def26__ahora{ font-size:clamp(1.45rem,1.05rem + 1.4vw,2.35rem); line-height:1.38; max-width:30ch }
.pv-def .def26__g dt::before{ width:1.6rem; height:1.6rem; border-radius:50%; margin-bottom:.6rem; background:color-mix(in srgb, var(--c) 30%, transparent); box-shadow:inset 0 0 0 2px var(--c) }
.pv-def .def26__g dt{ font-size:1.05rem }
.pv-def .def26__puente{ font-size:1.08rem; border-top-color:var(--filete-firme) }
@media (max-width:52rem){
  .pv-def .def26{ grid-template-columns:1fr }
  .pv-def .def26__foto{ margin-right:calc(var(--canal) * -1) }
  .pv-def .def26__foto picture{ border-radius:0; aspect-ratio:16 / 10 }
  .pv-def .def26__g dt::before{ width:1.2rem; height:1.2rem; margin-bottom:.4rem }
}

/* 03 · Los tres anillos, en oscuro */
#anillos{ padding-block:clamp(4.5rem,8vw,7rem) }
.pv-capas{ margin:clamp(2.5rem,5vw,4rem) auto 0; max-width:76rem; --nq-fin:#0F4443; --nq-con:#CFC2A6 }
.pv-anillos{ width:min(100%, 32rem) !important; filter:drop-shadow(0 40px 60px rgba(0,0,0,.45)) }
.pv-anillos .nq-anillo--fin{ fill:url(#pv-g-fin); stroke:rgba(124,196,190,.35); stroke-width:1.5 }
.pv-anillos .nq-anillo--con{ fill:url(#pv-g-con); stroke:rgba(255,255,255,.45); stroke-width:1.5 }
.pv-anillos__marcas line{ stroke:rgba(197,211,213,.35); stroke-width:1 }
.pv-anillos .nq-rot{ font-size:13px; font-weight:650; letter-spacing:.06em; fill:#E3EEEC }
.pv-anillos .nq-rot:nth-of-type(2){ fill:var(--tinta) }
.pv-anillos .nq-rot--esc{ fill:var(--tinta) }
.pv-capas[data-activa="0"] .pv-anillos .nq-anillo--fin{ fill:#1E7774; stroke:var(--ac-lab) }
.pv-capas[data-activa="1"] .pv-anillos .nq-anillo--con{ fill:#EADFC8; stroke:var(--sol-2) }
.pv-capas .nq-capas__pie{ color:#A9B9BD }
.pv-capas .nq-capas__tabs{ border-bottom-color:rgba(244,242,238,.16) }
.pv-capas .nq-tab{ color:#C9D4D7 }
.pv-capas .nq-tab__k{ color:#A9B9BD }
.pv-capas .nq-tab b{ color:var(--papel) }
.pv-capas .nq-tab:hover{ border-bottom-color:rgba(244,242,238,.4) }
.pv-capas .nq-tab[aria-selected="true"]{ border-bottom-color:var(--sol-2) }
.pv-capas .nq-tab[aria-selected="true"] .nq-tab__k{ color:var(--sol-2) }
.pv-capas .nq-tab:focus-visible,.pv-capas .nq-panel:focus-visible{ outline-color:var(--sol-2) }
.pv-capas .nq-panel{ position:relative }
.pv-capas .nq-panel__foto{ aspect-ratio:16 / 10; border-radius:var(--r-lg); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); background:var(--noche-2) }
.pv-capas .nq-panel__k{ color:var(--sol-2) }
.pv-capas .nq-panel__t{ color:var(--papel); font-size:clamp(1.5rem,1.15rem + 1.1vw,2.2rem) }
.pv-capas .nq-panel__d{ color:#C9D4D7 }
.pv-capas .liga{ color:var(--papel) }

/* 04 · Cómo trabajamos: foto fija a la izquierda, recorrido a la derecha */
.pv-como{ display:grid; grid-template-columns:minmax(0,1fr); padding-block:0 }
@media (min-width:62rem){
  .pv-como{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) }
  .pv-como__foto{ position:sticky; top:0; height:100vh; height:100svh }
}
.pv-como__foto{ position:relative; overflow:hidden; background:var(--noche) }
.pv-como__foto picture{ display:block; position:absolute; inset:0 }
.pv-como__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.pv-como__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,17,31,.7), rgba(6,17,31,0) 40%) }
.pv-como__pie{ position:absolute; z-index:1; left:1.4rem; right:1.4rem; bottom:1.2rem; margin:0; font-family:var(--sans); font-size:.82rem; color:#E3E9EB }
@media (max-width:61.99rem){ .pv-como__foto{ aspect-ratio:16 / 10 } }
.pv-como__txt{ padding:clamp(3.5rem,7vw,6rem) var(--canal); display:grid; gap:clamp(3rem,6vw,4.5rem); max-width:48rem }

.pv-ruta{ list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative }
.pv-ruta li{ position:relative; display:grid; grid-template-columns:3.2rem minmax(0,1fr); column-gap:1.2rem; padding-bottom:1.7rem }
.pv-ruta li > *:not(.pv-ruta__n){ grid-column:2 }
.pv-ruta li::before{ content:""; position:absolute; left:calc(1.6rem - 1px); top:3.2rem; bottom:0; width:2px; background:linear-gradient(180deg, var(--petroleo), rgba(20,80,79,.25)) }
.pv-ruta li:last-child::before{ content:none }
.pv-ruta__n{ grid-row:1 / span 3; width:3.2rem; height:3.2rem; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:1rem;
  background:var(--petroleo); color:var(--papel); box-shadow:0 0 0 6px rgba(20,80,79,.12) }
.pv-ruta li:first-child .pv-ruta__n{ background:var(--sol); color:var(--tinta); box-shadow:0 0 0 6px rgba(217,164,65,.2) }
.pv-ruta__v{ font-family:var(--sans); font-size:clamp(1.25rem,1.05rem + .7vw,1.65rem); font-weight:650; letter-spacing:-.02em; line-height:1.2; color:var(--tinta); padding-top:.3rem }
.pv-ruta__f{ justify-self:start; margin-top:.15rem; font-family:var(--sans); font-size:.9rem; font-weight:650; color:var(--petroleo); text-underline-offset:.22em }
.pv-ruta__d{ margin-top:.3rem; font-family:var(--lee); font-size:1rem; line-height:1.55; color:var(--tinta-2) }

.pv-fin .pv-cuerpo{ margin-top:var(--e-sm) }
.pv-estratos{ margin:var(--e-md) 0 0; padding:clamp(1rem,2vw,1.4rem); border-radius:var(--r-lg); background:var(--blanco); box-shadow:0 1px 0 rgba(14,23,38,.04), 0 24px 48px -32px rgba(14,23,38,.35), inset 0 0 0 1px var(--filete) }
.pv-estratos svg{ width:100%; max-width:34rem; height:auto; overflow:visible; display:block; margin-inline:auto }
.pv-estratos__k{ font-family:var(--sans); font-size:11px; font-weight:650; fill:var(--petroleo) }
.pv-estratos__rej line{ stroke:rgba(14,23,38,.1); stroke-dasharray:2 4 }
.pv-estratos__c--1{ fill:var(--petroleo) }
.pv-estratos__c--2{ fill:#CDBE9F }
.pv-estratos__c--3{ fill:#E8C270 }
.pv-estratos__l{ font-family:var(--sans); font-size:12px; font-weight:650; fill:var(--tinta) }
.pv-estratos__l--1{ fill:var(--papel); font-size:13px }
.pv-estratos__eje text{ font-family:var(--sans); font-size:10.5px; fill:var(--mudo) }
.pv-estratos figcaption{ margin-top:.8rem; font-family:var(--sans); font-size:.9rem; line-height:1.55; color:var(--tinta-2) }
.pv-estratos figcaption .liga{ font-weight:650; white-space:nowrap }

.pv-seis{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.2rem); align-items:center; margin-bottom:var(--e-md) }
@media (max-width:30rem){ .pv-seis{ grid-template-columns:1fr } .pv-seis__svg{ max-width:11rem } }
.pv-seis__svg{ width:100%; height:auto }
.pv-seis__guia{ fill:none; stroke:rgba(20,80,79,.18); stroke-dasharray:1 5; stroke-linecap:round; stroke-width:2 }
.pv-seis__a{ fill:color-mix(in srgb, var(--petroleo) calc(30% + var(--k) * 13%), var(--papel)) }
.pv-seis__n text{ font-family:var(--sans); font-size:13px; font-weight:700; fill:var(--papel) }
.pv-seis__flecha{ fill:none; stroke:var(--petroleo); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.pv-seis__c{ font-family:var(--sans); font-size:14px; font-weight:650; fill:var(--tinta) }
.pv-seis .pv-cuerpo{ margin-top:.4rem }
.pv-seis__l{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--tinta) }
.pv-seis__l li{ display:inline-flex; align-items:baseline; gap:.35rem }
.pv-seis__l span{ font-size:.8rem; font-weight:700; color:var(--petroleo) }

.pv-empresa{ border-radius:var(--r-lg); padding:clamp(1.3rem,2.5vw,1.9rem); background:var(--noche); color:#DCE3E6; box-shadow:0 30px 60px -36px rgba(10,26,47,.7) }
.pv-empresa__t{ font-family:var(--sans); font-size:1.15rem; font-weight:650; color:var(--sol-2) }
.pv-empresa dl{ margin:.8rem 0 0; display:grid }
.pv-empresa dl > div{ display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:.2rem 1.1rem; padding:.75rem 0; border-top:1px solid rgba(244,242,238,.12) }
.pv-empresa dt{ font-family:var(--sans); font-size:.86rem; font-weight:650; color:#A9B9BD }
.pv-empresa dd{ margin:0; font-family:var(--sans); font-size:.96rem; line-height:1.5; color:var(--papel) }
.pv-empresa .liga{ color:var(--papel) }
.pv-empresa__nota{ margin-top:.8rem; font-family:var(--lee); font-size:.95rem; line-height:1.55; color:#C9D4D7 }
@media (max-width:30rem){ .pv-empresa dl > div{ grid-template-columns:1fr } }

/* 05 · Compromisos: foto a sangre a la izquierda, lista en vidrio */
.pv-comp{ padding-block:clamp(4.5rem,8vw,7rem) }
.pv-comp__foto{ position:absolute; inset:0; z-index:-2 }
.pv-comp__foto picture{ display:block; position:absolute; inset:0 }
.pv-comp__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.pv-comp__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,17,31,.35), rgba(6,17,31,.55) 40%, rgba(6,17,31,.92) 70%), linear-gradient(0deg, var(--noche-hondo), rgba(6,17,31,0) 30%) }
.pv-comp__in{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:end }
@media (min-width:62rem){ .pv-comp__in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) } }
.pv-comp .pv-t{ display:flex; align-items:baseline; gap:.2em; flex-wrap:wrap }
.pv-comp__siete{ font-size:2.4em; line-height:.8; color:var(--sol-2) !important; letter-spacing:-.06em }
.pv-comp .pv-entrada{ color:#E3E9EB }
.pv-comp__l{ list-style:none; margin:0; display:grid }
.pv-comp__l li{ display:grid; gap:.25rem; padding:1rem 0; border-top:1px solid rgba(244,242,238,.14) }
.pv-comp__l li:first-child{ border-top:0; padding-top:0 }
.pv-comp__l li:last-child{ padding-bottom:0 }
.pv-comp__l b{ font-family:var(--sans); font-size:clamp(1.02rem,.96rem + .3vw,1.18rem); font-weight:620; line-height:1.35; color:var(--papel) }
.pv-comp__l span{ font-family:var(--lee); font-size:.98rem; line-height:1.55; color:#C9D4D7 }
@media (max-width:61.99rem){ .pv-comp__foto::after{ background:linear-gradient(180deg, rgba(6,17,31,.45), rgba(6,17,31,.9) 45%) } }

@media (prefers-reduced-motion:reduce){
  .pv-indice a{ transition:none }
}

/* ============================================================================
   MÉTODO
   ========================================================================== */
/* Número de capítulo como en el Ecosistema: círculo lleno con halo */
.etapa b{ background:var(--petroleo); color:var(--papel); box-shadow:0 0 0 6px rgba(20,80,79,.14) }
.oscuro .etapa{ color:var(--sol-2) }
.oscuro .etapa b{ background:var(--sol-2); color:var(--tinta); box-shadow:0 0 0 6px rgba(232,194,112,.18) }

/* Apertura: foto real a sangre detrás del título */
.pv-map{ background:var(--noche-hondo); min-height:min(100vh, 58rem); display:grid; align-content:end; padding-bottom:clamp(2.5rem,5vw,4rem) }
.pv-map__foto{ position:absolute; inset:0; z-index:-2 }
.pv-map__foto picture{ display:block; position:absolute; inset:0 }
.pv-map__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 40%) }
.pv-map__foto::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 45%, rgba(6,17,31,.55), rgba(6,17,31,.25) 70%), linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.82) 30%, rgba(6,17,31,.3) 62%, rgba(6,17,31,.55) 100%) }
.pv-map .map__t{ font-size:clamp(2.4rem,1.3rem + 3.8vw,5rem); max-width:16ch; text-shadow:0 2px 26px rgba(6,17,31,.6) }
.pv-map .map__lede{ text-shadow:0 1px 14px rgba(6,17,31,.8) }
.pv-mrec a,.pv-mrec a:hover{ background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; border-radius:0; padding:.5rem .4rem; gap:.25rem }
.pv-mrec a b{ text-decoration:underline; text-decoration-color:rgba(244,242,238,.3); text-underline-offset:.3em; text-decoration-thickness:1px }
.pv-mrec a:hover b{ text-decoration-color:var(--sol-2) }
.pv-mrec .mrec__n{ width:auto; height:auto; background:none; box-shadow:none; border-radius:0; font-size:1.5rem; font-weight:640; letter-spacing:-.02em; color:var(--sol-2); text-shadow:0 1px 10px rgba(6,17,31,.7) }
.pv-mrec small{ text-shadow:0 1px 8px rgba(6,17,31,.8) }

/* El barril del ICT-5 dibujado: duelas de madera con aros, el agua sube hasta la más corta */
.pv-barril,.mbar__lam{ --madera:#B7895A; --madera-2:#8E6440 }
.mbar__lam{ height:15rem; gap:.18rem; padding-inline:.6rem; --pie:1.6rem }
.mbar__lam::after{ content:""; position:absolute; left:0; right:0; bottom:var(--pie); height:1px; background:rgba(216,203,179,.3) }
.mbar__d{ z-index:1 }
.mbar__d i{ left:4%; right:4%; border-radius:.55rem .55rem .2rem .2rem;
  background:
    linear-gradient(180deg, transparent 0 22%, rgba(28,32,38,.85) 22% calc(22% + 5px), transparent calc(22% + 5px) calc(78% - 5px), rgba(28,32,38,.85) calc(78% - 5px) 78%, transparent 78%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 7px, rgba(0,0,0,.08) 7px 8px),
    linear-gradient(90deg, var(--madera-2), var(--madera) 35%, #C99C6B 55%, var(--madera-2));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), inset 0 6px 8px -6px rgba(255,255,255,.4) }
.mbar__d[data-baja] i{ background:
    linear-gradient(180deg, transparent 0 22%, rgba(28,32,38,.85) 22% calc(22% + 5px), transparent calc(22% + 5px) calc(78% - 5px), rgba(28,32,38,.85) calc(78% - 5px) 78%, transparent 78%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,.08) 7px 8px),
    linear-gradient(90deg, #B9852B, #E8BE63 40%, #F0CD82 55%, #B9852B);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 3px rgba(232,194,112,.35) }
.mbar__agua{ z-index:3; left:.3rem; right:.3rem; border-radius:0 0 .6rem .6rem;
  background:linear-gradient(180deg, rgba(124,196,190,.34), rgba(20,80,79,.42)); box-shadow:inset 0 3px 0 rgba(191,230,225,.9) }
.mbar__agua span{ left:.6rem; color:#D7F1EE; text-shadow:0 1px 6px rgba(6,17,31,.8) }
.mbar__prom{ z-index:5 }
.mbar__d span{ z-index:6 }

/* 04 · Instrumentos hermanos: dos fotos a sangre, texto en vidrio */
.pv-dos{ padding-block:clamp(4.5rem,8vw,7rem) }
.pv-dos__par{ display:grid; gap:.5rem; margin-top:clamp(.5rem,2vw,1rem) }
@media (min-width:56rem){ .pv-dos__par{ grid-template-columns:1fr 1fr } }
.pv-dos__i{ position:relative; isolation:isolate; overflow:hidden; min-height:clamp(30rem,62vh,40rem); display:grid; align-items:end; padding:clamp(1rem,3vw,2.2rem) }
.pv-dos__i picture{ display:block; position:absolute; inset:0; z-index:-2 }
.pv-dos__i img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--curva) }
.pv-dos__i:hover img{ transform:scale(1.03) }
.pv-dos__i::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(6,17,31,.85), rgba(6,17,31,.1) 60%) }
.pv-dos__txt{ max-width:30rem; display:grid; gap:.45rem }
.pv-dos__rol{ font-family:var(--sans) !important; font-size:.86rem !important; font-weight:700; color:var(--c) }
.pv-dos__q{ font-family:var(--sans); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.5rem); font-weight:650; line-height:1.08; letter-spacing:-.025em; color:var(--papel) }
.pv-dos__k{ font-family:var(--sans) !important; font-size:.9rem !important; font-weight:650; color:#DCE3E6 }
.pv-dos__txt .liga{ justify-self:start; margin-top:.4rem; font-family:var(--sans); font-weight:650; color:var(--papel) }
.pv-dos__nota{ margin:clamp(1.5rem,3vw,2.2rem) auto 0; max-width:60ch; text-align:center; font-family:var(--sans); font-size:.9rem; line-height:1.55; color:#A9B9BD }

/* 05 · El ciclo anual, dibujado */
.pv-practica{ padding-block:clamp(4.5rem,8vw,7rem); overflow:clip }
.pv-practica::before{ content:""; position:absolute; z-index:-1; inset:20% 50% -10% -10%; background:radial-gradient(closest-side, rgba(20,80,79,.1), transparent) }
.pv-practica__rej{ display:grid; gap:clamp(2rem,5vw,5rem); align-items:center; max-width:76rem; margin-inline:auto }
@media (min-width:60rem){ .pv-practica__rej{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.pv-ciclo{ margin:0; color:var(--petroleo) }
.pv-ciclo__svg{ width:100%; max-width:34rem; margin-inline:auto; overflow:visible }
.pv-ciclo__guia{ fill:none; stroke:rgba(20,80,79,.14); stroke-width:22 }
.pv-ciclo__nucleo{ fill:var(--blanco); stroke:rgba(20,80,79,.12); filter:drop-shadow(0 18px 30px rgba(14,23,38,.12)) }
.pv-ciclo__arco{ fill:none; stroke:var(--petroleo); stroke-width:3; stroke-linecap:round }
.pv-ciclo__nodo circle{ fill:var(--petroleo); stroke:var(--papel); stroke-width:5 }
.pv-ciclo__nodo:first-of-type circle{ fill:var(--sol) }
.pv-ciclo__n{ font-family:var(--sans); font-size:17px; font-weight:700; fill:var(--papel) }
.pv-ciclo__nodo:first-of-type .pv-ciclo__n{ fill:var(--tinta) }
.pv-ciclo__l{ font-family:var(--sans); font-size:16px; font-weight:650; fill:var(--tinta) }
.pv-ciclo__c1{ font-family:var(--sans); font-size:26px; font-weight:650; letter-spacing:-.02em; fill:var(--tinta) }
.pv-ciclo__c2{ font-family:var(--lee); font-style:italic; font-size:14px; fill:var(--mudo) }
@media (prefers-reduced-motion:no-preference){
  .rv .pv-ciclo .pv-ciclo__arco{ stroke-dasharray:240; stroke-dashoffset:240; transition:stroke-dashoffset .9s var(--curva) calc(var(--k) * .35s + .2s) }
  .rv .pv-ciclo.visto .pv-ciclo__arco{ stroke-dashoffset:0 }
}
.pv-pasos{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.pv-pasos li{ display:grid; grid-template-columns:3rem minmax(0,1fr); column-gap:1.1rem; padding:1.2rem 0; border-top:1px solid var(--filete) }
.pv-pasos li:first-child{ border-top:0 }
.pv-pasos__n{ grid-row:1 / span 2; width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-weight:700; background:var(--petroleo); color:var(--papel) }
.pv-pasos li:first-child .pv-pasos__n{ background:var(--sol); color:var(--tinta) }
.pv-pasos h3{ font-family:var(--sans); font-size:clamp(1.15rem,1rem + .5vw,1.45rem); font-weight:650; letter-spacing:-.015em; color:var(--tinta); padding-top:.35rem }
.pv-pasos p{ margin-top:.3rem; font-family:var(--lee); font-size:1rem; line-height:1.6; color:var(--tinta-2) }

/* Cierre con foto */
.pv-cierre{ padding-block:clamp(5rem,10vw,8rem); text-align:center }
.pv-fondo--vivo img{ opacity:.42; filter:saturate(.85) }
.pv-fondo--vivo::after{ background:radial-gradient(60% 70% at 50% 50%, rgba(6,17,31,.55), rgba(6,17,31,.85)) }
.pv-cierre__in{ display:grid; justify-items:center; gap:var(--e-lg) }
.pv-cierre .pv-t{ max-width:24ch; margin:0 }
.pv-cierre .acciones{ justify-content:center }
@media (prefers-reduced-motion:reduce){ .pv-dos__i img{ transition:none } .pv-dos__i:hover img{ transform:none } }

/* ============================================================================
   PROYECTOS
   ========================================================================== */
/* Capítulos entre tipos de proyecto */
.pv-grupo{ padding-block:clamp(4.5rem,9vw,7.5rem) }
.pv-grupo__in{ display:grid; gap:clamp(1.5rem,4vw,4rem); align-items:end }
@media (min-width:62rem){ .pv-grupo__in{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) } }
.pv-grupo__cifra{ display:flex; align-items:baseline; gap:.9rem; margin:0; font-family:var(--sans) }
.pv-grupo__cifra b{ font-size:clamp(4rem,2.5rem + 5vw,7.5rem); font-weight:640; line-height:.85; letter-spacing:-.05em; color:var(--sol-2) }
.pv-grupo__cifra span{ font-size:1rem; font-weight:600; line-height:1.35; color:#DCE3E6; max-width:18ch }
.pv-grupo .pv-entrada{ margin-top:var(--e-sm) }
.pv-grupo__liga{ margin-top:var(--e-md); font-family:var(--sans); font-weight:650 }
.pv-grupo__liga .liga{ color:var(--papel) }

/* Ficha del proyecto en capas: sube sobre la foto */
.franja{ min-height:min(84vh, 46rem) }
@media (min-width:64rem){
  .pv-py .py-ficha{ position:relative; z-index:2; margin-top:-16rem; box-shadow:0 40px 80px -40px rgba(6,17,31,.6), 0 2px 0 rgba(14,23,38,.04) }
  .pv-py .py-intro__txt{ padding-top:clamp(1rem,2vw,2rem) }
}
.pv-py{ background:linear-gradient(180deg, var(--papel), var(--papel)) }
.pv-py .py-ficha{ background:var(--blanco); padding:.6rem .6rem 1.4rem; border-radius:24px }
.pv-py .py-ficha__dl{ margin:1.1rem 1rem 0 }
.franja__credito{ top:1rem; bottom:auto !important }
.pv-py .py-ciclo li[aria-current] i{ box-shadow:0 0 0 6px rgba(217,164,65,.22) }

/* Avances: recorrido con foto fija (como el dispositivo del Ecosistema) */
.pv-cambios{ background:var(--papel) }
.pv-reco{ align-items:start }
.pv-reco__lado{ position:relative; display:grid; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4 / 5; background:var(--noche);
  box-shadow:0 40px 80px -45px rgba(14,23,38,.55) }
@media (min-width:64rem){ .pv-reco__lado{ position:sticky; top:calc(var(--alto-nav) + 2rem); max-height:calc(100vh - var(--alto-nav) - 4rem); aspect-ratio:auto; height:calc(100vh - var(--alto-nav) - 4rem) } }
.pv-reco__foto{ grid-area:1 / 1; margin:0; position:relative; opacity:0; transition:opacity .6s var(--curva) }
.pv-reco__foto[data-on]{ opacity:1 }
.pv-reco__foto picture{ display:block; position:absolute; inset:0 }
.pv-reco__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.pv-reco__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,17,31,.75), rgba(6,17,31,0) 38%) }
.pv-reco__foto figcaption{ position:absolute; z-index:1; left:1.4rem; bottom:1.2rem; font-family:var(--sans); font-size:clamp(1.3rem,1rem + 1vw,1.9rem); font-weight:650; letter-spacing:-.02em; color:var(--papel) }
/* Sin JS: la primera foto queda fija; las demás no se muestran */
.pv-reco:not(.pv-reco--js) .pv-reco__foto:not(:first-child){ display:none }
.pv-reco .pg-ambito{ transition:opacity .4s ease }
.pv-reco--js .pg-ambito:not([data-on]){ opacity:.5 }
.pv-reco--js .pg-ambito:hover,.pv-reco--js .pg-ambito:focus-within{ opacity:1 }
@media (min-width:64rem){ .pv-reco .pg-ambito{ min-height:40vh; display:grid; align-content:center } }
@media (max-width:63.99rem){
  .pv-reco__lado{ position:sticky; top:calc(var(--alto-nav) + .5rem); z-index:2; aspect-ratio:16 / 9; border-radius:var(--r-lg) }
  .pv-reco--js .pg-ambito:not([data-on]){ opacity:1 }
}

/* Aliados: la red con Conecta al centro */
.pv-aliados{ background:linear-gradient(180deg, var(--papel), #EDE7DC); overflow:clip }
.pv-aliados .pg-cab{ display:grid; justify-items:center; text-align:center }
.pv-aliados .pv-t{ margin-inline:auto }
.pv-red{ position:relative; margin:clamp(2.5rem,5vw,3.5rem) auto -.5rem; max-width:80rem }
.pv-red svg{ width:100%; height:auto; display:block }
.pv-red__l{ fill:none; stroke:var(--petroleo); stroke-width:1.6; stroke-dasharray:3 5; stroke-linecap:round; opacity:.55 }
.pv-red__t{ font-family:var(--lee); font-style:italic; font-size:15px; fill:var(--petroleo) }
.pv-red__p{ fill:var(--sol) }
.pv-red__centro{ position:absolute; left:50%; top:0; translate:-50% -25%; display:grid; place-items:center; width:7.5rem; height:7.5rem; border-radius:50%;
  background:var(--blanco); box-shadow:0 20px 40px -20px rgba(14,23,38,.35), 0 0 0 10px rgba(20,80,79,.06) }
.pv-red__centro img{ width:5.2rem; height:auto }
@media (max-width:40rem){ .pv-red{ margin-bottom:-.5rem } .pv-red__centro{ width:5.5rem; height:5.5rem } .pv-red__centro img{ width:3.8rem } .pv-red__t{ font-size:22px } }
.pv-aliados ul.aliados[data-aliados].aliados--grupos{ margin-top:0; --al-ancho:12.5rem }
.pv-aliados [data-aliados] .aliados__lista{ column-gap:clamp(1rem,2vw,1.6rem) }
@media (min-width:60rem){ .pv-aliados ul.aliados[data-aliados].aliados--grupos{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); max-width:80rem; gap:clamp(2rem,4vw,4rem); align-items:start } }
@media (max-width:59.99rem){ .pv-red{ display:none } }
@media (prefers-reduced-motion:reduce){ .pv-reco__foto,.pv-reco .pg-ambito{ transition:none } }

/* ============================================================================
   CONTACTO
   ========================================================================== */
.pv-con-k{ font-family:var(--sans); font-size:1rem; font-weight:650; color:var(--sol-2); margin:0 }
.pv-form{ padding-block:clamp(4.5rem,8vw,7rem) }
.pv-form{ overflow:clip }
.pv-form::before{ content:""; position:absolute; z-index:-1; inset:-20% -10% 40% 45%; background:radial-gradient(closest-side, rgba(217,164,65,.14), transparent) }
.pv-form__lado{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-xl); padding:clamp(1.6rem,3.5vw,2.8rem); background:var(--noche);
  box-shadow:0 50px 90px -50px rgba(10,26,47,.8) }
.pv-form__foto{ position:absolute; inset:0; z-index:-1 }
.pv-form__foto picture{ display:block; position:absolute; inset:0 }
.pv-form__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.pv-form__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,17,31,.62), rgba(6,17,31,.86) 55%, rgba(6,17,31,.94)) }
.pv-form__rej{ display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:start }
@media (min-width:64rem){ .pv-form__rej{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) } .pv-form__lado{ position:sticky; top:calc(var(--alto-nav) + 2rem) } }
.pv-form .pv-entrada .liga{ color:var(--papel); font-family:var(--sans); font-weight:650 }
.pv-ruta--oscuro{ margin-top:clamp(2rem,4vw,3rem) }
.pv-ruta--oscuro li::before{ background:linear-gradient(180deg, var(--sol-2), rgba(232,194,112,.2)) }
.pv-ruta--oscuro .pv-ruta__n{ background:rgba(244,242,238,.08); color:var(--sol-2); box-shadow:inset 0 0 0 2px var(--sol-2) }
.pv-ruta--oscuro li:first-child .pv-ruta__n{ background:var(--sol-2); color:var(--tinta) }
.pv-ruta--oscuro .pv-ruta__v{ color:var(--papel); font-size:clamp(1.1rem,1rem + .4vw,1.35rem) }
.pv-ruta--oscuro .pv-ruta__d{ color:#C9D4D7 }
.pv-form__nota{ margin-top:var(--e-sm); font-family:var(--sans); font-size:.9rem; color:#A9B9BD }
/* La tarjeta del formulario vuelve al contexto claro */
.pv-form .pg-form__tarjeta{ margin:0; max-width:none; align-self:center; --t1:var(--tinta); --t2:var(--tinta-2); --t3:var(--mudo); --fl:var(--filete); --ac:var(--petroleo); --foco:var(--petroleo);
  color:var(--tinta-2); box-shadow:0 40px 80px -48px rgba(14,23,38,.45), 0 0 0 1px var(--filete) }
/* Iniciativas en línea (franja común): el rótulo va sin puntito */
.espacios .chip i{ display:none }
@media (max-width:55.99rem){
  .pv-dos__i{ min-height:0; display:block; padding:0; background:var(--noche-hondo) }
  .pv-dos__i picture{ position:relative; aspect-ratio:4 / 3 }
  .pv-dos__i::after{ inset:0 0 auto; height:calc(100vw * .75); background:linear-gradient(0deg, var(--noche-hondo), rgba(6,17,31,0) 35%) }
  .pv-dos__txt{ position:relative; margin:-2rem var(--canal) 1.5rem }
}

/* ============================================================================
   v30 · PROYECTOS rehecho (BRIEF_v30, agente PÁGINAS)
   Mapa con ficha viva, capítulos con foto a sangre y ficha viva (ciclo,
   frentes, sistemas, horizonte), avances con fotos, Proyecto País con
   apertura grande y recorrido hasta el país. Prefijo .px-
   ========================================================================== */
.px-hero .pa__esc{ min-height:clamp(32rem, 78svh, 46rem); justify-content:center; padding-bottom:clamp(4rem,8vw,6rem) }
.px-hero .pa__pie{ bottom:1.1rem }
.px-hero .pv-indice{ margin-top:var(--e-lg) }

.px-k{ margin:0 0 .7rem; font-family:var(--sans); font-size:.84rem; font-weight:650; line-height:1.35; color:#A9B9BD }
.px-flecha{ flex:0 0 auto }

/* ------------------------------------------------------------------ mapa */
.px-mapa{ position:relative; isolation:isolate; overflow:clip; padding-block:clamp(4.5rem,8vw,7rem); color:#DCE3E6;
  background:radial-gradient(55% 45% at 28% 60%, rgba(20,80,79,.42), transparent 70%), radial-gradient(40% 40% at 85% 20%, rgba(217,164,65,.08), transparent 70%), var(--noche-hondo) }
.px-mapa__cab{ max-width:50rem }
.px-mapa__cab .pv-etapa{ color:var(--sol-2) }
.px-mapa__rej{ display:grid; gap:clamp(2rem,4vw,4.5rem); margin-top:clamp(2.5rem,5vw,4rem); align-items:start }
@media (min-width:64rem){ .px-mapa__rej{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }

.px-elige{ display:none }
.px-mapa--js .px-elige{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem }
.px-elige__b{ min-width:0; display:grid; align-content:start; gap:.1rem; min-height:var(--toque); padding:.7rem 1rem; text-align:left; cursor:pointer; font-family:var(--sans);
  border:0; border-radius:var(--r-lg); background:rgba(244,242,238,.05); color:#C9D4D7; box-shadow:inset 0 0 0 1px rgba(244,242,238,.14);
  transition:background .2s ease, box-shadow .2s ease, color .2s ease }
.px-elige__b small{ font-size:.76rem; font-weight:600; color:#A9B9BD }
.px-elige__b b{ font-size:clamp(.9rem,.85rem + .3vw,1.02rem); font-weight:650; line-height:1.25; color:var(--papel) }
@media (max-width:30rem){ .px-elige__b{ padding:.6rem .65rem } }
.px-elige__b:hover{ background:rgba(244,242,238,.09) }
.px-elige__b[aria-pressed="true"]{ background:rgba(244,242,238,.1); box-shadow:inset 0 0 0 2px var(--c) }
.px-elige__b[aria-pressed="true"] small{ color:var(--c) }
.px-elige__b:focus-visible{ outline:3px solid var(--sol-2); outline-offset:3px }

.px-mapa__fig{ margin:clamp(1.2rem,3vw,2rem) 0 0 }
.px-mapa__marco{ position:relative; width:min(100%, 31rem); margin-inline:auto }
.px-mapa__svg{ display:block; width:100%; height:auto; overflow:visible }
.px-d{ fill:rgba(216,203,179,.07); stroke:rgba(216,203,179,.3); stroke-width:.9; stroke-linejoin:round; transition:fill .45s var(--curva), stroke .45s var(--curva) }
.px-mapa__rej:not([data-sel]) .px-d[data-dep="cusco"],.px-mapa__rej[data-sel="ticumpinia"] .px-d[data-dep="cusco"]{ fill:rgba(232,194,112,.3); stroke:var(--sol-2) }
.px-mapa__rej:not([data-sel]) .px-d[data-dep="callao"],.px-mapa__rej[data-sel="callao"] .px-d[data-dep="callao"]{ fill:rgba(124,196,190,.6); stroke:var(--ac-lab) }
.px-mapa__rej[data-sel="callao"] .px-d[data-dep="lima"]{ fill:rgba(124,196,190,.1) }
.px-mapa__rej[data-sel="pais"] .px-d{ fill:rgba(244,162,97,.26); stroke:rgba(244,162,97,.75); transition-delay:calc(var(--i) * 22ms) }
.px-pulso__c{ fill:var(--sol-2); stroke:var(--noche-hondo); stroke-width:2.5 }
.px-pulso[data-p="callao"] .px-pulso__c{ fill:var(--ac-lab) }
.px-pulso__o{ fill:none; stroke:var(--sol-2); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center }
.px-pulso[data-p="callao"] .px-pulso__o{ stroke:var(--ac-lab) }
.px-mapa__rej[data-sel] .px-pulso{ opacity:.45; transition:opacity .3s ease }
.px-mapa__rej[data-sel="ticumpinia"] .px-pulso[data-p="ticumpinia"],.px-mapa__rej[data-sel="callao"] .px-pulso[data-p="callao"]{ opacity:1 }
.px-mapa__rej[data-sel="pais"] .px-pulso{ opacity:.8 }
@media (prefers-reduced-motion:no-preference){
  .px-mapa__rej[data-sel="ticumpinia"] .px-pulso[data-p="ticumpinia"] .px-pulso__o,
  .px-mapa__rej[data-sel="callao"] .px-pulso[data-p="callao"] .px-pulso__o{ animation:px-onda 2.4s var(--curva) infinite }
}
@keyframes px-onda{ 0%{ opacity:.9; transform:scale(.45) } 100%{ opacity:0; transform:scale(1.6) } }

/* Etiquetas sobre el mapa (para el ratón; el teclado usa los botones) */
.px-mapa__et{ position:absolute; inset:0; pointer-events:none }
.px-et{ position:absolute; left:var(--x); top:var(--y); pointer-events:auto; display:grid; gap:0; padding:.45rem .7rem; text-align:left; cursor:pointer; white-space:nowrap;
  font-family:var(--sans); border:0; border-radius:.7rem; background:rgba(6,17,31,.72); color:var(--papel);
  box-shadow:inset 0 0 0 1px rgba(244,242,238,.18), 0 12px 24px -12px rgba(0,0,0,.6); transition:box-shadow .2s ease, background .2s ease }
@supports (backdrop-filter:blur(2px)){ .px-et{ background:rgba(6,17,31,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) } }
.px-et b{ font-size:.9rem; font-weight:650; line-height:1.25 }
.px-et small{ font-size:.72rem; font-weight:600; color:#A9B9BD }
.px-et--der{ transform:translate(16px,-50%) }
.px-et--izq{ transform:translate(calc(-100% - 16px),-50%) }
.px-et--pais{ transform:translate(-50%,-50%) }
.px-mapa__rej[data-sel="ticumpinia"] .px-et[data-elige="ticumpinia"]{ box-shadow:inset 0 0 0 2px var(--sol-2) }
.px-mapa__rej[data-sel="callao"] .px-et[data-elige="callao"]{ box-shadow:inset 0 0 0 2px var(--ac-lab) }
.px-mapa__rej[data-sel="pais"] .px-et[data-elige="pais"]{ box-shadow:inset 0 0 0 2px var(--ac-brujula) }
.px-mapa__rej:not(.px-mapa--js) .px-et{ cursor:default }
@media (max-width:39.99rem){ .px-et{ display:none } }
.px-mapa__pie{ margin-top:1rem; text-align:center; font-family:var(--sans); font-size:.76rem; line-height:1.45; color:#8FA2A7 }
.px-mapa__pie a{ color:inherit; text-underline-offset:.2em }

/* Ficha viva del mapa */
.px-mapa__fichas{ display:grid; gap:1.5rem }
.px-mapa--js .px-mf[data-oculta]{ display:none }
.px-mf{ border-radius:var(--r-xl); overflow:hidden; background:rgba(17,37,63,.62); color:#DCE3E6;
  box-shadow:inset 0 0 0 1px rgba(244,242,238,.12), 0 40px 80px -40px rgba(0,0,0,.7) }
@supports (backdrop-filter:blur(2px)){ .px-mf{ background:rgba(17,37,63,.48); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) } }
@media (prefers-reduced-motion:no-preference){ .px-mapa--js .px-mf{ animation:px-ficha .5s var(--curva) both } }
@keyframes px-ficha{ from{ opacity:0; transform:translate3d(0,14px,0) } to{ opacity:1; transform:none } }
.px-mf__foto{ position:relative; margin:0; aspect-ratio:2 / 1; background:var(--noche-2) }
.px-mf__foto picture,.px-viva__foto picture,.px-av__foto picture{ display:block; position:absolute; inset:0 }
.px-mf__foto img,.px-viva__foto img,.px-av__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.px-mf__foto::after,.px-viva__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,17,31,.7), rgba(6,17,31,0) 45%) }
.px-mf__foto figcaption,.px-viva__foto figcaption{ position:absolute; z-index:1; left:1.2rem; right:1.2rem; bottom:.85rem; font-family:var(--sans); font-size:.8rem; color:#E3E9EB }
.px-mf__cuerpo{ padding:clamp(1.3rem,2.6vw,2rem); display:grid; gap:0 }
.px-mf__tipo{ font-family:var(--sans); font-size:.84rem; font-weight:650; color:var(--c) }
.px-mf__t{ margin-top:.35rem; font-family:var(--sans); font-size:clamp(1.6rem,1.2rem + 1.3vw,2.4rem); font-weight:650; line-height:1.06; letter-spacing:-.025em; color:var(--papel); text-wrap:balance }
.px-mf__ali{ margin-top:.45rem; font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--piedra) }
.px-mf__d{ margin-top:.9rem; font-family:var(--lee); font-size:1.04rem; line-height:1.6; color:#C9D4D7; max-width:46ch }
.px-mf .px-ciclo{ margin-top:1.5rem }
.px-mf .px-fr{ margin-top:1.3rem }
.px-mf__ir{ justify-self:start; margin-top:1.6rem }
.px-mf__ir .px-flecha,.px-mf__ir svg{ transition:transform .25s var(--curva) }
.px-mf__ir:hover svg{ transform:translateX(3px) }

/* ------------------------------------------------------------------ ciclo de seis momentos */
.px-ciclo__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px }
.px-ciclo__l li{ position:relative; padding-top:.95rem; min-width:0 }
.px-ciclo__l li::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:3px; background:rgba(244,242,238,.14); transform-origin:left center }
.px-ciclo__l li[data-hecho]::before{ background:color-mix(in srgb, var(--c, var(--sol-2)) 52%, transparent) }
.px-ciclo__l li[aria-current]::before{ background:var(--c, var(--sol-2)); box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--sol-2)) 22%, transparent) }
.px-ciclo{ container-type:inline-size }
.px-ciclo__l span{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:600; line-height:1.25; color:#8FA2A7; white-space:nowrap }
.px-ciclo__l li[aria-current] span{ color:var(--papel); font-weight:700 }
.px-ciclo__d{ margin-top:.75rem; font-family:var(--lee); font-size:.98rem; line-height:1.5; color:#C9D4D7 }
.px-ciclo__d b{ font-family:var(--sans); font-weight:650; color:var(--papel) }
@container (max-width:31rem){ .px-ciclo__l span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap } .px-ciclo__l li{ padding-top:6px } }
@media (prefers-reduced-motion:no-preference){
  .px-mapa--js .px-mf .px-ciclo__l li::before{ animation:px-barra .5s var(--curva) both; animation-delay:calc(var(--i) * 70ms + .15s) }
  .rv .px-viva .px-ciclo__l li::before{ transition:transform .55s var(--curva) calc(var(--i) * 80ms + .25s) }
  .rv .px-viva:not(.visto) .px-ciclo__l li::before{ transform:scaleX(0) }
}
@keyframes px-barra{ from{ transform:scaleX(0) } to{ transform:none } }

/* ------------------------------------------------------------------ frentes (cuatro, en orden) */
.px-fr__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.1rem }
.px-fr{ container-type:inline-size }
@container (min-width:36rem){ .px-fr__l--corto{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.px-fr__l li{ position:relative; min-width:0; padding-top:.85rem; font-family:var(--sans) }
.px-fr__l li::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:2px; background:rgba(244,242,238,.12) }
.px-fr__l li[data-on]::before{ background:var(--c, var(--sol-2)) }
.px-fr__l a{ display:grid; gap:.1rem; color:inherit; text-decoration:none }
.px-fr__l a:hover b{ text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--c, var(--sol-2)) }
.px-fr__l a:focus-visible{ outline:3px solid var(--sol-2); outline-offset:3px; border-radius:4px }
.px-fr__v{ display:block; font-size:.74rem; font-weight:650; color:#8FA2A7 }
.px-fr__l li[data-on] .px-fr__v{ color:var(--c, var(--sol-2)) }
.px-fr__l b{ display:block; font-size:.92rem; font-weight:650; line-height:1.3; color:var(--papel) }
.px-fr__l li:not([data-on]) b{ color:#7D8C92; font-weight:600 }
.px-fr__l small{ display:block; margin-top:.15rem; font-family:var(--lee); font-size:.86rem; line-height:1.45; color:#B7C6C9 }
.px-fr__l .px-fr__no{ font-family:var(--sans); font-size:.74rem; color:#7D8C92 }
.px-fr__l--corto small:not(.px-fr__no){ display:none }
.px-fr__l--corto .px-fr__no{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* ------------------------------------------------------------------ sistemas */
.px-sis__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.8rem 1.2rem }
.px-sis__l a{ display:flex; align-items:center; gap:.75rem; min-height:var(--toque); color:inherit; text-decoration:none; border-radius:.6rem }
.px-sis__l a:focus-visible{ outline:3px solid var(--sol-2); outline-offset:3px }
.px-sis__l img{ flex:0 0 auto; width:2.9rem; height:2.9rem; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(244,242,238,.16) }
.px-sis__l span{ display:grid; gap:.05rem; min-width:0 }
.px-sis__l b{ font-family:var(--sans); font-size:.95rem; font-weight:650; color:var(--papel) }
.px-sis__l small{ font-family:var(--lee); font-size:.86rem; line-height:1.4; color:#B7C6C9 }
.px-sis__l a:hover b{ text-decoration:underline; text-underline-offset:.2em }

/* ------------------------------------------------------------------ capítulos de proyecto */
.px-cap{ --c:var(--sol-2) }
@media (min-width:48rem){ .px-ap{ min-height:min(82vh, 48rem) } }
.px-ap__ali{ margin-top:var(--e-sm); font-family:var(--sans); font-size:1rem; font-weight:650; color:var(--piedra); text-shadow:0 1px 10px rgba(6,17,31,.7) }
.px-pf{ display:grid; gap:clamp(2.5rem,5vw,5rem); padding-block:clamp(2.5rem,5vw,4rem) clamp(4.5rem,8vw,7rem); align-items:start }
@media (min-width:64rem){ .px-pf{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) } }
.px-pf__txt{ display:grid; gap:0; max-width:40rem }
.px-pf__txt .pv-cuerpo{ margin-top:var(--e-sm) }
.px-datos{ margin:clamp(1.8rem,3vw,2.4rem) 0 0; display:grid }
.px-datos > div{ display:grid; grid-template-columns:minmax(0,8rem) minmax(0,1fr); gap:.2rem 1.2rem; padding:.85rem 0; border-top:1px solid rgba(244,242,238,.12) }
.px-datos > div:last-child{ border-bottom:1px solid rgba(244,242,238,.12) }
.px-datos dt{ font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--c, var(--sol-2)) }
.px-datos dd{ margin:0; font-family:var(--sans); font-size:.98rem; line-height:1.5; color:var(--papel) }
@media (max-width:30rem){ .px-datos > div{ grid-template-columns:1fr } }
.nw{ white-space:nowrap }

.px-viva{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--noche); color:#DCE3E6;
  box-shadow:inset 0 0 0 1px rgba(244,242,238,.1), 0 50px 90px -50px rgba(0,0,0,.85) }
.px-viva__foto{ position:relative; margin:0; aspect-ratio:16 / 9; background:var(--noche-2) }
.px-viva__in{ display:grid; gap:1.7rem; padding:clamp(1.3rem,2.6vw,2rem) }
@media (min-width:64rem){ .px-viva{ margin-top:clamp(-9rem,-8vw,-5rem); z-index:2 } }

.px-hor{ margin-top:clamp(2rem,3.5vw,2.8rem) }
.px-hor__regla{ display:grid; grid-template-columns:repeat(20,minmax(0,1fr)); gap:3px; height:1.1rem }
.px-hor__regla i{ border-radius:2px; background:rgba(244,242,238,.14) }
.px-hor__regla i[data-on]{ background:var(--sol-2); box-shadow:0 0 0 3px rgba(232,194,112,.22) }
.px-hor__ley{ display:flex; justify-content:space-between; gap:1rem; margin-top:.6rem; font-family:var(--sans); font-size:.82rem; color:#A9B9BD }
.px-hor__ley b{ color:var(--sol-2); font-weight:650 }
.px-hor__ley span:last-child{ text-align:right; flex:0 0 auto }

/* ------------------------------------------------------------------ avances con fotos */
.px-avs{ padding-block:clamp(4.5rem,8vw,7rem); overflow:clip }
.px-avs::before{ content:""; position:absolute; z-index:-1; inset:-10% -10% 50% 50%; background:radial-gradient(closest-side, rgba(217,164,65,.12), transparent) }
.px-avs__cab{ max-width:50rem }
.px-avs__rej{ display:grid; gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(2.5rem,5vw,3.5rem) }
@media (min-width:44rem){ .px-avs__rej{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:64rem){
  .px-avs__rej{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-areas:"a b" "a c" "d d" }
  .px-av--1{ grid-area:a } .px-av--2{ grid-area:b } .px-av--3{ grid-area:c }
  .px-av--4{ grid-area:d; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto }
  .px-av--1 .px-av__foto{ aspect-ratio:auto; flex:1 1 auto; min-height:22rem }
  .px-av--4 .px-av__foto{ aspect-ratio:auto; min-height:17rem }
  .px-av--4 .px-av__txt{ align-self:center }
}
.px-av{ display:flex; flex-direction:column; border-radius:var(--r-xl); overflow:hidden; background:var(--blanco); color:var(--tinta-2);
  box-shadow:0 1px 0 rgba(14,23,38,.04), 0 30px 60px -40px rgba(14,23,38,.45), inset 0 0 0 1px var(--filete) }
@media (min-width:64rem){ .px-av--4{ display:grid } }
.px-av__foto{ position:relative; margin:0; aspect-ratio:16 / 10; background:var(--niebla); overflow:hidden }
.px-av__foto img{ transition:transform 1.2s var(--curva) }
.px-av:hover .px-av__foto img{ transform:scale(1.03) }
.px-av__txt{ padding:clamp(1.2rem,2.4vw,1.7rem) }
.px-av__k{ font-family:var(--sans); font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem); font-weight:650; letter-spacing:-.02em; line-height:1.15; color:var(--tinta) }
.px-av__l{ list-style:none; margin:.9rem 0 0; padding:0; display:grid }
.px-av__l li{ display:grid; gap:.15rem; padding:.75rem 0; border-top:1px solid var(--filete) }
.px-av__l li:last-child{ padding-bottom:0 }
.px-av__l b{ font-family:var(--sans); font-size:1rem; font-weight:650; line-height:1.35; color:var(--tinta) }
.px-av__l span{ font-family:var(--lee); font-size:.95rem; line-height:1.55; color:var(--tinta-2) }
.px-cuidado{ display:flex; align-items:flex-start; gap:.7rem; max-width:52rem; margin:clamp(1.8rem,3vw,2.4rem) auto 0; font-family:var(--sans); font-size:.92rem; line-height:1.5; color:var(--tinta-2) }
.px-cuidado svg{ flex:0 0 auto; width:1.4rem; height:1.4rem; color:var(--petroleo) }
.px-cuidado b{ color:var(--tinta) }
@media (prefers-reduced-motion:reduce){ .px-av__foto img{ transition:none } .px-av:hover .px-av__foto img{ transform:none } }

/* ------------------------------------------------------------------ Proyecto País */
.px-pp{ --c:var(--ac-brujula) }
@media (min-width:48rem){ .px-pp__ap{ min-height:min(96vh, 58rem) } }
.px-pp__ap::after{ background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.82) 26%, rgba(6,17,31,.2) 62%, rgba(6,17,31,0) 78%), linear-gradient(90deg, rgba(6,17,31,.45), rgba(6,17,31,0) 55%), linear-gradient(180deg, rgba(6,17,31,.55), rgba(6,17,31,0) 22%) }
.px-pp__t{ font-size:clamp(3rem,1.4rem + 6vw,7.6rem); line-height:.92; letter-spacing:-.045em; max-width:none }
.px-pp__sub{ margin-top:var(--e-sm); font-family:var(--lee); font-style:italic; font-size:clamp(1.25rem,1rem + 1vw,1.9rem); line-height:1.3; color:var(--papel); text-shadow:0 1px 14px rgba(6,17,31,.7); max-width:26ch }
.px-pp__quien{ margin-top:.9rem; font-family:var(--sans) !important; font-size:.92rem !important; line-height:1.5; color:#DCE3E6 }
.px-pp__quien .liga{ color:var(--papel); font-weight:650 }
.px-pp .px-datos dt{ color:var(--ac-brujula) }

/* El recorrido: del Colegio Mayor a las escuelas del país */
.px-ppr{ padding-block:clamp(4.5rem,8vw,7rem); overflow:clip; background:linear-gradient(180deg, var(--papel), #EDE7DC) }
.px-ppr__rej{ display:grid; gap:2.5rem; margin-top:clamp(2.5rem,5vw,4rem); align-items:start }
.px-ppr__origen,.px-ppr__destino{ margin:0; display:grid; justify-items:center; text-align:center; gap:.8rem }
.px-ppr__origen figcaption,.px-ppr__destino figcaption{ display:grid; gap:.15rem; font-family:var(--sans); font-size:.9rem; line-height:1.45; color:var(--tinta-2); max-width:16rem }
.px-ppr__origen b,.px-ppr__destino b{ font-size:1.05rem; font-weight:650; color:var(--tinta) }
.px-ppr__ojo{ position:relative; display:block; width:11rem; height:11rem; border-radius:50%; overflow:hidden; box-shadow:0 0 0 8px rgba(217,164,65,.2), 0 30px 50px -30px rgba(14,23,38,.6) }
.px-ppr__ojo picture{ display:block; position:absolute; inset:0 }
.px-ppr__ojo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.px-ppr__svg{ display:block; width:auto; height:11rem; overflow:visible; filter:drop-shadow(0 20px 30px rgba(14,23,38,.25)) }
.px-ppr__svg .px-d{ fill:var(--petroleo); stroke:var(--papel); stroke-width:1.6 }
.px-ppr__l{ list-style:none; margin:0; padding:0; display:grid; position:relative }
.px-ppr__l li{ position:relative; display:grid; gap:.2rem; align-content:start; font-family:var(--sans) }
.px-ppr__l li::after{ content:""; position:absolute; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--papel); box-shadow:inset 0 0 0 2px var(--petroleo) }
.px-ppr__l li[data-estado="curso"]::after{ background:var(--sol); box-shadow:0 0 0 6px rgba(217,164,65,.22) }
.px-ppr__f{ font-size:.82rem; font-weight:650; color:var(--petroleo) }
.px-ppr__l b{ font-size:clamp(1.05rem,1rem + .3vw,1.25rem); font-weight:650; letter-spacing:-.012em; line-height:1.25; color:var(--tinta) }
.px-ppr__l span:not(.px-ppr__f){ font-family:var(--lee); font-size:.95rem; line-height:1.5; color:var(--tinta-2) }
.px-ppr__l em{ font-style:normal; font-size:.8rem; font-weight:700; color:#8A5A00 }
@media (min-width:76rem){
  .px-ppr__rej{ grid-template-columns:12rem minmax(0,1fr) 12rem; gap:1.5rem; align-items:start }
  .px-ppr__l{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem; margin-top:4.9rem }
  .px-ppr__l::before{ content:""; position:absolute; left:-1.5rem; right:-1.5rem; top:.55rem; height:2px;
    background:linear-gradient(90deg, var(--sol) 0, var(--sol) 46%, rgba(20,80,79,.4) 46%) }
  .px-ppr__l li{ padding-top:2rem }
  .px-ppr__l li::after{ left:0; top:0 }
  .px-ppr__destino{ margin-top:0 }
}
@media (max-width:75.99rem){
  .px-ppr__rej{ max-width:34rem; margin-inline:auto }
  .px-ppr__l li{ padding:0 0 1.6rem 2.2rem }
  .px-ppr__l li::after{ left:0; top:.1rem }
  .px-ppr__l li::before{ content:""; position:absolute; left:calc(.575rem - 1px); top:1.3rem; bottom:-.1rem; width:2px; background:rgba(20,80,79,.35) }
  .px-ppr__l li[data-estado="curso"]::before{ background:var(--sol) }
  .px-ppr__l li:last-child{ padding-bottom:0 }
  .px-ppr__l li:last-child::before{ content:none }
}
@media (min-width:64rem){ .px-ap .pv-t{ max-width:14ch } }
@media (min-width:64rem){ .px-pp .px-viva{ margin-top:0 } }

/* ============================================================================
   v30 · NOSOTROS con más aire (BRIEF_v30): sin el retrato de pie, trayecto en
   horizontal, definición sin foto, Cómo trabajamos solo con los frentes y la
   empresa en su propia banda.
   ========================================================================== */
.pv-formacion--v30{ grid-template-columns:minmax(0,1fr) !important; padding-top:clamp(1rem,3vw,2rem); padding-bottom:clamp(5rem,9vw,8rem) }
.pv-formacion__cab{ max-width:44rem }
.pv-formacion__cab .pv-cuerpo{ margin-top:var(--e-sm) }
@media (min-width:64rem){
  .pv-formacion--v30 .pv-tray{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 clamp(1.2rem,2.2vw,2rem); margin-top:clamp(2.4rem,4vw,3.4rem) }
  .pv-formacion--v30 .pv-tray__h{ grid-template-columns:minmax(0,1fr); padding-bottom:0; align-content:start }
  .pv-formacion--v30 .pv-tray__h > *:not(.pv-tray__nodo){ grid-column:1 }
  .pv-formacion--v30 .pv-tray__nodo{ grid-row:auto; margin-bottom:1.1rem }
  .pv-formacion--v30 .pv-tray__h::before{ left:3.6rem; right:calc(clamp(1.2rem,2.2vw,2rem) * -1 + .6rem); top:calc(1.5rem - 1px); bottom:auto; width:auto; height:2px }
  .pv-formacion--v30 .pv-tray__h[data-estado="curso"]::before{ background:repeating-linear-gradient(90deg, rgba(232,194,112,.7) 0 6px, transparent 6px 12px) }
  .pv-formacion--v30 .pv-tray__h:nth-child(3)::before{ background:repeating-linear-gradient(90deg, rgba(232,194,112,.7) 0 6px, transparent 6px 12px) }
  .pv-formacion--v30 .pv-tray__ley{ margin-top:1.8rem }
}

.pv-def--v30 .def26{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); align-items:start }
.pv-def--v30 .def26__voz{ align-self:start }
.pv-def--v30 .def26__lema{ margin-top:0; font-size:clamp(2.6rem,1.2rem + 3.3vw,4.6rem); white-space:nowrap }
.pv-def--v30 .def26__cat{ margin-top:1rem }
.pv-def--v30 .def26__cuerpo{ gap:clamp(1.4rem,2.6vw,2rem) }
.pv-def--v30 .def26__glosas{ margin-top:.6rem }
@media (max-width:52rem){ .pv-def--v30 .def26{ grid-template-columns:1fr; row-gap:2rem } }

.pv-como__equipo{ max-width:46ch; padding-top:clamp(1.4rem,2.5vw,2rem); border-top:1px solid var(--filete) }
@media (min-width:62rem){ .pv-como__txt{ min-height:100vh; min-height:100svh; align-content:center } }

.pv-emp{ padding-block:clamp(4.5rem,8vw,7rem); background:linear-gradient(180deg, #ECE6DA, var(--papel) 70%) }
.pv-emp__cab{ max-width:54rem }
.pv-emp__cab .pv-t{ max-width:24ch }
.pv-emp__rej{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); margin-top:clamp(2.5rem,5vw,3.5rem); align-items:start }
@media (min-width:62rem){ .pv-emp__rej{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) } }
.pv-emp .pv-empresa{ padding:clamp(1.4rem,2.8vw,2.2rem) }
.pv-emp .pv-empresa dl{ margin-top:0 }
.pv-emp .pv-empresa dl > div:first-child{ border-top:0; padding-top:0 }

/* v30 · CONTACTO, revisión fina: el formulario alinea su borde superior con el panel,
   el campo del caso tiene altura para escribir y la etapa ya no lleva un «01» suelto. */
.pv-form .pg-form__tarjeta{ align-self:start }
.pv-form textarea{ min-height:9rem; resize:vertical }
@media (min-width:64rem){ .pv-form .pg-form__tarjeta{ margin-top:clamp(1rem,2vw,2rem) } }

/* ============================================================================
   v31 · MÉTODO (PÁGINAS): respiros de foto entre los interactivos, el puente
   con la tríada de Qué hacemos, el caso real y la línea de fichas técnicas.
   Prefijo .m31-
   ========================================================================== */
.m31-puente{ margin:var(--e-sm) auto 0; max-width:56ch; font-family:var(--sans); font-size:.95rem; line-height:1.55; color:#A9B9BD }
.m31-puente .liga{ color:var(--papel) }

.m31-respiro{ min-height:min(72vh, 42rem); display:grid; align-items:end }
.m31-respiro__foto{ position:absolute; inset:0; z-index:-2 }
.m31-respiro__foto picture{ display:block; position:absolute; inset:0 }
.m31-respiro__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.m31-respiro__foto::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.78) 28%, rgba(6,17,31,.18) 62%, rgba(6,17,31,.5) 100%) }
.m31-respiro__in{ width:100%; padding-block:clamp(6rem,14vw,10rem) clamp(2.4rem,5vw,4rem) }
.m31-respiro__t{ max-width:30ch; font-family:var(--sans); font-weight:620; font-size:clamp(1.5rem,1.05rem + 1.7vw,2.6rem); line-height:1.16; letter-spacing:-.022em;
  color:var(--papel); text-wrap:balance; text-shadow:0 2px 22px rgba(6,17,31,.6) }
.m31-respiro__t span{ display:block; margin-top:.5em; font-family:var(--lee); font-weight:400; font-size:.62em; line-height:1.5; letter-spacing:0; color:#DCE3E6; max-width:46ch; text-wrap:pretty }
.m31-respiro__pie{ margin-top:var(--e-md); font-family:var(--sans); font-size:.8rem; line-height:1.45; color:rgba(244,242,238,.72) }
@media (max-width:47.99rem){
  .m31-respiro{ min-height:0; display:block }
  .m31-respiro__foto{ position:relative; inset:auto; aspect-ratio:4 / 3 }
  .m31-respiro__foto::after{ background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,0) 45%) }
  .m31-respiro__in{ padding-block:0 2.6rem; margin-top:-2.4rem; position:relative }
}

.m31-caso{ display:grid; margin-top:clamp(2.5rem,5vw,4rem); max-width:76rem; margin-inline:auto; border-radius:var(--r-lg); overflow:hidden; text-decoration:none;
  background:var(--blanco); color:var(--tinta-2); box-shadow:0 30px 60px -40px rgba(14,23,38,.45), 0 0 0 1px var(--filete) }
@media (min-width:48rem){ .m31-caso{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) } }
.m31-caso__foto{ display:block; position:relative; min-height:13rem }
.m31-caso__foto picture{ display:block; position:absolute; inset:0 }
.m31-caso__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; transition:transform 1.2s var(--curva) }
.m31-caso:hover .m31-caso__foto img{ transform:scale(1.03) }
.m31-caso__txt{ display:grid; gap:.4rem; align-content:center; padding:clamp(1.4rem,3vw,2.4rem) }
.m31-caso__k{ font-family:var(--sans); font-size:.86rem; font-weight:700; color:var(--petroleo) }
.m31-caso b{ font-family:var(--sans); font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem); font-weight:650; line-height:1.15; letter-spacing:-.02em; color:var(--tinta) }
.m31-caso__d{ font-family:var(--lee); font-size:1.02rem; line-height:1.55 }
.m31-caso__ir{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.5rem; font-family:var(--sans); font-weight:650; color:var(--petroleo);
  text-decoration:underline; text-decoration-color:rgba(20,80,79,.3); text-underline-offset:.3em }
.m31-caso:hover .m31-caso__ir,.m31-caso:focus-visible .m31-caso__ir{ text-decoration-color:var(--petroleo) }
.m31-caso:focus-visible{ outline:3px solid var(--petroleo); outline-offset:4px }

.m31-fichas{ margin:0; font-family:var(--sans); font-size:.92rem; line-height:1.6; color:#C9D4D7 }
.m31-fichas .liga{ color:var(--papel) }
@media (prefers-reduced-motion:reduce){ .m31-caso__foto img{ transition:none } .m31-caso:hover .m31-caso__foto img{ transform:none } }

/* ============================================================================
   v31 · NOSOTROS (PÁGINAS): primero la firma, la comunidad en una frase, los
   anillos como versión completa del fin, una línea para frentes y financiamiento,
   y los compromisos que llevan a Conversemos. Prefijo .n31-
   ========================================================================== */
.n31-def{ margin-top:var(--e-sm); padding-top:var(--e-sm); border-top:1px solid rgba(244,242,238,.16); font-size:clamp(.98rem,.94rem + .2vw,1.08rem) !important }
.pv-vidrio .n31-def .liga{ color:var(--papel); font-family:var(--sans); font-weight:650 }

.pv-capas .nq-panel__foto{ aspect-ratio:16 / 8 }
.pv-capas .nq-panel__d{ font-family:var(--sans); font-size:clamp(1.08rem,1rem + .35vw,1.3rem); font-weight:560; line-height:1.4; color:var(--papel) }
.n31-capa{ display:grid; gap:0; margin:.5rem 0 0; max-width:46ch }
.n31-capa > div{ display:grid; gap:.15rem; padding:.7rem 0; border-top:1px solid rgba(244,242,238,.14) }
.n31-capa dt{ font-family:var(--sans); font-size:.86rem; font-weight:700; color:var(--sol-2) }
.n31-capa dd{ margin:0; font-family:var(--lee); font-size:1rem; line-height:1.55; color:#C9D4D7 }
.n31-ligas{ margin-top:.3rem; font-family:var(--sans); font-size:.95rem; line-height:1.9; color:#A9B9BD }
.pv-capas .n31-ligas .liga{ margin:0; color:var(--papel) }

.n31-linea{ max-width:60ch; margin:clamp(2.5rem,5vw,3.5rem) auto 0; text-align:center; font-family:var(--lee); font-style:italic; font-size:1.05rem; line-height:1.6; color:#C9D4D7; text-wrap:pretty }
.n31-linea .liga{ font-style:normal; font-family:var(--sans); font-weight:650; color:var(--papel) }
.n31-linea--claro{ margin:var(--e-md) 0 0; text-align:left; color:var(--tinta-2); padding-top:var(--e-md); border-top:1px solid var(--filete) }
.n31-linea--claro .liga{ color:var(--petroleo) }
.n31-fin{ align-self:start; padding-top:clamp(0rem,1vw,1rem) }

.n31-acc{ margin-top:var(--e-lg) }
.n31-acc__d{ margin-top:.6rem; font-family:var(--sans); font-size:.9rem; color:#C9D4D7 }

/* v31 · CONTACTO (PÁGINAS): la línea de preguntas frecuentes */
.c31-faq{ margin-top:clamp(1.6rem,3vw,2.2rem); padding-top:var(--e-sm); border-top:1px solid rgba(244,242,238,.16); line-height:1.7 }
.c31-faq .liga{ color:var(--papel); font-weight:600 }
/* v31 · Método: la fórmula es la intuición, sin escala propia que compita con los niveles del ICT‑5 */
.m31-escala{ margin:.6rem auto 0; max-width:52ch; text-align:center; font-family:var(--sans); font-size:.82rem; line-height:1.5; color:var(--suave-claro) }
#fEtiqueta[hidden]{ display:none }
.m31-intuicion{ font-size:.92rem !important; color:#DCE3E6 !important }
.m31-intuicion .liga{ color:var(--papel); font-weight:650 }