/* ═══ TEMA CONGELADO ═══════════════════════════════════════════════
   Esto es EXACTAMENTE lo que el motor de temas generaba en cada carga
   a partir de theme.json (806 valores). Se calculó una vez y se dejó
   escrito: mismos píxeles, pero sin fetch a /api/theme, sin generar
   CSS con JavaScript al arrancar y, sobre todo, sin el parpadeo de
   "colores por defecto → tema real" en el primer pintado.
   theme.json sigue en el servidor: si algún día hay que retocar algo,
   se cambia aquí a mano o se vuelve a generar. ══════════════════════ */
:root {
  --bg: #b8c4d4;
  --bg2: #a8b8cc;
  --accent: #3a7bff;
  --accent2: #34c47c;
  --danger: #ff4d5e;
  --text: #1a2233;
  --text2: #3a4a62;
  --accent-rgb: 58,123,255;
  --accent2-rgb: 52,196,124;
  --danger-rgb: 255,77,94;
  --r: 18px;
  --r-sm: 10px;
  --r-xs: 7px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 99px;
  --font-size-base: 15px;
  --font: 'DM Sans';
  --glass: rgba(255,255,255,0.28);
  --glass-md: rgba(255,255,255,0.38);
  --glass-hi: rgba(255,255,255,0.52);
  --border: rgba(255,255,255,0.35);
  --border-lo: rgba(255,255,255,0.17999999999999997);
  --button-radius: 11px;
  --button-shadow-blur: 40px;
  --button-shadow-y: 11px;
  --button-font-size: 17px;
  --button-blur: 0px;
  --button-inset-blur: 26px;
  --button-inset-bottom-y: 3px;
  --button-inset-bottom-blur: 12px;
  --button-hover-lift: 2px;
  --button-text: #ffffff;
  --button-saturate: 140%;
  --button-inset-opacity: 0;
  --button-inset-bottom-opacity: 0.16;
  --button-hover-fill: rgba(188,198,209,0.58);
  --tab-bar-blur: 0px;
  --tab-bar-radius: 11px;
  --tab-bar-shadow-blur: 40px;
  --tab-bar-shadow-y: 11px;
  --tab-bar-font-size: 18px;
  --tab-bar-padding-y: 12px;
  --tab-bar-padding-x: 20px;
  --tab-bar-fill: rgba(188,198,209,0.48);
  --tab-bar-border: rgba(255,255,255,0.35);
  --tab-bar-shadow-opacity: 0.24;
  --button-fill: rgba(188,198,209,0.48);
  --button-border: rgba(255,255,255,0.35);
  --button-shadow: rgba(26,34,51,0.24);
  --pills-col-width: 275px;
  --pills-col-height-offset: 120px;
  --pills-col-gap: 35px;
  --pills-col-padding-top: 56px;
  --pills-col-padding-x: 36px;
  --pills-col-padding-bottom: 40px;
  --pills-fade-top: 64px;
  --pills-fade-bottom: 56px;
  --pill-radius: 20px;
  --pill-pad-y: 18px;
  --pill-pad-x: 24px;
  --pill-font-size: 19px;
  --pill-blur: 0px;
  --pill-inset-blur: 26px;
  --pill-inset-bottom-y: 3px;
  --pill-inset-bottom-blur: 12px;
  --pill-shadow-y: 11px;
  --pill-shadow-blur: 40px;
  --pill-hover-lift: 6px;
  --topic-card-radius: 21px;
  --topic-card-shadow-y: 11px;
  --topic-card-shadow-blur: 40px;
  --exercise-radius: 20px;
  --exercise-blur: 24px;
  --exercise-shadow-y: 4px;
  --exercise-shadow-blur: 20px;
  --chip-radius: 48px;
  --chip-shadow-blur: 40px;
  --chip-shadow-y: 11px;
  --chip-font-size: 17px;
  --slot-radius: 20px;
  --slot-height: 34px;
  --slot-min-width: 90px;
  --slot-shadow-blur: 30px;
  --slot-shadow-y: 11px;
  --notebook-width: 290px;
  --notebook-radius: 26px;
  --notebook-blur: 36px;
  --notebook-shadow-y: 10px;
  --notebook-shadow-blur: 43px;
  --pill-line-height: 1.22;
  --pill-saturate: 140%;
  --pill-inset-opacity: 0;
  --pill-inset-bottom-opacity: 0.16;
  --pill-shadow-opacity: 0.24;
  --pill-shadow-hover-opacity: 0.32;
  --pill-fill: rgba(188,198,209,0.48);
  --pill-hover-fill: rgba(188,198,209,0.58);
  --pill-text: #ffffff;
  --topic-card-fill: rgba(188,198,209,0.48);
  --topic-card-border: rgba(255,255,255,0.35);
  --topic-card-shadow-opacity: 0.24;
  --exercise-fill: rgba(255,255,255,0.32);
  --exercise-border: rgba(255,255,255,0.55);
  --exercise-shadow-opacity: 0.08;
  --chip-fill: rgba(201,213,225,0.48);
  --chip-border: rgba(255,255,255,0.35);
  --chip-shadow-opacity: 0.24;
  --slot-fill: rgba(235,235,235,0.48);
  --slot-filled-fill: rgba(235,235,235,0.88);
  --slot-border: rgba(255,255,255,0.35);
  --slot-shadow-opacity: 0.24;
  --notebook-fill: rgba(188,197,207,0.48);
  --notebook-shadow-opacity: 0.3;
  --notebook-saturate: 80%;
  --notebook-inset-blur: 40px;
  --notebook-inset-opacity: 0;
  --notebook-inset-bottom-y: 4px;
  --notebook-inset-bottom-blur: 31px;
  --notebook-inset-bottom-opacity: 0.14;
  --notebook-border: rgba(255,255,255,0);
  --press-scale: 0.96;
  --anim-ease: cubic-bezier(.25,.1,.25,1);
  --anim-speed: 1.000;
}
body { font-family:'DM Sans', sans-serif; font-size:15px; }
.class-pill{border:0px solid rgba(255,255,255,0.35);box-shadow:inset 0 0 26px rgba(16,22,34,0), inset 0 -3px 12px rgba(16,22,34,0.16), 0px 11px 40px rgba(26,34,51,0.24);font-weight:400;letter-spacing:0.2px;font-family:'Coolvetica','DM Sans',sans-serif;}
.tb-btn,.back-btn,.otra-clase-btn{border:0px solid rgba(255,255,255,0.35);box-shadow:inset 0 0 26px rgba(16,22,34,0), inset 0 -3px 12px rgba(16,22,34,0.16), 0px 11px 40px rgba(26,34,51,0.24);}
.back-btn,.otra-clase-btn{font-family:'Coolvetica','DM Sans',sans-serif;font-size:17px;font-weight:400;letter-spacing:0.2px;color:#ffffff;text-shadow:0px 1px 9px rgba(26,34,51,0.35);}
.session-tabs{border-bottom:0px solid rgba(255,255,255,0.35);box-shadow:0px 11px 40px rgba(26,34,51,0.24);}
.session-tabs .aula-tab{font-family:'Coolvetica','DM Sans',sans-serif;font-weight:400;letter-spacing:0.2px;font-size:18px;}
.session-tabs .aula-tab:not(.active){color:#ffffff;}
.session-tabs .aula-tab.active{color:#1a2233;}
.topic-card{border:0px solid rgba(255,255,255,0.35);box-shadow:inset 0 0 26px rgba(16,22,34,0), inset 0 -3px 12px rgba(16,22,34,0.16), 0px 11px 40px rgba(26,34,51,0.24);}
.ex-wysiwyg{border:0px solid rgba(255,255,255,0.55);box-shadow:inset 0 0 0px rgba(16,22,34,0.26), inset 0 0px 6px rgba(16,22,34,0.14), 0px 4px 20px rgba(26,34,51,0.08);}
.live-lesson-block{background:rgba(255,255,255,0.32);border:0px solid rgba(255,255,255,0.55);border-radius:20px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 0 0px rgba(16,22,34,0.26), inset 0 0px 6px rgba(16,22,34,0.14), 0px 4px 20px rgba(26,34,51,0.08);}
.ex-wysiwyg-body .sentence-line,.live-block-body .sentence-line{color:#1a2233;font-family:'Canela Text','DM Sans',sans-serif;font-size:17px;}
.w-chip{border:0px solid rgba(255,255,255,0.35);box-shadow:inset 0 0 42px rgba(16,22,34,0), inset 0 -3px 11px rgba(16,22,34,0.16), 0px 11px 40px rgba(26,34,51,0.24);padding:10px 20px;font-family:'Coolvetica','DM Sans',sans-serif;font-size:17px;font-weight:400;letter-spacing:0.2px;color:#ffffff;text-shadow:0px 1px 9px rgba(26,34,51,0.35);--chip-hover-lift:6px;}
.w-chip:hover{background:rgba(201,213,225,0.58);transform:translateY(-6px);}
.drop-slot,.match-drop-zone{border:0px solid rgba(255,255,255,0.35);box-shadow:inset 0 0 0px rgba(16,22,34,0), inset 0 0px 0px rgba(16,22,34,0), inset 0 1px 0 rgba(255,255,255,0.6), 0px 11px 30px rgba(26,34,51,0.24);font-family:'Coolvetica','DM Sans',sans-serif;font-size:19px;font-weight:400;letter-spacing:0px;color:#ffffff;}
.notebook-col{border:0px solid rgba(255,255,255,0);box-shadow:inset 0 0 40px rgba(16,22,34,0), inset 0 -4px 31px rgba(16,22,34,0.14), 0px 10px 43px rgba(26,34,51,0.3);}
.col-block{background:rgba(214,221,230,0.48);backdrop-filter:blur(36px) saturate(80%);-webkit-backdrop-filter:blur(36px) saturate(80%);border:1px solid rgba(255,255,255,0);border-radius:26px;box-shadow:inset 0 0 40px rgba(16,22,34,0.26), inset 0 -4px 14px rgba(16,22,34,0.14), 0px 10px 30px rgba(26,34,51,0.12);min-height:150px;}
.col-block-title,.col-title-input{font-family:'Coolvetica','DM Sans',sans-serif;font-size:18px;font-weight:400;letter-spacing:0.3px;color:#ffffff;padding:12px 16px 10px;}
.col-block-title{border-bottom:1px solid rgba(255,255,255,0.22);}
.col-grid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.col-drop{padding:12px;gap:7px;}
.col-block-add{min-height:150px;border-radius:26px;}
.col-write-input{font-family:'Coolvetica','DM Sans',sans-serif;font-size:18px;font-weight:400;letter-spacing:0px;line-height:1.55;color:#ffffff;padding:12px 16px 16px;min-height:100px;}
.modal{background:rgba(220,228,238,0.96);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,0.35);border-radius:22px 22px 0 0;box-shadow:inset 0 0 0px rgba(16,22,34,0), inset 0 0px 0px rgba(16,22,34,0);}
.f-input{background:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.35);border-radius:10px;font-size:14px;color:#1a2233;padding:10px 13px;box-shadow:inset 0 0 0px rgba(16,22,34,0), inset 0 0px 0px rgba(16,22,34,0);}
.tpl-card{background:rgba(255,255,255,0.45);border:1.5px solid rgba(255,255,255,0.35);border-radius:18px;box-shadow:inset 0 0 0px rgba(16,22,34,0), inset 0 0px 0px rgba(16,22,34,0);}
.toast{background:rgba(26,34,51,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;color:#ffffff;font-size:13px;box-shadow:0px 8px 24px rgba(26,34,51,0.3);}
.back-btn,.otra-clase-btn{padding:10px 20px;}
.topic-card-title,.topic-card-title-small{font-family:'Coolvetica','DM Sans',sans-serif;font-size:22px;font-weight:400;letter-spacing:0.2px;color:#ffffff;text-shadow:0px 1px 17px rgba(26,34,51,0.35);}
.describe-input{background:rgba(235,240,248,0.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid rgba(255,255,255,0.7);border-radius:22px;padding:14px 20px;box-shadow:inset 0 0 0px rgba(16,22,34,0), inset 0 0px 0px rgba(16,22,34,0), 0px 2px 12px rgba(26,34,51,0.08);font-family:'Coolvetica','DM Sans',sans-serif;font-size:17px;font-weight:400;letter-spacing:0.3px;color:#1a2233;}
.sv-instruction{font-family:'Coolvetica','DM Sans',sans-serif;font-size:17px;font-weight:400;letter-spacing:0.3px;color:#3a4a62;}
.so-select{background-color:rgba(235,240,248,0.72);border:1.5px solid rgba(255,255,255,0.7);border-radius:99px;box-shadow:0px 1px 4px rgba(26,34,51,0.06);font-family:'DM Sans','DM Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:0px;color:#1a2233;}
.check-btn{background:rgba(26,34,51,1);border:0px solid rgba(255,255,255,0);border-radius:99px;padding:11px 26px;box-shadow:inset 0 0 0px rgba(16,22,34,0), inset 0 0px 0px rgba(16,22,34,0), 0px 4px 16px rgba(26,34,51,0.22);font-family:'Coolvetica','DM Sans',sans-serif;font-size:16px;font-weight:400;letter-spacing:0.4px;color:#ffffff;}
.result-banner{font-family:'Coolvetica','DM Sans',sans-serif;font-size:19px;font-weight:400;letter-spacing:0.2px;}
.result-banner.ok{background:rgba(207,215,225,1);color:#16a34a;}
.result-banner.bad{background:rgba(255,77,94,0.08);color:#ff4d5e;}
.notebook-empty{color:rgba(255,255,255,0.5);font-family:'Coolvetica','DM Sans',sans-serif;font-size:20px;font-weight:400;}
.session-tabs .aula-tab.active::after{background:#3a7bff;height:2px;width:70%;}
.active-lesson-banner{background:rgba(188,198,209,0.48);border:0px solid rgba(255,255,255,0.35);border-radius:27px;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);padding:23px 20px;box-shadow:inset 0 0 17px rgba(16,22,34,0.07), inset 0 -3px 29px rgba(16,22,34,0.16), 0px 11px 40px rgba(26,34,51,0.24);}
.active-lesson-title{font-family:'Coolvetica','DM Sans',sans-serif;font-size:38px;font-weight:400;letter-spacing:0.2px;color:#ffffff;}
.active-lesson-label{color:#929292;}
.active-lesson-dot{background:#929292;}
.active-lesson-sub{color:#8c94a4;}
.active-lesson-img{height:360px;object-fit:cover;border-radius:17px;}
.active-lesson-btn{background:rgba(169,182,210,0.48);border-radius:18px;color:#ffffff;font-size:19px;font-family:'Coolvetica','DM Sans',sans-serif;}
.anim-premium .topic-card:active,.anim-premium .subsec-pill:active,.anim-premium .check-btn:active,.anim-premium .active-lesson-btn:active,.anim-premium .w-chip:active,.anim-premium .class-pill:active,.anim-premium .tb-btn:active,.anim-premium .back-btn:active,.anim-premium .otra-clase-btn:active{transform:scale(var(--press-scale)) !important;transition:transform calc(.14s * var(--anim-speed)) var(--anim-ease) !important;}
.anim-premium .topic-card,.anim-premium .subsec-pill,.anim-premium .w-chip,.anim-premium .class-pill,.anim-premium .check-btn,.anim-premium .active-lesson-btn{transition:transform calc(.28s * var(--anim-speed)) var(--anim-ease), box-shadow calc(.28s * var(--anim-speed)) var(--anim-ease), background calc(.28s * var(--anim-speed)) var(--anim-ease) !important;}
.design-ripple{position:fixed;border-radius:50%;transform:scale(0);opacity:.5;pointer-events:none;z-index:9999;animation:designRipple calc(.6s * var(--anim-speed,1)) ease-out forwards;}
@keyframes designRipple{to{transform:scale(1);opacity:0;}}
.login-card{background:rgba(188,198,209,0.48);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);border:0px solid rgba(255,255,255,0.35);border-radius:27px;box-shadow:inset 0 0 17px rgba(16,22,34,0.07), inset 0 -3px 29px rgba(16,22,34,0.16), 0px 11px 40px rgba(26,34,51,0.24);}
.login-logo{display:inline-block;background:rgba(188,198,209,0.48);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);border:0px solid rgba(255,255,255,0.35);border-radius:47px;padding:10px 20px;box-shadow:inset 0 0 26px rgba(16,22,34,0.26), inset 0 -3px 12px rgba(16,22,34,0.16), 0px 11px 40px rgba(26,34,51,0.24);font-family:'Coolvetica','DM Sans',sans-serif;font-size:28px;font-weight:400;letter-spacing:0.2px;color:#ffffff;}
.login-sub{font-family:'DM Sans','DM Sans',sans-serif;font-size:12px;font-weight:400;letter-spacing:0.7px;color:#ffffff;}
.login-label{font-family:'DM Sans','DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.8px;color:#ffffff;}
.login-register-link{font-family:'Coolvetica','DM Sans',sans-serif;font-size:15px;font-weight:400;letter-spacing:0.3px;color:#1a2233;}
.login-register-link a{color:#ffffff;}
.login-input{background:rgba(255,255,255,0.65);border:0px solid rgba(255,255,255,0.35);border-radius:50px;padding:12px 15px;box-shadow:inset 0 0 0px rgba(16,22,34,0.26), inset 0 0px 8px rgba(16,22,34,0.16);font-family:'DM Sans','DM Sans',sans-serif;font-size:15px;font-weight:400;letter-spacing:0px;color:#1a2233;}
.login-btn{background:rgba(26,34,51,1);border:0px solid rgba(255,255,255,0);border-radius:99px;padding:14px 14px;box-shadow:inset 0 0 0px rgba(16,22,34,0), inset 0 0px 0px rgba(16,22,34,0), 0px 0px 0px rgba(26,34,51,0);font-family:'Coolvetica','DM Sans',sans-serif;font-size:18px;font-weight:400;letter-spacing:0.5px;color:#ffffff;}
@media (prefers-reduced-motion: no-preference){
.w-chip{transition:all 0.525s cubic-bezier(.25,.1,.25,1), scale 0.315s cubic-bezier(.25,.1,.25,1);}
.w-chip:active{scale:0.94;transition:all 0.525s cubic-bezier(.25,.1,.25,1), scale 0.158s cubic-bezier(.25,.1,.25,1);}
.topic-card{transition:all 0.525s cubic-bezier(.25,.1,.25,1), scale 0.315s cubic-bezier(.25,.1,.25,1);}
.topic-card:active{scale:0.94;transition:all 0.525s cubic-bezier(.25,.1,.25,1), scale 0.158s cubic-bezier(.25,.1,.25,1);}
}


/* ═══════════════════════════════════════════════════════════════════
   LOS EJERCICIOS, EN EL AIRE            (Rolando, 04/09/2026)
   ═══════════════════════════════════════════════════════════════════
   "En el bloque de ejercicios creo que simplemente dejaremos de tener
   bloques en general, y dejar que sean bloques invisibles por estructura,
   porque visualmente no se alínea con el resto de la plataforma."

   Toda la plataforma está hecha de palabras sueltas sobre el degradado:
   la nav, las opciones, los nombres de los alumnos, las clases. Los
   ejercicios eran lo único que seguía siendo una app de formulario -
   tarjetas con borde, cápsulas, desplegables del sistema, botones
   redondeados oscuros. Aquí se les quita todo eso.

   Las tres reglas que sustituyen a las cajas:
     1. NADA ENCIERRA NADA. Ni cápsula, ni borde, ni tarjeta. Lo que
        separa un ejercicio del siguiente es aire y una línea difuminada
        que nace y muere sin tocar los bordes.
     2. EL HUECO ES UNA SOMBRA. Donde falta una palabra no hay una caja
        vacía: hay la sombra de algo levantado que todavía no está.
     3. LO CORRECTO Y LO INCORRECTO SON AURAS, no bordes de color - el
        mismo verde y el mismo rojo difuminado de la app de autodidacta
        (.line-ok / .line-bad) y del alumno conectado (.student-aura).

   Este bloque va DESPUÉS de <style id="tema-congelado"> a propósito: el
   tema congelado pinta .w-chip, .check-btn y compañía, y a igualdad de
   especificidad gana el último. Casi todo va scopeado a las dos
   pantallas donde se ve una clase, así que el editor de ejercicios y las
   vistas previas de los modales viejos siguen intactos. */

:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) {
  --ej-fs:        calc(34 * var(--dc-u));   /* la oración */
  --ej-fs-palabra:calc(28 * var(--dc-u));   /* el banco de palabras */
  --ej-radio:     calc(44 * var(--dc-u));   /* esquinas de las fotos */
  --ej-aura-ok:   0 0 calc(10 * var(--dc-u)) rgba(72,205,140,.90),
                  0 0 calc(26 * var(--dc-u)) rgba(72,205,140,.48),
                  0 0 calc(56 * var(--dc-u)) rgba(46,180,110,.24);
  --ej-aura-mal:  0 0 calc(10 * var(--dc-u)) rgba(255,110,125,.90),
                  0 0 calc(26 * var(--dc-u)) rgba(255,110,125,.48),
                  0 0 calc(56 * var(--dc-u)) rgba(230,70,90,.22);
  --ej-caja-ok:   0 0 calc(22 * var(--dc-u)) rgba(72,205,140,.55),
                  0 0 calc(70 * var(--dc-u)) rgba(72,205,140,.28),
                  0 calc(18 * var(--dc-u)) calc(40 * var(--dc-u)) rgba(15,20,30,.30);
  --ej-caja-mal:  0 0 calc(22 * var(--dc-u)) rgba(255,110,125,.55),
                  0 0 calc(70 * var(--dc-u)) rgba(255,110,125,.28),
                  0 calc(18 * var(--dc-u)) calc(40 * var(--dc-u)) rgba(15,20,30,.30);
  --ej-foto-sombra: 0 calc(18 * var(--dc-u)) calc(42 * var(--dc-u)) rgba(15,20,30,.34);
  --ej-foto-sombra-alta: 0 calc(30 * var(--dc-u)) calc(64 * var(--dc-u)) rgba(15,20,30,.44);

  /* ── EL VIDRIO ─────────────────────────────────────────────────────
     TERCER intento de material, y el que se parece al bueno.

     Los dos anteriores confiaban en `backdrop-filter`: un velo de blanco
     translúcido y mucho desenfoque. Y ése es justo el problema - un
     material que se dibuja con lo que tiene DETRÁS no puede ser constante
     (Rolando, 05/09: "el cristal no es constante con su difuminado.
     Encima de imágenes genial, pero al moverse por las imágenes cambia de
     forma rara y cuando está encima de palabras es casi transparente").
     Sobre una foto el desenfoque luce; sobre el degradado liso no hay nada
     que emborronar; sobre texto se ve el texto; y al desplazarse cambia en
     cada fotograma porque cambia lo que hay debajo.

     La versión INICIAL de los ejercicios no tenía ese problema y por eso
     se veía premium: su vidrio era un PLATO CLARO Y CASI OPACO
     (rgba(235,240,248,.72)) con un filo blanco y una luz arriba. El
     desenfoque era el adorno, no el material.

     Así que se vuelve a eso, con el lenguaje de ahora:
       · un plato claro y mate que TAPA lo de detrás - se ve igual encima
         de una foto, de una palabra o del fondo;
       · filo de luz arriba y sombra fina abajo por dentro: el canto del
         vidrio;
       · un aro blanco de un píxel alrededor (como box-shadow, para no
         cambiar el tamaño de la caja);
       · su sombra fuera, para que flote;
       · y desenfoque por detrás, que ahora sí es sólo el adorno.

     LA TINTA DE DENTRO ES OSCURA. Sobre un plato claro el blanco no se
     lee, y además es la regla que ya sigue el resto de la plataforma: el
     popover de dcSelect es "SIEMPRE cristal claro" con texto oscuro, flote
     sobre lo que flote. Lo que está escrito EN la página va en blanco; lo
     que está DENTRO de un vidrio va en tinta. */
  /* ═══ SEXTA FORMA, Y LA QUE MANDA: NO ES CRISTAL, ES EL METAL DE LA CASA.
     Rolando, 05/09: "no me gustan las píldoras nuevas... el texto siempre
     debe ser blanco... cómo harías que de verdad volviese a sentirse
     premium y se adecuase al resto de la página".

     Las CINCO formas anteriores (elipse, rectángulo, penumbra, cristal
     mate, plato claro) fallaron por el mismo motivo de origen: las cinco
     INVENTARON un material sólo para los ejercicios. Y la plataforma ya
     tiene uno, y no es cristal blanco - es METAL: --dc-pill-metal en la
     cápsula de la nav, --dc-card en la ficha de una clase, --dc-card-inner
     en los paneles. Un degradado gris azulado con dirección de luz y una
     sombra larga y baja. Eso es lo que aquí se lee como premium: una
     superficie con luz, no un velo plano. El cristal blanco translúcido no
     existe en NINGUNA otra pantalla; por eso se sentía ajeno.

     Y con metal la tinta vuelve a ser BLANCA con su sombra, igual que el
     nombre de una clase sobre su tarjeta. La tinta oscura nunca fue una
     decisión de diseño: era el síntoma de haber puesto un plato claro.

     LA PROFUNDIDAD SUSTITUYE A LA PÍLDORA. El hueco vacío no es una cápsula
     levantada: es el mismo metal HUNDIDO - degradado invertido, la luz por
     abajo, la sombra por dentro. Un hueco hundido no encierra nada, es un
     vacío en la superficie, que es justo lo que se buscaba al quitar las
     cajas. Cuando llega la palabra el metal SE DA LA VUELTA y sube: luz
     arriba, sombra fuera, la pieza flota. Ese giro de la luz es la
     animación y cuenta la historia sin necesidad de color.

     CERO backdrop-filter. Un material dibujado con lo que tiene detrás no
     puede ser constante - ésa fue la lección de la quinta forma. El metal
     es opaco: se ve idéntico sobre una foto, sobre texto y sobre el fondo.
     ═══════════════════════════════════════════════════════════════════ */
  /* EL CARRIL Y EL PULGAR (05/09, tras ver el metal en pantalla). Rolando:
     "aún se ve iOS 6… y si hacemos el cajón de palabras y los huecos tan
     claros como la barra esa que hay al deslizarte por imágenes?".

     Y la barra de la galería (.ig-barra / .ig-barra-pulgar) ya tenía resuelta
     esta pareja exacta, que es la que hay aquí:
       · el CARRIL es blanco plano al 10 % - sin degradado, sin relieve, sin
         sombra. Es un sitio, no un objeto.
       · el PULGAR que corre por él es --dc-pill-metal con
         --dc-shadow-pill-metal, Y NO LLEVA NINGÚN INSET.

     El hueco es el carril y la palabra es el pulgar. De ahí las dos reglas
     que se quedan:

     1. EL RELIEVE INTERIOR SE VA DE TODA LA HOJA. Un filo de luz por dentro
        imita plástico moldeado, y ES el ingrediente que produce el "vibe
        iOS 6" - no el color ni el degradado. Ninguna pieza de la casa lo
        lleva; los ejercicios eran los únicos.
     2. UN SITIO VACÍO NO ES UN OBJETO APAGADO. Mientras el hueco tuvo cuerpo
        propio (metal hondo, degradado, canto) se leyó como una pieza rota en
        vez de como un espacio. Un velo plano no compite con nada. */
  /* TODO METAL, UN SOLO MATERIAL (Rolando, 05/09: "hagámoslo simple, ponme
     todo como cuando pasas el ratón por encima de los huecos de oraciones,
     como esa píldora. El banco de palabras y todo. Nada plano. Ponlo todo, lo
     que está sin responder y lo que está respondido").

     Se acabaron los estados de material: el hueco vacío, el hueco relleno, el
     banco, las opciones y las columnas son LA MISMA píldora de metal. Lo único
     que cambia entre reposo y ratón encima es cuánta sombra proyecta. Va un
     escalón por debajo de --dc-pill-metal porque el metal literal de la nav
     está pensado para texto de 60px y aquí la palabra es pequeña. */
  --ej-metal:       linear-gradient(90deg, #C2CAD4, #8B97AB);
  --ej-metal-hondo: var(--ej-metal);
  --ej-metal-alto:  var(--ej-metal);
  --ej-metal-ok:    linear-gradient(90deg, #A9D8BF, #5E9E82);
  --ej-metal-mal:   linear-gradient(90deg, #DDA9AF, #A66E79);

  /* El relieve. HUNDIDO: la sombra por DENTRO y un filo de luz por abajo -
     el canto de un vacío. ALZADO: la luz arriba y la sombra fuera, que es
     literalmente --dc-shadow-pill-metal, la de la cápsula de la nav. */
  --ej-hundido: var(--dc-shadow-pill-metal);        /* misma píldora siempre  */
  --ej-alzado:  var(--dc-shadow-pill-metal);        /* la del pulgar, sin más */
  --ej-alzado-alto: 0 calc(16 * var(--dc-u)) calc(52 * var(--dc-u)) rgba(20,30,45,.55);

  --ej-tinta:        var(--dc-ink);
  --ej-tinta-sombra: var(--dc-shadow-text);

  /* Alias de la era del cristal: las reglas de abajo siguen escritas así. */
  --ej-vidrio:       var(--ej-metal);
  --ej-vidrio-hondo: var(--ej-metal-hondo);
  --ej-vidrio-alto:  var(--ej-metal-alto);
  --ej-vidrio-blur:  none;

  /* Radio: el de la casa (ficha 28u, panel 18u), NUNCA 999. Las esquinas de
     estadio eran exactamente lo que daba el aire de formulario básico. */
  /* UN SOLO RADIO PARA TODO (Rolando, 05/09: "iguálame los radios en las
     esquinas, los bloques de palabras se ven muy cuadrados"). Había tres a la
     vez -18u en los huecos, 20u en el banco, 28u en las zonas- y en una pieza
     alta como el banco los 20u no se notaban. Si todo es la misma píldora, el
     radio también es uno. */
  --ej-r-pildora: calc(28 * var(--dc-u));
  --ej-r-zona:    var(--ej-r-pildora);
}

/* ── EL BLOQUE INVISIBLE ─────────────────────────────────────────── */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg {
  background:none; border:none; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0; margin:0 0 calc(110 * var(--dc-u)); max-width:none;
  position:relative; isolation:isolate;
}
/* La única frontera: una línea difuminada que se apaga en las puntas. No
   es un borde -no rodea nada-, es el sitio donde acaba un ejercicio. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg::after {
  content:''; position:absolute; left:6%; right:6%; bottom:calc(-52 * var(--dc-u));
  height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.30) 26%,
                                     rgba(255,255,255,.30) 74%, transparent);
  filter:blur(calc(1.4 * var(--dc-u)));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg:last-child::after { display:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg-body { padding:0; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg.ex-editing {
  border:none; box-shadow:none;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg > .ex-top-bar,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-top-bar {
  background:none; border:none; border-radius:0; overflow:visible;
  padding:0 0 calc(20 * var(--dc-u)); min-height:0;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-actions {
  margin-left:auto; display:flex; gap:calc(28 * var(--dc-u)); align-items:baseline;
  opacity:.45; transition:opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg:hover .ex-actions { opacity:1; }
}
@media (hover: none) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-actions { opacity:.8; }
}

/* ── LA PALABRA-BOTÓN ────────────────────────────────────────────────
   subir · bajar · editar · eliminar · comprobar · listo. Es la misma
   pieza que "pizarra" y "notas" de la cabecera, en pequeño: sin fondo,
   sin borde, apagada, y al acercarse se enciende con la sombra fuerte.
   Vale también fuera de una clase (el vacío de la lección). */
.ex-accion {
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:var(--dc-fs-22); letter-spacing:var(--dc-tracking);
  text-transform:lowercase; color:var(--dc-ink);
  background:none; border:none; cursor:pointer;
  /* Mismo aire que .opcion, por el mismo motivo: la sombra que aparece al
     acercarse no debe cortarse contra la caja de la palabra. */
  padding:var(--dc-sp-14) var(--dc-sp-20); margin:calc(var(--dc-sp-14) * -1) calc(var(--dc-sp-20) * -1);
  line-height:1.2; opacity:.55; text-shadow:none; white-space:nowrap;
  transition:opacity var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease),
             transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  .ex-accion:hover { opacity:1; text-shadow:var(--dc-shadow-text-strong); }
}
.ex-accion:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
.ex-accion:disabled { opacity:.14; pointer-events:none; }
.ex-accion.del { }
@media (any-hover: hover) {
  .ex-accion.del:hover { text-shadow:0 0 calc(18 * var(--dc-u)) rgba(255,110,125,.55),
                                     var(--dc-shadow-text-strong); }
}
.ex-accion-grande { font-size:var(--dc-fs-40); opacity:.7; }

/* ── LA CONSIGNA ─────────────────────────────────────────────────── */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .sv-instruction {
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:var(--dc-fs-30); color:var(--dc-ink); opacity:.62;
  letter-spacing:var(--dc-tracking); text-transform:none;
  margin:0 0 calc(30 * var(--dc-u));
}

/* ── LA ORACIÓN ──────────────────────────────────────────────────────
   Coolvetica blanca. El renglón ENTERO es la zona sensible, no las
   palabras sueltas (Rolando: "el espacio virtual que ocupa es todo el
   espacio del renglón que ocupa, no solo por palabra"). */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.sentence-line, .so-line, .wa-line) {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--ej-fs);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1.85;
  padding:calc(8 * var(--dc-u)) calc(12 * var(--dc-u)) calc(8 * var(--dc-u)) calc(34 * var(--dc-u));
  margin:0 0 calc(12 * var(--dc-u)); border-radius:calc(20 * var(--dc-u));
  text-shadow:none; position:relative;
  transition:transform var(--dc-t-lento) var(--dc-ease),
             filter var(--dc-t-lento) var(--dc-ease),
             opacity var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .sentence-line {
  display:flex; flex-wrap:wrap; align-items:center; gap:.10em .30em;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-line > span,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .sentence-line > span { margin-right:.14em; }
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.sentence-line, .so-line, .wa-line):hover {
    text-shadow:var(--dc-shadow-text);
  }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-hint,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-hint {
  font-family:var(--dc-font); font-style:italic; font-size:.78em;
  color:var(--dc-ink); opacity:.5;
}
/* El punto de estado de cada renglón se queda (ya hablaba este idioma),
   sólo se separa un poco más para la nueva escala. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.sentence-line, .so-line, .wa-line)::before {
  width:calc(12 * var(--dc-u)); height:calc(12 * var(--dc-u)); left:calc(2 * var(--dc-u));
}

/* ── EL HUECO ES UNA CÁPSULA DE CRISTAL ──────────────────────────────
   CUARTA y última forma. Las tres anteriores fueron sombras (elipse,
   rectángulo, penumbra) y las tres se leían como manchas. Rolando, 05/09:
   "no me gustan las sombras por todos los ejercicios, parecen manchas,
   creo que mejor píldoras de cristal mate como te dije por todo lado".

   Así que el sitio donde falta una palabra es una cápsula del MISMO
   cristal que el banco: esquinas completamente redondeadas, mate, con su
   canto de luz. Se ve, se entiende y es la misma pieza en toda la clase -
   el hueco de arrastrar, el de la opción múltiple, el de escribir y la
   barra que va bajo cada foto. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot, .so-hueco, .wa-hueco, .match-drop-zone) {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border:none !important; border-radius:var(--ej-r-pildora);
  background:var(--ej-vidrio-hondo) !important;
  backdrop-filter:var(--ej-vidrio-blur); -webkit-backdrop-filter:var(--ej-vidrio-blur);
  box-shadow:var(--ej-hundido) !important;
  padding:0 .8em; margin:0 .3em; min-width:calc(150 * var(--dc-u)); height:1.85em;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:1em;
  letter-spacing:var(--dc-tracking); color:var(--ej-tinta);
  text-shadow:var(--ej-tinta-sombra);
  cursor:pointer; vertical-align:middle;
  /* Todo con la curva del sistema: lo que crece y se enciende va lento. */
  transition:min-width var(--dc-t-lento) var(--dc-ease),
             background var(--dc-t-lento) var(--dc-ease),
             box-shadow var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease),
             transform var(--dc-t-lento) var(--dc-ease);
}
/* EL GIRO DEL METAL. Vacío el hueco está HUNDIDO (la sombra por dentro);
   con la palabra dentro el mismo metal SE DA LA VUELTA y sube: la luz pasa
   arriba y la sombra sale fuera. No cambia de color ni de forma - cambia de
   dónde le da la luz, y eso ya cuenta que ahí hay algo. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot.filled, .so-hueco.lleno, .match-drop-zone.filled, .match-drop-zone.matched) {
  background:var(--ej-metal) !important;
  box-shadow:var(--ej-alzado) !important;
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot, .so-hueco, .match-drop-zone):hover {
    background:var(--ej-vidrio-alto) !important;
    box-shadow:var(--ej-alzado-alto) !important;
  }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot, .match-drop-zone).drag-over {
  background:var(--ej-vidrio-alto) !important;
  box-shadow:var(--ej-alzado-alto) !important;
  transform:scale(1.02);
}
/* LA PALABRA ATERRIZA, con la curva del sistema y sin desenfoque: una
   palabra corta que se desenfoca y se enfoca en medio segundo se lee como
   un parpadeo sucio, no como que algo se ha posado. Sólo baja y aparece. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-entra {
  animation:ejEntra var(--dc-t-lento) var(--dc-ease) both;
}
@keyframes ejEntra {
  0%   { opacity:0; transform:translateY(calc(-12 * var(--dc-u))); }
  100% { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-entra { animation:none; }
}
/* 11/09: la píldora se queda quieta; lo que cae dentro es la PALABRA (ver
   _aterriza). Y cuando se va, se va igual de suave (_despega). */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-palabra { display:inline-block; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-palabra.ej-cae {
  animation:ejCae .52s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ejCae {
  0%   { opacity:0; transform:translateY(calc(-14 * var(--dc-u))); }
  100% { opacity:1; transform:none; }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-palabra.ej-se-va {
  animation:ejSeVa .23s cubic-bezier(.4,0,.6,1) both;
}
@keyframes ejSeVa {
  0%   { opacity:1; transform:none; }
  100% { opacity:0; transform:translateY(calc(10 * var(--dc-u))); }
}
@media (prefers-reduced-motion: reduce) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.ej-palabra.ej-cae, .ej-palabra.ej-se-va) { animation:none; }
}
/* AURAS. Lo que se tiñe es el METAL, no la tinta: la pieza acertada es la
   misma pieza alzada pero de metal verde, y la fallada de metal rosa, cada
   una con su halo alrededor. La palabra de dentro sigue en BLANCO en los dos
   casos - el color lo pone el material, nunca el texto. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot.ok, .match-drop-zone.matched, .so-hueco.ok, .wa-hueco.ok) {
  background:var(--ej-metal) !important; color:var(--dc-ink) !important;
  text-shadow:var(--ej-tinta-sombra);
  box-shadow:var(--ej-alzado), var(--ej-caja-ok) !important;
  transition:box-shadow .7s cubic-bezier(.25,.1,.25,1);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot.bad, .match-drop-zone.bad, .so-hueco.bad, .wa-hueco.bad) {
  background:var(--ej-metal) !important; color:var(--dc-ink) !important;
  text-shadow:var(--ej-tinta-sombra);
  box-shadow:var(--ej-alzado), var(--ej-caja-mal) !important;
  transition:box-shadow .7s cubic-bezier(.25,.1,.25,1);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-hueco.ok .wa-input,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-hueco.bad .wa-input { color:var(--dc-ink); }
/* En columnas la palabra NO va dentro de una pieza teñida (cae en el cajón
   hundido), así que ahí el color sí lo lleva la propia palabra - pero claro,
   no oscuro: sobre metal hondo un verde de texto oscuro no se lee. */
/* 07/09: la palabra que está mal NO se pinta de rojo - se queda blanca y lo
   que se pone rojo es su AURA, que es como habla el resto de la casa cuando
   algo está bien o mal (Rolando: "la palabra sigue blanca, pero está en
   rojo"). Mismas auras que usan los huecos y las fotos. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word.ok,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word.bad { color:var(--dc-ink) !important; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word.ok  { text-shadow:var(--ej-aura-ok) !important; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word.bad { text-shadow:var(--ej-aura-mal) !important; }

/* EL <select> DEL SISTEMA SIGUE VIVO EN LA VISTA DEL PROFESOR. Al alumno se
   le quitó el 04/09 (.so-hueco, un <span> con `value` fingido), pero
   renderExForTeacher nunca se migró: ahí sigue habiendo un <select> nativo con
   quince sitios que leen su .value, y cambiarlo de verdad es otra tarea. Lo
   que sí puede hacer el CSS es VESTIRLO con la misma píldora de metal, para
   que la clase en vivo no sea la única pantalla con un desplegable del sistema
   en medio. La rueda del sistema sigue apareciendo al tocarlo - eso no se
   puede evitar sin cambiar el HTML. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-select {
  appearance:none; -webkit-appearance:none;
  background:var(--ej-metal) !important; border:none !important;
  border-radius:var(--ej-r-pildora) !important;
  box-shadow:var(--ej-alzado) !important;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:1em;
  letter-spacing:var(--dc-tracking); color:var(--dc-ink) !important;
  text-shadow:var(--dc-shadow-text); text-align:center; text-align-last:center;
  padding:0 .8em; margin:0 .3em; height:1.85em; min-width:calc(150 * var(--dc-u));
  vertical-align:middle; cursor:pointer; outline:none;
}
/* El desplegable que abre el sistema se pinta con el tema del sistema: ahí la
   tinta tiene que ser oscura o no se lee ninguna opción. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-select option {
  color:var(--dc-ink-dark); background:#e7ecef;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-select.ok  { background:var(--ej-metal) !important; box-shadow:var(--ej-caja-ok) !important; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-select.bad { background:var(--ej-metal) !important; box-shadow:var(--ej-caja-mal) !important; }

/* ── LA CLASE EN VIVO CON UN ALUMNO ──────────────────────────────────
   Rolando, 05/09: "cuando vas a la clase con un alumno no se ven así los
   ejercicios, no han cogido el nuevo formato porque se siguen viendo dentro
   de bloques. Raro."

   Y no era raro: la clase en vivo NO usa renderExBlock. Tiene su propio
   renderizador (renderLiveLesson → .live-lesson-block) que se quedó en el
   diseño viejo - tarjeta de cristal, cabecera con el tipo en mayúsculas y
   botones de emoji. El CUERPO sí cogió el material nuevo (son las mismas
   clases .drop-slot/.word-bank y el scope ya incluye #aula-clase-abierta);
   lo que sobraba era el envoltorio.

   SI SE AÑADE OTRA VISTA QUE PINTE EJERCICIOS, MIRAR SI TIENE SU PROPIO
   RENDERIZADOR ANTES DE DAR POR HECHO QUE HEREDA. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-lesson-block {
  background:none !important; border:none !important; border-radius:0 !important;
  box-shadow:none !important; backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0; margin:0 0 calc(110 * var(--dc-u)); position:relative;
}
/* La misma frontera que entre dos ejercicios del profesor: una línea que se
   apaga en las puntas, no un borde que rodea. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-lesson-block::after {
  content:''; position:absolute; left:0; right:0; bottom:calc(-55 * var(--dc-u));
  height:1px; background:linear-gradient(90deg, transparent,
             rgba(255,255,255,.30) 26%, rgba(255,255,255,.30) 74%, transparent);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-lesson-block:last-child::after { display:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-lesson-block.live-focused,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-lesson-block.live-done {
  background:none !important; border:none !important; box-shadow:none !important;
}
/* Un ejercicio ya terminado se apaga, igual que .ex-completed. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-lesson-block.live-done { opacity:.62; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-block-body { padding:0 !important; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-block-header {
  background:none !important; border:none !important; border-radius:0 !important;
  padding:0 0 calc(14 * var(--dc-u)); display:flex; align-items:baseline;
  gap:calc(26 * var(--dc-u));
}
/* El tipo y el estado son texto de la casa, no etiquetas: minúscula,
   Coolvetica y muy apagados. El estado es lo único que el profesor necesita
   leer de reojo mientras habla, así que va un punto más vivo que el tipo. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.live-block-type, .live-block-status) {
  font-family:var(--dc-font); font-weight:var(--dc-weight); letter-spacing:normal;
  text-transform:lowercase; color:var(--dc-ink); background:none;
  text-shadow:var(--dc-shadow-text);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-block-type {
  font-size:var(--dc-fs-22); opacity:.38; flex:1;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-block-status {
  font-size:var(--dc-fs-22); opacity:.62; font-weight:var(--dc-weight);
}
/* Los dos botones son la pieza .ex-accion de siempre. Se anulan a mano los
   restos de la versión de tarjeta (fondo de acento, redondeo, tamaño fijo). */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.live-ex-focus-btn, .live-ex-reset-btn, .live-ex-edit-btn),
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.live-ex-focus-btn, .live-ex-reset-btn, .live-ex-edit-btn):hover,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-ex-focus-btn.focused {
  background:none !important; border:none !important; border-radius:0 !important;
  width:auto; height:auto; color:var(--dc-ink);
  font-size:var(--dc-fs-22); box-shadow:none !important;
  /* .ex-accion lleva relleno + margen NEGATIVO para dejar salir su sombra.
     Aquí se le quitaba sólo el relleno, y el margen negativo que quedaba
     suelto juntaba "enfocar" y "reiniciar" hasta encabalgarlos. Van los dos
     o no va ninguno. */
  padding:calc(6 * var(--dc-u)) calc(10 * var(--dc-u));
  margin:calc(-6 * var(--dc-u)) calc(-10 * var(--dc-u));
}
/* El que está enfocado ahora mismo se queda encendido; los demás, apagados -
   la misma mecánica de .opcion que usa el resto de la plataforma. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.live-ex-focus-btn, .live-ex-reset-btn, .live-ex-edit-btn) { opacity:.5; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .live-ex-focus-btn.focused { opacity:1; }

/* ── EL CHIVATO DEL PROFESOR ─────────────────────────────────────────
   La palabra correcta al pasar el ratón. Va ARRIBA en todas partes -que es
   donde no estorba- y sólo en MATCHING va debajo, porque allí el hueco vive
   pegado a una foto que se levanta al acercarse y se pisaban (Rolando:
   "no quería las respuestas correctas por debajo en todos los ejercicios,
   solo en el del matching"). */
body.is-teacher :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot, .match-drop-zone, .col-drop, .wa-hueco, .so-hueco)[data-answer]:not([data-answer=""])::after {
  content:attr(data-answer);
  position:absolute; left:50%; bottom:calc(100% + 6 * var(--dc-u));
  transform:translateX(-50%) translateY(calc(6 * var(--dc-u)));
  background:none; padding:0; border-radius:0; backdrop-filter:none;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:.72em;
  letter-spacing:var(--dc-tracking); color:var(--dc-ink);
  text-shadow:var(--dc-shadow-text-strong);
  white-space:nowrap; pointer-events:none; opacity:0; z-index:50; box-shadow:none;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
body.is-teacher :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-drop-zone[data-answer]:not([data-answer=""])::after {
  bottom:auto; top:calc(100% + 6 * var(--dc-u));
  transform:translateX(-50%) translateY(calc(-6 * var(--dc-u)));
}
body.is-teacher :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.drop-slot, .match-drop-zone, .col-drop, .wa-hueco, .so-hueco)[data-answer]:not([data-answer=""]):hover::after {
  opacity:1; transform:translateX(-50%) translateY(0);
}
/* Las píldoras-chivato de antes (.wa-key/.so-key) ya no hacen falta. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.wa-key, .so-key) { display:none !important; }

/* ── EL BANCO DE PALABRAS ────────────────────────────────────────────
   Lo que hacía bueno al banco viejo no era su estilo, era su COMPORTA-
   MIENTO, y al rediseñarlo lo perdí (Rolando, 04/09: "vital de la
   anterior versión - el banco de palabras debe de persistir por encima
   de las imágenes y tienes que poder desplazarte… él seguía presente
   para que el estudiante pudiese seguir viendo mientras rellenaba los
   huecos"). Se recupera tal cual:

     · position:sticky → se queda pegado arriba mientras bajas por las
       fotos, así siempre ves qué palabras te quedan;
     · altura máxima de tres filas y scroll DENTRO → con veinte palabras
       el banco tapaba el ejercicio entero (es pegajoso: crecía sin
       límite y no se iba nunca);
     · overscroll-behavior:contain → al llegar al final del banco la
       rueda no se lleva la página por delante.

   Y el aspecto: cristal MATE Y CLARO, no una sombra oscura ("siento que
   quizás el aspecto debería de ser más mate y cristalizado, y más
   claro"). El blanco al 22 % sobre el degradado da vidrio esmerilado;
   la sombra interior de arriba es lo que le da grosor de cristal. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.word-bank, .match-words) {
  display:flex; flex-wrap:wrap; align-items:center;
  position:sticky; top:calc(10 * var(--dc-u)); z-index:30;
  /* El banco es la misma píldora de metal que todo lo demás. Al ser opaca
     resuelve sola el problema de ir pegada arriba (sticky) mientras las frases
     le pasan por detrás: con un material translúcido se leían dos textos
     superpuestos, comprobado en captura. */
  background:var(--ej-metal) !important; border:none;
  border-radius:var(--ej-r-zona);
  backdrop-filter:var(--ej-vidrio-blur); -webkit-backdrop-filter:var(--ej-vidrio-blur);
  box-shadow:var(--ej-hundido) !important;
  padding:calc(26 * var(--dc-u)) calc(40 * var(--dc-u));
  gap:calc(24 * var(--dc-u)) calc(42 * var(--dc-u));
  margin:0 0 calc(44 * var(--dc-u));
  /* 07/09: con muchas palabras se veían cuatro renglones de golpe y era un
     muro. Dos y pico, y el resto se alcanza rodando dentro del banco. */
  max-height:calc(180 * var(--dc-u)); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.34) transparent;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.word-bank, .match-words)::-webkit-scrollbar { width:calc(8 * var(--dc-u)); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.word-bank, .match-words)::-webkit-scrollbar-track { background:transparent; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.word-bank, .match-words)::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.34); border-radius:999px;
}
/* Las palabras: libres, con su sombra debajo, y se ELEVAN al acercarse
   ("darle a las palabras un poco de sombreado por debajo, y más
   elevación suave cuando pasas el mouse por encima"). La sombra sigue el
   contorno de las letras, como la del nombre de un alumno. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip {
  background:none !important; border:none !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  padding:0; border-radius:0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--ej-fs-palabra);
  letter-spacing:var(--dc-tracking); color:var(--ej-tinta); text-transform:none;
  opacity:.88; line-height:1.2;
  text-shadow:0 calc(6 * var(--dc-u)) calc(14 * var(--dc-u)) rgba(12,18,30,.46);
  transition:opacity var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease),
             transform var(--dc-t-lento) var(--dc-ease) !important;
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip:hover {
    opacity:1; background:none !important; box-shadow:none !important;
    transform:translateY(calc(-5 * var(--dc-u)));
    text-shadow:0 calc(12 * var(--dc-u)) calc(22 * var(--dc-u)) rgba(12,18,30,.55),
                0 calc(24 * var(--dc-u)) calc(40 * var(--dc-u)) rgba(12,18,30,.34);
  }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip:active { transform:translateY(calc(-2 * var(--dc-u))) scale(.985); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip.selected {
  background:none !important; color:var(--ej-tinta); opacity:1; box-shadow:none !important;
  /* 11/09: se nota que la has cogido - sube y crece un poco, con la curva del
     sistema (Rolando: "cuando el alumno selecciona una palabra no hay
     animación suave"). */
  transform:translateY(calc(-8 * var(--dc-u))) scale(1.08);
  text-shadow:0 calc(16 * var(--dc-u)) calc(26 * var(--dc-u)) rgba(12,18,30,.62),
              0 calc(28 * var(--dc-u)) calc(44 * var(--dc-u)) rgba(12,18,30,.30);
}
/* La palabra que ya está colocada se queda a la vista pero apagada y sin
   sombra: sigue ocupando su sitio (el banco no da saltos) y se ve que ya
   no está disponible. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip.used { opacity:.26; text-shadow:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .w-chip.used:not(.leaving):not(.removing) { transform:none; }

/* ── MATCHING ───────────────────────────────────────────────────────
   Fotos con la esquina muy redondeada, sin borde blanco, levantándose
   igual que el icono de la marca. La foto entera recibe la palabra. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-img-grid {
  gap:calc(52 * var(--dc-u)) calc(44 * var(--dc-u)); margin-bottom:calc(24 * var(--dc-u));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card {
  background:none !important; border:none !important; box-shadow:none !important;
  overflow:visible; padding:0; border-radius:0;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:hover { transform:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-img-wrap {
  border:none; border-radius:var(--ej-radio); overflow:hidden;
  background:var(--dc-card-inner); box-shadow:var(--ej-foto-sombra);
  transition:transform var(--dc-t-lento) var(--dc-ease),
             box-shadow var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:hover .match-card-img-wrap,
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-card:hover .match-card-img-wrap {
    transform:scale(1.045); box-shadow:var(--ej-foto-sombra-alta);
  }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:hover .match-card-img,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-card:hover .match-card-img { transform:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-img,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-img-placeholder {
  border-radius:inherit; border:none;
}
/* Bajo cada foto, una BARRA con el mismo radio que la foto - no un
   cuadradito (Rolando: "los lugares para colocar las palabras debajo de
   cada foto son feos. El radio es muy poco y son mucho más cuadrados que
   el resto de las cosas"). Ocupa todo el ancho de la foto, así el par
   foto+barra se lee como una sola pieza. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-drop-zone {
  display:flex; width:100%; min-width:0; margin:calc(26 * var(--dc-u)) auto 0;
  font-size:var(--ej-fs-palabra); min-height:2.2em; height:auto; padding:.45em .9em; margin-left:0; margin-right:0;
  text-align:center; line-height:1.25; border-radius:var(--ej-r-zona);
}

/* El aura envuelve la foto entera cuando la palabra está bien o mal. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:has(.match-drop-zone.matched) .match-card-img-wrap { box-shadow:var(--ej-caja-ok); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:has(.match-drop-zone.bad) .match-card-img-wrap { box-shadow:var(--ej-caja-mal); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .foto-credito { font-family:var(--dc-font); font-size:calc(16 * var(--dc-u)); opacity:.4; }

/* ── MONTAR UN EJERCICIO, DENTRO DE LA PROPIA CLASE ──────────────────
   Los editores de matching, describir y columnas trabajan sobre el bloque de
   verdad, ahí donde va a quedar. Lo que traían de la versión vieja eran sus
   mandos: píldoras grises con borde para las proporciones y para el modo, y
   un recuadro de rayas discontinuas con un ＋ para añadir una imagen - un
   hueco de formulario en mitad de una clase (Rolando, 07/09).

   Las proporciones y los modos son PALABRAS: la elegida encendida, las demás
   apagadas. Es la misma mecánica de .opcion que usa toda la casa. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ratio-picker,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-mode-row {
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--dc-sp-8) var(--dc-sp-34);
  margin:var(--dc-sp-10) 0 var(--dc-sp-20);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ratio-btn,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-op {
  background:none; border:none; box-shadow:none; border-radius:0;
  padding:var(--dc-sp-8) var(--dc-sp-14); margin:0 calc(var(--dc-sp-14) * -1);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); text-transform:lowercase;
  text-shadow:var(--dc-shadow-text-strong); cursor:pointer; opacity:.42;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ratio-btn.active,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-op.activa {
  background:none; color:var(--dc-ink); border:none; opacity:1;
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ratio-btn:hover,
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ej-op:hover { background:none; opacity:1; transform:scale(1.06); }
}
/* Añadir una imagen: la MISMA caja vacía que cualquier foto sin poner, con su
   material y su sombra, y dentro la palabra. Nada de rayas discontinuas ni ＋.
   Al cambiar de proporción la caja cambia de forma con la curva del sistema,
   no de un salto: aspect-ratio se interpola. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-add {
  border:none; box-shadow:var(--ej-foto-sombra); background:var(--dc-card-inner);
  /* Sin proporción elegida ("como siempre") vale la de la casa, 4:3: si no,
     la caja vacía se quedaba en una barra plana. El estilo en línea que pone
     el JS al elegir 16:9 / 1:1 gana sobre ésta. */
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dc-t-lento) var(--dc-ease),
             box-shadow var(--dc-t-lento) var(--dc-ease),
             aspect-ratio var(--dc-t-lento) var(--dc-ease),
             opacity var(--dc-t-lento) var(--dc-ease);
  opacity:.7;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-img-wrap {
  transition:transform var(--dc-t-lento) var(--dc-ease),
             box-shadow var(--dc-t-lento) var(--dc-ease),
             aspect-ratio var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-add:hover { opacity:1; background:var(--dc-card-inner); border:none; }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-add-txt {
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:var(--ej-fs-palabra, var(--dc-fs-30));
  color:var(--dc-ink-dark); opacity:.5; letter-spacing:var(--dc-tracking);
  pointer-events:none;
}
/* Una columna más: la misma pieza, en la forma de una columna. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-block-add {
  border:none; box-shadow:var(--ej-foto-sombra); background:var(--dc-card-inner);
  display:flex; align-items:center; justify-content:center; opacity:.7;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-block-add:hover { opacity:1; background:var(--dc-card-inner); border:none; transform:scale(1.02); }
}
/* La línea donde se escribe la instrucción del bloque: sin raya discontinua. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .inline-instruction-input {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-34);
  color:var(--dc-ink); caret-color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:border-color var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .inline-instruction-input:focus { border-bottom-color:rgba(255,255,255,.5); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .inline-instruction-input::placeholder { color:var(--dc-ink); opacity:.3; }
/* Lo que quedaba de formulario dentro de los editores en sitio: etiquetas en
   mayúsculas grises, cajas de campo y rayas discontinuas. Todo eso es de
   antes; aquí se escribe sobre el lienzo, como en el resto de la casa. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .f-label {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); opacity:.42; letter-spacing:var(--dc-tracking);
  text-transform:lowercase; margin:var(--dc-sp-14) 0 var(--dc-sp-8);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .f-input,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-title-input,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-words-editor {
  background:none; border:none; box-shadow:none; border-radius:0; outline:none;
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  color:var(--dc-ink); caret-color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  border-bottom:1px solid rgba(255,255,255,.16);
  padding:var(--dc-sp-8) 0;
  transition:border-color var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .f-input { font-size:var(--dc-fs-30); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-title-input { font-size:var(--dc-fs-30); text-align:center; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-words-editor {
  font-size:var(--dc-fs-22); line-height:1.5; resize:none; border-bottom:none;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .f-input:focus,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-title-input:focus { border-bottom-color:rgba(255,255,255,.5); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .f-input::placeholder,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-title-input::placeholder,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-words-editor::placeholder { color:var(--dc-ink); opacity:.3; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-editor-hint {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); opacity:.38; letter-spacing:var(--dc-tracking);
}
/* Quitar una imagen o una columna: la marca vivía dentro de una chapa oscura
   que se ponía roja al acercarse - la única cosa con fondo sólido en toda la
   pantalla. Ahora es sólo la marca, apagada, y sale al pasar por encima. */
/* ── UNA IMAGEN SIN FONDO NO VA DENTRO DE UNA CAJA ───────────────────
   Lo que se pega con "copiar sujeto" del Mac no es una fotografía: es un
   objeto recortado. Metido en la caja de siempre se veía el rectángulo claro
   del fondo alrededor, que es justo lo que se había quitado. Aquí la caja
   desaparece -sin material, sin sombra de caja- y el objeto se apoya en el
   lienzo con su PROPIA sombra, siguiendo su silueta (drop-shadow, no
   box-shadow: box-shadow dibuja la sombra del rectángulo). */
/* Gana con !important a propósito: hay varias reglas más específicas que le
   pintan material y sombra a la caja de la foto (la de describir, la del
   hover, la del aura). Un recorte no tiene caja en ninguna de ellas. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-img-wrap.con-recorte {
  background:none !important; box-shadow:none !important; border:none !important;
  overflow:visible;
}
/* Sobre un recorte no se echa un velo oscuro rectangular: dibujaría otra vez
   la caja que acabamos de quitar. La palabra sola basta. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .con-recorte .match-card-edit-overlay { background:none; }
/* Y el velo dice "cambiar" en la letra de la casa, no un emoji de cámara. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-edit-overlay {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  letter-spacing:var(--dc-tracking); color:var(--dc-ink);
  text-shadow:var(--dc-shadow-text-strong); background:rgba(15,20,35,.28);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card-img-wrap.con-recorte .match-card-img {
  object-fit:contain;
  filter:drop-shadow(0 calc(18 * var(--dc-u)) calc(26 * var(--dc-u)) rgba(15,20,30,.42));
  transition:filter var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:hover .match-card-img-wrap.con-recorte,
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-card:hover .match-card-img-wrap.con-recorte {
    box-shadow:none;
  }
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:hover .con-recorte .match-card-img,
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-card:hover .con-recorte .match-card-img {
    filter:drop-shadow(0 calc(26 * var(--dc-u)) calc(34 * var(--dc-u)) rgba(15,20,30,.5));
  }
}
/* El aura de bien/mal tampoco puede ser la de una caja que ya no existe. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:has(.match-drop-zone.matched) .match-card-img-wrap.con-recorte,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:has(.match-drop-zone.bad) .match-card-img-wrap.con-recorte { box-shadow:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:has(.match-drop-zone.matched) .con-recorte .match-card-img {
  filter:drop-shadow(0 0 calc(22 * var(--dc-u)) rgba(120,220,150,.75));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .match-card:has(.match-drop-zone.bad) .con-recorte .match-card-img {
  filter:drop-shadow(0 0 calc(22 * var(--dc-u)) rgba(255,120,130,.75));
}

/* ── LA COSTURA ENTRE DOS BLOQUES ────────────────────────────────────
   Meter un ejercicio en mitad de una clase era imposible: se creaba al final
   y había que subirlo a golpe de "subir" (Rolando, 07/09: "al pasar el ratón
   por la línea que los separa, aparece la opción"). La costura es un hueco de
   nada que sólo existe cuando te acercas: entonces se abre, aparece la
   palabra, y al pulsarla sale el carrusel de tipos apuntando a ESE sitio.
   Sólo la ve el profesor. */
:is(#screen-lesson, #aula-clase-abierta) .ex-costura {
  position:relative; height:calc(44 * var(--dc-u)); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
/* 11/09: LA COSTURA ES LA LÍNEA. Antes vivía DEBAJO del hueco de 110u que hay
   entre dos bloques, a media altura de la línea que los separa: pasabas el
   ratón por la línea y no pasaba nada, y "añadir aquí" salía mucho más abajo
   (Rolando). Ahora ocupa ese hueco entero -sin empujar nada: se monta encima
   con un margen negativo- y lo que responde al ratón es una franja de 52u
   centrada en la línea. La línea la dibuja ella: al acercarte, se apaga y en
   su sitio aparece "añadir aquí". Nada se mueve. */
:is(#screen-lesson, #aula-clase-abierta) .ex-costura.entre {
  height:calc(110 * var(--dc-u)); margin-top:calc(-110 * var(--dc-u)); pointer-events:none; z-index:2;
}
:is(#screen-lesson, #aula-clase-abierta) .ex-costura.entre::before {
  content:''; position:absolute; left:0; right:0; top:50%; height:calc(52 * var(--dc-u));
  transform:translateY(-50%); pointer-events:auto; cursor:pointer;
}
:is(#screen-lesson, #aula-clase-abierta) .ex-costura.entre:not(.fin)::after {
  content:''; position:absolute; left:6%; right:6%; top:50%; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.30) 26%, rgba(255,255,255,.30) 74%, transparent);
  filter:blur(calc(1.4 * var(--dc-u)));
  transition:opacity var(--dc-t-lento) var(--dc-ease);
}
/* Donde hay costuras, la línea de cada bloque sobra: la pone la costura. */
:is(#exercises-container.con-costuras .ex-wysiwyg, #live-view-content .live-lesson-block)::after { display:none; }
:is(#screen-lesson, #aula-clase-abierta) .ex-costura > span {
  position:relative; z-index:1;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  text-shadow:var(--dc-shadow-text-strong);
  opacity:0; transform:translateY(calc(4 * var(--dc-u)));
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
  pointer-events:none;
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta) .ex-costura:hover > span { opacity:.85; transform:none; }
  :is(#screen-lesson, #aula-clase-abierta) .ex-costura.entre:hover::after { opacity:0; }
}
/* Sin ratón no hay a qué acercarse: la costura se queda cerrada y para meter
   un ejercicio en medio se usa "añadir ejercicio" y luego "subir". */
@media (hover:none) { :is(#screen-lesson, #aula-clase-abierta) .ex-costura { display:none; } }

:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.col-del-btn, .match-card-del) {
  background:none !important; border:none; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  width:auto; height:auto; border-radius:0; padding:var(--dc-sp-8);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); line-height:1;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.col-del-btn, .match-card-del):hover {
    opacity:1; transform:scale(1.12);
  }
}

/* ── OPCIÓN MÚLTIPLE ────────────────────────────────────────────────
   El hueco, el punto de luz naranja, y las opciones cayendo debajo. */
/* El punto de luz naranja se retiró (Rolando, 04/09: "quitemos las
   lucesitas difuminadas naranjas, no me gustan"). El hueco ya dice solo
   que ahí falta algo; añadirle un piloto encima era una señal de más. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-punto { display:none; }
/* Las opciones caen sobre CRISTAL MATE. Sin él, una oración larga que se
   parte en dos renglones deja su segunda línea justo detrás de las
   opciones y no se sabe qué es qué (Rolando). El cristal las separa del
   texto sin tener que desenfocar la oración que estás contestando - y es
   el mismo material que ya usa el popover de dcSelect en toda la app. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-opciones {
  position:absolute; top:calc(100% + 10 * var(--dc-u)); left:50%;
  transform:translateX(-50%) translateY(calc(-10 * var(--dc-u)));
  display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--dc-u));
  padding:calc(18 * var(--dc-u)) calc(30 * var(--dc-u));
  border-radius:var(--ej-r-zona);
  background:var(--ej-metal);
  backdrop-filter:var(--ej-vidrio-blur); -webkit-backdrop-filter:var(--ej-vidrio-blur);
  box-shadow:var(--ej-alzado-alto);
  z-index:60; opacity:0; pointer-events:none;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-hueco.abierto .so-opciones {
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-opcion {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:.92em;
  letter-spacing:var(--dc-tracking); color:var(--ej-tinta); white-space:nowrap;
  background:none; border:none; padding:calc(2 * var(--dc-u)) calc(6 * var(--dc-u));
  cursor:pointer; opacity:.78; text-shadow:0 calc(6 * var(--dc-u)) calc(14 * var(--dc-u)) rgba(12,18,30,.46);
  transition:opacity var(--dc-t-lento) var(--dc-ease),
             transform var(--dc-t-lento) var(--dc-ease),
             text-shadow var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-opcion:hover {
    opacity:1; transform:scale(1.06);
    text-shadow:0 calc(12 * var(--dc-u)) calc(20 * var(--dc-u)) rgba(22,32,47,.30);
  }
}
/* La oración elegida se eleva y se queda POR ENCIMA de todo; las demás se
   apagan y se difuminan. El z-index alto es lo que impide que la segunda
   línea de una oración larga se mezcle con las opciones. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-line.so-eligiendo {
  transform:translateY(calc(-8 * var(--dc-u))); text-shadow:var(--dc-shadow-text-strong);
  position:relative; z-index:70;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-hay-eleccion .so-line:not(.so-eligiendo) {
  filter:blur(calc(3 * var(--dc-u))) brightness(.55); opacity:.5;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .so-hay-eleccion .sv-instruction {
  filter:blur(calc(2.5 * var(--dc-u))); opacity:.28;
}
/* El renglón que sobra de una oración larga NO se puede desenfocar aparte
   (es la misma caja), así que lo que se hace es que las opciones no dependan
   de él: van sobre cristal mate y por encima de todo. */

/* ── ESCRIBIR EN EL HUECO ────────────────────────────────────────────
   El renglón entero se corre solo al escribir: el <input> crece con la
   animación de ancho que ya tenía (growWaInput) y, sin cápsula, lo que
   se ve es la oración abriéndose sitio. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-line { line-height:2.1; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-hueco { min-width:calc(120 * var(--dc-u)); padding:0 .55em; }
/* El <input> vive dentro de una cápsula que es un contenedor flex, y por
   defecto un hijo flex SE ENCOGE. Con eso, el ancho que growWaInput calcula
   para que quepa lo escrito se lo comía el flex y el texto volvía a salirse.
   flex:none dice "respeta el ancho que te han puesto". */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-input { flex:0 0 auto; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-input {
  background:none !important; border:none !important; box-shadow:none !important;
  /* SIN desenfoque propio. El <input> heredaba un backdrop-filter de la hoja
     vieja, y un desenfoque dentro de otro desenfoque dibuja su propia caja:
     era el "recuadro dentro de las píldoras" que se veía (Rolando, 05/09). */
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-radius:0; padding:0 .22em; height:1.3em; text-align:center;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:1em;
  letter-spacing:var(--dc-tracking); color:var(--ej-tinta); caret-color:var(--ej-tinta);
  outline:none; min-width:calc(110 * var(--dc-u));
  /* El ancho persigue al texto en .26 s, no en .7 (Rolando: "si escribes
     mucho solo se verá en ese hueco una parte de lo que escribiste"). Con la
     curva lenta del sistema la caja iba tres palabras por detrás del cursor y
     lo escrito se salía por el lado. .26 s es exactamente lo que tenía la
     versión anterior, donde esto funcionaba bien. */
  transition:width .26s var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease);
}
/* El hueco ya está teñido de metal verde o rosa: lo escrito sigue en blanco.
   (Estas dos reglas van después de las auras y ganan por orden - si vuelven a
   poner un color oscuro, la palabra desaparece sobre el metal.) */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-input.ok,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .wa-input.bad { color:var(--dc-ink); }

/* ── COMPROBAR, EL RESULTADO Y EL COMPLETADO ─────────────────────── */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .check-row {
  border:none; background:none; padding:calc(28 * var(--dc-u)) 0 0;
  justify-content:flex-start;
}
.ex-comprobar { font-size:var(--dc-fs-30); opacity:.6; }
.ex-comprobar.hecho { opacity:.35; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .result-banner {
  background:none !important; border:none; padding:calc(18 * var(--dc-u)) 0 0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  letter-spacing:var(--dc-tracking); text-transform:lowercase; text-align:left;
  border-radius:0; animation:none;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .result-banner.ok,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .result-banner.bad {
  background:none !important; border:none !important; box-shadow:none !important;
  color:var(--dc-ink) !important; display:block;
}
/* El aura del resultado va MÁS SUAVE que la de una palabra: la de una
   palabra rodea letras grandes; apretada alrededor de "1 de 2" a tamaño
   pequeño se veía como una pastilla de color, justo lo que quitamos. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .result-banner {
  font-size:var(--dc-fs-30); opacity:.85;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .result-banner.ok {
  text-shadow:0 0 calc(16 * var(--dc-u)) rgba(72,205,140,.55),
              0 0 calc(44 * var(--dc-u)) rgba(46,180,110,.24);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .result-banner.bad {
  text-shadow:0 0 calc(16 * var(--dc-u)) rgba(255,110,125,.55),
              0 0 calc(44 * var(--dc-u)) rgba(230,70,90,.22);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-completed-banner {
  background:none !important; border:none; box-shadow:none;
  font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink);
  opacity:.45; text-transform:lowercase; padding:calc(10 * var(--dc-u)) 0 0;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ex-wysiwyg.ex-completed { opacity:.62; }

/* ── EL VACÍO DE UNA CLASE ──────────────────────────────────────────
   Ni cartel, ni emoji, ni comillas: la acción, escrita. */
.ex-vacio {
  display:flex; flex-direction:column; align-items:flex-start;
  padding:calc(30 * var(--dc-u)) 0;
}
.ex-vacio-frase {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); opacity:.55; letter-spacing:var(--dc-tracking);
}
#screen-lesson .add-ex-btn {
  width:auto; margin:calc(40 * var(--dc-u)) auto calc(80 * var(--dc-u));
  padding:0; border:none !important; background:none !important; box-shadow:none !important;
  border-radius:0; gap:0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  letter-spacing:var(--dc-tracking); text-transform:lowercase; color:var(--dc-ink);
  opacity:.5; text-shadow:none;
  transition:opacity var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) {
  #screen-lesson .add-ex-btn:hover {
    opacity:1; text-shadow:var(--dc-shadow-text-strong); background:none !important;
    border:none !important; transform:none;
  }
}

/* ── LA GALERÍA ─────────────────────────────────────────────────────
   SIN INCLINACIÓN. La foto que se doblaba al acercarse a los bordes se
   quitó entera (Rolando, 05/09: "elimíname la animación esa… solo hover en
   la imagen como en cualquier imagen al pasar el mouse"): mareaba, se
   entorpecía al cruzar del borde al centro y era vocabulario que no usa
   ninguna otra foto de la casa.

   Ahora la foto hace lo que hacen todas: levantarse un poco. Y para pasar
   de una a otra hay dos palabras debajo, la misma pieza que "editar" o
   "eliminar", con la barra de la lista de alumnos entre ellas. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-outer {
  position:relative; overflow:visible; border-radius:0;
  background:none; box-shadow:none; transform:none; perspective:none;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-outer:hover { box-shadow:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-wrap {
  border-radius:var(--ej-radio); overflow:hidden; background:var(--dc-card-inner);
  box-shadow:var(--ej-foto-sombra);
  transition:transform var(--dc-t-lento) var(--dc-ease),
             box-shadow var(--dc-t-lento) var(--dc-ease),
             aspect-ratio .32s var(--dc-ease);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-outer:hover .img-gallery-wrap {
    transform:scale(1.025); box-shadow:var(--ej-foto-sombra-alta);
  }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-track {
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-slide img { border-radius:0; }
/* El pie: anterior · barra · siguiente, centrado bajo la foto. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-pie {
  display:flex; align-items:center; justify-content:center;
  gap:calc(30 * var(--dc-u)); margin-top:calc(30 * var(--dc-u));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-pie .ex-accion { font-size:var(--dc-fs-22); }
/* ANTERIOR · SIGUIENTE, ARRIBA Y CON SOMBRA (Rolando, 11/09: "no se ven cuando
   la imagen es blanca... deberían aparecer en cada lateral, pero en la parte
   superior de la imagen, y con sombra"). Sobre una foto blanca, una palabra
   blanca no existe: detrás lleva un velo oscuro que baja desde el borde de
   arriba -el mismo que ya lleva el pie de foto por abajo- y la palabra su
   propia sombra. Se ven siempre, un poco apagadas, para que se sepa que hay
   otra imagen; al acercarse se encienden.
   Y SIN SALTO AL PULSAR: la palabra se centraba con translateY(-50%) y la
   pieza .ex-accion, al pulsarla, cambia el transform por un scale - perdía el
   -50% y bajaba media altura de golpe ("se va muy abajo"). Arriba no hace
   falta centrar nada: sólo hay escala. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-wrap[id]::after {
  content:''; position:absolute; left:0; right:0; top:0; height:30%; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(12,18,30,.46), rgba(12,18,30,.18) 45%, rgba(12,18,30,0));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-lado {
  top:calc(20 * var(--dc-u)); transform:none; opacity:.86; z-index:5;
  font-size:var(--dc-fs-24, calc(24 * var(--dc-u)));
  padding:var(--dc-sp-14) var(--dc-sp-20); margin:0;
  text-shadow:0 calc(2 * var(--dc-u)) calc(10 * var(--dc-u)) rgba(12,18,30,.62),
              0 0 calc(26 * var(--dc-u)) rgba(12,18,30,.5);
  transition:opacity .3s var(--dc-ease), transform .3s var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-lado.prev { left:calc(16 * var(--dc-u)); transform-origin:left center; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-lado.next { right:calc(16 * var(--dc-u)); transform-origin:right center; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-outer:hover .ig-lado { opacity:.94; }
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-lado:hover { opacity:1; transform:scale(1.05); }
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-lado:active { transform:scale(.97); }
/* Pasar de foto: corto y sin arrastrar la página. La altura de la caja sigue a
   la foto nueva, pero a la vez que el deslizamiento y no después. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-track { transition:transform .42s cubic-bezier(.25,.1,.25,1); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-wrap[id] {
  transition:transform var(--dc-t-lento) var(--dc-ease), box-shadow var(--dc-t-lento) var(--dc-ease), aspect-ratio .42s cubic-bezier(.25,.1,.25,1);
}
/* La barra de la lista de alumnos, tumbada. Mismo metal, mismo degradado y
   misma sombra - sólo que el pulgar corre en horizontal. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-barra {
  position:relative; height:var(--dc-sp-18); width:min(calc(420 * var(--dc-u)), 46%);
  border-radius:var(--dc-radius-pill); background:rgba(255,255,255,.10);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .ig-barra-pulgar {
  position:absolute; top:0; bottom:0; border-radius:var(--dc-radius-pill);
  background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal);
  transition:left var(--dc-t-lento) var(--dc-ease), width var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .img-gallery-caption {
  font-family:var(--dc-font); font-size:var(--dc-fs-22); letter-spacing:var(--dc-tracking);
  padding:calc(26 * var(--dc-u)) calc(30 * var(--dc-u));
  background:linear-gradient(to top, rgba(12,18,30,.62), transparent);
}

/* ── DONDE EL ALUMNO ESCRIBE ─────────────────────────────────────────
   Describir, traducir, columnas de escritura y escritura libre.

   Primera versión: un rectángulo gris relleno. Rolando, 04/09: "se ve
   fatal lo de escritura libre. Un simple recuadro gris que dice de
   escribir… muy básico" · "cero recuadro, sombra muy difuminada con
   bastante radio que se amplía al escribir".

   Así que no hay recuadro: el sitio donde va el texto es una PENUMBRA
   INTERIOR - box-shadow inset con un desenfoque enorme y el radio de las
   fotos. Como es una sombra de dentro, no tiene canto: se apaga hacia el
   centro. Y como vive en el propio campo, crece con él a medida que se
   escribe, sin una sola línea de JavaScript. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.describe-input, .col-write-input, .fw-body) {
  background:var(--ej-vidrio-hondo) !important; border:none !important;
  backdrop-filter:var(--ej-vidrio-blur); -webkit-backdrop-filter:var(--ej-vidrio-blur);
  border-radius:var(--ej-r-zona);
  box-shadow:var(--ej-hundido) !important;
  padding:calc(26 * var(--dc-u)) calc(34 * var(--dc-u));
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  letter-spacing:var(--dc-tracking); line-height:1.65;
  color:var(--ej-tinta); caret-color:var(--ej-tinta);
  transition:background var(--dc-t-lento) var(--dc-ease),
             box-shadow var(--dc-t-lento) var(--dc-ease), height .32s var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.describe-input, .col-write-input)::placeholder {
  color:var(--ej-tinta); opacity:.52; font-family:var(--dc-font);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.describe-input, .col-write-input):focus,
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .fw-body:focus-within {
  background:var(--ej-vidrio) !important;
  box-shadow:var(--ej-alzado-alto) !important;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-grid { gap:calc(52 * var(--dc-u)) calc(44 * var(--dc-u)); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-card {
  background:none !important; border:none !important; box-shadow:none !important;
  gap:calc(24 * var(--dc-u));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-card:hover { transform:none; }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .describe-card .match-card-img-wrap {
  border-radius:var(--ej-radio); border:none; box-shadow:var(--ej-foto-sombra);
  transition:transform var(--dc-t-lento) var(--dc-ease), box-shadow var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .translate-list { display:flex; flex-direction:column; gap:calc(46 * var(--dc-u)); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .translate-card { gap:calc(18 * var(--dc-u)); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .translate-sentence {
  background:none !important; border:none !important; box-shadow:none !important;
  padding:0 0 0 calc(34 * var(--dc-u)); border-radius:0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--ej-fs);
  letter-spacing:var(--dc-tracking); color:var(--dc-ink);
}

/* ── COLUMNAS ────────────────────────────────────────────────────────
   El título sale FUERA del cajón y va en Coolvetica blanca sobre el
   degradado, como cualquier otro rótulo de la casa (Rolando: "no debería
   de estar escrito en negro ahí dentro del cuadro, sino fuera y en
   coolvetica blanca. No va el negro con la columna").

   Y el cajón deja de ser una tarjeta blanca brillante: gris tirando a
   sombra, mate y translúcido ("se ve demasiado brillante y con el negro
   se ve muy mal. Pongamos mejor un grisáceo tirando a sombra"). Como el
   .col-block ya no pinta nada, la caja es el propio sitio donde caen las
   palabras - y así el título queda por encima de ella, en el aire. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-grid {
  gap:calc(40 * var(--dc-u)); grid-template-columns:repeat(auto-fit, minmax(calc(300 * var(--dc-u)), 1fr));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-block {
  background:none !important; border:none !important; box-shadow:none !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0; overflow:visible; border-radius:0; min-height:0;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-block-title {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  letter-spacing:var(--dc-tracking); color:var(--dc-ink); opacity:.72;
  border:none; text-transform:none; text-align:center;
  padding:0 0 calc(16 * var(--dc-u)); background:none;
  text-shadow:var(--dc-shadow-text);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) :is(.col-drop, .col-block .col-write-input) {
  background:var(--ej-vidrio-hondo) !important; border:none !important;
  border-radius:var(--ej-r-zona);
  backdrop-filter:var(--ej-vidrio-blur); -webkit-backdrop-filter:var(--ej-vidrio-blur);
  box-shadow:var(--ej-hundido) !important;
  min-height:calc(180 * var(--dc-u));
  padding:calc(26 * var(--dc-u));
  transition:box-shadow var(--dc-t-lento) var(--dc-ease), background var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-drop {
  /* flex-direction:row a propósito: la regla base del cajón es `column`, y
     sin decirlo aquí `justify-content:center` centraba en VERTICAL y las
     palabras se quedaban pegadas al borde izquierdo. */
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:flex-start; align-content:flex-start; justify-content:center;
  gap:calc(20 * var(--dc-u)) calc(28 * var(--dc-u));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-drop.drag-over {
  background:var(--ej-vidrio-alto) !important;
  box-shadow:var(--ej-alzado-alto) !important;
}
/* Las palabras dentro del cajón son las MISMAS que en el banco: blancas,
   con su sombra debajo y elevándose al acercarse. Antes salían en negro,
   que es de otra app. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word {
  color:var(--ej-tinta) !important; opacity:.9;
  text-shadow:0 calc(6 * var(--dc-u)) calc(14 * var(--dc-u)) rgba(12,18,30,.46);
}
@media (any-hover: hover) {
  :is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word:hover {
    opacity:1; transform:translateY(calc(-5 * var(--dc-u)));
    text-shadow:0 calc(12 * var(--dc-u)) calc(22 * var(--dc-u)) rgba(12,18,30,.55),
                0 calc(24 * var(--dc-u)) calc(40 * var(--dc-u)) rgba(12,18,30,.34);
  }
}
/* La entrada de una palabra en su columna, con el mismo aterrizaje que en
   los huecos (antes de esta vuelta el desenfoque de colWordIn se comía la
   sombra del texto y el aterrizaje se veía sucio). */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word.col-word-in {
  animation:ejCae .52s cubic-bezier(.22,.61,.36,1) both;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-word.col-word-out {
  animation:ejSeVa .23s cubic-bezier(.4,0,.6,1) both;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-block .col-write-input {
  color:var(--dc-ink); caret-color:var(--dc-ink); min-height:calc(180 * var(--dc-u));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .col-block .col-write-input::placeholder { color:var(--dc-ink); opacity:.34; }

/* ── ESCRITURA LIBRE ─────────────────────────────────────────────────
   Los párrafos ya no llevan cada uno su plaquita: la penumbra la pone el
   contenedor entero (arriba), y el párrafo sólo se aclara un poco cuando
   escribes dentro de él. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .fw-p {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--ej-fs);
  letter-spacing:var(--dc-tracking); line-height:1.8; color:var(--ej-tinta);
  background:none; border-radius:calc(18 * var(--dc-u));
  padding:calc(4 * var(--dc-u)) calc(10 * var(--dc-u)); margin:0 0 calc(10 * var(--dc-u));
  transition:background var(--dc-t-lento) var(--dc-ease);
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .fw-write[data-fw-edit="1"] .fw-p:focus {
  background:rgba(12,18,30,.20); box-shadow:none; outline:none;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .fw-write.fw-empty .fw-p:first-child::before {
  color:var(--ej-tinta); opacity:.52; font-style:normal;
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .fw-body { min-height:calc(180 * var(--dc-u)); }
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .fw-title {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); opacity:.62; letter-spacing:var(--dc-tracking);
  border:none; padding:0; margin:0 0 calc(24 * var(--dc-u));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .fw-foot {
  border:none; padding:calc(14 * var(--dc-u)) 0 0; margin:0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-20);
  letter-spacing:var(--dc-tracking); color:var(--dc-ink); opacity:.4; text-transform:lowercase;
}
/* Lectura: el texto editorial se queda (es una lectura, no una interfaz),
   pero el título y el marco hablan como el resto. */
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .rd-title {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-50);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  text-shadow:var(--dc-shadow-text); border:none; padding:0;
  margin:0 0 calc(26 * var(--dc-u));
}
:is(#screen-lesson, #aula-clase-abierta, #ej-ed, #lec-ov, #lec-nav, .mp-ej) .rd-paragraph { color:var(--dc-ink); }

/* ── EL TÍTULO DE LA CLASE NO CHOCA CON LA CABECERA ──────────────────
   El scroll de la lección se desvanece por arriba (mask-image): un
   título largo, que ocupa dos renglones, empezaba dentro de ese
   desvanecido y se leía cortado contra "Hablamos". Se le da aire propio
   en vez de subir la máscara, que es lo que hace que el contenido
   aparezca con suavidad al desplazarse. */
#screen-lesson .clase-encabezado {
  padding-top:calc(56 * var(--dc-u)); margin-bottom:var(--dc-sp-40);
}
#aula-clase-abierta .clase-encabezado { padding-top:calc(34 * var(--dc-u)); }
#screen-lesson .clase-titulo { line-height:1.15; }

/* ═══════════════════════════════════════════════════════════════════
   ELEGIR TIPO DE EJERCICIO - el carrusel con las escenas (#tipo-ov)
   ═══════════════════════════════════════════════════════════════════
   Mismo cristal que "Nueva clase" (#crear-ov): velo claro y desenfoque
   de verdad, no oscuridad. Detrás no se mueve nada mientras está
   abierto, así que el blur se paga una vez. */
#tipo-ov {
  position:fixed; inset:0; z-index:2400;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--dc-sp-24);
  background:rgba(30,40,55,.30);
  backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
  opacity:0; transition:opacity var(--dc-t-entrada) var(--dc-ease);
}
#tipo-ov.abierto { opacity:1; }
/* En un aparato flojo no hay desenfoque (ver html.sin-desenfoque): entonces
   lo que separa esta pantalla de la de detrás tiene que ser el velo, y uno
   del 30 % deja leer la clase entera por debajo. */
html.sin-desenfoque #tipo-ov { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(26,35,50,.88); }
#tipo-ov .tipo-marca {
  position:fixed; top:var(--dc-sp-34); left:var(--dc-sp-76);
  /* Exactamente la misma marca que hay debajo, en el mismo sitio y del
     mismo tamaño: al abrirse esta pantalla la de detrás no se duplica, se
     sustituye. Con un tamaño distinto se veían dos "Hablamos" a la vez. */
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-80);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1;
  cursor:pointer; text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { #tipo-ov .tipo-marca:hover { transform:scale(1.05); } }
#tipo-ov .tipo-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-100);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1.04;
  text-shadow:var(--dc-shadow-text-strong); text-align:center;
}
#tipo-ov .tipo-galeria { width:100%; }
#tipo-ov .galeria-carril { --gal-w: calc(min(30vw, 40vh) * var(--dc-dens, 1)); align-items:center; }
#tipo-ov .tipo-in {
  display:flex; flex-direction:column; align-items:center; gap:calc(var(--gal-w) * .05);
  transition:transform var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { #tipo-ov .gal-item:hover .tipo-in { transform:scale(1.05); } }
#tipo-ov .tipo-nombre {
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:calc(var(--gal-w) * .095); line-height:1.1; text-align:center;
  color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  text-shadow:0 calc(10 * var(--dc-u)) calc(20 * var(--dc-u)) rgba(20,30,45,calc(.6 * var(--gal-ts, 1)));
  min-height:2.2em; display:flex; align-items:flex-end; justify-content:center;
}
/* LA ESCENA: la misma caja que la foto de una clase (mismo material, mismo
   radio, misma sombra), pero dentro se mueve el ejercicio en vez de haber
   una fotografía. Así el carrusel de tipos y el de clases son el mismo
   objeto y no dos cosas parecidas. */
:is(#tipo-ov, #ej-ed) .tipo-escena {
  position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
  border-radius:calc(var(--gal-w) * .092);
  background:var(--dc-card-inner);
  box-shadow:0 calc(var(--gal-w) * .052) calc(var(--gal-w) * .115) rgba(15,20,30,.34);
}
#tipo-ov .tipo-pie {
  font-family:var(--dc-font); font-size:calc(var(--gal-w) * .058);
  color:var(--dc-ink); opacity:.55; text-align:center; letter-spacing:var(--dc-tracking);
  min-height:1.6em;
}

/* ── LAS ESCENAS ─────────────────────────────────────────────────────
   Vocabulario común, en unidades de la propia ficha (--gal-w) para que
   una escena se vea igual en cualquier pantalla. Todo está PARADO hasta
   que la ficha llega al centro: once bucles a la vez serían once
   animaciones pintando siempre, y sólo se mira una. */
:is(#tipo-ov, #ej-ed) .dm {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:calc(var(--gal-w) * .045);
  padding:calc(var(--gal-w) * .075);
  font-family:var(--dc-font); font-weight:var(--dc-weight);
  font-size:calc(var(--gal-w) * .062); letter-spacing:var(--dc-tracking);
  color:var(--dc-ink-dark);
}
:is(#tipo-ov, #ej-ed) .dm * { animation-play-state:paused; }
#tipo-ov .gal-item.es-centro .dm * { animation-play-state:running; }
/* En el editor la escena está sola y siempre en marcha: no hay carril del que
   ser el centro. */
#ej-ed .dm * { animation-play-state:running; }

/* ══════════════════════════════════════════════════════════════════════
   MONTAR UN EJERCICIO (#ej-ed)                  Rolando, 07/09/2026
   ══════════════════════════════════════════════════════════════════════
   Detrás del carrusel de tipos vivía el formulario viejo: una hoja que subía
   desde abajo, con su barra de título, su ✕, sus etiquetas en gris, sus
   recuadros de formulario y dos botones-píldora al pie. Nada de eso es de
   esta casa ("hay que rehacerlo con el lenguaje visual de la plataforma:
   fondo desenfocado, sin caja, trabajando en el centro, y VIÉNDOSE COMO SE
   VERÁ").

   Ahora: el mismo cristal que el carrusel de tipos (no se cambia de material
   al elegir, se continúa), la escena del tipo elegido arriba -la misma que
   acabas de tocar-, las instrucciones debajo de ella, lo que escribes en el
   centro y, debajo, el ejercicio montándose de verdad según escribes.
   Guardar y cancelar son dos palabras, no dos píldoras; cancelar devuelve al
   carrusel de tipos, que es de donde venías. */
#ej-ed {
  position:fixed; inset:0; z-index:2400;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto; overscroll-behavior:contain;
  padding:var(--dc-sp-40) var(--dc-sp-76) var(--dc-sp-72);
  background:rgba(30,40,55,.30);
  backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
  opacity:0; transition:opacity var(--dc-t-entrada) var(--dc-ease);
}
#ej-ed.abierto { opacity:1; }
html.sin-desenfoque #ej-ed { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(26,35,50,.88); }
#ej-ed::-webkit-scrollbar { display:none; }
/* La marca hace de "atrás", igual que en el carrusel de tipos. */
#ej-ed .tipo-marca {
  position:fixed; top:var(--dc-sp-34); left:var(--dc-sp-76);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-80);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1;
  cursor:pointer; text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease); z-index:2;
}
@media (any-hover: hover) { #ej-ed .tipo-marca:hover { transform:scale(1.05); } }

/* Más estrecho que la pantalla a propósito: "debe ser más pequeño que los
   formularios actuales de pantalla completa". Es una columna de trabajo. */
#ej-ed .ejed {
  width:100%; max-width:calc(760 * var(--dc-u));
  margin:auto; display:flex; flex-direction:column; align-items:center;
  gap:var(--dc-sp-24);
  transform:translateY(calc(14 * var(--dc-u)));
  transition:transform var(--dc-t-entrada) var(--dc-ease);
}
#ej-ed.abierto .ejed { transform:none; }

/* La cabecera: la escena del tipo (pequeña, la misma caja de la ficha), su
   nombre, y las instrucciones. Aquí es donde vive el "pon guion bajo…". */
#ej-ed .ejed-escena {
  --gal-w:calc(300 * var(--dc-u));
  width:var(--gal-w); flex:none;
}
#ej-ed .ejed-cab {
  display:flex; align-items:center; gap:var(--dc-sp-36); width:100%;
}
#ej-ed .ejed-dice { flex:1; min-width:0; }
#ej-ed .ejed-nombre {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1.06;
  text-shadow:var(--dc-shadow-text-strong);
}
#ej-ed .ejed-ayuda {
  margin-top:var(--dc-sp-14);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); opacity:.62; line-height:1.45; letter-spacing:var(--dc-tracking);
}
#ej-ed .ejed-ayuda code {
  font-family:inherit; background:none; padding:0;
  opacity:1; text-shadow:var(--dc-shadow-text-strong);
}
#ej-ed .ejed-ayuda b { font-weight:inherit; opacity:1; }

/* El cuerpo: sin caja, sin etiquetas grises. Cada campo es una línea de
   texto de la casa sobre el cristal. */
#ej-ed .ejed-cuerpo { width:100%; display:flex; flex-direction:column; gap:var(--dc-sp-20); }
#ej-ed .f-label {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); opacity:.45; letter-spacing:var(--dc-tracking);
  text-transform:lowercase; margin:var(--dc-sp-10) 0 0;
}
#ej-ed .f-input, #ej-ed .pro-textarea {
  width:100%; background:none; border:none; outline:none; box-shadow:none;
  border-radius:0; resize:none;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-34);
  color:var(--dc-ink); caret-color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  line-height:1.4; padding:var(--dc-sp-8) 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:border-color var(--dc-t-lento) var(--dc-ease);
}
#ej-ed .pro-textarea { min-height:calc(150 * var(--dc-u)); }
#ej-ed .f-input:focus, #ej-ed .pro-textarea:focus { border-bottom-color:rgba(255,255,255,.5); }
#ej-ed .f-input::placeholder, #ej-ed .pro-textarea::placeholder { color:var(--dc-ink); opacity:.3; }
/* La ayuda de sintaxis ya no va suelta entre los campos: vive arriba, al lado
   de la escena. Lo que quede escrito en el cuerpo se esconde. */
#ej-ed .pro-syntax-hint { display:none; }
/* ASÍ SE VA A VER. No es una "vista previa" en un recuadro gris: es el
   ejercicio, montado, sobre el mismo fondo en el que va a vivir. */
#ej-ed .pro-preview-label {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink); opacity:.45; letter-spacing:var(--dc-tracking);
  text-transform:lowercase; margin-top:var(--dc-sp-16);
}
/* En la vista, el hueco hereda el tamaño de la frase: montado a mano (sin el
   <input> de dentro que lo estira en la clase de verdad) se quedaba enano. */
#ej-ed .pro-preview .so-hueco, #ej-ed .pro-preview .wa-hueco { font-size:inherit; }
#ej-ed .pro-preview {
  background:none; border:none; box-shadow:none; border-radius:0; padding:0;
  min-height:0; color:var(--dc-ink);
}
/* Guardar y cancelar: dos palabras. */
#ej-ed .ejed-pie {
  display:flex; align-items:baseline; justify-content:center; gap:var(--dc-sp-48);
  margin-top:var(--dc-sp-24);
}
#ej-ed .ejed-pie button {
  background:none; border:none; cursor:pointer; padding:var(--dc-sp-10) var(--dc-sp-20);
  margin:calc(var(--dc-sp-10) * -1) calc(var(--dc-sp-20) * -1);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease);
}
#ej-ed .ejed-pie .ejed-cancelar { opacity:.55; font-size:var(--dc-fs-30); }
@media (any-hover: hover) { #ej-ed .ejed-pie button:hover { transform:scale(1.06); opacity:1; } }
#ej-ed .ejed-pie button:active { transform:scale(.985); }
/* Añadir una imagen no es una píldora con un ＋: es una palabra. */
#ej-ed .add-pair {
  align-self:flex-start; background:none; border:none; box-shadow:none; border-radius:0;
  padding:var(--dc-sp-10) var(--dc-sp-20); margin:0 calc(var(--dc-sp-20) * -1);
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); opacity:.62; cursor:pointer; letter-spacing:var(--dc-tracking);
  text-shadow:var(--dc-shadow-text-strong);
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { #ej-ed .add-pair:hover { opacity:1; transform:scale(1.05); } }
@media (max-width:820px) {
  #ej-ed { padding:var(--dc-sp-40) var(--dc-sp-24) var(--dc-sp-60); }
  #ej-ed .ejed-cab { flex-direction:column; align-items:flex-start; gap:var(--dc-sp-20); }
  #ej-ed .ejed-escena { --gal-w:min(62vw, calc(300 * var(--dc-u))); }
  #ej-ed .tipo-marca { left:var(--dc-sp-24); font-size:var(--dc-fs-30); }
}
@media (prefers-reduced-motion: reduce) { :is(#tipo-ov, #ej-ed) .dm * { animation:none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   EL CONSTRUCTOR (11/09/2026) - se escribe SOBRE el ejercicio
   ══════════════════════════════════════════════════════════════════════
   Lo que escribes es lo importante, así que ocupa la pantalla: se acabó la
   franja de cuatro renglones con su propio scroll (Rolando). Si el
   ejercicio es largo, se desplaza la pantalla entera, como una hoja. */
#ej-ed .ejed { max-width:calc(960 * var(--dc-u)); gap:var(--dc-sp-34); }
#ej-ed .ejed-hoja { width:100%; }
#ej-ed .ejed-obra { width:100%; position:relative; }
/* La consigna: se escribe donde se lee, con la letra de la consigna de la clase. */
#ej-ed .ejed-consigna {
  display:block; width:100%; background:none; border:none; outline:none; box-shadow:none; padding:0;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); caret-color:var(--dc-ink); letter-spacing:var(--dc-tracking);
  opacity:.72; margin:0 0 calc(30 * var(--dc-u)); transition:opacity var(--dc-t-lento) var(--dc-ease);
}
#ej-ed .ejed-consigna:focus { opacity:1; }
#ej-ed .ejed-consigna::placeholder { color:var(--dc-ink); opacity:.45; }
#ej-ed .ejed-titulo-lectura { font-size:var(--dc-fs-52, calc(52 * var(--dc-u))); opacity:1; text-shadow:var(--dc-shadow-text); }

/* EL PAPEL. Renglones de la clase de verdad (la letra, el punto de estado)
   con los huecos de metal dentro. Nada de "vista previa": esto ES el
   ejercicio. */
#ej-ed .ep-papel {
  position:relative; outline:none; min-height:38vh; cursor:text;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--ej-fs);
  color:var(--dc-ink); caret-color:var(--dc-ink); letter-spacing:var(--dc-tracking); line-height:1.85;
}
#ej-ed .ep-papel.ep-vacio::before {
  content:attr(data-vacio); position:absolute; left:calc(34 * var(--dc-u)); top:calc(8 * var(--dc-u));
  opacity:.38; pointer-events:none;
}
#ej-ed .ep-reading.ep-vacio::before { left:0; }
#ej-ed .ep-linea {
  position:relative; min-height:1.85em; word-break:normal; overflow-wrap:break-word;
  padding:calc(8 * var(--dc-u)) calc(12 * var(--dc-u)) calc(8 * var(--dc-u)) calc(34 * var(--dc-u));
  margin:0 0 calc(12 * var(--dc-u));
}
#ej-ed .ep-linea::before {
  content:''; position:absolute; left:calc(2 * var(--dc-u)); top:calc(8 * var(--dc-u) + .925em - 6 * var(--dc-u));
  width:calc(12 * var(--dc-u)); height:calc(12 * var(--dc-u)); border-radius:50%;
  background:rgba(255,255,255,.34);
}
#ej-ed .ep-reading .ep-linea { padding-left:0; font-size:var(--dc-fs-30); line-height:1.6; }
#ej-ed .ep-reading .ep-linea::before { display:none; }
#ej-ed .ep-reading b, #ej-ed .ep-reading strong { font-weight:inherit; text-shadow:var(--dc-shadow-text-strong); }
/* Traducir: debajo de cada frase, el sitio donde escribirá el alumno. */
#ej-ed .ep-translate .ep-linea::after {
  content:''; display:block; height:calc(76 * var(--dc-u)); margin:calc(14 * var(--dc-u)) 0 calc(10 * var(--dc-u));
  border-radius:var(--ej-r-zona); background:var(--ej-vidrio-hondo); box-shadow:var(--ej-hundido);
  pointer-events:none;
}
/* EL HUECO. La misma píldora de metal que en la clase; mientras escribes
   dentro de ella se levanta un poco más, y nace creciendo. */
#ej-ed .ep-hueco {
  display:inline-block; min-width:calc(150 * var(--dc-u)); padding:0 .8em; margin:0 .3em;
  line-height:1.85em; height:1.85em; vertical-align:middle; text-align:center; white-space:pre;
  border-radius:var(--ej-r-pildora); background:var(--ej-metal); box-shadow:var(--ej-alzado);
  color:var(--ej-tinta); text-shadow:var(--ej-tinta-sombra); caret-color:var(--dc-ink);
  transition:box-shadow var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease), min-width var(--dc-t-lento) var(--dc-ease);
}
#ej-ed .ep-hueco.ep-abierto, #ej-ed .ep-hueco:focus-within { box-shadow:var(--ej-alzado-alto); }
#ej-ed .ep-hueco.ep-nace { animation:epNace .44s cubic-bezier(.22,.61,.36,1) both; }
@keyframes epNace { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:none; } }
/* El banco de "arrastra la palabra" se escribe solo, con lo que va en los huecos. */
#ej-ed .ep-banco { margin-bottom:calc(34 * var(--dc-u)); min-height:2.6em; }
#ej-ed .ep-banco-vacio { font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink); opacity:.4; padding:0 .4em; }
#ej-ed .ep-banco .w-chip { cursor:default; }
#ej-ed .ep-otra {
  background:none; border:none; outline:none; box-shadow:none; padding:0 .4em; width:11em;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--ej-fs-palabra);
  color:var(--dc-ink); caret-color:var(--dc-ink); letter-spacing:var(--dc-tracking); opacity:.55;
}
#ej-ed .ep-otra:focus { opacity:1; }
#ej-ed .ep-otra::placeholder { color:var(--dc-ink); opacity:.6; }
/* Las palabras que sobran se quitan pulsándolas: al acercarse, "quitar". */
#ej-ed .ep-quitar { display:inline-block; width:0; overflow:hidden; opacity:0; margin-left:0;
  font-size:.62em; vertical-align:middle; transition:opacity var(--dc-t-lento) var(--dc-ease), width var(--dc-t-lento) var(--dc-ease), margin var(--dc-t-lento) var(--dc-ease); }
#ej-ed :is(.ep-sobra, .ep-col-pal) { cursor:pointer; }
@media (any-hover: hover) { #ej-ed :is(.ep-sobra, .ep-col-pal):hover .ep-quitar { width:3.2em; opacity:.7; margin-left:.4em; } }

/* Fotos: la tarjeta de la clase, con lo que se puede hacer encima. */
#ej-ed .ep-ratios { margin:0 0 calc(30 * var(--dc-u)); }
#ej-ed .ep-foto { cursor:pointer; position:relative; }
#ej-ed .ep-foto-acciones {
  position:absolute; top:calc(12 * var(--dc-u)); right:calc(18 * var(--dc-u)); z-index:3;
  display:flex; gap:calc(26 * var(--dc-u)); opacity:0; transition:opacity var(--dc-t-lento) var(--dc-ease);
}
#ej-ed .ep-foto-acciones .ex-accion { opacity:.92; text-shadow:0 1px 3px rgba(12,18,30,.7), 0 0 calc(22 * var(--dc-u)) rgba(12,18,30,.55); }
@media (any-hover: hover) {
  #ej-ed :is(.ep-foto-tarjeta, .ep-diapo):hover .ep-foto-acciones { opacity:1; }
  #ej-ed .ep-foto-acciones .ex-accion:hover { opacity:1; }
}
@media (hover:none) { #ej-ed .ep-foto-acciones { opacity:1; } }
#ej-ed .ep-foto-nueva .ep-foto { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:var(--dc-card-inner); }
#ej-ed .ep-foto-nueva .match-card-add-txt { font-family:var(--dc-font); font-size:var(--dc-fs-30); color:var(--dc-ink); opacity:.6; }
#ej-ed .ep-palabra-foto { cursor:text; outline:none; text-align:center; color:var(--ej-tinta); caret-color:var(--dc-ink); }
#ej-ed .ep-palabra-foto::placeholder { color:var(--dc-ink); opacity:.5; }
#ej-ed .ep-subiendo :is(img, .match-card-img) { opacity:.55; filter:blur(2px); transition:opacity .4s, filter .4s; }
#ej-ed .ep-se-va { opacity:0 !important; filter:blur(8px); transform:scale(.96); pointer-events:none;
  transition:opacity .26s var(--dc-ease), filter .26s var(--dc-ease), transform .26s var(--dc-ease); }
#ej-ed .describe-input[disabled] { pointer-events:none; min-height:calc(90 * var(--dc-u)); }

/* La galería: el carrusel de la casa, con "añadir" al final. */
#ej-ed .ep-galeria .galeria-carril { --gal-w:calc(min(30vw, 42vh) * var(--dc-dens, 1)); }
/* A sangre: el carrusel ocupa la pantalla entera, como en todas partes, y se
   desvanece contra los bordes de la pantalla, no contra la columna. */
#ej-ed .ep-galeria { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
#ej-ed .ep-diapo .gal-foto > img { object-fit:cover; }
#ej-ed .ep-pie-foto {
  display:block; width:100%; background:none; border:none; outline:none; box-shadow:none; text-align:center;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:calc(var(--gal-w) * .062);
  color:var(--dc-ink); caret-color:var(--dc-ink); letter-spacing:var(--dc-tracking); opacity:.7; min-height:1.6em;
}
#ej-ed .ep-pie-foto::placeholder { color:var(--dc-ink); opacity:.45; }
#ej-ed .ep-diapo .ep-foto-acciones { top:calc(var(--gal-w) * .04); right:calc(var(--gal-w) * .05); }

/* Columnas: el título se escribe encima del cajón, las palabras dentro. */
#ej-ed .ep-modo { margin:0 0 calc(26 * var(--dc-u)); }
#ej-ed .ep-col { position:relative; }
#ej-ed .ep-col-titulo { background:none; border:none; outline:none; box-shadow:none; width:100%; text-align:center;
  color:var(--dc-ink); caret-color:var(--dc-ink); }
#ej-ed .ep-col-titulo::placeholder { color:var(--dc-ink); opacity:.4; }
#ej-ed .ep-col-cajon { min-height:calc(160 * var(--dc-u)); display:flex; flex-direction:row !important; flex-wrap:wrap;
  align-items:center; align-content:flex-start; justify-content:center; gap:calc(10 * var(--dc-u)) calc(18 * var(--dc-u)); }
#ej-ed .ep-col-cajon .ep-col-otra { order:99; }
#ej-ed .ep-col-nota { font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink); opacity:.45; align-self:center; margin:auto; }
#ej-ed .ep-col-otra { width:7em; }
#ej-ed .ep-col-quitar { position:absolute; top:0; right:0; opacity:0; transition:opacity var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { #ej-ed .ep-col:hover .ep-col-quitar { opacity:.6; } }
#ej-ed .ep-col-nueva { cursor:pointer; display:flex; align-items:center; justify-content:center; min-height:calc(160 * var(--dc-u));
  margin-top:calc(var(--dc-fs-30) * 1.4 + 10 * var(--dc-u));
  border:none !important; border-radius:var(--ej-r-zona); background:var(--ej-vidrio-hondo) !important; box-shadow:var(--ej-hundido) !important;
  opacity:.5; transition:opacity var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { #ej-ed .ep-col-nueva:hover { opacity:.9; } }
#ej-ed .ep-col-nueva .match-card-add-txt { font-family:var(--dc-font); font-size:var(--dc-fs-30); color:var(--dc-ink); }
/* Escritura libre: el recuadro tal cual; lo de dentro es lo que verá el alumno. */
#ej-ed .ep-fw .ep-fw-ph { outline:none; cursor:text; opacity:.6; min-height:1.65em; }
#ej-ed .ep-fw .ep-fw-ph:empty::before { content:attr(data-vacio); opacity:.6; }
#ej-ed .ep-fw .fw-count { opacity:.45; }

/* ── EL RECORTADOR, EN EL IDIOMA DE LA CASA (11/09) ──────────────────────
   Era la última hoja de formulario que quedaba: barra de título, ✕, lupa y
   dos botones-píldora. Ahora es la foto en el centro sobre el mismo cristal
   que el constructor, la barra de acercar es la barra de metal de la
   galería, y "cancelar · recortar" son dos palabras. */
#modal-crop { z-index:2600; align-items:center; background:rgba(30,40,55,.30);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); }
#modal-crop .modal { background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
  -webkit-backdrop-filter:none; backdrop-filter:none; max-width:min(calc(820 * var(--dc-u)), 92vw) !important; animation:none; }
#modal-crop .modal-handle, #modal-crop .modal-close { display:none !important; }
#modal-crop .modal-head { border:none; background:none; padding:0 0 calc(10 * var(--dc-u)); justify-content:center; }
#modal-crop .modal-title { font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60);
  color:var(--dc-ink); letter-spacing:var(--dc-tracking); text-shadow:var(--dc-shadow-text-strong); text-align:center; width:100%; }
#modal-crop .modal-body { padding:0; overflow:visible; }
#modal-crop #crop-modal-hint { font-family:var(--dc-font) !important; font-size:var(--dc-fs-22) !important; color:var(--dc-ink) !important;
  opacity:.6; text-align:center; margin:0 0 calc(24 * var(--dc-u)) !important; letter-spacing:var(--dc-tracking); }
#modal-crop #crop-stage { border-radius:var(--ej-radio, calc(44 * var(--dc-u))); background:rgba(12,18,30,.35);
  box-shadow:0 calc(22 * var(--dc-u)) calc(60 * var(--dc-u)) rgba(15,20,30,.4); }
#modal-crop #crop-frame { border:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
#modal-crop .crop-zoom-ico { display:none; }
#modal-crop #crop-zoom { -webkit-appearance:none; appearance:none; height:calc(18 * var(--dc-u)); border-radius:99px;
  background:rgba(255,255,255,.12); outline:none; cursor:pointer; }
#modal-crop #crop-zoom::-webkit-slider-thumb { -webkit-appearance:none; width:calc(90 * var(--dc-u)); height:calc(18 * var(--dc-u));
  border-radius:99px; background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal); border:none; }
#modal-crop #crop-zoom::-moz-range-thumb { width:calc(90 * var(--dc-u)); height:calc(18 * var(--dc-u));
  border-radius:99px; background:var(--dc-pill-metal); box-shadow:var(--dc-shadow-pill-metal); border:none; }
#modal-crop .modal-btn { background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40); color:var(--dc-ink) !important;
  letter-spacing:var(--dc-tracking); text-shadow:var(--dc-shadow-text-strong); flex:0 0 auto !important; padding:var(--dc-sp-10) var(--dc-sp-20);
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease); }
#modal-crop .modal-btn.cancel { opacity:.55; font-size:var(--dc-fs-30); }
#modal-crop .crop-pie { justify-content:center; gap:var(--dc-sp-48) !important; align-items:baseline; }
#modal-crop .modal-btn.save { order:-1; }
#modal-crop .modal { overflow:visible !important; }
@media (any-hover: hover) { #modal-crop .modal-btn:hover { transform:scale(1.06); opacity:1; } }

:is(#tipo-ov, #ej-ed) .dm-frase { display:flex; align-items:center; gap:.34em; white-space:nowrap; }
:is(#tipo-ov, #ej-ed) .dm-tenue { opacity:.4; }
:is(#tipo-ov, #ej-ed) .dm-fila { display:flex; align-items:center; justify-content:center; gap:calc(var(--gal-w) * .05); width:100%; }
/* El hueco: la misma sombra rectangular de la plataforma, en pequeño. */
:is(#tipo-ov, #ej-ed) .dm-hueco {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:calc(var(--gal-w) * .22); height:1.5em; padding:0 .3em;
}
:is(#tipo-ov, #ej-ed) .dm-hueco-ancho { min-width:calc(var(--gal-w) * .3); }
:is(#tipo-ov, #ej-ed) .dm-hueco::before {
  content:''; position:absolute; inset:calc(var(--gal-w) * .006) 0;
  border-radius:calc(var(--gal-w) * .022);
  box-shadow:0 calc(var(--gal-w) * .022) calc(var(--gal-w) * .07) rgba(20,30,45,.42);
}
:is(#tipo-ov, #ej-ed) .dm-banco {
  display:flex; gap:calc(var(--gal-w) * .06); align-items:center;
  padding:calc(var(--gal-w) * .028) calc(var(--gal-w) * .07);
  border-radius:calc(var(--gal-w) * .12);
  background:rgba(255,255,255,.42);
  box-shadow:0 calc(var(--gal-w) * .018) calc(var(--gal-w) * .06) rgba(15,20,30,.12);
}
:is(#tipo-ov, #ej-ed) .dm-pal { opacity:.8; }
:is(#tipo-ov, #ej-ed) .dm-foto {
  display:block; width:calc(var(--gal-w) * .26); aspect-ratio:1/1;
  border-radius:calc(var(--gal-w) * .05);
  background:linear-gradient(150deg, #9fb0c6, #6d7f9c);
  box-shadow:0 calc(var(--gal-w) * .03) calc(var(--gal-w) * .07) rgba(15,20,30,.32);
}
:is(#tipo-ov, #ej-ed) .dm-foto-2 { background:linear-gradient(150deg, #c3cbd6, #8593ab); }
:is(#tipo-ov, #ej-ed) .dm-foto-ancha { width:calc(var(--gal-w) * .58); aspect-ratio:16/10; }
:is(#tipo-ov, #ej-ed) .dm-zona {
  display:flex; flex-direction:column; gap:calc(var(--gal-w) * .028);
  width:calc(var(--gal-w) * .62); padding:calc(var(--gal-w) * .04);
  border-radius:calc(var(--gal-w) * .05); background:rgba(12,18,30,.14);
}
:is(#tipo-ov, #ej-ed) .dm-zona-alta { width:calc(var(--gal-w) * .7); }
:is(#tipo-ov, #ej-ed) .dm-renglon {
  display:block; height:calc(var(--gal-w) * .022); border-radius:99px;
  background:rgba(20,30,45,.42); width:0;
}
:is(#tipo-ov, #ej-ed) .dm-columna {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--gal-w) * .026);
  width:calc(var(--gal-w) * .3); height:calc(var(--gal-w) * .3);
  border-radius:calc(var(--gal-w) * .05);
  background:var(--dc-card-inner);
  box-shadow:0 calc(var(--gal-w) * .022) calc(var(--gal-w) * .055) rgba(15,20,30,.26);
}
:is(#tipo-ov, #ej-ed) .dm-opciones { display:flex; flex-direction:column; align-items:center; gap:calc(var(--gal-w) * .012); }
:is(#tipo-ov, #ej-ed) .dm-op { opacity:0; }
:is(#tipo-ov, #ej-ed) .dm-parrafo { display:flex; flex-direction:column; gap:calc(var(--gal-w) * .03); width:calc(var(--gal-w) * .66); }
:is(#tipo-ov, #ej-ed) .dm-barra {
  position:relative; width:calc(var(--gal-w) * .34); height:calc(var(--gal-w) * .022);
  border-radius:99px; background:rgba(255,255,255,.35);
}
:is(#tipo-ov, #ej-ed) .dm-barra-pulgar {
  position:absolute; top:0; bottom:0; width:33%; border-radius:99px;
  background:var(--dc-pill-metal); box-shadow:0 calc(var(--gal-w)*.01) calc(var(--gal-w)*.03) rgba(20,30,45,.4);
  animation:dmBarra 5.4s var(--dc-ease) infinite;
}
:is(#tipo-ov, #ej-ed) .dm-cursor {
  width:calc(var(--gal-w) * .008); height:1.05em; background:currentColor;
  animation:dmParpadeo 1s steps(1) infinite;
}

/* La palabra que sale del banco y cae en su hueco. */
:is(#tipo-ov, #ej-ed) .dm-pal-va { animation:dmSeVa 4.2s var(--dc-ease) infinite; }
:is(#tipo-ov, #ej-ed) .dm-cae    { animation:dmCae  4.2s var(--dc-ease) infinite; }
:is(#tipo-ov, #ej-ed) .dm-cae-tarde { animation:dmCae 5.4s var(--dc-ease) infinite; animation-delay:.6s; }
@keyframes dmSeVa {
  0%, 24% { opacity:.8; transform:none; }
  38%,86% { opacity:0;  transform:translateY(calc(var(--gal-w) * .05)) scale(.9); }
  95%,100%{ opacity:.8; transform:none; }
}
@keyframes dmCae {
  0%, 26%  { opacity:0; transform:translateY(calc(var(--gal-w) * -.11)) scale(.92); filter:blur(3px); }
  44%, 84% { opacity:1; transform:none; filter:blur(0); }
  92%,100% { opacity:0; transform:translateY(calc(var(--gal-w) * -.11)) scale(.92); filter:blur(3px); }
}
/* La oración que se escribe sola. */
:is(#tipo-ov, #ej-ed) .dm-teclea {
  display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  animation:dmTeclea 4.6s steps(14) infinite;
}
@keyframes dmTeclea {
  0%,6%    { max-width:0; }
  38%, 84% { max-width:6em; }
  92%,100% { max-width:0; }
}
@keyframes dmParpadeo { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
/* Las opciones que aparecen debajo y una que se enciende. */
:is(#tipo-ov, #ej-ed) .dm-op:nth-child(1) { animation:dmAparece 5.4s var(--dc-ease) infinite; animation-delay:.1s; }
:is(#tipo-ov, #ej-ed) .dm-op:nth-child(2) { animation:dmAparece 5.4s var(--dc-ease) infinite; animation-delay:.2s; }
:is(#tipo-ov, #ej-ed) .dm-op:nth-child(3) { animation:dmAparece 5.4s var(--dc-ease) infinite; animation-delay:.3s; }
:is(#tipo-ov, #ej-ed) .dm-op-elegida { font-weight:inherit; }
@keyframes dmAparece {
  0%, 8%   { opacity:0; transform:translateY(calc(var(--gal-w) * .02)); }
  20%, 52% { opacity:.75; transform:none; }
  62%,100% { opacity:0; transform:translateY(calc(var(--gal-w) * .02)); }
}
/* Los renglones que se escriben, uno detrás de otro. */
:is(#tipo-ov, #ej-ed) .dm-r1 { animation:dmRenglon 5.2s var(--dc-ease) infinite; }
:is(#tipo-ov, #ej-ed) .dm-r2 { animation:dmRenglon 5.2s var(--dc-ease) infinite; animation-delay:.7s; }
:is(#tipo-ov, #ej-ed) .dm-r3 { animation:dmRenglon 5.2s var(--dc-ease) infinite; animation-delay:1.4s; }
@keyframes dmRenglon {
  0%, 4%   { width:0; }
  34%, 82% { width:100%; }
  90%,100% { width:0; }
}
/* La lectura: el resaltado que barre una línea. */
:is(#tipo-ov, #ej-ed) .dm-r-fijo { width:100%; }
:is(#tipo-ov, #ej-ed) .dm-r-corto { width:62%; }
:is(#tipo-ov, #ej-ed) .dm-r-resalta {
  background:linear-gradient(90deg, rgba(255,214,120,.95) 0%, rgba(255,214,120,.95) 100%);
  background-size:0% 100%; background-repeat:no-repeat;
  animation:dmResalta 5s var(--dc-ease) infinite;
}
@keyframes dmResalta {
  0%, 10%  { background-size:0% 100%; }
  46%, 84% { background-size:100% 100%; }
  92%,100% { background-size:0% 100%; }
}
/* La foto que se dobla como una ficha de verdad. */
:is(#tipo-ov, #ej-ed) .dm-foto-gira { animation:dmGira 5s var(--dc-ease) infinite; }
@keyframes dmGira {
  0%, 12%  { transform:perspective(600px) rotateY(0deg); }
  34%      { transform:perspective(600px) rotateY(-13deg); }
  46%      { transform:perspective(600px) rotateY(9deg); filter:brightness(1.12); }
  62%,100% { transform:perspective(600px) rotateY(0deg); }
}
@keyframes dmBarra {
  0%, 20%  { left:0; }
  46%, 70% { left:33%; }
  86%,100% { left:66%; }
}
@media (max-width:620px) {
  #tipo-ov .galeria-carril { --gal-w: 62vw; }
  #tipo-ov .tipo-titulo { font-size:var(--dc-fs-60); }
  #tipo-ov .tipo-marca { left:var(--dc-sp-24); font-size:var(--dc-fs-30); }
}


/* ══════════════════════════════════════════════════════════════════
   CLASES PAGADAS, PLATEGA E IDIOMA DEL ALUMNO (12/09/2026)
   Nada de materiales nuevos: la tarjeta de pago es el metal de los
   ejercicios (el mismo degradado de --ej-metal, que vive en otra hoja y por
   eso se repite aquí literal) con la sombra de la cápsula de la nav; los
   botones de + y − son el CARRIL de la galería (blanco plano al 12 %); la
   acción es texto con la sombra fuerte, como "guardar" en toda la casa.
   ══════════════════════════════════════════════════════════════════ */

/* ── AJUSTES DEL ALUMNO ── */
/* La palabra de vuelta, un escalón por debajo de la del profesor: "занятия и
   оплата" a 100 no cabe en la columna y se partía en dos renglones. */
#alumno-panel-ajustes .aj-vuelta { transform-origin:center center; margin-bottom:var(--dc-sp-24); font-size:var(--dc-fs-80); }
#alumno-panel-ajustes .aj-clases .aj-vuelta { font-size:var(--dc-fs-68); margin-bottom:var(--dc-sp-10); }
#alumno-panel-ajustes .aj-idiomas { justify-content:center; gap:var(--dc-sp-60); margin-top:var(--dc-sp-24); }
#alumno-panel-ajustes .aj-idiomas .ent-op { font-size:var(--dc-fs-50); transform-origin:center; text-transform:none; }
#alumno-panel-ajustes .aj-clases { padding-bottom:var(--dc-sp-72); }
/* El panel de ajustes del alumno está centrado en alto (min-height +
   justify-content:center): con el saldo, la tarjeta y el historial ya no
   cabe en una pantalla, y centrado se cortaría por arriba. */
#alumno-panel-ajustes:has(.aj-clases) { justify-content:flex-start; }

.mc-aviso[hidden] { display:none; }
.mc-aviso {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-34);
  color:var(--dc-ink); line-height:1.3; text-align:center; max-width:calc(760 * var(--dc-u));
  text-shadow:var(--dc-shadow-text-strong); margin:0 auto var(--dc-sp-24);
}
.mc-saldo { text-align:center; margin-top:0; min-height:calc(80 * var(--dc-u)); }
/* El saldo cabe en UNA línea: "У вас осталось 4 занятия", con el número
   grande dentro de la frase. En tres renglones se comía media pantalla y la
   tarjeta de pago quedaba debajo del borde. */
.mc-linea {
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:0 var(--dc-sp-18);
  font-family:var(--dc-font); font-weight:var(--dc-weight); color:var(--dc-ink);
  text-shadow:var(--dc-shadow-text-strong);
}
.mc-quedan, .mc-unidad { font-size:var(--dc-fs-40); line-height:1.1; }
.mc-quedan { opacity:.8; }
.mc-numero {
  font-size:var(--dc-fs-100); line-height:.95; letter-spacing:var(--dc-tracking);
  font-variant-numeric:tabular-nums;
}
.mc-cero {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink); line-height:1.3; max-width:calc(760 * var(--dc-u)); margin:0 auto;
  text-shadow:var(--dc-shadow-text-strong); text-wrap:balance;
}
/* "здесь": un enlace de verdad, pero de la casa - la misma letra, subrayado
   fino que se enciende al acercarse. */
.idi-enlace {
  color:var(--dc-ink); cursor:pointer; white-space:nowrap;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.55);
  text-decoration-thickness:max(1px, calc(3 * var(--dc-u))); text-underline-offset:.2em;
  transition:text-decoration-color var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { .idi-enlace:hover { text-decoration-color:var(--dc-ink); } }
.idi-enlace:focus-visible { outline:none; text-decoration-color:var(--dc-ink); }

.mc-pendiente, .mc-nota-sola {
  font-family:var(--dc-font); font-size:var(--dc-fs-30); color:var(--dc-ink-75);
  text-align:center; max-width:calc(760 * var(--dc-u)); margin:var(--dc-sp-24) auto 0; line-height:1.35;
}
/* La tarjeta en el centro y, a su derecha, lo que hay que saber antes de
   pagar. Tres columnas (hueco · tarjeta · notas) para que la tarjeta siga
   centrada bajo el título aunque las notas estén sólo a un lado. */
#alumno-panel-ajustes .aj-clases { max-width:calc(1500 * var(--dc-u)); }
.pago-fila {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--dc-sp-48); width:100%; margin-top:var(--dc-sp-24);
}
.pago-notas { justify-self:start; max-width:calc(330 * var(--dc-u)); display:flex; flex-direction:column; gap:var(--dc-sp-20); }
#alumno-panel-ajustes .pago-nota {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-22);
  color:var(--dc-ink-70); line-height:1.4; text-align:left; margin:0; max-width:none;
}
.mc-pendiente .idi-enlace { color:var(--dc-ink); margin-left:.3em; }

/* ── LA TARJETA DE PAGO ── */
.pago-tarjeta {
  width:calc(560 * var(--dc-u)); max-width:100%; margin:0;
  padding:var(--dc-sp-24) var(--dc-sp-40) var(--dc-sp-18);
  background:linear-gradient(90deg, #C2CAD4, #8B97AB);
  border-radius:var(--dc-r-card); box-shadow:var(--dc-shadow-pill-metal);
  color:var(--dc-ink); text-shadow:var(--dc-shadow-text);
  display:flex; flex-direction:column; align-items:stretch; text-align:left;
  transition:box-shadow var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease);
}
.pago-tarjeta.pago-llama { animation:pagoLlama 1.5s var(--dc-ease); }
@keyframes pagoLlama {
  0%   { transform:none; }
  30%  { transform:scale(1.025); box-shadow:0 calc(18 * var(--dc-u)) calc(70 * var(--dc-u)) #141E2DA8; }
  100% { transform:none; }
}
.pago-linea { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-sp-24); }
.pago-etiqueta {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-26, calc(26 * var(--dc-u)));
  color:var(--dc-ink); opacity:.82; letter-spacing:var(--dc-tracking); text-transform:lowercase;
}
.pago-etiqueta-centro { text-align:center; }
.pago-precio {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.pago-sep { height:1px; background:rgba(255,255,255,.28); margin:var(--dc-sp-14) 0; }
.pago-cantidad {
  display:flex; align-items:center; justify-content:center; gap:var(--dc-sp-40);
  margin-top:var(--dc-sp-10);
}
.pago-paso {
  width:calc(74 * var(--dc-u)); height:calc(74 * var(--dc-u)); flex:none;
  border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(255,255,255,.14); color:var(--dc-ink);
  font-family:var(--dc-font); font-size:var(--dc-fs-50); line-height:1;
  text-shadow:var(--dc-shadow-text);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease),
             opacity var(--dc-t-lento) var(--dc-ease), box-shadow var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { .pago-paso:not(:disabled):hover { background:rgba(255,255,255,.24); transform:scale(1.08); box-shadow:var(--dc-shadow-pill-metal); } }
.pago-paso:active:not(:disabled) { transform:scale(.94); transition:transform var(--dc-t-press) var(--dc-ease); }
.pago-paso:disabled { opacity:.35; cursor:default; }
.pago-paso:focus-visible { outline:none; box-shadow:0 0 0 calc(3 * var(--dc-u)) rgba(255,255,255,.7); }
.pago-n-caja { min-width:calc(150 * var(--dc-u)); text-align:center; padding:0 var(--dc-sp-8); }
.pago-n {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-80);
  line-height:1; font-variant-numeric:tabular-nums; text-shadow:var(--dc-shadow-text-strong);
}
.pago-n.pago-sube { animation:pagoSube .42s var(--dc-ease); }
.pago-n.pago-baja { animation:pagoBaja .42s var(--dc-ease); }
@keyframes pagoSube { from { transform:translateY(38%); opacity:0; filter:blur(6px); } to { transform:none; opacity:1; filter:blur(0); } }
@keyframes pagoBaja { from { transform:translateY(-38%); opacity:0; filter:blur(6px); } to { transform:none; opacity:1; filter:blur(0); } }
.pago-n-sub { font-family:var(--dc-font); font-size:var(--dc-fs-22); opacity:.85; margin-top:var(--dc-sp-6); }
.pago-linea-total { align-items:center; }
.pago-total {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-52);
  line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; text-shadow:var(--dc-shadow-text-strong);
}
#alumno-panel-ajustes .pago-boton, .pago-boton {
  align-self:center; margin-top:var(--dc-sp-14); transform-origin:center center; font-size:var(--dc-fs-50);
  padding-left:var(--dc-sp-24); padding-right:var(--dc-sp-24); text-transform:lowercase;
}
/* "СБП" son siglas: aquí no se pasa a minúsculas como el resto de acciones. */
#alumno-panel-ajustes .pago-boton-sbp { text-transform:none; white-space:nowrap; font-size:calc(44 * var(--dc-u)); }
.pago-otro-fila { display:flex; justify-content:center; margin-top:var(--dc-sp-6); }
.pago-otro {
  font-family:var(--dc-font); font-size:var(--dc-fs-22); opacity:.7; text-transform:lowercase;
  transition:opacity var(--dc-t-lento) var(--dc-ease), text-decoration-color var(--dc-t-lento) var(--dc-ease);
}
@media (any-hover: hover) { .pago-otro:hover { opacity:1; } }
.pago-estado {
  font-family:var(--dc-font); font-size:var(--dc-fs-22); color:var(--dc-ink); line-height:1.35;
  text-align:center; margin-top:var(--dc-sp-6); text-shadow:var(--dc-shadow-text);
}
.pago-estado:empty { display:none; }
.pago-error {
  font-family:var(--dc-font); font-size:var(--dc-fs-26, calc(26 * var(--dc-u))); color:#ffdde0;
  text-align:center; margin-top:var(--dc-sp-10); min-height:1em; text-shadow:var(--dc-shadow-text);
}

/* ── EL HISTORIAL DEL ALUMNO ── */
.mc-historial { width:100%; max-width:calc(640 * var(--dc-u)); margin:var(--dc-sp-60) auto 0; text-align:left; }
.mc-titulo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40);
  color:var(--dc-ink); text-transform:lowercase; text-shadow:var(--dc-shadow-text-strong);
  text-align:center; margin-bottom:var(--dc-sp-20);
}
.mc-fila {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink-75); padding:var(--dc-sp-18) 0; border-bottom:1px solid rgba(255,255,255,.14);
  line-height:1.3;
}
.mc-fila:last-child { border-bottom:none; }
.mc-fecha { color:var(--dc-ink); text-shadow:var(--dc-shadow-text); }
#alumno-panel-ajustes .mc-historial .ent-ayuda { text-align:center; margin-left:auto; margin-right:auto; }

@media (max-width:900px) {
  .pago-fila { grid-template-columns:1fr; justify-items:center; gap:var(--dc-sp-24); }
  .pago-hueco { display:none; }
  .pago-notas { justify-self:center; max-width:calc(520 * var(--dc-u)); }
  #alumno-panel-ajustes .pago-nota { text-align:center; }
}
@media (max-width:700px) {
  .pago-tarjeta { width:100%; padding:var(--dc-sp-34) var(--dc-sp-24) var(--dc-sp-24); }
  #alumno-panel-ajustes .pago-nota { font-size:13px; }
  #alumno-panel-ajustes .aj-clases .aj-vuelta { font-size:30px; }
  #alumno-panel-ajustes .pago-boton { font-size:26px; white-space:nowrap; margin-top:10px; }
  #alumno-panel-ajustes .pago-boton-sbp { font-size:24px; }
  .pago-otro { font-size:14px; }
  .pago-linea .pago-etiqueta { font-size:14px; }
  .mc-linea { gap:0 10px; }
  .pago-paso { width:48px; height:48px; font-size:26px; }
  .pago-n { font-size:48px; }
  .pago-total { font-size:34px; }
  .pago-precio { font-size:28px; }
  .pago-etiqueta, .pago-n-sub { font-size:16px; }
  .mc-numero { font-size:64px; }
  .mc-quedan, .mc-unidad, .mc-cero { font-size:22px; }
  .mc-fila { font-size:17px; }
  .mc-titulo { font-size:22px; }
  #alumno-panel-ajustes .aj-idiomas .ent-op { font-size:26px; }
}

/* El marcador de posición de un texto nuevo en la pizarra, en el idioma
   del alumno (es un ::before: la capa de idioma no llega a él). */
html.idioma-ru .hc-text.hc-ph::before { content:'Пишите…'; }
/* "Moldes" es del profesor (sus pizarras ya hechas viven en su catálogo, que
   el alumno no puede escribir): en la pizarra propia del alumno se colaba el
   botón y, al guardar un molde, el servidor le contestaba que no. */
body:not(.is-teacher) #hc-moldes { display:none !important; }

/* ── LO DEL PROFESOR: PAGOS DE UN ALUMNO ── */
#aula-panel-ajustes .pagos-saldo {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-100);
  color:var(--dc-ink); line-height:1; text-shadow:var(--dc-shadow-text-strong); margin-bottom:var(--dc-sp-20);
}
#aula-panel-ajustes .pagos-precio-fila { display:flex; align-items:center; gap:var(--dc-sp-16); max-width:calc(460 * var(--dc-u)); }
#aula-panel-ajustes .pagos-precio-fila .f-input { margin-bottom:0; }
#aula-panel-ajustes .pagos-moneda { font-family:var(--dc-font); font-size:var(--dc-fs-40); color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); }
#aula-panel-ajustes .pagos-precio-fila + .modal-btn { margin-top:var(--dc-sp-20); }
#aula-panel-ajustes .pagos-fecha, #aula-panel-ajustes .pagos-sumar { max-width:calc(460 * var(--dc-u)); color-scheme:light; }
#aula-panel-ajustes .pagos-dias { margin:0 0 var(--dc-sp-20); gap:var(--dc-sp-34); }
#aula-panel-ajustes .pagos-dias .ent-op { font-size:var(--dc-fs-30); }
#aula-panel-ajustes .pagos-msg { margin:var(--dc-sp-14) 0 0; min-height:1em; }
#aula-panel-ajustes .pagos-alerta { color:var(--dc-ink); }
#aula-panel-ajustes .pagos-apagada { opacity:.5; }
#aula-panel-ajustes .pagos-deshecho { font-style:italic; }
/* Los números de un campo de precio sin las flechitas del sistema. */
#aula-panel-ajustes input[type=number]::-webkit-inner-spin-button,
#aula-panel-ajustes input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#aula-panel-ajustes input[type=number] { -moz-appearance:textfield; appearance:textfield; }

/* ── LAS CLAVES DE PLATEGA ── */
.platega-callback { margin-top:var(--dc-sp-16); }
.platega-url {
  display:inline-block; margin-top:var(--dc-sp-6); cursor:pointer; word-break:break-all;
  color:var(--dc-ink); text-decoration:underline; text-decoration-color:rgba(255,255,255,.45);
  text-underline-offset:.2em; transition:text-decoration-color .2s;
}
@media (any-hover: hover) { .platega-url:hover { text-decoration-color:var(--dc-ink); } }


/* ═══ EL CLUB · MÚSICA (12/09/2026) ═══════════════════════════════════
   La pestaña «club» del alumno. Las mismas piezas que «disponibles»: una
   fila de opciones (los grupos) y UN carrusel. Lo propio de aquí es sólo:
   las portadas son cuadradas (son discos), la que suena lo dice, y debajo
   van los sitios donde escucharla entera. */
#alumno-panel-club {
  max-width:var(--dc-w-canvas); margin:0 auto;
  min-height:0; display:flex; flex-direction:column; justify-content:flex-start;
  padding:0 0 var(--dc-sp-48);
}
/* Cuadradas y un poco más estrechas que una clase: con 16/10 el disco se
   recortaba, y a lo ancho de siempre el cuadrado no cabía sin desplazarse. */
#screen-home #club-lista .galeria-carril { --gal-w: calc(min(17vw, 23vh) * var(--dc-dens, 1)); }
/* Cinco grupos en UNA fila: al tamaño de la segunda fila de «disponibles». */
#alumno-panel-club .club-grupos { max-width:var(--dc-w-canvas); }
#alumno-panel-club .club-grupos .ent-op { font-size:var(--dc-fs-30); }
@media (max-width:620px) { #screen-home #club-lista .galeria-carril { --gal-w: 56vw; } }
#screen-home .club-cancion .gal-foto { aspect-ratio:1 / 1; overflow:hidden; }

/* Suena / en pausa: el signo en el centro de la portada y una línea que
   avanza por el borde de abajo. Sin cajas: texto con su sombra de siempre. */
#screen-home .club-play {
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-family:var(--dc-font); font-size:var(--dc-fs-80); line-height:1; color:#fff;
  text-shadow:var(--dc-shadow-text-strong); opacity:0;
  transition:opacity var(--dc-t-lento) var(--dc-ease);
}
#screen-home .club-play::before { content:'▶'; }
#screen-home .club-cancion.sonando .club-play::before { content:'❚❚'; letter-spacing:-.08em; }
#screen-home .club-cancion.sonando .club-play { opacity:0; }
#screen-home .club-cancion.sonando.en-pausa .club-play { opacity:.92; }
@media (any-hover: hover) {
  #screen-home .club-cancion.es-centro:hover .club-play { opacity:.92; }
}
#screen-home .club-barra {
  position:absolute; left:0; right:0; bottom:0; height:calc(6 * var(--dc-u));
  background:rgba(255,255,255,.28); opacity:0; pointer-events:none;
  transition:opacity var(--dc-t-lento) var(--dc-ease);
}
#screen-home .club-barra > i {
  display:block; height:100%; width:100%; background:#fff;
  transform-origin:left center; transform:scaleX(var(--club-p, 0));
}
#screen-home .club-cancion.sonando .club-barra { opacity:1; }

/* Debajo del carrusel, en UNA línea: dónde escuchar entera la canción
   elegida (su título ya está encima de la portada). */
.club-escuchar {
  max-width:var(--dc-w-canvas); width:100%; margin:var(--dc-sp-10) auto 0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 var(--dc-sp-24);
  padding:0 var(--dc-sp-24); text-align:center;
}
.club-escuchar-t {
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-30);
  color:var(--dc-ink); opacity:.55; text-transform:lowercase; letter-spacing:var(--dc-tracking);
}
.club-donde { display:contents; }
.club-escuchar a.ent-op { font-size:var(--dc-fs-30); text-decoration:none; opacity:.75; transform-origin:center; padding:var(--dc-sp-6) 0; }
/* Cada sitio: su icono en cuadradito redondeado, a la izquierda del nombre. */
.club-plat { display:inline-flex; align-items:center; gap:.4em; }
.club-ico { width:1.3em; height:1.3em; flex:none; border-radius:.3em; box-shadow:0 .08em .3em rgba(15,20,30,.22); }
@media (any-hover: hover) { .club-escuchar a.ent-op:hover { opacity:1; } }
/* Los niveles son siglas: A2, no «a2». */
#alumno-panel-club .club-niveles .ent-op { text-transform:none; }

/* ── LECTURAS: cada una, una página de revista en pequeño ──────────────
   Los colores y las letras son los de Folio (su especificación los da por
   cerrados): papel crema, tinta cálida, Fraunces. */
#screen-home .club-lectura .gal-foto { aspect-ratio:3 / 4; overflow:hidden; background:#FDFBF6; }
#screen-home .club-lectura .gal-vacia { display:none; }
.folio-mini {
  position:absolute; inset:0; display:flex; flex-direction:column; gap:.55em; text-align:left;
  padding:calc(var(--gal-w) * .1); background:#FDFBF6; color:#1C1915;
}
.folio-mini-cat { font-family:"Inter",-apple-system,system-ui,sans-serif; font-size:calc(var(--gal-w) * .045); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#2733C0; }
.folio-mini-res {
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:340;
  font-size:calc(var(--gal-w) * .072); line-height:1.4; color:rgba(28,25,21,.72);
  display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden;
}
#screen-home #club-lista .galeria-carril:has(.club-lectura) { --gal-w: calc(min(15vw, 21vh) * var(--dc-dens, 1)); }
@media (max-width:620px) { #screen-home #club-lista .galeria-carril:has(.club-lectura) { --gal-w: 50vw; } }

/* ── EL LECTOR: papel a pantalla completa ─────────────────────────── */
.folio-ov {
  --crema:#F4EFE6; --papel:#FDFBF6; --tinta:#1C1915; --tinta-suave:rgba(28,25,21,.62);
  --tinta-tenue:rgba(28,25,21,.40); --linea:rgba(28,25,21,.10); --ultramar:#2733C0; --ultramar-velo:rgba(39,51,192,.09);
  position:fixed; inset:0; z-index:9000; overflow-y:auto; overscroll-behavior:contain;
  background:var(--crema); color:var(--tinta); font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto;
  padding-inline:20px; outline:none;
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.folio-ov.abierto { opacity:1; transform:none; pointer-events:auto; }
.folio-progreso { position:fixed; top:0; left:0; height:2px; width:100%; background:var(--ultramar); transform-origin:left; transform:scaleX(var(--folio-p, 0)); z-index:2; }
.folio-barra {
  position:sticky; top:0; z-index:1; max-width:640px; margin:0 auto; padding-block:14px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:linear-gradient(var(--crema) 72%, rgba(244,239,230,0));
}
.folio-volver, .folio-niveles button { font-family:"Inter",-apple-system,system-ui,sans-serif; cursor:pointer; }
.folio-volver { font-size:13px; font-weight:500; padding:9px 16px; border-radius:100px; background:var(--papel); border:1px solid var(--linea); color:var(--tinta); }
.folio-niveles { display:flex; gap:4px; padding:4px; border-radius:100px; background:var(--papel); border:1px solid var(--linea); }
.folio-niveles button { font-size:13px; font-weight:600; letter-spacing:.04em; padding:7px 15px; border-radius:100px; border:0; background:none; color:var(--tinta-suave); }
.folio-niveles button[aria-selected="true"] { background:var(--ultramar); color:#F3F1FF; }
.folio-volver:focus-visible, .folio-niveles button:focus-visible, .folio-g:focus-visible { outline:2px solid var(--ultramar); outline-offset:2px; }
.folio-art { max-width:640px; margin:0 auto; padding-block:22px 10px; }
.folio-cat { font-family:"Inter",-apple-system,system-ui,sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ultramar); }
.folio-art h1 { font-size:clamp(32px, 8vw, 48px); font-weight:400; line-height:1.06; letter-spacing:-.018em; margin:12px 0 18px; text-wrap:balance; }
.folio-entradilla { font-size:19px; font-style:italic; font-weight:340; line-height:1.45; color:var(--tinta-suave); padding-bottom:24px; margin:0 0 28px; border-bottom:1px solid var(--linea); }
.folio-cuerpo p { font-size:18.5px; line-height:1.62; font-weight:340; margin:0 0 1.3em; }
.folio-cuerpo p:first-child::first-letter { font-size:3.1em; font-weight:400; float:left; line-height:.82; padding:.06em .09em 0 0; }
.folio-g { text-decoration:underline dotted var(--ultramar); text-decoration-thickness:1.5px; text-underline-offset:.22em; cursor:pointer; border-radius:3px; }
.folio-g.activa { background:var(--ultramar-velo); }
.folio-sello { text-align:center; color:var(--tinta-tenue); font-size:20px; padding:14px 0 90px; }
.folio-credito { font-family:"Inter",-apple-system,system-ui,sans-serif; font-size:12px; text-align:center; color:var(--tinta-tenue); margin:-70px 0 90px; }
.folio-credito a { color:inherit; text-decoration:underline; text-underline-offset:.2em; }
.folio-ficha {
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  width:min(420px, calc(100vw - 32px)); background:var(--papel); border:1px solid var(--linea); border-radius:18px;
  box-shadow:0 12px 40px rgba(20,16,10,.14); padding:14px 18px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  transition:opacity .2s, transform .2s; z-index:3;
}
.folio-ficha.abierta { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.folio-es { font-size:20px; font-weight:530; }
.folio-ru { font-family:"Inter",-apple-system,system-ui,sans-serif; font-size:18px; color:var(--ultramar); }
@media (prefers-reduced-motion: reduce) {
  #screen-home .club-play, #screen-home .club-barra, .folio-ov, .folio-ficha { transition:none; }
}

/* ══ 23/09 - LOS BOTONES DE LA REVISTA, AL ESTILO DEL CLUB ══════════════
   La revista sigue siendo crema (Rolando lo quiere así); sólo sus botones
   pasan a la casa: «назад» es una opción en texto con la letra del club, el
   nivel es la píldora de metal que viaja (la de la navegación) y «в тетрадь»
   del traductor, la misma letra. Sobre el papel, la tinta es la del papel. */
#folio-ov .folio-volver { font-family:var(--dc-font); font-size:24px; font-weight:var(--dc-weight, 400); line-height:1; padding:10px 2px; border:0; border-radius:0;
  background:none; color:var(--tinta); opacity:.62; transition:opacity var(--dc-t-lento, .45s) var(--dc-ease, ease); }
@media (any-hover:hover) { #folio-ov .folio-volver:hover { opacity:1; } }
#folio-ov .folio-niveles.aula-tabs-pill { position:relative; display:flex; gap:4px; padding:0; border:0; background:none; box-shadow:none; }
#folio-ov .folio-niveles .aula-tab { position:relative; z-index:1; font-family:var(--dc-font); font-size:20px; font-weight:var(--dc-weight, 400); letter-spacing:0; line-height:1.2;
  padding:8px 20px; border-radius:var(--dc-r-nav, 34px); border:0; background:none; box-shadow:none; color:var(--tinta-suave); cursor:pointer;
  transition:color var(--dc-t-lento, .45s) var(--dc-ease, ease), transform var(--dc-t-lento, .45s) var(--dc-ease, ease); }
#folio-ov .folio-niveles .aula-tab.active { color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); }
#folio-ov .folio-niveles .aula-tab.crecida { transform:scale(1.08); }
#folio-ov .folio-niveles .aula-tab-indicator { position:absolute; left:0; top:0; z-index:0; pointer-events:none;
  border-radius:var(--dc-r-nav, 34px); background:var(--dc-pill-metal); box-shadow:0 8px 26px rgba(20,30,45,.3);
  transform:translateX(var(--x, 0)) scale(var(--s, 1));
  transition:transform var(--dc-t-viaje, .9s) var(--dc-ease, ease), width var(--dc-t-viaje, .9s) var(--dc-ease, ease); will-change:transform, width; }
@media (any-hover:hover) { #folio-ov .folio-niveles .aula-tab:not(.active):hover { color:var(--tinta); } }
#folio-ov .folio-art { transition:opacity .35s ease; }
#folio-ov .folio-art.cruza { opacity:0; }
/* el «в тетрадь» del traductor de la revista */
#folio-ov .folio-guardar { font-family:var(--dc-font); font-size:19px; font-weight:var(--dc-weight, 400); color:var(--tinta); padding:4px 2px; }
#folio-ov .folio-guardar:disabled { opacity:.45; }


/* ═══ EL CLUB DE NOCHE (12/09/2026) ═══════════════════════════════════
   El lienzo «Club de noche» de Rolando, a su escala exacta. Todas las
   medidas son px del diseño (1440×900; en el móvil, 390 de ancho): el
   escenario entero se escala a la pantalla desde noche-js.js.
   Sala: el degradado A (#2C2D2E → #0A0A0C), con grano contra el banding.
   Ningún color propio: el color lo ponen las portadas y las revistas. */
.noche { position:fixed; inset:0; z-index:2200; overflow:hidden; color:#F2F2F4;
  font-family:var(--dc-font); font-weight:var(--dc-weight); letter-spacing:.5px;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.noche[hidden] { display:none !important; }
/* 14/09: la unidad de la plataforma DENTRO del escenario. La plataforma mide
   todo en --dc-u (1/1920 del ancho, con suelo de .58px); el escenario del
   club ya se escala entero, así que aquí --nu es lo que vale --dc-u al ancho
   del diseño: 1440 → .75px; en el móvil (390) la plataforma está en su suelo,
   .58px. Con ella, las piezas compartidas (la nav, las opciones, los campos,
   las acciones) miden en el club lo mismo que en el resto de la casa. */
.noche { --nu:.75px; --n-brillo:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche.alto { --nu:.58px; }
html.noche-abierta, html.noche-abierta body { overflow:hidden !important; overscroll-behavior:none; }
/* lo que el navegador enseña bajo su barra y al rebotar: el oscuro de la sala, no el azul de la plataforma */
html.noche-oscura, html.noche-oscura body { background:#0B0B0D !important; }
.noche button { font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; letter-spacing:inherit; text-transform:none; }
.noche a { color:inherit; text-decoration:none; }
.noche-sala { position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:linear-gradient(135deg, #2C2D2E 0%, #16171A 48%, #0A0A0C 100%); }
.noche-sala::after { content:""; position:absolute; inset:0; opacity:.035; pointer-events:none; background-image:var(--grano, none); background-size:128px 128px; }
/* con la sala encendida, la plataforma de debajo no se pinta (ahorra cada fotograma) */
html.noche-tapa .screen { visibility:hidden !important; }
.noche.encendida .noche-sala { opacity:1; }
.noche.saliendo .noche-sala { transition:opacity .7s ease .08s; }
/* La luz de la sala sigue al recuerdo del centro, mezclándose mientras se
   desliza (--k la pone noche-js.js; música: la sala, sin más). */
.noche-luz { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s ease; }
.noche.lista .noche-luz { opacity:var(--k, 0); }
.noche-luz[data-luz="his"] { background:radial-gradient(58% 72% at 54% 58%, rgba(244,239,230,.13), rgba(244,239,230,0) 70%); }
.noche-luz[data-luz="desc"] { background:radial-gradient(50% 64% at 60% 52%, rgba(226,232,240,.11), rgba(226,232,240,0) 70%); }
.noche-luz[data-luz="cine"] { background:radial-gradient(60% 46% at 50% 30%, rgba(236,232,224,.10), rgba(236,232,224,0) 72%); }
.noche-luz[data-luz="tg"] { background:radial-gradient(52% 66% at 52% 54%, rgba(168,200,236,.13), rgba(168,200,236,0) 70%); }
.noche-escenario { position:absolute; left:0; top:0; transform-origin:0 0; }

/* ── El logotipo: en la esquina, o en el centro durante la entrada ── */
.noche-marca { position:absolute; left:56px; top:40px; z-index:8; }
.noche.alto .noche-marca { left:24px; top:34px; }
.noche-marca.en-centro { left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; }
.noche-marca-t { position:relative; display:inline-block; font-size:78px; line-height:1; white-space:nowrap; cursor:pointer; color:#F2F2F4; transform-origin:0 0; will-change:transform;
  text-shadow:0 0 18px rgba(242,242,244,.42), 0 0 44px rgba(242,242,244,.16); transition:text-shadow .6s ease, color .6s ease; }
/* El brillo fuerte de la respiración es una copia del logotipo que sólo tiene
   sombra: se enciende y se apaga con OPACIDAD (la tarjeta gráfica), en vez de
   repintar sombras enormes en cada fotograma. */
.noche-marca-brillo { position:absolute; left:0; top:0; color:transparent; pointer-events:none; opacity:0; will-change:opacity;
  text-shadow:0 0 26px rgba(242,242,244,.66), 0 0 64px rgba(242,242,244,.3); }
.noche-marca-brillo .marca-club { opacity:1 !important; animation:none !important; }
/* con el halo horneado (noche-js.js): la letra va sin sombra y respira el lienzo fuerte */
.noche-halo-logo { position:absolute; pointer-events:none; display:block; will-change:opacity; transition:opacity .6s ease; }
.noche-halo-logo.fuerte { opacity:0; }
.noche-marca-t.con-halo { text-shadow:none; }
.noche-marca-t.con-halo .noche-marca-brillo { display:none; }
.noche-marca-t.con-halo.respira .noche-halo-logo.fuerte { animation:nocheRespira 1.7s cubic-bezier(.37,0,.63,1) 2; }
.noche.saliendo .noche-halo-logo { opacity:0; }
.noche-marca-t.con-halo:focus-visible .noche-halo-logo.fuerte { opacity:.8; }
.noche.alto .noche-marca-t { font-size:46px; }
.noche-marca.en-centro .noche-marca-t { font-size:150px; }
.noche.alto .noche-marca.en-centro .noche-marca-t { font-size:64px; }
.noche-marca-t .marca-club { display:inline-block; opacity:.8; transition:opacity .6s ease, text-shadow .6s ease; will-change:opacity; }
.noche-marca-t:focus-visible { outline:none; text-shadow:0 0 18px rgba(255,255,255,.7), 0 0 60px rgba(242,242,244,.3); }
@keyframes nocheRespira { 0%, 100% { opacity:0; } 50% { opacity:.78; } }
.noche-marca-t.respira .noche-marca-brillo { animation:nocheRespira 1.7s cubic-bezier(.37,0,.63,1) 2; }
/* «club» se enciende como un neón: tres titubeos y un encendido suave, sin fogonazo. */
/* sólo opacidad: la sombra del neón ya está puesta y titubea con la letra */
@keyframes nocheNeon {
  0%   { opacity:.8;  animation-timing-function:steps(1, end); }
  10%  { opacity:.14; animation-timing-function:steps(1, end); }
  20%  { opacity:.82; animation-timing-function:steps(1, end); }
  30%  { opacity:.2;  animation-timing-function:steps(1, end); }
  38%  { opacity:.7;  animation-timing-function:steps(1, end); }
  46%  { opacity:.28; animation-timing-function:cubic-bezier(.3, 0, .2, 1); }
  100% { opacity:1; }
}
.noche-marca-t.neon .marca-club { animation:nocheNeon .8s both; text-shadow:0 0 14px rgba(255,255,255,.5), 0 0 40px rgba(242,242,244,.22); }
.noche-marca-t.encendido .marca-club { opacity:1; text-shadow:0 0 14px rgba(255,255,255,.5), 0 0 40px rgba(242,242,244,.22); }
/* 26/09 - EL LATIDO Y LA LUZ DE «CLUB» (Rolando: «late Hablamos, y luego un
   destello desde club suave pero sostenido»). La luz es una copia de «club»
   que sólo tiene sombra blanca (medida en em: crece con la letra) y sólo
   cambia de OPACIDAD: sube despacio, pasa un poco y se queda encendida. */
.noche-marca-t .marca-club { position:relative; }
.club-luz { position:absolute; left:0; top:0; color:transparent; pointer-events:none; opacity:0; will-change:opacity;
  text-shadow:0 0 .12em #fff, 0 0 .38em rgba(255,255,255,.85), 0 0 .9em rgba(255,255,255,.55), 0 0 2em rgba(242,242,244,.32); }
.noche-marca-brillo .club-luz { display:none; }
.noche-marca-t.luz .marca-club { animation:clubEnciende 1.3s cubic-bezier(.3,0,.2,1) both; }
.noche-marca-t.luz .club-luz { animation:clubLuz 2.6s cubic-bezier(.3,0,.2,1) both; }
@keyframes clubEnciende { from { opacity:.8; } to { opacity:1; } }
@keyframes clubLuz { 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:.7; } }
.noche-marca-t.encendido .marca-club { opacity:1; }
.noche-marca-t.encendido .club-luz, .noche-marca-t.luz.encendido .club-luz { opacity:.7; }
.noche.saliendo .club-luz { animation:none; opacity:0; transition:opacity .5s ease; }
/* el latido: el halo fuerte y el logotipo crece un pelo y vuelve.
   28/09 - Rolando: un latido lento en Hablamos «que no salte mucho» y luego un
   destello suave en club. 1,4 s (antes 1,1 s) y crece la mitad (1,5 %). Lo
   mismo, dibujado, al final de los tráileres y los verticales (mac/trabajador.py, cierre()). */
.noche-marca-t.late .noche-marca-brillo, .noche-marca-t.con-halo.late .noche-halo-logo.fuerte { animation:nocheLateLuz 1.4s cubic-bezier(.37,0,.63,1) 1; }
@keyframes nocheLateLuz { 0%, 100% { opacity:0; } 38% { opacity:.8; } }
.noche-marca.en-centro.late { animation:nocheLate 1.4s cubic-bezier(.37,0,.63,1) 1; }
@keyframes nocheLate { 0% { transform:scale(1); } 32% { transform:scale(1.015); } 60% { transform:scale(.998); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .noche-marca.en-centro.late { animation:none; } }
/* Al salir vuelve a ser el logotipo de día. */
.noche.saliendo .noche-marca-t { color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); }

/* ── El título de la sección, arriba a la derecha ── */
.noche-titulos { position:absolute; right:60px; top:62px; width:420px; height:48px; z-index:7; font-size:40px; line-height:1;
  text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); pointer-events:none; }
.noche.alto .noche-titulos { right:24px; top:48px; width:200px; height:26px; font-size:22px; }
.noche-titulo { position:absolute; right:0; top:0; white-space:nowrap; opacity:0; transition:opacity 1.6s ease; will-change:opacity; }
.noche.lista .noche-titulo.on { opacity:1; }
/* 27/09 (Rolando): dentro de las salas, sin título; en su sitio, lo que suena
   (.noche-sonando). En el escaparate el título sigue, salvo si suena algo. */
.noche-titulos { transition:opacity .6s ease; }
/* 27/09 (luego): tampoco el país en Descubrir; la música tiene que verse siempre que suene. */
.noche:not([data-vista="esc"]) .noche-titulos,
.noche.suena[data-vista="esc"] .noche-titulos { opacity:0 !important; pointer-events:none; }
.noche-sonando { position:absolute; right:60px; top:48px; z-index:8; display:flex; align-items:center; gap:16px;
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .6s ease, transform .6s cubic-bezier(.45,0,.2,1); }
.noche.lista.suena:not([data-vista="mus"]) .noche-sonando { opacity:1; transform:none; pointer-events:auto; }
/* sobre la foto entera (sin la penumbra), con sombra negra, como el logotipo */
.noche.fr-sin-texto .ns-signo svg { filter:drop-shadow(0 1px 6px rgba(0,0,0,.6)); }
.noche.fr-on .ns-titulo, .noche.fr-on .ns-artista { text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.4); }
.noche.fr-on .ns-artista { color:rgba(242,242,244,.78); }
.noche-sonando button { appearance:none; border:0; padding:0; margin:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ns-t { display:flex; flex-direction:column; align-items:flex-end; gap:5px; max-width:240px; text-align:right; cursor:pointer; }
.ns-titulo { font-size:18px; line-height:1.15; color:#F2F2F4; text-shadow:0 0 16px rgba(242,242,244,.3); }
.ns-artista { font-size:14px; line-height:1; color:rgba(242,242,244,.5); }
.ns-foto { position:relative; flex:none; width:56px; height:56px; border-radius:12px !important; background-size:cover !important; background-position:center !important; box-shadow:0 12px 30px rgba(0,0,0,.55); }
.ns-capa { position:absolute; inset:0; border-radius:inherit; background-size:cover; background-position:center; opacity:0; transition:opacity .9s ease; }
.ns-capa.on { opacity:1; }
.ns-t { transition:opacity .35s ease; }
.ns-t.cambia { opacity:0; }
/* desde lo que suena, a la música sin pasar por el escaparate: se funde (27/09) */
.nv-esc.salto { opacity:0; transition:opacity .45s ease; }
.ns-barra { position:absolute; left:8px; right:8px; bottom:-9px; height:2px; border-radius:1px; overflow:hidden; background:rgba(242,242,244,.16); }
.ns-barra > i { display:block; height:100%; background:#F2F2F4; transform-origin:0 50%; transform:scaleX(0); }
.ns-signo { flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.ns-signo svg { width:22px; height:22px; fill:#F2F2F4; filter:drop-shadow(0 0 8px rgba(242,242,244,.4)); }
.noche.alto .noche-sonando { right:18px; top:38px; gap:6px; }
.noche.alto .ns-t { display:none; }
.noche.alto .ns-foto { width:40px; height:40px; border-radius:9px !important; }
.noche.alto .ns-barra { left:5px; right:5px; bottom:-7px; }

/* ── Las vistas ── */
.nv { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
.nv.on { opacity:1; visibility:visible; transition:opacity .8s ease .15s, visibility 0s; }
/* primero se abre el recuerdo y luego aparece lo de dentro: no se cruzan */
.nv-mus.on, .nv-his.on, .nv-desc.on, .nv-cine.on { transition:opacity .75s ease .34s, visibility 0s; }
.noche:not(.lista) .nv { opacity:0; visibility:hidden; }
.noche.saliendo .nv { transition:opacity .35s ease, visibility 0s linear .35s; }

/* ══ EL ESCAPARATE ══════════════════════════════════════════════════════
   Cada recuerdo es una escena pintada dos veces: .halo, entera y muy
   desenfocada (lo que rodea la ventana), y .nitido, la misma, nítida sólo
   dentro de una ventana de bordes deshechos. Se desliza: noche-js.js lo
   coloca fotograma a fotograma (sin transiciones), y el dedo manda. */
.nv-esc { touch-action:none; cursor:grab; z-index:1; }   /* su propia capa: los recuerdos (z 10) no se salen por encima del cuaderno */
.nv-esc.arrastra { cursor:grabbing; }
/* 16/09/2026 - LOS RECUERDOS LLEGAN, NO APARECEN. Rolando: «luego de entrar a
   hablamos club como que ves que saltan los recuerdos al lado de hablamos
   club». Estaban a opacidad 1 desde el primer fotograma: en cuanto el
   logotipo se iba al rincón, la sala entera se encendía de golpe y DESPUÉS
   subía 60 px. Ahora llegan: suben, entran y se posan a la vez, con la curva
   del sistema, un poco más despacio que el logotipo para que no compitan. */
.n-recs { position:absolute; inset:0; transform:translateY(60px) scale(.986); opacity:0;
  transition:transform 1.6s var(--dc-ease), opacity 1.15s var(--dc-ease); }
.noche.lista .nv-esc.on .n-recs { transform:none; opacity:1; }
.n-rec { position:absolute; left:0; top:150px; width:1440px; height:750px; pointer-events:none; will-change:transform, opacity; contain:layout style; }
/* las dos capas horneadas (canvas pequeños que el navegador agranda) y la escena viva */
.n-halo, .n-medio { position:absolute; left:0; top:0; width:100%; height:100%; display:block; pointer-events:none; }
/* 16/09/2026: el halo se SALE de la ventana por arriba y por abajo. Antes
   empezaba justo donde empieza el recuerdo (150 px en el ordenador, 110 en el
   móvil) y el difuminado quedaba cortado por una raya recta debajo del
   logotipo. Rolando: «no me gusta que la parte de arriba de hablamos club
   corte el difuminado de los escaparates». Como está tan desenfocado,
   estirarlo no se nota; lo que se nota es que ya no hay corte. */
.n-halo { opacity:.62; top:-150px; height:calc(100% + 300px); }
.noche.alto .n-halo { top:-110px; height:calc(100% + 220px); }
/* entrar en un espacio: el recuerdo del centro crece y se deshace; volver lo cierra */
.nv-esc.fuera { pointer-events:none; }
/* ya dentro de un espacio, el escaparate ni se pinta (ahorra mucho: sus capas desenfocadas) */
.nv-esc.quieto { visibility:hidden; }
.nv-esc.fuera .n-rec { transition:transform .9s var(--dc-ease), opacity .55s ease; }
.nv-esc.vuelve .n-rec { transition:transform 1s var(--dc-ease), opacity .9s ease .1s; }
.noche.alto .n-rec { top:110px; width:390px; height:calc(var(--n-h) - 110px); }
.n-capa { position:absolute; inset:0; overflow:hidden; }
.n-capa.nitido { opacity:0; visibility:hidden; transition:opacity .16s ease, visibility 0s linear .16s;
  /* 16/09/2026: la ventana ya NO es una elipse. Rolando: «no me gusta que en los
     escaparates haya una especie de círculo que rodea a cada recuerdo». La casa
     es rectangular (las sombras, los huecos, las tarjetas), así que el recuerdo
     es un rectángulo con los cuatro bordes esfumados: dos degradados rectos que
     se cruzan (intersect). Los tramos son largos y las esquinas salen redondeadas
     solas - que fue el problema del 13/09, cuando los cortes eran secos. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 8%, #000 22%, #000 78%, rgba(0,0,0,.35) 92%, transparent 100%),
                     linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 9%, #000 24%, #000 76%, rgba(0,0,0,.35) 91%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 8%, #000 22%, #000 78%, rgba(0,0,0,.35) 92%, transparent 100%),
             linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 9%, #000 24%, #000 76%, rgba(0,0,0,.35) 91%, transparent 100%);
  mask-composite:intersect; }
.noche.alto .n-capa.nitido {
  /* en el móvil la ventana es una columna: se esfuma más por arriba y abajo
     que por los lados, o no cabe nada */
  /* 16/09 (tarde): el desvanecido de los lados era muy corto (7 %) y una
     escena clara -las revistas- asomaba por el borde con una raya recta:
     «se sigue viendo un cuadrado como png». Ahora se esfuma igual de largo
     que por arriba y por abajo. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 6%, #000 19%, #000 81%, rgba(0,0,0,.35) 94%, transparent 100%),
                     linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 6%, #000 17%, #000 83%, rgba(0,0,0,.4) 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 6%, #000 19%, #000 81%, rgba(0,0,0,.35) 94%, transparent 100%),
             linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 6%, #000 17%, #000 83%, rgba(0,0,0,.4) 94%, transparent 100%);
  mask-composite:intersect; }
/* en la sala oscura los recuerdos no llevan fondo propio (noche-js.js: _nocheFondoDe) */
.noche:not(.casa) .es-pra, .noche:not(.casa) .es-musica, .noche:not(.casa) .es-mundo, .noche:not(.casa) .es-tg, .noche:not(.casa) .es-cla, .noche:not(.casa) .es-cine,
.noche:not(.casa) .es-crema { background:transparent !important; }   /* 16/09: historias tampoco (parecía un png pegado) */
.noche:not(.casa) .es-crema .n-mancha { opacity:.22; }
/* 16/09 (tarde): en la sala oscura las revistas van MÁS SEPARADAS y el papel
   un punto más bajo. Tan pegadas formaban un bloque claro que, desenfocado,
   se leía como un rectángulo pegado encima («un cuadrado como png»). Aquí es
   una sala a oscuras, no un quiosco al sol. */
.noche:not(.casa) .n-revista { margin-right:72px; background:rgba(250,247,241,.82); }
/* ENFOCAR: mientras se desliza, todo va desenfocado (lo horneado, que sólo se
   mueve: casi gratis) y al llegar, el del centro enfoca, como una cámara */
.n-rec.centro .n-capa.nitido, .n-rec.calienta .n-capa.nitido { opacity:1; visibility:visible; transition:opacity .62s ease, visibility 0s; }
/* lo que no se ve, no se pinta: al moverse, ninguna escena nítida (sólo lo horneado) */
.nv-esc.moviendo .n-rec .n-capa.nitido { opacity:0; visibility:hidden; transition:opacity .16s ease, visibility 0s linear .16s; }
.nv-esc.fuera .n-rec.centro .n-capa.nitido { opacity:1; visibility:visible; transition:none; }
/* el difuminado vive: el halo se mueve despacio, cada uno a su ritmo */
.n-halo { transform-origin:50% 50%; animation:nHaloVive 19s ease-in-out infinite alternate; will-change:transform; }
.n-rec:nth-child(2n) .n-halo { animation-duration:23s; animation-direction:alternate-reverse; }
.n-rec:nth-child(3n) .n-halo { animation-duration:27s; }
@keyframes nHaloVive { 0% { transform:translate(-1.4%, .9%) scale(1.03); } 50% { transform:translate(.9%, -.7%) scale(1.08); } 100% { transform:translate(1.5%, .6%) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .n-halo { animation:none; } }
/* ── NADA SE JUNTA CON EL LOGOTIPO (16/09/2026) ──────────────────────
   Rolando: «en móvil cuando te desplazas hablamos club se junta con el
   contenido». Lo cumplían sólo «más» (y sólo en el móvil) y la página de
   clases. Ahora es una regla de la sala: toda vista que se desliza se
   desvanece antes de llegar a la marca. El escaparate queda FUERA a
   propósito: ahí el difuminado tiene que subir hasta arriba del todo.
   OJO: las vistas son «.nv», NO «.noche-vista» - el primer intento apuntaba a
   una clase que no existe y por eso seguía pasando. */
/* 16/09 (tarde): la banda era DEMASIADO larga (hasta 218 px) y oscurecía las
   tarjetas y algunos títulos, que caen justo ahí. Rolando: «le quita
   demasiado a la tarjeta». Medido: la marca acaba en 118 px (ordenador) y en
   80 px (móvil), así que basta con desvanecer hasta un poco por debajo. */
.noche .nv:not(.nv-esc) {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 112px, #000 162px);
  mask-image:linear-gradient(180deg, transparent 0, transparent 112px, #000 162px);
}
.noche.alto .nv:not(.nv-esc) {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 80px, #000 120px);
  mask-image:linear-gradient(180deg, transparent 0, transparent 80px, #000 120px);
}

/* los lados se tocan (se pasa a ese) y, con el ratón encima, se asoman */
.nv-esc[data-asoma="1"], .nv-esc[data-asoma="-1"] { cursor:pointer; }
.n-escena { position:absolute; inset:0; overflow:hidden; }
.n-mancha { position:absolute; left:var(--l); top:var(--t); width:var(--w); height:var(--h); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, var(--c), rgba(0,0,0,0)); animation:nDerivaA 38s ease-in-out infinite; }
.n-mancha.b { animation-name:nDerivaB; animation-duration:46s; }
@keyframes nDerivaA { 0%, 100% { transform:translate(0, 0) scale(1); } 50% { transform:translate(7%, 6%) scale(1.14); } }
@keyframes nDerivaB { 0%, 100% { transform:translate(0, 0) scale(1.06); } 50% { transform:translate(-8%, -5%) scale(.92); } }
/* pistas sin fin: dos mitades iguales, así el salto no se ve */
.n-pista { position:absolute; left:0; display:flex; width:max-content; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform; }
.n-pista.izq { animation-name:nIzq; } .n-pista.der { animation-name:nDer; }
.n-pista.sube { flex-direction:column; align-items:flex-start; width:auto; right:0; animation-name:nSube; animation-duration:90s; }
@keyframes nIzq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes nDer { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@keyframes nSube { from { transform:translateY(0); } to { transform:translateY(-50%); } }
/* los de los lados se quedan quietos, como una foto; y todo quieto si no se ve */
.n-rec.lado .n-pista, .n-rec.lado .n-mancha, .nv-esc.quieto .n-pista, .nv-esc.quieto .n-mancha { animation-play-state:paused; }
/* mientras se desliza, todo quieto dentro: cada recuerdo es una imagen que sólo se mueve */
.nv-esc.moviendo .n-pista, .nv-esc.moviendo .n-mancha { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
  .noche .n-pista, .noche .n-mancha { animation:none; }
  .noche .n-rec { transition-duration:.01s; }
}

/* música (22/09, tarde): gris neutro, TRES filas grandes -de más cerca-,
   la de arriba y la de abajo cortadas por el marco (difuminado: el
   degradado cubre casi media fila, no un borde recto), la del medio
   centrada y entera. JS (_nocheEscMusica) pone el `top`/`left` de cada
   una; todas al mismo ritmo hacia la izquierda. */
.es-musica { background:linear-gradient(135deg, #505254 0%, #2E2F31 52%, #1B1C1E 100%);
  /* 22/09 (noche): Rolando eligió estas portadas a propósito y se veían muy
     apagadas arriba y abajo - el difuminado era más largo de lo que hacía
     falta. Menos recorrido (era 30%/70%). */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.n-discos { animation-duration:150s; }
/* sombra corta, no la de antes (0 18px 44px): con portadas grandes y sólo
   tres filas ya sale más barata de pintar, pero no hay que malgastarlo. */
.n-disco { flex:none; width:300px; height:300px; margin-right:26px; border-radius:24px; background-size:cover; background-position:center;
  box-shadow:0 14px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.noche.alto .n-discos { animation-duration:110s; }
.noche.alto .n-disco { width:190px; height:190px; margin-right:18px; border-radius:18px; box-shadow:0 10px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }

/* cine (22/09): el catálogo de recomendaciones - carteles, mismas piezas
   que la música (tres filas, cortadas arriba/abajo con difuminado), sólo
   que en vertical (proporción de cartel de cine, no cuadradas). */
.es-cine {
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.n-carteles { animation-duration:150s; }
.n-cartel { flex:none; width:190px; height:281px; margin-right:20px; border-radius:14px; background-size:cover; background-position:center;
  box-shadow:0 14px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.noche.alto .n-carteles { animation-duration:110s; }
.noche.alto .n-cartel { width:118px; height:175px; margin-right:12px; border-radius:10px; box-shadow:0 10px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }

/* 22/09 (noche) - la biblioteca del cine: MISMA pieza que la música por
   dentro (.nm-*), géneros a la izquierda, carteles en un carrusel que
   viaja entero de uno a otro (nunca a medias, nunca scroll vertical).
   Ver las funciones _rc y la tabla _RC en noche-js.js.
   22/09 (2.ª vuelta) - fuera la pastilla de «смотреть» que salía encima
   del cartel al pasar el ratón: no era de esta casa. Debajo del cartel va
   lo mismo que debajo del disco en la música - el nombre y una opción en
   texto grande que abre la información en ese mismo hueco. */
.noche .rc-generos { position:absolute; left:60px; top:140px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; z-index:3;
  max-height:600px; overflow-y:auto; scrollbar-width:none;
  opacity:0; translate:-40px 0; transition:opacity .5s ease, translate .01s linear .5s; }
.noche .rc-generos::-webkit-scrollbar { display:none; }
.noche .nv-cine.on .rc-generos { opacity:1; translate:0 0; transition:opacity .7s ease .2s, translate 1s var(--dc-ease) .2s; }
.noche .rc-genero { font-size:52px; line-height:1.14; color:rgba(242,242,244,.38); text-align:left; white-space:nowrap;
  transition:color .6s ease, text-shadow .6s ease; }
.noche .rc-genero.on { color:#F2F2F4; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
@media (any-hover:hover) { .noche .rc-genero:not(.on):hover { color:rgba(242,242,244,.72); } }
.noche .rc-portadas { position:absolute; left:0; top:0; width:0; height:0; z-index:2; opacity:0; translate:90px 0; transition:opacity .45s ease, translate .7s var(--dc-ease); }
.noche .nv-cine.on .rc-portadas { opacity:1; translate:0 0; transition:opacity .7s ease .3s, translate 1.1s var(--dc-ease) .3s; }
.noche .nv-cine.on .rc-portadas.cruza { opacity:0; transition:opacity .35s ease; }
/* con la información abierta se bajan las luces de los carteles: lo que se
   lee queda delante, como cuando empieza la película */
.noche .nv-cine.on.info-abierta .rc-portadas { opacity:.26; transition:opacity .55s ease; }
.noche .rc-portada { position:absolute; left:0; top:0; border-radius:16px; background-size:cover; background-position:center;
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.noche .rc-carril { position:absolute; left:470px; top:184px; width:calc(970px + var(--n-derecha, 0px)); height:420px; z-index:4; overflow-x:scroll; scrollbar-width:none; }
.noche .rc-carril::-webkit-scrollbar { display:none; }
.noche .rc-pista { height:1px; }
.rc-vacio { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(242,242,244,.55); font-size:20px; text-align:center; padding:0 60px; }

/* LO DE DEBAJO DE LA PELÍCULA (misma pieza que .nm-ficha de la música):
   el nombre y el año, el género y quién la dirige, y «смотреть
   информацию», que abre la sinopsis aquí mismo. La sinopsis es .tr-zona:
   tocar una palabra abre el traductor de la casa. */
.noche .rc-ficha { position:absolute; left:490px; top:616px; width:900px; z-index:5; translate:0 16px;
  transition:opacity .45s ease, translate .9s var(--dc-ease) .35s, transform .55s var(--dc-ease); }
.noche .nv-cine.on .rc-ficha { translate:0 0; }
.noche .rc-ficha.cruza { opacity:0; transition:opacity .16s ease, translate .9s var(--dc-ease) .35s, transform .55s var(--dc-ease); }
.noche .rc-tit { font-size:40px; line-height:1.06; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche .rc-anio { color:rgba(242,242,244,.42); }
.noche .rc-meta { font-size:20px; line-height:1.15; margin-top:10px; color:rgba(242,242,244,.48); }
.noche .rc-ver { margin-top:18px; }
.noche .rc-mas { font-size:30px; line-height:1; text-align:left; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche .info-abierta .rc-mas { display:none; }
@media (any-hover:hover) { .noche .rc-mas:hover { text-shadow:0 0 18px rgba(255,255,255,.55), 0 0 54px rgba(242,242,244,.28); } }
.noche .rc-info { max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--dc-ease), opacity .5s ease; }
.noche .info-abierta .rc-info { max-height:400px; opacity:1; overflow:visible; }
/* 27/09: «смотреть трейлер», al lado de «подробнее о фильме» (debajo en el móvil) */
.noche .rc-trailer { margin-left:38px; font-size:30px; line-height:1; text-align:left; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche .info-abierta .rc-trailer { margin-left:0; margin-bottom:18px; }
.noche .rc-trailer[hidden] { display:none !important; }
@media (any-hover:hover) { .noche .rc-trailer:hover { text-shadow:0 0 18px rgba(255,255,255,.55), 0 0 54px rgba(242,242,244,.28); } }
.noche .rc-tr { position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:rgba(8,8,10,.88); opacity:0; transition:opacity .4s ease; }
.noche .rc-tr.on { opacity:1; }
.noche .rc-tr-marco { width:min(1240px, 86%); aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 30px 90px rgba(0,0,0,.65); }
.noche .rc-tr-marco iframe { display:block; width:100%; height:100%; border:0; }
.noche .rc-tr-cerrar { font-size:24px; color:rgba(242,242,244,.82); text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche.alto .rc-tr-marco { width:calc(100% - 32px); border-radius:10px; }
.noche.alto .rc-trailer { display:block; margin:14px 0 0; font-size:22px; }
.noche .rc-sinopsis { font-size:18px; line-height:1.5; color:rgba(242,242,244,.9); max-width:860px; }
.noche .rc-reparto { margin-top:14px; font-size:15px; line-height:1.4; color:rgba(242,242,244,.6); max-width:860px; }
.noche .rc-donde { margin-top:10px; font-size:15px; line-height:1.4; color:rgba(242,242,244,.6); max-width:860px; }
.noche .rc-reparto b, .noche .rc-donde b { font-weight:400; color:rgba(242,242,244,.4); }
/* Atribución que pide TMDb a cambio de usar su catálogo (22/09/2026). */
.noche .rc-fuente { margin-top:16px; font-size:11px; line-height:1.3; color:rgba(242,242,244,.3); max-width:560px; }

/* el móvil: los géneros en una tira arriba, el cartel en el centro y su
   información debajo, sobre la sala difuminada (lo mismo que hacen las
   plataformas de escucha en la música) */
.noche.alto .rc-generos { left:0; right:0; top:84px; max-height:none; flex-direction:row; align-items:baseline; gap:24px; padding:28px 24px; overflow-x:auto; overflow-y:hidden; }
.noche.alto .rc-genero { flex:none; font-size:36px; line-height:1; }
.noche.alto .rc-genero.on { font-size:44px; }
.noche.alto .rc-carril { left:0; top:184px; width:390px; height:calc(var(--rc-ficha, 524px) - 190px); }
/* a plomo con el cartel, exactamente como el nombre de la canción con su
   portada en la música (Rolando: «que todo esté simétrico») */
.noche.alto .rc-ficha { left:45px; top:var(--rc-ficha, 524px); width:320px; }
.noche.alto .rc-tit { font-size:26px; }
.noche.alto .rc-meta { font-size:15px; margin-top:8px; }
.noche.alto .rc-ver { margin-top:14px; }
.noche.alto .rc-mas { font-size:22px; }
.noche.alto .nv-cine.info-abierta .rc-generos, .noche.alto .nv-mus.servicios-abiertos .nm-generos { opacity:0; pointer-events:none; transition:opacity .4s ease; }
.noche.alto .info-abierta .rc-info { max-height:560px; }
.noche.alto .rc-sinopsis { font-size:15px; line-height:1.48; }
.noche.alto .rc-fuente { margin-top:14px; }
.noche.alto .rc-sinopsis { max-width:100%; }
.noche.alto .rc-reparto, .noche.alto .rc-donde { font-size:13px; max-width:100%; }
.noche.alto .rc-fuente { font-size:10px; max-width:100%; }
/* n-genero/n-generos: genérico, lo sigue usando el escaparate de países (mundo-js.js, .n-paises) */
.n-generos { top:540px; animation-duration:150s; }
.n-genero { flex:none; padding-right:64px; font-size:56px; line-height:1; white-space:nowrap; color:#F2F2F4;
  text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche.alto .n-generos { top:calc(50% + 50px); animation-duration:110s; }
.noche.alto .n-genero { font-size:30px; padding-right:36px; }

/* historias: el papel crema de Folio y sus revistas, unas filas hacia cada lado */
.es-crema { background:#F4EFE6; }
.n-campo { position:absolute; left:-300px; top:-190px; width:2040px; height:1300px; transform:rotate(-7deg); }
.noche.alto .n-campo { left:-825px; top:calc(50% - 650px); transform:rotate(-7deg) scale(.58); }
.n-fila { top:calc(var(--fila) * 304px); }
.n-fila:nth-child(1) { left:0; animation-duration:150s; }
.n-fila:nth-child(2) { left:-110px; animation-duration:190s; }
.n-fila:nth-child(3) { left:-40px; animation-duration:170s; }
.n-fila:nth-child(4) { left:-150px; animation-duration:210s; }
.n-revista { flex:none; width:196px; height:278px; margin-right:22px; padding:8px 8px 0; border-radius:20px; overflow:hidden;
  background:#FDFBF6; border:1px solid rgba(28,25,21,.10); display:flex; flex-direction:column; letter-spacing:normal;
  transition:transform .5s var(--dc-ease), box-shadow .5s ease; }
.n-foto { flex:none; height:148px; border-radius:14px; background-size:cover; background-position:center; }
.n-ceja { font-family:"Inter", -apple-system, system-ui, sans-serif; font-weight:600; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; margin:14px 8px 7px; }
.n-tit { font-family:"Canela Text", "Fraunces", Georgia, serif; font-weight:400; font-size:16.5px; line-height:1.14; letter-spacing:-.012em; color:#1C1915; margin:0 8px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.n-revista.sin-foto { padding:18px 10px 0; }
.n-revista.sin-foto .n-tit { font-size:22px; -webkit-line-clamp:7; }
.n-revista.portada { background:#2733C0; border-color:transparent; }
.n-revista.portada .n-ceja { color:rgba(243,241,255,.72); }
.n-revista.portada .n-tit { color:#F3F1FF; }

/* telegram: el icono de hablamosclub y lo del canal */
.es-tg { background:#131417; }
.n-tg-cab { position:absolute; left:0; right:0; top:250px; display:flex; justify-content:center; align-items:center; gap:22px; }
.n-tg-ico { flex:none; width:84px; height:84px; filter:drop-shadow(0 14px 34px rgba(0,0,0,.5)); }
.n-tg-nombre { font-size:46px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.n-tg-quieto { position:absolute; left:0; right:0; top:385px; display:flex; flex-direction:column; align-items:center; gap:30px; }
.n-burbuja { flex:none; max-width:560px; padding:18px 24px; border-radius:22px; background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); font-size:24px; line-height:1.3; color:rgba(242,242,244,.9); }
.n-tg-abrir { font-size:30px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
/* 14/09: en la sala oscura, lo que dice el canal va en el aire, sin burbuja de chat */
.noche:not(.casa) .n-burbuja { background:none; box-shadow:none; padding:0; border-radius:0; text-align:center; font-size:30px; line-height:1.3; color:rgba(242,242,244,.72); max-width:640px; text-wrap:balance; }
.noche:not(.casa) .n-mensajes .n-burbuja { text-align:left; margin-bottom:26px; font-size:24px; }
.n-mensajes { position:absolute; left:400px; width:640px; top:360px; bottom:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 70px); mask-image:linear-gradient(180deg, transparent 0, #000 70px); }
.n-mensajes .n-burbuja { margin-bottom:18px; font-size:21px; }
.noche.alto .n-tg-cab { top:calc(50% - 150px); gap:14px; }
.noche.alto .n-tg-ico { width:56px; height:56px; }
.noche.alto .n-tg-nombre { font-size:30px; }
.noche.alto .n-tg-quieto { top:calc(50% - 50px); gap:20px; padding:0 40px; }
.noche.alto .n-burbuja { font-size:17px; padding:14px 18px; border-radius:18px; }
.noche.alto:not(.casa) .n-burbuja { padding:0; font-size:20px; }
.noche.alto:not(.casa) .n-mensajes .n-burbuja { font-size:17px; }
.noche.alto .n-tg-abrir { font-size:20px; }
.noche.alto .n-mensajes { left:40px; width:310px; top:calc(50% - 60px); }

/* tocar el del centro lo abre (los lados ya no se tocan: se desliza) */
.n-puerta { position:absolute; left:330px; top:260px; width:780px; height:480px; z-index:4; cursor:pointer; }
/* ── LAS FLECHAS (16/09, Rolando: «botones como siguiente y anterior») ──
   El lado entero sigue llevando al recuerdo de ese lado; esto es la señal de
   que se puede. Por eso son finas, sin fondo y sin cápsula: en la sala oscura
   la casa no pone pastillas claras. Sólo opacidad y transform. */
.n-fl { position:absolute; top:50%; margin-top:-48px; width:64px; height:96px; z-index:6; padding:0; border:0; background:none;
  color:#F2F2F4; opacity:.3; cursor:pointer; -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .34s var(--dc-ease), transform .34s var(--dc-ease); }
/* sin drop-shadow: un filtro, por pequeño que sea, se repinta con la sala */
.n-fl svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.n-fl-izq { left:34px; } .n-fl-der { right:34px; }
@media (any-hover: hover) {
  .n-fl:hover { opacity:.92; }
  .n-fl-izq:hover { transform:translateX(-3px); } .n-fl-der:hover { transform:translateX(3px); }
}
.n-fl:focus-visible { opacity:.92; outline:none; }
.n-fl:active { opacity:1; }
.nv-esc.moviendo .n-fl { opacity:.14; }
.noche.alto .n-fl { width:46px; height:74px; margin-top:-37px; }
.noche.alto .n-fl svg { width:24px; height:24px; }
.noche.alto .n-fl-izq { left:4px; } .noche.alto .n-fl-der { right:4px; }
.noche.intro .n-fl { opacity:0; }
@media (prefers-reduced-motion: reduce) { .n-fl { transition:none; } }
.noche.alto .n-puerta { left:50px; top:220px; width:290px; height:calc(var(--n-h) - 440px); }

/* ══ MÚSICA POR DENTRO ══════════════════════════════════════════════════ */
.noche .nm-generos { position:absolute; left:60px; top:218px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; z-index:3;
  opacity:0; translate:-40px 0; transition:opacity .45s ease, translate .7s var(--dc-ease); }
.noche .nv-mus.on .nm-generos { opacity:1; translate:0 0; transition:opacity .7s ease .2s, translate 1s var(--dc-ease) .2s; }
.noche .nm-genero { font-size:64px; line-height:1.12; color:rgba(242,242,244,.38); text-align:left; white-space:nowrap;
  transition:font-size .6s var(--dc-ease), color .6s ease, text-shadow .6s ease; }
.noche .nm-genero.on { font-size:78px; color:#F2F2F4; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
@media (any-hover: hover) { .noche .nm-genero:not(.on):hover { color:rgba(242,242,244,.72); } }
.noche .nm-portadas { position:absolute; left:0; top:0; width:0; height:0; z-index:2; opacity:0; translate:90px 0; transition:opacity .45s ease, translate .7s var(--dc-ease); }
.noche .nv-mus.on .nm-portadas { opacity:1; translate:0 0; transition:opacity .7s ease .3s, translate 1.1s var(--dc-ease) .3s; }
.noche .nv-mus.on .nm-portadas.cruza { opacity:0; transition:opacity .35s ease; }
.noche .nm-portada { position:absolute; left:0; top:0; width:440px; height:440px; border-radius:30px; background-size:cover; background-position:center;
  transform-origin:0 0; will-change:transform, opacity; box-shadow:0 40px 110px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.05); }
.noche .nm-oscuro { position:absolute; inset:0; border-radius:inherit; background:#000; opacity:0; will-change:opacity; pointer-events:none; }
/* 22/09 (Rolando): que se vea que la portada del centro se toca para oírla.
   Un texto pequeño en su esquina, con la luz de la casa y una sombra oscura
   detrás: las portadas claras también existen. */
.noche .nm-oir { position:absolute; left:20px; top:16px; font-style:normal; font-size:19px; line-height:1; color:#F2F2F4;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
  text-shadow:0 0 18px rgba(255,255,255,.7), 0 0 54px rgba(242,242,244,.32), var(--dc-shadow-text); }
.noche .nm-portada.centro .nm-oir { opacity:.92; }
.noche .nm-carril { position:absolute; left:470px; top:170px; width:calc(970px + var(--n-derecha, 0px)); height:520px; z-index:4;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-x; cursor:grab; }
.noche .nm-carril::-webkit-scrollbar { display:none; }
.noche .nm-carril.arrastra { cursor:grabbing; }
.noche .nm-pista { height:1px; }
.noche .nm-ficha { position:absolute; left:490px; top:684px; width:900px; z-index:5; translate:0 16px;
  transition:opacity .45s ease, translate .9s var(--dc-ease) .35s, transform .55s var(--dc-ease); }
.noche .nv-mus.on .nm-ficha { translate:0 0; }
.noche .nm-ficha.cruza { opacity:0; transition:opacity .16s ease, translate .9s var(--dc-ease) .35s, transform .55s var(--dc-ease); }
.noche .nm-titulo { font-size:44px; line-height:1.05; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche .nm-artista { font-size:24px; line-height:1; margin-top:10px; color:rgba(242,242,244,.48); }
.noche .nm-escuchar { margin-top:18px; }
.noche .nm-slushat { font-size:30px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche .servicios-abiertos .nm-slushat { display:none; }
/* «слушать» abierto: los cuatro servicios, sin iconos. El que tocas (o
   señalas) se enciende; los demás se apagan y se desenfocan. */
.noche .nm-servicios { display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:10px 30px; font-size:30px;
  max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--dc-ease), opacity .5s ease; }
.noche .servicios-abiertos .nm-servicios { max-height:140px; opacity:1; overflow:visible; }
.noche .nm-servicio { display:block; line-height:1.1; color:rgba(242,242,244,.62); transform:scale(.94); transform-origin:left center; cursor:pointer;
  transition:color .5s var(--dc-ease), filter .5s var(--dc-ease), transform .5s var(--dc-ease), text-shadow .5s ease; }
.noche .nm-servicios:hover .nm-servicio { color:rgba(242,242,244,.3); filter:blur(1.4px); transform:scale(.88); text-shadow:none; }
.noche .nm-servicios .nm-servicio:hover, .noche .nm-servicios .nm-servicio:active, .noche .nm-servicios .nm-servicio:focus-visible {
  color:#F2F2F4; filter:blur(0); transform:scale(1.04); outline:none; text-shadow:0 0 18px rgba(255,255,255,.55), 0 0 54px rgba(242,242,244,.28); }
/* lo que suena: sin píldora, suelto en la sala */
.noche .nm-sonando { position:absolute; left:60px; bottom:44px; display:flex; align-items:center; gap:16px; z-index:6; cursor:pointer;
  opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s var(--dc-ease); }
.noche .nm-sonando.on { opacity:1; transform:none; }
.noche .nm-son-foto { flex:none; width:56px; height:56px; border-radius:12px; background-size:cover; background-position:center; box-shadow:0 12px 30px rgba(0,0,0,.55); }
.noche .nm-son-t { display:flex; flex-direction:column; gap:6px; width:230px; }
.noche .nm-son-titulo { font-size:20px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 0 16px rgba(242,242,244,.3); }
.noche .nm-son-artista { font-size:15px; line-height:1; color:rgba(242,242,244,.5); }
.noche .nm-son-barra { height:2px; border-radius:1px; overflow:hidden; background:rgba(242,242,244,.16); }
.noche .nm-son-barra > i { display:block; height:100%; background:#F2F2F4; transform-origin:0 50%; transform:scaleX(0); box-shadow:0 0 8px rgba(242,242,244,.6); }
.noche .nm-son-signo { flex:none; width:22px; height:22px; fill:#F2F2F4; filter:drop-shadow(0 0 8px rgba(242,242,244,.4)); }
/* el móvil: los géneros en una fila arriba y la portada en el centro */
.noche.alto .nm-generos { left:0; right:0; top:84px; flex-direction:row; align-items:baseline; gap:24px; padding:28px 24px; overflow-x:auto; scrollbar-width:none; }
.noche.alto .nm-generos::-webkit-scrollbar { display:none; }
.noche.alto .nm-genero { flex:none; font-size:36px; line-height:1; }
.noche.alto .nm-genero.on { font-size:44px; }
.noche.alto .nm-portada { width:var(--nm-p, 300px); height:var(--nm-p, 300px); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.72); }
.noche.alto .nm-oir { left:14px; top:12px; font-size:15px; }
.noche.alto .nm-carril { left:0; top:180px; width:390px; height:340px; }
.noche.alto .nm-ficha { left:45px; top:var(--nm-ficha, 520px); width:320px; }
.noche.alto .nm-titulo { font-size:30px; }
.noche.alto .nm-artista { font-size:18px; margin-top:8px; }
.noche.alto .nm-slushat { font-size:24px; }
.noche.alto .nm-servicios { flex-direction:column; align-items:flex-start; font-size:24px; gap:10px; }
.noche.alto .servicios-abiertos .nm-servicios { max-height:260px; }
/* en el móvil, lo que suena llega justo hasta antes de «тетрадь»: iban
   pisándose (22/09) */
.noche.alto .nm-sonando { left:24px; right:124px; bottom:28px; }
.noche.alto .nm-son-t { width:auto; flex:1; min-width:0; }
.noche.alto .nm-son-artista { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.noche.alto .servicios-abiertos .nm-sonando { opacity:0; pointer-events:none; }

/* 22/09 - EL VELO. En el móvil no hay sitio: las plataformas de escucha y la
   información de una película caen encima de las portadas. Detrás de ellas
   la sala se apaga y se difumina, y así lo que se lee queda solo. Es una
   capa QUIETA (se difumina lo que no se mueve: la regla de rendimiento de la
   casa), y donde el navegador no puede con el desenfoque queda el velo a
   secas, que ya basta. La usan la música y el cine: la misma pieza. */
.noche .n-velo { position:absolute; z-index:4; opacity:0; pointer-events:none;
  top:calc(-1 * var(--n-abajo, 0px)); bottom:calc(-1 * var(--n-abajo, 0px));
  left:calc(-1 * var(--n-derecha, 0px)); right:calc(-1 * var(--n-derecha, 0px));
  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%);
  transition:opacity .5s ease; }
/* en el cine el velo va también en el escritorio: la sinopsis puede ser
   larga y sube a buscar sitio, y entonces cae sobre el cartel */
.noche .nv-cine.info-abierta .n-velo, .noche.alto .servicios-abiertos .n-velo { opacity:1; }
/* Una máscara RECORTA lo que se sale de su caja, y la de estas ventanas (la
   que desvanece el borde de arriba para el logotipo) dejaba el velo dentro
   del escenario: en una pantalla más ancha que 16:10, las franjas de los
   lados se quedaban con la sala encendida y se veía el corte (Rolando,
   22/09: «un cajón que corta los difuminados a los laterales»). Con
   `no-clip` la máscara sigue desvaneciendo arriba pero ya no recorta, y el
   velo llega hasta el borde de la pantalla. Donde el navegador no lo
   entienda, todo queda como estaba. */
.noche .nv-cine.info-abierta {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 112px, #000 162px, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0, transparent 112px, #000 162px, #000 100%);
  /* la máscara, más grande que la caja y desplazada a la izquierda: el
     desvanecido de arriba cae donde siempre (sus paradas van en px) y a los
     lados y por abajo queda opaca, que es lo que deja pasar el velo */
  -webkit-mask-size:calc(100% + 4000px) calc(100% + 2000px); mask-size:calc(100% + 4000px) calc(100% + 2000px);
  -webkit-mask-position:-2000px 0; mask-position:-2000px 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-clip:no-clip; mask-clip:no-clip;
}
.noche.alto .nv-cine.info-abierta {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 80px, #000 120px, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0, transparent 80px, #000 120px, #000 100%);
}
html:not(.sin-desenfoque) .noche.alto .servicios-abiertos .n-velo,
html:not(.sin-desenfoque) .noche.alto .info-abierta .n-velo { backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
@media (prefers-reduced-motion: reduce) { .noche .n-velo { transition:none; } }

/* ══ HISTORIAS POR DENTRO ═══════════════════════════════════════════════
   La hoja crema de Folio sobre la sala oscura, como una revista abierta
   encima de una mesa: su saludo, «Elegido para ti», el nivel y el mosaico
   (la primera, la portada en ultramar). Colores y letras, los de Folio. */
.nv-his .nh-hoja { position:absolute; left:56px; right:56px; top:150px; bottom:-40px; border-radius:30px 30px 0 0; overflow:hidden;
  --crema:#F4EFE6; --papel:#FDFBF6; --tinta:#1C1915; --tinta-suave:rgba(28,25,21,.62); --tinta-tenue:rgba(28,25,21,.40); --linea:rgba(28,25,21,.10); --ultramar:#2733C0;
  background:var(--crema); color:var(--tinta); letter-spacing:normal; -webkit-user-select:text; user-select:text;
  box-shadow:0 -12px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  opacity:0; translate:0 90px; transition:opacity .45s ease, translate .7s var(--dc-ease); }
.nv-his.on .nh-hoja { opacity:1; translate:0 0; transition:opacity .6s ease .3s, translate 1.1s var(--dc-ease) .3s; }
.nh-hoja::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"); }
.nh-dentro { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; padding:38px 64px 90px; scrollbar-width:none; }
.nh-dentro::-webkit-scrollbar { display:none; }
.nh-cabeza { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--linea); }
.nh-saludo { font-family:"Canela Text", "Fraunces", Georgia, serif; font-weight:400; font-size:52px; line-height:1.02; letter-spacing:-.02em; }
.nh-saludo em { font-style:italic; font-weight:340; color:var(--tinta-suave); }
.nh-der { display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.nh-fecha { font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-tenue); }
.noche .nh-niveles button { font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; padding:7px 15px; border-radius:100px; color:var(--tinta-suave); }
.noche .nh-niveles button[aria-selected="true"] { background:var(--ultramar); color:#F3F1FF; }
.nh-mosaico { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:250px; gap:18px 26px; transition:opacity .25s ease; }
.nh-mosaico.cruza { opacity:0; }
.noche .nh-carta { position:relative; display:flex; flex-direction:column; text-align:left; overflow:hidden; cursor:pointer;
  background:var(--papel); border:1px solid var(--linea); border-radius:22px; padding:10px; color:var(--tinta); font:inherit; letter-spacing:normal;
  transition:transform .35s var(--dc-ease), box-shadow .35s ease; }
.nv-his.on .nh-carta { animation:nhSube .9s var(--dc-ease) both; animation-delay:calc(.45s + var(--i) * 90ms); }
.nv-his.on .nh-mosaico.sin-entrada .nh-carta { animation-duration:.5s; animation-delay:calc(var(--i) * 50ms); }
@keyframes nhSube { from { opacity:0; translate:0 28px; } to { opacity:1; translate:0 0; } }
@media (any-hover: hover) { .noche .nh-carta:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(28,25,21,.16); } }
.noche .nh-carta:focus-visible { outline:2px solid var(--ultramar); outline-offset:3px; }
.nh-foto { display:block; flex:none; height:104px; border-radius:14px; background-size:cover; background-position:center; }
.nh-texto { display:flex; flex-direction:column; flex:1; min-height:0; padding:14px 8px 4px; }
.nh-ceja { font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:9px; }
.nh-tit { font-family:"Canela Text", "Fraunces", Georgia, serif; font-weight:530; font-size:21px; line-height:1.13; letter-spacing:-.012em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nh-res { font-family:"Canela Text", "Fraunces", Georgia, serif; font-style:italic; font-weight:340; font-size:17px; line-height:1.45; color:rgba(243,241,255,.78); margin-top:14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nh-pie { margin-top:auto; padding-top:10px; font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:11px; color:var(--tinta-tenue); }
.noche .nh-carta.portada { grid-column:span 2; grid-row:span 2; background:var(--ultramar); border-color:transparent; color:#F3F1FF; padding:12px; }
.nh-carta.portada .nh-foto { height:268px; border-radius:16px; }
.nh-carta.portada .nh-texto { padding:20px 16px 6px; }
.nh-carta.portada .nh-ceja { color:rgba(243,241,255,.72); }
.nh-carta.portada .nh-tit { font-weight:400; font-size:40px; line-height:1.06; -webkit-line-clamp:2; }
.nh-carta.portada .nh-pie { color:rgba(243,241,255,.6); }
.nh-carta.sin-foto .nh-texto { padding-top:18px; }
.nh-carta.sin-foto .nh-tit { font-size:26px; -webkit-line-clamp:5; }
/* abrir una revista: la hoja sale de la carta y llena la pantalla con un brillo de papel */
.nh-vuelo { position:fixed; z-index:8999; pointer-events:none; overflow:hidden; background:#F4EFE6; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.nh-vuelo.vuela { transition:left .62s cubic-bezier(.3,0,.1,1), top .62s cubic-bezier(.3,0,.1,1), width .62s cubic-bezier(.3,0,.1,1), height .62s cubic-bezier(.3,0,.1,1), border-radius .62s ease; }
.nh-vuelo::before { content:""; position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"); }
.nh-vuelo::after { content:""; position:absolute; top:-30%; bottom:-30%; left:-60%; width:60%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%); transform:translateX(0) skewX(-12deg); }
.nh-vuelo.vuela::after { transform:translateX(420%) skewX(-12deg); transition:transform .95s cubic-bezier(.4,0,.2,1) .08s; }
@media (prefers-reduced-motion: reduce) {
  .nh-vuelo.vuela, .nh-vuelo.vuela::after { transition:none; }
  .nv-his.on .nh-carta { animation:none; }
}
/* el móvil: la hoja casi de lado a lado y el mosaico en una columna */
.noche.alto .nv-his .nh-hoja { left:10px; right:10px; top:104px; border-radius:22px 22px 0 0; }
.noche.alto .nh-dentro { padding:26px 18px 70px; }
.noche.alto .nh-cabeza { flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:20px; padding-bottom:18px; }
.noche.alto .nh-saludo { font-size:34px; }
.noche.alto .nh-der { align-items:flex-start; }
.noche.alto .nh-mosaico { grid-template-columns:minmax(0, 1fr); grid-auto-rows:auto; gap:14px; }
.noche.alto .nh-carta.portada { grid-column:auto; grid-row:auto; }
.noche.alto .nh-foto { height:150px; }
.noche.alto .nh-carta.portada .nh-foto { height:190px; }
.noche.alto .nh-carta.portada .nh-tit { font-size:28px; -webkit-line-clamp:4; }
.noche.alto .nh-tit { font-size:20px; }
.noche.alto .nh-pie { padding-top:12px; }

/* 15/09 (Rolando: «se nota la imagen de ese recuerdo detrás de la parte
   interactiva, lo cual ensucia»). Debajo de la escena viva quedaba su copia
   horneada (.n-medio), quieta: al moverse lo de delante, se veía la foto
   fija detrás. Ahora, cuando la escena del centro enfoca, su copia se
   apaga a la vez (un fundido cruzado: es el mismo enfoque de cámara); al
   deslizar vuelve, porque entonces lo vivo no se pinta. */
.n-rec .n-medio { transition:opacity .16s ease; }
.n-rec.centro .n-medio, .n-rec.calienta .n-medio { opacity:0; transition:opacity .62s ease; }
.nv-esc.moviendo .n-rec .n-medio { opacity:1; transition:opacity .16s ease; }
.nv-esc.fuera .n-rec.centro .n-medio { opacity:0; transition:none; }


/* 23/09 - HISTORIAS POR DENTRO = el carrusel del cine (noche-js: _rcPintar('his')).
   Las mismas reglas de .nv-cine, para .nv-his (generadas de las de arriba). */
.noche .nv-his.on .rc-generos { opacity:1; translate:0 0; transition:opacity .7s ease .2s, translate 1s var(--dc-ease) .2s; }
.noche .nv-his.on .rc-portadas { opacity:1; translate:0 0; transition:opacity .7s ease .3s, translate 1.1s var(--dc-ease) .3s; }
.noche .nv-his.on .rc-portadas.cruza { opacity:0; transition:opacity .35s ease; }
.noche .nv-his.on.info-abierta .rc-portadas { opacity:.26; transition:opacity .55s ease; }
.noche .nv-his.on .rc-ficha { translate:0 0; }
.noche.alto .nv-his.info-abierta .rc-generos, .noche.alto .nv-mus.servicios-abiertos .nm-generos { opacity:0; pointer-events:none; transition:opacity .4s ease; }
.noche .nv-his.info-abierta .n-velo, .noche.alto .servicios-abiertos .n-velo { opacity:1; }
/* el nivel de la historia, debajo de su tema: opciones en texto, como los niveles de descubrir */
.noche .rc-niveles { display:flex; gap:26px; margin-top:16px; }
.noche .rc-niveles:empty { display:none; }
.noche .rc-niveles .ent-op { font-size:24px; line-height:1; padding:4px 0; }
.noche.alto .rc-niveles { gap:20px; margin-top:12px; }
.noche.alto .rc-niveles .ent-op { font-size:18px; }
.noche .nv-his .rc-portada { background-size:cover; background-position:center; }

/* 23/09 - en el escaparate de historias, cada portada es una REVISTA: la
   cabecera «Folio» arriba y, abajo, el tema y el título (la letra de la
   revista, Fraunces), sobre una sombra que sube desde el pie. */
.n-cartel.n-folio { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.n-cartel.n-folio::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,14,.42) 0%, rgba(10,10,14,0) 26%, rgba(10,10,14,0) 44%, rgba(10,10,14,.78) 100%); }
.nfo-cab, .nfo-pie { position:relative; z-index:1; color:#fff; }
.nfo-cab { padding:12px 14px 0; font-family:"Fraunces", Georgia, serif; font-size:30px; font-weight:500; line-height:1; letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.nfo-pie { padding:0 14px 14px; display:flex; flex-direction:column; gap:6px; }
.nfo-cat { font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.nfo-tit { font-family:"Fraunces", Georgia, serif; font-size:17px; font-weight:450; line-height:1.14; letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.45);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.noche.alto .nfo-cab { padding:8px 9px 0; font-size:19px; }
.noche.alto .nfo-pie { padding:0 9px 9px; gap:4px; }
.noche.alto .nfo-cat { font-size:7px; }
.noche.alto .nfo-tit { font-size:11px; -webkit-line-clamp:4; }

/* ══ FOLIO EN EL ESCAPARATE (noche-js: _nocheEscHistorias) ══════════════
   23/09: la mesita de noche (foto de IA) con la revista tumbada.
   28/09 (Rolando): «nada de esa foto con IA… la portada pasa al frente.
   Animación de la luz igual, efecto de la luz sobre el papel igual. Nada de
   frases en mayúsculas». La revista, de frente sobre la sala; la lámpara,
   fuera de cuadro arriba a la izquierda. Sin foto no hay borde que esconder:
   la escena ya no lleva máscara. Sólo transform y opacity. */
.es-folio { overflow:visible; }
.fm-frente { position:absolute; width:600px; height:780px; transform-origin:0 0; }
/* la sombra de la revista: cae lejos de la lámpara (abajo a la derecha), rectangular como las de la casa */
.fm-sombra { position:absolute; inset:0; pointer-events:none; border-radius:3px;
  box-shadow:34px 46px 70px rgba(0,0,0,.55), 10px 14px 20px rgba(0,0,0,.42); }
/* la luz de la lámpara sobre la pared de detrás: una mancha cálida que sale de arriba a la izquierda */
.fm-charco { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle var(--fr) at var(--fx) var(--fy), rgba(255,214,160,.26) 0%, rgba(255,204,150,.12) 38%, rgba(255,200,140,.04) 66%, rgba(255,200,140,0) 100%); }
/* la revista: satinada, estilo People, en la letra del club */
.fm-revista { position:absolute; inset:0; overflow:hidden; border-radius:3px; background:#2a2622 center / cover no-repeat; color:#fff; font-family:var(--dc-font); isolation:isolate; }
.fm-tapa-sombra { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 52%, rgba(0,0,0,.66) 100%); }
/* 28/09: nada en mayúsculas (Rolando) - la cinta y los temas, en minúsculas y un punto más grandes */
.fm-cinta { position:absolute; left:24px; top:16px; font-size:19px; letter-spacing:.01em; opacity:.92; }
.fm-cabecera { position:absolute; left:20px; top:34px; font-size:126px; line-height:.92; letter-spacing:-.035em; text-shadow:0 6px 22px rgba(0,0,0,.35); white-space:nowrap; }
.fm-cabecera span { font-size:40px; letter-spacing:0; margin-left:8px; }
.fm-lado { position:absolute; left:24px; top:236px; width:230px; }
.fm-linea { font-size:25px; line-height:1.05; margin-bottom:20px; text-shadow:0 2px 12px rgba(0,0,0,.55); }
.fm-linea b, .fm-titular b { display:block; font-weight:inherit; font-size:18px; letter-spacing:.01em; text-transform:lowercase; color:#FFD84A; margin-bottom:5px; }
.fm-titular { position:absolute; left:24px; right:24px; bottom:36px; font-size:58px; line-height:.98; letter-spacing:-.02em; color:#FFD84A; text-shadow:0 4px 18px rgba(0,0,0,.5); }
.fm-titular b { color:#fff; font-size:20px; }
/* LA LUZ SOBRE EL PAPEL: la de la lámpara se MULTIPLICA (más clara arriba a la izquierda, en penumbra
   hacia la esquina de abajo) y el satinado se SUMA donde pega la bombilla. Quietas: «tiene que verse real». */
.fm-luz, .fm-refl { position:absolute; inset:0; pointer-events:none; }
.fm-luz { mix-blend-mode:multiply;
  background:radial-gradient(circle farthest-corner at 14% -8%, #FFF7EC 0%, #F6E4C6 26%, #DCC09C 56%, #AE8F6F 82%, #8A6F55 100%); }
.fm-refl { mix-blend-mode:screen; opacity:.5;
  background:radial-gradient(ellipse 62% 34% at 26% 16%, rgba(255,238,210,.55) 0%, rgba(255,238,210,.16) 48%, rgba(255,238,210,0) 100%); }
.fm-apagada { position:absolute; inset:0; z-index:3; pointer-events:none; background:rgba(2,3,7,.97); }
/* EL MOMENTO: cada vez que Folio queda en el centro del escaparate */
/* 25/09: la lámpara espera a que acabe la ceremonia del logo (antes se encendía debajo y no se veía) */
.noche.intro .n-rec.centro .fm-apagada, .noche.intro .n-rec.centro .fm-charco, .noche.intro.folio-centro .noche-sala::before { animation:none !important; }
.noche.intro .n-rec.centro .fm-apagada { opacity:0; }
.noche.intro .n-rec.centro .fm-charco { opacity:1; }
.n-rec.centro .fm-charco { animation:fmLuz 3.6s linear 1.1s both; }
.n-rec.centro .fm-apagada { animation:fmApaga 3.6s linear 1.1s both; }
/* fuera del centro (y en las páginas de «más»), la revista se ve con la luz puesta */
.n-rec:not(.centro) .fm-apagada, .mp-escena-rec .fm-apagada { opacity:0; }
.mp-escena-rec .fm-charco { opacity:1; }
@keyframes fmLuz { 0% { opacity:0; } 5% { opacity:.75; } 10% { opacity:.06; } 20% { opacity:.04; animation-timing-function:cubic-bezier(.42, 0, .2, 1); } 100% { opacity:1; } }
@keyframes fmApaga { 0% { opacity:1; } 5% { opacity:.25; } 10% { opacity:.95; } 20% { opacity:.96; animation-timing-function:cubic-bezier(.42, 0, .2, 1); } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .n-rec.centro .fm-charco { animation:none; opacity:1; }
  .n-rec.centro .fm-apagada { animation:none; opacity:0; }
}

/* 23/09 - FOLIO A OSCURAS DEL TODO. Con la lámpara apagada, la habitación es casi
   negra y la sala gris: se veía el borde de la escena («un cuadrado») por mucho que
   se difuminara. Así que la SALA ENTERA se apaga al llegar y vuelve con la luz,
   al mismo ritmo que la lámpara (fmLuz: 1,1 s de espera + 3,6 s). Al irse de
   Folio, la sala vuelve sola en .6 s. */
.noche-sala::before { content:""; position:absolute; inset:0; pointer-events:none; background:#020308; opacity:0; transition:opacity .6s ease; }
.noche.folio-centro .noche-sala::before { animation:fmSala 4.7s linear both; }
@keyframes fmSala {
  0% { opacity:0; } 9% { opacity:.9; }
  23.4% { opacity:.9; } 27.2% { opacity:.45; } 31% { opacity:.88; }
  38.7% { opacity:.9; animation-timing-function:cubic-bezier(.42, 0, .2, 1); }
  100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce) { .noche.folio-centro .noche-sala::before { animation:none; } }


/* ═══ EL CLUB, SEGUNDA TANDA (13/09/2026) ═════════════════════════════
   Descubrir (el globo y los países), el cine, el traductor y el cuaderno.
   Misma regla que la noche: px del diseño (1440×900; móvil, 390 de ancho),
   ningún color propio (el color lo ponen las fotos y la película), la
   letra de la casa y el halo blanco en lo que está encendido. */
.noche:not([data-vista="esc"]) .noche-titulo.on { pointer-events:auto; cursor:pointer; }
.noche input { -webkit-user-select:text; user-select:text; font:inherit; letter-spacing:inherit; }
.noche .tr-zona { -webkit-user-select:text; user-select:text; cursor:text; }
.noche *::highlight(tr-sel) { background-color:rgba(255,255,255,.22); color:#FFFFFF; }
#folio-ov *::highlight(tr-sel) { background-color:rgba(39,51,192,.16); }

.noche-fps { position:fixed; left:12px; bottom:10px; z-index:9999; font:600 13px/1 -apple-system, system-ui, sans-serif; letter-spacing:0; color:#9FE8A8; background:rgba(0,0,0,.6); padding:6px 9px; border-radius:8px; pointer-events:none; }
.noche-fps.mal { color:#FFB199; }

/* ── El cuaderno, en la esquina ── */
.noche-cuaderno { position:absolute; right:60px; bottom:40px; z-index:7; font-size:26px; line-height:1; color:rgba(242,242,244,.62);
  opacity:0; transition:opacity 1.2s ease, color .4s ease, text-shadow .4s ease; }
.noche.lista .noche-cuaderno { opacity:1; }
.noche-cuaderno:hover, .noche-cuaderno:focus-visible { color:#F2F2F4; outline:none; text-shadow:0 0 18px rgba(242,242,244,.45); }
/* sobre la hoja crema de las historias, «тетрадь» en tinta de Folio (todos los fondos) */
.noche[data-vista="his"] .noche-cuaderno, .noche[data-vista="his"] .noche-cuaderno .ncu-n { color:rgba(28,25,21,.55) !important; text-shadow:none !important; }
.noche-cuaderno .ncu-n { font-size:14px; margin-left:4px; vertical-align:super; color:rgba(242,242,244,.55); }
.noche.alto .noche-cuaderno { right:24px; bottom:26px; font-size:18px; }
.noche.alto[data-vista="cine"] .noche-cuaderno { display:none; }

/* ══ EL ESCAPARATE: DESCUBRIR Y CINE ════════════════════════════════════ */
.es-mundo { background:linear-gradient(135deg, #2A2C30 0%, #16171A 55%, #0B0B0D 100%); }
.n-globo-foto { position:absolute; left:470px; top:-6px; width:500px; height:500px; background-size:contain; background-repeat:no-repeat; background-position:center; }
.n-paises { top:520px; animation-duration:170s; }
.noche.alto .n-globo-foto { left:35px; top:calc(50% - 240px); width:320px; height:320px; }
.noche.alto .n-paises { top:calc(50% + 100px); }
.es-cine { background:#0A0A0C; }
.n-cine-luz { position:absolute; left:10%; right:10%; top:-10%; height:90%; border-radius:50%; background:radial-gradient(closest-side, rgba(236,232,224,.2), rgba(236,232,224,0)); }
/* 16/09/2026 - Rolando: «la pantalla así difuminada se ve muy mal». Llevaba
   una máscara que le comía los cuatro bordes y parecía un recorte mal hecho.
   Una pantalla de cine es un rectángulo limpio: bordes nítidos, esquina muy
   poco redondeada y la luz que echa hacia la sala. */
.n-cine-pantalla { position:absolute; left:260px; top:80px; width:920px; height:470px; background:linear-gradient(170deg, #EEEBE5, #D9D4CA);
  border-radius:6px; box-shadow:0 0 120px 40px rgba(238,235,229,.14), 0 40px 90px rgba(0,0,0,.5); }
.n-cine-cartel { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#141416; text-align:center; padding:0 80px; }
.n-cine-ahora { font-size:20px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.n-cine-tit { font-size:64px; line-height:1.02; }
.n-cine-cuando { font-size:24px; opacity:.7; }
.n-cine-fila { position:absolute; left:0; right:0; bottom:0; height:300px; }
.n-cine-sombra { position:absolute; left:var(--x); bottom:-70px; width:200px; height:300px; transform:scale(var(--s)); transform-origin:50% 100%; filter:blur(3px);
  background:radial-gradient(ellipse 21% 14% at 50% 16%, #08080A 95%, transparent 100%), radial-gradient(ellipse 13% 13% at 50% 33%, #08080A 95%, transparent 100%),
    radial-gradient(ellipse 50% 34% at 50% 80%, #08080A 97%, transparent 100%); }
.noche.alto .n-cine-pantalla { left:24px; top:calc(50% - 190px); width:342px; height:200px; }
.noche.alto .n-cine-tit { font-size:30px; } .noche.alto .n-cine-ahora { font-size:12px; } .noche.alto .n-cine-cuando { font-size:14px; }
.noche.alto .n-cine-cartel { padding:0 24px; gap:8px; }
.noche.alto .n-cine-fila { transform:scale(.3); transform-origin:0 100%; width:1440px; bottom:calc(50% - 250px); }

/* ══ DESCUBRIR POR DENTRO ═══════════════════════════════════════════════ */
.nd-lista { position:absolute; left:60px; top:218px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; z-index:3;
  opacity:0; translate:-40px 0; transition:opacity .45s ease, translate .7s var(--dc-ease); }
.nv-desc.on .nd-lista { opacity:1; translate:0 0; transition:opacity .7s ease .2s, translate 1s var(--dc-ease) .2s; }
.noche .nd-region { font-size:64px; line-height:1.12; color:rgba(242,242,244,.38); text-align:left; white-space:nowrap;
  transition:font-size .6s var(--dc-ease), color .6s ease, text-shadow .6s ease; }
.noche .nd-region.on { font-size:78px; color:#F2F2F4; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
@media (any-hover: hover) { .noche .nd-region:not(.on):hover { color:rgba(242,242,244,.72); } }
.nd-pista-texto { margin-top:26px; max-width:320px; font-size:20px; line-height:1.3; color:rgba(242,242,244,.42); }
.nd-globo-caja { position:absolute; left:560px; top:70px; width:780px; height:780px; z-index:2; will-change:opacity, transform;
  opacity:0; scale:.94; transition:opacity .6s ease, scale 1s var(--dc-ease); }
.nv-desc.on .nd-globo-caja { opacity:1; scale:1; transition:opacity .9s ease .3s, scale 1.2s var(--dc-ease) .3s; }
.nv-desc.on .nd-globo-caja.entra, .nv-desc.en-pais .nd-globo-caja { opacity:0; transition:opacity .5s ease .3s; }
.nv-desc.en-pais .nd-lista { opacity:0; pointer-events:none; }
.nd-globo { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
.nd-globo-caja.arrastra .nd-globo { cursor:grabbing; }
.nd-rotulo { position:absolute; display:flex; flex-direction:column; gap:4px; pointer-events:none; white-space:nowrap; z-index:3; }
.nd-rot-n { font-size:30px; line-height:1; text-shadow:0 0 18px rgba(242,242,244,.45); }
.nd-rot-e { font-size:16px; color:rgba(242,242,244,.5); }
.nd-rotulo.abierto .nd-rot-e { color:#F2F2F4; }
.noche.alto .nd-lista { left:0; right:0; top:84px; flex-direction:row; align-items:baseline; gap:24px; padding:28px 24px; }
.noche.alto .nd-region { font-size:36px; line-height:1; } .noche.alto .nd-region.on { font-size:44px; }
.noche.alto .nd-pista-texto { position:absolute; left:24px; right:24px; top:calc(var(--n-h) - 250px); margin:0; max-width:none; font-size:16px; text-align:center; }
.noche.alto .nd-globo-caja { left:5px; top:200px; width:380px; height:380px; }
/* un país: su nombre arriba, su foto difuminada de fondo, sus secciones y las láminas */
.nd-pais { position:absolute; inset:0; z-index:5; opacity:0; transition:opacity .8s ease; }
.nd-pais.on { opacity:1; }
/* la foto del país, desenfocada y oscurecida UNA vez en un canvas pequeño (sin filtro en vivo) */
.nd-fondo { position:absolute; left:-900px; right:-900px; top:-400px; bottom:-400px; width:calc(100% + 1800px); height:calc(100% + 800px); display:block; object-fit:cover; }
.nd-velo { position:absolute; left:-900px; right:-900px; top:-400px; bottom:-400px;
  background:linear-gradient(180deg, rgba(10,10,12,.3) 0%, rgba(10,10,12,.05) 35%, rgba(10,10,12,.55) 100%); }
.nd-cab { position:absolute; left:0; right:0; top:118px; text-align:center; z-index:2; }
.noche .nd-nombre { display:inline-block; font-size:120px; line-height:1; cursor:pointer; text-shadow:0 0 30px rgba(242,242,244,.45), 0 0 90px rgba(242,242,244,.16);
  opacity:0; translate:0 -18px; transition:opacity 1s ease .2s, translate 1.2s var(--dc-ease) .2s; }
.nd-pais.on .nd-nombre { opacity:1; translate:0 0; }
.nd-secciones { margin-top:20px; display:flex; justify-content:center; gap:44px; }
.noche .nd-sec { font-size:30px; line-height:1; color:rgba(242,242,244,.45); transform-origin:center; transition:color var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { .noche .nd-sec:hover { transform:scale(1.06); } }
.noche .nd-sec.on { color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.45), 0 0 54px rgba(242,242,244,.16); }
@media (any-hover: hover) { .noche .nd-sec:not(.on):hover { color:rgba(242,242,244,.72); } }
.nd-laminas { position:absolute; left:0; right:0; top:330px; bottom:78px; z-index:2; transition:opacity .3s ease;
  opacity:0; translate:0 24px; }
.nd-pais.on .nd-laminas { opacity:1; translate:0 0; transition:opacity .8s ease .45s, translate 1s var(--dc-ease) .45s; }
.nd-pais.on .nd-laminas.cruza { opacity:0; transition:opacity .3s ease; }
.nd-carril { display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.nd-carril::-webkit-scrollbar { display:none; }
.nd-lamina { flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; box-sizing:border-box; padding:0 110px; display:grid; grid-template-columns:600px minmax(0, 1fr); gap:64px; align-items:center; }
.nd-foto-caja { display:flex; flex-direction:column; gap:10px; }
.nd-foto { width:600px; height:440px; border-radius:28px; background-size:cover; background-position:center; background-color:rgba(255,255,255,.05);
  box-shadow:0 40px 110px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05); }
.nd-credito { font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:normal; color:rgba(242,242,244,.45); padding-left:6px; }
.nd-credito a { text-decoration:underline; text-underline-offset:2px; }
.nd-texto { max-height:480px; overflow-y:auto; padding-right:14px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.nd-texto h2 { margin:0 0 20px; font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:46px; line-height:1.05; letter-spacing:.3px;
  text-shadow:0 0 22px rgba(242,242,244,.34); }
.nd-texto p { margin:0 0 14px; font-family:"Fraunces", Georgia, serif; font-weight:340; font-size:21px; line-height:1.56; letter-spacing:normal; color:rgba(242,242,244,.88); }
.nd-pie { position:absolute; left:0; right:0; bottom:26px; z-index:2; display:flex; justify-content:center; align-items:center; gap:24px; font-size:22px; }
.noche .nd-flecha { font-size:24px; line-height:1; padding:10px 18px; color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.4); transition:opacity .3s ease; }
.noche .nd-flecha.apagada { opacity:.22; }
.nd-cuenta { min-width:70px; text-align:center; color:rgba(242,242,244,.6); }
.noche.alto .nd-cab { top:92px; }
.noche.alto .nd-nombre { font-size:54px; }
/* las secciones son OPCIONES (como «presente · pasado»): en el móvil, la regla de la plataforma, en una fila y sin salirse */
.noche.alto .nd-secciones { margin-top:14px; gap:calc(24 * var(--nu)); justify-content:center; padding:0 16px; white-space:nowrap; }
.noche.alto .nd-sec { flex:none; font-size:calc(30 * var(--nu)); }
.noche.alto .nd-laminas { top:210px; bottom:66px; }
.noche.alto .nd-lamina { padding:0 20px; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); gap:18px; align-items:start; }
.noche.alto .nd-foto { width:100%; height:230px; border-radius:20px; }
.noche.alto .nd-texto { max-height:none; height:100%; overflow-y:auto; }
.noche.alto .nd-texto h2 { font-size:28px; margin-bottom:12px; }
.noche.alto .nd-texto p { font-size:17px; }
.noche.alto .nd-pie { bottom:18px; font-size:16px; }

/* ══ EL CINE POR DENTRO ═════════════════════════════════════════════════ */
.nv-cine { --cine-luz:214, 208, 198; }
.nc-luz { position:absolute; left:-900px; right:-900px; top:-400px; bottom:-400px; background-color:rgb(var(--cine-luz)); opacity:.13; transition:background-color .9s ease, opacity 1s ease;
  -webkit-mask-image:radial-gradient(38% 46% at 50% 38%, #000, transparent 80%); mask-image:radial-gradient(38% 46% at 50% 38%, #000, transparent 80%); }
.nv-cine.en-funcion .nc-luz { opacity:.2; }
.nc-pantalla { position:absolute; left:170px; top:118px; width:1100px; height:619px; }
/* la luz que se sale de la pantalla: un color con máscara suave (cambiar de color no obliga a desenfocar nada) */
.nc-halo { position:absolute; inset:-120px; background-color:rgb(var(--cine-luz)); opacity:.2; transition:background-color .9s ease;
  -webkit-mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); }
.nc-video, .nc-cartel { position:absolute; inset:0; width:100%; height:100%; }
.nc-video { object-fit:contain; background:#000; transition:opacity 1s ease;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent), linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent), linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-composite:intersect; }
.nv-cine:not(.en-funcion) .nc-video { opacity:0; }
.nc-cartel { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:0 90px; box-sizing:border-box; color:#141416;
  background:linear-gradient(170deg, #EEEBE5, #D8D3C9);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent), linear-gradient(180deg, transparent, #000 50px, #000 calc(100% - 50px), transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent), linear-gradient(180deg, transparent, #000 50px, #000 calc(100% - 50px), transparent); mask-composite:intersect; }
.nv-cine.en-funcion .nc-cartel { display:none; }
.nc-c-ceja { font-size:20px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.nc-c-tit { font-size:70px; line-height:1.02; }
.nc-c-cuando { font-size:28px; opacity:.75; }
.nc-c-falta { font-size:21px; opacity:.55; }
.nc-sub { position:absolute; left:250px; right:250px; top:520px; z-index:4; text-align:center; font-size:30px; line-height:1.25; color:#FFFFFF;
  text-shadow:0 0 6px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.7); pointer-events:auto; }
.nc-butacas { position:absolute; left:0; top:0; width:1440px; height:900px; pointer-events:none; z-index:3; }
.nc-sombra { position:absolute; left:var(--x); top:var(--y); width:200px; height:300px; margin-left:-100px; transform-origin:50% 100%;
  transform:scale(var(--k)); opacity:0; filter:blur(3px); transition:opacity 1.6s ease;
  background:radial-gradient(ellipse 21% 14% at 50% 16%, #08080A 95%, transparent 100%), radial-gradient(ellipse 13% 13% at 50% 33%, #08080A 95%, transparent 100%),
    radial-gradient(ellipse 50% 34% at 50% 80%, #08080A 97%, transparent 100%); }
.nc-sombra.esta { opacity:.97; animation:ncRespira var(--d) ease-in-out infinite alternate; }
.nc-sombra.se-va { opacity:0; }
@keyframes ncRespira { from { transform:scale(var(--k)) rotate(0deg); } to { transform:scale(var(--k)) translateX(3px) rotate(var(--r)); } }
.nc-comentarios { position:absolute; left:60px; bottom:120px; width:430px; z-index:5; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.nc-com { max-width:100%; padding:10px 16px; border-radius:18px; background:rgba(18,18,21,.84);
  font-size:19px; line-height:1.3; opacity:0; translate:0 10px; transition:opacity var(--dc-t-lento) var(--dc-ease), translate var(--dc-t-entrada) var(--dc-ease); }
/* 14/09: lo que se dice en la sala, en el aire (sin burbujas de chat): el nombre apagado y la frase */
.noche:not(.casa) .nc-com { padding:0; border-radius:0; background:none; font-size:calc(30 * var(--nu)); text-shadow:0 1px 10px rgba(0,0,0,.85); }
.nc-com.on { opacity:1; translate:0 0; }
.nc-com-n { color:rgba(242,242,244,.5); margin-right:8px; }
.nc-com.mio .nc-com-n { color:#F2F2F4; }
.nc-escribir { position:absolute; left:50%; bottom:32px; width:560px; margin-left:-280px; z-index:6; display:flex; gap:8px; }
.nc-escribir[hidden] { display:none; }
.noche .nc-escribir input { flex:1; min-width:0; border:0; outline:none; border-radius:100px; padding:14px 22px; font-size:19px; color:#F2F2F4; background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.noche:not(.casa) .nc-escribir input { border-radius:0; background:none; box-shadow:none; padding:8px 0; text-align:center; font-size:calc(40 * var(--nu)); }
.noche .nc-escribir input::placeholder { color:rgba(242,242,244,.4); }
.noche .nc-escribir button { font-size:26px; padding:0 12px; }
.noche .nc-oir { position:absolute; left:50%; top:400px; transform:translateX(-50%); z-index:6; padding:14px 26px; border-radius:100px; background:rgba(10,10,12,.72); font-size:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.noche:not(.casa) .nc-oir { background:none; box-shadow:none; border-radius:0; font-size:calc(50 * var(--nu)); text-shadow:0 0 6px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.7); }
.nc-vieron { position:absolute; right:60px; top:120px; z-index:5; font-size:16px; color:rgba(242,242,244,.45); }
.noche.alto .nc-pantalla { left:6px; top:170px; width:378px; height:213px; }
.noche.alto .nc-c-tit { font-size:28px; } .noche.alto .nc-c-ceja { font-size:11px; } .noche.alto .nc-c-cuando { font-size:14px; } .noche.alto .nc-c-falta { font-size:12px; }
.noche.alto .nc-cartel { padding:0 26px; gap:8px; }
.noche.alto .nc-sub { left:16px; right:16px; top:432px; font-size:18px; }
.noche.alto .nc-butacas { transform:translateY(140px) scale(.27); transform-origin:0 0; }
.noche.alto .nc-comentarios { left:16px; right:16px; width:auto; bottom:96px; }
.noche.alto .nc-com { font-size:15px; padding:8px 12px; }
.noche.alto .nc-escribir { width:358px; margin-left:-179px; bottom:24px; }
.noche.alto .nc-escribir input { font-size:16px; padding:12px 18px; }
.noche.alto:not(.casa) .nc-escribir input { font-size:calc(34 * var(--nu)); padding:8px 0; }
.noche.alto:not(.casa) .nc-com { font-size:15px; }
.noche.alto .nc-vieron { right:24px; top:120px; font-size:13px; }

/* ══ EL TRADUCTOR: la ficha de una palabra ══════════════════════════════ */
.tr-ficha { position:fixed; left:50%; bottom:26px; z-index:30; width:min(560px, calc(100vw - 32px)); box-sizing:border-box;
  transform:translate(-50%, 16px); opacity:0; pointer-events:none; transition:opacity .35s ease, transform .45s var(--dc-ease);
  padding:16px 18px 14px 22px; border-radius:22px; background:rgba(22,22,25,.96);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:14px; align-items:center; }
.tr-ficha.abierta { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.tr-es { grid-column:1; font-size:26px; line-height:1.15; color:#F2F2F4; text-shadow:0 0 16px rgba(242,242,244,.3); overflow-wrap:anywhere; }
.tr-ru { grid-column:1; margin-top:6px; font-size:19px; line-height:1.35; color:rgba(242,242,244,.8); }
.tr-ru.cargando, .ncu-ru.cargando { color:rgba(242,242,244,.4); }
.tr-botones { grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:6px; }
.noche .tr-guardar { font-size:18px; padding:8px 12px; border-radius:100px; color:#F2F2F4; text-shadow:0 0 14px rgba(242,242,244,.35); white-space:nowrap; }
.noche .tr-guardar:disabled { cursor:default; opacity:.5; text-shadow:none; }
.noche .tr-cerrar { font-size:26px; padding:4px 8px; color:rgba(242,242,244,.5); }
/* 14/09: en la sala oscura la ficha ya no es una caja. La palabra, lo que
   significa y «в тетрадь» se escriben en el aire, abajo, sobre una penumbra
   que sube desde el borde (como los subtítulos del cine) y tapa lo que haya
   debajo. La escala hace la jerarquía, como en toda la plataforma: 60 · 40 ·
   30 (--dc-fs-*; la ficha vive fuera del escenario, en px de la pantalla). */
.noche:not(.casa) .tr-ficha { left:0; right:0; bottom:0; width:auto; border-radius:0; box-shadow:none; transform:translateY(18px);
  background:linear-gradient(0deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.9) 52%, rgba(10,10,12,0) 100%);
  padding:calc(110 * var(--dc-u)) max(20px, calc(50vw - 330px)) max(calc(46 * var(--dc-u)), 18px, env(safe-area-inset-bottom));
  column-gap:28px; align-items:end;
  transition:opacity var(--dc-t-salida) var(--dc-ease), transform var(--dc-t-salida) var(--dc-ease); }
.noche:not(.casa) .tr-ficha.abierta { transform:none; transition:opacity var(--dc-t-entrada) var(--dc-ease), transform var(--dc-t-entrada) var(--dc-ease); }
.noche:not(.casa) .tr-es { font-size:var(--dc-fs-60); line-height:1.05; 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); }
.noche:not(.casa) .tr-ru { margin-top:calc(12 * var(--dc-u)); font-size:var(--dc-fs-40); color:rgba(242,242,244,.72); }
.noche:not(.casa) .tr-botones { align-self:end; gap:calc(24 * var(--dc-u)); padding-bottom:calc(4 * var(--dc-u)); }
.noche:not(.casa) .tr-guardar { font-size:var(--dc-fs-40); padding:calc(8 * var(--dc-u)) 0; border-radius:0; text-shadow:0 0 calc(22 * var(--dc-u)) rgba(242,242,244,.45); transform-origin:right center;
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { .noche:not(.casa) .tr-guardar:not(:disabled):hover { transform:scale(1.06); } }
.noche:not(.casa) .tr-cerrar { font-size:var(--dc-fs-40); padding:calc(8 * var(--dc-u)) 0 calc(8 * var(--dc-u)) calc(8 * var(--dc-u)); color:rgba(242,242,244,.45); }
@media (max-width:700px) { .noche:not(.casa) .tr-ficha { padding-top:70px; } }
.noche .noche-carnet, .noche .noche-cuaderno, .noche .nd-pie { transition:opacity var(--dc-t-lento) var(--dc-ease), color .4s ease; }
.noche.con-ficha .noche-carnet, .noche.con-ficha .noche-cuaderno, .noche.con-ficha .nd-pie { opacity:0 !important; pointer-events:none; }
/* en el móvil, la hoja de Folio ocupa la pantalla: las esquinas se apartan para no pisar las revistas */
.noche.alto[data-vista="his"] .noche-carnet, .noche.alto[data-vista="his"] .noche-cuaderno { opacity:0 !important; pointer-events:none; }
/* en la hoja crema del lector, el mismo botón con los colores de Folio */
.folio-guardar { margin-left:auto; border:0; background:none; cursor:pointer; font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:14px; font-weight:600;
  color:var(--ultramar, #2733C0); padding:4px 2px; }
.folio-guardar:disabled { cursor:default; opacity:.5; }
.folio-guardar[hidden] { display:none; }

/* ══ EL CUADERNO ════════════════════════════════════════════════════════ */
.ncu-panel { position:fixed; inset:0; z-index:40; pointer-events:none; }
.ncu-panel.abierto { pointer-events:auto; }
.ncu-velo { position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:opacity .5s ease; }
.ncu-panel.abierto .ncu-velo { opacity:1; }
.ncu-hoja { position:absolute; right:0; top:0; bottom:0; width:min(470px, 100vw); box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; padding:30px 28px 40px;
  background:rgb(18,18,20); box-shadow:-30px 0 90px rgba(0,0,0,.45);
  transform:translateX(100%); transition:transform .55s var(--dc-ease); }
.ncu-panel.abierto .ncu-hoja { transform:none; }
.ncu-cab { display:flex; justify-content:space-between; align-items:center; }
.ncu-titulo { font-size:46px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.noche .ncu-cerrar { font-size:34px; color:rgba(242,242,244,.5); padding:4px 8px; }
.ncu-buscar { display:flex; gap:8px; margin:24px 0 8px; }
.noche .ncu-buscar input { flex:1; min-width:0; border:0; outline:none; border-radius:100px; padding:14px 20px; font-size:18px; color:#F2F2F4; background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.noche .ncu-buscar input::placeholder { color:rgba(242,242,244,.4); }
.noche .ncu-buscar button { font-size:24px; padding:0 10px; }
.ncu-res { padding:14px 4px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.ncu-res .ncu-guardar { margin-top:10px; padding-left:0; }
.ncu-cuenta { margin:18px 0 4px; font-size:14px; color:rgba(242,242,244,.45); }
.ncu-vacio { margin-top:22px; font-size:17px; line-height:1.5; color:rgba(242,242,244,.5); }
.ncu-palabra { position:relative; padding:14px 40px 14px 2px; border-bottom:1px solid rgba(255,255,255,.06); }
.ncu-es { font-size:24px; line-height:1.15; color:#F2F2F4; overflow-wrap:anywhere; }
.ncu-ru { margin-top:4px; font-size:17px; line-height:1.3; color:rgba(242,242,244,.7); }
.ncu-ctx { margin-top:6px; font-family:"Fraunces", Georgia, serif; font-style:italic; font-weight:340; font-size:15px; line-height:1.4; letter-spacing:normal; color:rgba(242,242,244,.42); }
.noche .ncu-quitar { position:absolute; right:2px; top:12px; font-size:22px; padding:4px 8px; color:rgba(242,242,244,.3); transition:color .3s ease; }
.noche .ncu-quitar:hover { color:rgba(242,242,244,.8); }
@media (prefers-reduced-motion: reduce) {
  .nc-sombra.esta { animation:none; }
  .ncu-hoja, .tr-ficha, .nd-pais, .nd-laminas { transition:none; }
}

/* ══ EL CUADERNO, OTRA VEZ (13/09 noche) ═══════════════════════════════
   Una sala más del club, dentro del escenario (px del diseño): la lista a la
   izquierda como los géneros de la música, la palabra elegida enorme a la
   derecha, el traductor libre arriba en la burbuja del chat. */
.noche .ncu-panel.cu { position:absolute; inset:0; z-index:6; pointer-events:auto; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s;
  background:linear-gradient(135deg, #2C2D2E 0%, #16171A 48%, #0A0A0C 100%); }
.noche.grafito .ncu-panel.cu { background:linear-gradient(135deg, #585B5B 0%, #0A0A0C 100%); }
.noche.casa .ncu-panel.cu { background:var(--dc-bg); }
.noche .ncu-panel.cu.abierto { opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s; }
.noche.con-cuaderno .noche-cuaderno { opacity:0 !important; pointer-events:none; transition:opacity .3s ease; }
.cu-titulo { position:absolute; right:60px; top:62px; font-size:40px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.cu-buscar { position:absolute; left:640px; top:168px; width:740px; height:72px; box-sizing:border-box; display:flex; align-items:center; gap:6px; padding:0 10px 0 28px; border-radius:22px;
  background:rgba(255,255,255,.075); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.noche .cu-buscar input { flex:1; min-width:0; height:100%; border:0; outline:0; background:none; padding:0; font:inherit; font-size:24px; color:#F2F2F4; letter-spacing:inherit; -webkit-user-select:text; user-select:text; }
.noche .cu-buscar input::placeholder { color:rgba(242,242,244,.4); }
.noche .cu-buscar button { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; }
.cu-buscar svg { width:24px; height:24px; fill:none; stroke:#F2F2F4; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cu-lista { position:absolute; left:60px; top:168px; width:520px; bottom:40px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:4px 0 60px;
  -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent); mask-image:linear-gradient(180deg, #000 82%, transparent); }
.cu-lista::-webkit-scrollbar { display:none; }
.cu-cuenta { font-size:20px; opacity:.45; margin-bottom:4px; }
.noche .cu-pal { display:flex; flex-direction:column; align-items:flex-start; text-align:left; opacity:.42; transition:opacity .35s ease; }
.cu-pal-es { font-size:44px; line-height:1.05; }
.cu-pal-ru { font-size:18px; line-height:1.2; opacity:.8; margin-top:4px; }
.noche .cu-pal.on { opacity:1; }
.cu-pal.on .cu-pal-es { text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
@media (any-hover: hover) { .noche .cu-pal:not(.on):hover { opacity:.72; } }
.cu-lista.entra .cu-pal { animation:cuEntra .7s var(--dc-ease) both; animation-delay:calc(.15s + var(--i) * 45ms); }
@keyframes cuEntra { from { opacity:0; transform:translateX(-24px); } }
.cu-vacio { font-size:24px; opacity:.5; }
.cu-ficha { position:absolute; left:640px; top:296px; width:740px; transition:opacity .18s ease; }
.cu-ficha.cruza { opacity:0; }
.cu-es { font-size:64px; line-height:1.05; overflow-wrap:anywhere; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.cu-es.cu-grande { font-size:96px; }
.cu-ru { font-size:34px; line-height:1.25; margin-top:16px; opacity:.85; }
.cu-ru.cargando { opacity:.4; }
.cu-ctx { margin-top:34px; max-width:680px; font-family:"Fraunces", Georgia, serif; font-style:italic; font-weight:340; font-size:26px; line-height:1.45; letter-spacing:normal; opacity:.72; }
.cu-ctx b { font-style:normal; font-weight:560; color:#fff; opacity:1; }
.cu-acciones { margin-top:40px; display:flex; gap:26px; }
.noche .cu-quitar { font-size:22px; opacity:.5; transition:opacity .3s ease; }
.noche .cu-guardar { font-size:26px; text-shadow:0 0 18px rgba(242,242,244,.45); }
.noche .cu-guardar:disabled { opacity:.45; text-shadow:none; cursor:default; }
@media (any-hover: hover) { .noche .cu-quitar:hover { opacity:1; } }
/* 14/09: el buscador es el CAMPO DE LA PUERTA (.ent-campo): sin caja, lo
   escrito grande y el texto de ayuda apagado; la flecha, un glifo suelto */
.noche:not(.casa) .cu-buscar { background:none; box-shadow:none; border-radius:0; padding:0; gap:14px; }
.noche:not(.casa) .cu-buscar input { font-size:calc(50 * var(--nu)); }
.noche:not(.casa) .cu-buscar input::placeholder { color:rgba(242,242,244,.42); }
.noche:not(.casa) .cu-buscar button { width:44px; border-radius:0; opacity:.45; transition:opacity var(--dc-t-lento) var(--dc-ease); }
.noche:not(.casa) .cu-buscar:focus-within button { opacity:1; }
.noche.alto .cu-titulo { right:24px; top:48px; font-size:22px; }
.noche.alto .cu-buscar { left:20px; right:20px; width:auto; top:96px; height:54px; padding:0 6px 0 18px; border-radius:18px; }
.noche.alto .cu-buscar input { font-size:17px; }
.noche.alto:not(.casa) .cu-buscar { left:24px; right:16px; padding:0; }
.noche.alto:not(.casa) .cu-buscar input { font-size:calc(40 * var(--nu)); }
.noche.alto .cu-buscar button { width:40px; height:40px; }
.noche.alto .cu-ficha { left:24px; right:24px; width:auto; top:176px; }
.noche.alto .cu-es { font-size:36px; } .noche.alto .cu-es.cu-grande { font-size:52px; }
.noche.alto .cu-ru { font-size:20px; margin-top:10px; }
.noche.alto .cu-ctx { font-size:17px; margin-top:16px; }
.noche.alto .cu-acciones { margin-top:18px; }
.noche.alto .noche .cu-quitar, .noche.alto .cu-quitar { font-size:16px; }
.noche.alto .cu-lista { left:24px; right:24px; width:auto; top:430px; bottom:24px; gap:12px; }
.noche.alto .cu-pal-es { font-size:28px; }
.noche.alto .cu-pal-ru { font-size:14px; }


/* ══ LA PRÁCTICA DEL CLUB (13/09/2026) ═══════════════════════════════════
   Un intercambio cada vez, en grande. Las respuestas posibles y la píldora
   donde se escribe son el metal de la casa (el de los ejercicios: el mismo
   degradado, la misma sombra, el mismo radio de 28, tinta blanca con su
   sombra). Nada de color: en el club la luz la ponen las cosas. Todo lo que
   se mueve, sólo con opacidad y transform. */
.nv-pra.on { transition:opacity .75s ease .34s, visibility 0s; }
.noche-luz[data-luz="pra"] { background:radial-gradient(54% 62% at 50% 46%, rgba(220,226,236,.10), rgba(220,226,236,0) 70%); }

/* en el escaparate: la pregunta que cambia y la píldora que contesta */
.es-pra { background:linear-gradient(135deg, #3A3C40 0%, #1C1D20 55%, #0E0E10 100%); }
.n-pra-qs { position:absolute; left:0; right:0; top:222px; height:100px; }
.n-pra-q { position:absolute; left:0; right:0; text-align:center; font-size:78px; line-height:1; white-space:nowrap; opacity:0;
  animation:nPraQ 12s ease-in-out infinite; animation-delay:calc(var(--i) * 4s); will-change:opacity, transform; }
@keyframes nPraQ { 0% { opacity:0; transform:translateY(14px); } 5%, 29% { opacity:1; transform:none; } 34%, 100% { opacity:0; transform:translateY(-14px); } }
.n-pra-pildora { position:absolute; left:50%; top:372px; width:600px; margin-left:-300px; height:84px; border-radius:28px; display:flex; align-items:center; padding:0 34px;
  background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; color:#fff; font-size:32px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.n-pra-cursor { display:inline-block; width:2px; height:36px; margin-left:4px; background:#fff; animation:nPraCursor 1.1s steps(1) infinite; }
@keyframes nPraCursor { 50% { opacity:0; } }
.n-rec.lado .n-pra-q, .nv-esc.quieto .n-pra-q, .nv-esc.moviendo .n-pra-q, .n-rec.lado .n-pra-cursor, .nv-esc.moviendo .n-pra-cursor { animation-play-state:paused; }
.noche.alto .n-pra-qs { top:calc(50% - 150px); height:90px; }
.noche.alto .n-pra-q { font-size:34px; white-space:normal; padding:0 30px; }
.noche.alto .n-pra-pildora { top:calc(50% - 30px); width:300px; margin-left:-150px; height:56px; border-radius:20px; font-size:18px; padding:0 20px; }
.noche.alto .n-pra-cursor { height:22px; }
@media (prefers-reduced-motion: reduce) { .noche .n-pra-q { animation:none; } .noche .n-pra-q:first-child { opacity:1; } }

/* ── por dentro ── */
.np { position:absolute; inset:0; }
.np button { font:inherit; color:inherit; }
/* 14/09: los modos son las OPCIONES de la plataforma, las de «presente ·
   pasado» (.ent-op): texto suelto, el elegido encendido y los demás
   apagados; al pasar, se enciende y crece un poco. Rolando: la cápsula clara
   de la nav, en la sala oscura, no. En lo oscuro la palabra encendida no
   lleva la sombra hacia abajo de la casa (no se vería) sino el brillo del
   club (--n-brillo). Medidas de la plataforma pasadas al escenario (--nu). */
.np-punto { opacity:.28; margin:0 2px; }
.np-arriba { position:absolute; left:50%; top:58px; translate:-50% 0; white-space:nowrap; z-index:3; }
.np .np-modos { display:flex; align-items:baseline; gap:calc(48 * var(--nu)); }
.np .np-modos .ent-op { font-size:calc(40 * var(--nu)); line-height:1.2; padding:calc(8 * var(--nu)) 0; color:#F2F2F4; opacity:.45; text-transform:lowercase; transform-origin:center;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease); }
.np .np-modos .ent-op.active { opacity:1; text-shadow:var(--n-brillo); }
@media (any-hover: hover) { .np .np-modos .ent-op:hover { opacity:1; transform:scale(1.06); } .np-acciones button:hover { opacity:1; } }
.np .np-modos .ent-op:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
.np-nivel:empty, .np-nivel:empty + .np-punto { display:none; }
.np-acciones { position:absolute; right:60px; top:128px; display:flex; gap:10px; font-size:calc(30 * var(--nu)); z-index:3; }
.np-acciones button { opacity:.5; transition:opacity var(--dc-t-lento) var(--dc-ease); }
.np-arriba, .np-acciones { transition:opacity var(--dc-t-lento) var(--dc-ease); }
.np.bienvenida .np-arriba, .np.bienvenida .np-acciones, .np.con-hoja .np-arriba, .np.con-hoja .np-acciones, .np.con-hoja .np-escribe { opacity:0; pointer-events:none; }
.noche.pra-hoja .noche-cuaderno { opacity:0; pointer-events:none; }

.np-escena { position:absolute; left:200px; right:200px; top:170px; bottom:196px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.np-tu { max-width:900px; margin-bottom:36px; }
.np-tu.vacio { display:none; }
.np-tu-t { font-size:25px; line-height:1.3; opacity:.5; }
.np-voz { margin-right:8px; }
.np-corr { display:none; margin:14px auto 0; max-width:760px; padding-left:16px; box-shadow:inset 2px 0 0 rgba(242,242,244,.45); text-align:left; font-size:22px; line-height:1.35; opacity:.88; }
.np-tu.con-corr .np-corr { display:block; }
.np-dice { max-width:1010px; letter-spacing:-.005em; text-wrap:balance; -webkit-user-select:text; user-select:text; }
.np-dice.t1 { font-size:64px; line-height:1.08; }
.np-dice.t2 { font-size:51px; line-height:1.1; }
.np-dice.t3 { font-size:41px; line-height:1.14; }
.np-dice.t4 { font-size:31px; line-height:1.3; max-width:900px; text-align:left; }
.np-dice.t5 { font-size:25px; line-height:1.36; max-width:900px; text-align:left; }
.np-dice b { font-weight:inherit; color:#fff; text-shadow:0 0 18px rgba(255,255,255,.4); }
.np-dice.escribiendo { display:flex; gap:14px; height:64px; align-items:center; }
.np-dice.escribiendo span { width:14px; height:14px; border-radius:50%; background:#F2F2F4; animation:npPunto 1.2s ease-in-out infinite; }
.np-dice.escribiendo span:nth-child(2) { animation-delay:.18s; } .np-dice.escribiendo span:nth-child(3) { animation-delay:.36s; }
@keyframes npPunto { 0%, 100% { opacity:.2; transform:translateY(0); } 40% { opacity:1; transform:translateY(-6px); } }
.np-sug { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 18px; margin-top:46px; max-width:1040px; min-height:62px; }
.np-queda { flex-basis:100%; font-size:19px; opacity:.55; margin-top:6px; }

/* el metal de la casa (el de los ejercicios) */
.np .np-sug-b, .np-pildora { background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); border-radius:28px; }
.np .np-sug-b { font-size:23px; line-height:1.2; padding:15px 28px; transition:transform .22s var(--dc-ease), box-shadow .35s ease; }
/* 14/09: en la sala oscura, las respuestas a una pregunta del sistema (nivel,
   cómo dirigirse a ti, qué hacer al acabar lo de hoy) son las OPCIONES de la
   plataforma (.ent-op): texto suelto, lo que no está elegido, apagado; al
   pasar, se enciende y crece un poco. Nada de burbujas. */
.noche:not(.casa) .np-sug { gap:calc(20 * var(--nu)) calc(64 * var(--nu)); align-items:baseline; }
.noche:not(.casa) .np .np-sug-b { background:none !important; box-shadow:none !important; border-radius:0; padding:calc(8 * var(--nu)) 0; color:#F2F2F4;
  font-size:calc(50 * var(--nu)); line-height:1.2; opacity:.6; transform-origin:center;
  transition:opacity var(--dc-t-lento) var(--dc-ease), transform var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease); }
.noche:not(.casa) .np .np-sug-b.on { opacity:1; text-shadow:0 0 calc(22 * var(--nu)) rgba(242,242,244,.45); }
.noche:not(.casa) .np-sug:has(.np-sug-b.on) .np-sug-b:not(.on) { opacity:.45; }
@media (any-hover: hover) { .noche:not(.casa) .np .np-sug-b:hover { opacity:1; transform:scale(1.06); background:none; box-shadow:none; } }
.noche:not(.casa) .np .np-sug-b:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }
@media (any-hover: hover) { .np .np-sug-b:hover { transform:translateY(-3px); box-shadow:0 16px 52px rgba(20,30,45,.55); } }
.np .np-sug-b:active { transform:scale(.97); }
.np .np-sug-b.on { box-shadow:0 10px 50px #141E2D84, 0 0 0 2px rgba(255,255,255,.8); }

/* entrar y salir: sube y aparece; se va hacia arriba. Sólo opacidad y transform. */
.np-tu, .np-dice, .np-sug, .np-corr { transition:opacity var(--dc-t-salida) var(--dc-ease), transform var(--dc-t-salida) var(--dc-ease); }
.np-tu.sale, .np-dice.sale, .np-sug.sale { opacity:0; transform:translateY(-18px); }
.np-tu.entra, .np-dice.entra, .np-corr.entra { animation:npEntra var(--dc-t-entrada) var(--dc-ease) both; animation-delay:var(--d, 0ms); }
.np-sug.entra .np-sug-b, .np-sug.entra .np-queda, .np-sug.entra .np-pista { animation:npEntra var(--dc-t-entrada) var(--dc-ease) both; animation-delay:calc(var(--d, 0ms) + var(--i, 0) * 70ms); }
@keyframes npEntra { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.np.cargando .np-escena { opacity:0; }

/* la píldora donde se escribe; sube con el teclado del móvil */
.np-escribe { position:absolute; left:50%; bottom:92px; width:860px; margin-left:-430px; z-index:3;
  transition:transform .25s ease, opacity .4s ease; }
.np.sin-escribir .np-escribe { opacity:0; pointer-events:none; transform:translateY(24px); }
.np-pildora { display:flex; align-items:center; gap:6px; height:80px; padding:0 12px 0 32px; }
.np .np-campo { flex:1; min-width:0; height:100%; background:none; border:0; outline:0; padding:0; color:#fff; font:inherit; font-size:27px; letter-spacing:inherit;
  text-shadow:0 2px 8px rgba(0,0,0,.35); caret-color:#fff; -webkit-user-select:text; user-select:text; }
.np-campo::placeholder { color:rgba(255,255,255,.8); }
.np .np-mic, .np .np-manda { flex:none; width:56px; height:56px; border-radius:20px; display:grid; place-items:center; transition:opacity .25s ease, transform .2s ease; }
.np-mic svg, .np-manda svg { width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.np .np-manda { opacity:.4; }
.np .np-pildora.con-texto .np-manda { opacity:1; }
.np-pildora.con-texto .np-mic { display:none; }
.np-mic:active, .np-manda:active { transform:scale(.92); }
.np.ocupado .np-manda, .np.ocupado .np-mic { opacity:.25; pointer-events:none; }
.np-grabando { flex:1; display:flex; align-items:center; gap:14px; font-size:23px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.np-grabando[hidden] { display:none; }
.np-rojo { width:14px; height:14px; border-radius:50%; background:#fff; animation:npLatido 1s ease-in-out infinite; }
@keyframes npLatido { 50% { opacity:.25; transform:scale(.8); } }
.np-grabando-t { opacity:.8; font-size:19px; }
.np.grabando .np-campo, .np.grabando .np-manda { display:none; }
.np.grabando .np-mic rect { fill:#fff; }

/* el historial: la hoja crema de Folio con el mosaico de tus conversaciones */
.np-hoja { position:absolute; inset:0; z-index:6; }
.np-hoja[hidden] { display:none; }
.np-hoja .nh-hoja { position:absolute; left:56px; right:56px; top:150px; bottom:-40px; border-radius:30px 30px 0 0; overflow:hidden;
  --crema:#F4EFE6; --papel:#FDFBF6; --tinta:#1C1915; --tinta-suave:rgba(28,25,21,.62); --tinta-tenue:rgba(28,25,21,.40); --linea:rgba(28,25,21,.10); --ultramar:#2733C0;
  background:var(--crema); color:var(--tinta); letter-spacing:normal; -webkit-user-select:text; user-select:text;
  box-shadow:0 -12px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  opacity:0; translate:0 90px; transition:opacity .4s ease, translate .6s var(--dc-ease); }
.np-hoja.on .nh-hoja { opacity:1; translate:0 0; transition:opacity .5s ease, translate .9s var(--dc-ease); }
.np-hoja.on .nh-carta { animation:nhSube .8s var(--dc-ease) both; animation-delay:calc(.2s + var(--i) * 70ms); }
.np-hoja-cerrar, .np-hoja-atras { font-family:"Inter", -apple-system, system-ui, sans-serif !important; font-size:13px !important; font-weight:600; letter-spacing:.04em; padding:8px 16px; border-radius:100px; color:var(--tinta-suave) !important; box-shadow:inset 0 0 0 1px var(--linea); }
.np-hoja-atras { margin-bottom:22px; }
.np-mosaico .nh-carta.sin-foto .nh-tit { font-size:24px; -webkit-line-clamp:5; }
.np-mosaico .nh-carta.portada .nh-tit { font-size:40px; -webkit-line-clamp:5; }
.np-mosaico .nh-carta.portada .nh-ceja, .np-mosaico .nh-carta .nh-ceja { color:var(--tinta-tenue); }
.np-mosaico .nh-carta.portada .nh-ceja { color:rgba(243,241,255,.72); }
.np-hoja-vacio, .np-hoja-cargando { font-family:"Canela Text", "Fraunces", Georgia, serif; font-size:24px; color:var(--tinta-suave); padding:30px 0; }
.np-leer { max-width:760px; }
.np-leer p { margin:0 0 18px; }
.np-l-b { font-family:"Canela Text", "Fraunces", Georgia, serif; font-size:25px; line-height:1.35; letter-spacing:-.01em; }
.np-l-b b { font-weight:600; }
.np-l-a { font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:17px; line-height:1.5; color:var(--tinta-suave); padding-left:18px; box-shadow:inset 2px 0 0 var(--linea); }
.np-l-c { font-family:"Inter", -apple-system, system-ui, sans-serif; font-size:14px; line-height:1.45; color:var(--ultramar); padding-left:18px; margin-top:-10px !important; }
.np-leer-pie { padding:18px 0 10px; }
.np .np-seguir { font-family:"Inter", -apple-system, system-ui, sans-serif !important; font-size:15px !important; font-weight:600; padding:12px 22px; border-radius:100px; background:var(--ultramar); color:#F3F1FF !important; }

/* 13/09 noche: en la sala oscura, la píldora de escribir es la burbuja del
   canal de Telegram (Rolando: el metal «no va»). Y en vez de respuestas
   posibles, una «подсказка» que da sólo el principio de una. */
/* 14/09: donde se escribe es el CAMPO DE LA PUERTA (.ent-campo): invisible
   de verdad, sin caja ni burbuja; lo que se ve es lo que escribes, grande y
   centrado, con el texto de ayuda apagado. El micro y la flecha son glifos
   sueltos a su derecha. Rolando, 14/09: «las píldoras esas se ven muy
   genéricas». */
.noche:not(.casa) .np-pildora { position:relative; background:none; box-shadow:none; border-radius:0; text-shadow:none; padding:0 calc(76 * var(--nu)); gap:0; justify-content:center; }
.noche:not(.casa) .np .np-campo { color:#F2F2F4; text-shadow:none; text-align:center; font-size:calc(50 * var(--nu)); caret-color:#F2F2F4; }
.noche:not(.casa) .np-campo::placeholder { color:rgba(242,242,244,.42); }
.noche:not(.casa) .np .np-mic, .noche:not(.casa) .np .np-manda { position:absolute; right:0; top:50%; margin-top:-28px; }
.noche:not(.casa) .np-mic svg, .noche:not(.casa) .np-manda svg { stroke:#F2F2F4; filter:none; }
.noche:not(.casa) .np .np-manda { opacity:0; pointer-events:none; }
.noche:not(.casa) .np .np-pildora.con-texto .np-manda { opacity:1; pointer-events:auto; }
.noche:not(.casa) .np-grabando { justify-content:center; text-shadow:none; }
.noche:not(.casa) .n-pra-pildora { background:none; box-shadow:none; border-radius:0; text-shadow:none; color:rgba(242,242,244,.6); justify-content:center; }
.noche:not(.casa) .n-pra-cursor { background:rgba(242,242,244,.9); }
.np .np-pista { font-size:20px; line-height:1.3; opacity:.5; padding:6px 10px; transition:opacity .3s ease; }
@media (any-hover: hover) { .np .np-pista:hover { opacity:.85; } }
.np .np-pista.abierta { opacity:.9; cursor:default; }

/* ── en el móvil (390 de ancho) ── */
/* en un móvil: la regla de la plataforma para las opciones (fs-30, aire sp-24) */
.noche.alto .np-arriba { top:96px; }
.noche.alto .np .np-modos { gap:calc(34 * var(--nu)); }
.noche.alto .np .np-modos .ent-op { font-size:calc(30 * var(--nu)); }
.noche.alto .np-acciones { right:auto; left:24px; top:auto; bottom:24px; font-size:15px; }
.noche.alto:not(.casa) .np-sug { gap:calc(14 * var(--nu)) calc(40 * var(--nu)); }
.noche.alto:not(.casa) .np .np-sug-b { font-size:calc(40 * var(--nu)); padding:calc(6 * var(--nu)) 0; }
.noche.alto .np-escena { left:22px; right:22px; top:128px; bottom:176px; }
.noche.alto .np-tu { margin-bottom:20px; }
.noche.alto .np-tu-t { font-size:16px; }
.noche.alto .np-corr { font-size:15px; margin-top:10px; padding-left:12px; }
.noche.alto .np-dice.t1 { font-size:31px; }
.noche.alto .np-dice.t2 { font-size:26px; }
.noche.alto .np-dice.t3 { font-size:22px; line-height:1.2; }
.noche.alto .np-dice.t4 { font-size:18px; line-height:1.36; }
.noche.alto .np-dice.t5 { font-size:16px; line-height:1.4; }
.noche.alto .np-dice.escribiendo { height:40px; gap:10px; }
.noche.alto .np-dice.escribiendo span { width:10px; height:10px; }
.noche.alto .np-sug { gap:10px; margin-top:26px; min-height:44px; }
.noche.alto .np .np-sug-b { font-size:16px; padding:11px 17px; border-radius:18px; }
.noche.alto .np-queda { font-size:14px; }
.noche.alto .np .np-pista { font-size:15px; }
.noche.alto .np-escribe { bottom:62px; width:350px; margin-left:-175px; }
.noche.alto:not(.casa) .np-escribe { bottom:104px; }
.noche.alto .np-pildora { height:56px; padding:0 6px 0 20px; border-radius:20px; }
.noche.alto .np-campo { font-size:17px; }
.noche.alto:not(.casa) .np .np-campo { font-size:calc(36 * var(--nu)); }
.noche.alto:not(.casa) .np-pildora { padding:0 48px; }
.noche.alto:not(.casa) .np .np-mic, .noche.alto:not(.casa) .np .np-manda { margin-top:-22px; }
.noche.alto .np .np-mic, .noche.alto .np .np-manda { width:44px; height:44px; border-radius:14px; }
.noche.alto .np-mic svg, .noche.alto .np-manda svg { width:22px; height:22px; }
.noche.alto .np-grabando { font-size:16px; gap:10px; }
.noche.alto .np-grabando-t { font-size:13px; }
/* con el teclado del móvil abierto (14/09): la sala mide lo que se ve y la
   práctica se compacta como un chat: lo que dice el tutor, justo encima de
   donde escribes; la cabecera se aparta mientras tanto */
.noche.alto.con-teclado .noche-marca, .noche.alto.con-teclado .noche-titulos, .noche.alto.con-teclado .noche-carnet, .noche.alto.con-teclado .noche-cuaderno { opacity:0 !important; pointer-events:none; }
.noche.alto.con-teclado .np-arriba, .noche.alto.con-teclado .np-acciones, .noche.alto.con-teclado .np-tu-t { display:none; }
.noche.alto.con-teclado .np-escena { top:16px; bottom:80px; justify-content:flex-end; }
.noche.alto.con-teclado .np-tu { margin-bottom:12px; }
.noche.alto.con-teclado .np-sug { margin-top:12px; min-height:0; }
.noche.alto.con-teclado .np-escribe { bottom:12px; }
.noche.alto .np-hoja .nh-hoja { left:10px; right:10px; top:104px; border-radius:22px 22px 0 0; }
.noche.alto .np-mosaico .nh-carta.portada .nh-tit { font-size:28px; }
.noche.alto .np-l-b { font-size:20px; }
.noche.alto .np-l-a { font-size:15px; }


/* ═══ EL CLUB CON LOS COLORES DE LA CASA (13/09/2026) ═══════════════════
   Rolando: «¿no debería el club verse en los colores de toda la plataforma?
   No se ve tan premium ese negro». La sala es el degradado de la plataforma
   (--dc-bg) y la tinta la de la casa: blanca con su sombra (--dc-shadow-text
   y --dc-shadow-text-strong), sin halos de luz. El metal de las píldoras
   nació para este fondo. Lo que queda oscuro es a propósito: el cine (al
   entrar se apagan las luces) y su recuerdo en el escaparate.
   Todo va bajo .noche.casa: para volver al negro, _NOCHE_CASA = false. */
.noche.casa { color:var(--dc-ink); }
.noche.casa .noche-sala { background:var(--dc-bg); }
.noche.casa .noche-sala::after { display:none; }
/* el cine: se apagan las luces al entrar (y vuelven al salir) */
.noche-apagon { position:absolute; inset:0; pointer-events:none; opacity:0; will-change:opacity;
  background:linear-gradient(135deg, #2C2D2E 0%, #16171A 48%, #0A0A0C 100%); transition:opacity 1.4s ease; }
.noche.casa[data-vista="cine"] .noche-apagon, .noche.grafito[data-vista="cine"] .noche-apagon { opacity:1; transition:opacity 1.8s ease .2s; }
.noche:not(.casa):not(.grafito) .noche-apagon { display:none; }

/* ── el logotipo y el título: la sombra de la casa (el halo se hornea igual, en noche-js.js) ── */
.noche.casa .noche-marca-t { color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .noche-marca-t.con-halo { text-shadow:none; }
/* la sombra horneada, DEBAJO de las letras (encima las agrisaba) */
.noche.casa .noche-halo-logo { z-index:-1; }
.noche.casa .noche-marca-t .marca-club { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .noche-marca-t.neon .marca-club, .noche.casa .noche-marca-t.encendido .marca-club { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .noche-marca-brillo { text-shadow:0 22px 44px rgba(20,30,45,.55); }
.noche.casa .noche-marca-t:focus-visible { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .noche-titulos { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .noche-cuaderno { color:rgba(255,255,255,.85); text-shadow:var(--dc-shadow-text); }
.noche.casa .noche-cuaderno:hover, .noche.casa .noche-cuaderno:focus-visible { color:#fff; text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .noche-cuaderno .ncu-n { color:rgba(255,255,255,.8); }
/* sobre la hoja crema de las historias, «тетрадь» en tinta de Folio */
.noche.casa[data-vista="his"] .noche-cuaderno, .noche.casa[data-vista="his"] .noche-cuaderno .ncu-n { color:rgba(28,25,21,.55); text-shadow:none; }

/* ── el escaparate ── */
.noche.casa .es-pra, .noche.casa .es-musica, .noche.casa .es-mundo, .noche.casa .es-tg { background:var(--dc-bg); }
.noche.casa .n-disco { box-shadow:0 30px 70px rgba(20,30,45,.45); }
.noche.casa .n-genero, .noche.casa .n-pra-q, .noche.casa .n-tg-nombre, .noche.casa .n-tg-abrir { color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .n-tg-ico { filter:drop-shadow(0 14px 30px rgba(20,30,45,.4)); }
/* el cine, en su recuerdo: la sala en penumbra y la pantalla encendida (por dentro, a oscuras) */
.noche.casa .es-cine { background:linear-gradient(135deg, #7E8A9C 0%, #5F6B7E 50%, #474F5E 100%); }
.noche.casa .n-burbuja { background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; color:#fff; text-shadow:var(--dc-shadow-text); }

/* ── la práctica ── */
.noche.casa .np-modos button[data-m] { opacity:.62; text-shadow:var(--dc-shadow-text); }
.noche.casa .np-modos button[data-m][aria-selected="true"] { opacity:1; text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .np-acciones button { opacity:.78; text-shadow:var(--dc-shadow-text); }
.noche.casa .np-punto { opacity:.55; }
.noche.casa .np .np-nivel { box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); opacity:.95; text-shadow:var(--dc-shadow-text); }
.noche.casa .np-tu-t { opacity:.82; text-shadow:var(--dc-shadow-text); }
.noche.casa .np-corr { box-shadow:inset 2px 0 0 rgba(255,255,255,.75); opacity:1; text-shadow:var(--dc-shadow-text); }
.noche.casa .np-dice, .noche.casa .np-dice b { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .np-dice.t4, .noche.casa .np-dice.t5, .noche.casa .np-dice.t4 b, .noche.casa .np-dice.t5 b { text-shadow:var(--dc-shadow-text); }
.noche.casa .np-dice.escribiendo span { background:#fff; box-shadow:0 6px 14px rgba(20,30,45,.35); }
.noche.casa .np-queda, .noche.casa .np-grabando { text-shadow:var(--dc-shadow-text); }
.noche.casa .np-queda { opacity:.85; }

/* ── la música por dentro ── */
.noche.casa .nm-genero { color:rgba(255,255,255,.62); text-shadow:var(--dc-shadow-text); }
.noche.casa .nm-genero.on { color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); }
@media (any-hover: hover) { .noche.casa .nm-genero:not(.on):hover { color:rgba(255,255,255,.88); } }
.noche.casa .nm-portada { box-shadow:0 40px 100px rgba(20,30,45,.5); }
.noche.casa.alto .nm-portada { box-shadow:0 30px 70px rgba(20,30,45,.5); }
/* las que se van se funden con la sala, no con el negro */
.noche.casa .nm-oscuro { background:#8391A8; }
.noche.casa .nm-titulo, .noche.casa .nm-slushat { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .nm-artista { color:rgba(255,255,255,.8); text-shadow:var(--dc-shadow-text); }
.noche.casa .nm-servicio { color:rgba(255,255,255,.8); text-shadow:var(--dc-shadow-text); }
.noche.casa .nm-servicios:hover .nm-servicio { color:rgba(255,255,255,.45); text-shadow:none; }
.noche.casa .nm-servicios .nm-servicio:hover, .noche.casa .nm-servicios .nm-servicio:active, .noche.casa .nm-servicios .nm-servicio:focus-visible { color:#fff; text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .nm-son-foto { box-shadow:0 12px 30px rgba(20,30,45,.45); }
.noche.casa .nm-son-titulo { text-shadow:var(--dc-shadow-text); }
.noche.casa .nm-son-artista { color:rgba(255,255,255,.8); text-shadow:var(--dc-shadow-text); }
.noche.casa .nm-son-barra { background:rgba(255,255,255,.35); }
.noche.casa .nm-son-barra > i { background:#fff; box-shadow:none; }
.noche.casa .nm-son-signo { fill:#fff; filter:drop-shadow(0 2px 6px rgba(20,30,45,.4)); }
.noche.casa .nm-oir { text-shadow:0 0 16px rgba(255,255,255,.6), var(--dc-shadow-text-strong); }

/* ── el cine por dentro ── las mismas piezas que la música, con la tinta de
   la casa. La sala del cine además se apaga al entrar (.noche-apagon), así
   que aquí la tinta blanca es la que manda. */
.noche.casa .rc-genero { color:rgba(255,255,255,.62); text-shadow:var(--dc-shadow-text); }
.noche.casa .rc-genero.on { color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); }
@media (any-hover: hover) { .noche.casa .rc-genero:not(.on):hover { color:rgba(255,255,255,.88); } }
.noche.casa .rc-portada { box-shadow:0 30px 80px rgba(20,30,45,.5); }
.noche.casa.alto .rc-portada { box-shadow:0 22px 56px rgba(20,30,45,.5); }
.noche.casa .rc-tit, .noche.casa .rc-mas { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .rc-anio { color:rgba(255,255,255,.6); }
.noche.casa .rc-meta { color:rgba(255,255,255,.78); text-shadow:var(--dc-shadow-text); }
.noche.casa .rc-sinopsis { color:#fff; text-shadow:var(--dc-shadow-text); }
.noche.casa .rc-reparto, .noche.casa .rc-donde { color:rgba(255,255,255,.82); text-shadow:var(--dc-shadow-text); }
.noche.casa .rc-reparto b, .noche.casa .rc-donde b { color:rgba(255,255,255,.55); }
.noche.casa .rc-fuente { color:rgba(255,255,255,.45); }
.noche.casa .rc-vacio { color:rgba(255,255,255,.8); text-shadow:var(--dc-shadow-text); }
@media (any-hover:hover) { .noche.casa .rc-mas:hover { color:#fff; text-shadow:0 0 16px rgba(255,255,255,.5), var(--dc-shadow-text-strong); } }

/* ── las hojas crema (historias, historial de la práctica) sobre la sala clara ── */
.noche.casa .nv-his .nh-hoja, .noche.casa .np-hoja .nh-hoja { box-shadow:0 -10px 70px rgba(20,30,45,.35), 0 0 0 1px rgba(255,255,255,.2); }

/* ── descubrir: la lista de regiones junto al globo (el país, con su foto, se queda como está) ── */
.noche.casa .nd-region { color:rgba(255,255,255,.62); text-shadow:var(--dc-shadow-text); }
.noche.casa .nd-region.on { color:#fff; text-shadow:var(--dc-shadow-text-strong); }
@media (any-hover: hover) { .noche.casa .nd-region:not(.on):hover { color:rgba(255,255,255,.88); } }
.noche.casa .nd-pista-texto { color:rgba(255,255,255,.85); text-shadow:var(--dc-shadow-text); }
.noche.casa .nd-rot-n { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .nd-rot-e { color:rgba(255,255,255,.8); text-shadow:var(--dc-shadow-text); }

/* ── el traductor: la ficha es del metal de la casa ── */
.noche.casa .tr-ficha { background:linear-gradient(90deg, #C2CAD4, #8B97AB); border-radius:28px; box-shadow:0 10px 50px #141E2D84; }
.noche.casa .tr-es { color:#fff; text-shadow:var(--dc-shadow-text); }
.noche.casa .tr-ru { color:#fff; text-shadow:var(--dc-shadow-text); }
.noche.casa .tr-ru.cargando { color:rgba(255,255,255,.7); }
.noche.casa .tr-guardar { text-shadow:var(--dc-shadow-text); }
.noche.casa .tr-cerrar { color:rgba(255,255,255,.85); }
.noche.casa *::highlight(tr-sel) { background-color:rgba(20,30,45,.2); color:#fff; }

/* ── el cuaderno: la hoja de las tarjetas de la casa ── */
.noche.casa .ncu-velo { background:rgba(20,30,45,.28); }
.noche.casa .ncu-hoja { background:linear-gradient(170deg, #B4BFCC 0%, #95A3B8 55%, #7D8CA4 100%); box-shadow:-20px 0 70px rgba(20,30,45,.35); }
.noche.casa .ncu-titulo { text-shadow:var(--dc-shadow-text-strong); }
.noche.casa .ncu-cerrar, .noche.casa .ncu-quitar { color:rgba(255,255,255,.85); text-shadow:var(--dc-shadow-text); }
.noche.casa .ncu-buscar input { background:linear-gradient(90deg, #C2CAD4, #8B97AB); border-radius:22px; box-shadow:0 10px 40px rgba(20,30,45,.35); color:#fff; text-shadow:var(--dc-shadow-text); }
.noche.casa .ncu-buscar input::placeholder { color:rgba(255,255,255,.8); }
.noche.casa .ncu-cuenta, .noche.casa .ncu-vacio { color:rgba(255,255,255,.88); text-shadow:var(--dc-shadow-text); }
.noche.casa .ncu-es { color:#fff; text-shadow:var(--dc-shadow-text); }
.noche.casa .ncu-ru { color:rgba(255,255,255,.92); text-shadow:var(--dc-shadow-text); }
.noche.casa .ncu-ctx { color:rgba(255,255,255,.78); }

/* ═══ PROVISIONAL (13/09): comparar fondos ═════════════════════════════
   grafito = la maqueta de Rolando (#585B5B → #0A0A0C), con todo lo demás
   del club de noche; negro = el de antes (sin clase). El selector, arriba. */
.noche.grafito .noche-sala { background:linear-gradient(135deg, #585B5B 0%, #0A0A0C 100%); }
.noche.grafito .es-pra, .noche.grafito .es-musica, .noche.grafito .es-mundo, .noche.grafito .es-tg { background:linear-gradient(135deg, #585B5B 0%, #0A0A0C 100%); }
.noche-tema { position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:50; display:flex; gap:2px; padding:3px; border-radius:100px;
  background:rgba(20,22,26,.55); font:600 12px/1 -apple-system, system-ui, sans-serif; letter-spacing:.02em; }
.noche .noche-tema button { padding:6px 11px; border-radius:100px; color:rgba(255,255,255,.72); }
.noche .noche-tema button[aria-pressed="true"] { background:rgba(255,255,255,.92); color:#15171A; }


/* ═══ EL CARNET DEL CLUB (13/09/2026 · 15/09, 3.ª vuelta) ═════════════════
   Un recuerdo del escaparate (.es-car) y una sala (.nv-car). La tarjeta,
   horizontal y en proporción de tarjeta (1,586) también en el móvil, con muy
   poco texto: la marca, el chip, tu nombre, tu número y, abajo a la derecha,
   el NIVEL - donde las tarjetas ponen el suyo -. Cada plan, su material:
   club = grafito mate (la luz apagada) · más = el metal claro de la casa con
   la linterna · clases = el mismo metal con la luz siempre puesta y un
   brillo que la recorre. Lo que incluye, fuera: filas con icono (.inc).
   Ninguna caja con overflow:hidden alrededor de un texto con sombra. */
.noche .noche-carnet { display:none !important; }   /* el botón de la esquina: ahora es un recuerdo */
.noche-luz[data-luz="car"] { background:radial-gradient(52% 62% at 50% 50%, rgba(236,236,240,.1), rgba(236,236,240,0) 70%); }
.nv-car.on { transition:opacity .75s ease .34s, visibility 0s; }

/* ── la tarjeta ── */
.cr-carta { position:relative; width:780px; height:492px; border-radius:34px; overflow:hidden; color:#fff; font-family:var(--dc-font); text-align:left;
  background:linear-gradient(165deg, #E7ECEF 0%, #AAB7C6 60%, #8B9AB3 100%);
  box-shadow:0 44px 90px rgba(0,0,0,.5), 0 4px 50px #0000007F, inset 0 1px 0 rgba(255,255,255,.55); }
.cr-luz { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 120% at var(--gx, 30%) -10%, rgba(255,255,255,.42), rgba(255,255,255,0) 60%); }
.cr-brillo { position:absolute; top:-40%; bottom:-40%; left:-60%; width:45%; pointer-events:none; opacity:0; transform:translateX(0) skewX(-14deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); }
@keyframes crBrillo { 0% { opacity:0; transform:translateX(0) skewX(-14deg); } 15% { opacity:1; } 100% { opacity:0; transform:translateX(430%) skewX(-14deg); } }
.cr-dentro { position:absolute; inset:0; padding:40px 46px 36px; display:grid; grid-template-rows:auto 1fr auto; }
.cr-arriba { display:flex; justify-content:space-between; align-items:center; }
.cr-marca { font-size:50px; line-height:1; white-space:nowrap; text-shadow:0 12px 26px rgba(20,30,45,.45); }
.cr-marca .marca-club, .crp-marca .marca-club { font-size:.42em; margin-left:.12em; }
.cr-chip { width:76px; height:76px; border-radius:19px; box-shadow:0 12px 28px rgba(20,30,45,.32); }
.cr-quien { align-self:end; }
.cr-nombre { font-size:88px; line-height:1.02; letter-spacing:-.01em; white-space:nowrap; text-shadow:0 14px 26px rgba(20,30,45,.55); }
.cr-nombre.largo { font-size:60px; }
.cr-num { margin-top:12px; font-size:26px; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 8px 18px rgba(20,30,45,.5); }
.cr-desde { margin-left:14px; font-size:19px; opacity:.9; }
.cr-abajo { margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.cr-nivel::after { content:"·"; margin:0 .42em; opacity:.8; }
.cr-estado { font-size:22px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
/* EL PLAN, en la esquina: en minúsculas y grande (15/09, 4.ª: Rolando).
   «más» es METAL PULIDO: la letra lleva un degradado de plata con un reflejo
   que se desplaza muy despacio, como la luz sobre un metal. */
.cr-tier { position:relative; display:flex; flex-direction:column; align-items:flex-end; line-height:.78; white-space:nowrap; }
.cr-tier-t { font-size:100px; letter-spacing:-.01em; text-shadow:0 12px 26px rgba(20,30,45,.45); }
.cr-tier-mini { font-size:17px; letter-spacing:.04em; margin-bottom:8px; opacity:.9; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.m-mas .cr-tier-t, .m-clases .cr-tier-t, .m-solo .cr-tier-t {
  background:linear-gradient(100deg, #7C8899 0%, #F4F7FA 20%, #A6B1C0 38%, #FFFFFF 50%, #9AA6B6 64%, #EEF2F6 82%, #7C8899 100%);
  background-size:260% 100%; background-position:0% 0; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 8px 12px rgba(20,30,45,.4)); animation:crPulido 9s ease-in-out infinite; }
@keyframes crPulido { 0%, 100% { background-position:0% 0; } 50% { background-position:100% 0; } }

/* LOS TRES MATERIALES (5.ª: Rolando quiere el brillo de antes - «el
   degradado que tenemos en toda la plataforma se ve muy especial»): club =
   grafito mate · más = EL degradado de la plataforma (--dc-bg) · clases = el
   mismo degradado un escalón más claro, con un reflejo quieto en diagonal.
   La tarjeta, quieta: nada que se mueva por ella salvo el reflejo de «más». */
/* 29/09 - vuelve la NEGRA del club (el grafito de antes del 28/09): lo gratis. */
.cr-carta.m-club { background:linear-gradient(165deg, #5F6368 0%, #414449 55%, #2B2D31 100%);
  box-shadow:0 44px 90px rgba(0,0,0,.55), 0 4px 50px #0000007F, inset 0 1px 0 rgba(255,255,255,.12); }
/* 28/09 noche - «MÁS»: el metal claro (29/09: el del club vuelve a ser la negra); lo que la distingue
   es la palabra «más» en el metal pulido de la casa (.m-mas .cr-tier-t), el
   que sólo lleva «más». (Se probó una de titanio cepillado: a Rolando no le
   gustó.) */
.cr-carta.m-mas { background:linear-gradient(100deg, #c3c9cd 0%, #a5b0bd 45%, #7f8ea6 100%);
  box-shadow:0 44px 90px rgba(0,0,0,.5), 0 4px 50px #0000007F, inset 0 1px 0 rgba(255,255,255,.45); }
/* 30/09 - «SOLO»: el mismo metal claro que «más» (lo de pago es metal; lo
   gratis, la negra); «solo» en la letra de la tarjeta, al tamaño de «más». */
.cr-carta.m-solo { background:linear-gradient(100deg, #c3c9cd 0%, #a5b0bd 45%, #7f8ea6 100%);
  box-shadow:0 44px 90px rgba(0,0,0,.5), 0 4px 50px #0000007F, inset 0 1px 0 rgba(255,255,255,.45); }
.cr-carta.m-solo .cr-tier-t { font-size:156px; letter-spacing:-.02em; }
.noche.alto .cr-carta.m-solo .cr-tier-t { font-size:72px; }
.cr-carta.m-clases { background:linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 43%, rgba(255,255,255,0) 56%), linear-gradient(100deg, #d2d8dc 0%, #b1bcc8 45%, #8b99b0 100%);
  box-shadow:0 44px 90px rgba(0,0,0,.5), 0 4px 50px #0000007F, inset 0 1px 0 rgba(255,255,255,.55); }
.c2-resena.m-club { background:linear-gradient(165deg, #5F6368 0%, #414449 55%, #2B2D31 100%); box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
/* «Hablamos club» se leía poco: con los metales más oscuros y su sombra, se lee */
/* la sombra de la marca: sólo la suave de la casa (la segunda, corta, se veía dura) */

/* ── en el escaparate: tu tarjeta, quieta ── */
.es-car { background:transparent; }
.es-car .cr-flota { position:absolute; left:50%; top:50%; width:780px; height:492px; margin:-246px 0 0 -390px; transform:scale(.8); }

/* ── lo que incluye: filas con icono (como Apple), no viñetas ── */
.inc { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; font-family:var(--dc-font); }
.inc li { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:16px; align-items:center; }
.inc-ico { grid-row:1 / 3; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 30px rgba(20,30,45,.45); }
.inc-ico svg { width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.inc-t { font-size:22px; line-height:1.15; align-self:end; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.inc-s { font-size:16px; line-height:1.3; opacity:.66; align-self:start; }
/* en fila (la sala del carnet, en el ordenador): el icono arriba */
.inc-fila { flex-direction:row; justify-content:center; align-items:flex-start; gap:28px; }
.inc-fila li { width:220px; grid-template-columns:1fr; grid-template-rows:auto; justify-items:center; text-align:center; row-gap:6px; }
.inc-fila .inc-ico { grid-row:auto; margin-bottom:8px; width:52px; height:52px; border-radius:16px; }
.inc-fila .inc-ico svg { width:26px; height:26px; }
/* dentro de las tarjetas de los planes */
.inc-chica { gap:11px; }
.inc-chica li { column-gap:12px; }
.inc-chica .inc-ico { width:32px; height:32px; border-radius:10px; box-shadow:0 6px 16px rgba(20,30,45,.35); }
.inc-chica .inc-ico svg { width:18px; height:18px; }
.inc-chica .inc-t { font-size:17px; }
.inc-chica .inc-s { font-size:13px; }
/* en dos columnas (las clases con Rolando) */
.inc-dos { display:grid; grid-template-columns:1fr 1fr; gap:22px 34px; }

/* ── la sala ── */
.cr { position:absolute; inset:0; }
.cr-escena { position:absolute; inset:0; transition:filter .7s var(--dc-ease), opacity .7s ease, transform .9s var(--dc-ease); }
.cr-pos { position:absolute; left:385px; top:138px; width:780px; height:492px; perspective:1600px; transform:scale(.86); transform-origin:0 0; }
.cr-entra { width:100%; height:100%; opacity:0; transform:translateY(40px); }
.nv-car.on .cr-entra { animation:crEntra 1.1s var(--dc-ease) .12s both; }
@keyframes crEntra { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }
.cr-lo { position:absolute; left:0; right:0; top:612px; opacity:0; transform:translateY(16px);
  transition:opacity var(--dc-t-lento) var(--dc-ease) .55s, transform var(--dc-t-viaje) var(--dc-ease) .55s; }
/* «оплачено до …»: un dato, no un cartel. Texto y nada más (14/09: en lo
   oscuro, la casa no pone cápsulas claras). */
.cr-hasta { font-size:17px; opacity:.52; letter-spacing:.01em; margin-bottom:6px; }
.noche.alto .cr-hasta { font-size:15px; }
.cr-acciones { position:absolute; left:0; right:0; top:806px; display:flex; justify-content:center; align-items:baseline; gap:52px;
  opacity:0; transform:translateY(16px); transition:opacity var(--dc-t-lento) var(--dc-ease) .75s, transform var(--dc-t-viaje) var(--dc-ease) .75s; }
.nv-car.on .cr-lo, .nv-car.on .cr-acciones { opacity:1; transform:none; }
.noche .cr-accion { font-size:52px; line-height:1; text-transform:lowercase; text-shadow:var(--n-brillo, 0 0 22px rgba(242,242,244,.45)); transform-origin:center; transition:transform var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { .noche .cr-accion:hover { transform:scale(1.07); } }
.noche .cr-otra { font-size:28px; opacity:.66; transition:opacity var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { .noche .cr-otra:hover { opacity:1; } }

/* ── los tres planes, encima; lo de detrás se difumina (un momento quieto) ──
   Cada columna: su imagen (la tarjeta del plan, o la clase en vivo), y
   debajo nombre, precio y lo que incluye. */
.cr.con-planes .cr-escena { filter:blur(14px); opacity:.45; transform:scale(.96); pointer-events:none; }
.cr-planes { position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-start; gap:40px; padding-top:116px; box-sizing:border-box; pointer-events:none; }
.cr.con-planes .cr-planes { pointer-events:auto; }
.crp { width:382px; display:flex; flex-direction:column; color:#fff; font-family:var(--dc-font); opacity:0; transform:translateY(60px);
  transition:opacity .6s ease, transform .9s var(--dc-ease); }
.cr.con-planes .crp { opacity:1; transform:none; }
.cr.con-planes .crp:nth-child(2) { transition-delay:.08s; }
.cr.con-planes .crp:nth-child(3) { transition-delay:.16s; }
/* 16/09 (noche): la zona de arriba es igual en las tres columnas -la tarjeta
   de «más» incluida ya no empuja el nombre de las clases 126 px hacia abajo-,
   así los tres nombres caen en la misma línea y «подробнее» deja de salirse
   por el borde de abajo. */
.crp-vis { position:relative; height:352px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.crp-carta { width:382px; height:241px; position:relative; }
.crp-escala { position:absolute; left:0; top:0; width:780px; height:492px; transform:scale(.4897); transform-origin:0 0; }
.crp-escala.cv-escala { width:920px; height:580px; transform:scale(.4152); }
/* la tarjeta de «más», incluida: en la esquina de la clase en vivo, asomando por abajo */
.crp-incl { position:absolute; left:50%; margin-left:-86px; top:247px; width:172px; height:108px; filter:drop-shadow(0 16px 26px rgba(0,0,0,.45)); }
.crp-incl-escala { width:780px; height:492px; transform:scale(.2205); transform-origin:0 0; }

.noche.alto .crp-vis { height:auto; }
.noche.alto .crp-incl { position:relative; left:auto; top:auto; margin:14px auto 0; width:140px; height:88px; }
.noche.alto .crp-incl-escala { width:350px; height:221px; transform:scale(.4); }
.noche.alto .crp-clases .crp-n { margin-top:20px; }
.crp-n { margin-top:26px; font-size:40px; line-height:1.05; text-shadow:0 0 22px rgba(242,242,244,.4), 0 0 60px rgba(242,242,244,.14); }
.crp-p { margin-top:6px; font-size:20px; opacity:.75; }
.crp.tuyo .crp-p { opacity:1; text-shadow:0 0 16px rgba(255,255,255,.5); }
.crp .inc { margin-top:22px; }
.crp-pie { margin-top:22px; min-height:40px; }
.crp .cr-accion { font-size:36px; }

/* ── móvil: la tarjeta sigue HORIZONTAL (vertical no parecía una tarjeta),
   pintada a su tamaño y con su letra, no encogida ── */
.noche.alto .cr-carta { width:350px; height:221px; border-radius:18px; }
.noche.alto .cr-dentro { padding:16px 18px 14px; }
.noche.alto .cr-marca { font-size:22px; }
.noche.alto .cr-chip { width:38px; height:38px; border-radius:10px; }
.noche.alto .cr-nombre { font-size:40px; }
.noche.alto .cr-nombre.largo { font-size:28px; }
.noche.alto .cr-num { margin-top:5px; font-size:12px; }
.noche.alto .cr-desde { font-size:10px; margin-left:8px; }
.noche.alto .cr-abajo { margin-top:9px; }
.noche.alto .cr-estado { font-size:11px; }
.noche.alto .cr-tier-t { font-size:46px; }
/* 18/09 - Rolando: «el más aún más gigante dentro de la tarjeta, para que
   se note e imponga». Sólo en la tarjeta (no en la palabra suelta). */
.cr-carta.m-mas .cr-tier-t, .cr-carta.m-clases .cr-tier-t { font-size:156px; letter-spacing:-.02em; }
.noche.alto .cr-carta.m-mas .cr-tier-t, .noche.alto .cr-carta.m-clases .cr-tier-t { font-size:72px; }
.noche.alto .cr-tier-mini { font-size:9px; margin-bottom:4px; }
.noche.alto .es-car .cr-flota { width:350px; height:221px; margin:-110px 0 0 -175px; top:45%; transform:scale(.94); }
.noche.alto .cr-pos { left:20px; top:104px; width:350px; height:221px; transform:none; }
.noche.alto .cr-lo { top:360px; left:24px; right:24px; }
.noche.alto .inc-fila { flex-direction:column; align-items:stretch; gap:14px; }
.noche.alto .inc-fila li { width:auto; grid-template-columns:auto 1fr; grid-template-rows:auto auto; justify-items:start; text-align:left; row-gap:0; }
.noche.alto .inc-fila .inc-ico { grid-row:1 / 3; margin:0; }
.noche.alto .inc-ico, .noche.alto .inc-fila .inc-ico { width:40px; height:40px; border-radius:12px; }
.noche.alto .inc-ico svg { width:21px; height:21px; }
.noche.alto .inc-t { font-size:17px; }
.noche.alto .inc-s { font-size:13px; }
.noche.alto .cr-acciones { top:620px; flex-direction:column; align-items:center; gap:14px; }
.noche.alto .cr-accion { font-size:34px; }
.noche.alto .cr-otra { font-size:19px; }
.noche.alto[data-vista="car"] .noche-titulos, .noche.alto[data-vista="car"] .noche-cuaderno { opacity:0 !important; pointer-events:none; }
.noche.alto .cr-planes { flex-direction:column; justify-content:flex-start; align-items:center; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:96px 20px 40px; gap:34px; box-sizing:border-box; }
.noche.alto .cr-planes::-webkit-scrollbar { display:none; }
.noche.alto .crp { width:350px; flex:none; }
.noche.alto .crp-carta { width:350px; height:221px; }
.noche.alto .crp-escala { width:350px; height:221px; transform:none; }
.noche.alto .crp-escala.cv-escala { width:920px; height:580px; transform:scale(.3804); }
.noche.alto .crp-n { margin-top:16px; font-size:30px; }
.noche.alto .crp-p { font-size:15px; }
.noche.alto .crp .inc { margin-top:14px; }
.noche.alto .crp-pie { margin-top:14px; min-height:0; }
.noche.alto .crp .cr-accion { font-size:26px; }
@media (prefers-reduced-motion: reduce) { .nv-car.on .cr-entra, .cr-tier-t { animation:none !important; opacity:1; transform:none; } }



/* ═══ LAS CLASES, DENTRO DEL CLUB (13/09/2026 noche) ════════════════════ */
.nv-cla.on { transition:opacity .75s ease .34s, visibility 0s; }
.noche-luz[data-luz="cla"] { background:radial-gradient(54% 64% at 42% 50%, rgba(236,232,224,.1), rgba(236,232,224,0) 70%); }
/* en el escaparate: la foto y «занятия с Роландо» */
.es-cla { background:linear-gradient(135deg, #3A3C40 0%, #1C1D20 55%, #0E0E10 100%); }
.noche.grafito .es-cla { background:linear-gradient(135deg, #585B5B 0%, #0A0A0C 100%); }
.noche.casa .es-cla { background:var(--dc-bg); }
.n-cla-foto { position:absolute; left:396px; top:214px; width:320px; height:320px; border-radius:30px; background-size:cover; background-position:center; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.n-cla-t { position:absolute; left:760px; top:290px; width:420px; font-size:70px; line-height:1.02; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.n-cla-sub { position:absolute; left:762px; top:462px; font-size:26px; opacity:.78; }
.noche.alto .n-cla-foto { left:calc(50% - 110px); top:calc(50% - 230px); width:220px; height:220px; border-radius:22px; }
.noche.alto .n-cla-t { left:40px; right:40px; width:auto; top:calc(50% + 20px); font-size:34px; text-align:center; }
.noche.alto .n-cla-sub { left:40px; right:40px; top:calc(50% + 70px); font-size:17px; text-align:center; }

/* por dentro */
.cl { position:absolute; inset:0; }
.cl-izq { position:absolute; left:60px; top:170px; width:420px; opacity:0; transform:translateX(-30px); transition:opacity var(--dc-t-lento) var(--dc-ease) .2s, transform var(--dc-t-viaje) var(--dc-ease) .2s; }
.nv-cla.on .cl-izq, .nv-cla.on .cl-der { opacity:1; transform:none; }
.cl-foto { width:380px; height:380px; border-radius:30px; background-size:cover; background-position:center; box-shadow:0 34px 80px rgba(0,0,0,.45); }
.cl-quien { margin-top:26px; }
.cl-nombre { font-size:48px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.cl-bio { margin-top:12px; font-size:21px; line-height:1.35; opacity:.75; max-width:380px; }
.cl-der { position:absolute; left:560px; right:60px; top:160px; bottom:40px; display:flex; flex-direction:column; opacity:0; transform:translateX(30px); transition:opacity var(--dc-t-lento) var(--dc-ease) .3s, transform var(--dc-t-viaje) var(--dc-ease) .3s; }
.cl-t { font-size:60px; line-height:1.02; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.cl-sub { margin-top:16px; font-size:23px; line-height:1.35; opacity:.8; max-width:760px; }
/* el ejercicio: el hueco y las opciones son el metal de los ejercicios de la plataforma */
.cl-ej { margin-top:40px; }
.cl-ej-t { font-size:20px; opacity:.55; margin-bottom:14px; }
.cl-frase { font-size:44px; line-height:1.2; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* 14/09: el hueco vacío es el MISMO metal que las opciones (la regla de los
   ejercicios de la plataforma: un solo material, sin estados; que esté vacío
   ya lo dice el hueco vacío). Radio de la casa: 28u. */
.cl-hueco { display:inline-flex; align-items:center; justify-content:center; min-width:150px; height:58px; padding:0 22px; border-radius:calc(28 * var(--nu)); box-sizing:border-box;
  background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; font-size:34px; color:#fff; transition:background var(--dc-t-lento) var(--dc-ease), box-shadow var(--dc-t-lento) var(--dc-ease); }
.cl-hueco.lleno { background:linear-gradient(90deg, #A9D8BF, #5E9E82); box-shadow:0 10px 40px rgba(20,45,35,.45); text-shadow:0 2px 8px rgba(0,0,0,.35); animation:clCae .6s var(--dc-ease); }
@keyframes clCae { from { transform:translateY(-16px) scale(.9); opacity:.4; } }
.cl-ops { margin-top:18px; display:flex; gap:16px; }
.noche .cl-ops button { font-size:28px; padding:12px 26px; border-radius:calc(28 * var(--nu)); background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .22s ease, opacity .4s ease; }
@media (any-hover: hover) { .noche .cl-ops button:hover { transform:translateY(-3px); } }
.noche .cl-ops button.mal { background:linear-gradient(90deg, #DDA9AF, #A66E79); animation:clTiembla .42s ease; }
@keyframes clTiembla { 20% { transform:translateX(-8px); } 45% { transform:translateX(7px); } 70% { transform:translateX(-4px); } }
.noche .cl-ops button.fuera { opacity:0; pointer-events:none; }
.noche .cl-ops button.bien { opacity:0; }
.cl-ops { max-height:120px; transition:max-height var(--dc-t-lento) var(--dc-ease), margin var(--dc-t-lento) var(--dc-ease); }
.cl-ops.plegada { max-height:0; margin-top:0; overflow:hidden; }
.cl-exp { margin-top:16px; min-height:62px; font-size:21px; line-height:1.4; max-width:740px; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.cl-exp.on { opacity:.9; transform:none; }
.cl-asi { display:block; margin-top:8px; opacity:.7; animation:npEntra .7s var(--dc-ease) both; }
/* las reseñas: una cada vez, se funden */
.cl-resenas { position:relative; margin-top:26px; min-height:128px; cursor:pointer; }
.cl-resena { position:absolute; inset:0; margin:0; opacity:0; transform:translateY(10px); transition:opacity .8s ease, transform .8s ease; }
.cl-resena.on { opacity:1; transform:none; }
/* en la letra de la casa, no en la cursiva de revista (en una web de venta, eso es lo genérico) */
.cl-resena blockquote { margin:0; font-size:27px; line-height:1.3; max-width:760px; }
.cl-resena blockquote::before { content:"«"; } .cl-resena blockquote::after { content:"»"; }
.cl-resena figcaption { margin-top:10px; font-size:17px; opacity:.55; }
.cl-pie { margin-top:auto; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.cl-precio { font-size:24px; opacity:.85; }
/* la acción es texto grande (.ent-accion de la puerta), con el brillo del club */
.noche .cl-cta { font-size:calc(60 * var(--nu)); line-height:1; padding:calc(10 * var(--nu)) 0; text-transform:lowercase; text-shadow:var(--n-brillo); transform-origin:left center;
  transition:transform var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { .noche .cl-cta:hover { transform:scale(1.09); } }
.noche .cl-cta:active { transform:scale(.985); transition:transform var(--dc-t-press) var(--dc-ease); }

/* móvil: todo en una columna que se desliza, y el precio con la acción
   siempre a la vista, abajo, sobre una penumbra (en esta sala «карта клуба ·
   тетрадь» se apartan: aquí lo que importa es esto) */
.noche.alto .cl { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:96px 24px 0; box-sizing:border-box; }
.noche.alto .cl-der { min-height:0; }
.noche.alto .cl-pie { position:sticky; bottom:0; z-index:2; margin:18px -24px 0; padding:56px 24px 26px; display:block;
  background:linear-gradient(0deg, rgba(10,10,12,.97) 0%, rgba(10,10,12,.9) 55%, rgba(10,10,12,0) 100%); }
.noche.alto .cl-pie .cl-cta { display:block; margin-top:6px; }
.noche.alto[data-vista="cla"] .noche-carnet, .noche.alto[data-vista="cla"] .noche-cuaderno { opacity:0 !important; pointer-events:none; }
.noche.alto .cl::-webkit-scrollbar { display:none; }
.noche.alto .cl-izq, .noche.alto .cl-der { position:static; width:auto; }
.noche.alto .cl-izq { display:flex; align-items:center; gap:16px; }
.noche.alto .cl-foto { width:96px; height:96px; border-radius:18px; flex:none; }
.noche.alto .cl-quien { margin-top:0; }
.noche.alto .cl-nombre { font-size:28px; }
.noche.alto .cl-bio { font-size:14px; margin-top:6px; }
.noche.alto .cl-der { margin-top:26px; }
.noche.alto .cl-t { font-size:32px; }
.noche.alto .cl-sub { font-size:16px; }
.noche.alto .cl-ej { margin-top:24px; }
.noche.alto .cl-ej-t { font-size:15px; }
.noche.alto .cl-frase { font-size:28px; gap:10px; }
.noche.alto .cl-hueco { min-width:104px; height:44px; font-size:24px; border-radius:16px; }
.noche.alto .cl-ops button { font-size:20px; padding:10px 20px; border-radius:16px; }
.noche.alto .cl-exp { font-size:15px; min-height:44px; }
.noche.alto .cl-resenas { min-height:150px; margin-top:18px; }
.noche.alto .cl-resena blockquote { font-size:18px; }
.noche.alto .cl-resena figcaption { font-size:13px; }

.noche.alto .cl-precio { font-size:16px; }
.noche.alto .cl-cta { font-size:calc(50 * var(--nu)); }


/* ═══ EL CLUB PARA QUIEN AÚN NO TIENE CUENTA (13/09/2026 noche) ═════════
   14/09: la puerta del club es la PUERTA DE LA PLATAFORMA en oscuro, con sus
   mismas piezas y medidas (--dc-fs-140 · 60 · 50, --dc-sp-*, --dc-ease):
   las opciones en texto (crear carta · entrar, como «presente · pasado»), los
   campos invisibles y la acción en texto. Lo único que cambia es la luz: en
   la sala oscura la letra no lleva sombra hacia abajo sino el brillo del
   club, y no hay cápsula clara (Rolando: en lo oscuro no va). «Hablamos
   club», en el centro (Rolando: «me encanta»).
   El difuminado de detrás es de un momento quieto (todo se pausa). */
html.visita #screen-login { visibility:hidden !important; }
#muro { position:fixed; inset:0; z-index:9600; overflow-y:auto; overscroll-behavior:contain; display:flex; justify-content:center; align-items:center;
  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; }
#muro.on { opacity:1; visibility:visible; transition:opacity var(--dc-t-entrada) var(--dc-ease), visibility 0s; }
.mu-velo { position:fixed; inset:0; background:radial-gradient(70% 70% at 50% 45%, rgba(10,10,12,.28), rgba(10,10,12,.74)); }
html.muro-abierto .noche-escenario, html.muro-abierto #folio-ov { filter:blur(18px) saturate(.9); transition:filter var(--dc-t-entrada) var(--dc-ease); }
html.muro-abierto .noche *, html.muro-abierto #folio-ov * { animation-play-state:paused !important; }
.mu-caja { position:relative; width:100%; max-width:calc(980 * 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); }
#muro.on .mu-caja { transform:none; }
/* la marca, a la escala de la puerta, con el brillo del club */
.mu-marca { font-size:var(--dc-fs-140); line-height:1; letter-spacing:var(--dc-tracking); white-space:nowrap;
  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); }
.mu-motivo { 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); }
/* crear carta · entrar: las OPCIONES de la plataforma (.ent-op), la elegida encendida */
#muro .mu-tabs { display:flex; justify-content:center; align-items:baseline; gap:var(--dc-sp-60); padding:var(--dc-sp-48) 0 var(--dc-sp-20); }
#muro .mu-tabs .ent-op { font-size:var(--dc-fs-60); transform-origin:center; }
#muro .mu-tabs .ent-op.active { 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); }
/* los campos: los de la puerta (.ent-campo, invisibles), centrados bajo la marca */
.mu-form { width:100%; display:flex; flex-direction:column; align-items:center; }
#muro .ent-campo { max-width:calc(620 * var(--dc-u)); text-align:center; }
#muro .mu-nombre.persiana { max-height:calc(140 * var(--dc-u)); }
#muro .ent-error { text-align:center; max-width:calc(760 * var(--dc-u)); }
/* la acción: texto grande, con el brillo del club en vez de la sombra */
#muro .ent-accion { align-self:center; transform-origin:center; 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);
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-salida) var(--dc-ease); padding-left:var(--dc-sp-24); }
#muro .ent-accion.cruza { opacity:0; }
#muro .ent-pie { text-align:center; }
@media (max-width:700px) {
  .mu-marca { font-size:var(--dc-fs-80); }
  #muro .mu-tabs { gap:var(--dc-sp-40); }
  #muro .mu-tabs .ent-op { font-size:var(--dc-fs-40); }
  /* en el móvil la puerta va arriba: el teclado sube desde abajo y no la tapa */
  #muro { align-items:flex-start; }
  .mu-caja { padding-top:12vh; }
}


/* ══════════════════════════════════════════════════════════════════
   LECCIÓN SIN PROFESOR (15/09/2026). Aquí sólo hay COLOCACIÓN: los
   ejercicios se ven como en la clase porque #lec-ov está en el :is() de
   sus reglas (igual que #ej-ed); la pizarra es #hc-ov; la marca es la
   .crear-marca de las demás capas; y la barra es la .ig-barra de la
   galería. Nada de material nuevo.
   ══════════════════════════════════════════════════════════════════ */
#lec-ov { position:fixed; inset:0; z-index:1200; background:var(--dc-bg); opacity:0;
  transition:opacity var(--dc-t-entrada) var(--dc-ease); }
#lec-ov.show { opacity:1; }
#lec-ov.hide { opacity:0; transition-duration:var(--dc-t-salida); }

/* Ordenador: el bloque en el centro y la voz a su derecha. */
/* 16/09/2026: la escena es el MARCO (no se desliza nunca) y .lec-dentro es lo
   que hay, que se encoge con --lec-k hasta caber. Ver _lecEncajar(). */
#lec-ov .lec-escena { position:absolute; inset:0; overflow:hidden; overscroll-behavior:contain;
  display:flex; align-items:center; justify-content:center;
  padding:calc(150 * var(--dc-u)) calc(76 * var(--dc-u)) calc(200 * var(--dc-u)); box-sizing:border-box; }
#lec-ov .lec-dentro { width:100%; transform:scale(var(--lec-k, 1)); transform-origin:50% 50%;
  transition:transform var(--dc-t-lento) var(--dc-ease);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0, calc(1000 * var(--dc-u))) minmax(0,1fr);
  grid-template-areas:". ej voz"; column-gap:calc(90 * var(--dc-u)); align-items:center; }
#lec-ov .lec-ej { grid-area:ej; min-width:0; max-width:100%; position:relative; }
/* 08/10: una respuesta larga ya no ensancha el ejercicio (se salía por los lados): el hueco llega al borde y corre por dentro */
#lec-ov .wa-hueco { max-width:100%; box-sizing:border-box; }
#lec-ov .wa-hueco .wa-input { max-width:100%; min-width:0; flex-shrink:1; }
#lec-ov .lec-voz { grid-area:voz; align-self:center; max-width:calc(560 * var(--dc-u));
  font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-40); line-height:1.25;
  letter-spacing:var(--dc-tracking); color:var(--dc-ink); text-shadow:var(--dc-shadow-text); }
#lec-ov .lec-voz p { margin:0; text-wrap:balance; }
/* 16/09: las dos píldoras del emparejar salían a alturas distintas (4 px) porque
   cada foto redondea su alto de otra forma. La zona se pega al fondo de su
   tarjeta y quedan a la misma altura siempre. */
#lec-ov .match-card { display:flex; flex-direction:column; }
#lec-ov .match-card .match-drop-zone { margin-top:auto; }
#lec-ov .lec-voz .vieja { font-size:.62em; opacity:.5; margin-bottom:.7em; }
#lec-ov .lec-voz .nueva { animation:lecVoz var(--dc-t-entrada) var(--dc-ease) both; }
@keyframes lecVoz { from { opacity:0; transform:translateY(.25em); } to { opacity:1; transform:none; } }

/* Un ejercicio a la vez. Los demás están pintados (así se restauran como en
   cualquier clase) pero fuera de la vista, sin ocupar sitio. */
#lec-ov .lec-fuera { position:absolute; left:0; right:0; top:0; visibility:hidden; pointer-events:none; }
/* La consigna la dice la voz; la línea que separa bloques aquí no separa nada. */
#lec-ov .sv-instruction { display:none; }
#lec-ov .ex-wysiwyg { margin:0; }
#lec-ov .ex-wysiwyg::after { display:none; }

/* La marca, más grande que en las capas de la plataforma: aquí es lo único
   que queda arriba (Rolando, 15/09). La misma en la pizarra y en los
   ejercicios, para que no salte al pasar de una a otra. Y por debajo de la
   isla del iPhone cuando la página ocupa la pantalla entera. */
#lec-ov .crear-marca, #hc-ov.hc-guion #hc-marca {
  font-size:44px; top:calc(22px + env(safe-area-inset-top, 0px)); left:calc(30px + env(safe-area-inset-left, 0px)); }

/* EL TECLADO (iPhone). En cuanto el alumno toca un sitio donde escribir, y
   ANTES de que suba el teclado, la lección se coloca como va a quedar: el
   ejercicio arriba y la barra fuera. Así el teclado sube sobre algo que ya
   está quieto, en vez de empujarlo y que luego se recoloque. */
#lec-ov.con-teclado .lec-dentro { justify-content:flex-start; align-content:start; }
#lec-ov.con-teclado .lec-voz .vieja { display:none; }
#lec-nav.con-teclado { opacity:0; pointer-events:none; }
#lec-nav.con-teclado > * { pointer-events:none; }

/* «anterior · siguiente» con la barra de la galería entre las dos. Va
   aparte de #lec-ov porque tiene que quedar ENCIMA de la pizarra. */
#lec-nav { position:fixed; left:0; right:0; bottom:0; z-index:1260;
  display:flex; align-items:center; justify-content:center; gap:calc(56 * var(--dc-u));
  padding:0 20px calc(30px + env(safe-area-inset-bottom, 0px)); pointer-events:none;
  opacity:0; transition:opacity var(--dc-t-entrada) var(--dc-ease); }
#lec-nav.show { opacity:1; }
#lec-nav.hide { opacity:0; transition-duration:var(--dc-t-salida); }
#lec-nav > * { pointer-events:auto; }
#lec-nav .ex-accion { font-size:var(--dc-fs-34); opacity:.8; }
#lec-nav .ex-accion:disabled { opacity:.14; }
#lec-nav .ig-barra { width:calc(360 * var(--dc-u)); flex:0 1 auto; }

/* Móvil: una cosa por pantalla, la voz arriba. La unidad de la casa se
   calcula sobre el ancho del teléfono, como --nu en el club: con el suelo
   de 0,58 px de la plataforma los ejercicios salían diminutos. Se
   redeclaran las medidas que cuelgan de ella. */
@media (max-width: 899px) {
  #lec-ov, #lec-nav {
    --dc-u: calc(100vw / 560);
    --dc-fs-68: calc(68 * var(--dc-u)); --dc-fs-56: calc(56 * var(--dc-u)); --dc-fs-52: calc(52 * var(--dc-u));
    --dc-fs-50: calc(50 * var(--dc-u)); --dc-fs-40: calc(40 * var(--dc-u)); --dc-fs-38: calc(38 * var(--dc-u));
    --dc-fs-34: calc(34 * var(--dc-u)); --dc-fs-32: calc(32 * var(--dc-u)); --dc-fs-30: calc(30 * var(--dc-u));
    --dc-fs-22: calc(22 * var(--dc-u)); --dc-fs-20: calc(20 * var(--dc-u)); --dc-fs-18: calc(18 * var(--dc-u));
    --dc-sp-6: calc(6 * var(--dc-u)); --dc-sp-8: calc(8 * var(--dc-u)); --dc-sp-10: calc(10 * var(--dc-u));
    --dc-sp-14: calc(14 * var(--dc-u)); --dc-sp-16: calc(16 * var(--dc-u)); --dc-sp-18: calc(18 * var(--dc-u));
    --dc-sp-20: calc(20 * var(--dc-u)); --dc-sp-24: calc(24 * var(--dc-u)); --dc-sp-34: calc(34 * var(--dc-u));
    --dc-sp-36: calc(36 * var(--dc-u)); --dc-sp-40: calc(40 * var(--dc-u)); --dc-sp-48: calc(48 * var(--dc-u));
    --dc-sp-60: calc(60 * var(--dc-u)); --dc-sp-64: calc(64 * var(--dc-u)); --dc-sp-72: calc(72 * var(--dc-u));
    --dc-sp-76: calc(76 * var(--dc-u));
    --dc-r-card: calc(28 * var(--dc-u)); --dc-r-panel: calc(18 * var(--dc-u)); --dc-r-nav: calc(34.14 * var(--dc-u));
  }
  /* 16/09/2026: LA VOZ NO EMPUJA EL EJERCICIO. Era una columna centrada, así
     que al contestar la voz (de 70 a 103 px de alto) TODO subía 15 px justo
     cuando acabas de tocar algo - y eso es lo que no se sentía como una app.
     Ahora son dos bandas: la voz tiene su sitio reservado y crece hacia
     arriba dentro de él; el ejercicio se queda quieto pase lo que pase.
     (En el ordenador ya no pasaba: la voz va en su propia columna.) */
  /* 16/09: el ejercicio se ANCLA arriba, debajo de la voz. Centrado, cualquier
     cosa que creciera (la frase del tutor, el botón que pasa a «completado»)
     repartía el crecimiento y movía TODO hacia arriba justo al tocar. Anclado,
     lo que crece empuja hacia abajo y lo que estás tocando no se mueve. */
  #lec-ov .lec-escena { display:flex; align-items:flex-start; justify-content:center;
    padding:92px 20px calc(120px + env(safe-area-inset-bottom, 0px)); }
  #lec-ov .lec-dentro { display:flex; flex-direction:column; justify-content:flex-start;
    gap:calc(56 * var(--dc-u)); transform-origin:50% 0; }
  /* La voz tiene un ALTO FIJO (en em, así que crece con la letra) y el texto
     se apoya en su base: cuando el tutor contesta, la frase nueva crece hacia
     ARRIBA dentro de ese sitio y el ejercicio no se mueve ni un píxel. Antes
     todo subía 15-18 px justo al tocar, que es lo que no se sentía como app. */
  #lec-ov .lec-voz { order:-1; max-width:none; height:5.4em; flex:0 0 auto; align-self:stretch;
    display:flex; flex-direction:column; justify-content:flex-end; }
  /* 18/09: el logotipo más grande y presente, como en el teléfono de «más»
     (Rolando: «quizás deberíamos aplicar lo mismo en la clase autodidacta») */
  #lec-ov .crear-marca, #hc-ov.hc-guion #hc-marca { font-size:46px; top:calc(22px + env(safe-area-inset-top, 0px)); left:calc(24px + env(safe-area-inset-left, 0px)); }
  #lec-ov .lec-escena { padding-top:calc(108px + env(safe-area-inset-top, 0px)); }
  #lec-ov.con-teclado .lec-escena { padding-top:calc(70px + env(safe-area-inset-top, 0px)); padding-bottom:24px; gap:calc(36 * var(--dc-u)); }
  #lec-nav { gap:calc(40 * var(--dc-u)); }
  #lec-nav .ig-barra { width:calc(220 * var(--dc-u)); }
}


/* ══ HABLAMOS CLUB MÁS (15/09/2026) ═══════════════════════════════════════
   El recuerdo que antes era «занятия» pasa a ser «más» (el club con práctica
   sin tope y lecciones sin profesor; las clases con Rolando lo incluyen).
   Tres piezas, todas en px del escenario y sólo con transform/opacity:
   · LA LINTERNA: una luz que se enciende suave, deslumbra un instante y se
     queda en brillo tranquilo. Vive detrás de «más» (cada vez que ese
     recuerdo llega al centro) y detrás del «club» del logotipo (en la
     entrada larga, donde antes titubeaba el neón).
   · LAS PANTALLITAS: tres cuadros con el fondo de la plataforma donde pasa
     una clase de verdad: la pizarra que cambia hablar → hablo con el
     rotulador de la pizarra, una palabra que cae en su hueco de metal y se
     pone verde, y una foto que recibe su palabra.
   · EL NOMBRE EN EL CENTRO de cada recuerdo, con la escena detrás un poco
     difuminada y quieta; con el ratón encima, la escena enfoca.
   ════════════════════════════════════════════════════════════════════ */

/* ── la linterna ── */
.mas-luz { position:absolute; left:50%; top:52%; width:3.4em; height:3.4em; margin:-1.7em 0 0 -1.7em; border-radius:50%;
  pointer-events:none; opacity:0; transform:scale(.2); z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,.42) 18%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.03) 58%, rgba(255,255,255,0) 70%); }
@keyframes masLuz {
  0%   { opacity:0;   transform:scale(.2); }
  34%  { opacity:1;   transform:scale(1.22); }
  58%  { opacity:.78; transform:scale(1.02); }
  100% { opacity:.5;  transform:scale(1); }
}
/* el «club» del logotipo: la misma luz en vez del neón */
.noche-marca-t .marca-club { position:relative; }
.noche-marca-t.neon .marca-club { animation:none !important; }
.noche-marca-t .marca-club::before { content:""; position:absolute; left:50%; top:55%; width:4.4em; height:4.4em; margin:-2.2em 0 0 -2.2em; border-radius:50%;
  pointer-events:none; opacity:0; transform:scale(.2); z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,.34) 20%, rgba(255,255,255,.09) 44%, rgba(255,255,255,0) 68%); }
/* 4.ª: la luz de «club», más Apple: se enciende despacio, sin pasarse, y se
   queda en un brillo quieto; la palabra sube a la vez de .8 a 1 */
@keyframes masLuzSuave { 0% { opacity:0; transform:scale(.72); } 60% { opacity:.72; transform:scale(1); } 100% { opacity:.42; transform:scale(1); } }
.noche-marca-t.neon .marca-club::before { animation:masLuzSuave 3.4s cubic-bezier(.25,.1,.25,1) both; }
.noche-marca-t.neon .marca-club { opacity:1; transition:opacity 2.6s cubic-bezier(.25,.1,.25,1); }
.noche-marca-t.encendido .marca-club::before { opacity:.32; transform:scale(1); transition:opacity 1.6s ease; }

/* ── el recuerdo «más» en el escaparate ── */
.es-mas { background:transparent; }
.n-mas-nombre { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; z-index:2; line-height:1; }
.n-mas-hc { display:block; font-size:58px; letter-spacing:.5px; opacity:.9; }
.n-mas-mas { position:relative; display:inline-block; margin-top:6px; font-size:176px; letter-spacing:0; isolation:isolate;
  text-shadow:0 0 22px rgba(242,242,244,.45), 0 0 64px rgba(242,242,244,.16); }
/* se enciende cada vez que el recuerdo llega y se queda quieto en el centro */
.nv-esc:not(.moviendo) .n-rec.centro .n-mas-mas .mas-luz { animation:masLuz 2.6s cubic-bezier(.3,0,.2,1) both; }
.noche.alto .n-mas-nombre { top:46%; }
.noche.alto .n-mas-hc { font-size:26px; }
.noche.alto .n-mas-mas { font-size:88px; }

/* ── las pantallitas ── */
.mas-cuadros { position:absolute; inset:0; pointer-events:none; }
.mas-cuadro { position:absolute; width:340px; height:220px; border-radius:26px; overflow:hidden; color:#fff;
  background:linear-gradient(100deg, #c3c9cd 0%, #a5b0bd 45%, #7f8ea6 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.42), 0 4px 50px #0000007F; font-family:var(--dc-font); }
.mas-cuadro .mc-marca { position:absolute; left:18px; top:14px; font-size:15px; line-height:1; text-shadow:0 8px 16px rgba(20,30,45,.6); }
.mas-cuadro .mc-marca .marca-club { font-size:.42em; margin-left:.12em; }
/* dentro de la ventana del recuerdo (su elipse de bordes deshechos): en las
   esquinas se disolvían */
.es-mas .mas-cuadro { opacity:.9; transform:scale(.86); transform-origin:0 0; }
.es-mas .mc-msg { left:268px; top:150px; }
.es-mas .mc-piz { left:900px; top:130px; }
.es-mas .mc-voz { left:262px; top:440px; }
.es-mas .mc-playa { left:910px; top:450px; }
.noche.alto .es-mas .mas-cuadro { transform:scale(.47); }
.noche.alto .es-mas .mc-msg { left:26px; top:58px; }
.noche.alto .es-mas .mc-piz { left:204px; top:92px; }
.noche.alto .es-mas .mc-voz { left:26px; top:auto; bottom:60px; }
.noche.alto .es-mas .mc-playa { left:204px; top:auto; bottom:96px; }

/* 4 · la pizarra escribiendo: cada palabra entra como el texto de la pizarra
   cuando el profe escribe (el mismo desvanecido con un empujoncito hacia
   arriba, .42 s), una detrás de otra; «Floto» se resalta con el rotulador */
.mc-escribe .mc-e { position:absolute; left:26px; right:20px; top:52px; font-size:32px; line-height:1.28; text-shadow:0 6px 22px rgba(20,30,45,.26); }
.mc-w { display:inline-block; opacity:0; border-radius:.2em; animation:mcW 6s calc(var(--i) * .3s) infinite; }
@keyframes mcW { 0% { opacity:0; transform:translateY(.06em); } 7%, 84% { opacity:1; transform:none; } 92%, 100% { opacity:0; transform:none; } }
.mc-w-hl { background-image:linear-gradient(rgba(139,211,154,.56), rgba(139,211,154,.56)); background-repeat:no-repeat; background-position:left center; background-size:0% 100%;
  animation:mcW 6s calc(var(--i) * .3s) infinite, mcHl 6s calc(var(--i) * .3s) infinite; }
@keyframes mcHl { 0%, 22% { background-size:0% 100%; } 32%, 100% { background-size:100% 100%; } }
.mc-playa .mc-pill span { font-size:18px; }

/* 1 · la pizarra: hablar → hablo, con el rotulador de la pizarra (rosa y verde) */
.mc-piz .mc-t { position:absolute; left:26px; top:66px; font-size:72px; line-height:1; letter-spacing:0; text-shadow:0 6px 22px rgba(20,30,45,.26); }
.mc-piz .mc-n { position:absolute; left:28px; top:152px; font-size:20px; opacity:.75; }
.mc-fin { position:relative; display:inline-block; }
.mc-ar, .mc-o { display:inline-block; border-radius:.2em; background-repeat:no-repeat; background-position:left center; background-size:0% 100%; }
.mc-ar { background-image:linear-gradient(rgba(255,177,204,.56), rgba(255,177,204,.56)); animation:mcAr 6s infinite; }
.mc-o { position:absolute; left:0; top:0; opacity:0; background-image:linear-gradient(rgba(139,211,154,.56), rgba(139,211,154,.56)); animation:mcO 6s infinite; }
@keyframes mcAr { 0%,12% { background-size:0% 100%; opacity:1; } 22%,44% { background-size:100% 100%; opacity:1; } 52%,94% { background-size:100% 100%; opacity:0; } 100% { background-size:0% 100%; opacity:1; } }
@keyframes mcO  { 0%,50% { opacity:0; transform:translateX(-.18em); background-size:0% 100%; } 60% { opacity:1; transform:none; background-size:0% 100%; } 70%,90% { opacity:1; transform:none; background-size:100% 100%; } 96%,100% { opacity:0; background-size:100% 100%; } }

/* 2 · el hueco: la palabra sale del banco, cae en el hueco de metal y se pone verde */
.mc-hueco .mc-frase { position:absolute; left:24px; top:52px; font-size:30px; line-height:44px; text-shadow:0 2px 8px rgba(0,0,0,.35); white-space:nowrap; }
.mc-h { position:relative; display:inline-block; vertical-align:middle; width:112px; height:44px; margin:0 6px; border-radius:22px;
  background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; }
.mc-h::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; background:linear-gradient(90deg, #A9D8BF, #5E9E82);
  box-shadow:0 0 22px rgba(72,205,140,.55), 0 0 60px rgba(72,205,140,.28); animation:mcVerde 6s 1.2s infinite; }
.mc-h-pal { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; font-size:22px; opacity:0; animation:mcCae 6s 1.2s infinite; }
.mc-hueco .mc-banco { position:absolute; left:24px; right:24px; bottom:22px; height:48px; border-radius:22px; display:flex; align-items:center; gap:18px; padding:0 18px;
  background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; font-size:19px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.mc-sale { display:inline-block; animation:mcSale 6s 1.2s infinite; }
@keyframes mcSale { 0%,16% { opacity:1; transform:none; } 30% { opacity:0; transform:translate(-18px,-84px) scale(1.1); } 92% { opacity:0; transform:none; } 100% { opacity:1; transform:none; } }
@keyframes mcCae  { 0%,24% { opacity:0; transform:translateY(-30px) scale(.9); } 32% { opacity:1; transform:scale(1.06); } 38%,90% { opacity:1; transform:none; } 97%,100% { opacity:0; transform:none; } }
@keyframes mcVerde { 0%,40% { opacity:0; } 48%,90% { opacity:1; } 97%,100% { opacity:0; } }

/* 3 · la foto recibe su palabra */
.mc-match .mc-foto { position:absolute; left:20px; top:20px; right:20px; height:128px; border-radius:18px; background-size:cover; background-position:center;
  box-shadow:0 14px 30px rgba(15,20,30,.34); }
.mc-match .mc-foto::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; box-shadow:0 0 22px rgba(72,205,140,.6), 0 0 60px rgba(72,205,140,.3); animation:mcVerde 6s 2.4s infinite; }
.mc-match .mc-pill { position:absolute; left:20px; right:20px; bottom:18px; height:42px; border-radius:21px; overflow:hidden;
  background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; }
.mc-match .mc-pill::after { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(90deg, #A9D8BF, #5E9E82); animation:mcVerde 6s 2.4s infinite; }
.mc-match .mc-pill span { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; font-size:20px; text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; animation:mcCae 6s 2.4s infinite; }

/* quietas mientras no se miran (como las pistas de los demás recuerdos) */
.n-rec:not(.centro) .mas-cuadro *, .n-rec:not(.centro) .mas-cuadro *::after, .nv-esc.moviendo .mas-cuadro *, .nv-esc.moviendo .mas-cuadro *::after,
.nv-esc.quieto .mas-cuadro *, .nv-esc.quieto .mas-cuadro *::after { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .mas-cuadro *, .mas-cuadro *::after, .mas-luz { animation:none !important; } }

/* ── «más» por dentro ── */
.ms { position:absolute; inset:0; }
.ms-izq { position:absolute; left:80px; top:170px; width:560px; opacity:0; transform:translateX(-30px);
  transition:opacity var(--dc-t-lento) var(--dc-ease) .2s, transform var(--dc-t-viaje) var(--dc-ease) .2s; }
.ms-der { position:absolute; left:700px; top:150px; width:680px; height:640px; opacity:0; transform:translateX(30px);
  transition:opacity var(--dc-t-lento) var(--dc-ease) .3s, transform var(--dc-t-viaje) var(--dc-ease) .3s; }
.nv-cla.on .ms-izq, .nv-cla.on .ms-der { opacity:1; transform:none; }
.nv-cls.on { transition:opacity .75s ease .34s, visibility 0s; }
.ms .n-mas-hc { font-size:40px; }
.ms .n-mas-mas { font-size:150px; margin-top:0; }
.nv-cla.on .ms .mas-luz { animation:masLuz 2.6s cubic-bezier(.3,0,.2,1) .5s both; }
.ms-sub { margin-top:18px; font-size:24px; line-height:1.35; opacity:.82; max-width:520px; }
.ms-lista { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ms-lista li { font-size:22px; line-height:1.3; opacity:.72; }
.ms-precio { margin-top:30px; font-size:28px; }
.ms-acc { margin-top:20px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.noche .ms-cta { font-size:calc(60 * var(--nu)); line-height:1; padding:calc(10 * var(--nu)) 0; text-transform:lowercase; text-shadow:var(--n-brillo);
  transform-origin:left center; transition:transform var(--dc-t-lento) var(--dc-ease); text-align:left; }
@media (any-hover: hover) { .noche .ms-cta:hover { transform:scale(1.07); } }
.noche .ms-otra { font-size:24px; opacity:.62; transition:opacity var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { .noche .ms-otra:hover { opacity:1; } }
.ms-der { height:700px; }
.ms-der .mas-cuadro { transform:scale(.95); transform-origin:0 0; }
.ms-der .mc-msg { left:0; top:0; }
.ms-der .mc-piz { left:350px; top:40px; }
.ms-der .mc-voz { left:10px; top:232px; }
.ms-der .mc-playa { left:350px; top:272px; }
.ms-der .mc-escribe { left:180px; top:470px; }
.noche .ms-volver { position:absolute; left:80px; top:132px; font-size:22px; opacity:.6; z-index:3; }
/* móvil: en columna, que se desliza */
.noche.alto .ms { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:96px 24px 40px; box-sizing:border-box; }
.noche.alto .ms::-webkit-scrollbar { display:none; }
.noche.alto .ms-izq, .noche.alto .ms-der { position:relative; left:auto; top:auto; width:auto; }
.noche.alto .ms-der { height:380px; margin-top:26px; }
.noche.alto .ms-der .mas-cuadro { transform:scale(.5); }
.noche.alto .ms-der .mc-msg { left:0; top:0; }
.noche.alto .ms-der .mc-piz { left:172px; top:22px; }
.noche.alto .ms-der .mc-voz { left:0; top:124px; }
.noche.alto .ms-der .mc-playa { left:172px; top:146px; }
.noche.alto .ms-der .mc-escribe { left:86px; top:250px; }
.noche.alto .ms .n-mas-hc { font-size:24px; }
.noche.alto .ms .n-mas-mas { font-size:92px; }
.noche.alto .ms-sub { font-size:16px; }
.noche.alto .ms-lista li { font-size:15px; }
.noche.alto .ms-precio { font-size:19px; }
.noche.alto .ms-otra { font-size:16px; }
.noche.alto .ms-cta { font-size:calc(50 * var(--nu)); }
.noche.alto .ms-volver { position:static; display:block; margin-bottom:12px; font-size:16px; }

/* ── el nombre en el centro de cada recuerdo ──
   2.ª vuelta (Rolando: «en el teléfono se ve mucho más que lo que está
   detrás»): el nombre sale SÓLO UN MOMENTO al llegar el recuerdo al centro,
   con la escena un poco difuminada detrás, y luego se va difuminándose
   mientras la escena enfoca. Se repite cada vez que llega uno. */
/* con AIRE alrededor (70 px): el difuminado del nombre se calcula dentro de su
   caja, y sin aire recortaba el brillo y la sombra («se ve muy cortada») */
.n-nombre { position:absolute; left:0; right:0; top:50%; padding:70px 0; margin-top:calc(-.5em - 70px); z-index:3; text-align:center; pointer-events:none;
  font-size:124px; line-height:1; letter-spacing:0; opacity:0;
  text-shadow:0 0 22px rgba(242,242,244,.45), 0 0 64px rgba(242,242,244,.16), 0 16px 28px rgba(0,0,0,.35); }
.noche.alto .n-nombre { top:45%; font-size:58px; }
/* 16/09 (noche): los `filter: blur()` de estos dos fotogramas desenfocaban EN
   VIVO el nombre y -lo caro- LA ESCENA ENTERA del recuerdo del centro, cada
   vez que uno llegaba. Es justo lo que hundió el club el 13/09. El efecto
   «llega difuminado y enfoca» ya lo da gratis el fundido entre la copia
   HORNEADA (.n-medio, desenfocada en canvas) y la capa viva. Aquí, sólo
   opacidad y escala. */
@keyframes nNombre {
  0%   { opacity:0; transform:scale(.97); }
  16%  { opacity:1; transform:none; }
  52%  { opacity:1; transform:none; }
  100% { opacity:0; transform:scale(1.05); }
}
.nv-esc:not(.moviendo) .n-rec.centro .n-nombre { animation:nNombre 2.4s var(--dc-ease) .15s both; }
@media (prefers-reduced-motion: reduce) { .n-nombre { animation:none !important; } }
.noche[data-vista="esc"] .noche-titulos { opacity:0 !important; }

/* ── «más» por dentro, 3.ª vuelta: tu tarjeta en el metal de «más», debajo lo
   que incluye (filas con icono) y la acción ── */
.ms-izq { top:150px; }
.ms-carta { width:468px; height:295px; perspective:1600px; }
.ms-carta .ms-gira { width:780px; height:492px; transform:scale(.6); transform-origin:0 0; }
.ms-izq .inc { gap:13px; }
.nv-cla.on .ms-carta .m-mas .cr-tier .mas-luz { animation:masLuz 2.6s cubic-bezier(.3,0,.2,1) .9s both; }
.nv-cla.on .ms-carta .cr-brillo { animation:crBrillo 1.5s cubic-bezier(.4,0,.2,1) .7s both; }
.ms-izq .inc { margin-top:30px; }
.ms-pie { margin-top:26px; }
.ms-linea { display:flex; align-items:baseline; gap:26px; margin-top:12px; }
.ms-linea .ms-precio { margin:0; font-size:24px; }
.noche.alto .ms-carta { width:350px; height:221px; }
.noche.alto .ms-carta .ms-gira { width:350px; height:221px; transform:none; }
.noche.alto .ms-izq .inc { margin-top:22px; }
.noche.alto .ms-linea { flex-wrap:wrap; gap:14px; }
.noche.alto .ms-linea .ms-precio { font-size:17px; }

/* ── las clases con Rolando, 3.ª vuelta: su tarjeta, qué son, reseñas en tarjetas ── */
.c2 { position:absolute; inset:0; }
.c2-izq { position:absolute; left:80px; top:178px; width:420px; opacity:0; transform:translateX(-30px);
  transition:opacity var(--dc-t-lento) var(--dc-ease) .2s, transform var(--dc-t-viaje) var(--dc-ease) .2s; }
.c2-der { position:absolute; left:580px; right:70px; top:170px; bottom:44px; display:flex; flex-direction:column; opacity:0; transform:translateX(30px);
  transition:opacity var(--dc-t-lento) var(--dc-ease) .3s, transform var(--dc-t-viaje) var(--dc-ease) .3s; }
.nv-cla.on .c2-izq, .nv-cla.on .c2-der { opacity:1; transform:none; }
.c2-carta { position:relative; width:420px; border-radius:30px; overflow:hidden; color:#fff; font-family:var(--dc-font);
  box-shadow:0 44px 90px rgba(0,0,0,.5), 0 4px 50px #0000007F, inset 0 1px 0 rgba(255,255,255,.55); }
.c2-carta > .cr-luz, .c2-carta > .cr-brillo { z-index:1; }
.c2-foto { height:330px; background-size:cover; background-position:center 30%; }
.c2-quien { position:relative; z-index:2; padding:24px 30px 30px; }
.c2-nombre { font-size:48px; line-height:1.05; text-shadow:0 14px 26px rgba(20,30,45,.55); }
.c2-bio { margin-top:10px; font-size:18px; line-height:1.4; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.c2-t { font-size:56px; line-height:1.02; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.c2-der .inc { margin-top:32px; }
.c2-resenas { margin-top:36px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.c2-resena { margin:0; border-radius:22px; padding:20px 20px 18px; display:flex; flex-direction:column; justify-content:space-between; min-height:176px; color:#fff; }
.c2-resena blockquote { margin:0; font-size:17px; line-height:1.38; }
.c2-resena blockquote::before { content:"«"; } .c2-resena blockquote::after { content:"»"; }
.c2-resena figcaption { margin-top:12px; font-size:13px; opacity:.6; }
.c2-pie { margin-top:auto; display:flex; align-items:baseline; gap:30px; flex-wrap:wrap; }
.c2-precio { font-size:22px; opacity:.85; }
.noche.alto .c2 { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:96px 20px 0; box-sizing:border-box; }
.noche.alto .c2::-webkit-scrollbar { display:none; }
.noche.alto .c2-izq, .noche.alto .c2-der { position:static; width:auto; }
.noche.alto .c2-carta { width:100%; border-radius:22px; }
.noche.alto .c2-foto { height:230px; }
.noche.alto .c2-quien { padding:18px 20px 22px; }
.noche.alto .c2-nombre { font-size:32px; }
.noche.alto .c2-bio { font-size:14px; }
.noche.alto .c2-der { margin-top:28px; }
.noche.alto .c2-t { font-size:30px; }
.noche.alto .inc-dos { grid-template-columns:1fr; gap:14px; }
.noche.alto .c2-resenas { grid-template-columns:1fr; gap:12px; margin-top:24px; }
.noche.alto .c2-resena { min-height:0; padding:16px 18px; border-radius:18px; }
.noche.alto .c2-resena blockquote { font-size:15px; }
.noche.alto .c2-pie { position:sticky; bottom:0; z-index:2; margin:18px -20px 0; padding:56px 20px 26px; display:block;
  background:linear-gradient(0deg, rgba(10,10,12,.97) 0%, rgba(10,10,12,.9) 55%, rgba(10,10,12,0) 100%); }
.noche.alto .c2-pie .cl-cta { display:block; margin-top:6px; }
.noche.alto .c2-precio { font-size:16px; }
.noche.alto[data-vista="cla"] .noche-cuaderno, .noche.alto[data-vista="cls"] .noche-cuaderno { opacity:0 !important; pointer-events:none; }

/* ══ 15/09, 4.ª vuelta ════════════════════════════════════════════════ */
/* las pantallitas de la lección sin profesor: el mensaje en ruso y la voz */
.mas-cuadro .mc-e { position:absolute; left:26px; right:20px; top:52px; line-height:1.28; text-shadow:0 6px 22px rgba(20,30,45,.26); }
.mc-msg .mc-e { font-size:24px; }
.mc-w-hl.p { background-image:linear-gradient(rgba(255,177,204,.56), rgba(255,177,204,.56)); }
.mc-w-hl.g { background-image:linear-gradient(rgba(139,211,154,.56), rgba(139,211,154,.56)); }
.mc-w-hl.y { background-image:linear-gradient(rgba(255,213,105,.58), rgba(255,213,105,.58)); }
.mc-voz .mc-voz-f { position:absolute; left:24px; top:34px; font-size:30px; line-height:44px; white-space:nowrap; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.mc-vh { position:relative; display:inline-block; vertical-align:middle; width:128px; height:44px; margin-left:12px; border-radius:22px;
  background:linear-gradient(90deg, #DDA9AF, #A66E79); box-shadow:0 0 22px rgba(255,110,125,.5), 0 10px 40px rgba(20,30,45,.4); animation:mcVhFondo 7s infinite; }
.mc-vh::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; background:linear-gradient(90deg, #A9D8BF, #5E9E82);
  box-shadow:0 0 22px rgba(72,205,140,.55), 0 0 60px rgba(72,205,140,.28); animation:mcVhVerde 7s infinite; }
.mc-vh span { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; font-size:21px; }
.mc-vh-mal { animation:mcVhMal 7s infinite; }
.mc-vh-bien { opacity:0; animation:mcVhBien 7s infinite; }
.mc-voz .mc-voz-t { position:absolute; left:24px; right:20px; top:104px; font-size:19px; line-height:1.35; opacity:0; animation:mcVozT 7s infinite; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.mc-mk { border-radius:.2em; padding:0 .08em; }
.mc-mk.p { background:rgba(255,177,204,.56); } .mc-mk.g { background:rgba(139,211,154,.56); }
@keyframes mcVhFondo { 0%, 100% { opacity:1; } }
@keyframes mcVhMal  { 0%, 6% { opacity:0; transform:translateY(-14px); } 12%, 50% { opacity:1; transform:none; } 56%, 100% { opacity:0; } }
@keyframes mcVozT   { 0%, 20% { opacity:0; transform:translateY(.25em); } 28%, 88% { opacity:1; transform:none; } 95%, 100% { opacity:0; } }
@keyframes mcVhBien { 0%, 56% { opacity:0; transform:translateY(-14px); } 62%, 90% { opacity:1; transform:none; } 96%, 100% { opacity:0; } }
@keyframes mcVhVerde { 0%, 60% { opacity:0; } 66%, 90% { opacity:1; } 96%, 100% { opacity:0; } }

/* «получить» sobre la tarjeta de «más»: con el ratón al pasar por encima;
   sin ratón, en el centro a los 5 s (clase .invita) */
.ms-carta { position:relative; }
.noche .ms-obtener { position:absolute; left:0; top:0; width:468px; height:295px; border-radius:22px; display:flex; align-items:center; justify-content:center;
  font-size:56px; line-height:1; text-transform:lowercase; color:#fff; opacity:0; transition:opacity var(--dc-t-lento) var(--dc-ease);
  /* 16/09: el rótulo se leía ENCIMA del nombre de la tarjeta («уже в вашем
     плане» sobre «Lilia»). Ahora la tarjeta queda claramente detrás: el velo
     tapa más y desenfoca lo de debajo. */
  background:radial-gradient(78% 78% at 50% 50%, rgba(20,24,32,.84), rgba(20,24,32,.56)); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  text-shadow:0 0 22px rgba(255,255,255,.55), 0 0 60px rgba(255,255,255,.2); }
@media (any-hover: hover) { .ms-carta:hover .ms-obtener { opacity:1; } }
.ms-carta.invita .ms-obtener { opacity:1; }
/* 16/09 (Rolando): si YA lo tienes, el rótulo lo DICE y se va. Has venido a
   ver tu tarjeta, no a que te la tapen. Con ratón, pasar por encima lo trae
   de vuelta; en el móvil se va y ya está. Si NO lo tienes, «получить» se
   queda: eso sí es una invitación, no un aviso. */
/* 16/09 (tarde): en el ordenador el rótulo aparecía y se iba solo, y eso se
   lee como un fallo, no como una gracia (Rolando: «aparece y desaparece»).
   Con ratón NO se anima: sale al pasar por encima y ya. Sin ratón (el móvil,
   donde no hay forma de «pasar por encima») sí lo dice una vez y se aparta. */
.ms-carta.ya .ms-obtener { font-size:30px; }
@keyframes msYaSeVa { 0% { opacity:0; } 13%, 60% { opacity:1; } 100% { opacity:0; } }
@media (any-hover: hover) {
  .ms-carta.ya .ms-obtener { opacity:0; }
  .ms-carta.ya:hover .ms-obtener { opacity:1; }
}
@media (any-hover: none) {
  .ms-carta.ya .ms-obtener { animation:msYaSeVa 3.4s cubic-bezier(.4,0,.2,1) .35s both; }
}
@media (prefers-reduced-motion: reduce) { .ms-carta.ya .ms-obtener { animation-duration:.01s; } }
.noche.alto .ms-obtener { width:350px; height:221px; border-radius:18px; font-size:40px; }

/* ── LA CLASE EN VIVO (la ventana): 920×580, bucle de 12 s ── */
.cv { position:relative; width:920px; height:580px; border-radius:30px; overflow:hidden; color:#fff; font-family:var(--dc-font);
  background:linear-gradient(100deg, #c3c9cd 0%, #a5b0bd 45%, #7f8ea6 100%);
  box-shadow:0 50px 100px rgba(0,0,0,.55), 0 4px 50px #0000007F; }
.cv-cab { position:absolute; left:32px; right:32px; top:24px; display:flex; align-items:baseline; gap:40px; }
.cv-marca { font-size:26px; line-height:1; text-shadow:0 10px 20px rgba(20,30,45,.55); margin-right:auto; }
.cv-marca .marca-club { font-size:.42em; margin-left:.12em; }
.cv-op { font-size:20px; opacity:.55; text-shadow:0 8px 16px rgba(20,30,45,.4); }
.cv-op.on { opacity:1; }
.cv-t { position:absolute; left:44px; top:86px; font-size:54px; line-height:1; text-shadow:0 6px 22px rgba(20,30,45,.26); animation:cvT 12s infinite; }
.cv-cols { position:absolute; left:44px; top:176px; display:flex; gap:38px; }
.cv-col { display:flex; flex-direction:column; gap:6px; }
.cv-col.k1 { animation:cvC1 12s infinite; } .cv-col.k2 { animation:cvC2 12s infinite; } .cv-col.k3 { animation:cvC3 12s infinite; }
.cv-v { font-size:40px; line-height:1.1; text-shadow:0 6px 22px rgba(20,30,45,.26); }
.cv-f { font-size:26px; line-height:1.2; opacity:.92; text-shadow:0 6px 22px rgba(20,30,45,.22); }
.cv-hl { border-radius:.2em; padding:.02em .06em; background-repeat:no-repeat; background-position:left center; background-size:0% 100%; }
.cv-hl.p { background-image:linear-gradient(rgba(255,177,204,.56), rgba(255,177,204,.56)); animation:cvH1 12s infinite; }
.cv-hl.g { background-image:linear-gradient(rgba(139,211,154,.56), rgba(139,211,154,.56)); animation:cvH2 12s infinite; }
.cv-hl.y { background-image:linear-gradient(rgba(255,213,105,.58), rgba(255,213,105,.58)); animation:cvH3 12s infinite; }
/* la foto que Rolando arrastra por la pizarra (como un objeto de la pizarra: radio fijo y su sombra) */
.cv-img { position:absolute; left:430px; top:410px; width:150px; height:112px; border-radius:16px; background-size:cover; background-position:center; opacity:0;
  box-shadow:0 14px 34px rgba(40,55,80,.28), 0 2px 6px rgba(40,55,80,.12); animation:cvImg 12s infinite; }
.cv-cursor { position:absolute; left:560px; top:500px; width:30px; height:30px; fill:#fff; stroke:rgba(20,30,45,.55); stroke-width:1.2; opacity:0;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); animation:cvCursor 12s infinite; }
/* el bloque de emparejar (foto + palabra), también en la pizarra */
.cv-ej { position:absolute; left:612px; top:292px; width:280px; opacity:0; animation:cvEj 12s infinite; }
.cv-ej-b { height:40px; border-radius:18px; display:flex; align-items:center; gap:22px; padding:0 18px;
  background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 50px #141E2D84; font-size:17px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.cv-ej-sale { display:inline-block; animation:cvEjSale 12s infinite; }
.cv-ej-fotos { margin-top:14px; display:flex; gap:14px; }
.cv-ej-c { width:133px; display:flex; flex-direction:column; gap:8px; }
.cv-ej-foto { position:relative; height:96px; border-radius:14px; background-size:cover; background-position:center; box-shadow:0 12px 26px rgba(15,20,30,.3); }
.cv-ej-c:first-child .cv-ej-foto::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; box-shadow:0 0 18px rgba(72,205,140,.6), 0 0 44px rgba(72,205,140,.3); animation:cvEjVerde 12s infinite; }
.cv-ej-h { position:relative; height:32px; border-radius:16px; background:linear-gradient(90deg, #C2CAD4, #8B97AB); box-shadow:0 10px 40px #141E2D84; }
.cv-ej-c:first-child .cv-ej-h::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; background:linear-gradient(90deg, #A9D8BF, #5E9E82); animation:cvEjVerde 12s infinite; }
.cv-ej-h span { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; font-size:15px; opacity:0; text-shadow:0 2px 6px rgba(0,0,0,.35); animation:cvEjCae 12s infinite; }
.cv-yo { position:absolute; right:32px; top:84px; width:186px; height:140px; border-radius:18px; background-size:118%; background-position:50% 26%;   /* 16/09: «mi foto no tan cerca por dios» */
  box-shadow:0 20px 40px rgba(15,20,30,.4), 0 0 0 1px rgba(255,255,255,.25); }
.cv-yo span { position:absolute; left:12px; bottom:9px; font-size:14px; text-shadow:0 2px 6px rgba(0,0,0,.6); }
@keyframes cvT  { 0%, 2% { opacity:0; transform:translateY(.06em); } 7%, 92% { opacity:1; transform:none; } 97%, 100% { opacity:0; } }
@keyframes cvC1 { 0%, 10% { opacity:0; transform:translateY(.06em); } 15%, 92% { opacity:1; transform:none; } 97%, 100% { opacity:0; } }
@keyframes cvC2 { 0%, 13% { opacity:0; transform:translateY(.06em); } 18%, 92% { opacity:1; transform:none; } 97%, 100% { opacity:0; } }
@keyframes cvC3 { 0%, 16% { opacity:0; transform:translateY(.06em); } 21%, 92% { opacity:1; transform:none; } 97%, 100% { opacity:0; } }
@keyframes cvH1 { 0%, 24% { background-size:0% 100%; } 29%, 100% { background-size:100% 100%; } }
@keyframes cvH2 { 0%, 28% { background-size:0% 100%; } 33%, 100% { background-size:100% 100%; } }
@keyframes cvH3 { 0%, 32% { background-size:0% 100%; } 37%, 100% { background-size:100% 100%; } }
@keyframes cvImg { 0%, 38% { opacity:0; transform:scale(.985); } 42% { opacity:1; transform:none; } 44% { opacity:1; transform:none; } 57%, 92% { opacity:1; transform:translate(-370px, -26px); } 97%, 100% { opacity:0; transform:translate(-370px, -26px); } }
@keyframes cvCursor { 0%, 38% { opacity:0; transform:translate(30px, 30px); } 42% { opacity:1; transform:none; } 44% { opacity:1; transform:none; } 57% { opacity:1; transform:translate(-370px, -26px); } 63%, 100% { opacity:0; transform:translate(-350px, -6px); } }
@keyframes cvEj { 0%, 56% { opacity:0; transform:translateY(12px); } 61%, 92% { opacity:1; transform:none; } 97%, 100% { opacity:0; } }
@keyframes cvEjSale { 0%, 64% { opacity:1; transform:none; } 71% { opacity:0; transform:translate(0, 110px) scale(1.06); } 100% { opacity:0; } }
@keyframes cvEjCae { 0%, 68% { opacity:0; transform:translateY(-22px) scale(.92); } 72% { opacity:1; transform:scale(1.06); } 75%, 100% { opacity:1; transform:none; } }
@keyframes cvEjVerde { 0%, 75% { opacity:0; } 79%, 100% { opacity:1; } }
.nv-cla:not(.on) .cv *, .nv-car:not(.on) .cv *, .nv-cls:not(.on) .cv *,
.n-rec:not(.centro) .cv *, .n-rec:not(.centro) .cv *::after, .nv-esc.moviendo .cv *, .nv-esc.moviendo .cv *::after, .nv-esc.quieto .cv *, .nv-esc.quieto .cv *::after { animation-play-state:paused; }
/* el recuerdo de las clases: la clase en vivo, en el centro */
.es-cls { background:transparent; }
.es-cls .cls-vent { position:absolute; left:50%; top:50%; width:754px; height:475px; margin:-238px 0 0 -377px; }
.es-cls .cls-escala { width:920px; height:580px; transform:scale(.8196); transform-origin:0 0; }
.noche.alto .es-cls .cls-vent { width:350px; height:221px; margin:-110px 0 0 -175px; top:45%; }
.noche.alto .es-cls .cls-escala { transform:scale(.3804); }
@media (prefers-reduced-motion: reduce) { .cv *, .cv *::after { animation:none !important; opacity:1 !important; } }

/* ── LAS CLASES CON ROLANDO, 4.ª: una página que se desliza ── */
.c3 { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:150px 0 90px; box-sizing:border-box; opacity:0;
  transition:opacity var(--dc-t-entrada) var(--dc-ease) .2s; }
.c3::-webkit-scrollbar { display:none; }
.nv-cla.on .c3, .nv-cls.on .c3 { opacity:1; }
.c3-hero { text-align:center; }
.c3-t { font-size:92px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.45), 0 0 64px rgba(242,242,244,.16); }
.c3-sub { margin:20px auto 0; max-width:760px; font-size:24px; line-height:1.4; opacity:.82; }
.c3-ventana { width:1012px; height:638px; margin:56px auto 0; }
.c3-escala { width:920px; height:580px; transform:scale(1.1); transform-origin:0 0; }
.c3-sec { margin:120px auto 0; width:1180px; }
.c3-que-t { font-size:52px; line-height:1.05; text-align:center; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.c3-que-fila { margin-top:56px; display:flex; align-items:center; justify-content:space-between; gap:60px; }
.c3-que-fila .inc { gap:26px; }
.c3-que-fila .inc-t { font-size:26px; }
.c3-que-fila .inc-s { font-size:18px; }
.c3-que-fila .inc-ico { width:54px; height:54px; border-radius:16px; }
.c3-incl { width:560px; text-align:center; }
.c3-incl-carta { width:546px; height:344px; margin:0 auto; }
.c3-incl-gira { width:780px; height:492px; transform:scale(.7); transform-origin:0 0; }
.c3-incl-t { margin-top:26px; font-size:30px; }
.c3-incl-s { margin-top:8px; font-size:19px; opacity:.7; }
.c3-cuadros { position:relative; margin:56px auto 0; height:470px; width:1180px; }
.c3-cuadros .mas-cuadro { transform:none; }
.c3-cuadros .mc-msg { left:0; top:0; } .c3-cuadros .mc-piz { left:420px; top:60px; } .c3-cuadros .mc-voz { left:840px; top:0; } .c3-cuadros .mc-playa { left:420px; top:300px; transform:scale(.8); transform-origin:50% 0; }
.c3-resenas { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.c3-resenas .c2-resena { min-height:210px; padding:26px 26px 22px; }
.c3-resenas .c2-resena blockquote { font-size:20px; }
.c3-final { display:flex; align-items:center; justify-content:center; gap:60px; }
.c3-foto { width:300px; height:300px; border-radius:34px; background-size:cover; background-position:center 30%; box-shadow:0 40px 80px rgba(0,0,0,.5); flex:none; }
.c3-nombre { font-size:60px; line-height:1; text-shadow:0 0 22px rgba(242,242,244,.42), 0 0 64px rgba(242,242,244,.14); }
.c3-bio { margin-top:14px; font-size:21px; line-height:1.4; opacity:.8; max-width:520px; }
.c3-precio { margin-top:28px; font-size:24px; opacity:.9; }
.c3-final .cl-cta { margin-top:10px; }
/* móvil */
.noche.alto .c3 { padding:100px 0 60px; }
.noche.alto .c3-t { font-size:40px; padding:0 20px; }
.noche.alto .c3-sub { font-size:16px; padding:0 24px; margin-top:12px; }
.noche.alto .c3-ventana { width:350px; height:221px; margin-top:30px; }
.noche.alto .c3-escala { transform:scale(.3804); }
.noche.alto .c3-sec { width:auto; margin:70px 20px 0; }
.noche.alto .c3-que-t { font-size:28px; }
.noche.alto .c3-que-fila { flex-direction:column; margin-top:28px; gap:36px; }
.noche.alto .c3-que-fila .inc-t { font-size:18px; }
.noche.alto .c3-que-fila .inc-s { font-size:13px; }
.noche.alto .c3-que-fila .inc-ico { width:42px; height:42px; }
.noche.alto .c3-incl { width:auto; }
.noche.alto .c3-incl-carta { width:350px; height:221px; }
.noche.alto .c3-incl-gira { width:350px; height:221px; transform:none; }
.noche.alto .c3-incl-t { font-size:20px; margin-top:16px; }
.noche.alto .c3-incl-s { font-size:14px; }
.noche.alto .c3-cuadros { width:350px; height:330px; margin-top:28px; }
.noche.alto .c3-cuadros .mas-cuadro { transform:scale(.5); transform-origin:0 0; }
.noche.alto .c3-cuadros .mc-msg { left:0; top:0; } .noche.alto .c3-cuadros .mc-piz { left:176px; top:30px; }
.noche.alto .c3-cuadros .mc-voz { left:0; top:124px; } .noche.alto .c3-cuadros .mc-playa { left:176px; top:154px; transform:scale(.5); transform-origin:0 0; }
.noche.alto .c3-resenas { grid-template-columns:1fr; gap:12px; }
.noche.alto .c3-resenas .c2-resena { min-height:0; padding:18px; }
.noche.alto .c3-resenas .c2-resena blockquote { font-size:15px; }
.noche.alto .c3-final { flex-direction:column; text-align:center; gap:24px; }
.noche.alto .c3-foto { width:200px; height:200px; border-radius:26px; }
.noche.alto .c3-nombre { font-size:36px; }
.noche.alto .c3-bio { font-size:15px; }
.noche.alto .c3-precio { font-size:16px; }
.noche .c3 .mas-cuadro * , .noche .c3 .mas-cuadro *::after { animation-play-state:running; }
/* lo que se desliza se desvanece antes de llegar al logotipo (no pasa por debajo) */
/* (16/09: la máscara de arriba pasó a ser una regla de TODA la sala, en
   noche-css.css; aquí ya no hace falta repetirla para .c3 ni para .ms) */


/* ══ TELEGRAM: EL TUTOR Y EL CANAL (16/09/2026) ══════════════════════
   La conversación se escribe sola, en bucle de 12 s. Sólo opacidad y
   transform (la regla de rendimiento de la sala), y sin cápsulas claras:
   quién habla se lee por el sitio y por la luz, no por una caja. */

.es-tg .tg-charla { position:absolute; left:300px; right:300px; top:384px; display:flex; flex-direction:column; gap:52px; }
.es-tg .tg-l { font-size:46px; line-height:1.2; letter-spacing:var(--dc-tracking, 0); color:#F2F2F4;
  opacity:0; animation:tgSale 12s var(--dc-ease) infinite; animation-delay:calc(var(--i) * 2.6s + 1.4s); will-change:opacity, transform; }
.es-tg .tg-a { align-self:flex-end; text-align:right; color:rgba(242,242,244,.5); }
.es-tg .tg-c { font-size:34px; color:rgba(168,200,236,.78); padding-left:18px; border-left:2px solid rgba(168,200,236,.32); }
.es-tg .tg-b { color:#F2F2F4; }
@keyframes tgSale {
  0%, 6%   { opacity:0; transform:translateY(.42em); }
  13%, 74% { opacity:1; transform:none; }
  86%, 100%{ opacity:0; transform:translateY(-.2em); }
}
/* los tres puntos: el tutor está escribiendo, justo antes de su respuesta */
.es-tg .tg-puntos { position:absolute; left:0; top:calc(100% + 18px); display:flex; gap:9px;
  opacity:0; animation:tgPuntos 12s linear infinite; animation-delay:5.1s; }
.es-tg .tg-puntos i { width:11px; height:11px; border-radius:50%; background:rgba(242,242,244,.62);
  animation:tgBota 1.1s var(--dc-ease) infinite; }
.es-tg .tg-puntos i:nth-child(2) { animation-delay:.16s; }
.es-tg .tg-puntos i:nth-child(3) { animation-delay:.32s; }
@keyframes tgPuntos { 0%, 2% { opacity:0; } 6%, 14% { opacity:1; } 18%, 100% { opacity:0; } }
@keyframes tgBota { 0%, 100% { transform:none; opacity:.45; } 50% { transform:translateY(-6px); opacity:1; } }

.noche.alto .es-tg .tg-charla { left:40px; right:40px; top:calc(50% - 62px); gap:34px; }
.noche.alto .es-tg .tg-l { font-size:30px; }
.noche.alto .es-tg .tg-c { font-size:23px; padding-left:13px; }
.noche.alto .es-tg .tg-puntos i { width:8px; height:8px; }

/* ── POR DENTRO ────────────────────────────────────────────────────── */
/* El contenido empieza DEBAJO de donde la máscara de la sala ya está abierta
   del todo (218 px en el ordenador, 176 en el móvil): si no, el título sale
   medio desvanecido bajo la marca. */
.tgv { position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center;
  gap:calc(140 * var(--dc-u)); padding:236px calc(80 * var(--dc-u)) calc(120 * var(--dc-u)); box-sizing:border-box; }
.tgv-bloque { display:flex; flex-direction:column; align-items:flex-start; gap:calc(26 * var(--dc-u)); }
.tgv-tutor { flex:0 1 calc(660 * var(--dc-u)); }
.tgv-canal { flex:0 1 calc(480 * var(--dc-u)); padding-top:calc(22 * var(--dc-u)); }
.tgv-t { font-size:calc(72 * var(--dc-u)); line-height:1.05; color:var(--dc-ink); text-shadow:var(--dc-shadow-text); }
.tgv-sub { font-size:calc(34 * var(--dc-u)); line-height:1.35; color:rgba(242,242,244,.62); }
.tgv-charla { position:relative; display:flex; flex-direction:column; justify-content:center; gap:calc(22 * var(--dc-u)); width:100%; min-height:calc(230 * var(--dc-u)); margin:calc(6 * var(--dc-u)) 0; }
.tgv-charla .tg-l { font-size:calc(36 * var(--dc-u)); line-height:1.25; color:var(--dc-ink); opacity:0;
  animation:tgSale 12s var(--dc-ease) infinite; animation-delay:calc(var(--i) * 2.6s + 1.4s); }
.tgv-charla .tg-a { align-self:flex-end; text-align:right; opacity:0; color:var(--dc-ink-soft, rgba(242,242,244,.5)); }
.tgv-charla .tg-c { font-size:calc(27 * var(--dc-u)); color:rgba(168,200,236,.8); padding-left:.5em; border-left:2px solid rgba(168,200,236,.3); }
.tgv-charla .tg-puntos { position:absolute; left:0; top:calc(100% + 10px); display:flex; gap:7px; opacity:0;
  animation:tgPuntos 12s linear infinite; animation-delay:5.1s; }
.tgv-charla .tg-puntos i { width:8px; height:8px; border-radius:50%; background:var(--dc-ink); opacity:.55;
  animation:tgBota 1.1s var(--dc-ease) infinite; }
.tgv-charla .tg-puntos i:nth-child(2) { animation-delay:.16s; }
.tgv-charla .tg-puntos i:nth-child(3) { animation-delay:.32s; }

.tgv-cab { display:flex; align-items:center; gap:calc(16 * var(--dc-u)); font-size:calc(46 * var(--dc-u)); color:var(--dc-ink); }
.tgv-ico { width:calc(58 * var(--dc-u)); height:calc(58 * var(--dc-u)); border-radius:calc(16 * var(--dc-u)); }
.tgv-desc { font-size:calc(34 * var(--dc-u)); line-height:1.35; color:rgba(242,242,244,.62); }
.tgv-ir { margin-top:calc(10 * var(--dc-u)); }

@media (max-width: 760px) {
  .tgv { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:calc(80 * var(--dc-u));
    padding:calc(190px + env(safe-area-inset-top, 0px)) 20px calc(130px + env(safe-area-inset-bottom, 0px)); }
  .tgv-canal { padding-top:0; }
  .tgv-bloque { max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .es-tg .tg-l, .tgv-charla .tg-l { animation:none; opacity:1; transform:none; }
  .es-tg .tg-puntos, .tgv-charla .tg-puntos { display:none; }
}