/* v27 · /investigacion/ · pieza propia «De una pregunta del territorio a una decisión».
   v29 · en el lenguaje del Ecosistema: cuatro recorridos reales, cada uno un capítulo con su foto a sangre
   y la pregunta en capas;
   v31: la estación «La evidencia» ya no repite la cifra (vive en Conecta Lab): muestra su estado en la escala de cinco. debajo, un riel de cuatro estaciones (pregunta, estudio, evidencia, decisión)
   que se enciende en orden. Selector con tarjetas de foto. Sin JS se leen los cuatro capítulos, uno tras otro.
   Con movimiento reducido no se anima nada. Sin píldoras con punto ni rayas verticales junto al texto. */

.inv-ir{ --ir-luz:var(--ac-lab); --ir-tenue:rgba(244,242,238,.14); position:relative; isolation:isolate; overflow:clip; background:var(--noche-hondo); padding-block:clamp(4.5rem, 8vw, 7rem) }
.inv-ir::before{ content:""; position:absolute; inset:0 0 auto; height:40rem; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 40% at 82% 40%, rgba(124,196,190,.11), transparent 100%) }
.inv-ir .antetitulo{ color:var(--ac-lab) }
.inv-ir__t{ font-family:var(--sans); font-weight:640; font-size:clamp(2.1rem, 1.3rem + 3vw, 4.1rem); line-height:1.02; letter-spacing:-.03em; color:var(--papel); max-width:17ch; margin-top:var(--e-sm) }
.inv-ir .entrada{ color:#C9D4D7; margin-top:var(--e-md); max-width:50ch }

/* Selector: cuatro tarjetas con foto */
.ir-casos{ list-style:none; margin:clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem); padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(.6rem, 1.2vw, 1rem) }
.ir-casos[hidden]{ display:none }
.ir-caso{ position:relative; isolation:isolate; overflow:hidden; width:100%; height:100%; min-height:9rem; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:.25rem;
  padding:1rem 1.1rem; border:0; border-radius:1rem; background:var(--noche); font:inherit; color:#C9D4D7; text-align:left; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(244,242,238,.12); transition:box-shadow .25s var(--curva), color .2s var(--curva), transform .25s var(--curva) }
.ir-caso__foto{ position:absolute; inset:0; z-index:-2 }
.ir-caso__foto picture{ display:block; position:absolute; inset:0 }
.ir-caso__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); opacity:.6; filter:saturate(.75); transition:opacity .35s var(--curva), filter .35s var(--curva), transform .6s var(--curva) }
.ir-caso::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(6,17,31,.94) 0, rgba(6,17,31,.55) 55%, rgba(6,17,31,.05) 100%) }
.ir-caso:hover{ color:var(--papel); transform:translateY(-2px) }
.ir-caso:hover .ir-caso__foto img{ opacity:.8 }
.ir-caso[aria-pressed="true"]{ color:var(--papel); box-shadow:inset 0 0 0 2px var(--ir-luz), 0 18px 40px -24px rgba(124,196,190,.5) }
.ir-caso[aria-pressed="true"] .ir-caso__foto img{ opacity:.95; filter:none; transform:scale(1.04) }
.ir-caso:focus-visible{ outline:2px solid var(--ac-lab); outline-offset:4px }
.ir-caso__n{ font-family:var(--sans); font-weight:650; font-size:1.06rem; line-height:1.2; color:var(--papel);
  /* v30 · el título reserva dos líneas y se apoya abajo: los cuatro títulos quedan a la misma altura aunque uno ocupe dos */
  min-height:2.4em; display:flex; align-items:flex-end; text-wrap:balance }
