/* Conecta Comunidad · v29 · Qué hacemos · «Cómo medimos»: IDT‑5
   Banda oscura al estilo del Ecosistema. Prefijos: .idt (raíz y barril), .ix- (composición).
   Lectura en tres golpes: el titular («Manda el más bajo.»), el número grande sobre el barril
   y las siete barras cruzadas por la línea del agua (sólida) y la del promedio (punteada).
   Un solo acento cálido (--idt-corta) nombra lo que limita; el agua es turquesa. */
.idt{ --idt-corta:#F4A261; --idt-agua:#7FD1C9; --ix-nom:9.5rem; --ix-gap:1.1rem; position:relative; isolation:isolate; overflow:clip;
  background:radial-gradient(42% 46% at 26% 58%, rgba(95,179,172,.13), transparent 70%),
             radial-gradient(38% 40% at 86% 12%, rgba(217,164,65,.08), transparent 70%), var(--noche-hondo) }
.ix-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
.ix-k{ font-family:var(--sans); font-size:.84rem; font-weight:650; color:#A9BCC0; margin:0 }

/* ---------------------------------------------------------------- Cabecera: cuatro palabras */
.ix-cab{ display:grid; gap:var(--e-md) clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem) }
@media (min-width:62rem){ .ix-cab{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) } }
.ix-cab .antetitulo{ color:var(--sol-2); margin:0 0 var(--e-sm) }
.ix-t{ font-family:var(--sans); font-size:clamp(2.6rem,1.3rem + 4.6vw,5.8rem); font-weight:650; line-height:.98; letter-spacing:-.035em; color:var(--papel); max-width:11ch }
.ix-lede{ font-family:var(--lee); font-size:clamp(1.08rem,.98rem + .45vw,1.32rem); line-height:1.58; color:#C9D4D7; max-width:40ch; margin:0 }

/* ---------------------------------------------------------------- Instrumento: barril | barras */
.ix-inst{ display:grid; gap:clamp(2rem,4vw,3.5rem) clamp(2rem,4.5vw,4.5rem); align-items:start }
@media (min-width:62rem){ .ix-inst{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) } }
.ix-fig{ margin:0; position:relative; min-width:0 }
.ix-res{ display:flex; align-items:flex-end; gap:.4rem 1.2rem; flex-wrap:wrap; margin-bottom:clamp(-1rem,-2vw,0rem); position:relative; z-index:1 }
.ix-res__n{ display:flex; align-items:baseline; gap:.45rem; margin:0; font-family:var(--sans); line-height:.8 }
.ix-res__num{ font-size:clamp(5rem,3rem + 6vw,8.5rem); font-weight:600; letter-spacing:-.05em; color:var(--sol-2); font-variant-numeric:tabular-nums }
.ix-res__de{ font-size:1.05rem; font-weight:600; color:#A9BCC0 }
.ix-res__txt{ display:grid; gap:.15rem; margin:0 0 .45rem; font-family:var(--sans); line-height:1.2 }
.ix-res__nom{ font-size:clamp(1.4rem,1.1rem + 1vw,2rem); font-weight:650; letter-spacing:-.02em; color:var(--papel) }
.ix-res__frena{ font-size:1rem; color:#C9D4D7 }
.ix-res__frena b{ color:var(--idt-corta); font-weight:650 }
.ix-lienzo{ position:relative; aspect-ratio:520 / 348; width:100%; container-type:inline-size }
.idt-barril{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block }
.ix-escala{ list-style:none; margin:0; padding:0; position:absolute; left:0; top:0; bottom:0; width:18.6% }
.ix-escala li{ position:absolute; left:0; right:0; transform:translateY(-50%); display:flex; align-items:baseline; gap:.35rem; font-family:var(--sans); line-height:1 }
.ix-escala b{ font-size:.84rem; font-weight:700; color:#A9BCC0; font-variant-numeric:tabular-nums }
.ix-escala span{ font-size:.74rem; color:#7F979C }
.ix-escala li.es-agua b,.ix-escala li.es-agua span{ color:var(--idt-agua) }
.ix-marca{ position:absolute; left:77%; right:0; top:50%; transform:translateY(-50%); margin:0; font-family:var(--sans); display:grid; gap:.1rem; line-height:1.15; transition:top .5s var(--salida) }
.ix-marca small{ font-size:.72rem; color:#A9BCC0 }
.ix-marca b{ font-size:.94rem; font-weight:700; color:var(--idt-corta) }
@container (max-width:400px){
  .ix-escala span{ display:none }
  .ix-marca small{ display:none }
  .ix-marca b{ font-size:.78rem }
}

/* ---------------------------------------------------------------- Escenarios */
.ix-ctrl{ min-width:0 }
.ix-escs{ margin-bottom:clamp(1.5rem,3vw,2rem) }
.ix-escs__g{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.65rem }
.ix-esc{ min-height:var(--toque); padding:.5rem 1rem; border-radius:999px; border:1px solid rgba(244,242,238,.2); background:transparent; color:#DCE3E6;
  font:600 .9rem/1.2 var(--sans); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease }
.ix-esc:hover{ border-color:rgba(244,242,238,.5); color:var(--papel) }
.ix-esc[aria-pressed="true"]{ background:var(--papel); border-color:var(--papel); color:var(--tinta) }
.ix-esc:focus-visible{ outline:2px solid var(--sol-2); outline-offset:3px }

/* ---------------------------------------------------------------- Las siete barras (son los controles) */
.ix-barras{ position:relative }
.ix-pista{ position:relative; padding-bottom:2.1rem }
.ix-cols{ display:grid; grid-template-columns:var(--ix-nom) minmax(0,1fr); column-gap:var(--ix-gap); margin:0 0 .5rem; font-family:var(--sans); font-size:.74rem; color:#8FA6AB; line-height:1.2 }
.ix-cols__k{ font-weight:650; color:#A9BCC0 }
.ix-cols__l{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px }
.ix-cols__l span{ text-align:center; white-space:nowrap }
.ix-cols__l b{ color:#C9D4D7 }
.ix-filas{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem }
.ix-fila{ display:grid; grid-template-columns:var(--ix-nom) minmax(0,1fr); column-gap:var(--ix-gap); align-items:center; border-radius:.6rem }
.ix-fila__n{ display:flex; align-items:center; gap:.6rem; margin:0; min-width:0; font-family:var(--sans); line-height:1.15 }
.ix-ico{ flex:0 0 auto; width:1.25rem; height:1.25rem; color:var(--c) }
.ix-fila__n b{ font-size:1rem; font-weight:650; color:var(--papel); transition:color .25s ease }
.ix-fila.es-corta .ix-fila__n b{ color:var(--idt-corta) }
.ix-segs{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; position:relative; z-index:0 }
.ix-seg{ position:relative; display:grid; place-items:center; min-height:var(--toque); cursor:pointer; background:rgba(244,242,238,.06);
  font:600 .8rem/1 var(--sans); color:#7F979C; transition:background .3s var(--salida), color .2s ease }
.ix-seg:first-child{ border-radius:.45rem 0 0 .45rem } .ix-seg:last-child{ border-radius:0 .45rem .45rem 0 }
.ix-seg input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer }
.ix-seg:hover{ background:rgba(244,242,238,.14); color:var(--papel) }
.ix-seg.es-lleno{ background:#3A4C5B; color:rgba(244,242,238,.62) }
.ix-seg.es-sel{ background:#9FB4BB; color:var(--tinta) }
.ix-fila.es-corta .ix-seg.es-lleno{ background:color-mix(in srgb, var(--idt-corta) 55%, var(--noche-hondo)) }
.ix-fila.es-corta .ix-seg.es-sel{ background:var(--idt-corta) }
.ix-seg:has(input:focus-visible){ outline:2px solid var(--papel); outline-offset:2px; z-index:2 }
.ix-fila.es-pulso{ animation:ix-pulso 1.8s ease }
@keyframes ix-pulso{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,194,112,0) } 25%{ box-shadow:0 0 0 3px var(--sol-2) } }

/* líneas del agua y del promedio: cruzan las siete barras */
.ix-linea{ position:absolute; top:-.3rem; bottom:1.8rem; width:2px; margin-left:-1px; z-index:1; pointer-events:none;
  left:calc(var(--ix-nom) + var(--ix-gap) + (100% - var(--ix-nom) - var(--ix-gap)) * var(--v) / 5); transition:left .55s var(--salida) }
.ix-linea--agua{ --v:var(--agua); background:var(--idt-agua); box-shadow:0 0 0 1px rgba(6,17,31,.5) }
.ix-linea--prom{ --v:var(--prom); background:repeating-linear-gradient(to bottom, rgba(244,242,238,.8) 0 5px, transparent 5px 10px) }
.ix-linea em{ position:absolute; top:100%; margin-top:.45rem; transform:translateX(-50%); white-space:nowrap; font:600 .8rem/1.2 var(--sans); font-style:normal; color:#C9D4D7 }
.ix-linea--agua em{ color:var(--idt-agua) }
.ix-linea b{ font-weight:700 }
.ix-linea--prom em{ transform:translateX(.4rem) }
.ix-linea--agua em{ transform:translateX(calc(-100% - .4rem)) }
.ix-barras.es-junto .ix-linea--prom{ opacity:.45 }
.ix-ayuda{ margin:.4rem 0 0; min-height:3.1em; font-family:var(--sans); font-size:.92rem; line-height:1.45; color:#C9D4D7 }
.ix-ayuda b{ color:var(--papel); font-weight:650 }

/* la raíz: aparte, debajo */
.ix-raiz{ margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(244,242,238,.14); border-radius:0 }
.ix-raiz .ix-fila__n span{ display:grid; gap:.1rem }
.ix-raiz .ix-fila__n small{ font-size:.76rem; color:#A9BCC0 }
.ix-raiz.es-debil .ix-fila__n b{ color:var(--idt-corta) }
.ix-raiz.es-debil .ix-seg.es-lleno{ background:color-mix(in srgb, var(--idt-corta) 55%, var(--noche-hondo)) }
.ix-raiz.es-debil .ix-seg.es-sel{ background:var(--idt-corta) }
.ix-alerta{ display:flex; gap:.7rem; align-items:flex-start; margin:1rem 0 0; color:var(--idt-corta) }
.ix-alerta[hidden]{ display:none }
.ix-alerta svg{ flex:0 0 auto; width:1.3rem; height:1.3rem; margin-top:.1rem }
.ix-alerta p{ margin:0; font-family:var(--sans); font-size:.92rem; line-height:1.5; color:#E7E2D6 }
.ix-alerta a{ color:var(--papel); text-underline-offset:.2em }

/* ---------------------------------------------------------------- Qué va primero */
.ix-reco{ display:grid; gap:.6rem clamp(2rem,4vw,4rem); margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(1.5rem,3vw,2rem); border-top:1px solid rgba(244,242,238,.16) }
@media (min-width:62rem){ .ix-reco{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); grid-template-areas:"k k" "h d" "h m" } .ix-reco__k{ grid-area:k } .ix-reco__h{ grid-area:h } .ix-reco__desb{ grid-area:d } .ix-mas{ grid-area:m } }
.ix-reco__k{ margin:0; font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--sol-2) }
.ix-reco__h{ font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem); font-weight:650; letter-spacing:-.025em; line-height:1.06; color:var(--papel); max-width:16ch }
.ix-reco__desb{ margin:0; font-family:var(--lee); font-size:1.12rem; line-height:1.6; color:#DCE3E6; max-width:52ch }
.ix-mas{ font-family:var(--sans); border-bottom:1px solid rgba(244,242,238,.14); margin-top:.4rem }
.ix-mas summary{ display:inline-flex; align-items:center; gap:.6rem; min-height:var(--toque); cursor:pointer; list-style:none; font-size:.94rem; font-weight:650; color:var(--papel) }
.ix-mas summary::-webkit-details-marker{ display:none }
.ix-mas summary::after{ content:""; width:.45rem; height:.45rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s ease }
.ix-mas[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.ix-mas summary:focus-visible{ outline:2px solid var(--sol-2); outline-offset:3px; border-radius:.4rem }
.ix-mas__in{ display:grid; gap:1.2rem 2rem; padding:.4rem 0 1.4rem }
@media (min-width:40rem){ .ix-mas__in{ grid-template-columns:1fr 1.3fr } .ix-mas__in--uno{ grid-template-columns:minmax(0,46rem) } }
.ix-reco__fin{ margin:.5rem 0 0; padding-left:1.1rem; display:grid; gap:.3rem; font-size:.94rem; line-height:1.45; color:#DCE3E6 }
.ix-ev__t{ margin:.5rem 0 0; font-family:var(--lee); font-size:1rem; line-height:1.55; color:#DCE3E6 }
.ix-ev__f{ margin:.5rem 0 0; font-size:.86rem }
.ix-ev__f a{ color:#C9D4D7; text-underline-offset:.2em }
.ix-ev__f a:hover{ color:var(--papel) }
.ix-nota{ margin:clamp(1.5rem,3vw,2rem) 0 0; max-width:70ch; font-family:var(--sans); font-size:.84rem; line-height:1.55; color:#93A9AE }
.ix-nota a{ color:#C9D4D7; text-underline-offset:.2em }

/* ---------------------------------------------------------------- Celular */
@media (max-width:47.99rem){
  .idt{ --ix-nom:6.6rem; --ix-gap:.6rem }
  .ix-ico{ display:none }
  .ix-fila__n b{ font-size:.92rem }
  .ix-cols__l span{ font-size:0 } .ix-cols__l b{ font-size:.74rem }
  .ix-cols__k{ font-size:.72rem }
  .ix-res{ margin-bottom:0 }
}

/* piezas del barril (v23: madera con veta, juntas, canto, cinco aros de hierro con remaches y óxido, agua translúcida) */
.idt-b-escala line{ stroke:rgba(216,203,179,.14); stroke-width:1 }
.idt-b-grietas{ fill:none; stroke:rgba(216,203,179,.5); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .5s ease }
.idt-barril.es-debil .idt-b-grietas{ opacity:1 }
.idt-b-casco{ stroke:rgba(10,5,2,.8); stroke-width:1 }
.idt-b-int__tablas{ fill:rgba(255,214,170,.045) }
.idt-b-cost{ fill:none; stroke:rgba(0,0,0,.55); stroke-width:1.1 }
.idt-b-int__sombra{ pointer-events:none }
.idt-b-canto{ stroke:rgba(40,20,8,.75); stroke-width:.7; stroke-linejoin:round }
.idt-b-canto__j{ fill:none; stroke:rgba(40,20,8,.7); stroke-width:.9 }
.idt-b-sup{ stroke:none }
.idt-b-sup__brillo{ mix-blend-mode:screen; opacity:.7 }
.idt-b-menisco{ fill:none; stroke:rgba(225,255,250,.6); stroke-width:1; stroke-linecap:round }
.idt-b-ondas{ fill:none; stroke:rgba(230,255,250,.28); stroke-width:1; stroke-linecap:round }
.idt-st__cara{ stroke:none }
.idt-st__veta{ fill:none; stroke:rgba(52,26,9,.34); stroke-width:.75 }
.idt-st__veta2{ fill:none; stroke:rgba(255,226,186,.16); stroke-width:.9 }
.idt-st__nudo{ fill:rgba(60,30,10,.5); stroke:rgba(52,26,9,.45); stroke-width:.7; fill-rule:evenodd }
.idt-st__cil,.idt-st__vert{ pointer-events:none }
.idt-st__junta{ fill:none; stroke:rgba(24,11,4,.9); stroke-width:1.3; stroke-linecap:butt }
.idt-st__lado{ fill:#5e3a1d; stroke:rgba(24,11,4,.85); stroke-width:.6; stroke-linejoin:round }
.idt-st__canto{ stroke:rgba(52,28,10,.8); stroke-width:.6; stroke-linejoin:round }
.idt-st__luz{ fill:transparent; stroke:transparent; stroke-width:2; transition:fill .3s ease, stroke .3s ease }
.idt-st.es-corta .idt-st__luz{ fill:rgba(244,162,97,.24); stroke:var(--idt-corta) }
.idt-st.es-foco .idt-st__luz{ stroke:var(--papel); fill:rgba(255,255,255,.08) }
.idt-st.es-corta.es-foco .idt-st__luz{ fill:rgba(244,162,97,.36) }
.idt-b-sello__aro{ fill:none; stroke:rgba(20,10,4,.6); stroke-width:1.2 }
.idt-b-sello__filo{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:.6 }
.idt-b-sello__ico{ fill:none; stroke:#1A120C; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round }
.idt-b-aro__sombra{ fill:none; stroke:rgba(10,4,1,.5); stroke-width:2.6; stroke-linecap:butt }
.idt-b-aro__banda{ stroke:rgba(8,10,12,.75); stroke-width:.6; stroke-linejoin:round }
.idt-b-aro__oxido{ fill:none; stroke:rgba(128,70,40,.34); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:.6 13 2.2 19 .4 9 3 27 }
.idt-b-aro__brillo{ fill:none; stroke:rgba(255,255,255,.42); stroke-width:.85 }
.idt-b-aro__filo{ fill:none; stroke:rgba(0,0,0,.55); stroke-width:.8 }
.idt-b-aro__clavo{ fill:#7d868d; stroke:rgba(0,0,0,.6); stroke-width:.5 }
.idt-b-aro__clavoluz{ fill:rgba(255,255,255,.75) }
.idt-b-chorro{ opacity:0; transition:opacity .45s ease }
.idt-b-chorro.es-on{ opacity:1 }
.idt-b-chorro__cinta{ stroke:rgba(215,248,243,.55); stroke-width:.6 }
.idt-b-chorro__labio{ fill:none; stroke:rgba(240,255,253,.85); stroke-width:1.3; stroke-linecap:round }
.idt-b-chorro__hilos{ fill:none; stroke:rgba(240,255,252,.6); stroke-width:.9; stroke-linecap:round; stroke-dasharray:14 10; animation:idt-fluye .7s linear infinite }
.idt-b-chorro__charco{ fill:rgba(110,190,184,.32); stroke:rgba(200,240,235,.4); stroke-width:.7 }
.idt-b-chorro__onda{ fill:none; stroke:rgba(220,252,248,.55); stroke-width:.8; transform-box:fill-box; transform-origin:center; animation:idt-onda 1.3s ease-out infinite }
.idt-b-chorro__gotas{ fill:rgba(225,252,248,.75) }
@keyframes idt-fluye{ to{ stroke-dashoffset:-24 } }
@keyframes idt-onda{ 0%{ transform:scale(.45); opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }
.idt-b-linea{ stroke:var(--idt-agua); stroke-width:1.2; stroke-dasharray:4 4; opacity:.9 }
.cb--calma .idt-b-chorro__hilos,.cb--calma .idt-b-chorro__onda{ animation:none }
.cb--calma .idt-b-chorro__onda{ opacity:.5 }

@media (prefers-reduced-motion:reduce){
  .ix-seg,.ix-esc,.ix-linea,.ix-marca,.idt-st__luz,.idt-b-chorro,.idt-b-grietas,.ix-fila__n b,.ix-mas summary::after{ transition:none }
  .idt-b-chorro__hilos,.idt-b-chorro__onda{ animation:none }
  .ix-fila.es-pulso{ animation:none; box-shadow:0 0 0 3px var(--sol-2) }
}
.idt:not(.ix--js) .ix-lienzo{ display:none }

/* ================================================================ v30 · en Método
   Cabecera centrada como las de Método; la sección llega con un filo fino arriba para separarse de la
   banda oscura anterior. Las filas tienen ancla propia (#idt-sano) y dejan aire bajo la barra fija. */
.ix--metodo{ border-top:1px solid rgba(244,242,238,.08) }
.ix-cab--centro{ display:block; text-align:center; max-width:46rem; margin-inline:auto }
.ix-cab--centro .ix-t{ max-width:none; font-size:clamp(2.4rem,1.4rem + 3.6vw,4.6rem); margin:0 auto }
.ix-cab--centro .ix-lede{ max-width:44ch; margin:var(--e-md) auto 0 }
.ix-ante{ display:inline-flex; align-items:center; gap:.65rem; margin:0 0 var(--e-sm); font-family:var(--sans); font-size:.92rem; font-weight:650; color:var(--sol-2) }
.ix-ante__sello{ display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:rgba(232,194,112,.14); box-shadow:inset 0 0 0 1px rgba(232,194,112,.4) }
.ix-ante__sello .ix-ico{ display:block !important; width:1.1rem; height:1.1rem; color:var(--sol-2) }
.ix-fila[id],.ix-raiz[id]{ scroll-margin-top:9rem }
.ix-raiz small a{ color:inherit; text-underline-offset:.18em }
.ix-raiz small a:hover{ color:var(--papel) }

/* ================================================================ v30 · el puente en Qué hacemos */
.idt-puente{ position:relative; isolation:isolate; overflow:clip; padding-block:clamp(3.5rem,7vw,6rem);
  background:radial-gradient(40% 70% at 78% 60%, rgba(95,179,172,.16), transparent 70%),
             radial-gradient(30% 50% at 12% 20%, rgba(217,164,65,.08), transparent 70%), var(--noche-hondo) }
.idt-puente__in{ display:grid; gap:clamp(2rem,4vw,3rem) clamp(2rem,6vw,6rem); align-items:center }
@media (min-width:56rem){ .idt-puente__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) } }
.idt-puente .antetitulo{ color:var(--sol-2); margin:0 0 var(--e-sm) }
.idt-puente__t{ font-family:var(--sans); font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem); font-weight:650; line-height:.98; letter-spacing:-.035em; color:var(--papel); margin:0 }
.idt-puente__lede{ font-family:var(--lee); font-size:clamp(1.06rem,.98rem + .4vw,1.26rem); line-height:1.6; color:#C9D4D7; max-width:40ch; margin:var(--e-md) 0 0 }
.idt-puente__ir{ margin:clamp(1.4rem,3vw,2rem) 0 0 }
.idt-puente__ir .boton{ display:inline-flex; align-items:center; gap:.6rem }
.idt-puente__fig{ min-width:0 }
/* v30b · número de capítulo de Método (.etapa, interiores.css), centrado como en las demás secciones */
.ix-cab--centro .etapa{ justify-content:center; margin:0 0 var(--e-sm) }

/* ================================================================ v32 · un solo barril (window.ConectaBarril)
   El mismo dibujo en Qué hacemos (#sistemas), en el IDT‑5 de Método (#idt) y en el ICT‑5 (#instrumento).
   Duelas que se tocan: cada toque sube un nivel. */
.cb *{ pointer-events:none }
.cb .idt-st,.cb .idt-st__cara,.cb .idt-st__luz,.cb .idt-st__canto,.cb .idt-st__lado{ pointer-events:visiblePainted }
.cb .idt-st{ cursor:pointer }
.cb .idt-st:hover .idt-st__luz{ stroke:rgba(244,242,238,.7) }
.idt-b-sello{ pointer-events:none }
.idt-b-sello__txt{ font:800 8.4px/1 var(--sans); fill:#1A120C; letter-spacing:-.02em }
.ix-fila.es-mira .ix-fila__n b{ color:var(--papel); text-decoration:underline; text-decoration-color:var(--idt-agua); text-underline-offset:.25em }
.ix-fila.es-corta.es-mira .ix-fila__n b{ color:var(--idt-corta) }
/* en Método, el barril acompaña a los controles mientras se mueven (escritorio) */
@media (min-width:62rem){ .ix--metodo .ix-fig{ position:sticky; top:6rem } }

/* ---------------------------------------------------------------- Qué hacemos: el barril que se toca */
.idt-puente{ --idt-corta:#F4A261; --idt-agua:#7FD1C9 }
.idt-puente__in{ align-items:start }
@media (min-width:56rem){ .idt-puente__txt{ position:sticky; top:7rem } }
.ib{ margin:0; font-family:var(--sans); display:grid; gap:.9rem; min-width:0 }
.ib-res{ display:flex; align-items:flex-end; gap:.3rem 1rem; flex-wrap:wrap }
.ib-res__n{ display:flex; align-items:baseline; gap:.4rem; margin:0; line-height:.8 }
.ib-res__num{ font-size:clamp(4.2rem,3rem + 4vw,6.4rem); font-weight:600; letter-spacing:-.05em; color:var(--sol-2); font-variant-numeric:tabular-nums }
.ib-res__n span{ font-size:1rem; font-weight:600; color:#A9BCC0 }
.ib-res__txt{ display:grid; gap:.2rem; margin:0 0 .4rem; line-height:1.25; min-width:0; flex:1 1 14rem }
.ib-res__nom{ font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem); font-weight:650; letter-spacing:-.02em; color:var(--papel) }
.ib-res__frena{ font-size:.98rem; color:#C9D4D7 }
.ib-res__frena b{ color:var(--idt-corta); font-weight:650 }
.ib-lienzo{ position:relative; width:100%; max-width:30rem; margin-inline:auto; aspect-ratio:348 / 344 }
.ib-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block }
.ib-escala{ position:absolute; left:0; top:0; bottom:0; width:6%; pointer-events:none }
.ib-escala span{ position:absolute; left:0; transform:translateY(-50%); font-size:.78rem; font-weight:700; color:#7F979C; font-variant-numeric:tabular-nums; line-height:1; transition:color .3s ease }
.ib-escala span.es-agua{ color:var(--idt-agua); font-size:.95rem }
.ib-agua{ position:absolute; right:0; margin:0; transform:translateY(calc(-100% - .3rem)); font-size:.78rem; font-weight:600; color:var(--idt-agua); line-height:1; white-space:nowrap; pointer-events:none; transition:top .5s var(--salida, ease-out) }
.ib-agua b{ font-weight:800 }
.ib-bots{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem }
.ib-bots li{ display:flex; min-width:0 }
.ib-bots .ib-b{ flex:1 1 auto }
.ib-b{ all:unset; box-sizing:border-box; position:relative; display:grid; justify-items:center; align-content:start; gap:.25rem; width:100%; min-height:var(--toque, 44px); padding:.55rem .2rem .7rem;
  border-radius:.6rem; background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px rgba(244,242,238,.1); cursor:pointer; text-align:center;
  transition:background .2s ease, box-shadow .2s ease }
.ib-b:hover,.ib-b.es-mira{ background:rgba(244,242,238,.1); box-shadow:inset 0 0 0 1px rgba(244,242,238,.32) }
.ib-b:focus-visible{ outline:2px solid var(--sol-2); outline-offset:2px }
.ib-b__ico{ width:1.15rem; height:1.15rem; fill:none; stroke:var(--c); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ib-b__n{ font-size:.74rem; font-weight:600; line-height:1.15; color:#C9D4D7; overflow-wrap:anywhere; hyphens:auto }
.ib-b__v{ font-size:1.15rem; font-weight:700; line-height:1; color:var(--papel); font-variant-numeric:tabular-nums }
.ib-b__barra{ position:absolute; left:.6rem; right:.6rem; bottom:.35rem; height:3px; border-radius:2px; background:rgba(244,242,238,.12); overflow:hidden }
.ib-b__barra::after{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 20%); background:#B48A5C; border-radius:inherit; transition:width .4s var(--salida, ease-out) }
.ib-b.es-corta{ background:rgba(244,162,97,.12); box-shadow:inset 0 0 0 1px rgba(244,162,97,.6) }
.ib-b.es-corta .ib-b__n,.ib-b.es-corta .ib-b__v{ color:var(--idt-corta) }
.ib-b.es-corta .ib-b__barra::after{ background:var(--idt-corta) }
.ib-pie{ margin:0; font-size:.9rem; line-height:1.5; color:#A9BCC0 }
.ib-pie b{ color:var(--papel); font-weight:650 }
.ib-solojs{ display:none; color:#DCE3E6; font-weight:600 }
.idt-puente.ib--js .ib-solojs{ display:inline }
.ib-volver{ all:unset; cursor:pointer; margin-left:.3rem; color:var(--papel); font-weight:600; text-decoration:underline; text-decoration-color:rgba(244,242,238,.4); text-underline-offset:.2em }
.ib-volver[hidden]{ display:none }
.ib-volver:hover{ text-decoration-color:var(--sol-2) }
.ib-volver:focus-visible{ outline:2px solid var(--sol-2); outline-offset:3px; border-radius:.2rem }
.ib-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.idt-puente:not(.ib--js) .ib-lienzo{ display:none }
.idt-puente:not(.ib--js) .ib-b{ cursor:default }
@media (max-width:55.99rem){
  /* en celular el botón a Método va después del barril */
  .idt-puente__in{ display:flex; flex-direction:column; gap:0 }
  .idt-puente__txt{ display:contents }
  .idt-puente__fig{ order:2; margin-top:clamp(1.8rem,6vw,2.6rem) }
  .idt-puente__ir{ order:3; margin-top:1.6rem }
}
@media (max-width:47.99rem){
  .ib-bots{ display:flex; flex-wrap:wrap; justify-content:center }
  .ib-bots li{ flex:0 0 calc((100% - 1.05rem) / 4) }
  .ib-lienzo{ max-width:24rem }
}
@media (prefers-reduced-motion:reduce){ .ib-b,.ib-b__barra::after,.ib-agua,.ib-escala span{ transition:none } }

/* ---------------------------------------------------------------- Método: cabecera del IDT‑5 como las demás */
.ix--metodo .qcab{ margin-bottom:clamp(2.5rem,5vw,4rem) }
.ix--metodo .qcab .aviso-propuesta{ justify-content:center; text-align:center; margin-top:.5rem; background:none; box-shadow:none; padding:0; border-radius:0 }

/* ---------------------------------------------------------------- Método: el barril del ICT‑5 (cinco duelas, P1 a P5) */
.mbar--v32{ --idt-corta:#F4A261; --idt-agua:#7FD1C9 }
.mbar-lienzo{ position:relative; width:100%; max-width:19rem; margin:0 auto; aspect-ratio:288 / 344 }
.mbar-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block }
.mbar--v32 .cb .idt-st{ cursor:default }
.mbar--v32 .cb .idt-st:hover .idt-st__luz{ stroke:transparent }
.mbar--v32 .cb .idt-st.es-corta:hover .idt-st__luz{ stroke:var(--idt-corta) }
.mbar--v32:not(.mbar--js) .mbar-lienzo{ display:none }
.ix--metodo .ix-res{ margin-bottom:.9rem }