/* Equipos: pedales, wah, cabezales, cajas y racks; perillas, interruptores y faders. CSS procedural + texturas SVG livianas. */

/* ================= controles ================= */
.ctl { display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 0; --lab: var(--c-ink, #e9dcc0); }
.klabel { max-width: 6.2em; font: 500 .62rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--lab); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.big .klabel { font-size: .72rem; max-width: 7.5em; }
.ctl.static { pointer-events: none; }

.knob { --ks: 3.2rem; position: relative; width: var(--ks); height: var(--ks); font-size: calc(var(--ks) * .1); touch-action: none; cursor: ns-resize; border-radius: 50%; outline: none; flex: none; }
.knob:focus-visible { outline: .14rem solid var(--amber); outline-offset: .18rem; }
.s-xs { --ks: 1.5rem; } .s-s { --ks: 2.3rem; } .s-m { --ks: 3.7rem; } .s-l { --ks: 4.7rem; }
.knob .ring { position: absolute; inset: 0; }
.knob .scale { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--scale-ink, #d8cfb8); overflow: visible; pointer-events: none; }
.knob .cap { position: absolute; left: 21%; top: 21%; width: 58%; height: 58%; border-radius: 50%; will-change: transform; }
.knob .cap::before, .knob .cap::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.knob .ind { position: absolute; z-index: 2; display: block; }
.knob.grab { cursor: grabbing; }
.typed { position: absolute; z-index: 20; left: 50%; top: 20%; transform: translateX(-50%); width: 3.6em; padding: .15em .3em; text-align: center; font: 500 1rem var(--f-label); color: #ffe7b8; background: #0b0a09; border: .08rem solid var(--amber); border-radius: .25rem; }
.ctl { position: relative; }

/* Fender: falda negra y domo cromado */
.k-fender .cap { background: radial-gradient(circle at 50% 38%, #3b3b3f 0, #17171a 55%, #050506 100%); box-shadow: 0 .3em .55em rgba(0,0,0,.8), inset 0 0 0 .1em #0a0a0b, inset 0 .12em .18em rgba(255,255,255,.16); }
.k-fender .cap::before { inset: 19%; background: conic-gradient(from 30deg, #f8f9fa, #868b92, #eceef0, #5d6269, #f8f9fa); box-shadow: 0 .1em .25em rgba(0,0,0,.7), inset 0 0 0 .08em rgba(0,0,0,.4); }
.k-fender .cap::after { inset: 19%; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.75), transparent 45%); }
.k-fender .ind { left: 50%; top: 4%; width: 9%; height: 19%; transform: translateX(-50%); background: #f5efdc; border-radius: .1em; box-shadow: 0 0 .2em rgba(255,255,255,.4); }
/* Marshall: falda negra, centro dorado y línea blanca */
.k-marshall .cap { background: radial-gradient(circle at 50% 35%, #313135, #0b0b0c 72%); box-shadow: 0 .3em .55em rgba(0,0,0,.8), inset 0 0 0 .1em #050505, inset 0 .12em .18em rgba(255,255,255,.14); }
.k-marshall .cap::before { inset: 17%; background: conic-gradient(from 0deg, #f6e3a4, #a98428, #fbecb8, #84631e, #f6e3a4); box-shadow: 0 .1em .2em rgba(0,0,0,.7), inset 0 0 0 .07em rgba(60,40,5,.6); }
.k-marshall .cap::after { inset: 17%; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.55), transparent 45%); }
.k-marshall .ind { left: 50%; top: 3%; width: 9%; height: 31%; transform: translateX(-50%); background: #f7f3e6; border-radius: .1em; }
/* cabeza de pollo */
.k-chicken .cap::before { inset: 10%; background: radial-gradient(circle at 40% 30%, #4a4a4e, #111 70%); box-shadow: 0 .3em .5em rgba(0,0,0,.8), inset 0 0 0 .08em #000; }
.k-chicken .ind { inset: -9% -2% -3%; background: linear-gradient(90deg, #cdbf9c, #fff9ea 42%, #a8997a); clip-path: polygon(50% 0, 63% 34%, 86% 92%, 14% 92%, 37% 34%); filter: drop-shadow(0 .12em .12em rgba(0,0,0,.6)); }
.k-chicken .cap::after { inset: 34%; background: radial-gradient(circle at 40% 35%, #555, #151515); z-index: 3; }
/* crema acanalada (tipo Vox) */
.k-vox .cap { background: radial-gradient(circle at 50% 36%, #fff8e2, #dccfa6 58%, #a8946a 100%); box-shadow: 0 .3em .55em rgba(0,0,0,.8), inset 0 0 0 .08em rgba(60,40,10,.6); }
.k-vox .cap::before { inset: 0; background: repeating-conic-gradient(rgba(60,40,10,.3) 0 3deg, transparent 3deg 9deg); -webkit-mask: radial-gradient(circle, transparent 68%, #000 70%); mask: radial-gradient(circle, transparent 68%, #000 70%); }
.k-vox .ind { left: 50%; top: 5%; width: 8%; height: 32%; transform: translateX(-50%); background: #1b1510; border-radius: .1em; }
/* metal negro con aro cromado (alta ganancia, bajo) */
.k-metal .cap { background: radial-gradient(circle at 50% 38%, #3a3b40, #0d0d0f 72%); box-shadow: 0 .3em .55em rgba(0,0,0,.8), 0 0 0 .1em #08080a, inset 0 0 0 .13em #b8bdc4, inset 0 0 0 .2em #4b4f55; }
.k-metal .cap::before { inset: 16%; background: repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 .06em, transparent .06em .14em); }
.k-metal .ind { left: 50%; top: 9%; width: 8%; height: 30%; transform: translateX(-50%); background: #f2f2f2; border-radius: .1em; box-shadow: 0 0 .25em rgba(255,255,255,.5); }
/* aluminio moleteado (pedales) */
.k-pedal .cap { background: conic-gradient(from 10deg, #fbfbfb, #9ba1a9, #eef0f2, #656b73, #fbfbfb 50%, #9ba1a9, #eef0f2, #656b73, #fbfbfb); box-shadow: 0 .25em .45em rgba(0,0,0,.75), 0 0 0 .07em rgba(0,0,0,.55); }
.k-pedal .cap::before { inset: 0; background: repeating-conic-gradient(rgba(0,0,0,.3) 0 3deg, transparent 3deg 7deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%); mask: radial-gradient(circle, transparent 66%, #000 68%); }
.k-pedal .cap::after { inset: 17%; background: radial-gradient(circle at 38% 32%, #f7f8f9, #8b9097 90%); box-shadow: inset 0 0 0 .05em rgba(0,0,0,.25); }
.k-pedal .ind { left: 50%; top: 3%; width: 12%; height: 33%; transform: translateX(-50%); background: #17171a; border-radius: .1em; }
/* aluminio liso (racks) */
.k-rack .cap { background: conic-gradient(from 0deg, #f1f3f5, #aeb3b9, #f6f7f8, #848990, #f1f3f5); box-shadow: 0 .25em .45em rgba(0,0,0,.75), 0 0 0 .07em rgba(0,0,0,.6); }
.k-rack .cap::after { inset: 14%; background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.8), transparent 55%); }
.k-rack .ind { left: 50%; top: 5%; width: 9%; height: 33%; transform: translateX(-50%); background: #151618; border-radius: .1em; }

/* selector con lectura */
.selctl { gap: .22em; }
.knob.sel .scale { color: var(--scale-ink, #d8cfb8); }
.readrow { display: flex; align-items: center; gap: .15rem; }
.readout { min-width: 3.1em; max-width: 5.4em; padding: .12rem .3rem .08rem; text-align: center; font: 1.05rem/1 var(--f-lcd); color: #ffb23e; background: radial-gradient(ellipse at 50% 0, #3a2206, #170c02); border-radius: .2rem; box-shadow: inset 0 .08rem .2rem #000, 0 0 0 .06rem #000; text-shadow: 0 0 .25rem rgba(255,160,40,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nudge { width: 1rem; height: 1.2rem; padding: 0; border: 0; background: none; color: var(--lab); font-size: .85rem; cursor: pointer; opacity: .8; }
.nudge:hover { opacity: 1; color: var(--amber); }

/* interruptor de palanca */
.togctl { gap: .25rem; }
.toggle { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .1rem .2rem; background: none; border: 0; cursor: pointer; }
.tg-lab { font: 500 .6rem/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--lab); opacity: .55; }
.toggle.up .tg-lab.hi, .toggle:not(.up) .tg-lab.lo { opacity: 1; }
.tg-slot { position: relative; width: 1.6rem; height: 2.6rem; border-radius: .8rem; background: linear-gradient(90deg, #050505, #26262a 50%, #050505); box-shadow: inset 0 .15rem .3rem #000, 0 .06rem 0 rgba(255,255,255,.2), 0 0 0 .14rem #8e939a, 0 0 0 .22rem #1a1b1d; }
.lever { position: absolute; left: 50%; bottom: 50%; width: .62rem; height: 1.15rem; margin-left: -.31rem; transform-origin: 50% 100%; transform: rotate(180deg); transition: transform .12s; border-radius: .3rem .3rem .1rem .1rem;
  background: linear-gradient(90deg, #7e848c, #fafbfc 40%, #8a9098 70%, #4e5359); box-shadow: 0 .15rem .25rem rgba(0,0,0,.6); }
.lever::before { content: ''; position: absolute; left: -.12rem; top: -.28rem; width: .86rem; height: .86rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b9bec5 45%, #5b6067); box-shadow: 0 .1rem .2rem rgba(0,0,0,.5); }
.toggle.up .lever { transform: rotate(0deg); }
.toggle:hover .tg-slot { box-shadow: inset 0 .15rem .3rem #000, 0 .06rem 0 rgba(255,255,255,.2), 0 0 0 .14rem #b0b5bc, 0 0 0 .22rem #1a1b1d; }

/* fader del EQ */
.fadctl { gap: .35rem; }
.fader { position: relative; width: 1.9rem; height: 8.6rem; cursor: ns-resize; touch-action: none; outline: none; }
.fader:focus-visible { outline: .14rem solid var(--amber); }
.f-track { position: absolute; left: 50%; top: .7rem; bottom: .7rem; width: .42rem; margin-left: -.21rem; border-radius: .3rem; background: linear-gradient(90deg, #000, #2b2b2e, #000); box-shadow: 0 0 0 .1rem #7d828a, 0 0 0 .18rem #0b0b0c, inset 0 0 .2rem #000; }
.f-track::before { content: ''; position: absolute; left: -.6rem; right: -.6rem; top: 0; bottom: 0; background: repeating-linear-gradient(180deg, rgba(233,220,192,.45) 0 .06rem, transparent .06rem 1.12rem); -webkit-mask: linear-gradient(90deg, #000 0 .35rem, transparent .35rem calc(100% - .35rem), #000 calc(100% - .35rem)); mask: linear-gradient(90deg, #000 0 .35rem, transparent .35rem calc(100% - .35rem), #000 calc(100% - .35rem)); }
.f-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--pct, 50%); border-radius: .3rem; background: linear-gradient(0deg, rgba(255,178,62,.0), rgba(255,178,62,.65)); }
.f-cap { position: absolute; left: 50%; width: 1.7rem; height: 1.05rem; margin-left: -.85rem; transform: translateY(50%); border-radius: .2rem; background: linear-gradient(180deg, #fafbfc, #9ca2aa 45%, #5d6269 55%, #b6bbc2); box-shadow: 0 .25rem .4rem rgba(0,0,0,.7), 0 0 0 .06rem #000; }
.f-cap i { position: absolute; left: .15rem; right: .15rem; top: 50%; height: .09rem; background: #111; }

/* ================= pedales ================= */
.dev { position: relative; flex: none; --scale-ink: var(--c-ink); }
.dev.mini.pedal, .dev.mini.wah { width: 5.5rem; height: 9.7rem; }
.dev.mini.amp { width: 13.6rem; height: 10.4rem; }
.dev.mini.cab { width: 8.7rem; height: 10.4rem; }
.dev.mini.rack { width: 5.9rem; height: 9.7rem; }
.slot::before { content: ''; position: absolute; left: -4%; right: -4%; bottom: .75rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.7), transparent 70%); z-index: 0; }
.slot::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: .9rem; height: 1.2rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,186,90,.55), transparent 70%); opacity: 0; transition: opacity .2s; z-index: 0; }
.slot.sel::after { opacity: 1; }
.slot > .dev { z-index: 1; transition: transform .16s, filter .2s; cursor: grab; }
.slot.sel > .dev { transform: translateY(-.45rem); filter: drop-shadow(0 0 .45rem rgba(255,190,90,.75)); }
.slot:hover > .dev { filter: brightness(1.08); }
.slot.sel:hover > .dev { filter: drop-shadow(0 0 .45rem rgba(255,190,90,.75)) brightness(1.06); }
.dev.off { filter: saturate(.6) brightness(.78); }
.slot.sel > .dev.off { filter: saturate(.6) brightness(.78) drop-shadow(0 0 .45rem rgba(255,190,90,.75)); }

.pedal .body, .wah .body {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: .75rem .3rem .5rem; border-radius: .55rem .55rem .6rem .6rem;
  background: url(../assets/speckle.svg) 0 0 / 6rem auto, linear-gradient(165deg, var(--c-light) 0%, var(--c-main) 40%, var(--c-dark) 100%);
  border: .1rem solid color-mix(in srgb, var(--c-dark) 50%, #000);
  box-shadow: inset 0 .12rem .1rem rgba(255,255,255,.4), inset 0 -.25rem .4rem rgba(0,0,0,.3), inset .12rem 0 .2rem rgba(255,255,255,.12), inset -.12rem 0 .2rem rgba(0,0,0,.25),
    0 .45rem 0 -.03rem color-mix(in srgb, var(--c-dark) 55%, #000), 0 .5rem 0 0 #050403, 0 1rem 1.1rem rgba(0,0,0,.75); }
.screw { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8eaed, #8b9097 55%, #3a3d41); box-shadow: 0 .06rem .1rem rgba(0,0,0,.7), inset 0 0 0 .04rem rgba(0,0,0,.35); }
.screw::after { content: ''; position: absolute; left: 12%; right: 12%; top: calc(50% - .04rem); height: .08rem; background: rgba(0,0,0,.65); transform: rotate(var(--rot, 35deg)); }
.screw.tl { left: .3rem; top: .3rem; --rot: 20deg; } .screw.tr { right: .3rem; top: .3rem; --rot: 70deg; } .screw.bl { left: .3rem; bottom: .3rem; --rot: 110deg; } .screw.br { right: .3rem; bottom: .3rem; --rot: 150deg; }
.pk { display: grid; grid-template-columns: repeat(var(--cols, 3), auto); justify-content: center; align-items: start; gap: .05rem .1rem; margin-top: .25rem; --lab: var(--c-ink); }
.pk .ctl { --lab: var(--c-ink); }
.engrave { margin-top: auto; padding: 0 .1rem; font: 600 .72rem/1.05 var(--f-label); letter-spacing: .07em; text-align: center; text-transform: uppercase; color: var(--c-ink); text-shadow: 0 .05rem 0 rgba(255,255,255,.14); overflow-wrap: anywhere; }
.foot { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: .45rem; }
.led { width: .55rem; height: .55rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a2a26, #2a0f0d 70%); box-shadow: 0 0 0 .09rem rgba(0,0,0,.65), inset 0 -.04rem .06rem rgba(0,0,0,.6); transition: all .15s; }
.dev.on .led { background: radial-gradient(circle at 35% 30%, #ffd0c8, #ff3a2c 50%, #a3150c); box-shadow: 0 0 0 .09rem rgba(0,0,0,.65), 0 0 .7rem #ff3a2c, 0 0 1.4rem rgba(255,58,44,.6); }
.stomp { position: relative; width: 2.35rem; height: 2.35rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, #fff 0, #e3e5e8 13%, #a6abb1 42%, #666a70 76%, #2f3135 100%);
  box-shadow: 0 0 0 .14rem rgba(0,0,0,.85), 0 0 0 .26rem #7b8087, 0 0 0 .34rem rgba(0,0,0,.85), 0 .45rem .55rem .25rem rgba(0,0,0,.6), inset 0 -.15rem .3rem rgba(0,0,0,.4); transition: transform .06s; }
.stomp .knurl { position: absolute; inset: .2rem; border-radius: 50%; background: repeating-conic-gradient(rgba(0,0,0,.18) 0 3deg, transparent 3deg 6deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); }
.stomp:active { transform: translateY(.12rem); }

/* wah: pedal de balancín con goma acanalada */
.wah .treadle { width: 100%; height: 3.5rem; border-radius: .35rem .35rem .25rem .25rem; position: relative; background: linear-gradient(180deg, #38383c, #101012); box-shadow: inset 0 .1rem .1rem rgba(255,255,255,.25), 0 .2rem .35rem rgba(0,0,0,.6); transform: perspective(14rem) rotateX(14deg); transform-origin: 50% 100%; }
.wah .ribs { position: absolute; inset: .3rem .3rem .25rem; background: repeating-linear-gradient(180deg, #0b0b0c 0 .17rem, #3b3b40 .17rem .26rem, #0b0b0c .26rem .42rem); border-radius: .15rem; }
.wah .body { padding-top: .45rem; }
.wah .pk { margin-top: .35rem; }
.wah .foot { margin-top: .3rem; }

/* ================= ampli (cabezal) ================= */
.amp .handle { position: absolute; left: 3.2rem; right: 3.2rem; top: 0; height: 1.1rem; border-radius: .7rem .7rem 0 0; background: linear-gradient(180deg, #2a241f, #0b0908); border: .14rem solid #050403; border-bottom: 0; box-shadow: inset 0 .12rem .12rem rgba(255,255,255,.16); }
.amp .handle::after { content: ''; position: absolute; left: .5rem; right: .5rem; top: .2rem; height: .22rem; border-radius: .2rem; background: rgba(0,0,0,.6); }
.amp .head { position: absolute; left: 0; right: 0; top: .85rem; bottom: .45rem; border-radius: .4rem; overflow: hidden; border: .1rem solid #050403;
  background: url(../assets/tolex.svg) 0 0 / 5rem auto, var(--c-main); background-blend-mode: soft-light, normal;
  box-shadow: inset 0 .15rem .15rem rgba(255,255,255,.14), inset 0 -.3rem .5rem rgba(0,0,0,.45), 0 .9rem 1.1rem rgba(0,0,0,.75); }
.amp .cornerL, .amp .cornerR, .cab .cornerL, .cab .cornerR { position: absolute; top: 0; bottom: 0; width: .55rem; z-index: 2; pointer-events: none; }
.amp .cornerL, .cab .cornerL { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.5), transparent); } .amp .cornerR, .cab .cornerR { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.5), transparent); }
.amp .panel { position: absolute; left: .55rem; right: .55rem; top: .5rem; height: 4rem; padding: .3rem .3rem .2rem; display: flex; flex-direction: column; border-radius: .2rem; --lab: var(--c-panel-ink); --scale-ink: var(--c-panel-ink);
  background: url(../assets/brushed.svg) 0 0 / 9rem auto, linear-gradient(180deg, var(--c-panel-light), var(--c-panel) 35%, var(--c-panel-dark));
  box-shadow: inset 0 .08rem 0 rgba(255,255,255,.55), inset 0 -.1rem .2rem rgba(0,0,0,.4), 0 .12rem .2rem rgba(0,0,0,.6), 0 0 0 .08rem rgba(0,0,0,.7); }
.amp .nameplate { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.amp .engrave { margin: 0; text-align: left; color: var(--c-panel-ink); font-size: .68rem; text-shadow: 0 .05rem 0 rgba(255,255,255,.3); white-space: nowrap; }
.dev.big.amp .nameplate { padding-right: 9rem; }
.brand-mini { font: 600 .5rem var(--f-label); letter-spacing: .2em; color: var(--c-panel-ink); opacity: .7; }
.amp .knobs { flex: 1; display: flex; justify-content: center; align-items: center; gap: .02rem; --lab: var(--c-panel-ink); }
.amp .knobs .ctl { --lab: var(--c-panel-ink); }
.pilot { position: absolute; right: .55rem; bottom: .2rem; width: .7rem; height: .7rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a2a26, #2a0f0d 70%); box-shadow: 0 0 0 .12rem #1b1b1d, 0 0 0 .2rem #8e939a; }
.dev.on .pilot { background: radial-gradient(circle at 35% 30%, #fff, var(--c-accent) 45%, color-mix(in srgb, var(--c-accent) 55%, #000)); box-shadow: 0 0 0 .12rem #1b1b1d, 0 0 0 .2rem #8e939a, 0 0 .8rem var(--c-accent), 0 0 1.6rem color-mix(in srgb, var(--c-accent) 60%, transparent); }
.amp .grille, .cab .grille { position: absolute; left: .55rem; right: .55rem; top: 4.85rem; bottom: .55rem; border-radius: .2rem; overflow: hidden; background-color: var(--c-grille); box-shadow: inset 0 .25rem .5rem rgba(0,0,0,.65), 0 0 0 .1rem var(--c-trim, #000), 0 0 0 .18rem rgba(0,0,0,.8); }
.amp .feet { position: absolute; left: 0; right: 0; bottom: -.4rem; display: flex; justify-content: space-between; padding: 0 1.2rem; }
.amp .feet i { width: 1.4rem; height: .5rem; border-radius: 0 0 .3rem .3rem; background: linear-gradient(180deg, #1a1a1c, #050505); }
.amp .head ~ .feet { z-index: -1; }

/* telas de rejilla */
.grille::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.g-black::before, .g-silver::before { background: repeating-linear-gradient(0deg, rgba(0,0,0,.38) 0 .08rem, transparent .08rem .22rem), repeating-linear-gradient(90deg, rgba(0,0,0,.38) 0 .08rem, transparent .08rem .22rem), linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%, rgba(0,0,0,.3)); }
.g-silver { background-image: url(../assets/speckle.svg); background-size: 3rem; }
.g-wicker::before { background: repeating-linear-gradient(45deg, rgba(0,0,0,.34) 0 .14rem, transparent .14rem .34rem), repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 .1rem, transparent .1rem .34rem), linear-gradient(180deg, rgba(255,255,255,.15), transparent 45%, rgba(0,0,0,.35)); }
.g-diamond::before { background: repeating-linear-gradient(60deg, rgba(0,0,0,.45) 0 .09rem, transparent .09rem .5rem), repeating-linear-gradient(-60deg, rgba(0,0,0,.45) 0 .09rem, transparent .09rem .5rem), linear-gradient(180deg, rgba(255,255,255,.14), transparent 50%, rgba(0,0,0,.3)); }
.g-mesh::before { background: radial-gradient(circle, rgba(0,0,0,.75) 0 .09rem, transparent .1rem) 0 0 / .26rem .26rem, linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%, rgba(0,0,0,.3)); }
.g-mesh { background-image: linear-gradient(135deg, var(--c-grille-light), var(--c-grille)); }
.piping { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .14rem color-mix(in srgb, var(--c-trim, #000) 70%, transparent); pointer-events: none; }
.spk { position: absolute; inset: .35rem; display: grid; gap: .3rem; place-items: center; }
.spk i { width: 100%; max-width: 3.6rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.6) 0 18%, rgba(0,0,0,.36) 19% 66%, rgba(0,0,0,.55) 67% 71%, transparent 73%); }
.spk.n1 { grid-template-columns: 1fr; } .spk.n2 { grid-template-columns: 1fr 1fr; } .spk.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .spk.n8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }

/* ================= caja ================= */
.cab .box { position: absolute; left: 0; right: 0; top: .15rem; bottom: .4rem; border-radius: .35rem; overflow: hidden; border: .1rem solid #050403;
  background: url(../assets/tolex.svg) 0 0 / 5rem auto, var(--c-main); background-blend-mode: soft-light, normal;
  box-shadow: inset 0 .15rem .15rem rgba(255,255,255,.12), inset 0 -.3rem .5rem rgba(0,0,0,.45), 0 .9rem 1.1rem rgba(0,0,0,.75); }
.cab .grille { top: .55rem; bottom: 2.1rem; left: .6rem; right: .6rem; }
.cab .cabplate { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: .15rem .65rem .12rem; border-radius: .15rem; min-width: 5rem;
  background: url(../assets/brushed.svg) 0 0 / 8rem auto, linear-gradient(135deg, #e9d28a, #b88f35 55%, #d9bb66); border: .06rem solid #3a2a0c; box-shadow: 0 .1rem .15rem rgba(0,0,0,.6); color: #20160a; }
.cab .cabname { font: 600 .64rem/1.05 var(--f-label); letter-spacing: .1em; white-space: nowrap; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; }
.cab .cabsub { font: 600 .5rem/1 var(--f-body); letter-spacing: .14em; opacity: .75; }
.cab.fam-bass .cabplate, .cab.fam-hot .cabplate, .cab.fam-nam .cabplate { background: url(../assets/brushed.svg) 0 0 / 8rem auto, linear-gradient(135deg, #e6e8ea, #9a9fa6 55%, #cfd2d6); border-color: #1a1b1d; color: #121315; }

/* ================= racks (EQ, GATE, S/R) ================= */
.rack .ear { position: absolute; top: 0; bottom: 0; width: .85rem; background: url(../assets/brushed.svg) 0 0 / 6rem auto, linear-gradient(90deg, #d4d8dc, #8c9198 50%, #c4c8cd); box-shadow: inset 0 .1rem 0 rgba(255,255,255,.6), 0 .6rem .9rem rgba(0,0,0,.6); }
.rack .ear.L { left: 0; border-radius: .3rem 0 0 .3rem; } .rack .ear.R { right: 0; border-radius: 0 .3rem .3rem 0; }
.rack .ear .screw { left: 50%; margin-left: -.25rem; right: auto; width: .46rem; height: .46rem; }
.rack .ear .screw.tl, .rack .ear .screw.tr { top: .45rem; } .rack .ear .screw.bl, .rack .ear .screw.br { bottom: .45rem; top: auto; }
.rack .ear .screw.tr, .rack .ear .screw.br { display: none; }
.rack .face { position: absolute; left: .85rem; right: .85rem; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: .5rem .2rem .45rem;
  background: url(../assets/speckle.svg) 0 0 / 5rem auto, linear-gradient(180deg, var(--c-light), var(--c-main) 30%, var(--c-dark)); box-shadow: inset 0 .1rem 0 rgba(255,255,255,.3), inset 0 -.2rem .4rem rgba(0,0,0,.4), 0 .55rem 0 -.02rem #050403, 0 1rem 1.1rem rgba(0,0,0,.7); --lab: var(--c-ink); --scale-ink: var(--c-ink); }
.rack .rk-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: 0 .1rem .25rem; border-bottom: .08rem solid var(--c-accent); }
.rack .engrave { margin: 0; text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .05em; line-height: 1.05; color: var(--c-ink); text-shadow: 0 .06rem 0 rgba(0,0,0,.55); }   /* antes .62rem en color de acento: ilegible en el escenario */
.rack .rk-ctl { flex: 1; display: grid; grid-template-columns: repeat(2, auto); gap: .3rem .1rem; align-content: center; justify-content: center; --lab: var(--c-ink); }
.rack .rk-ctl.eq { display: flex; }
.rack .rk-ctl .ctl { --lab: var(--c-ink); }
.rack .rk-foot { margin-top: auto; } .rack .rk-foot .stomp { width: 1.8rem; height: 1.8rem; }
.bars { display: flex; align-items: flex-end; gap: .13rem; height: 4.2rem; padding: .2rem .2rem .1rem; border-radius: .15rem; background: rgba(0,0,0,.35); box-shadow: inset 0 .1rem .2rem #000; }
.bar { position: relative; width: .22rem; height: 100%; background: rgba(255,255,255,.1); border-radius: .1rem; }
.bar::after { content: ''; position: absolute; left: -.08rem; right: -.08rem; bottom: calc(var(--v, 50%) - .12rem); height: .24rem; border-radius: .06rem; background: linear-gradient(180deg, #f4f5f6, #8d939a); box-shadow: 0 .06rem .08rem #000; }

/* ================= panel grande (modo editor) ================= */
.dev.big { --lab: var(--c-ink); }
.dev.big.pedal, .dev.big.wah { width: calc(var(--cols, 3) * 5.6rem + 2.4rem); min-width: 13rem; height: 18.4rem; max-height: 100%; }
.dev.big .body { padding: 1.1rem 1rem .9rem; }
.dev.big .pk { gap: .9rem .35rem; margin-top: .5rem; }
.dev.big .pk .ctl { min-width: 5.2rem; }
.dev.big .engrave { font-size: 1.35rem; margin-top: auto; padding-top: .5rem; }
.dev.big .stomp { width: 3.8rem; height: 3.8rem; }
.dev.big .led { width: .8rem; height: .8rem; }
.dev.big .screw { width: .7rem; height: .7rem; }
.dev.big .wah .treadle, .dev.big.wah .treadle { height: 4rem; }
.dev.big.wah { height: 18.4rem; }
.dev.big.wah .ribs { inset: .4rem .45rem .35rem; }
.dev.big .foot { gap: .5rem; margin-top: .7rem; }
.dev.big .tg-lab { font-size: .72rem; }

.dev.big.amp { width: min(100%, 47rem); height: 18.4rem; }
.dev.big.amp .handle { left: 8rem; right: 8rem; height: 1.6rem; border-radius: 1rem 1rem 0 0; }
.dev.big.amp .head { top: 1.3rem; bottom: 0; border-radius: .6rem; }
.dev.big.amp .panel { top: .9rem; left: 1rem; right: 1rem; height: 10.6rem; padding: .7rem 1rem .6rem; }
.dev.big.amp .engrave { font-size: 1.35rem; letter-spacing: .1em; }
.dev.big.amp .dev.big.amp .nameplate { padding-right: 9rem; }
.brand-mini { font-size: .9rem; }
.dev.big.amp .knobs { flex-wrap: wrap; align-content: center; justify-content: space-around; gap: .8rem .2rem; padding-top: 1rem; }
.dev.big.amp .knobs .ctl { min-width: 4.8rem; }
.dev.big.amp .power { right: 1rem; top: .45rem; bottom: auto; flex-direction: row; gap: .7rem; }
.dev.big.amp .power .klabel { order: -1; font-size: .7rem; }
.dev.big.amp .power .rocker { width: 1.7rem; height: 2.2rem; }
.dev.big.amp .power .rocker i { height: .9rem; }
.dev.big .power { position: absolute; right: 1rem; bottom: .8rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.dev.big .power .pilot { position: static; width: 1.2rem; height: 1.2rem; }
.dev.big.amp .grille { top: 12.4rem; bottom: .9rem; left: 1rem; right: 1rem; }
.rocker { position: relative; width: 2.1rem; height: 3rem; padding: 0; border: 0; border-radius: .3rem; cursor: pointer; background: linear-gradient(180deg, #151517, #050506); box-shadow: 0 0 0 .12rem #8e939a, 0 0 0 .2rem #1a1b1d, 0 .3rem .5rem rgba(0,0,0,.6); }
.rocker i { position: absolute; left: .15rem; right: .15rem; height: 1.25rem; border-radius: .2rem; background: linear-gradient(180deg, #d94a3a, #8a2217); box-shadow: 0 .1rem .2rem rgba(0,0,0,.6); top: .2rem; transition: all .1s; }
.rocker[aria-checked="false"] i { top: auto; bottom: .2rem; background: linear-gradient(180deg, #55575c, #2c2e32); }
.dev.big .power .klabel { color: var(--c-panel-ink, var(--c-ink)); }
.dev.big.cab .power .klabel, .dev.big.rack .power .klabel { color: var(--c-ink); }

.dev.big.cab { width: min(100%, 40rem); height: 18.4rem; }
.dev.big.cab .box { top: .3rem; bottom: .3rem; }
.dev.big.cab .cabctl { position: absolute; left: 1rem; right: 1rem; top: .9rem; height: 9rem; padding: .7rem 4.6rem .6rem 1rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: .25rem; --lab: var(--c-panel-ink); --scale-ink: var(--c-panel-ink);
  background: url(../assets/brushed.svg) 0 0 / 9rem auto, linear-gradient(180deg, var(--c-panel-light), var(--c-panel) 35%, var(--c-panel-dark)); box-shadow: inset 0 .08rem 0 rgba(255,255,255,.55), 0 .12rem .2rem rgba(0,0,0,.6), 0 0 0 .08rem rgba(0,0,0,.7); }
.dev.big.cab .cabctl .ctl { --lab: var(--c-panel-ink); }
.dev.big.cab .power { right: .9rem; bottom: auto; top: 2rem; }
.dev.big.cab .power .klabel { color: var(--c-panel-ink); }
.dev.big.cab .grille { top: 10.8rem; bottom: 3rem; left: 1rem; right: 1rem; }
.dev.big .spk { grid-template-rows: 1fr !important; grid-template-columns: repeat(var(--n, 2), 1fr) !important; }
.dev.big .spk.n1 { --n: 1; } .dev.big .spk.n2 { --n: 2; } .dev.big .spk.n4 { --n: 4; } .dev.big .spk.n8 { --n: 8; }
.dev.big .spk i { width: auto; height: 96%; max-width: 100%; }
.dev.big.cab .cabplate { bottom: .7rem; padding: .25rem 1rem .2rem; }
.dev.big.cab .cabname { font-size: .95rem; max-width: 20rem; } .dev.big.cab .cabsub { font-size: .66rem; }
.dev.big .spk i { max-width: 5.5rem; }
.dev.big.cab .spk { inset: .3rem; }

.dev.big.rack { width: min(100%, 44rem); height: 18.4rem; }
.dev.big.rack .ear { width: 1.6rem; } .dev.big.rack .face { left: 1.6rem; right: 1.6rem; padding: 1rem 1.2rem .9rem; }
.dev.big.rack .engrave { font-size: 1.4rem; letter-spacing: .07em; }
.dev.big.rack .rk-head { padding-bottom: .5rem; border-bottom-width: .12rem; }
.dev.big.rack .rk-head .power { position: static; flex-direction: row; gap: .8rem; }
.dev.big.rack .rk-head .power .pilot { order: 2; }
.dev.big.rack .rk-head .power .klabel { display: none; }
.dev.big.rack .rk-head .rocker { width: 1.7rem; height: 2.2rem; }
.dev.big.rack .rk-ctl { grid-template-columns: repeat(auto-fit, minmax(5rem, auto)); gap: 1.2rem .8rem; padding-top: .8rem; }
.dev.big.rack .rk-ctl.eq { display: flex; justify-content: center; align-items: flex-end; gap: .35rem; flex-wrap: nowrap; }
.dev.big.rack .rk-ctl.eq .ctl { min-width: 2.4rem; }
.dev.big.rack .rk-ctl.eq .fader { width: 2.4rem; height: 10rem; }
.dev.big.rack .rk-ctl.eq .klabel { font-size: .66rem; max-width: 3.2em; }
.dev.big.rack .screw { width: .8rem; height: .8rem; }
.dev.big.rack .ear .screw { margin-left: -.4rem; }