/* BREATHWORK INMERSIVO (2026-10-11). Estanque de lotos al atardecer: el sol del horizonte es la luz de la respiracion.
   Mismo lenguaje que el Nature Mixer (nature-engine/inmersivo.css): escenario a pantalla completa, velo arriba y abajo,
   titulo arriba a la izquierda, barra de vidrio abajo. El motor (breathwork.js) no cambia: esto es solo el escenario. */
.bw-inm .page-wrap{padding-top:0}

.escenario{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;z-index:1;background:#07100f}
.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.1s ease}
.esc-fondo img.ver{opacity:1}
.esc-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,11,.74) 0%,rgba(4,10,11,.40) 13%,rgba(4,10,11,.12) 28%,rgba(4,10,11,0) 42%,rgba(4,10,11,0) 62%,rgba(4,10,11,.82) 100%)}
/* la luz se suma a la escena como luz (screen); el aro va encima, normal, para que se lea sobre el cielo claro */
#escFx,#escAro{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#escFx{mix-blend-mode:screen}

/* 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 .bw-eyebrow{color:rgba(233,226,207,.72);margin-bottom:.4rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.esc-cab .bw-title{font-size:clamp(1.6rem,3.6vw,2.6rem);margin-bottom:.3rem}
.esc-cab .bw-subtitle{color:rgba(233,226,207,.8);text-shadow:0 2px 10px rgba(0,0,0,.7)}

/* la guia: debajo del aro, centrada en el sol (inmersivo.js la ubica) */
.esc-guia{position:absolute;left:0;top:60%;z-index:3;width:min(92vw,720px);
  display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
/* al costado del aro (pantallas bajas): todo alineado a la izquierda */
.esc-guia.lado{align-items:flex-start;text-align:left}
.esc-guia.lado::before{left:40%}
.esc-guia.lado .bw-phase-text{text-indent:0}
.esc-guia.lado .bw-route-bar{justify-content:flex-start}
.esc-guia::before{content:"";position:absolute;left:50%;top:44%;width:150%;height:150%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(4,12,13,.42),rgba(4,12,13,.16) 60%,rgba(4,12,13,0))}
/* una sola linea y siempre del mismo alto; si el texto no entra, inmersivo.js achica la letra (--k) */
.escenario .bw-phase-text{--fb:clamp(1.9rem,3.3vw,3.2rem);font-family:'Cinzel',serif;font-size:calc(var(--fb) * var(--k,1));font-weight:400;
  height:calc(var(--fb) * 1.12);line-height:calc(var(--fb) * 1.12);letter-spacing:.18em;width:100%;
  text-indent:.18em;color:#fff8ea;padding:0;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 28px rgba(0,0,0,.55),0 0 40px rgba(255,214,150,.18)}
.escenario .bw-phase-text.entra{animation:bwEntra .7s ease-out}
@keyframes bwEntra{from{opacity:.25}to{opacity:1}}
.esc-cuenta{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.2;min-height:1.2em;
  color:rgba(255,241,218,.94);margin-top:.3rem;text-shadow:0 2px 14px rgba(0,0,0,.75)}
/* la cuenta en numeros sigue en la pagina (el motor la escribe y la leen los lectores de pantalla), pero se ve en palabras */
.escenario .bw-count-text{position:absolute;width:1px;height:1px;min-height:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.escenario .bw-route-bar{margin:.45rem 0 .5rem;gap:.35rem .45rem;justify-content:center;flex-wrap:wrap}
.escenario .bw-route-pill{font-size:.54rem;letter-spacing:.18em;border-radius:999px;padding:.24rem .7rem;color:#f3ead4;border-color:rgba(233,226,207,.32);
  background:rgba(6,16,17,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .45s ease}
.escenario .bw-route-pill.active-in,.escenario .bw-route-pill.active-out{color:#f3ead4;border-color:rgba(233,226,207,.32);background:rgba(6,16,17,.38)}
.escenario .bw-route-sep{color:rgba(233,226,207,.5)}
.esc-seq{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:rgba(255,246,228,.78);
  text-shadow:0 2px 10px rgba(0,0,0,.9);max-width:100%}
.esc-seq span{white-space:nowrap;transition:color .45s ease}
.esc-seq span.on{color:#f2cf63}
.esc-seq i{font-style:normal;margin:0 .2em;color:rgba(255,246,228,.4)}
.escenario .bw-cycles{margin:.4rem 0 0;color:rgba(233,226,207,.72);text-shadow:0 2px 10px rgba(0,0,0,.9);min-height:1em}

/* barra de vidrio */
.esc-barra{position:absolute;left:50%;bottom:clamp(14px,3vh,30px);transform:translateX(-50%);z-index:4;width:min(1180px,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:.75rem;flex-wrap:wrap;justify-content:center}
.esc-patrones{display:flex;align-items:center;gap:.4rem;min-width:0}
.escenario .bw-patterns{margin:0;gap:.4rem;flex-wrap:nowrap}
.escenario .bw-pat-btn,.escenario .bw-more-btn{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid rgba(217,201,163,.25);color:#d9c9a3;border-radius:999px;padding:.5rem .85rem;line-height:1.2}
.escenario .bw-pat-btn:hover,.escenario .bw-more-btn:hover,.escenario .bw-more-btn.open{border-color:rgba(242,207,99,.6);color:#f2cf63}
.escenario .bw-pat-btn.active,.escenario .bw-more-btn.elegido{background:linear-gradient(180deg,#f2cf63,#d4a843);color:#1a1408;border-color:#f2cf63;box-shadow:0 0 18px rgba(242,207,99,.3)}
.escenario .bw-more-btn.elegido:hover{color:#1a1408}
/* el menu de mas practicas abre hacia arriba (la barra esta abajo) */
.escenario .bw-dropdown{top:auto;bottom:calc(100% + 10px);left:auto;right:0;min-width:290px;max-height:min(340px,52vh);padding:.45rem;
  background:rgba(8,16,17,.94);border:1px solid rgba(212,168,67,.35);border-radius:14px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.escenario .bw-dd-group-label{color:rgba(212,168,67,.7)}
.escenario .bw-dd-item{color:rgba(233,226,207,.78);border-radius:8px}
.escenario .bw-dd-item:hover{background:rgba(212,168,67,.08);color:#f2cf63}
.escenario .bw-dd-item.active{background:rgba(212,168,67,.12);color:#f2cf63}
.escenario .bw-dd-tag{color:rgba(233,226,207,.45)}
.esc-sep{width:1px;height:28px;background:rgba(212,168,67,.28)}
.esc-musica{display:flex;align-items:center;gap:.55rem;font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,226,207,.62);cursor:pointer;transition:opacity .3s}
.esc-musica.off{opacity:.45}
.escenario input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:3px;border-radius:2px;cursor:pointer;outline:none;
  background:linear-gradient(90deg,#d4a843 0 var(--v,60%),rgba(255,255,255,.18) var(--v,60%) 100%)}
.escenario input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#f2cf63;box-shadow:0 0 10px rgba(242,207,99,.7);border:0}
.escenario input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#f2cf63;box-shadow:0 0 10px rgba(242,207,99,.7);border:0}
.escenario select.esc-largo{-webkit-appearance:none;appearance:none;padding-right:1.7rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#d9c9a3 50%),linear-gradient(135deg,#d9c9a3 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 11px) 52%;background-size:4px 4px;background-repeat:no-repeat;background-color:rgba(255,255,255,.04)}
.escenario select.esc-largo option{background:#0d1618;color:#e9e2cf}
.escenario .bw-controls{gap:.5rem}
.escenario .bw-ctrl-btn{font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.18em;padding:.6rem 1.4rem;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(212,168,67,.6);color:#f2cf63;background:rgba(212,168,67,.08)}
.escenario .bw-ctrl-btn:hover{background:rgba(212,168,67,.16);box-shadow:0 0 18px rgba(242,207,99,.2)}
.escenario #bwStartBtn{background:linear-gradient(180deg,#f2cf63,#d4a843);color:#1a1408;border-color:#f2cf63;font-weight:600;box-shadow:0 0 24px rgba(242,207,99,.3)}
.escenario #bwStartBtn:hover{filter:brightness(1.06)}
.escenario .bw-ctrl-btn.stop{color:rgba(233,226,207,.78);border-color:rgba(233,226,207,.3);background:transparent}
.escenario .bw-ctrl-btn.stop:hover{color:#f2cf63;border-color:rgba(242,207,99,.6)}
.escenario .bw-timeline{max-width:560px;margin:.4rem auto 0;gap:.6rem}
.escenario .bw-time{color:rgba(233,226,207,.62)}
.escenario .bw-track::before{background:rgba(255,255,255,.16)}
.escenario .bw-fill{background:linear-gradient(90deg,#d4a843,#f2cf63)}
.escenario .bw-knob{background:#f2cf63;box-shadow:0 0 10px rgba(242,207,99,.7)}

/* debajo del escenario: musica, info del patron y sonido, en vidrio oscuro */
.bw-abajo{max-width:980px;padding:2.4rem 1.2rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:stretch}
.bw-abajo .bw-section{margin:0;background:rgba(13,22,24,.82);border-color:rgba(212,168,67,.18);border-radius:16px}
.bw-abajo .bw-info-card{grid-column:1 / -1;order:-1}
.bw-abajo .bw-section-label{color:rgba(212,168,67,.75)}
.bw-abajo .bw-desc{max-width:none;color:rgba(200,221,216,.72)}
.bw-abajo .bw-info-val{color:rgba(200,221,216,.9)}
.bw-abajo .bw-info-label,.bw-abajo .bw-sound-toggle,.bw-abajo .bw-vol-label{color:rgba(200,221,216,.55)}

@media (max-width:1180px){
  .esc-sep{display:none}
}
@media (max-width:760px){
  .esc-cab{top:calc(var(--nav-h,64px) + 10px)}
  .esc-cab .bw-subtitle{display:none}
  .esc-cab .bw-title{font-size:clamp(1.5rem,7vw,2rem);margin-bottom:0}
  .esc-velo{background:linear-gradient(180deg,rgba(4,10,11,.84) 0%,rgba(4,10,11,.5) 12%,rgba(4,10,11,.16) 24%,rgba(4,10,11,0) 36%,rgba(4,10,11,0) 58%,rgba(4,10,11,.84) 100%)}
  .escenario .bw-phase-text{--fb:clamp(1.6rem,8vw,2.2rem)}
  .esc-seq{font-size:.66rem;letter-spacing:.12em}            /* en el telefono se tiene que leer (antes .54rem) */
  .escenario .bw-route-pill{font-size:.64rem;padding:.3rem .85rem}
  .esc-seq i{margin:0 .05em}
  /* la barra va abajo de todo; solo sube si en esta pagina aparece el chat del sitio (clase con-chat, la pone inmersivo.js) */
  .esc-barra{padding:.6rem .6rem .35rem;border-radius:18px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .escenario.con-chat .esc-barra{bottom:84px}
  .esc-fila{gap:.5rem}
  /* los patrones en dos filas centradas, todos a la vista: la fila que se deslizaba se fundia justo antes de "More" y "Wim Hof"
     parecia cortado (Mariano 2026-10-11: "hace bien el breathwork para phone") */
  .esc-patrones{width:100%;flex-wrap:wrap;justify-content:center}
  /* la caja de patrones "desaparece" y sus botones fluyen junto con "More": dos filas (4 + 2), no tres */
  .escenario .bw-patterns{display:contents}
  .esc-patrones{gap:.4rem}
  .escenario .bw-pat-btn{flex:0 0 auto}
  .escenario .bw-more-btn{padding:.5rem .7rem}
  /* "More" abre a lo ancho de la barra, encima de ella (anclado al boton se salia por la izquierda en el telefono) */
  .escenario .bw-more-wrap{position:static}
  .escenario .bw-dropdown{left:0;right:0;min-width:0;width:auto;bottom:calc(100% + 8px)}
  .esc-musica{display:none}
  .escenario .bw-controls{flex:1}
  .escenario .bw-ctrl-btn{flex:1;padding:.62rem .8rem}
  .escenario .bw-timeline{margin-top:.3rem}
  .bw-abajo{grid-template-columns:1fr;padding-top:1.6rem}
}
/* pantallas bajas (telefono acostado): el escenario entra entero en la pantalla, 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 .bw-eyebrow,.esc-cab .bw-subtitle{display:none}
  .esc-cab .bw-title{font-size:1.15rem;margin:0}
  .escenario .bw-phase-text{--fb:1.45rem}
  .esc-cuenta{font-size:1.1rem}
  .esc-seq{font-size:.52rem;letter-spacing:.14em}
  .esc-barra{bottom:10px;padding:.45rem .6rem .3rem;border-radius:16px}
  .esc-fila{flex-wrap:nowrap;gap:.5rem}
  .esc-patrones{flex:1;min-width:0}
  .escenario .bw-patterns{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding-right:18px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--i,0px),#000 calc(100% - var(--d,34px)),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--i,0px),#000 calc(100% - var(--d,34px)),transparent 100%)}
  .escenario .bw-patterns::-webkit-scrollbar{display:none}
  .escenario .bw-pat-btn{flex:0 0 auto}
  .escenario .bw-pat-btn.active{box-shadow:none}
  .esc-musica,.esc-sep{display:none}
  .escenario .bw-ctrl-btn{padding:.5rem .9rem}
  .escenario .bw-timeline{margin-top:.2rem}
}
@media (prefers-reduced-motion:reduce){
  .esc-fondo img{transition:none}
  .escenario .bw-phase-text.entra{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))}