/* Conecta para el Desarrollo · módulo "Una trayectoria" 1.0
   Depende de los tokens de cpd.css. Funciona sobre papel o dentro de .oscuro / .petroleo:
   los colores del khipu se derivan de --t1, --t2, --t3, --ac y --fl de la banda.
   Sin JS (o con movimiento reducido) el khipu se muestra completo. */

.trayectoria{
  --k-principal:var(--t1);
  --k-cuerda:var(--t3);
  --k-nudo:var(--ac);
  --k-fantasma:var(--fl);
  --k-activa:var(--t1);
  position:relative;
}

/* Cabecera */
.trayectoria__cabeza{max-width:48rem}
.trayectoria__cabeza .titular{max-width:24ch}
.trayectoria__aviso{max-width:var(--medida);margin-top:var(--e-m);padding-left:1rem;border-left:2px solid var(--fl);line-height:1.55}

/* Cuerpo: dibujo + etapas */
.trayectoria__cuerpo{display:grid;gap:var(--e-l);margin-top:var(--e-xl)}
.trayectoria__lienzo{margin:0;display:flex;justify-content:center}
.trayectoria__lienzo .khipu{width:100%;max-width:30rem;height:auto;overflow:visible}

.trayectoria__etapas{list-style:none;margin:0;padding:0;counter-reset:none}

/* Khipu */
.khipu{font-family:var(--sans)}
.khipu__fantasma path{fill:none;stroke:var(--k-fantasma);stroke-width:2;stroke-linecap:round}
.khipu__principal{fill:none;stroke:var(--k-principal);stroke-width:6;stroke-linecap:round}
.khipu__inicio{fill:none;stroke:var(--k-principal);stroke-width:3}
.khipu__remate{fill:none;stroke:var(--k-principal);stroke-width:2.2;stroke-linecap:round;transition:opacity .4s var(--curva)}
.khipu__cuerda{fill:none;stroke:var(--k-cuerda);stroke-width:3;stroke-linecap:round;transition:stroke .35s var(--curva)}
.khipu__amarre{fill:var(--k-principal)}
.khipu__nudo{fill:var(--k-nudo);transform-box:fill-box;transform-origin:center}
.khipu__nudo .khipu__vuelta{fill:none;stroke:var(--fondo);stroke-width:1.3;stroke-linecap:round;opacity:.8}
.khipu__nudo--c{opacity:.85}
.khipu__num{font:700 13px var(--sans);letter-spacing:.08em;fill:var(--t3)}
.khipu__valor{font:500 19px var(--lee);fill:var(--t2);font-variant-numeric:tabular-nums}
.khipu__nombre{font:700 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--t3)}
.khipu__rotulo text{transition:fill .35s var(--curva)}

/* Etapa activa (también en el dibujo) */
.khipu__colgante.activa .khipu__cuerda{stroke:var(--k-activa);stroke-width:3.6}
.khipu__colgante.activa .khipu__num,.khipu__colgante.activa .khipu__nombre{fill:var(--k-nudo)}
.khipu__colgante.activa .khipu__valor{fill:var(--t1)}

/* Estado animado: lo activa trayectoria.js solo si hay movimiento permitido */
.trayectoria--viva .khipu__nudo{opacity:0;transform:scale(.25) rotate(-30deg);transition:opacity .3s var(--curva),transform .55s cubic-bezier(.34,1.5,.64,1)}
.trayectoria--viva .khipu__nudo.anudado{opacity:1;transform:none}
.trayectoria--viva .khipu__nudo--c.anudado{opacity:.85}
.trayectoria--viva .khipu__amarre,.trayectoria--viva .khipu__rotulo,.trayectoria--viva .khipu__remate{opacity:0;transition:opacity .45s var(--curva)}
.trayectoria--viva .khipu__colgante.visible .khipu__amarre,.trayectoria--viva .khipu__colgante.visible .khipu__rotulo,.trayectoria--viva .khipu--completo .khipu__remate{opacity:1}

