/* CoreFlow · casos holográficos (v30a). Todo con prefijo .cs- para no chocar con el resto.
   Líneas finas cian y dorado que se dibujan, escaneo que pasa una vez, piezas que se arman y un circuito
   de fases que se enciende. Solo transform/opacity/filter/clip-path/stroke en movimiento. */

.cs {
  --cs-cian: #4FD1E0;
  --cs-cian-1: rgba(79, 209, 224, .14);
  --cs-cian-2: rgba(79, 209, 224, .32);
  --cs-dur: 9000ms;
  position: relative;
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  min-width: 0;
}

/* ================= riel de casos: nodos conectados, el activo con anillo de avance ================= */
.cs-riel { min-width: 0; }
.cs-pista { min-width: 0; }
.cs-carril { position: relative; display: grid; grid-template-columns: repeat(var(--cs-n, 6), minmax(0, 1fr)); }
.cs-via { position: absolute; top: 22px; left: calc(50% / var(--cs-n, 6)); right: calc(50% / var(--cs-n, 6)); height: 1px; background: linear-gradient(90deg, var(--cs-cian-2), rgba(244, 241, 234, .1)); pointer-events: none; }
.cs-via-luz { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cs-cian), var(--destello)); box-shadow: 0 0 10px rgba(255, 198, 41, .45); transform-origin: left center; transform: scaleX(var(--cs-p, 0)); transition: transform .9s var(--ola); }

.cs-tab { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: .28rem; min-width: 0; min-height: 44px; padding: 0 .45rem .4rem; border: 0; border-radius: 14px; background: none; text-align: center; color: var(--txt-3); -webkit-tap-highlight-color: transparent; }
.cs-nodo { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.cs-nodo::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: rgba(6, 19, 24, .92); }
.cs-nodo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.cs-nodo circle { fill: none; stroke-width: 1.5; }
.cs-anillo-base { stroke: var(--linea); transition: stroke .4s var(--ola); }
.cs-anillo { stroke: var(--destello); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 198, 41, .7)); }
.cs-anillo.cs-corre { opacity: 1; animation: cs-anillo var(--cs-dur) linear forwards; }
.cs-pausa .cs-anillo.cs-corre, .cs-pausa .cs-prog i.cs-corre { animation-play-state: paused; }
@keyframes cs-anillo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.cs-nodo i { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--fondo); transition: transform .5s var(--ola), background .5s var(--ola), border-color .5s var(--ola), box-shadow .5s var(--ola); }
.cs-tab b { font-weight: 600; font-size: .95rem; line-height: 1.2; letter-spacing: -.01em; color: var(--txt-2); text-wrap: balance; transition: color .3s; }
.cs-tab small { font-size: .74rem; line-height: 1.25; color: var(--txt-3); text-wrap: balance; }
.cs-tab:hover b { color: var(--txt); }
.cs-tab:hover .cs-nodo i { border-color: var(--cs-cian); }
.cs-tab.cs-pasado .cs-nodo i { border-color: var(--cs-cian-2); background: rgba(79, 209, 224, .35); }
.cs-tab[aria-selected="true"] b { color: var(--txt); }
.cs-tab[aria-selected="true"] .cs-anillo-base { stroke: rgba(255, 198, 41, .22); }
.cs-tab[aria-selected="true"] .cs-nodo i { transform: scale(1.2); border-color: var(--destello); background: var(--destello); box-shadow: 0 0 0 4px rgba(255, 198, 41, .14), 0 0 18px var(--destello); }

/* ================= escenario ================= */
.cs-escenario { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 30px); align-items: start; padding: clamp(12px, 1.8vw, 22px); background: rgba(6, 19, 24, .86); touch-action: pan-y pinch-zoom; }
.cs-escenario::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cs-cian) 30%, var(--destello) 70%, transparent); opacity: .35; pointer-events: none; transform-origin: center; }
.cs-escenario.cs-pulso::before { animation: cs-borde 1s var(--ola) both; }
@keyframes cs-borde { from { transform: scaleX(0); opacity: 1; } 60% { opacity: 1; } to { transform: scaleX(1); opacity: .35; } }

