/* NATURE MIXER INMERSIVO (2026-10-11). El paisaje del preset llena la pantalla y cada sonido vive adentro de la escena,
   como los instrumentos de la sala. El motor de sonido de index.html no cambia: esto es solo el escenario. */
.escenario{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;z-index:1;background:#050b0c}
.esc-fondo,.esc-fondo img{position:absolute;inset:0;width:100%;height:100%}
.esc-fondo{z-index:0}
.esc-fondo img{object-fit:cover;object-position:center;opacity:0;transition:opacity 1.2s cubic-bezier(.25,.6,.35,1)}
.esc-fondo img.ver{opacity:1}
.esc-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,11,.62) 0%,rgba(4,10,11,0) 24%,rgba(4,10,11,0) 62%,rgba(4,10,11,.78) 100%)}
#escFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.esc-marco{position:absolute;pointer-events:none}

/* titulo */
.esc-cab{position:absolute;left:clamp(16px,4vw,56px);top:calc(var(--nav-h,60px) + 18px);z-index:3;max-width:560px}
.esc-cab .header-eyebrow{color:rgba(233,226,207,.7);margin-bottom:.4rem}
.esc-cab h1{font-size:clamp(1.6rem,3.6vw,2.6rem);margin-bottom:.3rem;text-shadow:none}
.esc-cab .subtitle{color:rgba(233,226,207,.78);font-size:.62rem;text-shadow:0 2px 10px rgba(0,0,0,.7)}

