/* MIDI GENERATOR INMERSIVO (2026-10-11). Un estudio moderno de noche con toque wellness (incienso, plantas, velas):
   las progresiones son cartas de vidrio sobre la ventana, la pantalla muestra la elegida como piano roll y las teclas
   del controlador prenden el acorde que va. El generador de index.html no cambia: esto es solo el escenario. */
/* overflow:clip (no hidden) para que enfocar o tocar algo a medio cortar (un chip de sonido, una carta) nunca corra el
   escenario de costado: con hidden el navegador lo puede scrollear por codigo y la escena quedaba corrida */
.escenario{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;overflow:clip;z-index:1;background:#050b0c;
  margin-top:calc(-1 * var(--nav-h,64px))}
.esc-fondo,.esc-fondo img{position:absolute;inset:0;width:100%;height:100%}
.esc-fondo img{object-fit:cover;object-position:center;opacity:0;transition:opacity 1s ease}
.esc-fondo img.ver{opacity:1}
.esc-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,10,12,.72) 0%,rgba(3,10,12,.34) 22%,rgba(3,10,12,.06) 40%,rgba(3,10,12,0) 60%,rgba(3,10,12,0) 84%,rgba(3,10,12,.7) 100%)}
#escFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.esc-marco{position:absolute;pointer-events:none;z-index:1}

/* la pantalla del estudio: el piano roll de la progresion elegida */
.esc-pantalla{position:absolute;border-radius:4px;opacity:0;transition:opacity .7s ease;box-shadow:0 0 34px rgba(45,212,191,.16)}
.esc-pantalla.ver{opacity:1}

/* titulo */
.esc-cab{position:absolute;left:clamp(16px,4vw,56px);top:calc(var(--nav-h,64px) + 18px);z-index:3;max-width:560px}
.esc-cab .label{color:rgba(233,226,207,.72);margin-bottom:.35rem}
.esc-cab h1{font-size:clamp(1.55rem,3.2vw,2.5rem);margin:0 0 .2rem;line-height:1.15}
.esc-sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1rem,1.25vw,1.3rem);
  color:#e3d6b6;text-shadow:0 3px 18px rgba(0,0,0,.75)}

/* las cartas: una fila de 4 sobre la ventana (con flechas) en pantallas anchas, una lista en el telefono */
.esc-cartas{position:absolute;left:50%;transform:translateX(-50%);z-index:3;width:min(1340px,calc(100% - 32px));
  display:flex;flex-direction:column;top:30%;height:180px}
.esc-cartas-cab{display:flex;justify-content:center;align-items:center;gap:1rem;height:22px;flex:0 0 22px;
  font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,226,207,.78);
  text-shadow:0 2px 10px rgba(0,0,0,.9)}
.esc-link{background:none;border:0;border-bottom:1px solid rgba(242,207,99,.5);color:#f2cf63;cursor:pointer;font:inherit;letter-spacing:inherit;
  text-transform:inherit;padding:0 0 1px}
