/* FREQUENCY GENERATOR INMERSIVO (2026-10-11). Una camara de piedra con un estanque: el agua dibuja la figura de la
   frecuencia, la luz respira con el pulso, los dos tonos son dos haces que se juntan en el agua. El motor de sonido de
   index.html no cambia: esto es solo el escenario. Mismo lenguaje que nature-engine/inmersivo.css. */
.escenario{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;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 1.2s ease}
.esc-fondo img.ver{opacity:1}
.esc-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,11,.66) 0%,rgba(4,10,11,.16) 22%,rgba(4,10,11,0) 38%,rgba(4,10,11,0) 76%,rgba(4,10,11,.74) 100%)}
#escFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* titulo */
.esc-cab{position:absolute;left:clamp(16px,4vw,56px);top:calc(var(--nav-h,64px) + 18px);z-index:3;max-width:420px}
.esc-cab .header-eyebrow{color:rgba(233,226,207,.7);margin-bottom:.35rem}
.esc-cab h1{font-size:clamp(1.05rem,1.7vw,1.45rem);letter-spacing:.12em;margin-bottom:.25rem;text-shadow:none}
.esc-cab .subtitle{color:rgba(233,226,207,.72);font-size:.55rem;text-shadow:0 2px 10px rgba(0,0,0,.7);margin:0}

/* la lectura grande: banda, pulso y portadora */
.esc-lectura{position:absolute;left:0;right:0;top:calc(var(--nav-h,64px) + clamp(40px,8vh,96px));z-index:2;text-align:center;pointer-events:none;padding:0 16px}
.esc-lectura .banda{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:.16em;color:#f1e8d2;
  text-transform:uppercase;line-height:1.05;text-shadow:0 6px 40px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.4)}
.esc-lectura .banda.vacio{font-size:clamp(1.35rem,2.6vw,2rem);letter-spacing:.14em;line-height:calc(clamp(2.1rem,4.6vw,3.6rem) * 1.05)}
.esc-lectura .det{font-family:'Raleway',sans-serif;font-style:italic;font-weight:300;font-size:clamp(1rem,1.9vw,1.45rem);color:#e8dcbd;
  margin-top:.4rem;text-shadow:0 4px 20px rgba(0,0,0,.8)}
.esc-lectura .tag{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(233,226,207,.66);
  margin-top:.55rem;text-shadow:0 2px 10px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:.35rem;align-items:center;min-height:1.3em}
