/* Casos animados (copiados de rogelioguz/style.css; sitio independiente) */
/* Claudio (compartido por todas las escenas) */
.cl-bob { animation: bob 3.4s ease-in-out infinite alternate; }
.cl-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.cl-armL, .cl-armR { transform-box: fill-box; transition: transform .6s var(--ease); }
.cl-armL, .cl-armL .cl-wig { transform-origin: 100% 50%; }
.cl-armR, .cl-armR .cl-wig { transform-origin: 0 50%; --s: -1; }
.cl-wig { transform-box: fill-box; animation: wig 3s ease-in-out infinite alternate; }
.cl-wig--b { animation-delay: -1.4s; }
.cl-main { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bob { to { transform: translateY(-3px); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes wig { to { transform: rotate(calc(5deg * var(--s, 1))); } }

/* ---------- Casos: un bootcamp, varias soluciones ---------- */
#h-caso { max-width: 20ch; }
.cases__head { margin-bottom: clamp(28px, 4vw, 52px); }
.lede { font: 400 clamp(1.05rem, 1.7vw, 1.3rem)/1.5 var(--inter); color: var(--paper-soft); max-width: 40ch; margin-top: 18px; }
.cases { display: grid; gap: 22px; }
.case__photo { margin: 0; }
.case__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 100%; border-radius: 22px; background: var(--midnight); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .75); }
.case__photo figcaption { margin-top: 12px; font: 400 13px/1.4 var(--inter); letter-spacing: .02em; color: var(--paper-soft); }
.cases__list { display: grid; gap: 22px; min-width: 0; }
.case { min-width: 0; padding: clamp(16px, 2.2vw, 28px); background: linear-gradient(180deg, rgba(250, 252, 251, .07), rgba(250, 252, 251, .025)); border: 1px solid rgba(250, 252, 251, .13); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); border-radius: 26px; }
.case__head { margin-bottom: 16px; }
.case__tag { display: inline-flex; margin-bottom: 12px; padding: 7px 12px; border: 1px solid rgba(34, 216, 197, .55); border-radius: 999px; font: 500 11px/1 var(--inter); letter-spacing: .15em; text-transform: uppercase; color: var(--aqua); max-width: none; }
.case__t { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1.15; color: var(--paper); letter-spacing: -0.01em; }
.case__n { font: 600 .85rem/1 var(--sora); letter-spacing: .12em; color: var(--aqua); }
.stage { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(250, 252, 251, .1); background: radial-gradient(120% 90% at 50% 0%, rgba(14, 165, 163, .22), transparent 62%), radial-gradient(rgba(250, 252, 251, .07) 1px, transparent 1.3px) 0 0 / 22px 22px, #0d1b3d; }
.scene__svg, .vid__svg { display: block; width: 100%; height: auto; }

/* Video explicativo (caso 1): la escena la fija main.js con data-s="0..7" */
.vid .stage { aspect-ratio: 480 / 300; }

/* Piezas del video */
.vs { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; transition: transform .9s var(--ease) calc(var(--i) * .12s), opacity .45s ease calc(var(--i) * .12s); }
.vs__in { animation: vfloat 3.2s ease-in-out infinite alternate; animation-delay: var(--fd); }
.cb { opacity: 0; animation: cblink 2.4s steps(1) infinite; animation-delay: var(--b); }
.vid .cl { opacity: 0; transform: translateY(70px) scale(.85); transition: opacity .5s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1); transform-box: view-box; transform-origin: 0 40px; }
.orbx { opacity: .3; transition: opacity .8s ease; }
.ghost, .ghost-t { opacity: .5; transition: opacity .6s ease; }
.vid:is([data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) :is(.ghost, .ghost-t) { opacity: 0; }
.ring, .appb, .env, .bk, .bit, .spk, .qb, .rl, .cp-i, .pn, .pr, .al, .rls, .alr { opacity: 0; }
.cp-l { fill: none; stroke: var(--aqua); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 5; opacity: 0; }
.appb { transform: translateY(-64px); }
.qb, .rl { transform: translate(var(--x), var(--y)); }
.pn { transform-box: view-box; transform-origin: 240px 176px; transform: scale(.15); }
.bk { transform: translate(var(--x), var(--y)); }
.spk { transform: translate(var(--sx), var(--sy)) scale(0); }
.cl-armL, .cl-armR { transition: transform .5s var(--ease); }

/* 0 · un Excel de entrada */
.vid[data-s="0"] .vs--A { opacity: 1; animation: sin .9s var(--ease) both; }
.vid[data-s="1"] .vs--A, .vid[data-s="2"] .vs--A { opacity: 1; }
/* 1 · varios Excel de fórmulas, a mano */
.vid[data-s="1"] .vs--F, .vid[data-s="2"] .vs--F { opacity: 1; }
.vid[data-s="1"] .vs--F { animation: fin .8s var(--ease) calc(var(--i) * .32s + .2s) both; }
.vid[data-s="1"] .cp-l, .vid[data-s="1"] .cp-i { opacity: 1; transition: opacity .4s ease 1.4s; }
.vid[data-s="1"] .cp-l { animation: dash 1s linear infinite; }
.vid[data-s="1"] .cp-i { animation: cphop 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--k) * .25s); }
/* 2 · reglas que nadie recordaba */
.vid[data-s="2"] .qb { opacity: 1; animation: qpop .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--k) * .22s + .3s) both, qbob 1.8s ease-in-out calc(var(--k) * .22s + 1s) infinite alternate; }
.vid[data-s="2"] .rl { opacity: 1; transform: translate(calc(var(--x) + var(--dx) / 4), calc(var(--y) + 38px)) rotate(calc(var(--k) * 5deg - 7deg)); transition: transform .8s var(--ease) calc(var(--k) * .2s), opacity .4s ease calc(var(--k) * .2s); }
/* 3 · las fórmulas se vuelven una app (Claudio) */
.vid[data-s="3"] .vs--A, .vid[data-s="3"] .vs--F, .vid[data-s="4"] .vs--F, .vid[data-s="4"] .vs--A { opacity: 0; transform: translate(240px, 214px) scale(.15); }
.vid[data-s="3"] .vs--A, .vid[data-s="3"] .vs--F { transition-delay: calc(var(--i) * .1s); }
.vid:is([data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) .cl { opacity: 1; transform: none; }
.vid:is([data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) .orbx { opacity: .95; }
.vid[data-s="3"] .bk { animation: bkfly 1.9s var(--ease) calc(var(--i) * .17s + .25s) both; }
.vid[data-s="3"] .cl-eye { animation: none; transform: scaleY(.4); }
.vid[data-s="3"] .appb { animation: pop .7s cubic-bezier(.3, 1.6, .5, 1) 1.6s both; }
.vid[data-s="4"] .appb { opacity: 1; }
.vid[data-s="3"] .cl-armL, .vid[data-s="3"] .cl-armR { transform: rotate(calc(16deg * var(--s, 1))); }
/* 4 · subes el Excel de entrada */
.vid[data-s="4"] .vs--A { animation: ain 2.6s var(--ease) both; }
.vid[data-s="4"] .ring { animation: ringp 1.5s ease-out 1.5s infinite; }
.vid[data-s="4"] .cl-eye { animation: none; transform: scaleY(.4); transition: transform .3s ease 1.3s; }
.vid[data-s="4"] .bit { animation: bit 1.3s ease-out infinite; animation-delay: calc(var(--bd) + 1.7s); }
.vid[data-s="4"] .spk { animation: spk 1.4s ease-out infinite; animation-delay: calc(var(--k) * .3s + 1.6s); }
.vid[data-s="4"] .cl-armL, .vid[data-s="4"] .cl-armR { transform: rotate(calc(16deg * var(--s, 1))); }
/* 5 · el resultado, claro y con colores */
.vid[data-s="5"] .cl-armL { transform: rotate(40deg); } .vid[data-s="5"] .cl-armR { transform: rotate(-40deg); }
.vid[data-s="5"] .pn { opacity: 1; transform: translateY(22px) scale(1.15); transition: transform .9s cubic-bezier(.3, 1.3, .5, 1), opacity .4s ease; }
.vid[data-s="5"] .pr { opacity: 1; animation: rowin .5s var(--ease) calc(var(--k) * .28s + .8s) both; }
.vid[data-s="5"] .al--1 { opacity: 1; animation: popa .6s cubic-bezier(.3, 1.6, .5, 1) 2.2s both; }
.vid[data-s="5"] .al--2 { opacity: 1; animation: popa .6s cubic-bezier(.3, 1.6, .5, 1) 3s both; }
.vid[data-s="5"] .rls { opacity: 1; animation: rowin .6s var(--ease) 3.6s both; }
.vid[data-s="5"] .alr { opacity: 1; animation: alp 1.1s ease-in-out 2.4s infinite alternate; }
/* 6 · listo para mandarlo por correo */
.vid[data-s="6"] .pn { opacity: 1; transform: translateY(22px) scale(1.15); animation: fold 1s var(--ease) .2s both; }
.vid[data-s="6"] .pr, .vid[data-s="6"] .al, .vid[data-s="6"] .rls, .vid[data-s="6"] .alr { opacity: 1; }
.vid[data-s="6"] .env { animation: envfly 2.8s var(--ease) 1s both; }
.vid[data-s="6"] .cl-armL { transform: rotate(40deg); } .vid[data-s="6"] .cl-armR { transform: rotate(-40deg); }
.vid[data-s="6"] .cl-main { animation: hop .7s ease-out 1.6s 1 both; }
/* 7 · varios Excel menos */
.vid[data-s="7"] .cl-armL { transform: rotate(48deg); } .vid[data-s="7"] .cl-armR { transform: rotate(-48deg); }
.vid[data-s="7"] .vs--A { opacity: 1; transform: translate(80px, 226px) rotate(-4deg) scale(.9); transition: none; animation: none; }
.vid[data-s="7"] .pn { opacity: 1; transform: translateY(-4px) scale(.5); transition: transform .9s var(--ease) .2s, opacity .5s ease .2s; }
.vid[data-s="7"] .pr, .vid[data-s="7"] .al, .vid[data-s="7"] .rls, .vid[data-s="7"] .alr { opacity: 1; }
.vid[data-s="7"] .ring { opacity: 1; transform-box: fill-box; transform-origin: center; transform: scale(1.5); stroke-opacity: .5; }
.vid[data-s="7"] .cl-main { animation: hop .8s ease-out .2s 2 both; }
.vid[data-s="7"] .spk { animation: spk 1.6s ease-out infinite; animation-delay: calc(var(--k) * .25s); }
.al text { font-size: 15.5px; }
.rls text { font-size: 9px; }
.scene:not(.is-vis) * { animation-play-state: paused !important; }
.scene.is-reset .stage, .scene.is-reset .stage * { transition: none !important; animation: none !important; }
.vid, .scene { --ease: cubic-bezier(.5, 0, .2, 1); }

@keyframes vfloat { to { transform: translateY(-4px) rotate(1.4deg); } }
@keyframes cblink { 0%, 50% { opacity: 0; } 58%, 80% { opacity: .9; } 100% { opacity: 0; } }
@keyframes sin { from { opacity: 0; transform: translate(calc(var(--x) - 70px), calc(var(--y) + 30px)) rotate(-18deg) scale(.7); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes fin { from { opacity: 0; transform: translate(var(--x), calc(var(--y) + 46px)) rotate(calc(var(--r) + 12deg)) scale(.7); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes cphop { to { transform: translate(5px, -5px); } }
@keyframes qpop { from { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); } to { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes qbob { to { transform: translate(var(--x), calc(var(--y) - 6px)) scale(1.06); } }
@keyframes bkfly { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } 25% { opacity: 1; transform: translate(var(--x), calc(var(--y) - 10px)) scale(1.1); } 100% { opacity: 0; transform: translate(240px, 212px) scale(.25); } }
@keyframes chomp { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes scan { from { transform: translateX(0); } to { transform: translateX(200px); } }
@keyframes pop { from { opacity: 0; transform: translateY(-64px) scale(.3); } to { opacity: 1; transform: translateY(-64px) scale(1); } }
@keyframes popa { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.al { transform-box: fill-box; transform-origin: center; }
@keyframes ain { 0% { opacity: 0; transform: translate(-50px, 150px) rotate(-14deg) scale(.9); } 25% { opacity: 1; transform: translate(90px, 150px) rotate(-6deg) scale(1.05); } 60% { opacity: 1; transform: translate(190px, 190px) rotate(0) scale(.7); } 100% { opacity: 0; transform: translate(240px, 214px) scale(.15); } }
@keyframes ringp { 0% { opacity: .9; transform: scale(.5); transform-box: fill-box; transform-origin: center; } 100% { opacity: 0; transform: scale(2.4); transform-box: fill-box; transform-origin: center; } }
@keyframes bit { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), -52px) rotate(120deg); } }
@keyframes spk { 0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0) rotate(0); } 30% { opacity: 1; transform: translate(var(--sx), calc(var(--sy) - 8px)) scale(1) rotate(40deg); } 100% { opacity: 0; transform: translate(var(--sx), calc(var(--sy) - 26px)) scale(.4) rotate(90deg); } }
@keyframes rowin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes alp { to { stroke-width: 4; } }
@keyframes fold { 0% { transform: translateY(22px) scale(1.15); opacity: 1; } 100% { transform: translateY(40px) scale(.12); opacity: 0; } }
@keyframes envfly { 0% { opacity: 0; transform: translate(240px, 150px) scale(.2); } 25% { opacity: 1; transform: translate(240px, 130px) scale(1.15); } 50% { opacity: 1; transform: translate(240px, 124px) scale(1); } 100% { opacity: 0; transform: translate(540px, 10px) rotate(14deg) scale(.7); } }
@keyframes hop { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 100% { transform: translateY(0); } }

/* Caso 2: dos hojas, líneas que emparejan, Claudio y la tarjeta con las diferencias */
.scene { display: grid; align-content: start; min-width: 0; }
.case--c2 .stage { aspect-ratio: 600 / 380; }
/* Mazo de pasos: tarjetas que se deslizan; la del centro manda, las de los lados giran y se asoman */
.deck { margin-top: 16px; min-width: 0; }
.scene { grid-template-columns: minmax(0, 1fr); }
.deck__track { display: flex; gap: 12px; margin: 0; padding: 10px 11% 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; perspective: 900px; outline: none; }
.deck__track::-webkit-scrollbar { display: none; }
.deck__track:focus-visible { box-shadow: 0 0 0 2px var(--aqua); border-radius: 22px; }
.dk { flex: 0 0 78%; scroll-snap-align: center; display: grid; align-content: start; gap: 10px; padding: 20px 22px 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(34, 216, 197, .16), rgba(250, 252, 251, .04) 55%), var(--midnight); border: 1px solid rgba(34, 216, 197, .5); box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .55s cubic-bezier(.3, 1.2, .4, 1), opacity .4s ease, border-color .4s, filter .4s; }
.dk.is-prev, .dk.is-next { opacity: .42; border-color: rgba(250, 252, 251, .12); filter: saturate(.4); cursor: pointer; }
.dk.is-prev { transform: rotateY(22deg) rotateZ(-2deg) scale(.88); transform-origin: 100% 50%; }
.dk.is-next { transform: rotateY(-22deg) rotateZ(2deg) scale(.88); transform-origin: 0 50%; }
.dk.is-next:hover, .dk.is-prev:hover { opacity: .7; }
.dk__k { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1 var(--sora); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); max-width: none; }
.dk__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--aqua); color: var(--navy); letter-spacing: 0; font-size: 12px; }
.dk__t { margin: 0; font: 500 clamp(1rem, 1.45vw, 1.1rem)/1.55 var(--inter); color: var(--paper); max-width: none; }
.deck__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding-inline: 4px; }
.deck__dots { display: flex; gap: 8px; }
.deck__dot { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; border: 0; cursor: pointer; }
.deck__dot i { position: relative; display: block; width: 8px; height: 8px; border-radius: 99px; background: rgba(250, 252, 251, .28); overflow: hidden; transition: width .35s cubic-bezier(.3, 1.2, .4, 1), background .3s; }
.deck__dot.is-done i { background: rgba(250, 252, 251, .55); }
.deck__dot[aria-current] i { width: 34px; background: rgba(250, 252, 251, .2); }
.deck__dot[aria-current] i::after { content: ""; position: absolute; inset: 0; background: var(--aqua); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.deck__hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(34, 216, 197, .12); color: var(--aqua); font: 600 12px/1 var(--sora); letter-spacing: .08em; text-transform: uppercase; max-width: none; transition: opacity .4s ease; }
.deck__chev { letter-spacing: -.05em; font-size: 15px; }
.deck.is-touched .deck__hint { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .deck.is-seen:not(.is-touched) .deck__hand { animation: dk-hand 1.8s ease-in-out infinite; }
  .deck.is-seen:not(.is-touched) .deck__chev { animation: dk-chev 1.8s ease-in-out infinite; }
  .deck.is-seen:not(.is-touched) .deck__track { animation: dk-nudge 1.4s cubic-bezier(.4, 0, .2, 1) 1.2s 2; }
}
@keyframes dk-hand { 0%, 100% { transform: translateX(4px) rotate(8deg); } 50% { transform: translateX(-6px) rotate(-6deg); } }
@keyframes dk-chev { 0%, 100% { opacity: .35; transform: translateX(-2px); } 50% { opacity: 1; transform: translateX(3px); } }
@keyframes dk-nudge { 0%, 100% { transform: none; } 40% { transform: translateX(-28px); } }
.rw { transform: translateY(var(--o)); transition: transform .9s var(--ease) calc(var(--k) * .1s), opacity .6s ease; }
.rw .rbg { transition: fill .5s ease, stroke .5s ease; }
.pl { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tk { opacity: 0; transform: translate(300px, var(--y)) scale(.3); }
.dc { transform-box: view-box; transform-origin: 300px 208px; transform: translateY(110px) scale(.7); opacity: 0; transition: transform .9s var(--ease), opacity .4s ease; }
/* Caso 2 por tiempos (data-s 0..5): 0-1 Antes (lupa buscando, reloj), 2-3 Lo que armó (Claudio empareja), 4-5 Después (solo diferencias) */
.scene--2 .sheetL, .scene--2 .sheetR { transform-box: fill-box; transform-origin: 50% 50%; }
.scene--2 .cl { opacity: 0; transform: translateY(80px) scale(.85); transform-box: view-box; transform-origin: 0 40px; transition: opacity .5s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.scene--2 .cl-armL, .scene--2 .cl-armR { transition: transform .5s var(--ease); }
.clk, .mg, .q2, .appb2, .bang { opacity: 0; }
.clk { transition: opacity .4s ease; }
.clk__in { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease); }
.clk__h, .clk__m { transform-box: view-box; transform-origin: 0 0; }
.mg { transform: translate(92px, 70px); }
.q2 { transform: translate(var(--x), var(--y)); }
.appb2__in { transform-box: fill-box; transform-origin: center; }
.bang { transform: translate(var(--x), var(--y)) scale(0); }
.scene--2 .rw.diff .rbg { transition: fill .5s ease, stroke .5s ease; }
/* 0 · llegan las hojas y la lupa busca renglón por renglón */
.scene--2[data-s="0"] .sheetL { animation: shL .9s var(--ease) both; }
.scene--2[data-s="0"] .sheetR { animation: shR .9s var(--ease) .15s both; }
.scene--2:is([data-s="0"], [data-s="1"]) .mg { opacity: 1; transition: opacity .3s ease 1s; animation: mgscan 5.2s ease-in-out .9s infinite; }
.scene--2:is([data-s="0"], [data-s="1"]) .clk { opacity: 1; transition-delay: 1.3s; }
.scene--2:is([data-s="0"], [data-s="1"]) .clk__m { animation: spin 1.6s linear infinite; }
.scene--2:is([data-s="0"], [data-s="1"]) .clk__h { animation: spin 12s linear infinite; }
.scene--2[data-s="0"] .clk__in { animation: popc .6s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
/* 1 · se tarda: los renglones no cuadran y salen dudas */
.scene--2[data-s="1"] .rw { animation: rwj .5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * .12s); }
.scene--2[data-s="1"] .q2 { opacity: 1; animation: qpop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--k) * .35s + .3s) both, qbob 1.6s ease-in-out calc(var(--k) * .35s + .9s) infinite alternate; }
.scene--2[data-s="1"] .clk__in { animation: tired 1.2s ease-in-out infinite alternate; }
/* 2 · llega la mini app: Claudio */
.scene--2:is([data-s="2"], [data-s="3"], [data-s="4"], [data-s="5"]) .cl { opacity: 1; transform: none; transition-delay: .35s; }
.scene--2[data-s="2"] .clk__in { transform: scale(.2); }
.scene--2[data-s="2"] .appb2 { opacity: 1; animation: popc .7s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; }
.scene--2[data-s="2"] .cl-armL { transform: rotate(40deg); } .scene--2[data-s="2"] .cl-armR { transform: rotate(-40deg); }
.scene--2[data-s="2"] .cl-main { animation: hop .6s ease-out 1s 1 both; }
.scene--2[data-s="2"] .spk { animation: spk 1.3s ease-out calc(var(--k) * .15s + 1.1s) 1 both; }
/* 3 · empareja cada movimiento con su par */
.scene--2:is([data-s="3"], [data-s="4"], [data-s="5"]) .rw { transform: none; }
.scene--2[data-s="3"] .appb2 { opacity: 1; }
.scene--2[data-s="3"] .pl { stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease calc(1s + var(--k) * .16s); }
.scene--2[data-s="3"] .tk { opacity: 1; transform: translate(300px, var(--y)) scale(1); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(1.55s + var(--k) * .16s), opacity .3s ease calc(1.55s + var(--k) * .16s); }
.scene--2[data-s="3"] .cl-eyes { animation: look 1.4s ease-in-out infinite alternate; }
.scene--2[data-s="3"] .cl-armL { transform: rotate(34deg); } .scene--2[data-s="3"] .cl-armR { transform: rotate(-34deg); }
/* 4 · solo quedan a la vista las diferencias */
.scene--2:is([data-s="4"], [data-s="5"]) .pl { stroke-dashoffset: 0; opacity: 0; transition: opacity .4s ease .6s; }
.scene--2[data-s="4"] .tk { opacity: 0; transform: translate(300px, 306px) scale(.1); transition: transform .8s var(--ease) calc(var(--k) * .2s), opacity .3s ease calc(var(--k) * .2s + .55s); }
.scene--2:is([data-s="4"], [data-s="5"]) .rw:not(.diff) { opacity: .22; transition-delay: .9s; }
.scene--2:is([data-s="4"], [data-s="5"]) .rw.diff .rbg { fill: var(--mint); stroke: var(--aqua); stroke-width: 2.5; transition-delay: 1.2s; }
.scene--2[data-s="4"] .rw.diff { animation: dpulse 1s ease-in-out 1.6s infinite alternate; }
.scene--2:is([data-s="4"], [data-s="5"]) .bang { opacity: 1; }
.scene--2[data-s="4"] .bang { animation: bangin .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--k) * .3s + 1.5s) both; }
.scene--2[data-s="5"] .bang { transform: translate(var(--x), var(--y)) scale(1); }
.scene--2[data-s="4"] .cl-armL { transform: rotate(20deg); } .scene--2[data-s="4"] .cl-armR { transform: rotate(-20deg); }
.scene--2[data-s="4"] .cl-eyes { animation: look .7s ease-in-out infinite alternate; }
/* 5 · te las entrega para revisarlas con calma */
.scene--2[data-s="5"] .cl-armL { transform: rotate(46deg); } .scene--2[data-s="5"] .cl-armR { transform: rotate(-46deg); }
.scene--2[data-s="5"] .dc { transform: none; opacity: 1; transition-delay: .5s; }
.scene--2[data-s="5"] .dcr { animation: dpulse 1s ease-in-out 1.6s infinite alternate; }
.scene--2[data-s="5"] .cl-main { animation: hop .7s ease-out .6s 2 both; }
.scene--2[data-s="5"] .spk { animation: spk 1.5s ease-out calc(var(--k) * .22s + 1s) infinite; }
@keyframes shL { from { opacity: 0; transform: translate(-80px, 30px) rotate(-12deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes shR { from { opacity: 0; transform: translate(80px, 30px) rotate(12deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes mgscan { 0%, 12% { transform: translate(92px, 70px); } 25%, 37% { transform: translate(508px, 92px); } 50%, 62% { transform: translate(92px, 122px); } 75%, 87% { transform: translate(508px, 150px); } 100% { transform: translate(92px, 70px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popc { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes tired { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes rwj { from { transform: translateY(calc(var(--o) - 2px)); } to { transform: translateY(calc(var(--o) + 3px)); } }
@keyframes dpulse { from { opacity: 1; } to { opacity: .55; } }
@keyframes bangin { from { transform: translate(var(--x), var(--y)) scale(0); } to { transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes look { from { transform: translateX(-5px); } to { transform: translateX(5px); } }

/* Casos en escritorio: foto de ancla a la izquierda, casos a la derecha */
@media (min-width: 960px) {
  .cases { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
  .case__photo { position: sticky; top: calc(var(--nav-h) + 24px); }
}
@media (max-width: 520px) { .case__t { flex-direction: column; gap: 8px; } }

.deck__hint-t { font-size: 0; }
.deck__hint-t::before { content: "Desliza"; font-size: 12px; }
@media (hover: hover) and (pointer: fine) { .deck__hint-t::before { content: "Desliza o da clic"; } }
/* Celular: el mazo usa todo el ancho de la caja del caso para que la tarjeta respire */
@media (max-width: 640px) {
  .deck__track { margin-inline: calc(-1 * clamp(16px, 2.2vw, 28px)); padding-inline: 8%; gap: 10px; }
  .dk { flex-basis: 84%; padding: 18px 18px 20px; }
}
/* Caso completo a la vista: la animación no pasa de ~33% de la pantalla para que título, dibujo y tarjeta quepan sin scroll.
   El cuadro conserva todo el ancho y el dibujo se centra dentro (preserveAspectRatio por defecto). */
.case .stage { width: 100%; max-height: 33svh; }
.case .stage > svg { width: 100%; height: 100%; }
@media (min-width: 900px) {
  .case__head { margin-bottom: 12px; }
  .case__tag { margin-bottom: 8px; }
  .deck { margin-top: 8px; }
  .deck__track { padding-top: 6px; padding-bottom: 10px; }
  .dk { padding: 16px 20px 18px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cb, .bit { opacity: 0 !important; }
}