/* Etapas */
.etapa{padding-block:var(--e-l) var(--e-xl);border-top:1px solid var(--fl);position:relative}
.etapa::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--ac);transition:width .6s var(--curva)}
.etapa--activa::before{width:100%}
.etapa__cabeza{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .6rem;font:700 var(--t-rotulo)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.etapa__num{font:500 1.05rem/1 var(--lee);letter-spacing:0;color:var(--t2);font-variant-numeric:tabular-nums;transition:color .35s var(--curva)}
.etapa--activa .etapa__num{color:var(--ac)}
.etapa__titulo{font-size:var(--t-seccion);margin:0 0 .8rem}
.etapa__relato{font-size:1.06rem;line-height:1.65;color:var(--t2);max-width:var(--medida)}

.etapa__cifra{margin:var(--e-m) 0;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--ac)}
.etapa__valor{font:500 clamp(2.4rem,1.9rem + 2vw,3.4rem)/1 var(--lee);letter-spacing:-.02em;color:var(--t1);font-variant-numeric:tabular-nums;margin:0 0 .5rem}
.etapa__dato{font-size:.98rem;line-height:1.5;color:var(--t2);margin:0 0 .55rem;max-width:52ch}
.etapa__fuente{font:500 .78rem/1.5 var(--sans);color:var(--t3);margin:0;max-width:60ch}
.etapa__fuente a{color:inherit}
.etapa__fuente a:hover{color:var(--t1)}

.etapa__claves{margin:0;display:grid;gap:.25rem}
.etapa__claves dt{font:700 var(--t-rotulo)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-top:.9rem}
.etapa__claves dd{margin:0;color:var(--t2);font-size:.98rem;line-height:1.55;max-width:var(--medida)}
.etapa__linea{display:inline-flex;align-items:center;gap:.45rem;font:600 1rem/1.3 var(--sans);color:var(--ac);text-decoration:none}
.etapa__linea svg{width:1rem;height:1rem;flex:none;transition:transform .25s var(--curva)}
.etapa__linea:hover{text-decoration:underline}
.etapa__linea:hover svg{transform:translateX(3px)}
.etapa__estado{display:inline-block;margin-left:.5rem;font:700 .68rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);border:1px solid var(--fl);border-radius:4px;padding:.3rem .45rem;vertical-align:.1em}
.etapa__como{display:block;margin-top:.35rem;font-size:.94rem;color:var(--t2)}

/* Cierre */
.trayectoria__cierre{margin-top:var(--e-xl);padding-top:var(--e-l);border-top:1px solid var(--fl);display:grid;gap:var(--e-s);max-width:48rem}
.trayectoria__cierre p{font:400 var(--t-lede)/1.5 var(--lee);color:var(--t1);margin:0}

/* Escritorio: el dibujo queda fijo mientras pasan los textos */
@media (min-width:980px){
  .trayectoria__cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-2xl);align-items:start}
  .trayectoria__lienzo{position:sticky;top:calc(var(--alto-nav) + 1.5rem);height:calc(100vh - var(--alto-nav) - 3rem);height:calc(100svh - var(--alto-nav) - 3rem);align-items:center}
  .trayectoria__lienzo .khipu{height:100%;max-height:44rem;max-width:34rem}
  .etapa{min-height:82vh;min-height:82svh;display:flex;flex-direction:column;justify-content:center;padding-block:var(--e-xl)}
  .etapa:last-child{min-height:70vh;min-height:70svh}
}

/* Pantallas pequeñas: dibujo arriba, sin fijar, más compacto */
@media (max-width:979px){
  .trayectoria__lienzo .khipu{max-width:26rem;max-height:62vh}
}

@media (prefers-reduced-motion:reduce){
  .trayectoria .khipu__nudo,.trayectoria .khipu__amarre,.trayectoria .khipu__rotulo,.trayectoria .khipu__remate{opacity:1;transform:none;transition:none}
  .etapa::before,.etapa__num,.khipu__cuerda{transition:none}
}

@media print{
  .trayectoria__lienzo{position:static;height:auto}
  .etapa{min-height:0;break-inside:avoid}
}

@media (forced-colors:active){
  .khipu__principal,.khipu__cuerda,.khipu__remate,.khipu__inicio{stroke:CanvasText}
  .khipu__nudo,.khipu__amarre{fill:CanvasText}
  .khipu text{fill:CanvasText}
}