.esc-link:hover{color:#ffe7a3}
.esc-carril{flex:1;min-height:0;display:flex;align-items:center;gap:.6rem}
.esc-flecha{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(212,168,67,.45);background:rgba(6,16,17,.55);
  color:#f2cf63;font-size:1.5rem;line-height:1;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;padding-bottom:3px;transition:opacity .2s,background .2s}
.esc-flecha:hover{background:rgba(212,168,67,.14)}
.esc-flecha:disabled{opacity:.3;cursor:default}
.esc-cartas [hidden]{display:none!important}
.esc-pista{flex:1;min-width:0;height:100%;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:6px 6px 8px;align-items:stretch}
.esc-pista::-webkit-scrollbar{display:none}
.esc-vacio{margin:auto;max-width:640px;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1rem,1.15vw,1.25rem);
  color:#e9e2cf;line-height:1.35;background:rgba(6,16,17,.5);border:1px solid rgba(212,168,67,.3);border-radius:16px;padding:.75rem 1.3rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.esc-vacio b{color:#f2cf63;font-weight:600}

.carta{position:relative;flex:0 0 calc((100% - (var(--por, 4) - 1) * 16px) / var(--por, 4));scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;
  gap:.4rem;text-align:left;cursor:pointer;color:#e9e2cf;font:inherit;padding:14px 18px 12px;border-radius:16px;
  background:rgba(10,14,12,.58);border:1px solid rgba(212,168,67,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,.45);transition:border-color .3s,box-shadow .3s,background .3s,transform .3s;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.carta:hover{border-color:rgba(242,207,99,.6)}
.carta:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
.carta.on{border-color:#f2cf63;background:rgba(28,22,10,.64);
  box-shadow:0 0 0 1px rgba(242,207,99,.5),0 0 36px rgba(242,207,99,.26),0 20px 50px rgba(0,0,0,.45)}
.c-acordes{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:var(--fs,24px);line-height:1.24;letter-spacing:.01em;
  color:#e9e2cf;overflow:hidden;padding-right:2.2rem;flex:1 1 auto;min-height:0}
.c-acordes .ac{transition:color .3s,text-shadow .3s;white-space:nowrap}
.c-acordes .pt{color:rgba(233,226,207,.55)}
.c-acordes .ac.suena{color:#f2cf63;text-shadow:0 0 14px rgba(242,207,99,.55)}
.b{font-family:'Segoe UI Symbol','Cambria Math',serif;font-weight:400;font-size:.86em}
.c-datos{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-family:'Share Tech Mono',monospace;font-size:.6rem;
  letter-spacing:.14em;color:#9fb0ab;white-space:nowrap}
.c-datos em{color:#f2cf63;font-style:normal}
.c-num{position:absolute;top:12px;right:14px;font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.12em;color:rgba(233,226,207,.5)}
.carta.on .c-num{color:#f2cf63}

/* barra de vidrio */
.esc-barra{position:absolute;left:50%;bottom:clamp(14px,3vh,34px);transform:translateX(-50%);z-index:4;width:max-content;max-width:calc(100% - 24px);
  background:rgba(6,16,17,.55);border:1px solid rgba(212,168,67,.3);border-radius:22px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,240,210,.1);padding:.75rem 1rem .45rem}
.esc-fila{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center}
.esc-chips{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:center}
.chip{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-radius:999px;border:1px solid rgba(217,201,163,.25);
  color:#cfc6b0;background:rgba(255,255,255,.035);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chip:hover{border-color:rgba(242,207,99,.55)}
button.chip{font-family:'Share Tech Mono',monospace}
.chip.on{border-color:#f2cf63;color:#1a1408;background:linear-gradient(180deg,#f2cf63,#d4a843);box-shadow:0 0 22px rgba(242,207,99,.3)}
.chip-num{cursor:default}
.chip-num input{width:3.4ch;background:transparent;border:0;border-bottom:1px solid rgba(242,207,99,.45);color:#f2cf63;font:inherit;
  letter-spacing:.06em;text-align:center;outline:none;padding:0 0 2px;text-transform:none}
.chip-num input:focus{border-bottom-color:#f2cf63}
#escSeed{width:8ch}
#escSeed::placeholder{color:rgba(233,226,207,.5);text-transform:uppercase;letter-spacing:.12em}
.chip-paso{background:none;border:0;color:#f2cf63;font-size:.95rem;line-height:1;cursor:pointer;padding:0 .2rem;font-family:inherit}
.chip-paso:hover{color:#ffe7a3}
.esc-sep{width:1px;height:30px;background:rgba(212,168,67,.3)}
.esc-acciones{display:flex;align-items:center;gap:.55rem}
.esc-barra .generate-btn{width:auto;margin:0;border:0;border-radius:999px;padding:.82rem 1.6rem;white-space:nowrap;
  background:linear-gradient(180deg,#f2cf63,#d4a843);color:#1a1408;font-family:'Cinzel',serif;font-weight:600;font-size:.84rem;letter-spacing:.14em;
  box-shadow:0 0 30px rgba(242,207,99,.32)}
.esc-barra .generate-btn:hover{background:linear-gradient(180deg,#ffe08a,#e0b350);box-shadow:0 0 42px rgba(242,207,99,.5)}
.esc-barra .generate-btn.loading{animation:esc-oro 1.4s ease-in-out infinite}
@keyframes esc-oro{0%,100%{box-shadow:0 0 18px rgba(242,207,99,.3)}50%{box-shadow:0 0 46px rgba(242,207,99,.65)}}
.esc-barra .download-btn{display:inline-flex;align-items:center;gap:.3rem;width:auto;margin:0;padding:.74rem 1.15rem;border-radius:999px;
  border:1px solid rgba(212,168,67,.7);color:#f2cf63;font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap;background:transparent}
.esc-barra .download-btn:hover{background:rgba(212,168,67,.12)}
.download-btn.esc-espera{opacity:.42;pointer-events:none}
.esc-barra .status-bar{background:none;border:0;border-radius:0;padding:.38rem 0 0;margin:0;justify-content:center;font-size:.56rem;
  color:rgba(233,226,207,.66);letter-spacing:.06em;min-width:0}
.esc-barra .status-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* rotulos cortos ("Generate", "MIDI ZIP") cuando el ancho no alcanza, y barra por encima del chat cuando ni asi entra al lado */
.esc-barra.corta .esc-largo{display:none}
.esc-barra.alta{bottom:98px}
/* en el telefono el estado (Done, errores) vive en la cabecera de la lista */
.esc-cartas-cab .status-bar{background:none;border:0;border-radius:0;padding:0;margin:0;flex:1;min-width:0;justify-content:flex-start;
  font-size:.56rem;letter-spacing:.06em;text-transform:none;color:rgba(233,226,207,.82)}
.esc-cartas-cab .status-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* barra en dos filas cuando el ancho no alcanza al lado del chat del sitio (tablets, laptops chicas) */
.esc-barra.compacta{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.9rem;row-gap:.45rem;padding:.6rem .9rem}
.esc-barra.compacta .esc-fila{display:contents}
.esc-barra.compacta .esc-chips{grid-column:1 / -1;flex-wrap:nowrap}
.esc-barra.compacta .esc-sep{display:none}
.esc-barra.compacta .esc-largo{display:none}
.esc-barra.compacta .status-bar{padding:0;justify-content:flex-start}

/* cajones: All settings (los paneles de siempre) y All progressions (la tabla de siempre) */
.esc-btn{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#f2cf63;cursor:pointer;
  background:transparent;border:1px solid rgba(212,168,67,.55);border-radius:999px;padding:.5rem 1rem;white-space:nowrap}
.esc-btn:hover{background:rgba(212,168,67,.1)}
.esc-cajon{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:80vh;overflow:auto;transform:translateY(105%);visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s;
  background:rgba(8,14,16,.95);border-top:1px solid rgba(212,168,67,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:1rem clamp(12px,3vw,40px) 1.6rem;box-shadow:0 -30px 80px rgba(0,0,0,.6)}
.esc-cajon.abierto{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.esc-cajon-cab{display:flex;justify-content:space-between;align-items:center;gap:.8rem;max-width:760px;margin:0 auto .6rem}
.esc-cajon-cab>span:first-child{font-family:'Cinzel',serif;font-size:1.05rem;letter-spacing:.06em;color:#e9e2cf}
.esc-cajon-acc{display:flex;gap:.5rem}
.esc-cajon .midi-page{padding:0 0 1rem;max-width:760px}
.esc-cajon .panel{background:rgba(13,22,24,.85)}
.esc-nada{font-size:.8rem;color:var(--text-dim,#5a7a78);text-align:center;padding:1.5rem 0}
.esc-cajon .results-scroll{max-height:none}
.esc-cajon .results-table td{font-size:.66rem}
.esc-cajon .results-table tbody tr{cursor:pointer;transition:background .2s}
.esc-cajon .results-table tbody tr:hover{background:rgba(45,212,191,.06)}
.esc-cajon .results-table tbody tr.esc-fila-on{background:rgba(212,168,67,.1)}
.esc-cajon .results-table tbody tr.esc-fila-on td{color:#f2cf63}

/* pantallas bajas: el subtitulo cede su lugar a las cartas */
@media (max-height:820px) and (min-width:761px){.esc-sub{display:none}}

/* telefono: imagen vertical, lista en lugar de fila, barra por encima del chat del sitio (boton de 64 px a 20 px del borde, con halo de 6) */
@media (max-width:760px){
  .esc-cab{top:calc(var(--nav-h,64px) + 10px)}
  .esc-cab .label{font-size:.52rem;margin-bottom:.2rem}
  .esc-cab h1{font-size:1.45rem}
  .esc-sub{display:none}
  .esc-velo{background:linear-gradient(180deg,rgba(3,10,12,.8) 0%,rgba(3,10,12,.45) 22%,rgba(3,10,12,.1) 40%,rgba(3,10,12,0) 50%,rgba(3,10,12,0) 76%,rgba(3,10,12,.75) 100%)}
  .esc-cartas{width:calc(100% - 24px)}
  .esc-cartas-cab{justify-content:space-between;padding:0 4px}
  #escCuenta{display:none}
  .c-acordes{flex:0 0 auto}
  .esc-flecha{display:none!important}
  .esc-pista{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;gap:8px;padding:4px 2px 6px;
    -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
  .carta{flex:0 0 auto;width:100%;padding:10px 14px 9px;gap:.3rem;border-radius:13px}
  .c-acordes{font-size:1.08rem;padding-right:2.4rem}
  .c-acordes .ac{white-space:normal}
  .c-num{top:10px;right:12px}
  .c-datos{font-size:.54rem;letter-spacing:.1em}
  .esc-vacio{font-size:1rem;padding:.8rem 1rem}
  .esc-barra{bottom:98px;width:calc(100% - 24px);padding:.5rem .5rem .3rem;border-radius:18px}
  .esc-fila{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.45rem}
  .esc-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-bottom:1px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .esc-chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:.5rem .75rem;font-size:.56rem}
  .esc-sep{display:none}
  .esc-acciones .generate-btn{flex:1 1 auto;min-width:0;padding:.72rem .8rem;font-size:.76rem;letter-spacing:.12em}
  .esc-barra .download-btn{flex:0 0 auto}
  .esc-barra .download-btn{padding:.68rem .9rem;font-size:.56rem}
  .esc-largo{display:none}
  .esc-barra .status-bar{font-size:.5rem;padding-top:.3rem}
  .esc-cajon{max-height:84vh;padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){
  .esc-fondo img,.esc-pantalla,.carta,.esc-cajon,.c-acordes .ac{transition:none}
  .esc-pista{scroll-behavior:auto}
  .esc-barra .generate-btn.loading{animation:none}
}
/* pantallas bajas (telefono acostado): sin alto minimo, titulo compacto; si igual no entra, el JS alarga el escenario */
@media (max-height:520px) and (orientation:landscape){
  .escenario{min-height:0}
  .esc-cab .label,.esc-sub{display:none}
  .esc-cab h1{font-size:1.15rem}
}

/* QUIEN NO COMPRO (2026-10-11, Mariano: "si"): gate.js le muestra la tarjeta "Get Access" en vez del estudio. La tarjeta
   va sobre el estudio desenfocado, asi se ve lo que trae. Solo estilo, desde esta pagina: gate.js (compartido con
   Sanctuary) no se toca y el acceso sigue igual. */
#aa-gate{position:relative;overflow:hidden;isolation:isolate}
#aa-gate::before{content:"";position:absolute;inset:-40px;z-index:0;background:url(/midi-generator/escenas/estudio-h.webp) center/cover no-repeat;
  filter:blur(9px) brightness(.62) saturate(1.1)}
#aa-gate::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 70% at 50% 50%,rgba(4,10,11,.15),rgba(4,10,11,.7))}
@media (max-aspect-ratio:9/10){#aa-gate::before{background-image:url(/midi-generator/escenas/estudio-v.webp)}}
#aa-gate > div{position:relative;z-index:2}
#aa-gate > div > div{background:rgba(6,16,17,.62)!important;border:1px solid rgba(212,168,67,.38)!important;border-radius:18px!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
#aa-gate > div > div p{color:rgba(233,226,207,.78)!important}

/* TITULO LEGIBLE SOBRE ESCENAS CLARAS (2026-10-12, Mariano: "se pierde un poco los colores del titulo en el fondo").
   Halo oscuro suave SOLO detras del bloque del titulo (el resto de la escena queda igual de luminoso) + sombra
   con filter, que respeta el degrade del texto (text-shadow se veria a traves de las letras transparentes). */
.esc-cab::before{content:"";position:absolute;inset:-34px -80px -30px -56px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,10,11,.62),rgba(4,10,11,.32) 58%,rgba(4,10,11,0))}
.esc-cab h1,.esc-cab .bw-title{filter:drop-shadow(0 2px 6px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(0,0,0,.45))}

/* SONIDO (2026-10-12, Mariano: "al MIDI generator pongamosle el preset bar de Sanctuary para que se puedan escuchar ahi
   mismo"): una fila arriba de la barra de vidrio con Listen, la tira de sonidos de Sanctuary, All sounds y volumen.
   width:0 + min-width:100% hace que la fila no ensanche la barra: el ancho lo sigue mandando la fila de siempre. */
.esc-sonido{display:flex;align-items:center;gap:.55rem;width:0;min-width:100%;padding:0 0 .55rem;margin:0 0 .55rem;
  border-bottom:1px solid rgba(212,168,67,.16)}
.sn-play{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;height:34px;padding:0 1.05rem 0 .9rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(45,212,191,.62);background:rgba(45,212,191,.09);color:#8af0e1;font-family:'Share Tech Mono',monospace;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.sn-play:hover{background:rgba(45,212,191,.16);box-shadow:0 0 22px rgba(45,212,191,.22)}
.sn-play:disabled{opacity:.38;cursor:default;box-shadow:none;background:rgba(45,212,191,.05)}
.sn-play.on{background:linear-gradient(180deg,#6ff0dc,#2dd4bf);border-color:#6ff0dc;color:#032420;box-shadow:0 0 26px rgba(45,212,191,.4)}
.sn-ico{display:inline-block;width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.sn-play.on .sn-ico{width:9px;height:9px;border:0;border-radius:1.5px;background:currentColor}
.sn-play.cargando .sn-ico{width:11px;height:11px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sn-gira .8s linear infinite}
@keyframes sn-gira{to{transform:rotate(360deg)}}
.sn-lbl{flex:0 0 auto;font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,226,207,.55)}
.sn-pista{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.4rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-behavior:smooth;padding:2px 30px 2px 10px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 38px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 38px),transparent)}
.sn-pista::-webkit-scrollbar{display:none}
.sn-chip{flex:0 0 auto}
.sn-chip.bloq{opacity:.5}
.sn-chip.bloq:hover{opacity:.78}
.sn-candado{display:none;width:9px;height:11px;fill:none;stroke:#f2cf63;stroke-width:1.3}
.sn-sabe .sn-chip.bloq .sn-candado{display:inline-block}
a.sn-unlock{flex:0 0 auto;color:#f2cf63;border-color:rgba(242,207,99,.5);text-decoration:none}
a.sn-unlock:hover{background:rgba(242,207,99,.1)}
.sn-todos{flex:0 0 auto;font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#f2cf63;cursor:pointer;
  background:transparent;border:1px solid rgba(212,168,67,.5);border-radius:999px;padding:.5rem .85rem;white-space:nowrap}
.sn-todos:hover{background:rgba(212,168,67,.1)}
.sn-vol{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;color:#cfc6b0;cursor:pointer}
.sn-vol-ico{width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h2.6L8.6 3v10L5.1 10H2.5z' fill='%23000'/%3E%3Cpath d='M10.8 5.6a3.4 3.4 0 0 1 0 4.8M12.7 3.8a6 6 0 0 1 0 8.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h2.6L8.6 3v10L5.1 10H2.5z' fill='%23000'/%3E%3Cpath d='M10.8 5.6a3.4 3.4 0 0 1 0 4.8M12.7 3.8a6 6 0 0 1 0 8.4'/%3E%3C/svg%3E") center/contain no-repeat}
.sn-vol input{-webkit-appearance:none;appearance:none;width:86px;height:20px;margin:0;background:transparent;cursor:pointer}
.sn-vol input::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,#f2cf63 var(--v,80%),rgba(233,226,207,.2) var(--v,80%))}
.sn-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border:0;border-radius:50%;background:#f2cf63;
  box-shadow:0 0 10px rgba(242,207,99,.55)}
.sn-vol input::-moz-range-track{height:3px;border-radius:2px;background:rgba(233,226,207,.2)}
.sn-vol input::-moz-range-progress{height:3px;border-radius:2px;background:#f2cf63}
.sn-vol input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#f2cf63;box-shadow:0 0 10px rgba(242,207,99,.55)}
.sn-vol input:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
/* el aviso de un sonido con candado: sobre la barra, nunca encima de las cartas ni de los botones */
.sn-aviso{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);z-index:6;width:max-content;max-width:min(560px,calc(100vw - 32px));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem .8rem;padding:.6rem 1.1rem;border-radius:14px;
  background:rgba(6,16,17,.88);border:1px solid rgba(212,168,67,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.05rem;color:#e9e2cf;text-align:center}
.sn-aviso[hidden]{display:none}
.sn-aviso a{color:#f2cf63;font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;border-bottom:1px solid rgba(242,207,99,.5);padding-bottom:1px}
/* la carta que suena lleva una nota junto a su numero */
.esc-sonando .carta.on .c-num::before{content:"\266A  ";color:#2dd4bf}
/* el cajon All sounds: la biblioteca por categoria, como Sanctuary */
.sn-cajon-cuerpo{max-width:760px;margin:0 auto}
.sn-cajon-nota{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.05rem;color:#e3d6b6;margin:.1rem 0 .4rem}
.sn-cajon-nota a{color:#f2cf63;font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid rgba(242,207,99,.5);white-space:nowrap}
.sn-grupo{margin:.85rem 0 0}
.sn-grupo-tit{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,226,207,.62);margin:0 0 .45rem}
.sn-grupo-tit span{color:rgba(233,226,207,.38)}
.sn-grupo-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.sn-vol-cajon{margin-right:.3rem}
/* pantallas anchas: la fila va en la linea de la cabecera de las cartas ("1-4 of 10 · View all"), como una pildora de vidrio
   (inmersivo.js la mueve ahi; en el telefono queda arriba en la barra) */
.esc-cartas-cab.con-sonido{height:40px;flex-basis:40px;gap:.9rem}
.esc-cartas-cab.con-sonido>#escCuenta,.esc-cartas-cab.con-sonido>.esc-link{flex:0 0 auto;white-space:nowrap}
.esc-cartas-cab .esc-sonido{position:relative;flex:0 1 900px;width:auto;min-width:0;margin:0;gap:.45rem;padding:2px 4px 2px 2px;
  border:1px solid rgba(212,168,67,.3);border-radius:999px;background:rgba(6,16,17,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,240,210,.08);text-shadow:none;letter-spacing:normal;text-transform:none}
.esc-cartas-cab .sn-play{height:32px}
.esc-cartas-cab .sn-todos{padding:.45rem .8rem}
.esc-cartas-cab .sn-vol{margin-right:.45rem}
.esc-cartas-cab .sn-aviso{left:auto;right:0;transform:none}
/* barra angosta o en dos filas: la fila de sonido ocupa todo el ancho y pierde el rotulo */
.esc-barra.compacta .esc-sonido{grid-column:1 / -1;margin-bottom:0}
.esc-barra.corta .sn-lbl,.esc-barra.compacta .sn-lbl{display:none}
@media (max-width:1100px){.esc-cartas-cab .sn-lbl,.esc-cartas-cab .sn-largo{display:none}}
@media (max-width:760px){
  .esc-sonido{gap:.4rem;padding:0 0 .38rem;margin:0 0 .38rem}
  .sn-lbl,.sn-largo,.esc-sonido>.sn-vol{display:none}
  .sn-play{height:30px;padding:0 .8rem 0 .75rem;font-size:.56rem}
  .sn-pista .chip{padding:.45rem .7rem}
  .sn-todos{padding:.42rem .65rem;font-size:.54rem}
  .sn-pista{padding-right:22px}
  .sn-aviso{font-size:.95rem;padding:.55rem .8rem}
}
/* telefonos bajos: el rotulo chico arriba del titulo cede su lugar a la fila de sonido (como el subtitulo en compu) */
@media (max-width:760px) and (max-height:760px){.esc-cab .label{display:none}}
@media (prefers-reduced-motion:reduce){.sn-play.cargando .sn-ico{animation:none}.sn-pista{scroll-behavior:auto}}