.hilo {
  --hilo-x: max(calc(var(--margen) / 2), calc((100% - 90rem) / 2 + var(--margen) / 2));
  --hilo-lectura: 38svh;
  position: absolute; top: 0; bottom: 0; left: var(--hilo-x); z-index: 3; width: 2px; margin-left: -1px;
  pointer-events: none; view-timeline: --hilo block; --hilo-aguja: var(--plata);
}

.hilo__guia {
  position: absolute; inset: 0; left: 0.5px; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--hilo-guia, rgb(171 112 122 / 0.22)) 0 3px, transparent 3px 11px);
}
.fondo-hueso .hilo { --hilo-guia: rgb(171 112 122 / 0.32); --hilo-aguja: var(--carbon); }
.hilo__tramo { position: absolute; inset: 0; overflow: hidden; }
.hilo__cosido {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, var(--borgona) 0 7px, transparent 7px 11px);
}
.hilo__carro { display: none; }

@supports (view-timeline: --a block) {
  html[data-movimiento="pleno"] .hilo__tramo,
  html[data-movimiento="pleno"] .hilo__cosido,
  html[data-movimiento="pleno"] .hilo__carro {
    animation: linear both; animation-timeline: --hilo;
    animation-range: entry var(--hilo-lectura) exit var(--hilo-lectura);
  }
  html[data-movimiento="pleno"] .hilo__tramo { animation-name: hilo-tapa; }
  html[data-movimiento="pleno"] .hilo__cosido { animation-name: hilo-quieto; }

  html[data-movimiento="pleno"] .hilo__carro {
    display: block; position: absolute; left: 50%; bottom: 100%; width: 0; height: 100%;
    animation-name: hilo-carro;
  }
  html[data-movimiento="pleno"] .hilo__aguja {
    position: absolute; bottom: -2px; left: -2px; width: 4px; height: 22px; border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
    background: linear-gradient(to bottom, var(--hilo-aguja) 0 4px, transparent 4px 7px, var(--hilo-aguja) 7px);
  }
}
@keyframes hilo-tapa { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes hilo-quieto { from { transform: translateY(100%); } to { transform: none; } }

@keyframes hilo-carro {
  0% { transform: none; opacity: 1; }
  99.4% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.hilo { overflow: clip; }

#orden { position: relative; }