/* =========================================================
   KeyStage — escena animada (iPad + teclados + ordenador + pedal)
   y sección «Edita tus sonidos»
   ========================================================= */
.wrap.wide{max-width:1440px}

/* ---------- pestañas ---------- */
.sc-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 auto 22px;padding:6px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);width:max-content;max-width:100%}
.sc-tabs button{position:relative;border:0;background:none;padding:11px 16px;border-radius:999px;font:600 14px var(--sans);color:var(--mute);cursor:pointer;transition:color .3s,background .3s;overflow:hidden}
.sc-tabs button:hover{color:var(--ink)}
.sc-tabs button.on{color:#fff;background:rgba(227,38,45,.22)}
.sc-tabs button.on::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--ks2);transform-origin:left;animation:tabprog var(--dur,9s) linear forwards}
@keyframes tabprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:980px){.sc-tabs{border-radius:20px;width:100%}.sc-tabs button{flex:1 1 30%;padding:10px 8px;font-size:13px}}
@media (max-width:560px){.sc-tabs button{flex:1 1 45%}}
.sc-cap{text-align:center;max-width:62ch;margin:30px auto 0;color:var(--ink2);font-size:clamp(16px,1.4vw,19px);min-height:3.2em;transition:opacity .4s}
.sc-cap.fade{opacity:0}

/* ---------- escena ---------- */
.scene{position:relative;display:grid;grid-template-columns:1fr .5fr;grid-template-areas:"ipad devs" "ped devs";max-width:min(100%,calc((100svh - 150px) * 2.05));margin:0 auto;column-gap:clamp(44px,5vw,90px);row-gap:0;align-items:center;padding:6px 0 26px;
  transform:perspective(2200px) rotateX(calc(var(--t,0) * 16deg)) scale(calc(1 - var(--t,0) * .08));transform-origin:50% 0;will-change:transform}
