/* 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:calc(100vh + var(--bw-extra,0px));height:calc(100svh + var(--bw-extra,0px));min-height:calc(540px + var(--bw-extra,0px));
  overflow:hidden;z-index:1;background:#07100f}   /* --bw-extra: only on a phone too short for the centred column (inmersivo.js) */
.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.lado .esc-seq,.esc-guia.lado .bw-cycles{padding-left:0}
/* short upright phones (owner 2026-10-30, "centralo"): the same centred column, only tighter; inmersivo.js adds .apretada
   only when the normal column does not fit, so taller phones keep their spacing */
.esc-guia.apretada .esc-cuenta{margin-top:0;line-height:1;min-height:1em}
.esc-guia.apretada .bw-route-bar{margin:.2rem 0 .25rem}
.esc-guia.apretada .esc-seq{line-height:1.5}
.esc-guia.apretada .bw-cycles{margin-top:.15rem}
.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))}
/* LETTER SPACING IS ADDED AFTER EVERY LETTER, the last one too, so tracked text looks pushed left of its centre by half the
   spacing. Each centred tracked line gets that much on its left: text-indent on the phase word (one line), padding-left equal
   to the spacing on the pattern line and the time left (they can wrap), and the pills move their text inside the same pill
   width (owner 2026-10-30: "off-center AGAIN"). */
/* 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 calc(.7rem - .09em) .24rem calc(.7rem + .09em);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;padding-left:.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;padding-left:.15em;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);scrollbar-width:thin;scrollbar-color:rgba(212,168,67,.5) transparent}
.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;padding-left:.12em}            /* en el telefono se tiene que leer (antes .54rem) */
  .escenario .bw-route-pill{font-size:.64rem;padding:.3rem calc(.85rem - .09em) .3rem calc(.85rem + .09em)}
  .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:14px}
  .bw-abajo{grid-template-columns:1fr;padding-top:1.6rem}
  /* TAP SIZE ON PHONES (2026-10-30, phone test: pattern chips 30 px, session buttons 38 px, the timeline 20 px). The session row is
     44 px tall for real; the chips and the timeline keep their look and get an invisible 44 px tap area around them. */
  .escenario .bw-ctrl-btn,.escenario select.esc-largo{min-height:44px}
  .esc-patrones{row-gap:16px}
  .escenario .bw-pat-btn,.escenario .bw-more-btn{position:relative}
  .escenario .bw-pat-btn::after,.escenario button.bw-more-btn::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .escenario .bw-track::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-24px}   /* mostly below the line: the Loops and Scene chips sit just above */
  .escenario .bw-dd-item{min-height:44px}
}
/* 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;padding-left:.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}
}
/* PHONE HELD SIDEWAYS, NARROW (568 to 760 px wide; owner 2026-10-30). The phone rules and the low-screen rules above fought
   here: the control bar grew over the whole scene, no circle was drawn and the word sat under the buttons. Two columns
   instead: the title, the circle and the guide on the left (inmersivo.js lays them out with the same query), the controls in
   a glass column on the right, every pattern visible in two rows. */
@media (max-height:520px) and (orientation:landscape) and (max-width:760px){
  :root{--bw-lado-w:clamp(288px,50vw,340px)}
  .esc-barra,.escenario.con-chat .esc-barra{left:auto;right:10px;transform:none;top:calc(var(--nav-h,64px) + 6px);bottom:8px;width:var(--bw-lado-w);
    display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:.45rem .55rem .2rem;border-radius:16px}
  .esc-barra > .esc-fila{margin-top:auto}
  .esc-barra > .bw-timeline{margin-bottom:auto}
  .esc-fila{flex-wrap:wrap;gap:.45rem;justify-content:center}
  .esc-patrones{flex:0 0 100%;flex-wrap:wrap;justify-content:center;row-gap:14px}
  .escenario .bw-patterns{display:contents}
  .escenario select.esc-largo{font-size:.54rem;letter-spacing:.08em;padding-left:.7rem}
  .escenario .bw-controls{flex:1 1 0;min-width:0}
  .escenario .bw-ctrl-btn{padding:.5rem .55rem;letter-spacing:.14em}
  .escenario .bw-timeline{margin-top:5px}
  .escenario .esc-cab{right:calc(var(--bw-lado-w) + 22px)}
  .esc-cab::before{inset:-20px -30px -20px -30px}
  .esc-cab .bw-title{font-size:clamp(.78rem,2.3vw,1rem);padding-right:40px}
  .esc-cab .rz-modes{max-width:none;margin-top:.35rem}
  .esc-cab .rz-mode{padding:.45rem .4rem;font-size:.56rem;letter-spacing:.08em;gap:.3rem}
  .esc-cab .rz-mode svg{width:13px;height:13px}
  a.aa-guia{left:auto;right:calc(var(--bw-lado-w) + 20px);top:calc(var(--nav-h,64px) + 2px);bottom:auto;padding:5px 8px}
  a.aa-guia span{display:none}
}
@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))}
/* PHONE HELD SIDEWAYS, 761 to 900 px (2026-11-08, layout check): the one-row control bar did not fit, the last practice slid under
   "More" half hidden (812 px: Physio Sigh). Tighter chips here so every practice shows: 0 px overflow measured at 761 to 915. */
@media (max-height:520px) and (orientation:landscape) and (min-width:761px) and (max-width:900px){
  .escenario .bw-pat-btn,.escenario .bw-more-btn{letter-spacing:.08em;padding:.5rem .6rem}
  .escenario select.esc-largo{letter-spacing:.08em}
  .esc-fila{gap:.4rem}
}
@media (max-height:520px) and (orientation:landscape) and (min-width:761px) and (max-width:800px){
  .escenario .bw-pat-btn,.escenario .bw-more-btn{letter-spacing:.04em;padding:.5rem .5rem}
  .escenario select.esc-largo{letter-spacing:.04em;padding-left:.6rem}
  .escenario .bw-ctrl-btn{padding:.5rem .7rem}
  .esc-patrones,.escenario .bw-patterns{gap:.3rem}
}
/* THE SMALLEST PHONE HELD SIDEWAYS (568x320, 2026-11-08 layout check): with a session running the control column was 23 px taller
   than the screen and scrolled inside. Tighter rows and chips (their 44 px tap area stays) and a few px more room: 1 px left. */
@media (max-height:340px) and (orientation:landscape) and (max-width:760px){
  .esc-barra,.escenario.con-chat .esc-barra{top:calc(var(--nav-h,64px) + 3px);bottom:4px;padding-top:.3rem;padding-bottom:.1rem}
  .esc-patrones{row-gap:8px}
  .esc-fila{row-gap:.3rem}
  .escenario .bw-timeline{margin-top:0}
  .escenario .bw-pat-btn,.escenario .bw-more-btn{padding-top:.36rem;padding-bottom:.36rem}
}