.escenario.vertical .esc-lectura .tag{min-height:2.9em}
.esc-lectura .tag .oidos{display:none}
.esc-lectura .tag .l{color:#7fe9ff}
.esc-lectura .tag .r{color:#f2cf63}

/* el dial de las bandas: el arco lo dibuja el canvas, las palabras se pueden tocar */
.esc-dial{position:absolute;inset:0;z-index:2;pointer-events:none}
.esc-dial button{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:0;cursor:pointer;padding:8px 10px;
  font-family:'Share Tech Mono',monospace;font-size:.64rem;letter-spacing:.22em;color:rgba(233,226,207,.62);text-shadow:0 2px 10px rgba(0,0,0,.95);
  transition:color .3s ease,text-shadow .3s ease;-webkit-tap-highlight-color:transparent}
.esc-dial button:hover{color:#fff7e2}
.esc-dial button.on{color:#f2cf63;text-shadow:0 0 14px rgba(242,207,99,.7),0 2px 10px rgba(0,0,0,.95)}
.esc-dial.apagado button{color:rgba(233,226,207,.4)}

/* los dos oidos (binaural) */
.esc-oido{position:absolute;z-index:2;font-family:'Share Tech Mono',monospace;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.95);pointer-events:none;transition:opacity .5s ease;white-space:nowrap}
.esc-oido.izq{left:clamp(16px,3.6vw,70px);color:#7fe9ff}
.esc-oido.der{right:clamp(16px,3.6vw,70px);color:#f2cf63;text-align:right}
.esc-oido.oculto{opacity:0}

/* 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-play{width:54px;height:54px;border-radius:50%;flex-shrink:0;cursor:pointer;display:grid;place-items:center;color:#1a1408;
  background:linear-gradient(180deg,#f2cf63,#d4a843);border:1px solid #f2cf63;box-shadow:0 0 26px -4px rgba(242,207,99,.55);transition:all .3s ease}
.esc-play svg{width:22px;height:22px}
.esc-play:hover{box-shadow:0 0 34px -2px rgba(242,207,99,.75)}
.esc-play.sonando{background:rgba(212,168,67,.08);color:#f2cf63;animation:esc-respira 6s ease-in-out infinite}
@keyframes esc-respira{0%,100%{box-shadow:0 0 18px -6px rgba(242,207,99,.4)}50%{box-shadow:0 0 34px -2px rgba(242,207,99,.6)}}
.esc-metodo{display:inline-flex;border:1px solid rgba(212,168,67,.32);border-radius:999px;padding:3px;gap:2px}
.esc-metodo button{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#d9c9a3;cursor:pointer;
  background:transparent;border:0;border-radius:999px;padding:.42rem .75rem;transition:all .2s ease;white-space:nowrap}
.esc-metodo button:hover{color:#f2cf63}
.esc-metodo button.on{background:rgba(212,168,67,.16);color:#f2cf63;box-shadow:inset 0 0 0 1px rgba(242,207,99,.6)}
.esc-desl{display:flex;align-items:center;gap:.55rem;cursor:pointer}
.esc-desl span{font-family:'Share Tech Mono',monospace;font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,226,207,.66)}
.esc-barra .esc-desl input[type=range]{width:120px;height:3px;border:0;border-radius:2px;background:rgba(255,255,255,.18)}
.esc-barra .esc-desl input[type=range]::-webkit-slider-thumb{width:14px;height:14px;background:#f2cf63;box-shadow:0 0 10px rgba(242,207,99,.7)}
.esc-barra .esc-desl input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#f2cf63}
.esc-sep{width:1px;height:28px;background:rgba(212,168,67,.28)}
@media (max-width:1100px){.esc-sep{display:none}}   /* la fila se parte en dos: un separador al principio de linea queda suelto */
.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,.08)}
.esc-chips{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.65rem}
.esc-chip{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#d9c9a3;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(217,201,163,.25);border-radius:999px;padding:.45rem .85rem;transition:all .2s ease;white-space:nowrap}
.esc-chip:hover{border-color:rgba(242,207,99,.6);color:#f2cf63}
.esc-chip.on{background:linear-gradient(180deg,#f2cf63,#d4a843);color:#1a1408;border-color:#f2cf63;box-shadow:0 0 22px rgba(242,207,99,.35)}
.esc-barra.aviso .esc-chip:not(.on){animation:esc-aviso 1.4s ease-in-out 1}
@keyframes esc-aviso{0%,100%{border-color:rgba(217,201,163,.25)}40%{border-color:#f2cf63;box-shadow:0 0 16px rgba(242,207,99,.45)}}
.esc-hint{margin:.45rem 0 0;text-align:center;font-size:.68rem;color:rgba(233,226,207,.72);min-height:1em}
.esc-barra.aviso .esc-hint{color:#f2cf63}

/* todos los controles: las secciones completas de siempre, con sus ids */
.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),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);visibility:hidden}
.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:1100px;margin:0 auto .9rem}
.esc-cajon-cab>span{font-family:'Cinzel',serif;font-size:1.05rem;letter-spacing:.06em;color:#e9e2cf}
.esc-cajon-acc{display:flex;gap:.6rem;align-items:center}
.esc-cajon-cuerpo{max-width:1100px;margin:0 auto}
.esc-cajon-cuerpo .section{margin:0 0 .9rem}
@media (min-width:1100px){
  .esc-cajon-cuerpo{columns:2;column-gap:.9rem}
  .esc-cajon-cuerpo .section{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%}
}

@media (max-width:760px){
  .esc-cab{top:calc(var(--nav-h,64px) + 10px)}
  .esc-cab .subtitle{display:none}
  .esc-velo{background:linear-gradient(180deg,rgba(4,10,11,.8) 0%,rgba(4,10,11,.3) 20%,rgba(4,10,11,0) 36%,rgba(4,10,11,0) 74%,rgba(4,10,11,.82) 100%)}
  .esc-lectura{top:calc(var(--nav-h,64px) + 74px)}
  .esc-lectura .tag{font-size:.52rem;letter-spacing:.2em}
  .esc-dial button{font-size:.54rem;letter-spacing:.18em;padding:8px 6px}
  .esc-oido{font-size:.52rem}
  /* la barra sube por encima del chat del sitio */
  .esc-barra{padding:.6rem .6rem .45rem;border-radius:18px;bottom:84px}
  .esc-fila{gap:.6rem;flex-wrap:nowrap}
  .esc-play{width:46px;height:46px}
  .esc-metodo,.esc-calidez,.esc-sep{display:none}
  .esc-desl{flex:1;min-width:0}
  .esc-barra .esc-desl input[type=range]{width:auto;flex:1;min-width:0}
  .esc-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-bottom:2px;margin-top:.55rem}
  .esc-chips::-webkit-scrollbar{display:none}
  .esc-chip{flex:0 0 auto}
  .esc-hint{font-size:.62rem;margin-top:.35rem}
  .esc-cajon{padding-bottom:96px}
  .esc-cajon-cab>span{font-size:.95rem}
}
/* en vertical (o si a los costados chocan con algo: lo decide inmersivo.js) los oidos van debajo de la lectura */
.escenario.vertical .esc-oido,.escenario.oidos-dentro .esc-oido{display:none}
.escenario.vertical .esc-lectura .tag .oidos,.escenario.oidos-dentro .esc-lectura .tag .oidos{display:block}
/* pantallas bajas (telefono acostado, ventanas bajas): el escenario entra entero, titulo compacto, barra en una fila */
@media (max-height:520px) and (orientation:landscape){
  .escenario{min-height:0}
  .esc-cab{top:calc(var(--nav-h,64px) + 6px)}
  .esc-cab .header-eyebrow,.esc-cab .subtitle{display:none}
  .esc-cab h1{font-size:.95rem;margin:0}
  .esc-lectura{top:calc(var(--nav-h,64px) + 6px)}
  .esc-lectura .banda{font-size:1.45rem}
  .esc-lectura .banda.vacio{font-size:1.05rem;line-height:calc(1.45rem * 1.05)}
  .esc-lectura .det{font-size:.82rem;margin-top:.1rem}
  .esc-lectura .tag{font-size:.48rem;margin-top:.25rem;gap:.2rem}
  .esc-dial button{font-size:.5rem;padding:5px 6px}
  .esc-oido{font-size:.5rem}
  .esc-barra{display:flex;align-items:center;gap:.6rem;bottom:8px;padding:.4rem .6rem;border-radius:16px}
  .esc-fila{display:contents}
  .esc-play{width:40px;height:40px;order:0}
  .esc-play svg{width:18px;height:18px}
  .esc-chips{order:1;flex:1;min-width:0;margin:0;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .esc-chips::-webkit-scrollbar{display:none}
  .esc-chip{flex:0 0 auto;padding:.38rem .7rem}
  .esc-desl{order:2;flex:0 1 150px;min-width:0}
  .esc-barra .esc-desl input[type=range]{width:auto;flex:1;min-width:0}
  #escTodo{order:3;padding:.42rem .8rem}
  .esc-metodo,.esc-calidez,.esc-sep,.esc-hint{display:none}
}
/* LA ONDA EN VIVO (2026-10-12, Mariano: "poner la animacion de ondas como era antes"): el mismo lienzo y el mismo dibujo de
   antes del rediseno (startWaveAnim en index.html: teal = oido izquierdo, violeta = derecho, dorado = el pulso), con su caja
   oscura de siempre, arriba de los controles de la barra. La altura sigue al alto de la pantalla: la barra crece hacia
   arriba y asi no tapa el agua. */
.esc-barra .esc-ondas{height:clamp(44px,6.4vh,70px);margin:0 0 .6rem;border-radius:10px}
.esc-ondas canvas{display:block}
/* sin lugar arriba (pantallas bajas, lo decide inmersivo.js): la onda pasa a la fila, al lado del play, y la barra no crece */
.esc-barra.onda-en-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:.9rem}
.esc-barra.onda-en-fila .esc-fila{display:contents}
.esc-barra.onda-en-fila .esc-ondas{order:1;flex:1 1 150px;max-width:360px;height:54px;margin:0}
.esc-barra.onda-en-fila .esc-metodo,.esc-barra.onda-en-fila .esc-sep,.esc-barra.onda-en-fila .esc-desl,.esc-barra.onda-en-fila #escTodo{order:2}
.esc-barra.onda-en-fila .esc-chips,.esc-barra.onda-en-fila .esc-hint{order:3;flex:0 0 100%}
@media (max-width:760px){
  .esc-barra .esc-ondas{height:clamp(34px,5vh,46px);margin-bottom:.5rem;border-radius:9px}
  /* en el telefono la onda ocupa el lugar del volumen, y el volumen baja a la linea de la ayuda */
  .esc-barra.onda-en-fila{column-gap:.6rem}
  .esc-barra.onda-en-fila .esc-ondas{flex:1 1 0;min-width:0;max-width:none;height:46px}
  .esc-barra.onda-en-fila .esc-desl{order:4;flex:0 0 100%;margin-top:.5rem}
  .esc-barra.onda-en-fila .esc-hint{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  .esc-barra .esc-ondas{order:1;flex:0 0 clamp(110px,17vw,190px);height:36px;margin:0}
  /* el globo del chat del sitio (64 px, a 20 px del borde) tapaba "All controls": la barra termina antes */
  .esc-barra{left:12px;transform:none;width:calc(100% - 104px)}
}

@media (prefers-reduced-motion:reduce){.esc-play.sonando{animation:none}.esc-fondo img{transition:none}.esc-cajon{transition:none}.esc-barra.aviso .esc-chip:not(.on){animation: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))}