/* ═══ UNA SOLA BARRA (28/09/2026 noche, frente/sitios-js.js) ═══════════════ */
/* 28/09 noche (2.ª): cada sala es UNA sección de pantallas que caben enteras
   (masplus: назад · дальше y la barra), sin la píldora de encima */
.mp.mp-sitio .mp-tabs { display:none !important; }

/* ── tu tarjeta de la esquina: «¿qué tengo?» (cuenta-js) ──
   Tu tarjeta; qué es la tuya; club · más · clases, cada una con lo tuyo o su
   precio y a dónde ir; y tu cuenta, más pequeña. */
#cuenta-ov .cu-lado { display:flex; flex-direction:column; align-items:flex-start; gap:calc(40 * var(--dc-u, .75px)); max-width:calc(820 * var(--dc-u, .75px)); }
#cuenta-ov .cu-que { font-family:var(--dc-font); font-size:var(--dc-fs-60, 44px); line-height:1.05; text-wrap:balance;
  text-shadow:0 0 22px rgba(242,242,244,.4), 0 0 64px rgba(242,242,244,.14); }
#cuenta-ov .cu-que .mp-metal { font-size:inherit; }
#cuenta-ov .cu-que-s { margin-top:calc(-24 * var(--dc-u, .75px)); font-size:var(--dc-fs-30, 20px); line-height:1.4; opacity:.72; }
#cuenta-ov .cu-planes { width:100%; display:flex; flex-direction:column; }
#cuenta-ov .cu-plan { display:grid; grid-template-columns:minmax(120px, 1.1fr) minmax(0, 1.3fr) auto; align-items:baseline; gap:18px;
  padding:14px 0; border-top:1px solid rgba(242,242,244,.12); }
#cuenta-ov .cu-plan:last-child { border-bottom:1px solid rgba(242,242,244,.12); }
#cuenta-ov .cu-plan-n { font-family:var(--dc-font); font-size:var(--dc-fs-50, 34px); line-height:1; }
#cuenta-ov .cu-plan-n .mp-metal { font-size:inherit; }
#cuenta-ov .cu-plan-e { font-size:var(--dc-fs-30, 20px); opacity:.72; font-variant-numeric:tabular-nums; }
#cuenta-ov .cu-plan-ir { font-family:var(--dc-font); font-size:var(--dc-fs-30, 20px); background:none; border:0; color:inherit; cursor:pointer; padding:0; white-space:nowrap;
  text-shadow:0 0 18px rgba(242,242,244,.35); }
#cuenta-ov .cu-plan-ir:hover, #cuenta-ov .cu-plan-ir:focus-visible { outline:none; text-shadow:0 0 22px rgba(242,242,244,.6); }
#cuenta-ov .cu-lado .cu-ops { flex-direction:row; flex-wrap:wrap; gap:calc(40 * var(--dc-u, .75px)); }
#cuenta-ov .cu-lado .ent-op { font-size:var(--dc-fs-40, 26px); }
#cuenta-ov .cu-lado .ent-op.cu-cerrar { margin-top:0; }
/* en el club (oscuro): la letra clara de la sala y un velo que no deja leer lo de detrás */
#cuenta-ov.en-club .cu-lado { color:#F2F2F4; }
html #cuenta-ov.en-club .cu-velo, html.sin-desenfoque #cuenta-ov.en-club .cu-velo { background:rgba(10,10,12,.94); }
#cuenta-ov:not(.en-club) .cu-que, #cuenta-ov:not(.en-club) .cu-plan-ir { text-shadow:none; }
#cuenta-ov:not(.en-club) .cu-plan { border-color:rgba(20,30,45,.14); }
@media (max-width:700px) {
  #cuenta-ov { overflow-y:auto; align-items:flex-start; }
  #cuenta-ov .cu-lado { gap:22px; max-width:none; width:100%; }
  #cuenta-ov .cu-que { font-size:28px; }
  #cuenta-ov .cu-que-s { margin-top:-12px; font-size:15px; }
  #cuenta-ov .cu-plan { grid-template-columns:78px minmax(0, 1fr) auto; gap:10px; padding:12px 0; }
  #cuenta-ov .cu-plan-n { font-size:24px; }
  #cuenta-ov .cu-plan-e, #cuenta-ov .cu-plan-ir { font-size:14px; }
  #cuenta-ov .cu-lado .cu-ops { gap:18px; }
  #cuenta-ov .cu-lado .ent-op { font-size:20px; }
}


/* ═══ EL CLUB DE PAGO: LA PRUEBA DE 14 DÍAS (28/09/2026, frente/prueba-js.js) ═══
   La tarjeta en prueba: el grafito del club con un borde CREMA (la tarjeta
   de invitado de un club), y sus días donde va el plan. El final: la pieza
   de la puerta (#muro): la sala detrás difuminada y quieta, la marca, lo que
   ha reunido y las tres tarjetas. Mismas medidas de la casa (--dc-*). */
/* 28/09 noche: la de prueba es la del club tal cual; sólo cambia la esquina
   («prueba · N días»). (El borde crema de la propuesta, fuera: sobre el metal
   claro parecía un marco blanco - Rolando: «¿por qué apareció ese marco?») */
.cr-carta.m-prueba .cr-tier-prueba { font-size:46px; letter-spacing:.01em; }
.noche.alto .cr-carta.m-prueba .cr-tier-prueba { font-size:22px; }
/* 28/09 noche - «tú y yo» no es una tarjeta: es la PIZARRA de Rolando (la
   misma de «la sesión») con, en su esquina, la tarjeta del club (incluido).
   Ocupa el sitio de una tarjeta (.tuyyo-rep dentro de su marco). */
.tuyyo-rep { position:relative; overflow:hidden; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.4); }
.tuyyo-rep { width:100%; height:100%; }
.tuyyo-rep .mp-clase { position:absolute; left:50%; top:0; width:1100px; height:720px; transform-origin:0 0; transform:scale(var(--s, .2889)) translateX(-50%); }
.mp-cc-carta .tuyyo-rep .mp-clase { --s:.2889; }                 /* 330×208 */
.noche.alto .mp-cc-carta .tuyyo-rep { border-radius:6px; }
.noche.alto .mp-cc-carta .tuyyo-rep .mp-clase { --s:.0847; }     /* 96×61 */
#pr-muro .pr-carta .tuyyo-rep .mp-clase { --s:.2625; }           /* 300×189 */

/* tu tarjeta, por dentro: el club es tuyo */
.pr-tu { text-align:center; max-width:calc(900 * var(--dc-u)); margin:0 auto; }
.pr-tu-t { font-size:var(--dc-fs-60); line-height:1.1; letter-spacing:var(--dc-tracking); text-shadow:0 0 calc(22 * var(--dc-u)) rgba(242,242,244,.3); }
.pr-tu-s { margin-top:var(--dc-sp-20); font-size:var(--dc-fs-30); line-height:1.35; color:var(--dc-ink-70); }

/* la puerta en el navegador: sólo «войти через Telegram» */
#muro.pr-tg .mu-nombre, #muro.pr-tg .mu-correo, #muro.pr-tg .mu-clave, #muro.pr-tg .mu-acepto { display:none !important; }
#muro .pr-abre { margin-top:var(--dc-sp-20); max-width:calc(620 * var(--dc-u)); font-size:var(--dc-fs-30); line-height:1.35; color:var(--dc-ink-70); text-align:center; }

/* ── el final ── */
#pr-muro { position:fixed; inset:0; z-index:9650; overflow-y:auto; overscroll-behavior:contain; display:flex; justify-content:center; align-items:flex-start;
  opacity:0; visibility:hidden; transition:opacity var(--dc-t-salida) var(--dc-ease), visibility 0s linear var(--dc-t-salida);
  font-family:var(--dc-font); font-weight:var(--dc-weight); color:var(--dc-ink); -webkit-tap-highlight-color:transparent; }
#pr-muro .mu-velo { background:radial-gradient(70% 70% at 50% 45%, rgba(10,10,12,.55), rgba(10,10,12,.86)); }
#pr-muro.on { opacity:1; visibility:visible; transition:opacity var(--dc-t-entrada) var(--dc-ease), visibility 0s; }
html.pr-abierto .noche-escenario, html.pr-abierto #screen-home, html.pr-abierto #lec-ov { filter:blur(18px) saturate(.9); transition:filter var(--dc-t-entrada) var(--dc-ease); }
#pr-muro .pr-caja { position:relative; margin:auto; width:100%; max-width:calc(1500 * var(--dc-u)); padding:var(--dc-sp-60) var(--dc-sp-24); box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; text-align:center; transform:translateY(calc(24 * var(--dc-u))); transition:transform var(--dc-t-entrada) var(--dc-ease); }
#pr-muro.on .pr-caja { transform:none; }
#pr-muro .pr-tit { margin-top:var(--dc-sp-48); font-size:var(--dc-fs-60); line-height:1.1; letter-spacing:var(--dc-tracking);
  text-shadow:0 0 calc(22 * var(--dc-u)) rgba(242,242,244,.4), 0 0 calc(64 * var(--dc-u)) rgba(242,242,244,.14); }
#pr-muro .pr-sub { margin-top:var(--dc-sp-20); max-width:calc(760 * var(--dc-u)); font-size:var(--dc-fs-30); line-height:1.35; color:var(--dc-ink-70); }
#pr-muro .pr-nums { display:flex; justify-content:center; gap:var(--dc-sp-60); margin-top:var(--dc-sp-48); flex-wrap:wrap; }
#pr-muro .pr-n { display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--dc-u)); }
#pr-muro .pr-n b { font-weight:inherit; font-size:var(--dc-fs-140); line-height:.9; font-variant-numeric:tabular-nums;
  text-shadow:0 0 calc(22 * var(--dc-u)) rgba(242,242,244,.42), 0 0 calc(64 * var(--dc-u)) rgba(242,242,244,.14); }
#pr-muro .pr-n span { font-size:var(--dc-fs-30); color:var(--dc-ink-70); }
#pr-muro .pr-planes { display:flex; justify-content:center; align-items:flex-start; gap:var(--dc-sp-60); margin-top:var(--dc-sp-60); }
#pr-muro .pr-plan { display:flex; flex-direction:column; align-items:center; gap:calc(10 * var(--dc-u)); width:300px; transition:opacity var(--dc-t-salida) var(--dc-ease); }
#pr-muro .pr-carta { width:300px; height:189px; }
#pr-muro .pr-escala { transform:scale(.3846); transform-origin:0 0; }
#pr-muro .pr-precio { margin-top:calc(14 * var(--dc-u)); font-size:var(--dc-fs-50); line-height:1.1; font-variant-numeric:tabular-nums; }
#pr-muro .pr-que { font-size:var(--dc-fs-30); line-height:1.3; color:var(--dc-ink-70); min-height:2.6em; }
#pr-muro .pr-ir { font-size:var(--dc-fs-50); }
#pr-muro .pr-plan.elegido .pr-ir { text-shadow:0 0 calc(22 * var(--dc-u)) rgba(242,242,244,.45), 0 0 calc(64 * var(--dc-u)) rgba(242,242,244,.16); }
#pr-muro .pr-planes:has(.elegido) .pr-plan:not(.elegido) { opacity:.45; }
#pr-muro .pr-hecho { min-height:1.4em; margin-top:var(--dc-sp-24); font-size:var(--dc-fs-30); color:var(--dc-ink); }
#pr-muro .pr-pie { margin-top:var(--dc-sp-24); font-size:var(--dc-fs-30); color:var(--dc-ink-70); }
#pr-muro .pr-pie a { color:inherit; text-decoration:none; cursor:pointer; }
#pr-muro .pr-punto { margin:0 .6em; }
@media (max-width:700px) {
  #pr-muro .pr-planes { flex-direction:column; align-items:center; gap:var(--dc-sp-48); }
  #pr-muro .pr-nums { gap:var(--dc-sp-24); }
  #pr-muro .pr-n b { font-size:var(--dc-fs-60); }
}

/* ═══ EL ESCAPARATE DEL CLUB DE PAGO (28/09): «solo» y la frase de «más» ═══
   «solo» en la letra del club, blanca con el brillo de la casa (el metal es
   sólo de «más»), al tamaño del «más» de al lado. Debajo de cada nombre, su
   frase de la historia: «сам, но не один» · «с живыми людьми. и со мной.» */
.es-mas-alto .emx-solo-t { font-size:150px; line-height:.9; margin-top:2px; letter-spacing:-.02em; color:#F2F2F4;
  text-shadow:0 0 26px rgba(242,242,244,.38), 0 0 80px rgba(242,242,244,.14); }