.ir-caso__l{ font-family:var(--sans); font-size:.78rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
@media (max-width:79.99rem){ .ir-caso__l{ display:none } }
.ir-caso__e{ margin-top:.2rem; font-family:var(--sans); font-size:.76rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; color:var(--ac-lab) }

/* Estado: el anillo de las líneas de Conecta Lab, en pequeño */
.ir-anillo{ flex:none; width:15px; height:15px; transform:rotate(-90deg) }
.ir-anillo circle{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
.ir-anillo .b{ opacity:.3 }
.ir-anillo .a{ stroke-dasharray:var(--av) 100 }
.ir-anillo[data-e="abierta"] .b, .ir-anillo[data-e="diseno"] .b{ opacity:1; stroke-dasharray:3 6.5 }
.ir-anillo[data-e="abierta"] .a, .ir-anillo[data-e="diseno"] .a{ display:none }

/* Un recorrido: capítulo a sangre */
.ir-ruta[hidden]{ display:none }
.ir-ruta + .ir-ruta{ margin-top:clamp(2rem, 4vw, 3rem) }
.ir.is-js .ir-ruta + .ir-ruta{ margin-top:0 }
.ir-ruta__escena{ position:relative; isolation:isolate; overflow:clip; min-height:clamp(22rem, 54vh, 32rem); display:grid; align-items:end }
.ir-ruta__foto{ position:absolute; inset:0; z-index:-2; margin:0 }
.ir-ruta__foto picture{ display:block; position:absolute; inset:0 }
.ir-ruta__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%) }
.ir-ruta__escena::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,.78) 26%, rgba(6,17,31,.15) 62%),
             linear-gradient(90deg, rgba(6,17,31,.85) 0, rgba(6,17,31,.45) 42%, rgba(6,17,31,0) 70%),
             linear-gradient(180deg, var(--noche-hondo) 0, rgba(6,17,31,0) 16%) }
.ir-ruta__capa{ padding-block:5rem clamp(1.25rem, 2.5vw, 2rem) }
.ir-ruta__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; font-family:var(--sans); font-size:.86rem; color:#E7E2D6 }
.ir-ruta__num{ display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--ir-luz); color:var(--tinta); font-weight:700; font-size:.8rem;
  box-shadow:0 0 0 6px rgba(124,196,190,.2) }
.ir-est{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--ac-lab) }
.ir-ruta__t{ font-family:var(--sans); font-weight:640; font-size:clamp(2.4rem, 1.4rem + 4vw, 5rem); line-height:.98; letter-spacing:-.035em; color:var(--papel); margin-top:var(--e-sm);
  text-shadow:0 2px 24px rgba(6,17,31,.5) }
.ir-ruta__quien{ margin-top:var(--e-md); font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--ac-lab) }
.ir-ruta__q{ margin-top:.4rem; font-family:var(--lee); font-style:italic; font-size:clamp(1.3rem, 1.05rem + 1vw, 2rem); line-height:1.3; color:var(--papel); max-width:30ch;
  text-shadow:0 1px 14px rgba(6,17,31,.6) }

/* El riel de cuatro estaciones (v30, rehecho).
   Antes era una sola línea absoluta que corría por detrás de los números: al animarse, cada estación creaba su propio
   contexto de apilamiento y la línea quedaba encima de los círculos. Ahora la línea son tramos dentro del flujo:
   cada estación lleva su número y, a su lado, el tramo que la une con la siguiente, con aire a ambos lados.
   Un tramo nunca toca un número, con o sin animación, a cualquier ancho. */
.ir-ruta__cuerpo{ padding-top:clamp(1.75rem, 3vw, 2.75rem) }
.ir-pasos{ --g:clamp(1.5rem, 3vw, 3rem); --nd:2.5rem; --aire:.75rem; list-style:none; margin:0; padding:0; display:grid }
.ir-paso{ position:relative; min-width:0; container-type:inline-size }
.ir-paso__cab{ display:flex; align-items:center; gap:var(--aire) }
.ir-nudo{ flex:none; display:grid; place-items:center; width:var(--nd); height:var(--nd); border-radius:50%;
  font-family:var(--sans); font-weight:700; font-size:.9rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--tinta);
  background:var(--ir-luz); box-shadow:0 0 0 5px rgba(124,196,190,.14) }