/* ---------- visor: pantalla holográfica ---------- */
/* el visor arriba de su columna y pegado mientras se leen las piezas (nada flota en medio) */
.cs-visor { min-width: 0; display: grid; gap: 10px; position: sticky; top: 84px; }
.cs-holo { position: relative; transform: perspective(1100px) rotateX(var(--cs-rx, 0deg)) rotateY(var(--cs-ry, 0deg)); transition: transform .7s var(--ola); }
.cs-holo.cs-inclina { transition-duration: .2s; }
.cs-pantalla { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 16px; border: 1px solid var(--linea); background: radial-gradient(120% 90% at 50% 0%, rgba(22, 105, 122, .22), transparent 60%), #040D11; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .9); transition: box-shadow .5s var(--ola); }
.cs-inclina .cs-pantalla { box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .9), 0 0 44px -12px rgba(79, 209, 224, .4); }

.cs-nav { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: rgba(4, 13, 17, .86); border-bottom: 1px solid var(--cs-cian-1); font: 500 .72rem/1 var(--ft); color: var(--txt-3); }
.cs-nav i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 241, 234, .18); }
.cs-dominio { min-width: 0; margin-left: 8px; padding: 4px 10px; border-radius: 99px; background: rgba(79, 209, 224, .07); color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cs-capas { position: absolute; inset: 30px 0 0; }
.cs-capa { position: absolute; inset: 0; }
.cs-capa video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-capa.cs-entra { animation: cs-materia .85s var(--ola) .18s both; }
.cs-capa.cs-sale { animation: cs-sale .6s var(--ola) both; }
@keyframes cs-materia {
  from { clip-path: inset(0 0 100% 0); filter: brightness(1.9) saturate(.15) contrast(1.15); }
  to { clip-path: inset(0 0 0 0); filter: brightness(1) saturate(1) contrast(1); }
}
@keyframes cs-sale { to { opacity: 0; transform: scale(.985); filter: blur(6px) brightness(.55); } }
.cs-lineas { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(180deg, rgba(79, 209, 224, .12) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.cs-entra .cs-lineas { animation: cs-lineas 1.5s var(--ola) .18s both; }
@keyframes cs-lineas { from { opacity: 1; } to { opacity: 0; } }
.cs-rotulo { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: .45rem .7rem; border-radius: 10px; border: 1px solid var(--cs-cian-1); background: rgba(4, 13, 17, .82); font-size: .78rem; color: var(--txt-2); }

.cs-rejilla { position: absolute; inset: 30px 0 0; z-index: 1; pointer-events: none; opacity: 0; background-image: linear-gradient(var(--cs-cian-1) 1px, transparent 1px), linear-gradient(90deg, var(--cs-cian-1) 1px, transparent 1px); background-size: 28px 28px; background-position: -1px -1px; }
.cs-traza .cs-rejilla { animation: cs-rejilla 1.4s var(--ola) both; }
@keyframes cs-rejilla { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* el escaneo: la banda va justo en el borde que revela el video */
.cs-escaneo { position: absolute; inset: 30px 0 0; z-index: 2; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 0 72%, rgba(79, 209, 224, .07) 88%, rgba(79, 209, 224, .45) 99.2%, #C9F7FF 99.6%, transparent 100%); }
.cs-escaneo.cs-barre { animation: cs-barre .85s var(--ola) .18s both, cs-apaga .35s linear 1s both; }
@keyframes cs-barre { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes cs-apaga { from { opacity: 1; } to { opacity: 0; } }

.cs-reflejo { position: absolute; left: 0; top: 0; z-index: 2; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(225, 250, 255, .16), rgba(79, 209, 224, .06) 42%, transparent 70%); mix-blend-mode: screen; transition: opacity .4s var(--ola); }
.cs-inclina .cs-reflejo { opacity: 1; }

.cs-marco { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cs-marco rect { fill: none; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .5; }
.cs-traza .cs-marco rect { animation: cs-dibujo .9s var(--ola) both; }
@keyframes cs-dibujo { from { stroke-dashoffset: 1; opacity: 1; } 70% { opacity: 1; } to { stroke-dashoffset: 0; opacity: .5; } }

.cs-esq { position: absolute; z-index: 4; width: 16px; height: 16px; border: 0 solid var(--destello); opacity: .75; pointer-events: none; }
.cs-esq-1 { top: -6px; left: -6px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 8px; }
.cs-esq-2 { top: -6px; right: -6px; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 8px; }
.cs-esq-3 { bottom: -6px; left: -6px; border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 8px; }
.cs-esq-4 { bottom: -6px; right: -6px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 8px; }
.cs-traza .cs-esq { animation: cs-esq .6s var(--ola) .55s both; }
@keyframes cs-esq { from { opacity: 0; transform: scale(2); } to { opacity: .75; transform: none; } }

/* qué estás viendo (siempre una fila: el alto no salta entre casos) */
.cs-medios { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 44px; }
.cs-medio { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 99px; border: 1px solid var(--linea-2); background: rgba(4, 13, 17, .5); font-size: .84rem; color: var(--txt-2); transition: color .3s var(--ola), border-color .3s var(--ola), background .3s var(--ola), box-shadow .3s var(--ola); }
button.cs-medio:hover { color: var(--txt); border-color: var(--cs-cian); }
.cs-medio[aria-pressed="true"] { color: var(--txt); border-color: var(--cs-cian); background: rgba(79, 209, 224, .1); box-shadow: 0 0 0 1px rgba(79, 209, 224, .35) inset, 0 0 18px -4px rgba(79, 209, 224, .55); }
.cs-medio-solo { cursor: default; }
/* medios en 3D del odontograma: un punto cian que late al pulso, para que resalten */
.cs-medio-3d { gap: .45rem; }
.cs-medio-3d::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4FD1E0; box-shadow: 0 0 8px #4FD1E0; animation: cs-3d 1.6s var(--ola) infinite; }
@keyframes cs-3d { 0%, 100% { opacity: .45; transform: scale(.8); } 25% { opacity: 1; transform: scale(1.25); } }
@media (max-width: 600px) { .cs-medios { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; padding-inline: 2px; -webkit-mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); } .cs-medios::-webkit-scrollbar { display: none; } .cs-medio { flex: none; } }
@media (prefers-reduced-motion: reduce) { .cs-medio-3d::before { animation: none; opacity: 1; } }

/* ---------- lado: contador, mando y la obra ---------- */
.cs-lado { min-width: 0; display: grid; gap: clamp(10px, 1.2vw, 14px); align-content: start; }
.cs-mando { display: flex; align-items: center; gap: 12px; }
.cs-flecha { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--linea-2); background: rgba(4, 13, 17, .5); color: var(--txt-2); transition: color .3s var(--ola), border-color .3s var(--ola), box-shadow .3s var(--ola), transform .3s var(--ola); }
.cs-flecha:hover { color: var(--txt); border-color: var(--cs-cian); box-shadow: 0 0 16px -4px rgba(79, 209, 224, .6); }
.cs-flecha:active { transform: scale(.94); }
.cs-contador { flex: 1; min-width: 0; margin: 0; display: grid; gap: 7px; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; text-align: center; color: var(--txt-3); }
.cs-contador b { font-weight: 600; color: var(--txt); }
.cs-prog { display: block; height: 2px; border-radius: 2px; overflow: hidden; background: var(--linea); }
.cs-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--cs-cian), var(--destello)); transform-origin: left center; transform: scaleX(0); }
.cs-prog i.cs-corre { animation: cs-llena var(--cs-dur) linear forwards; }
@keyframes cs-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* todas las obras en la misma celda: el alto es el de la más alta y nada se recorta */
.cs-obras { display: grid; min-width: 0; }
.cs-obra { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .25s var(--ola), visibility 0s linear .25s; }
.cs-obra.cs-activa { opacity: 1; visibility: visible; transition: opacity .4s var(--ola); }

.cs-rubro { margin: 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-cian); }
.cs-nombre { margin: .3rem 0 .6rem; font: 600 clamp(1.5rem, 2.6vw, 2.05rem)/1.05 var(--ft); letter-spacing: -.025em; }
.cs-esencia { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .45rem; margin: 0 0 .8rem; font: 600 clamp(1rem, 1.5vw, 1.16rem)/1.25 var(--ft); letter-spacing: -.01em; color: var(--txt); }
.cs-parte { display: inline-flex; align-items: center; gap: .45rem; }
.cs-parte b { font-weight: inherit; padding: .32em .62em; border-radius: 10px; border: 1px solid var(--cs-cian-2); background: linear-gradient(180deg, rgba(79, 209, 224, .1), rgba(79, 209, 224, .03)); box-shadow: 0 0 20px -10px rgba(79, 209, 224, .7) inset; }
.cs-mas { font-style: normal; font-weight: 400; color: var(--destello); }
.cs-entra .cs-rubro { animation: cs-croma .6s var(--ola) backwards; }
.cs-entra .cs-nombre { animation: cs-croma .6s var(--ola) .06s backwards; }
.cs-entra .cs-esencia > * { animation: cs-croma .6s var(--ola) backwards; animation-delay: calc(.16s + var(--k, 0) * .12s); }
.cs-dominio.cs-croma { animation: cs-croma .6s var(--ola) backwards; }
/* aparición con leve separación cromática (dura menos de 300 ms) */
@keyframes cs-croma {
  0% { opacity: 0; transform: translateY(8px); filter: blur(4px) drop-shadow(-3px 0 rgba(79, 209, 224, .9)) drop-shadow(3px 0 rgba(242, 166, 157, .8)); }
  45% { opacity: 1; filter: blur(0) drop-shadow(-1px 0 rgba(79, 209, 224, .5)) drop-shadow(1px 0 rgba(242, 166, 157, .4)); }
  100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 0 rgba(79, 209, 224, 0)) drop-shadow(0 0 0 rgba(242, 166, 157, 0)); }
}