.noche.ancho .es-mas-alto .emx-solo-t { font-size:280px; }
.es-mas-alto .emx-sub { margin-top:14px; font-size:30px; line-height:1.2; color:rgba(242,242,244,.72); text-shadow:0 0 18px rgba(10,10,12,.6); white-space:nowrap; }
.noche.ancho .es-mas-alto .emx-sub { margin-top:18px; font-size:40px; }
.noche.alto .es-mas-alto .emx-sub { font-size:22px; white-space:normal; max-width:300px; text-align:center; }
/* el fondo de «solo», el mismo que el de «más» (clases-css: .es-cla) */
.es-solo { background:linear-gradient(135deg, #3A3C40 0%, #1C1D20 55%, #0E0E10 100%); }
.noche.grafito .es-solo { background:linear-gradient(135deg, #585B5B 0%, #0A0A0C 100%); }
.noche.casa .es-solo { background:var(--dc-bg); }
.noche:not(.casa) .es-solo { background:transparent !important; }
.es-solo .emx-marca .n-mas-hc { color:#F2F2F4; }
.es-solo.es-mas-z .emx-marca { z-index:7; }
/* 04/10 - «solo» en su metal (como «más»), con su linterna al quedar en el centro */
.es-mas-alto .emx-solo-t { text-shadow:none; }
.es-mas-alto .emx-solo-t .mp-metal, .es-mas-alto .emx-solo-t .mp-metal .cr-tier-t { font-size:inherit; line-height:inherit; letter-spacing:-.02em; }
.es-mas-alto .emx-solo-t .mp-metal .cr-tier-t { filter:drop-shadow(0 14px 24px rgba(10,14,22,.6)); }
.nv-esc:not(.moviendo) .n-rec.centro .emx-solo-t .mas-luz { animation:masLuz 2.6s cubic-bezier(.3,0,.2,1) both; }
.inv-ov .inv-marca .inv-solo-t { text-shadow:none !important; }
.inv-ov .inv-solo-t .mp-metal, .inv-ov .inv-solo-t .mp-metal .cr-tier-t { font-size:inherit !important; line-height:inherit; letter-spacing:-.02em; }


/* ══ PULIDO (29/09/2026 · frente/pulido-js.js) ═════════════════════════ */

/* ── LA ESQUINA: «моя карта» y lo que suena, sin pisarse ──
   Rolando: «моя карта molesta con el "ahora suena"». En el escaparate los
   dos querían la esquina de arriba a la derecha. En el ordenador lo que suena
   se aparta a la izquierda de «моя карта», en la misma línea; en el móvil (al
   lado del logo no caben los dos) baja a la esquina de abajo, como el
   reproductor pequeño de cualquier app de música. Dentro de las salas la
   esquina es suya, como antes. Cambiar de sitio es un fundido, nunca un salto. */
.noche.ns-esc:not(.alto) .noche-sonando { right:206px; top:56px; }
.noche.ns-esc.alto .noche-sonando { top:auto; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); right:18px; gap:8px; }
.noche.ns-esc.alto .ns-foto { width:48px; height:48px; border-radius:11px !important; box-shadow:0 14px 34px rgba(0,0,0,.6); }
.noche.lista.suena.ns-muda .noche-sonando { opacity:0 !important; transform:none; transition:opacity .28s ease; pointer-events:none; }

/* ── «моя карта», la sala (sitios-js: _SITIOS.carta) ── */
/* las tres puertas del club: la tarjeta del club, la de «más» y la pizarra de las clases */
.si-tres { display:flex; align-items:flex-start; justify-content:center; gap:28px; width:100%; }
.noche .si-puerta { appearance:none; border:0; background:none; padding:0; margin:0; color:#F2F2F4; font:inherit; letter-spacing:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto; -webkit-tap-highlight-color:transparent;
  transition:transform var(--dc-t-lento, .45s) var(--dc-ease, ease), opacity var(--dc-t-lento, .45s) var(--dc-ease, ease); }
.noche .si-puerta:disabled { cursor:default; }
.noche .si-puerta:not(:disabled):active { transform:scale(.97); }
@media (any-hover: hover) { .noche .si-puerta:not(:disabled):hover { transform:scale(1.04); } }
.si-carta { position:relative; display:block; width:200px; height:126px; }
.si-carta .cr-carta { position:absolute; left:0; top:0; transform:scale(.2564); transform-origin:0 0; box-shadow:0 22px 50px rgba(0,0,0,.4); }
.si-carta .cr-carta, .si-carta .cr-carta * { animation-play-state:paused; }
.si-pz { position:relative; display:block; width:193px; height:126px; border-radius:10px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.4); }
.si-pz .mp-clase { position:absolute; left:0; top:0; width:1100px; height:720px; transform:scale(.1755); transform-origin:0 0; }
.si-puerta-n { font-size:30px; line-height:1; margin-top:8px; text-shadow:var(--n-brillo); }
.si-puerta-n .mp-metal { font-size:inherit; }
.si-puerta-e { font-size:18px; line-height:1.2; color:rgba(242,242,244,.62); white-space:nowrap; font-variant-numeric:tabular-nums; }
/* en el móvil no caben en fila: una debajo de otra, la imagen a la izquierda y su nombre al lado */
.noche.alto .si-tres { flex-direction:column; align-items:stretch; gap:18px; width:auto; }
.noche.alto .si-puerta { display:grid; grid-template-columns:120px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:18px; row-gap:4px; align-items:center; text-align:left; }
.noche.alto .si-puerta > .si-carta, .noche.alto .si-puerta > .si-pz { grid-row:1 / span 2; }
.noche.alto .si-carta { width:120px; height:76px; }
.noche.alto .si-carta .cr-carta { transform:scale(.3429); }   /* en el club del móvil la tarjeta mide 350 */
.noche.alto .si-pz { width:66px; height:85px; border-radius:7px; justify-self:center; }
.noche.alto .si-pz .mp-clase { transform:scale(.0944); }   /* en el móvil la clase es vertical: 700×900 */
.noche.alto .si-puerta-n { font-size:24px; margin-top:0; align-self:end; }
.noche.alto .si-puerta-e { font-size:14px; align-self:start; }
.noche .si-puerta-n .mp-metal, .noche .si-puerta-n .mp-metal .cr-tier-t { font-size:inherit !important; line-height:1; }
/* bajo tu tarjeta, настройки · выйти: en fila y a la izquierda, como el resto del texto */
.noche .mp[data-sitio="carta"] .un-cuenta { flex-direction:row; align-items:baseline; gap:34px; margin-top:30px; }
.noche.alto .mp[data-sitio="carta"] .un-cuenta { justify-content:flex-start; gap:26px; margin-top:16px; }
/* ── VOLVER AL ESCAPARATE SIN DOBLE EXPOSICIÓN ──
   La sala y el escaparate se fundían a la vez (~0,4 s con el teléfono encima
   del título «solo»). Ahora la sala se va primero (0,38 s) y el escaparate
   vuelve cuando ya casi no está. */
.nv { transition:opacity .38s ease, visibility 0s linear .38s; }
.nv-esc.vuelve .n-rec { transition:transform 1s var(--dc-ease), opacity .8s ease .3s; }
/* la sala entra justo cuando el escaparate acaba de irse (antes esperaba
   0,34 s más: un hueco oscuro entre las dos) */
.nv-cla.on { transition:opacity .7s ease .1s, visibility 0s; }
/* ── EL LOGO DE LOS TELÉFONOS, SIEMPRE EN EL MISMO SITIO ──
   Rolando: «se mueve de forma rara el logo entre teléfonos». El teléfono
   dibujaba su logo en (48, 64) a 66 px y la lección de dentro trae el suyo en
   (58,8, 26,3) a 52,6 px (medido en la pantalla del teléfono, 520 de ancho):
   al aparecer la lección, o al pasar de su teléfono al del tutor, el logo
   saltaba. Ahora todos van donde lo pone la lección, con su misma sombra, y
   el teléfono de la lección espera con el mismo fondo que ella (su degradado
   va al revés que el de los demás teléfonos). */
.mp-fono .mp-logo { left:58.8px; top:26.3px; font-size:52.6px; letter-spacing:.67px; text-shadow:0 21px 37px rgba(20,30,45,.6); }
.mp-fono .mp-logo .marca-club { font-size:.38em; margin-left:.06em; }
.mp-fono.con-leccion .mp-pantalla, .mp-fono.con-leccion .mp-pantalla.papel { background:linear-gradient(100deg, #C3C9CD 0%, #A5B0BD 45%, #7F8EA6 100%) !important; }
/* las esquinas del teléfono recortan SIEMPRE: con la lección (un iframe
   agrandado) dentro, Safari y a veces Chrome no recortan lo que va
   transformado dentro de una caja redondeada, y asomaban esquinas negras */
.mp-fono .mp-pantalla, .mp-fono .mp-leccion { isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(white, black); mask-image:radial-gradient(white, black); }


/* ══ EL RECORRIDO (30/09/2026 · frente/recorrido-js.js) ════════════════
   Lo que Rolando pidió al recorrer el club gratis: las clases como la
   pizarra + la tarjeta de «solo», lo tuyo con «это твоё» y una sombra
   blanca (sin checks), el acceso de sus alumnos a sus clases y lo que
   faltaba en el recorrido de cada persona. Medidas de la casa. */

/* ── LAS CLASES = LA PIZARRA + LA TARJETA DE «SOLO», ASOMANDO POR SU ESQUINA ── */
.cl-combo { position:relative; display:block; }
/* (la pizarra trae de fábrica una tarjeta pequeña en su esquina -la de «más», en «la sesión»-: aquí la que va es la de «solo», por fuera) */
.cl-combo .pz-carta, .mp-cs .pz-carta { display:none; }
.cl-mini { position:absolute; right:-24px; bottom:-18px; width:92px; height:58px; pointer-events:none; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.cl-mini-e { position:absolute; left:0; top:0; width:780px; height:492px; transform:scale(.118); transform-origin:0 0; }
.cl-mini-e .cr-carta, .cl-mini-e .cr-carta * { animation-play-state:paused; }
/* en el club del móvil la tarjeta mide 350 y la pizarra es vertical (66×85) */
.noche.alto .cl-mini { right:-18px; bottom:-8px; width:46px; height:29px; }
.noche.alto .cl-mini-e { width:350px; height:221px; transform:scale(.1314); }
/* en la puerta (fuera del club la tarjeta siempre mide 780) */
#muro .mu-item-pz .cl-combo { display:inline-block; }
@media (max-width:700px) { #muro .cl-mini { right:-14px; bottom:-10px; width:50px; height:32px; } #muro .cl-mini-e { transform:scale(.0641); } }

/* la grande: las páginas de las clases y «моя карта» de sus alumnos */
.mp-cs { position:relative; }
.mp-cs-carta { position:absolute; right:-54px; bottom:-64px; width:780px; height:492px; transform:scale(.5); transform-origin:100% 100%;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); pointer-events:none; }
.mp-cs-carta .cr-carta { box-shadow:none; }
.noche.alto .mp-cs-carta { right:-24px; bottom:-30px; width:350px; height:221px; transform:scale(.85); }

/* ── LO TUYO: «это твоё» y una sombra blanca alrededor (sin checks) ── */
.noche .si-puerta.si-tuyo .si-carta .cr-carta { box-shadow:0 0 0 3px rgba(255,255,255,.28), 0 0 70px 18px rgba(255,255,255,.42), 0 22px 50px rgba(0,0,0,.35); }
.noche .si-puerta.si-tuyo .si-pz { box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 22px 5px rgba(255,255,255,.42), 0 22px 50px rgba(0,0,0,.35); }
.noche .si-puerta.si-tuyo .si-puerta-e { color:#F2F2F4; text-shadow:0 0 14px rgba(242,242,244,.55), 0 0 36px rgba(242,242,244,.25); }
.noche.alto .si-puerta.si-tuyo .si-carta .cr-carta { box-shadow:0 0 0 2px rgba(255,255,255,.28), 0 0 40px 10px rgba(255,255,255,.42); }

/* ── SUS ALUMNOS: «мои занятия» en la esquina, junto a «моя карта» ── */
.noche .cu-clases { position:absolute; top:84px; z-index:9; appearance:none; border:0; background:none; padding:0; margin:0; cursor:pointer;
  display:inline-flex; align-items:center; font-family:var(--dc-font, 'Coolvetica', sans-serif); color:#F2F2F4; transition:opacity .35s ease, transform .2s ease; translate:0 var(--cu-dy, 0px); }
.noche .cu-clases[hidden] { display:none !important; }
.noche .cu-clases:active { transform:scale(.96); }
@media (any-hover:hover) { .noche .cu-clases:hover { transform:scale(1.04); } }
.noche .cu-clases .cu-t { text-shadow:var(--n-brillo); }
.noche.alto .cu-clases { right:24px !important; top:86px; }
.noche.alto .cu-clases .cu-t { font-size:16px; }
.noche:not(.lista) .cu-clases, .noche:not([data-vista="esc"]) .cu-clases { opacity:0; pointer-events:none; }
@media (any-hover: hover) { .noche .cu-clases:hover .cu-t { color:#fff; } }
/* lo que suena se aparta un poco más (va a la izquierda de las dos) */
.noche.con-clases.ns-esc:not(.alto) .noche-sonando { right:var(--cu-sonando, 420px); }

/* ── LA PUERTA EN «ENTRAR»: de dónde salen la pista para sus alumnos ── */
#muro .rec-pista { margin-top:var(--dc-sp-20, 20px); max-width:calc(620 * var(--dc-u, 1px)); font-size:var(--dc-fs-30, 18px); line-height:1.35; color:var(--dc-ink-70, rgba(242,242,244,.7)); text-align:center; }
/* la puerta en «я уже в клубе»: ahora son cuatro (club · solo · más · clases); en el móvil, en una fila más pequeña */
@media (max-width:700px) {
  #muro .mu-tres { gap:10px; }
  #muro .mu-tres .mu-carta { width:78px; height:49px; }
  #muro .mu-tres .mu-carta .cr-carta { transform:scale(.1); }
  #muro .mu-pz { width:78px; height:51px; }
  #muro .mu-pz .mp-clase { transform:scale(.0709); }
  #muro .cl-mini { right:-10px; bottom:-8px; width:36px; height:23px; }
  #muro .cl-mini-e { transform:scale(.0462); }
}
/* en «весь клуб» del móvil, la pizarra con su tarjeta ocupa las dos filas, como las tarjetas */
.noche.alto .si-puerta > .cl-combo { grid-row:1 / span 2; justify-self:center; }
/* ── LA PALABRA SE LEVANTA EN TODO EL SITIO (trad-js: _trLevantar) ──
   La misma subida que Folio (.fo-alzable.alzada = .w-chip.selected): sube,
   crece un 8 % y la sombra doble debajo, con la curva y el tiempo de la casa.
   Es una copia exacta encima de la palabra (la de debajo se vuelve invisible
   con el resaltado del navegador), en unidades de su propia letra. */
.tr-alza { position:fixed; left:0; top:0; z-index:9300; pointer-events:none; transform-origin:0 0; line-height:normal; white-space:nowrap; will-change:transform; }
.tr-alza-w { display:inline-block; transform-origin:50% 85%;
  transition:transform var(--dc-t-lento, .7s) var(--dc-ease, cubic-bezier(.42,0,.18,1)), text-shadow var(--dc-t-lento, .7s) var(--dc-ease, cubic-bezier(.42,0,.18,1)), color var(--dc-t-lento, .7s) var(--dc-ease, cubic-bezier(.42,0,.18,1)); }
.tr-alza.alzada .tr-alza-w { color:#fff !important; transform:translateY(-.24em) scale(1.08); text-shadow:0 .47em .76em rgba(0,0,0,.62), 0 .82em 1.3em rgba(0,0,0,.3); }
*::highlight(tr-oculta) { color:transparent; text-shadow:none; }
@media (prefers-reduced-motion: reduce) { .tr-alza-w { transition:none !important; } }

/* ══ 04/10 - LO QUE SUENA Y LAS DOS ESQUINAS (Rolando, apuntes 01/10) ══
   Ordenador: lo que suena va donde estaban «моя карта» y «мои занятия»
   (arriba a la derecha) y esas dos bajan a la esquina de abajo a la derecha.
   Móvil: lo que suena arriba, en la esquina; «моя карта» y «мои занятия»
   abajo, una en cada esquina, con aspecto de botón del club. */
.noche.ns-esc:not(.alto) .noche-sonando, .noche.con-clases.ns-esc:not(.alto) .noche-sonando { right:56px; top:52px; }
.noche:not(.alto) .cu-club { top:auto; bottom:44px; right:56px; }
.noche:not(.alto) .cu-clases { top:auto; bottom:52px; }
.noche.ns-esc.alto .noche-sonando { top:38px; bottom:auto; right:18px; gap:6px; }
.noche.ns-esc.alto .ns-foto { width:40px; height:40px; border-radius:9px !important; }
.noche.alto .cu-club { top:auto; right:auto; left:16px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
.noche.alto .cu-clases { top:auto; left:auto; right:16px !important; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
.noche.alto :is(.cu-club, .cu-clases) { padding:9px 16px 9px 10px; border-radius:999px; background:rgba(242,242,244,.08);
  box-shadow:inset 0 0 0 1px rgba(242,242,244,.16), 0 10px 26px rgba(0,0,0,.35); --cu-dy:0px; translate:none; }
.noche.alto .cu-clases { padding:11px 18px; }
/* la portada de «música»: dos capas que se relevan (como la de la esquina) */
.noche .nm-son-foto { position:relative; overflow:hidden; }
.noche .nm-son-t { transition:opacity .35s ease; }
.noche .nm-son-t.cambia { opacity:0; }

/* 07/10 (2.ª) - «моя карта» y «мои занятия» SIN PÍLDORA (Rolando: «deberían ser sin píldora, solo la animación de los
   botones de la plataforma, y ese estilo»). Son como las palabras de la cinta del club / la barra del aula: Coolvetica, el
   gris de una pestaña sin elegir, y al pasar o tocar se encienden en blanco y crecen (scale 1.12, --dc-t-lento + --dc-ease).
   Las dos en la MISMA línea (antes 44 px y 52 px del borde), en el ordenador y en el móvil. */
.noche :is(.cu-club, .cu-clases) { padding:0; border-radius:0; background:none; box-shadow:none; translate:none; --cu-dy:0px;
  display:inline-flex; align-items:center; gap:12px; transform-origin:center;
  transition:transform var(--dc-t-lento, .7s) var(--dc-ease, cubic-bezier(.42,0,.18,1)), opacity .5s ease; }
.noche:not(.alto) :is(.cu-club, .cu-clases) { top:auto; bottom:48px; }
.noche.alto :is(.cu-club, .cu-clases) { bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
.noche :is(.cu-club, .cu-clases) .cu-t { font-family:var(--dc-font, 'Coolvetica', sans-serif); line-height:1; color:rgba(242,242,244,.62); text-shadow:none;
  transition:color var(--dc-t-lento, .7s) var(--dc-ease, cubic-bezier(.42,0,.18,1)), text-shadow var(--dc-t-lento, .7s) var(--dc-ease, cubic-bezier(.42,0,.18,1)); }
.noche:not(.alto) :is(.cu-club, .cu-clases) .cu-t { font-size:26px; }
.noche.alto :is(.cu-club, .cu-clases) .cu-t { font-size:17px; }
@media (any-hover:hover) { .noche :is(.cu-club, .cu-clases):hover { transform:scale(1.12); } }
.noche :is(.cu-club, .cu-clases):active { transform:scale(1.12); }
@media (any-hover:hover) { .noche :is(.cu-club, .cu-clases):hover .cu-t { color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); } }
.noche :is(.cu-club, .cu-clases):active .cu-t { color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.noche:not(.alto) .cu-club .cu-mini { width:54px; height:34px; border-radius:4px; box-shadow:0 4px 10px rgba(10,12,16,.35); }
.noche:not(.alto) .cu-club .cu-mini-carta .cr-carta { transform:scale(.0692); }   /* 54 / 780 */


/* ═══ APUNTARSE Y PAGAR (01/10/2026) - frente/horario-js.js ═══════════
   Los pasos van en la columna del texto de la sala, con sus piezas: la
   frase, el dato, el enlace con flecha. Lo nuevo es poco y en texto (nada
   de cápsula clara en lo oscuro): la lista de lo que obtienes, las opciones
   del horario (como las de la sala) y un campo invisible (el del cuaderno). */
.noche .hz-paso { min-width: 0; }
.noche .hz-lista { list-style: none; padding: 0; }
.noche .hz-lista li { position: relative; padding-left: .9em; }
.noche .hz-lista li + li { margin-top: .32em; }
.noche .hz-lista li::before { content: "·"; position: absolute; left: .1em; top: 0; color: rgba(242,242,244,.55); }

/* las opciones del horario: el día grande, lo que queda pequeño */
.noche .hz-ops { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  opacity: 0; translate: 0 10px; animation: mpEntra .55s var(--dc-ease) .2s forwards; }
.noche .hz-op { display: flex; align-items: baseline; gap: 18px; padding: 6px 0; text-align: left; color: #F2F2F4;
  transition: transform var(--dc-t-lento) var(--dc-ease), opacity .3s ease; }
.noche .hz-op-t { font-size: 34px; line-height: 1.15; text-shadow: var(--n-brillo); }
.noche .hz-op-s { font-size: 21px; color: rgba(242,242,244,.55); white-space: nowrap; }
.noche .hz-op.mio .hz-op-s { color: #F2F2F4; text-shadow: var(--n-brillo); }
.noche .hz-op[disabled] { cursor: default; }
.noche .hz-op.lleno { opacity: .38; }
@media (any-hover: hover) { .noche .hz-op:not([disabled]):hover { transform: translateX(6px); } }

/* la lista de espera (05/10): los niveles como opciones de texto, el elegido encendido (nada de cápsula) */
.noche .hz-niveles { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 4px 26px;
  opacity: 0; translate: 0 10px; animation: mpEntra .55s var(--dc-ease) .2s forwards; }
.noche .hz-nv { padding: 6px 0; font-size: 34px; line-height: 1.15; color: rgba(242,242,244,.42); text-shadow: none;
  transition: color .3s ease, text-shadow .3s ease, transform var(--dc-t-lento) var(--dc-ease); }
.noche .hz-nv.mio { color: #F2F2F4; text-shadow: var(--n-brillo); }
@media (any-hover: hover) { .noche .hz-nv:hover { color: #F2F2F4; } }
.noche.alto .hz-niveles { margin-top: 12px; gap: 0 20px; }
.noche.alto .hz-nv { font-size: 22px; padding: 7px 0; }

/* volver, «ninguna hora me va», la nota: texto pequeño y apagado */
.noche .hz-volver { display: block; margin-top: 22px; font-size: 22px; color: rgba(242,242,244,.5); text-align: left;
  opacity: 0; animation: mpEntra .55s var(--dc-ease) .34s forwards; transition: color .3s ease; }
.noche .hz-volver.hz-otra { margin-top: 18px; color: rgba(242,242,244,.72); }
.noche .hz-volver + .hz-volver { margin-top: 10px; }
@media (any-hover: hover) { .noche .hz-volver:hover { color: #F2F2F4; } }
.noche .hz-nota { margin-top: 10px; font-size: 19px; color: rgba(242,242,244,.42);
  opacity: 0; animation: mpEntra .55s var(--dc-ease) .3s forwards; }
.noche .hz-ir[disabled] { opacity: .45; pointer-events: none; }

/* escribir cuándo te va bien: el campo invisible del cuaderno, con la letra del dato */
.noche .hz-campo { display: block; width: 100%; max-width: 22em; margin-top: 22px; padding: 4px 0; border: 0; outline: 0; background: none;
  border-radius: 0; box-shadow: none; font: inherit; font-size: 30px; line-height: 1.3; color: #F2F2F4; caret-color: #F2F2F4;
  -webkit-user-select: text; user-select: text; text-shadow: var(--n-brillo);
  opacity: 0; animation: mpEntra .55s var(--dc-ease) .2s forwards; }
.noche .hz-campo::placeholder { color: rgba(242,242,244,.28); text-shadow: none; }

/* el móvil (la sala en vertical): los tamaños de su dato y su enlace */
.noche.alto .hz-ops { margin-top: 12px; gap: 0; }
.noche.alto .hz-op { gap: 12px; padding: 5px 0; }
.noche.alto .hz-op-t { font-size: 21px; }
.noche.alto .hz-op-s { font-size: 14px; }
.noche.alto .hz-volver { margin-top: 12px; font-size: 15px; }
.noche.alto .hz-volver + .hz-volver { margin-top: 6px; }
.noche.alto .hz-nota { margin-top: 6px; font-size: 13px; }
.noche.alto .hz-campo { font-size: 19px; margin-top: 12px; }
.noche.alto .hz-lista li + li { margin-top: .22em; }
/* en el móvil un paso es más largo que un mensaje: la tarjeta se aparta un poco y el paso cabe */
.noche.alto .mp.hz-en-paso .mp-vis { opacity: .35; transition: opacity .5s ease; }

/* EL VELO DEL PAGO: lo que había se desvanece hasta dejar la sala vacía
   (el mismo grafito de la sala). Sólo opacidad. */
.hz-velo { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2C2D2E 0%, #16171A 48%, #0A0A0C 100%); opacity: 0; transition: opacity .9s var(--dc-ease, ease); }
.hz-velo.on { opacity: 1; }
.hz-velo.ido { opacity: 0; pointer-events: none; transition: opacity 1s var(--dc-ease, ease); }
.hz-velo-t { text-align: center; color: #F2F2F4; font-family: inherit; padding: 0 28px;
  opacity: 0; transition: opacity .8s ease .9s; }
.hz-velo.on .hz-velo-t { opacity: 1; }
.hz-velo.ido .hz-velo-t { opacity: 0; transition: opacity .3s ease; }
.hz-velo-f { font-size: clamp(22px, 2.6vw, 40px); line-height: 1.15; text-shadow: 0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.hz-velo-d { margin-top: 10px; font-size: clamp(15px, 1.4vw, 22px); color: rgba(242,242,244,.6); }
.hz-velo .hz-volver { display: inline-block; margin-top: 26px; font-size: clamp(14px, 1.2vw, 18px); color: rgba(242,242,244,.45);
  background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: inherit; opacity: 1; animation: none; }
@media (any-hover: hover) { .hz-velo .hz-volver:hover { color: #F2F2F4; } }
@media (prefers-reduced-motion: reduce) {
  .noche .hz-ops, .noche .hz-niveles, .noche .hz-volver, .noche .hz-nota, .noche .hz-campo { animation: none; opacity: 1; translate: 0 0; }
}


/* ══ EL CAMINO: el mapa de «solo» (02/10/2026) - ver frente/camino-js.js ══
   El lienzo es el de la pizarra (--dc-bg) y la tinta, la blanca de siempre.
   Las salas son rectángulos con la sombra de la nav (rectangular, blanda y
   baja: --dc-shadow-pill-metal), radio pequeño, nada de cápsulas.
   Hecha = vidrio claro y el título con el rotulador verde de la pizarra.
   Abierta = levantada. Sin abrir = además respira. Cerrada = plana y apagada.
   «скоро» = aún sin lección escrita. */

/* ── 1) la pestaña «solo» ── */
#alumno-panel-auto .cam-solo { display:flex; flex-direction:column; align-items:stretch; }
.cam-linea {
  display:flex; gap:.8em; align-items:baseline; justify-content:center;
  font-family:var(--dc-font); font-size:var(--dc-fs-30); color:var(--dc-ink);
  letter-spacing:var(--dc-tracking); margin:0 auto var(--dc-sp-8); text-shadow:var(--dc-shadow-text);
}
.cam-linea > span { opacity:.85; }
.cam-linea .cam-abrir { font-size:var(--dc-fs-30); padding:0; opacity:1; text-shadow:var(--dc-shadow-text-strong); transform-origin:center; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.filtros.cam-alas { margin-bottom:var(--dc-sp-8); }
.filtros.cam-alas .ent-op.cam-cerrada { opacity:.2; }
@media (any-hover: hover) { .filtros.cam-alas .ent-op.cam-cerrada:hover { opacity:.4; transform:none; } }
/* lo que aún no has abierto respira (el aura del alumno conectado, en blanco) */
.ent-op.cam-respira { animation:camRespira 6s ease-in-out infinite; }
.gal-item.cam-respira .gal-titulo > span { animation:camRespira 6s ease-in-out infinite; }
@keyframes camRespira {
  0%, 100% { text-shadow:var(--dc-shadow-text-strong); }
  50% { text-shadow:0 0 14px rgba(255,255,255,.95), 0 0 40px rgba(255,255,255,.55), var(--dc-shadow-text-strong); }
}
/* lo que se acaba de abrir: el destello de la casa (el mismo del pago) */
.ent-op.cam-nace { opacity:1; animation:naceBrilla 5.4s cubic-bezier(.3,0,.2,1) forwards; }

/* ── 2) el mapa ── */
#cam-ov {
  position:fixed; inset:0; z-index:2400; overflow:hidden;
  background:var(--dc-bg); opacity:0; transition:opacity .45s var(--dc-ease);
  -webkit-user-select:none; user-select:none;
}
#cam-ov.show { opacity:1; }
#cam-ov.hide { opacity:0; transition-duration:var(--dc-t-salida); }
#cam-ov .crear-marca { z-index:7; font-size:44px; top:calc(22px + env(safe-area-inset-top, 0px)); left:calc(30px + env(safe-area-inset-left, 0px)); }
/* la cabecera tapa el mapa que pasa por debajo: el mismo lienzo, fundido abajo */
.cam-cab {
  position:absolute; left:0; right:0; top:0; z-index:5; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  padding-top:calc(24px + env(safe-area-inset-top, 0px)); padding-bottom:72px;
  /* el lienzo medido a la pantalla (con background-attachment:fixed y la máscara, Chrome no lo pinta) */
  background:var(--dc-bg); background-size:100vw 100vh; background-position:left top;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 66px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 66px), transparent);
}
.cam-cab > * { pointer-events:auto; }
.filtros.cam-pisos { gap:var(--dc-sp-48); }
.filtros.cam-pisos .ent-op { text-transform:none; font-size:var(--dc-fs-40); }
.filtros.cam-pisos .ent-op.cam-cerrada:not(.active) { opacity:.22; }
.cam-cuenta {
  font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink);
  letter-spacing:var(--dc-tracking); opacity:.75; margin-top:var(--dc-sp-6); text-align:center; padding:0 24px;
}
.cam-vp { position:absolute; inset:0; touch-action:none; cursor:grab; }
.cam-vp:active { cursor:grabbing; }
.cam-mundo { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.cam-lineas { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.cam-pasillo { fill:none; stroke:rgba(255,255,255,.3); stroke-width:6; stroke-linecap:round; stroke-dasharray:1 18; }
.cam-pasillo.enc { stroke:rgba(255,255,255,.85); stroke-dasharray:none; }

.cam-zona { position:absolute; display:flex; flex-direction:column; color:var(--dc-ink); font-family:var(--dc-font); pointer-events:none; transition:opacity var(--dc-t-lento) var(--dc-ease); }
.cam-z-n { font-size:52px; line-height:1; letter-spacing:.5px; white-space:nowrap; text-shadow:var(--dc-shadow-text-strong); }
.cam-z-ru { font-size:24px; line-height:1; opacity:.7; margin-top:10px; white-space:nowrap; }
.cam-zona.cerrada, .cam-zona.cam-por-nacer { opacity:.32; }
.cam-zona.cam-nace { opacity:1; }
.cam-zona.cam-nace .cam-z-n { animation:naceBrilla 5.4s cubic-bezier(.3,0,.2,1) forwards; }

.cam-sala {
  position:absolute; box-sizing:border-box; border-radius:12px; padding:20px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--dc-font); color:var(--dc-ink); letter-spacing:.3px; cursor:pointer;
  transition:background var(--dc-t-lento) var(--dc-ease), box-shadow var(--dc-t-lento) var(--dc-ease),
             opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
.cam-s-t { font-size:34px; line-height:1.08; }
.cam-s-t > span { -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.cam-s-pie { font-size:22px; line-height:1; opacity:.75; }
.cam-sala.est-cerrada { background:rgba(255,255,255,.05); opacity:.42; }
.cam-sala.est-pronto { background:rgba(255,255,255,.1); }
.cam-sala.est-pronto .cam-s-t { opacity:.72; }
.cam-sala.est-abierta, .cam-sala.est-nueva { background:rgba(255,255,255,.17); box-shadow:var(--dc-shadow-pill-metal); }
.cam-sala.est-hecha { background:var(--dc-glass); box-shadow:var(--dc-shadow-pill-metal); }
.cam-sala.est-hecha .cam-s-t > span { background-image:linear-gradient(var(--hl-g), var(--hl-g)); padding:.02em .12em; border-radius:.22em; }
.cam-sala.est-nueva { animation:camRespiraSala 6s ease-in-out infinite; }
@keyframes camRespiraSala {
  0%, 100% { box-shadow:var(--dc-shadow-pill-metal), 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow:var(--dc-shadow-pill-metal), 0 0 22px rgba(255,255,255,.75), 0 0 70px rgba(255,255,255,.35); }
}
.cam-sala.cam-nace { animation:camNaceSala 3s cubic-bezier(.3,0,.2,1) both; }
@keyframes camNaceSala {
  0%   { box-shadow:var(--dc-shadow-pill-metal), 0 0 0 rgba(255,255,255,0); }
  18%  { box-shadow:var(--dc-shadow-pill-metal), 0 0 18px #fff, 0 0 70px rgba(255,255,255,.95), 0 0 160px rgba(255,255,255,.6); background:rgba(255,255,255,.7); }
  100% { box-shadow:var(--dc-shadow-pill-metal), 0 0 22px rgba(255,255,255,.25); }
}
.cam-sala.elegida { transform:scale(1.04); }
.cam-sala.cam-jefe .cam-s-t { font-size:40px; }

/* «ты здесь»: la palabra y, debajo, la marca que late, sobre la sala */
.cam-aqui {
  position:absolute; z-index:3; transform:translate(-50%, -100%); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; opacity:0;
  transition:left 1.4s var(--dc-ease), top 1.4s var(--dc-ease), opacity .6s var(--dc-ease);
}
.cam-aqui.ver { opacity:1; }
.cam-aqui-t { font-family:var(--dc-font); font-size:36px; line-height:1; color:#fff; white-space:nowrap; text-shadow:var(--dc-shadow-text-strong); margin-bottom:14px; }
.cam-aqui-p { width:16px; height:16px; border-radius:4px; background:#fff; margin-bottom:-8px; animation:camLatido 2.4s ease-out infinite; }
@keyframes camLatido {
  0% { box-shadow:0 0 0 0 rgba(255,255,255,.8); }
  100% { box-shadow:0 0 0 24px rgba(255,255,255,0); }
}

/* la ficha de la sala: abajo en vertical, a la derecha en horizontal; el
   mismo lienzo encima del mapa, que se funde por el borde */
.cam-ficha {
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  padding:var(--dc-sp-60) calc(28px + env(safe-area-inset-left, 0px)) calc(28px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; align-items:flex-start;
  color:var(--dc-ink); font-family:var(--dc-font); letter-spacing:var(--dc-tracking);
  background:var(--dc-bg); background-size:100vw 100vh; background-position:left bottom;
  -webkit-mask-image:linear-gradient(to top, #000 78%, transparent); mask-image:linear-gradient(to top, #000 78%, transparent);
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
.cam-ficha.ver { opacity:1; transform:none; pointer-events:auto; }
.cam-f-ala { font-size:var(--dc-fs-22); opacity:.7; }
.cam-f-t { font-size:var(--dc-fs-60); line-height:1.05; text-shadow:var(--dc-shadow-text-strong); margin:var(--dc-sp-6) 0 var(--dc-sp-10); }
.cam-f-puedo { font-size:var(--dc-fs-30); line-height:1.25; max-width:30ch; }
.cam-f-lecs { display:flex; flex-direction:column; align-items:flex-start; margin-top:var(--dc-sp-16); }
.cam-f-lec { display:flex; gap:.6em; align-items:baseline; text-align:left; text-transform:none; font-size:var(--dc-fs-30); opacity:.7; padding:var(--dc-sp-6) 0; }
.cam-f-lec.active { opacity:1; text-shadow:var(--dc-shadow-text-strong); }
.cam-f-lec.apagada { opacity:.32; cursor:default; }
@media (any-hover: hover) { .cam-f-lec.apagada:hover { opacity:.32; transform:none; } }
.cam-f-n { font-size:.72em; opacity:.75; }
.cam-f-nota { font-size:var(--dc-fs-30); line-height:1.25; opacity:.85; margin-top:var(--dc-sp-16); max-width:30ch; }
.cam-ficha .cam-f-ir { margin-top:var(--dc-sp-24); }

@media (min-width:900px) and (orientation:landscape) {
  .cam-ficha {
    left:auto; top:0; width:38vw; justify-content:center; background-position:right top;
    padding:0 var(--dc-sp-72) 0 calc(var(--dc-sp-60) + 4vw);
    -webkit-mask-image:linear-gradient(to right, transparent, #000 13%); mask-image:linear-gradient(to right, transparent, #000 13%);
    transform:translateX(24px);
  }
}
@media (max-width:700px) {
  #cam-ov .crear-marca { font-size:46px; left:calc(24px + env(safe-area-inset-left, 0px)); }
  .cam-cab { padding-top:calc(96px + env(safe-area-inset-top, 0px)); }
  .filtros.cam-pisos { gap:var(--dc-sp-60); }
  .filtros.cam-pisos .ent-op { font-size:var(--dc-fs-50); }
  .cam-cuenta { font-size:var(--dc-fs-30); }
  .cam-f-ala { font-size:var(--dc-fs-30); }
}
@media (prefers-reduced-motion: reduce) {
  .ent-op.cam-respira, .gal-item.cam-respira .gal-titulo > span, .cam-sala.est-nueva, .cam-aqui-p { animation:none; }
}
/* 02/10 - la sala FIRME (dominada, también al hablar con el tutor): el metal
   de «solo» en su nombre y un brillo quieto; la floja, nada en el plano (lo
   dice su ficha). */
.cam-sala.est-hecha.firme { box-shadow:var(--dc-shadow-pill-metal), 0 0 0 2px rgba(194,202,212,.55), 0 0 28px rgba(194,202,212,.28); }
.cam-sala.est-hecha.firme .cam-s-t > span { background-image:linear-gradient(180deg, #F2F4F7, #C2CAD4 45%, #8B97AB); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0; }
.cam-sala.est-hecha.firme .cam-s-pie { opacity:.95; }
.cam-f-tutor { font-size:var(--dc-fs-22); line-height:1.3; opacity:.8; margin-top:var(--dc-sp-10); max-width:34ch; }
/* 06/10 noche: la primera lección terminada (camino-js _camPrimera): la invitación a «no solo», con su enlace como «мой путь» */
.cam-f-primera b { font-weight:inherit; opacity:1; text-shadow:var(--dc-shadow-text-strong); }
.cam-f-primera .cam-f-tg { font-size:inherit; padding:0; opacity:1; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; transform-origin:left center; }
.cam-f-tutor.firme { opacity:1; }
/* 04/10 - LA PÍLDORA DE «solo»: sólo el título, en el centro de la píldora
   (Rolando: «las fotos no las necesitamos… el mismo título, sin más, no
   arriba, sino en el centro»). El nombre de arriba se calla. */
#screen-home .gal-item.gal-solo .gal-titulo { visibility:hidden; height:0; margin:0; }
#screen-home .gal-item.gal-solo .gal-vacia { padding:0 9%; box-sizing:border-box; text-align:center; text-wrap:balance;
  font-size:calc(var(--gal-w) * .105); line-height:1.1; color:#fff;
  filter:drop-shadow(0 calc(var(--gal-w) * .022) calc(var(--gal-w) * .03) rgba(20,30,45,.45)); }
#screen-home .gal-item.gal-solo.cam-respira .gal-vacia { animation:camRespira 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #screen-home .gal-item.gal-solo.cam-respira .gal-vacia { animation:none; } }


/* ═══ EL SORTEO DE TEMAS (03/10/2026, 2.ª vuelta) ═════════════════════
   La pared de fotos de momentos de borde a borde (las mismas .fr-t y sus
   destellos frTAparece · frTFlash · frTBrillo), el revoltijo en un lienzo
   con trazos de luz, y hablamosclub encima con su sombra blanca, del
   tamaño del club. La elegida vuela a la pizarra (temas-js). */
#tm-ov { position:fixed; inset:0; z-index:1290; overflow:hidden; pointer-events:auto;
  --n-brillo:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
#tm-ov .tm-velo { position:absolute; inset:0; background:#0E1016; opacity:0; }
#tm-ov .tm-lienzo { position:absolute; inset:0; width:100%; height:100%; display:block; }
#tm-ov .tm-humo { position:absolute; inset:0; width:100%; height:100%; display:block; }
#tm-ov .tm-pared { position:absolute; inset:0; }
#tm-ov.tm-sale { transition:opacity .45s var(--dc-ease); opacity:0; }
/* se encienden como en momentos (allí lo dispara .n-rec.centro; aquí, .enciende) */
#tm-ov .tm-t { opacity:0; }
/* (Rolando, 03/10: «cada una más lenta, que se vea suave»: lo de momentos, a un poco más de la mitad de velocidad) */
#tm-ov .enciende .tm-t { animation:frTAparece calc(2.4s * var(--tmk, 1)) var(--dc-ease) var(--d) both; }
#tm-ov .enciende .tm-t::before { animation:frTBrillo calc(3s * var(--tmk, 1)) ease-out var(--d) both; }
#tm-ov .enciende .tm-t::after { animation:frTFlash calc(1.6s * var(--tmk, 1)) ease-out var(--d) both; }
/* la elegida: su destello y el brillo blanco de la casa, que se queda */
#tm-ov .tm-elegida { z-index:2; box-shadow:0 24px 60px rgba(0,0,0,.5); will-change:transform; }
#tm-ov .tm-elegida.destella::before { animation:tmBrilloQueda calc(1.6s * var(--tmk, 1)) ease-out both; }
#tm-ov .tm-elegida.destella::after { animation:frTFlash calc(.9s * var(--tmk, 1)) ease-out both; }
@keyframes tmBrilloQueda { 0% { opacity:0; } 20% { opacity:1; } 100% { opacity:.75; } }
/* hablamosclub encima de todo, con su sombra blanca y en el sitio del logotipo de la pizarra */
#tm-ov .tm-marca { position:absolute; z-index:3; opacity:0; pointer-events:none; white-space:nowrap;
  top:min(40px, 2.8vw); left:min(56px, 3.9vw); font-size:min(78px, 5.42vw); line-height:1;
  font-family:'Coolvetica','DM Sans',sans-serif; font-weight:400; letter-spacing:.5px; color:#F2F2F4;
  text-shadow:0 0 18px rgba(242,242,244,.42), 0 0 44px rgba(242,242,244,.16); }

/* ── el logotipo de la pizarra, del tamaño del club (Rolando, 03/10) ──
   El club mide su escenario a 1440 de ancho: 78 px a 56·40 de la esquina;
   en el móvil (390 de ancho), 46 px a 24·34. Aquí, lo mismo en proporción.
   (html body: la hoja de la pizarra se añade DESPUÉS de esta, al arrancar.) */
html body #hc-ov #hc-marca, html body #lec-ov .crear-marca {
  font-size:min(78px, 5.42vw); top:min(40px, 2.8vw); left:min(56px, 3.9vw); }
@media (max-width:700px) {
  html body #hc-ov #hc-marca, html body #lec-ov .crear-marca, #tm-ov .tm-marca {
    font-size:min(46px, 11.8vw); top:calc(min(34px, 8.7vw) + env(safe-area-inset-top, 0px)); left:min(24px, 6.2vw); }
}

/* ── «Preguntas»: sólo el profe, y sólo con un tema sorteado ── */
#hc-preguntas { display:none !important; }
body.is-teacher #hc-ov:not(.hc-student) #hc-preguntas.tm-hay { display:inline-flex !important; }
body:not(.is-teacher) #hc-tema { display:none !important; }
#hc-ov.hc-student #hc-tema { display:none !important; }

/* la chuleta: a la derecha, sobre la pizarra, sin caja (la tinta blanca de la casa) */
.tm-chu { position:absolute; z-index:7; right:calc(36px + env(safe-area-inset-right, 0px)); top:110px; bottom:110px; width:min(31vw, 460px);
  overflow-y:auto; scrollbar-width:none; pointer-events:auto;
  font-family:var(--dc-font); letter-spacing:var(--dc-tracking); color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong);
  opacity:0; transform:translateX(18px); transition:opacity .35s var(--dc-ease), transform .45s var(--dc-ease); }
.tm-chu::-webkit-scrollbar { display:none; }
/* detrás, la penumbra del lado (como el texto de momentos): sin caja, sólo un degradado */
.tm-chu-sombra { position:absolute; z-index:6; top:0; right:0; bottom:0; width:min(46vw, 700px); pointer-events:none;
  background:linear-gradient(270deg, rgba(20,28,42,.62) 0%, rgba(20,28,42,.42) 45%, rgba(20,28,42,0) 100%);
  opacity:0; transition:opacity .4s var(--dc-ease); }
.tm-chu-sombra.abierta { opacity:1; }
@media (max-width:760px) { .tm-chu-sombra { left:0; top:auto; width:auto; height:62%; background:linear-gradient(0deg, rgba(20,28,42,.7) 0%, rgba(20,28,42,.45) 55%, rgba(20,28,42,0) 100%); } }
.tm-chu.abierta { opacity:1; transform:none; }
.tm-chu-b { margin-bottom:20px; }
.tm-chu-l { font-size:16px; opacity:.62; margin-bottom:5px; }
.tm-chu-x { font-size:21px; line-height:1.24; }
.tm-chu-x + .tm-chu-x { margin-top:6px; }
.tm-chu-giro .tm-chu-x { padding-left:1.25em; text-indent:-1.25em; }
.tm-chu-pie { display:flex; gap:22px; margin-top:8px; }
.tm-b { background:none; border:none; padding:4px 0; cursor:pointer; color:inherit; font-family:inherit; letter-spacing:inherit;
  font-size:17px; text-shadow:inherit; opacity:.55; transition:opacity .25s, transform .25s var(--dc-ease); }
.tm-b.on { opacity:1; }
@media (any-hover:hover) { .tm-b:hover { opacity:1; } }
@media (max-width:760px) {
  .tm-chu { left:18px; right:18px; width:auto; top:auto; bottom:96px; max-height:46%; }
  .tm-chu-x { font-size:18px; }
}

/* ── la ventanita de «Tema» (el mismo cristal que los moldes) ── */
#tm-panel { position:fixed; inset:0; z-index:1320; display:flex; align-items:center; justify-content:center; padding:var(--dc-sp-60);
  background:rgba(30,40,55,.30); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  opacity:0; transition:opacity var(--dc-t-entrada) var(--dc-ease); font-family:var(--dc-font); letter-spacing:var(--dc-tracking); }
#tm-panel.abierto { opacity:1; }
#tm-panel .tmp-cuerpo { display:flex; flex-direction:column; align-items:center; gap:var(--dc-sp-24);
  transform:translateY(calc(12 * var(--dc-u))); transition:transform var(--dc-t-entrada) var(--dc-ease); }
#tm-panel.abierto .tmp-cuerpo { transform:none; }
#tm-panel .tmp-titulo { font-size:var(--dc-fs-100); color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); line-height:1; margin-bottom:var(--dc-sp-8); }
#tm-panel .tmp-fila { display:flex; gap:var(--dc-sp-24); align-items:baseline; }
#tm-panel .tmp-op, #tm-panel .tmp-ir { background:none; border:none; cursor:pointer; padding:var(--dc-sp-8) var(--dc-sp-12);
  font-family:var(--dc-font); letter-spacing:var(--dc-tracking); color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong);
  font-size:var(--dc-fs-30); opacity:.45; transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease); }
#tm-panel .tmp-op.on { opacity:1; }
#tm-panel .tmp-ir { font-size:var(--dc-fs-50); opacity:1; margin-top:var(--dc-sp-16); }
#tm-panel .tmp-ir[disabled] { opacity:.35; cursor:default; }
#tm-panel .tmp-nota { font-size:var(--dc-fs-22); color:var(--dc-ink); opacity:.6; min-height:1.2em; text-shadow:var(--dc-shadow-text-strong); }
@media (any-hover:hover) { #tm-panel .tmp-op:hover, #tm-panel .tmp-ir:not([disabled]):hover { opacity:1; transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce) { #tm-ov .enciende .tm-t { animation-duration:.01s; } }


/* ══ EL TELÉFONO DE «solo» (04/10/2026, frente/fonosolo-js) ═══════════
   Uno para toda la sala. La pantalla mide lo que el vídeo de la lección
   (390 × 800) y lleva el degradado de la lección, así que el vídeo y el
   chat se funden con ella sin costura. Esquinas más rectas que antes (06/10: 55 px, las de un iPhone 16: 55 pt en 393 de ancho)
   (Rolando: «demasiado redondeadas») y el logotipo siempre en (30, 62). */
:is(.mp-vis, .fs-esc) > .fs { flex: none; position: relative; width: 390px; height: 800px; box-sizing: border-box; padding: 0; border-radius: 55px;
  background: none; box-shadow: 0 40px 80px rgba(20,30,45,.30), 0 6px 26px rgba(20,30,45,.18);   /* 04/10 noche: sin marco ni isla, sólo la pantalla */
  transform: scale(var(--mp-esc, 1)); transform-origin: center; cursor: pointer;
  transition: transform .6s var(--dc-ease, cubic-bezier(.25,.1,.25,1)); }
.fs-pantalla { position: relative; width: 390px; height: 800px; border-radius: 55px; overflow: hidden; isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: linear-gradient(100deg, #C3C9CD 0%, #A5B0BD 45%, #7F8EA6 100%); }
.fs-logo { position: absolute; left: 30px; top: 62px; z-index: 8; font-size: 40px; line-height: 1; color: #fff; white-space: nowrap; pointer-events: none;
  text-shadow: 0 14px 26px rgba(20,30,45,.42), 0 3px 8px rgba(20,30,45,.18); }
.fs-logo .marca-club { font-size: .4em; margin-left: .08em; }
.fs-capa { position: absolute; inset: 0; opacity: 0; transition: opacity .6s cubic-bezier(.25,.1,.25,1); pointer-events: none; }
/* qué capa se ve en cada modo */
.fs[data-modo="leccion"] .fs-lec, .fs[data-modo="camino"] .fs-camino,
.fs[data-modo="chat"] .fs-chat, .fs[data-modo="juntos"] .fs-chat { opacity: 1; }
.mp-vis.en-leccion .fs[data-modo="juntos"] .fs-lec { opacity: 1; z-index: 3; }
.mp-vis.en-leccion .fs[data-modo="juntos"] .fs-chat { opacity: 0; }
/* la lección grabada: los dos vídeos se relevan */
.fs-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; background: transparent; }
.fs-v.on { opacity: 1; }
.fs-v.on.entra { animation: fsEntra .5s ease both; }
@keyframes fsEntra { from { opacity: 0; } to { opacity: 1; } }

/* el camino: las lecciones en orden */
.fs-camino { padding: 140px 28px 40px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; }
.fs-cam-l { display: flex; align-items: center; gap: 16px; color: #fff; opacity: 0; transform: translateY(12px);
  text-shadow: 0 8px 18px rgba(20,30,45,.32), 0 2px 6px rgba(20,30,45,.16); }
.fs[data-modo="camino"] .fs-cam-l { animation: fsCam .7s cubic-bezier(.25,.1,.25,1) calc(.2s + var(--i) * .14s) both; }
@keyframes fsCam { to { opacity: 1; transform: none; } }
.fs-cam-n { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; line-height: 1;
  background: linear-gradient(90deg, #97A4BA 0%, #CCD2D8 100%); box-shadow: 0 10px 24px rgba(20,30,45,.24); }
.fs-cam-x { font-size: 25px; line-height: 1.15; }
.fs-cam-l.mas .fs-cam-n, .fs-cam-l.nueva .fs-cam-n { background: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.fs-cam-l.mas, .fs-cam-l.nueva { opacity: 0; }
.fs[data-modo="camino"] .fs-cam-l.nueva .fs-cam-x { opacity: .85; }

/* «no solo»: el chat de siempre, a la medida de esta pantalla */
.fs-chat .mp-charla { position: absolute; left: 0; right: 0; top: 130px; bottom: 36px; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 18px; padding: 0 22px; overflow: visible; }
.fs .mp-grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
/* quien contesta es «no solo», con su metal */
.fs .mp-de { font-size: 0; line-height: 1; padding-left: 18px; animation: mpSube .9s cubic-bezier(.25,.1,.25,1) forwards; opacity: 0; }
.fs .mp-de::before { content: "no solo"; font-size: 21px; letter-spacing: -.01em;
  background: linear-gradient(100deg, #FFFFFF 0%, #EEF2F6 40%, #C9D1DB 60%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 8px rgba(20,30,45,.35)); }
.fs .mp-l { max-width: 86%; padding: 18px 26px; border-radius: 34px; font-size: 25px; line-height: 1.28; color: #fff;
  background: linear-gradient(90deg, #97A4BA 0%, #CCD2D8 100%); text-shadow: none !important; box-shadow: 0 10px 24px rgba(20,30,45,.26);
  opacity: 0; scale: 1; translate: none; animation: mpSube .9s cubic-bezier(.25,.1,.25,1) forwards; }
.fs .mp-l.mp-yo { align-self: flex-end; background: linear-gradient(90deg, #97A4BA 0%, #CCD2D8 100%); }
.fs .mp-l.mp-tutor { align-self: flex-start; color: #fff; background: linear-gradient(90deg, #97A4BA 0%, #CCD2D8 100%); }
.fs .mp-l .mp-tx { display: inline; animation: mpTxDifu .9s cubic-bezier(.25,.1,.25,1) both; }
.fs .mp-l .mp-corr { display: block; margin-top: 14px; padding: 14px 0 0; border-radius: 0; background: none; border-top: 2px solid #D5D5D5;
  color: #fff; font-size: 22px; line-height: 1.28; text-shadow: none; }
.fs .mp-bts { align-self: flex-start; max-width: 90%; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; opacity: 1; translate: none;
  animation: mpSube .9s cubic-bezier(.25,.1,.25,1) .15s both; }
.fs .mp-bt { flex: 0 0 auto; padding: 13px 20px; border-radius: 28px; font-size: 21px; line-height: 1.2; color: #fff; text-shadow: none;
  background: linear-gradient(90deg, #97A4BA 0%, #CCD2D8 100%); box-shadow: 0 8px 20px rgba(20,30,45,.24); transition: transform .25s ease, background .25s ease; }
.fs .mp-bt.pulsa { transform: scale(.94); background: linear-gradient(90deg, #7F8DA6 0%, #B6BECB 100%); }
.fs .mp-voz { padding: 22px 28px; display: flex; align-items: center; }
.fs .mp-onda { display: flex; align-items: center; gap: 7px; height: 46px; }
.fs .mp-onda b { display: block; width: 10px; height: calc(var(--h) * 5px); min-height: 10px; border-radius: 5px; background: #fff; animation: none; scale: none; }
.fs .mp-aviso-tg { position: absolute; top: 128px; left: 20px; right: 20px; z-index: 7; padding: 15px 20px; border-radius: 28px; display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(90deg, #97A4BA 0%, #CCD2D8 100%); box-shadow: 0 12px 30px rgba(20,30,45,.3);
  opacity: 0; transform: translateY(-16px); filter: blur(6px); transition: transform .8s cubic-bezier(.25,.1,.25,1), opacity .8s ease, filter .8s ease; }
.fs .mp-aviso-tg b { font-size: 16px; font-weight: 400; color: #fff; opacity: .85; }
.fs .mp-aviso-tg span { font-size: 20px; line-height: 1.25; color: #fff; }
.mp-vis.con-aviso .fs .mp-aviso-tg { opacity: 1; transform: none; filter: none; }
.fs .mp-candado { position: absolute; left: 50%; top: 50%; z-index: 7; width: 150px; height: 170px; margin: -85px 0 0 -75px; pointer-events: none;
  opacity: 0; transform: scale(.6); transition: opacity .6s ease, transform .8s cubic-bezier(.25,.1,.25,1); }
.mp-vis.con-candado .fs .mp-candado { opacity: 1; transform: scale(.75); }
.mp-vis.con-candado .fs .mp-charla { opacity: .18; transition: opacity .6s ease; }

/* «solo», la portada de la sala: como la de «más», con su lema */
.mp-marca-solo .fs-lema { margin-top: 26px; font-size: 44px; line-height: 1.18; text-align: center; white-space: pre-line; color: rgba(242,242,244,.86);
  text-shadow: 0 0 22px rgba(242,242,244,.28); }
.mp-marca-solo .mp-metal { font-size: 280px; }
.noche.alto .mp-marca-solo .fs-lema { font-size: 30px; }

/* el texto de la sala: «solo» y «no solo» en su metal, al tamaño de la frase */
.mp-texto .mp-metal { font-size: inherit; line-height: inherit; vertical-align: baseline; }
.mp-texto .mp-metal .cr-tier-t { font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit; filter: drop-shadow(0 3px 7px rgba(10,14,22,.55)); }
.mp-texto .mp-metal .mas-luz { display: none; }
.mp-frase .mp-metal .mas-luz { display: block; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; animation: masLuz 2.6s cubic-bezier(.3,0,.2,1) .4s both; }
@media (prefers-reduced-motion: reduce) { .fs-capa, .fs-v { transition: none; } .fs-cam-l { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* «уроки без учителя»: al pasar de pantalla, la sombra del texto se veía
   cortada en un cuadrado. Es el desenfoque animado (dcEntra/dcSale): un
   filtro recorta lo que pinta a su caja, y el brillo del texto se sale de
   ella; al acabar, de golpe, aparecía entero. En las salas, el relevo es el
   fundido con su pequeño desliz, sin filtro: nada se corta. */
.nv-cla :is(.mp-texto, .mp-vis).dc-entra { animation-name: dcEntraLigera; will-change: opacity, transform; }
.nv-cla :is(.mp-texto, .mp-vis).dc-sale { animation-name: dcSaleLigera; will-change: opacity, transform; }

/* el escaparate de «solo»: el nombre a la izquierda y el teléfono a la derecha
   (en el móvil, el nombre arriba y el teléfono debajo, pequeño) */
.es-fono .fs-esc { position: absolute; right: 12%; top: 50%; width: 390px; height: 800px; margin-top: -400px; z-index: 6; pointer-events: none; }
.es-fono .fs-esc > .fs { transform: scale(.8); transform-origin: 50% 50%; cursor: default; }
.noche.ancho .es-solo.es-fono .emx-marca { right: 46%; }
.noche:not(.ancho):not(.alto) .es-solo.es-fono .emx-marca { right: 44%; }
/* en el móvil no cabe con el nombre y las esquinas: allí el nombre, solo */
.noche.alto .es-fono .fs-esc { display: none; }
.noche.ancho .es-solo.es-fono .emx-marca { left: 4%; }
.noche:not(.alto) .es-solo.es-fono .emx-sub { font-size: 34px; }


/* ══ FLUIDEZ (05/10/2026 · frente/fluidez-js.js) ═══════════════════════
   Rolando, en el móvil: «que las animaciones sean completas de principio a
   fin, sin reinicios de ubicaciones». */

/* EL ROTULADOR SEPARA, SIN SALTOS. Rolando prefiere que el resaltado
   aparte lo que resalta (el relleno del rotulador empuja a las vecinas),
   pero suave como mantequilla. En la pizarra de «solo» el apartarse lo hace
   hcGuion._separa con transform (frente/leccion-pizarra.js): aquí sólo se
   quitan las dos animaciones que se le cruzaban, la que hacía crecer el
   relleno (recolocaba la línea en cada fotograma) y el saltito de 1 px del
   pulso (una animación de transform pisa la del deslizamiento). Queda el
   barrido, al mismo ritmo que el apartarse. */
#hc-ov.hc-guion .rd-w.hl-yellow, #hc-ov.hc-guion .rd-w.hl-pink, #hc-ov.hc-guion .rd-w.hl-green { padding:.04em .1em; }
#hc-ov.hc-guion .rd-w.rd-new-hl { animation:hlSweep .62s cubic-bezier(.33,0,.18,1) both; }
/* En la voz de la lección el resaltado nace con la frase: ya ocupa su sitio
   desde el principio y sólo se barre el color. */
:is(#lec-ov, #lec-voz) .rd-w.rd-new-hl { animation:hlSweep .45s cubic-bezier(.25,.1,.25,1) both; }

/* LA PALABRA DEL BANCO SE QUEDA EN GRIS SIN SALTAR. Al colocarla, la
   levantada volvía a su sitio de golpe y allí se encendía (chipLeave empieza
   en opacidad 1) para apagarse. Ahora la que se ve es la que vuela; en el
   banco su sitio aparece ya bajado y se va asomando en gris. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip.leaving {
  animation:fluQueda .3s var(--dc-ease) both;
}
@keyframes fluQueda { from { opacity:0; transform:none; } to { opacity:.26; transform:none; } }
/* y por debajo no queda ninguna transición a medias: al acabar fluQueda
   asomaba la de antes (de 1 a .26, más lenta) y la palabra gris se volvía a
   encender un momento. En gris se está quieta; para volver, chipReturn. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip.used:not(.removing) {
  transition:none !important;
}
/* AL TOCARLA NO DA UN TIRÓN. Dos reglas viejas de toda la plataforma
   (la del «scale» suelto y la de .anim-premium) la encogían al 94 % sin
   transición al poner el dedo, y al soltarlo volvía de golpe antes de
   levantarse. En los ejercicios de la casa la pulsación es la suya, con la
   curva del sistema. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip:active { scale:none !important; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip:not(.used):active {
  transform:translateY(calc(-2 * var(--dc-u))) scale(.985) !important;
}
/* La píldora sigue vacía mientras la palabra viaja, y se enciende al llegar. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot, .match-drop-zone).flu-llega {
  background:var(--ej-vidrio-hondo) !important; box-shadow:var(--ej-hundido) !important;
}

/* «COMPROBAR» NO EMPUJA. Debajo del ejercicio aparecía «всё верно» y bajaba
   el botón 37 px de golpe. En la lección eso ya lo dice la voz (como la
   consigna, que tampoco se repite); y lo que sí aparece, aparece fundido. */
#lec-ov .result-banner { display:none !important; }
#lec-ov .ex-completed-banner { animation:lecVoz var(--dc-t-entrada) var(--dc-ease) both; }
#lec-ov .ex-wysiwyg { transition:opacity var(--dc-t-lento) var(--dc-ease); }

/* EL TECLADO. Lo que se recoloca se desliza (_fluDesliza mueve «translate»,
   aparte del tamaño), y la capa tiene fondo de sobra por arriba y por abajo:
   si Safari la empuja mientras sube el teclado, se ve más lección, nunca la
   página de debajo. */
#lec-ov .lec-dentro { transition:transform var(--dc-t-lento) var(--dc-ease), translate var(--dc-t-lento) var(--dc-ease); }
#lec-ov::before, #lec-ov::after { content:''; position:absolute; left:0; right:0; height:100vh; background:var(--dc-bg); pointer-events:none; }
#lec-ov::before { bottom:100%; }
#lec-ov::after { top:100%; }
html.flu-quieta, html.flu-quieta body { overscroll-behavior:none; }


/* ══ LO QUE ROLANDO VIO EN SU iPHONE (05/10/2026 · frente/iphone-css.css + iphone-js.js) ═══════════════ */

/* SOMBRA CORTADA EN EL TÍTULO DE LA CANCIÓN (la que suena, abajo en la sala de música). El título lleva
   `overflow:hidden` para los puntos suspensivos y la sombra (una brisa de luz debajo de las letras) se
   pintaba fuera de su caja: salía cortada en recto. Se le da aire a la caja, más que la sombra (cabe
   desplazamiento + desenfoque), y se compensa con margen negativo: el texto no se mueve ni un píxel
   (ver hablamos-sombras-cortadas). */
.noche .nm-son-titulo, .noche .nm-son-artista {
  padding:14px 26px 22px; margin:-14px -26px -22px;
}
.noche .nm-son-t { gap:6px; }

/* EL CARRUSEL DE LAS LECCIONES, SÓLIDO CON EL DEDO. Rolando: «rebota si no deslizas largo, no se siente sólido».
   El encaje era de JavaScript: 170 ms después de soltar, una animación suave llevaba la fila a la ficha más
   cercana, con el impulso del iPhone todavía en marcha: la fila frenaba, volvía y se posaba. Con el dedo el
   encaje lo hace ahora el navegador (scroll-snap, el mismo de las listas nativas de iOS): sigue al dedo 1:1 y se
   posa en la ficha que toca según dónde estás y a qué velocidad sueltas. Con ratón (arrastrar, rueda) sigue
   el de siempre (iphone-js.js sólo se aparta en pantallas táctiles). */
@media (pointer: coarse) {
  .galeria-carril { scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
  .galeria-carril .gal-item { scroll-snap-align:center; }
}

/* LAS DOS ESQUINAS DEL ESCAPARATE EN EL MÓVIL («моя карта» y «мои занятия»). Estaban hechas como cápsulas claras
   (fondo gris translúcido y un aro) y en lo oscuro del club eso no es de la casa: en el ordenador son texto con
   el brillo del club. Aquí lo mismo: texto suelto, sin fondo ni aro, con el área de toque de siempre.
   Opción A (la que queda): una en cada esquina de abajo. Opción B (?esquinas=b): las dos en una sola fila,
   centrada, separadas por un punto, como la nav de «mis clases · disponibles · ajustes». */
.noche.alto :is(.cu-club, .cu-clases) { padding:14px 8px; border-radius:0; background:none; box-shadow:none; }
.noche.alto .cu-club { left:14px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
.noche.alto .cu-clases { right:14px !important; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); padding:14px 8px; }
.noche.alto :is(.cu-club, .cu-clases) .cu-t { font-size:17px; color:rgba(242,242,244,.7); text-shadow:var(--n-brillo); }
.noche.alto.esq-b .cu-club { left:50%; right:auto; translate:-100% 0; padding-right:14px; }
.noche.alto.esq-b .cu-clases { left:50%; right:auto !important; padding-left:14px; }
.noche.alto.esq-b .cu-clases .cu-t::before { content:'·'; position:absolute; left:-1px; top:50%; translate:-50% -52%; opacity:.5; }

/* EL TECLADO EN LA LECCIÓN, 3.ª versión (08/10 noche; ver iphone-js.js). Al escribir sólo se desliza el contenido
   (translate: lo mueve la tarjeta gráfica, sin recalcular ni repintar; la versión de antes animaba una máscara
   que obligaba a repintar toda la lección en cada fotograma, y por eso iba a tirones). Lo que pasa por debajo
   del logo se funde en una CORTINA QUIETA, con el mismo fondo que la capa (mismo degradado, mismo tamaño). */
html #lec-ov .lec-dentro { transition:transform var(--dc-t-lento) var(--dc-ease), translate .3s cubic-bezier(.22,.8,.24,1); }
#lec-ov .tq-cortina { position:absolute; left:0; right:0; top:0; height:var(--tq-techo, 120px); z-index:1; pointer-events:none;
  background:var(--dc-bg); background-size:100% var(--tq-H, 100vh); background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  opacity:0; transition:opacity .22s ease; }
#lec-ov.tq-subido .tq-cortina { opacity:1; }
#lec-ov .lec-dentro .tq-velado { opacity:0 !important; transition:opacity .2s ease; pointer-events:none; }
/* Si Safari corre la vista un instante, por encima de la capa sigue el mismo fondo: nunca asoma una franja */
#lec-ov::before { content:''; position:absolute; left:0; right:0; bottom:100%; height:100vh; background:var(--dc-bg); pointer-events:none; }
/* El cuadro grande con el teclado: su alto es lo que se ve; lo de más corre por dentro */
#lec-ov .fw-body.tq-caja { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-width:none; }
#lec-ov .fw-body.tq-caja::-webkit-scrollbar { display:none; }
/* Sin zoom de doble toque en ningún sitio (el de dos dedos lo para iphone-js.js) */
html { touch-action:manipulation; }


/* ══ EL CARRUSEL QUE TIEMBLA (06/10/2026 · ver carrusel-js.js) ═════════════════════════════════════════════
   Mientras el carril se mueve (.gal-mueve, la pone carrusel-js) el tamaño y la opacidad de las fichas siguen al scroll en el mismo
   fotograma, sin la transición de 160 ms que las dejaba atrás (la ficha llegaba, se pasaba y el título seguía creciendo después de
   parar). Quieto, las transiciones de siempre (pasar el ratón, pulsar) no cambian. */
.galeria-carril.gal-mueve .gal-item { transition:filter var(--dc-t-lento) var(--dc-ease) !important; }
.galeria-carril.gal-mueve .gal-titulo { transition:none !important; }
/* el título (con su sombra de filtro) es su propia capa: al cambiar de escala sólo se recompone, no se repinta toda la ficha */
.galeria-carril .gal-titulo { will-change:transform; }
/* EL CARRUSEL CON SU PROPIO RITMO (06/10 noche, ver carrusel-js.js): la fila ya no se desliza a mano ni se encaja sola. El gesto
   sólo da la orden y el viaje lo hace _pasoMover; el desplazamiento vertical sigue siendo de la página. */
.galeria-carril {
  overflow-x:hidden !important; scroll-snap-type:none !important; scroll-behavior:auto !important; touch-action:pan-y; }
/* LA PÍLDORA CAMBIA DE ALTO CON SUAVIDAD (punto 12): como ya cambiaba de ancho. Al ir a «solo» o «más» (el metal es más alto)
   el alto y la altura saltaban de golpe; ahora viajan con la misma curva y duración que el ancho, en lo claro y en el club. */
:is(#screen-home, #screen-student) .alumno-tabs .aula-tab-indicator, .noche :is(.n-tabs, .mp-tabs) .aula-tab-indicator {
  transition:transform var(--dc-t-viaje, .9s) var(--dc-ease), width var(--dc-t-viaje, .9s) var(--dc-ease),
             height var(--dc-t-viaje, .9s) var(--dc-ease), top var(--dc-t-viaje, .9s) var(--dc-ease); }
/* la barra clara del móvil tampoco se desliza a mano: un gesto elige la pestaña de al lado (carrusel-js) */
@media (max-width:699px), (orientation:portrait) and (max-width:1100px) {
  #screen-home .alumno-tabs:not(.prof-tabs) { overflow-x:hidden !important; touch-action:pan-y; }
  /* la fila viaja con la píldora: misma curva y misma duración (unmundo-js, _unFilaAlaVista) */
  #screen-home .alumno-tabs:not(.prof-tabs) > .aula-tab { transition:translate var(--dc-t-viaje) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease), color var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease); }
  #screen-home .alumno-tabs:not(.prof-tabs) > .aula-tab-indicator { transition:transform var(--dc-t-viaje) var(--dc-ease), width var(--dc-t-viaje) var(--dc-ease), height var(--dc-t-viaje) var(--dc-ease), top var(--dc-t-viaje) var(--dc-ease), translate var(--dc-t-viaje) var(--dc-ease); }
  #screen-home .alumno-tabs:not(.prof-tabs).fila-quieta > * { transition:none !important; }
}


/* ══ UNA SOLA LÍNEA DE OPCIONES (06/10/2026 noche · ver linea-js.js) ════════════════════════════════════════════════════════
   La fila cabe en una línea: lo que no cabe se esconde (.ln-fuera) y la última palabra es «ещё» (.ln-mas), una opción más, sin
   cápsula, un poco más apagada. La hoja: el velo de los avisos de la casa (.aviso-ov: desenfoque 26 + saturación) y las mismas
   opciones (.ent-op) en columna, entrando una tras otra con la curva de la casa. Sólo opacidad, transform y filter. */
.filtros .ent-op.ln-fuera { display:none !important; }
.filtros .ent-op.ln-mas { opacity:.62; font-style:normal; }
@media (any-hover: hover) { .filtros .ent-op.ln-mas:hover { opacity:1; } }

#ln-hoja { position:fixed; inset:0; z-index:2460; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#ln-hoja.on { pointer-events:auto; }
#ln-hoja .ln-velo { position:absolute; inset:0; background:rgba(30,40,55,.14); opacity:0; transition:opacity .42s var(--dc-ease);
  -webkit-backdrop-filter:blur(26px) saturate(130%); backdrop-filter:blur(26px) saturate(130%); }
html.sin-desenfoque #ln-hoja .ln-velo { background:rgba(30,40,55,.88); -webkit-backdrop-filter:none; backdrop-filter:none; }
#ln-hoja.ln-oscura .ln-velo { background:linear-gradient(180deg, rgba(14,18,24,.42) 0%, rgba(14,18,24,.72) 26%, rgba(14,18,24,.92) 62%, rgba(14,18,24,.95) 100%); }
#ln-hoja.on .ln-velo { opacity:1; }
#ln-hoja .ln-lista { position:relative; margin:0; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; gap:var(--dc-sp-14, 14px);
  max-height:calc(100% - 2 * var(--dc-sp-60, 60px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y:auto; scrollbar-width:none; overscroll-behavior:contain; padding:var(--dc-sp-24, 24px) var(--dc-sp-40, 40px); box-sizing:border-box; }
#ln-hoja .ln-lista::-webkit-scrollbar { display:none; }
#ln-hoja .ent-op { font-size:var(--dc-fs-40); transform-origin:center; text-align:center; padding:var(--dc-sp-8, 8px) var(--dc-sp-16, 16px);
  opacity:0; transform:translateY(calc(14 * var(--dc-u, .75px))); filter:blur(2px);
  transition:opacity .5s var(--dc-ease) calc(var(--ln-i, 0) * 34ms), transform .7s var(--dc-ease) calc(var(--ln-i, 0) * 34ms),
             filter .5s var(--dc-ease) calc(var(--ln-i, 0) * 34ms), text-shadow var(--dc-t-lento) var(--dc-ease); }
#ln-hoja.on .ent-op { opacity:.62; transform:none; filter:none; }
#ln-hoja.on .ent-op.active { opacity:1; text-shadow:var(--dc-shadow-text-strong); }
#ln-hoja.on .ent-op.cam-cerrada { opacity:.22; }
@media (any-hover: hover) { #ln-hoja.on .ln-lista:hover .ent-op:not(:hover) { opacity:.32; } #ln-hoja.on .ent-op:hover { opacity:1; transform:scale(1.06); } }
#ln-hoja.on .ent-op:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
/* al irse, todas a la vez y deprisa (como la salida de los avisos) */
#ln-hoja:not(.on) .ent-op { transition-delay:0s !important; transition-duration:.28s !important; }
@media (max-width:700px) { #ln-hoja .ent-op { font-size:var(--dc-fs-40); } }
@media (prefers-reduced-motion: reduce) { #ln-hoja .ln-velo, #ln-hoja .ent-op { transition:none; } }


/* ══ LA APP EN LA PANTALLA DE INICIO (05/10/2026 · frente/app-js.js) ══════════════════════════════════════════
   El aviso «añade hablamos club a tu pantalla de inicio»: una hoja que sube desde abajo, en el lenguaje del club (texto
   con el brillo, nada de cápsula clara en lo oscuro), con el dibujo de los tres toques. Sólo transform y opacity. */
#app-aviso { position:fixed; inset:0; z-index:2147482000; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(8,9,11,0); transition:background .6s ease; pointer-events:none;
  font-family:var(--dc-font, 'Coolvetica', 'DM Sans', sans-serif); font-weight:var(--dc-weight, 400); letter-spacing:var(--dc-tracking, normal); }
#app-aviso.on { background:rgba(8,9,11,.5); pointer-events:auto; }
#app-aviso .app-hoja { width:100%; max-width:480px; box-sizing:border-box; padding:30px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(160deg, #2C2D2E 0%, #16171A 55%, #0E0E10 100%); border-radius:26px 26px 0 0;
  box-shadow:0 -24px 70px rgba(0,0,0,.55); color:#F2F2F4;
  opacity:0; transform:translateY(34px); transition:opacity .6s ease, transform .75s var(--dc-ease, cubic-bezier(.42,0,.18,1)); }
#app-aviso.on .app-hoja { opacity:1; transform:none; }
#app-aviso .app-frase { font-size:22px; line-height:1.15; color:rgba(242,242,244,.78); text-shadow:0 0 22px rgba(242,242,244,.3); text-wrap:balance; }
/* el logo del club, la misma pieza que en su esquina (.noche-marca-t con el neón y la luz de «club»), un poco más grande */
#app-aviso .app-marca { margin-top:8px; line-height:1; }
#app-aviso .app-marca .noche-marca-t { font-size:56px; cursor:default; }
#app-aviso .app-ventajas { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
#app-aviso .app-ventajas li { font-size:19px; line-height:1.25; color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.32); }
#app-aviso .app-pasos { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:paso; }
#app-aviso .app-pasos li { display:flex; align-items:center; gap:16px; font-size:18px; line-height:1.2; }
#app-aviso .app-ico { flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
#app-aviso .app-ico svg { width:30px; height:30px; fill:none; stroke:#F2F2F4; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(242,242,244,.4)); }
#app-aviso .app-cerrar { appearance:none; border:0; background:none; margin:22px 0 0; padding:8px 0; font:inherit; font-size:20px; text-transform:none; letter-spacing:inherit;
  color:rgba(242,242,244,.72); cursor:pointer; text-shadow:0 0 18px rgba(242,242,244,.3); -webkit-tap-highlight-color:transparent; }
#app-aviso .app-cerrar:active { color:#fff; }
@media (prefers-reduced-motion: reduce) { #app-aviso, #app-aviso .app-hoja { transition:none; } }
/* ══ LA APP BAJO EL RELOJ (06/10/2026 · viewport-fit=cover + barra «black-translucent», ver parchear-frente.js y app-js _sai) ══
   La página llega hasta los bordes: el reloj y la raya de abajo quedan ENCIMA. Dos casos:
   · club oscuro y parte clara con el club (html.cab-club): ya se colocan con el escenario, que empieza debajo del reloj
     (_nocheMedir / _cabMedir restan los márgenes); aquí no hay que hacer nada.
   · parte clara de siempre (cabeza clásica, profesor, aulas, la entrada): cada pantalla deja el margen por dentro.
   Todo vale 0 en Safari normal y en el ordenador. */
html:not(.cab-club) #app > .screen { padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }   /* (las pantallas llevan su propio fondo y van en absoluto: el margen va DENTRO de cada una) */
#screen-login { padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }
/* La hora en esta barra sale SIEMPRE blanca: sobre lo claro hace falta una franja suave detrás (sólo en lo claro; html.sin-franja la quita) */
html::after { content:''; position:fixed; left:0; right:0; top:0; height:env(safe-area-inset-top, 0px); z-index:2147481500; pointer-events:none;
  background:linear-gradient(to bottom, rgba(58,70,88,.50) 0%, rgba(58,70,88,.26) 55%, rgba(58,70,88,0) 100%); }
html.noche-oscura::after, html.sin-franja::after { display:none; }
/* ══ EL LOGO DE LA ESQUINA, UNO SOLO (06/10/2026 · app-js _logoMedir) ═══════════════════════════════════════════════════════════
   Mismo sitio y mismo tamaño en la lección (todas sus pantallas), la pizarra, el mapa, el sorteo de temas, la parte clara y las hojas de «nueva sección», «elegir clase» y ajustes (todas las .crear-marca); el
   club oscuro (.noche-marca) ya es la referencia: usa esta misma cuenta con el escenario. Sólo cambian color y sombra de cada capa.
   (html:not(.vitrina): la grabación de los vídeos del teléfono lleva su propio logo, que se queda como está.) */
html:not(.vitrina) body :is(.crear-marca, #hc-ov #hc-marca, #tm-ov .tm-marca) {
  left:var(--lg-x) !important; top:var(--lg-y) !important; margin:0 !important; padding:0 !important; }
html:not(.vitrina) body :is(.crear-marca, #hc-ov #hc-marca, #tm-ov .tm-marca, #screen-home .topbar-logo-text) {
  font-size:var(--lg-fs) !important; letter-spacing:var(--lg-ls) !important; line-height:1 !important; }
/* la «club» pequeña, igual que la del club (.noche-marca-t) */
html:not(.vitrina) body :is(.crear-marca, #hc-ov #hc-marca, #tm-ov .tm-marca, #screen-home .topbar-logo-text) .marca-club {
  display:inline-block !important; font-size:.38em !important; margin-left:.16em !important; letter-spacing:normal !important; }
/* parte clara: el texto sale del flujo y se coloca como los demás; el hueco que dejaba (su alto) se conserva con un relleno para que
   «выйти» y las pestañas no se muevan */
html:not(.vitrina) #screen-home .topbar-logo-text { position:absolute !important; left:var(--lg-x) !important; top:var(--lg-y) !important; margin:0 !important; z-index:6; }
html:not(.vitrina) #screen-home .topbar-logo-pill::before { content:'H'; display:block; visibility:hidden; width:1px; overflow:hidden; white-space:nowrap;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-120, 120px); line-height:1; height:var(--cab-relleno, auto); }
@media (max-width:480px) { html:not(.vitrina) #screen-home .topbar-logo-pill::before { font-size:var(--dc-fs-68, 68px); } }
/* las hojas de «elegir clase» y de ajustes empezaban debajo de un logo pequeño: ahora el cuerpo empieza debajo del logo de la esquina */
html:not(.vitrina) body :is(#elegir-ov .crear-cuerpo, .ajustes-cuerpo) { padding-top:calc(var(--lg-y) + var(--lg-fs) + 18px) !important; }
/* ══ LA APP SIN SESIÓN, CORTA POR ABAJO (08/10/2026 · app-js _pwaSobra) ═══════════════════════════════════════════════
   Captura de Rolando: la app de la pantalla de inicio, sin sesión, acababa 64 px antes del borde y debajo asomaba el fondo
   negro de la página. iOS daba a la ventana menos alto que la pantalla. Con --pwa-sobra (lo que falta, sólo en la app) las
   capas a pantalla completa bajan hasta el borde; sin falta vale 0 y no cambia nada. */
html .noche, html #muro, html #bv { bottom:calc(-1 * var(--pwa-sobra, 0px)); }


/* ══ LA PUERTA DEL CLUB, YA DE PORTADA (07/10/2026, frente/entrada-js.js) ══════════════════════════════════
   La puerta va ANCLADA ARRIBA (no centrada): al cambiar «хочу в клуб» ↔ «я уже в клубе» la marca no se mueve,
   sólo crece o se recoge lo de debajo (persianas). Cabe en una pantalla, sin scroll. Una tarjeta a la vez. */
#muro { align-items:flex-start !important; overflow:hidden; }
#muro .mu-caja { align-items:flex-start; padding-top:clamp(28px, 11vh, 130px); padding-bottom:24px; transition:transform var(--dc-t-entrada) var(--dc-ease), opacity .6s var(--dc-ease), filter .6s var(--dc-ease); }
#muro .mu-centro { align-self:flex-start; }
#muro .mu-lado { align-self:flex-start; margin-top:clamp(40px, 15vh, 190px); }
/* lo que se pliega: los campos y las líneas de debajo, con su aire */
#muro .ent-campo.persiana { max-height:calc(140 * var(--dc-u)); }
html #muro.pr-tg .mu-nombre:not(.plegada) { display:block !important; }
html #muro.pr-tg .mu-correo, html #muro.pr-tg .mu-clave { display:block !important; }
/* «хочу в клуб» en la web (07/10 noche): se acepta lo legal antes de ir a Telegram (como en la mini app) */
html #muro.pr-tg.en-web-crear .mu-acepto { display:flex !important; }
#muro .mu-acepto.persiana { max-height:120px; }
@media (max-width:900px) { #muro .mu-acepto { font-size:13px; line-height:1.35; padding:8px 4px; margin:6px auto 0; text-align:left; } }
#muro .en-tg { display:block; margin:var(--dc-sp-20, 18px) auto 0; padding:0; border:0; background:none; cursor:pointer; font:inherit;
  font-size:var(--dc-fs-30, 18px); color:var(--dc-ink, #F2F2F4); opacity:.85; max-height:80px; -webkit-tap-highlight-color:transparent; }
@media (any-hover:hover) { #muro .en-tg:hover { opacity:1; text-shadow:0 0 22px rgba(242,242,244,.4); } }
#muro .en-tg-dice { max-width:calc(620 * var(--dc-u)); margin:var(--dc-sp-14, 12px) auto 0; text-align:center; font-size:var(--dc-fs-22, 15px); line-height:1.35; color:var(--dc-ink-70, rgba(242,242,244,.7)); max-height:80px; }
#muro .rec-pista.persiana { max-height:120px; }
#muro .rec-pista.persiana.plegada { margin-top:0; }

/* ── UNA TARJETA A LA VEZ ── todas en el mismo sitio; la de delante se funde con la siguiente (sin moverse) */
#muro .en-escena { position:relative; width:280px; height:216px; }
#muro .en-item { position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; filter:blur(10px); transform:scale(.985); pointer-events:none;
  transition:opacity 1s var(--dc-ease), filter 1s var(--dc-ease), transform 1s var(--dc-ease); }
#muro .en-item.on { opacity:1; filter:none; transform:none; }
#muro .en-carta { position:relative; width:260px; height:164px; flex:0 0 auto; margin-top:6px; }
#muro .en-carta .cr-carta { position:absolute; left:0; top:0; transform:scale(.3333); transform-origin:0 0; }
#muro .en-pz-caja { position:relative; width:260px; height:164px; display:flex; align-items:center; justify-content:center; margin-top:6px; }
#muro .en-pz-caja .cl-combo { display:inline-block; }
#muro .en-pz { width:240px; height:157px; }
#muro .en-pz .mp-clase { transform:scale(.2182); }
#muro .en-item .mu-cap { font-size:20px; }
#muro .mu-lado .mu-plan-t { min-height:0; }
html.sin-desenfoque #muro .en-item { filter:none; }

/* ── 07/10 tarde (Rolando): el logo más grande, que imponga; y en «хочу в клуб» SU tarjeta grande, aprovechando el sitio ── */
#muro .mu-marca { font-size:calc(180 * var(--dc-u)); transition:font-size var(--dc-t-entrada) var(--dc-ease); }
#muro.en-crear .en-escena { width:440px; height:310px; }
#muro.en-crear .en-carta { width:420px; height:265px; }
#muro.en-crear .en-carta .cr-carta { transform:scale(.5385); }
#muro .en-escena, #muro .en-carta { transition:width var(--dc-t-entrada) var(--dc-ease), height var(--dc-t-entrada) var(--dc-ease); }
#muro .en-carta .cr-carta { transition:transform var(--dc-t-entrada) var(--dc-ease); }

/* ── EL MÓVIL Y LA TABLETA: la puerta arriba, la tarjeta debajo, centrada; todo en una pantalla ── */
@media (max-width:900px) {
  #muro .mu-caja { min-height:100%; height:100dvh; padding-top:clamp(20px, 7vh, 90px); padding-bottom:max(16px, env(safe-area-inset-bottom)); gap:0; justify-content:flex-start; align-items:center; }
  #muro .mu-centro { align-self:stretch; }
  #muro .mu-lado { align-self:center; margin-top:auto; padding-top:16px; gap:10px; }
  #muro .en-escena { width:230px; height:180px; }
  #muro .en-carta, #muro .en-pz-caja { width:210px; height:132px; }
  #muro .en-carta .cr-carta { transform:scale(.2692); }
  #muro .en-pz { width:194px; height:127px; }
  #muro .en-pz .mp-clase { transform:scale(.1764); }
  #muro .en-item .mu-cap { font-size:17px; }
  #muro .mu-lado .mu-plan-t { font-size:15px; }
}
@media (max-width:700px) {
  #muro .mu-caja { padding-top:clamp(16px, 6vh, 64px); }
  #muro .mu-motivo { font-size:15px; margin-top:10px; }
  #muro .mu-tabs { padding:18px 0 4px; }
  #muro .ent-campo { font-size:24px; margin-top:8px; padding:6px 0; }
  #muro .ent-campo.persiana { max-height:60px; }
  #muro .ent-accion { font-size:30px; margin-top:10px; }
  #muro .en-tg { font-size:17px; margin-top:12px; }
  #muro .rec-pista { font-size:14px !important; margin-top:10px !important; }
  #muro .ent-pie { margin-top:10px; }
  #muro .ent-pie a { font-size:16px; }
  #muro .ent-pie .mu-olvido { margin-bottom:8px; }
}
/* pantallas bajas (un iPhone con las barras del navegador): más apretado, y la tarjeta más pequeña */
@media (max-width:900px) and (max-height:760px) {
  #muro .mu-marca { font-size:44px; }
  #muro .en-escena { width:190px; height:150px; }
  #muro .en-carta, #muro .en-pz-caja { width:172px; height:108px; }
  #muro .en-carta .cr-carta { transform:scale(.2205); }
  #muro .en-pz { width:160px; height:105px; }
  #muro .en-pz .mp-clase { transform:scale(.1455); }
  #muro .en-item { gap:8px; }
}
@media (max-width:900px) and (max-height:640px) {
  #muro .mu-lado .mu-plan-t { display:none; }
  #muro .en-escena { width:160px; height:122px; }
  #muro .en-carta, #muro .en-pz-caja { width:144px; height:91px; }
  #muro .en-carta .cr-carta { transform:scale(.1846); }
  #muro .en-pz { width:136px; height:89px; }
  #muro .en-pz .mp-clase { transform:scale(.1236); }
}
/* el móvil: el logo grande y la tarjeta de «хочу в клуб» a lo ancho (lo de arriba es corto: sólo el nombre y Telegram) */
@media (max-width:900px) {
  #muro .mu-marca { font-size:68px; }
  #muro.en-crear .en-escena { width:340px; height:236px; }
  #muro.en-crear .en-carta { width:330px; height:208px; }
  #muro.en-crear .en-carta .cr-carta { transform:scale(.4231); }
}
@media (max-width:900px) and (max-height:760px) {
  #muro .mu-marca { font-size:56px; }
  #muro.en-crear .en-escena { width:310px; height:214px; }
  #muro.en-crear .en-carta { width:300px; height:189px; }
  #muro.en-crear .en-carta .cr-carta { transform:scale(.3846); }
}
@media (max-width:900px) and (max-height:640px) {
  #muro .mu-marca { font-size:48px; }
  #muro.en-crear .en-escena { width:270px; height:184px; }
  #muro.en-crear .en-carta { width:260px; height:164px; }
  #muro.en-crear .en-carta .cr-carta { transform:scale(.3333); }
}
@media (max-width:900px) and (max-height:700px) {
  #muro:not(.en-crear) .mu-lado .mu-plan-t { display:none; }
}
@media (max-width:360px) {
  #muro .mu-marca { font-size:54px; }
  #muro.en-crear .en-escena { width:300px; }
  #muro.en-crear .en-carta { width:290px; height:183px; }
  #muro.en-crear .en-carta .cr-carta { transform:scale(.3718); }
}
/* ordenadores bajos: que quepa sin scroll */
@media (min-width:901px) and (max-height:860px) {
  #muro .mu-caja { padding-top:clamp(20px, 6vh, 80px); }
  #muro .mu-marca { font-size:calc(150 * var(--dc-u)); }
  #muro .mu-tabs { padding:calc(32 * var(--dc-u)) 0 calc(12 * var(--dc-u)); }
}

/* ── AL ENTRAR: la puerta se difumina y la sala se oscurece (luego se abre el club) ── */
#muro.en-sale .mu-caja { opacity:0; filter:blur(14px); transform:scale(.98); }
#muro.en-sale .mu-velo { background:#0B0B0D; transition:background .6s var(--dc-ease); }
html.en-saliendo body { pointer-events:none; }

/* ── LA MÚSICA: el brillo de los géneros ya no se corta por los lados ── */
.noche:not(.alto) .nm-generos { left:0 !important; padding-left:60px !important; padding-right:90px !important; }
.noche:not(.alto) .rc-generos { padding-left:60px; padding-right:90px; margin-left:-60px; }
.noche.alto .nm-generos, .noche.alto .rc-generos { padding-top:40px !important; padding-bottom:40px !important; margin-top:-12px; }

/* ── EL CARTEL DEL TRÁILER EN EL MÓVIL (entrada-js _enTrAviso): la sala difuminada, el logo grande, una frase; se disuelve ── */
.noche .en-tr-aviso { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(11,11,13,.55); -webkit-backdrop-filter:blur(22px) saturate(.9); backdrop-filter:blur(22px) saturate(.9);
  opacity:0; transition:opacity .6s var(--dc-ease, ease); -webkit-tap-highlight-color:transparent; cursor:pointer; }
.noche .en-tr-aviso.on { opacity:1; }
.noche .en-tr-aviso.fuera { opacity:0; transition:opacity .55s var(--dc-ease, ease); }
.noche .en-tr-caja { padding:0 32px; transform:translateY(10px); filter:blur(8px); transition:transform .7s var(--dc-ease, ease), filter .7s var(--dc-ease, ease); }
.noche .en-tr-aviso.on .en-tr-caja { transform:none; filter:none; }
.noche .en-tr-aviso.fuera .en-tr-caja { filter:blur(10px); transform:scale(.98); }
.noche .en-tr-marca { font-size:64px; line-height:1; white-space:nowrap; color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.42), 0 0 44px rgba(242,242,244,.16); }
.noche .en-tr-marca span { font-size:.42em; margin-left:.12em; }
.noche .en-tr-t { margin:26px auto 0; max-width:300px; font-size:22px; line-height:1.3; color:#F2F2F4; text-shadow:0 0 22px rgba(242,242,244,.3); }
.noche .en-tr-toca { margin-top:22px; font-size:15px; color:rgba(242,242,244,.55); }
html.sin-desenfoque .noche .en-tr-aviso { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(11,11,13,.9); }

/* ── LAS FRANJAS DEL MÓVIL (reloj arriba, raya abajo) DEL COLOR DE LO QUE SE VE (07/10 tarde) ──
   Rolando: «si estuviste en la zona clara, le das a salir y regresas al club, las franjas son claras». La página nacía clara
   (fondo y theme-color) y se oscurecía al abrirse el club, un momento después: el iPhone se quedaba con el claro. Ahora quien
   va a ver el club (sin sesión, o con el club directo) nace oscuro desde el primer pintado; al abrirse el club manda él
   (_nocheColorBarra) y al cerrarse vuelve lo claro. */
html.franja-oscura, html.franja-oscura body { background:#0B0B0D !important; }
html.franja-oscura::after { display:none; }
/* 07/10 (Rolando: «si le das выйти por un segundo aparece la página de inicio de sesión antigua clara; eso no debe aparecer nunca»):
   la entrada clara no se ve ni al salir ni mientras carga el club */
html.franja-oscura #screen-login, html.en-saliendo #screen-login, html.en-saliendo #app { visibility:hidden !important; }