.ir-tramo{ position:relative; display:block; flex:1 1 auto; border-radius:2px; background:var(--ir-tenue); overflow:hidden }
.ir-tramo::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, rgba(124,196,190,.55), var(--ir-luz)); transform-origin:left center }
.ir-paso:last-child .ir-tramo{ display:none }
.ir-paso__k{ font-family:var(--sans); font-weight:650; font-size:.88rem; line-height:1.3; color:var(--ac-lab); margin:0 0 .55rem }
.ir-paso__t{ margin:0; font-family:var(--lee); font-size:1.02rem; line-height:1.55; color:#DCE3E6; max-width:34ch }
.ir-paso__t b{ font-family:var(--sans); font-weight:650; color:var(--papel) }
.ir-paso__a{ margin-top:.5rem; font-family:var(--sans); font-size:.84rem; color:#9FB4B8; max-width:28ch }
.ir-paso--decision .ir-paso__t{ color:var(--papel); font-weight:500 }
@media (min-width:60rem){
  .ir-pasos{ grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:var(--g) }
  /* el tramo cruza el espacio entre columnas y se detiene a un aire del número siguiente */
  .ir-paso__cab{ margin:0 calc(var(--aire) - var(--g)) 1.1rem 0 }
  .ir-paso:last-child .ir-paso__cab{ margin-right:0 }
  .ir-tramo{ height:2px }
}
@media (max-width:59.99rem){
  /* vertical: el número a la izquierda y, debajo, el tramo que baja hasta un aire antes del número siguiente */
  .ir-paso{ padding:0 0 2.25rem calc(var(--nd) + 1.1rem) }
  .ir-paso:last-child{ padding-bottom:0 }
  .ir-paso__cab{ position:absolute; left:0; top:0; bottom:var(--aire); width:var(--nd); flex-direction:column }
  .ir-tramo{ width:2px; flex-basis:0; min-height:0 }
  .ir-tramo::after{ background:linear-gradient(180deg, rgba(124,196,190,.55), var(--ir-luz)); transform-origin:center top }
  .ir-paso__k{ min-height:var(--nd); display:flex; align-items:center; margin-bottom:.25rem }
}

/* Estudio: avance en segmentos */
.ir-avance{ margin-top:1.1rem; display:grid; gap:.5rem; max-width:17rem }
.ir-avance__seg{ display:grid; grid-template-columns:repeat(var(--de), minmax(0,1fr)); gap:3px }
.ir-avance__seg i{ height:.65rem; border-radius:2px; background:rgba(244,242,238,.12) }
.ir-avance__seg i.si{ background:var(--ir-luz) }
.ir-avance__t{ font-family:var(--sans); font-size:.82rem; color:#B5C6C9 }
.ir-avance__t b{ color:var(--papel); font-weight:650 }

/* Evidencia (v31): la cifra vive en Conecta Lab. Aquí se enseña su estado en la escala de verificación de cinco,
   del más firme al menos firme: una regla vertical de puntos unidos por un hilo; el estado del hallazgo se enciende. */
.ir-ev{ margin-top:1.1rem; padding:1.1rem 1.2rem 1rem; border-radius:1rem; background:rgba(244,242,238,.04); box-shadow:inset 0 0 0 1px rgba(124,196,190,.22) }
.ir-ev__k{ margin:0 0 .7rem; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.02em; color:#9FB4B8 }
.ir-ev--vacia .ir-ev__k{ font-size:.84rem; font-weight:400; letter-spacing:0; color:#C9D4D7 }
.ir-escala{ --p:.8rem; list-style:none; margin:0; padding:0; display:grid; gap:.15rem; position:relative }
.ir-escala::before{ content:""; position:absolute; left:calc(var(--p) / 2 - 1px); top:.75rem; bottom:.75rem; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--ac-lab), rgba(244,242,238,.14)) }
.ir-escala li{ position:relative; display:flex; align-items:center; gap:.75rem; min-height:1.5rem; font-family:var(--sans); font-size:.84rem; line-height:1.25; color:#8EA3A8 }
.ir-escala__p{ flex:none; position:relative; width:var(--p); height:var(--p); border-radius:50%; background:var(--noche-hondo);
  box-shadow:inset 0 0 0 2px rgba(124,196,190,calc(1 - var(--k) * .18)) }
.ir-escala li.on{ color:var(--papel); font-weight:650 }
.ir-escala li.on .ir-escala__p{ background:var(--ac-lab); box-shadow:0 0 0 5px rgba(124,196,190,.22) }
.ir-escala--lee li{ color:var(--papel); font-weight:600 }
.ir-escala--lee .ir-escala__p{ background:rgba(124,196,190,calc(1 - var(--k) * .2)); box-shadow:none }
.ir-ev__f{ margin:.85rem 0 0; padding-top:.7rem; border-top:1px solid var(--ir-tenue); font-family:var(--sans); font-size:.76rem; line-height:1.45; color:#B5C6C9 }
.ir-ev__f a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(124,196,190,.55); text-underline-offset:.18em }
.ir-ev__f a:hover{ color:var(--papel); text-decoration-color:var(--ac-lab) }
.ir-ev__ir{ margin-top:.6rem; display:inline-flex; align-items:center; gap:.45rem; min-height:44px; font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--ac-lab); text-decoration:none }
.ir-ev__ir span{ text-decoration:underline; text-decoration-color:rgba(124,196,190,.45); text-underline-offset:.2em }
.ir-ev__ir svg{ width:1rem; height:1rem; flex:none; transition:transform .2s var(--curva) }
.ir-ev__ir:hover{ color:var(--papel) }
.ir-ev__ir:hover svg{ transform:translateX(3px) }
.ir-ev__f a:focus-visible, .ir-ev__ir:focus-visible, .ir-ruta__pie a:focus-visible{ outline:2px solid var(--ac-lab); outline-offset:3px; border-radius:2px }
.ir-ruta.is-entra .ir-escala li.on .ir-escala__p{ animation:ir-pulso .7s var(--curva) both; animation-delay:calc(.3s + 2 * .32s + .35s) }
@keyframes ir-pulso{ from{ transform:scale(.3); opacity:.2 } to{ transform:none; opacity:1 } }

/* Decisión */
.ir-dec{ margin:1.1rem 0 0; display:grid; gap:0; font-family:var(--sans) }
.ir-dec div{ padding:.6rem 0; border-top:1px solid var(--ir-tenue) }
.ir-dec dt{ font-size:.78rem; color:#9FB4B8 }
.ir-dec dd{ margin:.15rem 0 0; font-size:1rem; font-weight:650; line-height:1.35; color:var(--papel) }

/* Pie de cada recorrido */
.ir-ruta__pie{ margin-top:clamp(1.5rem, 3vw, 2.25rem); padding-top:1.25rem; border-top:1px solid var(--ir-tenue); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; font-family:var(--sans) }
.ir-ruta__pie .liga{ color:var(--ac-lab); font-weight:600 }
.ir-sig{ appearance:none; display:inline-block; min-height:44px; max-width:100%; padding:.6rem 1.15rem; border:0; border-radius:1.4rem; text-align:left; line-height:1.45; background:none; color:var(--papel);
  font:inherit; font-size:.92rem; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(244,242,238,.3); transition:background-color .2s var(--curva), box-shadow .2s var(--curva) }
.ir-sig b{ font-weight:650 }
.ir-sig[hidden]{ display:none }
.ir-sig:hover{ background:rgba(124,196,190,.12); box-shadow:inset 0 0 0 1px var(--ac-lab) }
.ir-sig:focus-visible{ outline:2px solid var(--ac-lab); outline-offset:3px }

/* Movimiento: la foto se asienta, el riel se dibuja y cada estación se enciende al llegar */
.ir-ruta.is-entra .ir-ruta__foto img{ animation:ir-zoom 1.2s var(--curva) both }
.ir-ruta.is-entra .ir-ruta__capa{ animation:ir-sube .55s .1s var(--curva) both }
.ir-ruta.is-entra .ir-paso{ animation:ir-sube .5s var(--curva) both; animation-delay:calc(.3s + var(--j) * .32s) }
.ir-ruta.is-entra .ir-tramo::after{ animation:ir-riel .45s var(--curva) both; animation-delay:calc(.6s + var(--j) * .32s) }
.ir-ruta.is-espera .ir-paso{ opacity:0 }
.ir-ruta.is-sale{ opacity:0; transition:opacity .15s }
@keyframes ir-zoom{ from{ transform:scale(1.06) } to{ transform:none } }
@keyframes ir-sube{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes ir-riel{ from{ transform:scaleX(0) } to{ transform:none } }
@keyframes ir-riel-v{ from{ transform:scaleY(0) } to{ transform:none } }
@keyframes ir-barra{ from{ transform:scaleX(0) } to{ transform:none } }

@media (max-width:59.99rem){
  .ir-ruta.is-entra .ir-tramo::after{ animation-name:ir-riel-v }
  .ir-casos{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .ir-caso{ min-height:8.5rem; padding:.8rem .85rem }
  .ir-caso__n{ font-size:.95rem }
  .ir-caso__l{ display:none }
}
@media (max-width:47.99rem){
  .ir-ruta__escena{ min-height:0; display:block }
  .ir-ruta__foto{ position:relative; inset:auto }
  .ir-ruta__foto picture{ position:relative; aspect-ratio:4 / 3 }
  .ir-ruta__escena::after{ inset:0 0 auto; height:calc(100vw * .75); background:linear-gradient(0deg, var(--noche-hondo) 0, rgba(6,17,31,0) 45%) }
  .ir-ruta__capa{ padding-block:0 1rem; margin-top:-2.5rem; position:relative }
}

/* v28 · Fuentes y créditos: en pantalla una línea por cifra; el detalle, en un desplegable */
.ir-fuentes{ margin-top:clamp(2rem, 4vw, 3rem); font-family:var(--sans); font-size:.84rem; line-height:1.55; color:#9FB4B8; max-width:72ch }
.ir-fuentes summary{ display:inline-flex; align-items:center; gap:.45rem; padding:.3rem 0; list-style:none; cursor:pointer; font-weight:600; color:#C9D4D7 }
.ir-fuentes summary::-webkit-details-marker{ display:none }
.ir-fuentes summary::after{ content:""; width:.42rem; height:.42rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--curva) }
.ir-fuentes[open] summary::after{ transform:translateY(1px) rotate(-135deg) }
.ir-fuentes summary:hover{ color:var(--papel) }
.ir-fuentes summary:focus-visible{ outline:2px solid var(--ac-lab); outline-offset:3px; border-radius:2px }
.ir-fuentes ul{ list-style:none; margin:.4rem 0 0; padding:0 }
.ir-fuentes li{ padding:.3rem 0 }
.ir-fuentes a{ color:#C9D4D7; text-underline-offset:.18em }

@media (prefers-reduced-motion:reduce){
  .ir-caso, .ir-caso__foto img, .ir-sig, .ir-fuentes summary::after, .ir-ev__ir svg{ transition:none }
  .ir-ev__ir:hover svg{ transform:none }
  .ir-caso:hover{ transform:none }
  .ir-ruta.is-entra *, .ir-ruta.is-entra .ir-tramo::after{ animation:none !important }
  .ir-ruta.is-espera .ir-paso{ opacity:1 }
}