/* v27 · /investigacion/ · pieza propia «De una pregunta del territorio a una decisión».
   El gran momento de la página: cada recorrido es una línea que se dibuja de la pregunta a la decisión,
   y cada paso trae su dato real (avance del estudio, cifra con fuente, quién decide y cuándo).
   Sin JS se leen los cuatro recorridos con la línea completa. Con movimiento reducido no se anima nada.
   v28 · lista negra anti-IA: sin píldoras con punto, sin rayas verticales junto al texto (la línea baja ya no
   corre en vertical en el celular: cruza arriba, en horizontal), fuentes en una línea y el detalle en un desplegable. */

.inv-ir{ --ir-luz:var(--ac-lab); --ir-tenue:rgba(244,242,238,.16); --ir-dur:1500ms; position:relative; overflow:hidden }
.inv-ir .antetitulo{ color:var(--ac-lab) }
.inv-ir__cab{ max-width:46rem; margin-bottom:clamp(2rem, 4vw, 3.25rem) }
.inv-ir .entrada{ color:#C9D4D7 }

/* Selector: cuatro pestañas de texto sobre un filete, sin cajas */
.ir-casos{ list-style:none; margin:0 0 clamp(2rem, 4vw, 3rem); padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 clamp(1rem, 2vw, 2rem) }
.ir-casos[hidden]{ display:none }
.ir-caso{
  position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  padding:1.1rem 0 .4rem; border:0; border-top:1px solid var(--ir-tenue); background:none; border-radius:0;
  font:inherit; color:#9FB4B8; text-align:left; cursor:pointer; transition:color .2s var(--curva), border-color .2s var(--curva);
}
.ir-caso__barra{ position:absolute; left:0; right:0; top:-1px; height:3px; background:var(--ir-luz); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--curva) }
.ir-caso[aria-pressed="true"] .ir-caso__barra{ transform:scaleX(1) }
.ir-caso:hover{ color:var(--papel); border-top-color:rgba(244,242,238,.4) }
.ir-caso:focus-visible{ outline:2px solid var(--ac-lab); outline-offset:4px; border-radius:2px }
.ir-caso[aria-pressed="true"]{ color:var(--papel) }
.ir-caso__n{ font-family:var(--sans); font-weight:650; font-size:1.06rem; line-height:1.25; letter-spacing:-.005em }
.ir-caso__l{ font-family:var(--sans); font-size:.84rem; color:inherit; opacity:.8 }
.ir-caso__e{ margin-top:.25rem; font-family:var(--sans); font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; opacity:.9 }
/* 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 }
.ir-anillo .b{ opacity:.35 }
.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 */
.ir-ruta + .ir-ruta{ margin-top:clamp(3rem, 6vw, 4.5rem); padding-top:clamp(2rem, 4vw, 3rem); border-top:1px solid var(--ir-tenue) }
.ir-ruta[hidden]{ display:none }
.ir.is-js .ir-ruta + .ir-ruta{ margin-top:0; padding-top:0; border-top:0 }
.ir-ruta__cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1.5rem; margin-bottom:clamp(1.75rem, 3vw, 2.5rem) }
.ir-ruta__t{ margin:0; font-family:var(--lee); font-weight:400; font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height:1.1; letter-spacing:-.015em; color:var(--papel) }
.ir-ruta__meta{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; font-family:var(--sans); font-size:.9rem; color:#B5C6C9 }
.ir-est{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.88rem; color:var(--ac-lab) }
.ir-est[data-e="diseno"]{ color:var(--piedra) }

/* El camino: la línea y los cuatro pasos */
.ir-camino{ position:relative }
.ir-pasos{ list-style:none; margin:0; padding:0; position:relative }
.ir-hilo{ display:none }
.ir-hilo path{ fill:none; stroke-linecap:round }
.ir-hilo--base path{ stroke:var(--ir-tenue); stroke-width:1.5; stroke-dasharray:2 7 }
.ir-hilo--luz path{ stroke:var(--ir-luz); stroke-width:2.5 }

.ir-nudo{ position:absolute; left:0; width:18px; height:18px; border-radius:50%; background:var(--noche); box-shadow:inset 0 0 0 2px var(--ir-luz); z-index:1 }
.ir-paso--evidencia .ir-nudo{ box-shadow:inset 0 0 0 2px var(--ir-luz), inset 0 0 0 5px var(--noche), inset 0 0 0 9px var(--ir-luz) }
.ir-paso--decision .ir-nudo{ background:var(--ir-luz); box-shadow:0 0 0 6px rgba(124,196,190,.18) }

.ir-paso__k{ margin:0 0 .7rem; font-family:var(--sans); font-weight:650; font-size:.92rem; letter-spacing:.005em; color:var(--ac-lab) }
.ir-paso__t{ margin:0; font-family:var(--lee); font-size:1.02rem; line-height:1.55; color:#DCE3E6; max-width:34ch }
.ir-paso--pregunta .ir-paso__t{ font-style:italic; font-size:clamp(1.2rem, 1.05rem + .45vw, 1.42rem); line-height:1.4; color:var(--papel) }
.ir-paso--decision .ir-paso__t{ color:var(--papel); font-weight:500 }
.ir-paso__quien-pre{ margin:0 0 .5rem; font-family:var(--sans); font-size:.84rem; color:#9FB4B8 }
.ir-paso__t--ev{ margin-bottom:1rem }

/* 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:.55rem; border-radius:1px; 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: la cifra real, sus barras y su fuente */
.ir-ev__v{ margin:0; font-family:var(--lee); font-weight:400; font-size:clamp(2.6rem, 1.9rem + 2.2vw, 3.7rem); line-height:1; letter-spacing:-.03em; color:var(--papel); font-variant-numeric:tabular-nums; white-space:nowrap }
.ir-ev__suf{ font-family:var(--sans); font-size:.4em; font-weight:600; margin-left:.12em; color:var(--ac-lab); letter-spacing:0 }
.ir-ev__y{ font-family:var(--sans); font-size:.32em; color:#9FB4B8; letter-spacing:0; margin:0 .15em }
.ir-ev__t{ margin:.5rem 0 0; font-family:var(--sans); font-size:.88rem; line-height:1.45; color:#C9D4D7; max-width:30ch }
.ir-ev__barras{ margin-top:1rem; display:grid; gap:.6rem; max-width:20rem }
.ir-bar{ display:grid; grid-template-columns:1fr auto; gap:.25rem .8rem; align-items:center; font-family:var(--sans) }
.ir-bar__k{ grid-column:1 / -1; font-size:.78rem; color:#B5C6C9 }
.ir-bar__b{ display:block; height:.5rem; border-radius:999px; background:rgba(244,242,238,.08); overflow:hidden }
.ir-bar__b i{ display:block; height:100%; width:calc(var(--v) * 100%); min-width:3px; border-radius:inherit; background:var(--ir-luz); transform-origin:left }
.ir-bar + .ir-bar .ir-bar__b i{ background:rgba(124,196,190,.55) }
.ir-bar b{ font-size:.86rem; font-weight:650; color:var(--papel); font-variant-numeric:tabular-nums; min-width:4.6rem; text-align:right }
.ir-ev__nota{ margin:.6rem 0 0; font-family:var(--sans); font-size:.76rem; color:#9FB4B8; max-width:30ch }
.ir-ev__f{ margin:.9rem 0 0; font-family:var(--sans); font-size:.78rem; 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__f a:focus-visible,.ir-ruta__pie a:focus-visible{ outline:2px solid var(--ac-lab); outline-offset:3px; border-radius:2px }
.ir-ev--vacia .ir-ev__k{ margin:0 0 .7rem; font-family:var(--sans); font-size:.86rem; color:#C9D4D7; max-width:28ch }
.ir-ev__estados{ list-style:none; margin:0; padding:0; display:grid; max-width:17rem }
.ir-ev__estados li{ display:flex; align-items:center; gap:.7rem; padding:.42rem 0; border-top:1px solid var(--ir-tenue); font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--papel) }

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

/* Pie de cada recorrido */
.ir-ruta__pie{ margin-top:clamp(2rem, 4vw, 3rem); 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-flex; align-items:center; gap:.35rem; min-height:44px; padding:.5rem 1.1rem; border:0; border-radius:999px; 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 }

/* Teléfono y tableta: la línea cruza arriba en horizontal, con sus cuatro nudos; los pasos se leen debajo */
@media (max-width:59.99rem){
  .ir-camino{ padding-top:3.4rem }
  .ir-hilo{ display:block; position:absolute; top:0; left:9px; right:9px; width:calc(100% - 18px); height:48px; overflow:visible; pointer-events:none }
  .ir-pasos{ position:static }
  .ir-paso{ position:static; padding:1.4rem 0 1.6rem; border-top:1px solid var(--ir-tenue) }
  .ir-paso:last-child{ padding-bottom:0 }
  .ir-nudo{ top:15px; left:calc(var(--j) * (100% - 18px) / 3) }
  .ir-paso__t, .ir-paso:last-child .ir-paso__t{ max-width:40ch }
}
@media (max-width:35.99rem){
  .ir-casos{ grid-template-columns:1fr 1fr; gap:0 1rem; margin-bottom:var(--e-lg) }
  .ir-caso{ padding:.9rem 0 .7rem }
  .ir-caso__n{ font-size:.98rem }
  .ir-caso__l{ display:none }
  .ir-ruta__pie{ flex-direction:column; align-items:flex-start }
}

/* Escritorio: la línea cruza de izquierda a derecha con su trazo propio */
@media (min-width:60rem){
  .ir-hilo{ display:block; position:absolute; top:0; left:9px; width:75%; height:48px; overflow:visible; pointer-events:none }
  .ir-pasos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) }
  .ir-paso{ position:relative; padding:4rem clamp(1.25rem, 2.6vw, 2.75rem) 0 0 }
  .ir-nudo{ top:15px }
  .ir-paso--decision{ padding-right:0 }
}

/* Movimiento: la línea se dibuja, cada nudo se enciende al llegar y su paso aparece */
@media (prefers-reduced-motion:no-preference){
  .ir.is-js .ir-ruta.is-espera .ir-hilo--luz{ opacity:0 }
  .ir.is-js .ir-ruta.is-espera .ir-paso > :not(.ir-nudo){ opacity:0 }
  .ir.is-js .ir-ruta.is-espera .ir-nudo{ background:var(--noche); box-shadow:inset 0 0 0 2px var(--ir-tenue) }

  .ir.is-js .ir-ruta.is-entra .ir-hilo--luz{ animation:ir-dibuja-x var(--ir-dur) cubic-bezier(.45,.05,.35,1) both }
  .ir.is-js .ir-ruta.is-entra .ir-nudo{ animation:ir-nudo .45s var(--curva) both; animation-delay:calc(var(--j) * var(--ir-dur) / 3) }
  .ir.is-js .ir-ruta.is-entra .ir-paso > :not(.ir-nudo){ animation:ir-paso .5s var(--curva) both; animation-delay:calc(var(--j) * var(--ir-dur) / 3 + 80ms) }
  .ir.is-js .ir-ruta.is-entra .ir-bar__b i{ animation:ir-barra .8s var(--curva) both; animation-delay:calc(2 * var(--ir-dur) / 3 + 200ms) }
  .ir.is-js .ir-ruta.is-entra .ir-avance__seg i.si{ animation:ir-seg .3s var(--curva) both; animation-delay:calc(var(--ir-dur) / 3 + 120ms + var(--s) * 45ms) }
  .ir.is-js .ir-ruta.is-sale{ opacity:0; transition:opacity .16s ease-out }
}
@keyframes ir-dibuja-x{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes ir-nudo{ 0%{ transform:scale(.6); opacity:.4 } 60%{ transform:scale(1.18); opacity:1 } 100%{ transform:none; opacity:1 } }
@keyframes ir-paso{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes ir-barra{ from{ transform:scaleX(0) } to{ transform:none } }
@keyframes ir-seg{ from{ opacity:.15 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .ir-caso,.ir-caso__barra,.ir-sig{ transition:none }
}

/* 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-fuentes summary::after{ transition:none } }