/* los sonidos dentro de la escena */
.punto{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;color:#e9fffb;font:inherit;-webkit-tap-highlight-color:transparent}
.punto .aro{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;transition:transform .25s ease;
  background:radial-gradient(circle,rgba(45,212,191,.30),rgba(45,212,191,.05) 58%,transparent 70%)}
.punto:hover .aro,.punto.abierto .aro{transform:scale(1.08)}
.punto .aro svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.punto .aro .pista{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2}
.punto .aro .nivel{fill:none;stroke:#f2cf63;stroke-width:2.6;stroke-linecap:round;transition:stroke-dasharray .35s ease;filter:drop-shadow(0 0 4px rgba(242,207,99,.8))}
.punto .aro i{width:11px;height:11px;border-radius:50%;background:#e9fffb;box-shadow:0 0 16px 6px rgba(45,212,191,.7);transition:all .4s ease}
.punto.off .aro{background:radial-gradient(circle,rgba(255,255,255,.12),transparent 66%)}
.punto.off .aro i{background:rgba(255,255,255,.72);box-shadow:0 0 10px 2px rgba(255,255,255,.35)}
.punto.on .aro i{animation:latido 3.6s ease-in-out infinite}
@keyframes latido{0%,100%{box-shadow:0 0 14px 5px rgba(45,212,191,.6)}50%{box-shadow:0 0 22px 9px rgba(45,212,191,.85)}}
.punto .et{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.95);white-space:nowrap}
.punto .va{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.12em;color:#f2cf63;text-shadow:0 2px 8px rgba(0,0,0,.95)}
.punto.off .et{color:rgba(233,226,207,.8)}
.punto.off .va{color:rgba(233,226,207,.55)}

/* lo que suena y no tiene lugar en este paisaje */
.esc-extra{position:absolute;right:clamp(16px,3vw,44px);top:calc(var(--nav-h,60px) + 22px);z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.esc-extra button{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#e9e2cf;cursor:pointer;
  background:rgba(6,16,17,.55);border:1px solid rgba(45,212,191,.35);border-radius:999px;padding:.38rem .8rem;backdrop-filter:blur(10px)}
.esc-extra button b{color:#f2cf63;font-weight:400;margin-left:.4rem}

/* barra de vidrio */
.esc-barra{position:absolute;left:50%;bottom:clamp(14px,3vh,34px);transform:translateX(-50%);z-index:4;width:min(1120px,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:.8rem 1rem .55rem}
.esc-fila{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center}
.esc-barra .play-btn{width:56px;height:56px}
.esc-barra .play-btn svg{width:22px;height:22px}
.esc-barra .master-vol{min-width:150px}
.esc-barra .scenes{margin:.6rem 0 0;gap:.35rem}
.esc-barra .scene-btn{background:rgba(255,255,255,.04);border-color:rgba(217,201,163,.25);color:#d9c9a3}
.esc-barra .scene-btn.active{background:linear-gradient(180deg,#f2cf63,#d4a843);color:#1a1408;border-color:#f2cf63}
.esc-barra .hint{margin:.45rem 0 0;color:rgba(233,226,207,.7)}
.esc-sep{width:1px;height:28px;background:rgba(212,168,67,.28)}
.esc-timer{display:flex;align-items:center;gap:.3rem}
.esc-timer .lbl{font-family:'Share Tech Mono',monospace;font-size:.52rem;letter-spacing:.18em;color:rgba(233,226,207,.6);text-transform:uppercase;margin-right:.2rem}
.esc-barra .timer-btn{background:rgba(255,255,255,.04);border-color:rgba(217,201,163,.22);padding:.28rem .55rem}
.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}
.esc-btn:hover{background:rgba(212,168,67,.08)}

/* el control de un sonido (al tocar un punto) */
.esc-pop{position:absolute;z-index:6;width:250px;background:rgba(6,16,17,.82);border:1px solid rgba(212,168,67,.4);border-radius:16px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:.9rem 1rem;box-shadow:0 24px 60px rgba(0,0,0,.55);color:#e9e2cf}
.esc-pop[hidden]{display:none}
.esc-pop.movil{left:12px;right:12px;width:auto;top:auto;bottom:230px}
.esc-pop .t{font-family:'Cinzel',serif;font-size:1rem;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center}
.esc-pop .t button{background:none;border:0;color:rgba(233,226,207,.6);font-size:1rem;cursor:pointer;line-height:1}
.esc-pop .tag{font-size:.66rem;color:rgba(233,226,207,.6);margin:.15rem 0 .65rem}
.esc-pop .variants{margin-bottom:.7rem}
.esc-pop .fila{display:flex;align-items:center;gap:.6rem}
.esc-pop .fila input{flex:1}
.esc-pop .fila span{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:#f2cf63;width:34px;text-align:right}
.esc-pop .mute{margin-top:.6rem;width:100%;font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;border:1px solid rgba(45,212,191,.4);color:#2dd4bf;border-radius:8px;padding:.4rem;cursor:pointer}

/* todas las capas: las tarjetas completas de siempre (variantes, tono, pitch, paneo) */
.esc-cajon{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:78vh;overflow:auto;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
  background:rgba(8,14,16,.94);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}
.esc-cajon-cab{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto .9rem}
.esc-cajon-cab span{font-family:'Cinzel',serif;font-size:1.05rem;letter-spacing:.06em;color:#e9e2cf}
.esc-cajon .mixer{max-width:1100px;margin:0 auto}
.esc-cajon .esc-timer{max-width:1100px;margin:0 auto 1rem;justify-content:center}

@media (max-width:760px){
  .esc-cab{top:calc(var(--nav-h,56px) + 10px)}
  .esc-cab .subtitle{display:none}
  /* el titulo se lee sobre cielos claros */
  .esc-velo{background:linear-gradient(180deg,rgba(4,10,11,.82) 0%,rgba(4,10,11,.35) 17%,rgba(4,10,11,0) 30%,rgba(4,10,11,0) 58%,rgba(4,10,11,.82) 100%)}
  .punto .aro{width:52px;height:52px}
  .punto .et{font-size:.55rem}
  /* la barra sube por encima del chat del sitio (su globo tapaba los presets) */
  .esc-barra{padding:.6rem .6rem .4rem;border-radius:18px;bottom:84px}
  .esc-fila{gap:.55rem}
  .esc-barra .play-btn{width:48px;height:48px}
  .esc-barra .master-vol{min-width:0;flex:1}
  .esc-sep{display:none}
  .esc-timer .lbl{display:none}
  /* the row scrolls sideways: its right edge fades so the cut chip reads as "more this way" (owner rule for chip rows) */
  .esc-barra .scenes{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-bottom:2px;padding-right:22px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .esc-barra .scenes::-webkit-scrollbar{display:none}
  .esc-barra .scene-btn{flex:0 0 auto}
  .esc-barra .hint{display:none}
  .esc-extra{top:auto;bottom:220px}
}
@media (prefers-reduced-motion:reduce){.punto.on .aro i{animation:none}.esc-fondo img{transition:none}}
/* pantallas bajas (telefono acostado): el escenario entra entero en la pantalla, titulo compacto */
@media (max-height:520px) and (orientation:landscape){
  .escenario{min-height:0}
  .esc-cab{top:calc(var(--nav-h,56px) + 6px)}
  .esc-cab .header-eyebrow,.esc-cab .subtitle{display:none}
  .esc-cab h1{font-size:1.15rem}
  .punto .aro{width:44px;height:44px}
  .punto .et{font-size:.5rem}
  .esc-barra{bottom:10px;padding:.45rem .6rem .35rem}
  .esc-barra .play-btn{width:42px;height:42px}
  .esc-barra .scenes{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;margin-top:.35rem;padding-right:22px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .esc-barra .scene-btn{flex:0 0 auto}
  .esc-barra .hint,.esc-sep{display:none}
}

/* 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))}

/* "ALL SOUNDS" A LA VISTA (2026-10-12, Mariano: "necesita una opcion de UI donde esten todos los sonidos como antes
   y el usuario pueda mezclar ahi"). El mezclador completo ya existia pero era un botoncito "All layers" al final de
   la barra: ahora va al lado del play, con icono de grilla y nombre claro. */
.esc-barra .esc-todos{display:inline-flex;align-items:center;gap:.5rem;padding:.62rem 1.1rem;font-size:.62rem;color:#1a1408;
  background:linear-gradient(180deg,#f2cf63,#d4a843);border-color:#f2cf63;box-shadow:0 6px 24px rgba(212,168,67,.25)}
.esc-barra .esc-todos:hover{background:linear-gradient(180deg,#f6d877,#dcb04c)}
.esc-barra .esc-todos svg{width:14px;height:14px;fill:currentColor}
.esc-barra .esc-todos:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
@media (max-width:760px){.esc-barra .esc-todos{padding:.55rem .85rem;font-size:.56rem}}


/* PHONE DEMO PASS (2026-10-30, tool tester report on 360/390/414). Phone portrait only; desktop is untouched.
   - the sleep timer stays in the bar on its own row (it used to hide inside "All sounds", where nobody found it)
   - every tap target is at least 44 px tall
   - the master label becomes a speaker icon so the volume slider gets real width next to play and All sounds
   - the extra chips and the sound popup sit above the bar, whatever height the bar ends up with (--barra-top, set in JS)
   - the scene chip row fades on the side that has more chips (left fade appears once it is scrolled) */
@media (max-width:760px){
  .esc-barra{padding:.6rem .6rem .5rem}
  .esc-fila{row-gap:.5rem}
  .esc-barra .esc-todos{min-height:44px}
  .esc-barra .aa-skin-btn.aa-icon-only{width:44px;height:44px}
  .esc-barra .master-vol label{font-size:0;letter-spacing:0;width:16px;height:16px;flex:none;background:rgba(233,226,207,.62);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05A4.47 4.47 0 0 0 16.5 12z'/%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 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05A4.47 4.47 0 0 0 16.5 12z'/%3E%3C/svg%3E") center/contain no-repeat}
  .esc-fila .esc-timer{order:5;flex:1 0 100%;justify-content:center;gap:.4rem}
  .esc-fila .esc-timer .lbl{display:inline;margin-right:.1rem}
  .esc-barra .timer-btn{flex:1 1 0;min-height:44px;padding:0 .3rem;font-size:.62rem}
  .esc-fila .timer-readout{min-width:40px}
  .esc-fila .timer-readout:empty{display:none}
  .esc-barra .scenes{margin-top:.5rem}
  .esc-barra .scene-btn{min-height:44px;padding:0 1rem;font-size:.6rem}
  .esc-barra .scenes.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 86%,transparent)}
  .esc-barra .scenes.fade-l.fin{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%)}
  .esc-barra .scenes.fin:not(.fade-l){-webkit-mask-image:none;mask-image:none}
  .esc-extra{bottom:calc(var(--barra-top,220px) + 12px)}
  .esc-extra button{min-height:44px;padding:0 .95rem}
  .esc-pop.movil{bottom:calc(var(--barra-top,230px) + 10px)}
  .esc-pop .t button{min-width:44px;min-height:44px;margin:-.6rem -.7rem -.6rem 0}
  .esc-pop .v-btn{min-height:44px}
  .esc-pop .mute{min-height:44px}
  /* the drawer header stays on top while the cards scroll, so Close is always one tap away */
  .esc-cajon{padding-top:0}
  .esc-cajon-cab{position:sticky;top:0;z-index:2;margin:0 calc(-1 * clamp(12px,3vw,40px)) .8rem;padding:.6rem clamp(12px,3vw,40px);background:rgb(8,14,16);
    border-bottom:1px solid rgba(212,168,67,.18);box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
  html.aa-skinned .esc-cajon-cab{background:rgb(var(--sk-panel-rgb))}
  .esc-cajon-cab span{font-size:.9rem;padding-right:.6rem}
  .esc-cajon-cab .esc-btn{min-height:44px;padding:0 1.1rem;flex:none}
  /* below the scene: download tiers in one row, buttons and pack rows at tap size */
  .dl-tiers .dl-tier{flex:1 1 0;min-width:0;padding:.7rem .3rem}
  .dl-go,.pack-row,.email-form input,.email-form button{min-height:44px}
}

/* SCENE CHIPS NEVER LOSE THEIR LABEL (2026-10-30, demo at 432x768). The chips animated "all": the gold gradient of the
   active chip appears at once (gradients do not animate) while the text colour slid over .2s, so for a moment the new
   chip had light text on gold and the old one dark text on dark, both unreadable, plus the grey tap flash of phones.
   Now only the border and glow animate, so the label is readable in every frame. While a scene photo is still loading
   (slow connection only, the photos are preloaded) the chip shows a small pulsing dot next to its label. */
.esc-barra .scene-btn{position:relative;transition:border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.esc-barra .scene-btn.cargando::after{content:"";position:absolute;right:.4rem;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:currentColor;animation:carga-punto 1s ease-in-out infinite}
@keyframes carga-punto{0%,100%{opacity:.25}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.esc-barra .scene-btn.cargando::after{animation:none;opacity:.6}}