.scene>*{position:relative;z-index:1}
.cables{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.cables path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2.2;stroke-linecap:round}
.cables path.bt{stroke-dasharray:2 8;stroke:rgba(95,170,255,.45)}
.cables .glow{stroke:var(--ks2);stroke-width:3;filter:drop-shadow(0 0 6px rgba(255,90,79,.9))}
.cables circle{fill:#fff;filter:drop-shadow(0 0 8px #ff5a4f) drop-shadow(0 0 3px #fff)}
.cables circle.blue{filter:drop-shadow(0 0 8px #5faaff) drop-shadow(0 0 3px #fff)}
.dev-ipad{grid-area:ipad}
.devs{grid-area:devs;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:46px;align-self:stretch}
.dev{display:none;position:relative}
.mode-solo .kb-nord,.mode-mac .kb-nord,.mode-mac .dev-mac,.mode-multi .kb-nord,.mode-multi .kb-rev2,.mode-multi .kb-bs2{display:block;animation:devin .7s var(--ease)}
@keyframes devin{from{transform:translateX(40px) scale(.94);filter:blur(6px)}}
.mode-multi .devs{gap:40px}
.mode-multi .kb-bs2{width:62%;align-self:flex-end}
.dev-ped{grid-area:ped;justify-self:start;margin:26px 0 0 8%;display:none!important}
.scene.has-ped .dev-ped{display:flex!important;animation:devin .7s var(--ease)}
.dev-label{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);white-space:nowrap;font:500 11px var(--mono);letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.kb .dev-label{display:none}
.mode-multi .kb .dev-label,.mode-mac .kb .dev-label{display:block}
.midi-tag{position:absolute;z-index:5;pointer-events:none;font:600 11px var(--mono);letter-spacing:.04em;color:#fff;background:rgba(227,38,45,.92);padding:5px 8px;border-radius:7px;box-shadow:0 6px 20px rgba(227,38,45,.45);transform:translate(-50%,-50%);animation:tag 1.3s var(--ease) forwards;white-space:nowrap}
.midi-tag.blue{background:rgba(40,120,230,.92);box-shadow:0 6px 20px rgba(40,120,230,.45)}
@keyframes tag{0%{transform:translate(-50%,-30%) scale(.8)}15%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-120%)}}
@media (max-width:900px){
  .scene{max-width:100%;grid-template-columns:1fr;grid-template-areas:"ipad" "ped" "devs"}
  .devs{margin-top:60px;gap:52px}
  .mode-multi .devs{gap:48px}
  .dev-mac{width:min(80%,380px);align-self:center}
  .dev-ped{justify-self:center;margin:30px 0 0}
}

/* ---------- réplica de la app (escala con el ancho del iPad) ---------- */
.dev-ipad{padding:clamp(8px,1vw,14px)}
.scr.live{container-type:inline-size;position:relative;overflow:hidden;background:#141416;color:#f2f2f4;font-family:var(--sans);user-select:none;-webkit-user-select:none}
.app{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:1.4cqw;padding:1.4cqw;font-size:1.55cqw}
.a-head{display:grid;grid-template-columns:1fr auto auto auto;gap:1cqw;height:8.6cqw}
.a-cur{display:flex;align-items:center;gap:1.4cqw;padding:0 1.4cqw;border-radius:1cqw;background:#1d1d20;border:1px solid #2c2c31;border-top:.35cqw solid #c8161d;min-width:0;overflow:hidden}
.a-loc{flex:none;font:800 3.4cqw/1 var(--sans);letter-spacing:.02em;background:#c8161d;color:#fff;padding:.7cqw 1.2cqw;border-radius:.6cqw}
.a-loc.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.12)}}
.a-txt{min-width:0}
.a-name{display:block;font:700 2.9cqw/1.05 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-sub{display:block;font-size:1.25cqw;color:#a7a7ae;margin-top:.5cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-sl{display:flex;flex-direction:column;justify-content:center;padding:0 1.6cqw;border-radius:1cqw;background:#1d1d20;border:1px solid #2c2c31}
.a-sl small{font:700 .95cqw var(--sans);letter-spacing:.18em;color:#8e8e95}
.a-sl b{font:700 1.8cqw var(--sans)}
.a-seg{display:flex;align-items:center;padding:.5cqw;border-radius:2cqw;background:#232327;border:1px solid #303036}
.a-seg span{padding:0 2cqw;height:100%;display:grid;place-items:center;border-radius:1.6cqw;font:700 1.7cqw var(--sans);color:#8e8e95}
.a-seg span.on{background:linear-gradient(#e52b2f,#b8121a);color:#fff;box-shadow:0 .4cqw 1.4cqw rgba(200,22,29,.5)}
.a-menu{width:7cqw;border-radius:2cqw;background:#232327;border:1px solid #303036;display:grid;place-items:center}
.a-menu i{display:block;width:2.6cqw;height:.3cqw;background:#ddd;border-radius:1cqw;box-shadow:0 .8cqw 0 #ddd,0 -.8cqw 0 #ddd}
.a-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:1cqw;min-height:0}
.slot{position:relative;border-radius:.8cqw;padding:1cqw 1.2cqw;background:linear-gradient(165deg,color-mix(in srgb,var(--c) 42%,#2a2a2f),color-mix(in srgb,var(--c) 22%,#1c1c1f));border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,background .35s}
.slot b{display:block;font:700 1.75cqw/1.1 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot hr{border:0;height:.28cqw;border-radius:1cqw;background:var(--c);margin:.7cqw 0 .6cqw}
.slot small{display:block;font-size:1.15cqw;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .loc{position:absolute;right:.8cqw;bottom:.8cqw;font:800 1.05cqw var(--sans);letter-spacing:.08em;background:rgba(0,0,0,.45);padding:.3cqw .6cqw;border-radius:.4cqw}
.slot .var{position:absolute;left:1cqw;bottom:.9cqw;font:700 .95cqw var(--sans);letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:.3cqw .6cqw;border-radius:.4cqw;animation:pop .5s var(--ease)}
.slot.on{background:linear-gradient(165deg,color-mix(in srgb,var(--c) 92%,#fff 8%),color-mix(in srgb,var(--c) 75%,#000));box-shadow:0 0 0 .3cqw #fff,0 1cqw 3cqw color-mix(in srgb,var(--c) 60%,transparent);transform:scale(1.03);z-index:2}
.slot.on hr{background:rgba(255,255,255,.7)}
.slot.empty{background:#202023;border-color:#2a2a2e}
.slot.empty::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:300 4cqw var(--sans);color:#5a5a60}
.slot.empty>*{visibility:hidden}
.slot.pop{animation:pop .55s var(--ease)}
@keyframes pop{0%{transform:scale(.7);filter:brightness(1.8)}60%{transform:scale(1.06)}100%{transform:none;filter:none}}
.slot.press{transform:scale(.95)}
.slot.hold::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .3cqw #fff;animation:hold .8s linear forwards}
@keyframes hold{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.a-foot{display:grid;grid-template-columns:1fr auto 1fr;gap:1.6cqw;height:7.4cqw}
.a-nav{display:flex;align-items:center;gap:1.4cqw;padding:0 2cqw;border-radius:3.6cqw;border:.2cqw solid #c8161d;background:#1d1d20;min-width:0;transition:background .3s,transform .2s}
.a-nav.next{justify-content:flex-end;text-align:right}
.a-nav small{display:block;font:700 1cqw var(--sans);letter-spacing:.16em;color:#9d9da4}
.a-nav b{display:block;font:700 1.75cqw var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-nav>span{min-width:0}
.a-nav i{font-style:normal;font-size:2.2cqw}
.a-nav.flash{background:#3a1416;transform:scale(.97)}
.a-views{display:flex;align-items:center;gap:2.4cqw;padding:0 2.6cqw;border-radius:3.6cqw;background:#232327;border:1px solid #303036}
.a-views i{width:2.4cqw;height:2.4cqw;border-radius:.4cqw;background:repeating-linear-gradient(90deg,#ddd 0 .6cqw,transparent .6cqw .9cqw)}
.a-views i+i{background:repeating-linear-gradient(#ddd 0 .4cqw,transparent .4cqw .95cqw)}

/* hoja para elegir sonido (sin transform de centrado: así el dedo acierta) */
.a-sheet{position:absolute;left:27%;top:13%;width:46%;opacity:0;visibility:hidden;background:#232327;border:1px solid #3a3a40;border-radius:1.6cqw;box-shadow:0 3cqw 8cqw rgba(0,0,0,.6);padding:1.6cqw;transition:opacity .35s,visibility .35s;z-index:6}
.a-sheet.show{opacity:1;visibility:visible}
.a-sheet h4{margin:0 0 1.2cqw;font:700 1.8cqw var(--sans)}
.a-sheet .row{display:flex;align-items:center;gap:1.2cqw;padding:1cqw 1.2cqw;border-radius:.8cqw;font:600 1.55cqw var(--sans);transition:background .25s}
.a-sheet .row i{width:.6cqw;height:2.4cqw;border-radius:.4cqw;background:var(--c)}
.a-sheet .row em{font-style:normal;font:800 1.1cqw var(--sans);color:#aaa;background:#333;padding:.3cqw .6cqw;border-radius:.4cqw}
.a-sheet .row.sel{background:rgba(227,38,45,.45)}
.a-dim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .4s;z-index:5;pointer-events:none}
.a-dim.show{opacity:1}

/* panel de edición */
.a-panel{position:absolute;inset:2.4cqw 2.4cqw;z-index:6;border-radius:1.8cqw;background:#1b1b1e;border:1px solid #34343a;box-shadow:0 4cqw 10cqw rgba(0,0,0,.7);padding:2cqw;display:grid;grid-template-rows:auto 1fr auto;gap:1.8cqw;transform:translateY(105%);transition:transform .7s var(--ease)}
.a-panel.show{transform:none}
.p-head{display:flex;align-items:center;gap:1.6cqw}
.p-head small{display:block;font:600 1.1cqw var(--sans);letter-spacing:.16em;color:#9a9aa1}
.p-head b{font:700 2.4cqw var(--sans)}
.p-tabs{margin-left:auto;display:flex;background:#28282d;border-radius:1cqw;padding:.4cqw}
.p-tabs span{padding:.8cqw 2cqw;border-radius:.8cqw;font:700 1.4cqw var(--sans);color:#999}
.p-tabs span.on{background:#c8161d;color:#fff}
.p-body{border-radius:1.4cqw;background:linear-gradient(#d21f26,#a3121a);padding:1.6cqw;display:grid;grid-template-columns:1.25fr 1fr;gap:1.4cqw}
.p-sec{background:#2c2f3a;border-radius:1cqw;padding:1.2cqw 1.6cqw 1.8cqw;display:flex;flex-direction:column}
.p-sec h5{margin:0 0 1.4cqw;text-align:center;font:800 1.15cqw var(--sans);letter-spacing:.3em;background:#c9ccd6;color:#222;border-radius:.6cqw;padding:.5cqw}
.p-knobs{display:flex;justify-content:space-around;flex:1;align-items:center}
.knob{display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.knob .k{--v:.5;position:relative;width:7.2cqw;height:7.2cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3b3b40,#0d0d0f 70%);box-shadow:0 .5cqw 1cqw rgba(0,0,0,.6),inset 0 .2cqw .2cqw rgba(255,255,255,.12)}
.knob .k::before{content:"";position:absolute;inset:-1cqw;border-radius:50%;background:conic-gradient(from 225deg,#ff5a4f calc(var(--v)*270deg),rgba(255,255,255,.12) 0 270deg,transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .45cqw),#000 calc(100% - .4cqw));mask:radial-gradient(farthest-side,transparent calc(100% - .45cqw),#000 calc(100% - .4cqw))}
.knob .k::after{content:"";position:absolute;left:50%;top:10%;width:.5cqw;height:32%;margin-left:-.25cqw;border-radius:.3cqw;background:#fff;transform-origin:50% 125%;transform:rotate(calc(-135deg + var(--v)*270deg))}
.knob small{font:800 1.05cqw var(--sans);letter-spacing:.14em;color:#e8e8ee}
.knob output{font:700 1.2cqw var(--mono);color:#ffd0cc;min-width:3ch;text-align:center}
.knob.act .k{box-shadow:0 0 0 .3cqw rgba(255,255,255,.7),0 0 3cqw rgba(255,90,79,.7)}
.p-foot{display:flex;align-items:center;gap:1.4cqw}
.p-foot span{font-size:1.3cqw;color:#a4a4ab}
.p-foot .btn2{margin-left:auto;padding:1.2cqw 2.4cqw;border-radius:1cqw;background:#2b2b30;font:700 1.5cqw var(--sans)}
.p-foot .save{margin-left:0;background:#d71f26;color:#fff;transition:transform .2s}
.p-foot .save.press{transform:scale(.94)}

/* dedo / toque */
.a-touch{position:absolute;left:0;top:0;width:5.2cqw;height:5.2cqw;margin:-2.6cqw 0 0 -2.6cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.22) 60%,rgba(255,255,255,0) 72%);border:.2cqw solid rgba(255,255,255,.85);box-shadow:0 0 2cqw rgba(255,255,255,.35);z-index:9;opacity:0;transition:transform .75s cubic-bezier(.5,0,.15,1),opacity .35s;pointer-events:none}
.a-touch.on{opacity:1}
.a-touch.tap::after{content:"";position:absolute;inset:-.2cqw;border-radius:50%;border:.25cqw solid #fff;animation:ripple .55s ease-out forwards}
.a-touch.down{background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,.3) 60%,transparent 72%)}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}

/* ---------- ordenador ficticio ---------- */
.mac .m-scr{container-type:inline-size;aspect-ratio:16/10.4;border-radius:12px 12px 4px 4px;border:clamp(6px,.7vw,10px) solid #1a1a1c;background:#0f1013;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.9)}
.mac .m-base{height:clamp(8px,1vw,13px);margin:0 -7%;border-radius:0 0 14px 14px;background:linear-gradient(#bfc0c5,#7e7f85);box-shadow:0 20px 40px -10px rgba(0,0,0,.8)}
.mac .m-base::before{content:"";display:block;width:18%;height:40%;margin:0 auto;background:#9a9ba1;border-radius:0 0 6px 6px}
.m-bar{display:flex;align-items:center;gap:1.4cqw;height:7.4cqw;padding:0 2.6cqw;background:#25262b;font:600 2.9cqw var(--sans);color:#bbb}
.m-bar i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#ff5f57}.m-bar i:nth-child(2){background:#febc2e}.m-bar i:nth-child(3){background:#28c840}
.m-bar span{margin-left:2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-body{display:grid;grid-template-columns:44% 1fr;height:calc(100% - 7.4cqw)}
.m-list{list-style:none;margin:0;padding:1.6cqw;background:#17181c;overflow:hidden;font:500 3cqw var(--sans);color:#aab}
.m-list li{display:flex;gap:1.8cqw;padding:1.3cqw 1.8cqw;border-radius:1.2cqw;white-space:nowrap;overflow:hidden;transition:background .3s,color .3s}
.m-list li em{font-style:normal;color:#667;min-width:3ch}
.m-list li.on{background:#2f6fe0;color:#fff}.m-list li.on em{color:#cfe0ff}
.m-main{display:flex;flex-direction:column;justify-content:center;padding:4cqw;min-width:0}
.m-main small{font:700 2.4cqw var(--mono);letter-spacing:.2em;color:#5e8be0}
.m-name{font:700 6.6cqw/1.05 var(--sans);color:#fff;margin:1.2cqw 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-name.swap{animation:swapin .5s var(--ease)}
@keyframes swapin{from{transform:translateY(30%);filter:blur(4px)}}
.m-song{font-size:3cqw;color:#889}
.m-meter{display:flex;gap:1.2cqw;align-items:flex-end;height:20cqw;margin-top:4cqw}
.m-meter i{flex:1;border-radius:.6cqw;background:linear-gradient(0deg,#28c840,#d6e03a 70%,#ff5f57);height:20%;animation:meter 1s ease-in-out infinite alternate;animation-play-state:paused}
.scene.playing .m-meter i{animation-play-state:running}
.m-meter i:nth-child(2n){animation-duration:.7s}.m-meter i:nth-child(3n){animation-duration:1.3s}.m-meter i:nth-child(5n){animation-duration:.85s}
@keyframes meter{to{height:85%}}

/* ---------- teclados (inspirados en los reales, sin marcas) ---------- */
.kb{container-type:inline-size}
.kb-body{position:relative;border-radius:2.4cqw;padding:2.4cqw 3cqw 0;box-shadow:0 50px 90px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.18)}
.kb-panel{display:flex;align-items:center;gap:3cqw;padding:1.4cqw 0 2.6cqw}
.kb-bed{display:flex;gap:2cqw;align-items:stretch}
.kb-wheels{display:flex;gap:1.4cqw;padding:1.2cqw 0 2cqw;flex:none}
.kb-wheels i{display:block;width:3.4cqw;border-radius:1cqw;background:linear-gradient(90deg,#2a2a2d,#555 50%,#2a2a2d);box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.4)}
.kb-wheels i.stick{background:linear-gradient(90deg,#8d8f94,#c8c9cc 50%,#8d8f94);border-radius:1.6cqw}
.b-keys{position:relative;display:flex;flex:1;height:22cqw}
.b-keys .w{flex:1;margin:0 .14cqw;border-radius:0 0 .6cqw .6cqw;background:linear-gradient(#e9e4da,#fbf9f4 75%,#ddd6c8);box-shadow:inset 0 -.8cqw 0 #cfc8b8;transition:background .15s,transform .1s}
.b-keys .b{position:absolute;top:0;height:62%;z-index:2;border-radius:0 0 .5cqw .5cqw;background:linear-gradient(#2c2c30,#0a0a0b);box-shadow:inset 0 -.6cqw 0 #000;transition:background .15s}
.b-keys .w.on{background:linear-gradient(#ffb3ad,#ff5a4f);transform:translateY(.2cqw)}
.b-keys .b.on{background:linear-gradient(#ff6b5f,#a3121a)}
.b-k{display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.b-k i{--v:.5;position:relative;width:7cqw;height:7cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#45454b,#0d0d0f 70%);box-shadow:0 .5cqw 1cqw rgba(0,0,0,.6);transition:box-shadow .3s}
.b-k i::after{content:"";position:absolute;left:50%;top:9%;width:.6cqw;height:34%;margin-left:-.3cqw;border-radius:.3cqw;background:#fff;transform-origin:50% 120%;transform:rotate(calc(-135deg + var(--v)*270deg))}
.b-k.act i{box-shadow:0 .5cqw 1cqw rgba(0,0,0,.6),0 0 3cqw rgba(255,255,255,.9)}
.b-k small{font:800 1.7cqw var(--sans);letter-spacing:.12em}
.b-knobs{display:flex;gap:3.4cqw;flex:1;justify-content:space-around}
.disp{position:relative;flex:none;display:flex;align-items:center;gap:2cqw;border-radius:1cqw;padding:0 2cqw;height:11cqw;background:#0b0b0c;box-shadow:inset 0 0 0 .4cqw #000,inset 0 0 3cqw rgba(0,0,0,.9);overflow:hidden}
.disp .seg{font:700 6.4cqw/1 var(--mono);letter-spacing:.06em;color:#ff2a1f;text-shadow:0 0 1.6cqw rgba(255,42,31,.8)}
.disp .nm{font:600 3cqw/1.1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.disp.swap .seg,.disp.swap .nm{animation:lcd .45s steps(4)}
@keyframes lcd{0%{filter:blur(2px) brightness(2)}50%{filter:brightness(.4)}100%{filter:none}}
.disp .ed{position:absolute;right:1.2cqw;top:1cqw;font:700 1.5cqw var(--mono);font-style:normal;color:#ff6b5f;opacity:0;transition:opacity .3s}
.disp.edited .ed{opacity:1}

/* rojo de escenario, con su piedra de pitch y su rueda */
.kb-nord .kb-body{background:linear-gradient(180deg,#e0262b,#b8141a 55%,#9e1016);border:1px solid #ff6a5f40}
.kb-nord .disp{width:46cqw}
.kb-nord .disp .nm{color:#ffd2cc}
.kb-nord .b-k small{color:#fff}
.kb-nord .leds{display:flex;flex-direction:column;gap:1.4cqw}
.kb-nord .leds i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#5a0d10;box-shadow:inset 0 0 0 .2cqw rgba(0,0,0,.4);transition:background .2s,box-shadow .2s}
.kb-nord .leds i.on{background:#ffe1dc;box-shadow:0 0 1.6cqw #fff}
.kb-nord .kb-bed{background:#7e0c11;margin:0 -3cqw;padding:0 3cqw;border-radius:0 0 2.4cqw 2.4cqw}

/* polifónico negro con laterales de madera */
.kb-rev2 .kb-body{background:linear-gradient(#26262a,#0f0f11);border:1px solid rgba(255,255,255,.08);margin:0 4.5cqw}
.kb-rev2 .cheek{position:absolute;top:0;bottom:0;width:4.6cqw;border-radius:1.6cqw;background:linear-gradient(90deg,#6b3d1e,#a8693a 40%,#7a4524);box-shadow:inset 0 0 1cqw rgba(0,0,0,.5)}
.kb-rev2 .cheek.l{left:-4.4cqw}.kb-rev2 .cheek.r{right:-4.4cqw}
.kb-rev2 .disp{width:40cqw;height:9cqw;background:#05070a}
.kb-rev2 .disp .seg{font-size:4cqw;color:#e8f0ff;text-shadow:0 0 1.2cqw rgba(160,200,255,.6)}
.kb-rev2 .disp .nm{color:#9fb6d9;font-size:2.6cqw}
.kb-rev2 .b-k i{width:5.4cqw;height:5.4cqw}
.kb-rev2 .b-k small{color:#bbb;font-size:1.5cqw}
.kb-rev2 .b-keys{height:18cqw}

/* sinte de bajo compacto */
.kb-bs2 .kb-body{background:linear-gradient(#3b3d42,#24262a);border:1px solid rgba(255,255,255,.1)}
.kb-bs2 .disp{width:30cqw;height:14cqw;justify-content:center}
.kb-bs2 .disp .seg{font-size:9cqw;color:#ff4a2a}
.kb-bs2 .big-k{flex:none;width:15cqw;height:15cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#55575d,#111 70%);box-shadow:0 0 0 1.2cqw #1a1b1e,0 .8cqw 1.6cqw rgba(0,0,0,.6);position:relative}
.kb-bs2 .big-k::after{content:"";position:absolute;left:50%;top:8%;width:1cqw;height:30%;margin-left:-.5cqw;background:#ff8a3c;border-radius:.5cqw}
.kb-bs2 .b-k i{width:9cqw;height:9cqw}
.kb-bs2 .b-k small{color:#bbb;font-size:2.4cqw}
.kb-bs2 .b-keys{height:30cqw}
.kb-bs2 .kb-wheels i{width:5.4cqw}

/* ---------- pedal Bluetooth de dos pulsadores ---------- */
.bt-pedal{position:relative;display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:linear-gradient(#1f1f22,#0c0c0d);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);width:max-content}
.bt-pedal .p-sw{width:clamp(54px,5vw,74px);height:clamp(40px,3.6vw,52px);border-radius:12px;background:linear-gradient(#3a3a3f,#18181b);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #000;transition:transform .12s,background .2s,box-shadow .2s}
.bt-pedal .p-sw.down{transform:translateY(3px);background:linear-gradient(#2b6fe0,#1747a6);box-shadow:0 0 24px rgba(60,140,255,.7)}
.bt-pedal .p-bt{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0b5bd3;color:#fff;box-shadow:0 0 14px rgba(40,120,255,.6)}
.bt-pedal .p-bt svg{width:18px;height:18px}
.bt-pedal.big{padding:14px;gap:14px;border-radius:20px}
.bt-pedal.big .p-sw{width:96px;height:64px;border-radius:14px}
.bt-pedal.big .p-bt{width:40px;height:40px}.bt-pedal.big .p-bt svg{width:24px;height:24px}
.cell-ped{justify-content:space-between!important;gap:18px;min-height:330px!important}
.cell-ped .bt-pedal{margin:34px auto 22px}
.cell-ped h3{margin-top:6px!important}
.cell-ped:hover .p-sw:last-child{background:linear-gradient(#2b6fe0,#1747a6);box-shadow:0 0 24px rgba(60,140,255,.7)}

/* ---------- sección «Edita tus sonidos» ---------- */
.edit-sec{background:radial-gradient(60% 50% at 80% 50%,rgba(227,38,45,.12),transparent 70%)}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.edit-grid .h2{margin:20px 0 22px;font-size:clamp(38px,5vw,72px)}
.perks{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:4px}
.perks li{padding:16px 0 16px 34px;border-top:1px solid var(--line);position:relative}
.perks li::before{content:"";position:absolute;left:4px;top:21px;width:14px;height:8px;border-left:2px solid var(--ks2);border-bottom:2px solid var(--ks2);transform:rotate(-45deg)}
.perks b{display:block;font-weight:600}
.perks span{color:var(--mute);font-size:15.5px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-col{border-radius:var(--r);padding:24px 20px;border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:12px}
.vs-col>small{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vs-col li{padding:11px 12px;border-radius:10px;font-size:14.5px;background:#1b1b1f;border:1px solid #2a2a2f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-col li b,.vs-prog b{font:700 11px var(--mono);background:#333;padding:3px 6px;border-radius:5px;margin-right:6px}
.before li{color:var(--mute);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.vs.in .before li:not(:first-child){opacity:.35;transform:scale(.97)}
.vs.in .before li:nth-child(2){transition-delay:.6s}.vs.in .before li:nth-child(3){transition-delay:.75s}.vs.in .before li:nth-child(4){transition-delay:.9s}.vs.in .before li:nth-child(5){transition-delay:1.05s}
.before li:not(:first-child){text-decoration:line-through;text-decoration-color:rgba(255,90,79,.6)}
.after{border-color:rgba(227,38,45,.4);background:linear-gradient(180deg,rgba(227,38,45,.12),var(--bg2))}
.vs-prog{padding:13px 14px;border-radius:12px;background:#c8161d;color:#fff;font-weight:600;box-shadow:0 10px 30px -8px rgba(227,38,45,.7)}
.vs-prog b{background:rgba(0,0,0,.3)}
.after li{display:flex;justify-content:space-between;gap:8px;margin-left:16px;position:relative;opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.after li::before{content:"";position:absolute;left:-12px;top:-10px;bottom:50%;width:9px;border-left:1.5px solid rgba(255,90,79,.5);border-bottom:1.5px solid rgba(255,90,79,.5);border-bottom-left-radius:6px}
.after li em{font-style:normal;font:600 12px var(--mono);color:var(--ks2)}
.vs.in .after li{opacity:1;transform:none}
.vs.in .after li:nth-child(1){transition-delay:.9s}.vs.in .after li:nth-child(2){transition-delay:1.05s}.vs.in .after li:nth-child(3){transition-delay:1.2s}.vs.in .after li:nth-child(4){transition-delay:1.35s}
.vs-count{margin-top:auto;padding-top:6px;font:600 13px var(--sans);color:var(--ink2)}
.before .vs-count{color:var(--mute)}
@media (max-width:980px){.edit-grid{grid-template-columns:1fr}}
@media (max-width:520px){.vs{grid-template-columns:1fr}}

/* ---------- compatibilidad: los probados, arriba y en verde ---------- */
.ctable tr.tested td{background:linear-gradient(90deg,rgba(48,209,88,.10),rgba(48,209,88,.02))}
.ctable tr.tested td:first-child{box-shadow:inset 3px 0 0 #30d158}
.live-ok{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font:700 12.5px var(--sans);letter-spacing:.02em;white-space:nowrap;color:#0b2914;background:linear-gradient(#5cf08a,#30d158);box-shadow:0 0 0 1px rgba(48,209,88,.5),0 6px 22px -6px rgba(48,209,88,.8)}

/* ---------- iPad más grande en el recorrido y en la portada ---------- */
.ks-hero .wrap{grid-template-columns:.72fr 1.28fr}
.stage{height:clamp(360px,48vw,700px)}
.stage .ipad{width:104%;right:-6%}
.tour{grid-template-columns:1.55fr .65fr}
#funciones .wrap{max-width:1440px}
@media (max-width:980px){.ks-hero .wrap{grid-template-columns:1fr}.stage .ipad{width:94%;right:0}}
@media (max-width:900px){.tour{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.scene{transform:none!important}}