.cs-estado { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; font-size: .8rem; color: var(--txt-3); }
.cs-estado i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--destello); box-shadow: 0 0 10px var(--destello); }
.cs-activa:not(.cs-hecha) .cs-estado i { animation: cs-late 1.6s ease-in-out infinite; }
.cs-hecha .cs-estado { color: var(--txt-2); }
.cs-hecha .cs-estado i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
@keyframes cs-late { 50% { opacity: .35; } }

/* piezas: esqueleto en líneas → se arma → queda lista con su check */
.cs-piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cs-pieza { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .65rem; align-items: start; padding: .45rem .65rem; border-radius: 12px; border: 1px dashed rgba(79, 209, 224, .2); font-size: .9rem; line-height: 1.38; color: var(--txt-2); transition: border-color .4s var(--ola), background .4s var(--ola); }
.cs-pieza::before { content: ""; position: absolute; left: calc(.65rem + 11.5px); top: calc(.45rem + 24px); bottom: calc(-7px - .45rem); width: 1px; background: linear-gradient(180deg, var(--cs-cian), rgba(255, 198, 41, .6)); transform: scaleY(0); transform-origin: top center; transition: transform .45s var(--ola); pointer-events: none; }
.cs-pieza:last-child::before { display: none; }
.cs-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--cs-cian-2); color: var(--ok); transition: border-color .4s var(--ola), background .4s var(--ola), box-shadow .4s var(--ola); }
.cs-ic svg { width: 13px; height: 13px; }
.cs-ic path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cs-txt { position: relative; min-width: 0; overflow: hidden; border-radius: 6px; }
.cs-txt > span { display: block; opacity: 0; }
.cs-txt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 .38em, rgba(79, 209, 224, .12) .38em .98em, transparent .98em 1.4em); transition: opacity .3s var(--ola); }
.cs-txt::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 20%, rgba(201, 247, 255, .3) 50%, transparent 80%); }

.cs-pieza.cs-arma { border-style: solid; border-color: rgba(79, 209, 224, .5); background: rgba(79, 209, 224, .05); }
.cs-pieza.cs-arma .cs-ic { border-color: var(--cs-cian); box-shadow: 0 0 12px -2px rgba(79, 209, 224, .7); }
.cs-pieza.cs-arma .cs-txt::before { opacity: 1; animation: cs-barrido .6s linear infinite; }
@keyframes cs-barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.cs-pieza.cs-lista { border-style: solid; border-color: var(--linea); background: rgba(244, 241, 234, .02); color: var(--txt); }
.cs-pieza.cs-lista::before { transform: scaleY(1); }
.cs-pieza.cs-lista .cs-ic { border-style: solid; border-color: rgba(127, 209, 168, .6); background: rgba(127, 209, 168, .12); }
.cs-pieza.cs-lista .cs-ic path { animation: cs-trazo .5s var(--ola) forwards; }
.cs-pieza.cs-lista .cs-txt::after { opacity: 0; }
.cs-pieza.cs-lista .cs-txt > span { opacity: 1; animation: cs-croma .6s var(--ola) backwards; }
@keyframes cs-trazo { to { stroke-dashoffset: 0; } }

/* fases: nodos de circuito que se encienden y se conectan */
/* los circuitos de todos los casos en la misma celda, bajo la pantalla; se ve el del caso activo */
.cs-circuitos { display: grid; min-width: 0; padding: 4px 2px 2px; }
.cs-circuito { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: repeat(var(--f, 4), minmax(0, 1fr)); opacity: 0; visibility: hidden; transition: opacity .25s var(--ola), visibility 0s linear .25s; }
.cs-circuito.cs-activo { opacity: 1; visibility: visible; transition: opacity .4s var(--ola); }
.cs-linea { position: absolute; top: 7px; left: calc(50% / var(--f, 4)); right: calc(50% / var(--f, 4)); height: 1px; overflow: hidden; background: var(--linea); }
.cs-linea-luz { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cs-cian), var(--ok)); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ola); }
.cs-linea-flujo { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; opacity: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, #FFE9A8, transparent) right center / 56px 100% no-repeat; }
.cs-circuito.cs-activo.cs-completo .cs-linea-flujo { opacity: 1; animation: cs-flujo 3.2s linear infinite; }
@keyframes cs-flujo { from { transform: translateX(-100%); } to { transform: translateX(15%); } }
.cs-fase { position: relative; display: grid; justify-items: center; gap: .42rem; min-width: 0; }
.cs-fase i { position: relative; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--fondo); transition: border-color .45s var(--ola), background .45s var(--ola), box-shadow .45s var(--ola); }
.cs-fase em { font-style: normal; font-size: .72rem; line-height: 1.2; white-space: nowrap; color: var(--txt-3); transition: color .4s var(--ola); }
.cs-fase.cs-on i { border-color: var(--ok); background: radial-gradient(circle, #D6F7E6 0 22%, var(--ok) 42%, rgba(127, 209, 168, .25) 78%); box-shadow: 0 0 0 4px rgba(127, 209, 168, .12), 0 0 14px rgba(127, 209, 168, .75); animation: cs-nodo .5s var(--ola); }
.cs-fase.cs-on em { color: var(--ok); }
@keyframes cs-nodo { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.cs-links { display: flex; flex-wrap: wrap; gap: 0 1.3rem; margin-top: .35rem; font-size: .9rem; }
.cs-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; color: var(--txt-2); text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
.cs-link:hover { color: var(--txt); text-decoration-color: var(--destello); }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .cs-riel { margin-inline: calc(-1 * var(--g)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .cs-riel::-webkit-scrollbar { display: none; }
  .cs-pista { width: max-content; min-width: 100%; padding-inline: var(--g); }
  .cs-carril { width: max-content; margin-inline: auto; grid-template-columns: repeat(var(--cs-n, 6), 112px); }
  .cs-tab { scroll-snap-align: center; }
  .cs-escenario { grid-template-columns: minmax(0, 1fr); }
  .cs-visor { position: static; width: 100%; max-width: 620px; justify-self: center; }
  .cs-lado { width: 100%; max-width: 620px; justify-self: center; }
}
@media (max-width: 480px) {
  .cs-escenario { padding: 12px; }
  .cs-carril { grid-template-columns: repeat(var(--cs-n, 6), 104px); }
  .cs-tab b { font-size: .9rem; }
  .cs-pieza { padding: .5rem .6rem; font-size: .9rem; }
  .cs-pieza::before { left: calc(.6rem + 11.5px); top: calc(.5rem + 24px); bottom: calc(-7px - .5rem); }
  .cs-fase em { font-size: .64rem; letter-spacing: 0; }
  .cs-medio { padding: 0 .75rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *::before, .cs *::after { animation: none !important; transition: none !important; }
  .cs-anillo, .cs-prog { display: none; }
  .cs-holo { transform: none; }
  .cs-pieza.cs-lista .cs-ic path { stroke-dashoffset: 0; }
}