/* ═══ DESCUBRIR CON SUS FOTOS (22/09/2026) ═══════════════════════════
   La foto de Rolando llena la pantalla ENTERA (también lo que sobra a los
   lados del escenario: --n-derecha / --n-abajo), por debajo del logotipo.
   A la derecha, su título en blanco y su texto sobre una sombra que sólo
   oscurece ese lado. Abajo, la barra de la casa y «anterior · siguiente»
   (.mp-barra y .mp-ir de «más»). Sólo transform y opacity al moverse; lo
   desenfocado (el color detrás de una foto vertical) se hornea en canvas. */
.fr { position:absolute; inset:0; }
.fr-fotos { position:absolute; left:calc(-1 * var(--n-derecha, 0px)); right:calc(-1 * var(--n-derecha, 0px));
  top:calc(-1 * var(--n-abajo, 0px)); bottom:calc(-1 * var(--n-abajo, 0px)); background:#0B0B0D; overflow:hidden; }
.fr-foto { position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--dc-ease); will-change:opacity; }
.fr-foto.on { opacity:1; }
.fr-halo { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.fr-img { position:absolute; inset:0; overflow:hidden; }
/* 22/09 (Rolando): la foto SIEMPRE alejándose muy despacio, y al llegar al
   final vuelve atrás (ida y vuelta, sin corte). Sólo transform. */
.fr-img-in { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:scale(1); animation:frAleja 48s infinite; will-change:transform; }
/* 02/10 (Rolando): «un poquitín más rápida, que se note que está ahí (sobre
   todo al principio), y que primero acerque y luego aleje». Arranca ya en
   marcha (sin la salida lenta del ease-in-out) y frena al llegar. */
/* 02/10 noche (Rolando: «demasiado rápido, más lento»): 48 s y hasta 1.1, con
   un arranque más suave (que se note, pero sin el tirón de 34 s / 1.13). */
@keyframes frAleja {
  0%   { transform:scale(1);    animation-timing-function:cubic-bezier(.35,.35,.45,1); }
  50%  { transform:scale(1.1);  animation-timing-function:cubic-bezier(.45,0,.55,1); }
  100% { transform:scale(1); }
}
/* la que no llena la pantalla: en su marco redondeado (sitio y tamaño: _frEncaja) */
.fr-img.entera, .fr-foto.on .fr-img.entera { right:auto; bottom:auto; border-radius:28px; transform-origin:0 0;
  transition:transform .9s var(--dc-ease); }
.noche.alto .fr-img.entera { border-radius:20px; }

/* 22/09 (Rolando): con el texto, TODA la foto en penumbra (un poco más del
   lado del texto); «ver imagen completa» la enciende entera. Sin barra
   oscura arriba: el logotipo lleva su propia sombra. */
.fr-sombra, .fr-sombra-lado, .fr-sombra-abajo, .fr-sombra-logo, .fr-sombra-titulo { position:absolute; left:calc(-1 * var(--n-derecha, 0px)); right:calc(-1 * var(--n-derecha, 0px));
  top:calc(-1 * var(--n-abajo, 0px)); bottom:calc(-1 * var(--n-abajo, 0px)); pointer-events:none;
  transition:opacity 1.1s var(--dc-ease); }
/* 02/10: la penumbra en DOS capas que sólo cambian de opacidad, a la vez que
   se funde la foto (antes el fondo cambiaba de golpe entre una foto con texto
   y una sin él: «la transición es rara»). La de toda la foto, y la del lado
   del texto. La foto en su marco (vertical) y la foto sin texto no llevan la
   de toda la foto (Rolando: «no deberían estar oscurecidas»). */
.fr-sombra { background:rgba(8,8,10,.5); }
.fr-sombra-lado { background:linear-gradient(to left, rgba(8,8,10,.34) 0%, rgba(8,8,10,.16) 36%, rgba(8,8,10,0) 60%); }
.fr.entera .fr-sombra, .fr.vacia .fr-sombra { opacity:0; }
/* reorganizando: sólo una sombra abajo, donde va la tira (sobre una foto clara no se veía) */
.fr-sombra-abajo { background:linear-gradient(to top, rgba(8,8,10,.72) 0%, rgba(8,8,10,.4) 28%, rgba(8,8,10,0) 52%); opacity:0; }
.fr.ordenando .fr-sombra-abajo { opacity:1; }
/* 02/10: el velo detrás del logotipo (y del nombre del álbum) en las fotos
   claras, cuando la foto va sin su penumbra. Lo fuerte que sea lo dice la luz
   de esa esquina (_frLuz → --claro-logo / --claro-titulo). */
.fr-sombra-logo { background:radial-gradient(ellipse 760px 340px at 0 0, rgba(8,8,10,.46) 0%, rgba(8,8,10,.22) 45%, rgba(8,8,10,0) 75%); opacity:0; }
.fr-sombra-titulo { background:radial-gradient(ellipse 820px 300px at 100% 0, rgba(8,8,10,.4) 0%, rgba(8,8,10,.18) 45%, rgba(8,8,10,0) 75%); opacity:0; }
.fr:is(.vacia, .sin-texto, .entera, .ordenando) .fr-sombra-logo { opacity:var(--claro-logo, 0); }
.fr:is(.vacia, .sin-texto, .entera, .ordenando) .fr-sombra-titulo { opacity:var(--claro-titulo, 0); }
.fr.editando .fr-sombra-logo, .fr.editando .fr-sombra-titulo { opacity:0; }
.noche.alto .fr-sombra-logo { background:radial-gradient(ellipse 380px 190px at 0 0, rgba(8,8,10,.46) 0%, rgba(8,8,10,.2) 45%, rgba(8,8,10,0) 75%); }
.noche.alto .fr-sombra-titulo { background:radial-gradient(ellipse 300px 170px at 100% 0, rgba(8,8,10,.4) 0%, rgba(8,8,10,.16) 45%, rgba(8,8,10,0) 75%); }
.fr.sin-texto .fr-sombra, .fr.sin-texto .fr-sombra-lado, .fr.ordenando .fr-sombra, .fr.ordenando .fr-sombra-lado { opacity:0; }
.fr.editando .fr-sombra { opacity:1; }

/* el lado del texto */
.fr-lado { position:absolute; right:96px; top:150px; bottom:64px; width:500px; display:flex; flex-direction:column; justify-content:center; gap:26px;
  padding-bottom:96px; color:#F2F2F4; transition:opacity .7s var(--dc-ease), translate .9s var(--dc-ease); }
.fr.sin-texto .fr-lado, .fr.ordenando .fr-lado { opacity:0; translate:24px 0; pointer-events:none; }
.fr-arriba { position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; transition:opacity .9s var(--dc-ease); }
.fr-pais { font-size:26px; line-height:1; opacity:.72; text-transform:lowercase; }
.fr .ent-op { font-size:24px; line-height:1.2; padding:4px 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); }
.fr .ent-op.active { opacity:1; text-shadow:var(--n-brillo); }
@media (any-hover: hover) { .fr .ent-op:hover { opacity:1; transform:scale(1.06); } }
.fr-paises, .fr-niveles { display:flex; flex-wrap:wrap; gap:4px 22px; }
/* «escuchar · 0:42» (su voz) delante de los niveles, en la misma fila */
.fr-oir { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 22px; }
.fr .fr-voz { opacity:.85; }
.fr .fr-voz[hidden] { display:none; }
/* debajo del título: el sitio y el año, pequeño */
.fr-linea { margin:-10px 0 20px; font-size:22px; line-height:1.2; letter-spacing:.4px; color:rgba(246,246,248,.66); text-shadow:0 1px 12px rgba(0,0,0,.3); }
.fr-linea[hidden] { display:none; }
.noche.alto .fr-linea { font-size:15px; margin:-6px 0 12px; }
.fr-paises .ent-op { font-size:30px; }
.fr-niveles:empty { display:none; }
.fr-oir:has(.fr-voz[hidden]):has(.fr-niveles:empty) { display:none; }
.fr-niveles .ent-op[data-n="b2"], .fr-niveles .ent-op[data-n="b1"], .fr-niveles .ent-op[data-n="a2"] { text-transform:none; }

.fr-texto { flex:0 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent;
  /* 02/10: la caja que hace scroll CORTABA la sombra blanca del título (llega a
     64 px). Con este margen dentro, la sombra cabe, y el texto no se mueve. */
  padding:56px 68px 0 56px; margin:-56px -68px 0 -56px;
  transition:opacity .9s var(--dc-ease); }
/* 02/10: el texto largo no se mete bajo la barra ni bajo los niveles: se
   funde abajo si queda más, y arriba al desplazarlo (_frBordes). El hueco de
   arriba es para el brillo del título: quieto, sin fundido. */
.fr-texto.mas-abajo { -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
.fr-texto.mas-arriba { -webkit-mask-image:linear-gradient(to bottom, transparent 42px, #000 116px); mask-image:linear-gradient(to bottom, transparent 42px, #000 116px); }
.fr-texto.mas-arriba.mas-abajo { -webkit-mask-image:linear-gradient(to bottom, transparent 42px, #000 116px, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to bottom, transparent 42px, #000 116px, #000 calc(100% - 64px), transparent); }
.fr-cuerpo p:last-child { margin-bottom:28px; }
/* la ventana no se ve: el zoom en pausa (al volver sigue donde estaba, sin salto) */
.noche.fr-quieto .fr-img-in { animation-play-state:paused; }
/* pasar de foto: lo de antes se va deprisa al tocar; lo nuevo entra con la foto */
.fr-lado.cambia .fr-texto, .fr-lado.cambia .fr-arriba { opacity:0; transition-duration:.34s; }
/* cambiar de nivel: el texto sólo se funde, despacio, sin moverse */
.fr-lado.suave .fr-texto { transition:opacity .55s cubic-bezier(.4,0,.2,1); }
.fr-lado.cambia-nivel .fr-texto { opacity:0; }
/* 22/09 (Rolando): TODO en Coolvetica, y el título con la sombra blanca de
   la casa (--n-brillo, la del logotipo y de lo elegido). */
.fr-titulo { margin:0 0 22px; font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:60px; line-height:1.02; letter-spacing:.3px;
  color:#F2F2F4; text-shadow:var(--n-brillo); }
.fr-cuerpo p { margin:0 0 14px; font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:23px; line-height:1.42; letter-spacing:.4px;
  color:rgba(246,246,248,.9); text-shadow:0 1px 14px rgba(0,0,0,.3); -webkit-user-select:text; user-select:text; }

/* la barra de la casa y «anterior · siguiente» (las de «más») */
.fr-pie { position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid; grid-template-columns:auto auto; justify-content:space-between; row-gap:12px; }
.noche .fr-pie .mp-barra, .noche.alto .fr-pie .mp-barra { grid-column:1 / -1; grid-row:1; width:auto; height:16px; border-radius:8px; background:rgba(242,242,244,.18); }
.noche .fr-pie .mp-ir { grid-row:2; font-size:26px; color:#F2F2F4; text-shadow:0 1px 14px rgba(0,0,0,.35); }
.noche .fr-pie .mp-antes { grid-column:1; justify-self:start; }
.noche .fr-pie .mp-luego { grid-column:2; justify-self:end; }

/* «ocultar texto»: abajo a la izquierda, siempre a mano */
.noche .fr-ocultar { position:absolute; left:60px; bottom:40px; z-index:3; font-size:24px; line-height:1; color:rgba(246,246,248,.8);
  text-shadow:0 1px 14px rgba(0,0,0,.45); transition:opacity .3s ease; }
@media (any-hover: hover) { .noche .fr-ocultar:hover { color:#fff; } }
.fr .fr-fotos { cursor:pointer; }

/* La sala desvanece lo que pasa por debajo del logotipo (noche-css: la
   máscara de .nv). Aquí no: la foto va POR DEBAJO del logotipo, entera,
   hasta el borde de arriba (y la máscara, además, recortaría lo que sobra
   a los lados del escenario). */
.noche.fr-on .nv-desc, .noche.alto.fr-on .nv-desc { -webkit-mask-image:none; mask-image:none; }

/* Sobre una foto, el logotipo, el título del espacio y el cuaderno van en
   BLANCO con su brillo, también con los colores de la casa. */
.noche.fr-on .noche-marca-t, .noche.fr-on .noche-marca-t .marca-club { color:#F2F2F4; text-shadow:var(--n-brillo); }   /* la sombra blanca de la casa (Rolando, 22/09) */
.noche.fr-on .noche-halo-logo, .noche.fr-on .noche-marca-brillo { opacity:0 !important; }
/* arriba a la derecha, el país (en vez de «descubrir»), igual que el logotipo */
/* arriba a la derecha, el país: del tamaño del logotipo y a su altura (Rolando, 22/09) */
.noche.fr-on .noche-titulos { color:#F2F2F4; text-shadow:var(--n-brillo); top:40px; height:78px; width:760px; font-size:78px; }
.noche.alto.fr-on .noche-titulos { top:34px; height:46px; width:200px; font-size:46px; }
.noche.alto.fr-on .noche-titulos.largo { font-size:30px; top:42px; }
/* el paso de la sombra clara a la oscura (y vuelta), despacio y a la vez en el logotipo y el país */
.noche.fr-on .noche-marca-t, .noche.fr-on .noche-marca-t .marca-club, .noche.fr-on .noche-titulos {
  transition:text-shadow 1.2s cubic-bezier(.45,0,.2,1), color 1.2s cubic-bezier(.45,0,.2,1), opacity .6s ease; }
/* con la foto entera (sin la penumbra), el logotipo y el país con sombra NEGRA: se leen sobre cualquier foto (Rolando, 22/09) */
.noche.fr-on.fr-sin-texto .noche-marca-t, .noche.fr-on.fr-sin-texto .noche-marca-t .marca-club, .noche.fr-on.fr-sin-texto .noche-titulos { text-shadow:0 3px 24px rgba(0,0,0,.55), 0 1px 5px rgba(0,0,0,.35); }
.noche.fr-on .noche-cuaderno, .noche.fr-on .noche-cuaderno .ncu-n { color:rgba(246,246,248,.8); text-shadow:0 1px 14px rgba(0,0,0,.45); }
.noche.fr-on.fr-sin-texto .noche-cuaderno { opacity:0 !important; pointer-events:none; }
.noche.fr-on .noche-luz { opacity:0 !important; }

/* ── EN VERTICAL (el móvil) ── la foto entera arriba, el texto abajo sobre su sombra */
.noche.alto .fr-sombra-lado { background:linear-gradient(to top, rgba(8,8,10,.5) 0%, rgba(8,8,10,.26) 40%, rgba(8,8,10,0) 66%); }
.noche.alto .fr-lado { left:22px; right:22px; width:auto; top:auto; bottom:30px; max-height:min(58%, calc(100% - 320px)); justify-content:flex-end; gap:16px; padding-bottom:62px; }   /* 02/10: en un móvil pequeño, el texto no se come la foto: hace scroll */
.noche.alto .fr-texto { padding:40px 30px 0 30px; margin:-40px -30px 0 -30px; }
.noche.alto .fr-texto.mas-arriba { -webkit-mask-image:linear-gradient(to bottom, transparent 32px, #000 86px); mask-image:linear-gradient(to bottom, transparent 32px, #000 86px); }
.noche.alto .fr-texto.mas-arriba.mas-abajo { -webkit-mask-image:linear-gradient(to bottom, transparent 32px, #000 86px, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to bottom, transparent 32px, #000 86px, #000 calc(100% - 64px), transparent); }
.noche.alto .fr-cuerpo p:last-child { margin-bottom:18px; }
.noche.alto .fr.sin-texto .fr-lado { translate:0 16px; }
.noche.alto .fr-pais { font-size:17px; }
.noche.alto .fr .ent-op { font-size:17px; }
.noche.alto .fr-paises .ent-op { font-size:20px; }
.noche.alto .fr-titulo { font-size:32px; margin-bottom:12px; }
.noche.alto .fr-cuerpo p { font-size:17px; line-height:1.4; margin-bottom:10px; }
.noche.alto .fr-pie .mp-barra { height:10px; border-radius:5px; grid-column:1 / -1; grid-row:1; }
.noche.alto .fr-pie .mp-ir { font-size:17px; }
.noche.alto .fr-ocultar { left:auto; right:22px; bottom:auto; top:92px; font-size:15px; }
.noche.alto.fr-on .noche-cuaderno { opacity:0 !important; pointer-events:none; }

/* ── EL ESCAPARATE: la pared de fotos que se enciende con destellos ── */
.es-fotos { background:none; }
.fr-t { position:absolute; border-radius:18px; background-size:cover; background-position:center; background-color:#3A3C40; }
.noche.alto .fr-t { border-radius:12px; }
/* el destello: el brillo blanco del logotipo (--n-brillo) y un velo blanco, ya pintados; sólo cambia su opacidad */
.fr-t::before, .fr-t::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none; }
.fr-t::before { box-shadow:var(--n-brillo), 0 0 34px rgba(242,242,244,.5); }
.fr-t::after { background:rgba(248,248,250,.9); }
.n-rec.centro .fr-t { animation:frTAparece 1.1s var(--dc-ease) var(--d) both; }
.n-rec.centro .fr-t::before { animation:frTBrillo 1.6s ease-out var(--d) both; }
.n-rec.centro .fr-t::after { animation:frTFlash .8s ease-out var(--d) both; }
@keyframes frTAparece { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@keyframes frTFlash { 0% { opacity:0; } 18% { opacity:.85; } 100% { opacity:0; } }
@keyframes frTBrillo { 0% { opacity:0; } 20% { opacity:1; } 100% { opacity:0; } }

/* ── 02/10: LA FOTO SIN TEXTO ── sin penumbra (no hay nada que leer): sólo
   un poco de sombra donde van el lugar·año y la barra. */
.fr.vacia .fr-lado { justify-content:flex-end; }
.fr:not(.editando) .fr-titulo:empty, .fr:not(.editando) .fr-cuerpo:empty { display:none; }
.fr.vacia:not(.editando) .fr-linea { margin:0; }

/* ── abajo a la izquierda: «ver imagen completa» y, sólo para Rolando,
   «editar · publicar · sin publicar» en la misma fila y con la misma letra ── */
.noche .fr-esquina { position:absolute; left:60px; bottom:40px; z-index:3; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 30px; }
.noche .fr-esquina .fr-ocultar, .noche.alto .fr-esquina .fr-ocultar { position:static; left:auto; right:auto; top:auto; bottom:auto; }
.noche .fr-esquina button, .fr-marca { font-size:24px; line-height:1; color:rgba(246,246,248,.8); text-shadow:0 1px 14px rgba(0,0,0,.45); transition:opacity .3s ease, color .3s ease; }
@media (any-hover: hover) { .noche .fr-esquina button:hover { color:#fff; } }
.fr-esquina [hidden] { display:none; }
.fr-marca { opacity:.55; }
.noche .fr-esquina .fr-publicar { color:#F2F2F4; text-shadow:var(--n-brillo); }
.noche.alto .fr-esquina { left:auto; right:22px; bottom:auto; top:92px; max-width:72%; justify-content:flex-end; gap:8px 18px; }
.noche.alto .fr-esquina button, .noche.alto .fr-marca { font-size:15px; }

/* ── ESCRIBIENDO ── su letra y su tamaño de siempre; sin cajas: el cursor y,
   en lo vacío, la pista en penumbra */
.fr.editando .fr-ocultar, .fr.editando .fr-oir, .fr.editando .fr-paises, .fr.editando .fr-revisar, .fr.editando .fr-pie { display:none; }
.fr.editando .fr-sombra { opacity:1; }
.fr.editando .fr-editar { color:#F2F2F4; text-shadow:var(--n-brillo); }
.fr-acciones { display:none; flex-wrap:wrap; gap:4px 22px; }
.fr.editando .fr-acciones { display:flex; }
.fr.editando [contenteditable] { outline:none; cursor:text; caret-color:#F2F2F4; min-height:1em; -webkit-user-select:text; user-select:text; }
.fr.editando .fr-linea[hidden] { display:block; }
.fr.editando .fr-cuerpo { white-space:pre-wrap; font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:23px; line-height:1.42; letter-spacing:.4px;
  color:rgba(246,246,248,.9); text-shadow:0 1px 14px rgba(0,0,0,.3); min-height:3em; }
.noche.alto .fr.editando .fr-cuerpo { font-size:17px; line-height:1.4; }
.fr.editando [data-ph]:empty::before { content:attr(data-ph); opacity:.36; text-shadow:none; pointer-events:none; }

/* ── REORGANIZAR (02/10): la tira de fotos del álbum, abajo ── */
.fr.ordenando .fr-ocultar, .fr.ordenando .fr-editar, .fr.ordenando .fr-marca, .fr.ordenando .fr-eliminar, .fr.editando .fr-orden, .fr.editando .fr-eliminar { display:none; }
/* la nota pequeña (en vez del aviso que tapa la vista) y su «deshacer» */
.fr-nota { font-size:20px; color:rgba(246,246,248,.7); text-shadow:0 1px 14px rgba(0,0,0,.45); }
.noche .fr-esquina .fr-nota button { font-size:inherit; color:#F2F2F4; text-shadow:var(--n-brillo); padding:0; background:none; border:0; cursor:pointer; }
.noche.alto .fr-nota { font-size:14px; }
.fr.ordenando .fr-orden { color:#F2F2F4; text-shadow:var(--n-brillo); }
.fr-tira { position:absolute; left:60px; right:60px; bottom:92px; z-index:4; opacity:0; translate:0 14px; pointer-events:none;
  transition:opacity .5s var(--dc-ease), translate .6s var(--dc-ease); }
.fr.ordenando .fr-tira { opacity:1; translate:0 0; pointer-events:auto; }
.fr-tira-t { font-size:20px; line-height:1.2; color:rgba(246,246,248,.75); text-shadow:0 1px 14px rgba(0,0,0,.45); }
/* sitio de sobra alrededor: el brillo de la elegida no se corta (la regla de las sombras) */
.fr-tira-in { display:flex; align-items:flex-end; gap:14px; overflow-x:auto; overflow-y:hidden; padding:44px 48px 40px; margin:-30px -48px -40px; scrollbar-width:none; }
.fr-tira-in::-webkit-scrollbar { display:none; }
.fr-mini { flex:none; height:96px; padding:0; border:0; background:none; cursor:pointer; }
.fr-mini i { display:block; width:100%; height:100%; border-radius:14px; background-size:cover; background-position:center; background-color:#3A3C40;
  opacity:.72; transition:opacity .3s ease, transform .45s var(--dc-ease), box-shadow .45s var(--dc-ease); }
.fr-mini.actual i { opacity:1; }
.fr-mini.sel i { opacity:1; transform:translateY(-14px) scale(1.1); box-shadow:0 0 0 2px rgba(242,242,244,.9), var(--n-brillo), 0 14px 30px rgba(0,0,0,.45); }
@media (any-hover: hover) { .fr-mini:hover i { opacity:1; } }
.noche.alto .fr-tira { left:16px; right:16px; bottom:40px; }
.noche.alto .fr-tira-t { font-size:15px; }
.noche.alto .fr-tira-in { gap:10px; padding:34px 24px 30px; margin:-22px -16px -30px; }
.noche.alto .fr-mini { height:64px; }
.noche.alto .fr-mini i { border-radius:10px; }

/* los niveles que aún no ha mirado (sólo él): «vale · otra vez · sin niveles» */
.fr-revisar { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 22px; }
.fr-revisar:empty { display:none; }
.fr-rev-t { font-size:22px; line-height:1.2; color:rgba(246,246,248,.62); }
.noche.alto .fr-rev-t { font-size:15px; }

@media (prefers-reduced-motion: reduce) { .fr-img-in { animation:none; transform:none; } .fr-foto { transition:opacity .3s ease; }
  .n-rec.centro .fr-t, .n-rec.centro .fr-t::before, .n-rec.centro .fr-t::after { animation:none; } }


/* ══ LA ТЕТРАДЬ, VENTANA DEL CLUB (23/09/2026 · frente/cuaderno-js.js) ══ */
/* el botón de la esquina se va: ahora es una ventana del escaparate */
.noche .noche-cuaderno { display:none !important; }

/* FUERA: las palabras llegan difuminadas desde los bordes, se acercan y
   una a una enfocan en el centro con su traducción. Cada una vive 36 s y
   hay 12, cada una 3 s detrás de la anterior: siempre hay una en el centro.
   Lo difuminado es la SOMBRA del texto (color transparente), pintada una
   vez; al moverse sólo cambian transform y opacity. */
.es-cua { --cp-t:96px; --cp-ru:34px; }
.noche.alto .es-cua { --cp-t:52px; --cp-ru:20px; }
.n-cp { position:absolute; left:50%; top:50%; display:grid; justify-items:center; white-space:nowrap; pointer-events:none; opacity:0;
  font-size:var(--cp-t); line-height:1.05; letter-spacing:0;
  animation:cpViene 48s cubic-bezier(.4,0,.2,1) var(--d, 0s) infinite; }
.n-cp.largo { font-size:calc(var(--cp-t) * .72); }
.n-cp > span { grid-area:1 / 1; }
.n-cp-b { color:transparent; text-shadow:0 0 .2em rgba(242,242,244,.9), 0 0 .5em rgba(242,242,244,.28);
  animation:cpBorra 48s linear var(--d, 0s) infinite; }
.n-cp-n { display:flex; flex-direction:column; align-items:center; color:#F2F2F4; text-shadow:var(--n-brillo); opacity:0;
  animation:cpEnfoca 48s linear var(--d, 0s) infinite; }
.n-cp-n small { margin-top:calc(var(--cp-t) * .16); font-size:var(--cp-ru); line-height:1.2; color:rgba(242,242,244,.72); text-shadow:none; }
/* 29/09: cada palabra en su sitio (--x, --y: arriba o abajo, sin tocar a las
   demás), casi quieta. En su turno (4 s cada una, 12 → 48 s) viaja al centro
   en 1 s, se lee 2,2 s y sube y se apaga en 0,8 s; la siguiente no sale de su
   sitio hasta que ésta se ha ido: un relevo, nunca dos a la vez en el centro. */
@keyframes cpViene {
  0%     { opacity:0;   transform:translate(-50%, -50%) translate(var(--x), var(--y)) scale(.5); }
  8%     { opacity:.5; }
  72.5%  { opacity:.62; transform:translate(-50%, -50%) translate(calc(var(--x) * .94), calc(var(--y) * .94)) scale(.56); }
  74.6%  { opacity:1;   transform:translate(-50%, -50%) scale(1); }
  79.2%  { opacity:1;   transform:translate(-50%, -50%) scale(1); }
  80.8%, 100% { opacity:0; transform:translate(-50%, -50%) translateY(-.22em) scale(1.03); }
}
@keyframes cpBorra  { 0%, 73.4% { opacity:1; } 74.6%, 100% { opacity:0; } }
@keyframes cpEnfoca { 0%, 73.4% { opacity:0; } 74.6%, 100% { opacity:1; } }
/* como las pistas de la música: quieto si no es el del centro o mientras se desliza */
.n-rec.lado .n-cp, .n-rec.lado .n-cp > span, .nv-esc.quieto .n-cp, .nv-esc.quieto .n-cp > span,
.nv-esc.moviendo .n-cp, .nv-esc.moviendo .n-cp > span { animation-play-state:paused; }
.n-cp-pie { position:absolute; left:0; right:0; bottom:7%; text-align:center; font-size:26px; line-height:1.3; color:rgba(242,242,244,.55); padding:0 24px; }
.noche.alto .n-cp-pie { font-size:17px; bottom:5%; }
@media (prefers-reduced-motion: reduce) {
  .n-cp { animation:none; opacity:0; }
  .n-cp:nth-of-type(2) { opacity:1; transform:translate(-50%, -50%); }
  .n-cp:nth-of-type(2) .n-cp-b { animation:none; opacity:0; }
  .n-cp:nth-of-type(2) .n-cp-n { animation:none; opacity:1; }
}

/* DENTRO: sin su propio título (ya lo pone la sala arriba a la derecha) */
.noche .nv-cua .ncu-panel.cu { background:none; }
/* de dónde venía: una opción en texto, como las de la casa */
.noche .cu-origen { display:block; margin-top:26px; font-size:24px; line-height:1.2; text-align:left; color:#F2F2F4; opacity:.55;
  transition:opacity var(--dc-t-lento, .45s) var(--dc-ease, ease); }
.noche .cu-origen:disabled { cursor:default; opacity:.4; }
@media (any-hover: hover) { .noche .cu-origen:not(:disabled):hover { opacity:1; } }
.noche.alto .cu-origen { font-size:16px; margin-top:14px; }
/* en la frase del cuaderno, la palabra lleva la misma marca amarilla */
.cu-ctx .cua-mia { font-style:normal; color:#fff; }
.cu-lista { -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 90px), transparent 100%); mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 90px), transparent 100%); }

/* LA MARCA en los textos del club: el rotulador de la pizarra, tal cual
   (.rd-w.hl-yellow + el barrido .rd-new-hl al guardarla) */
.noche .cua-mia, #folio-ov .cua-mia { color:inherit; }

/* la ficha del traductor: ya guardada, «открыть тетрадь» al lado */
.noche .tr-abrir-cua { font-size:18px; padding:8px 12px; color:#F2F2F4; opacity:.6; white-space:nowrap; }
.noche .tr-abrir-cua[hidden] { display:none; }
.noche:not(.casa) .tr-abrir-cua { font-size:var(--dc-fs-40); padding:calc(8 * var(--dc-u)) 0; transition:opacity var(--dc-t-lento) var(--dc-ease); }
@media (any-hover: hover) { .noche .tr-abrir-cua:hover { opacity:1; } }
/* ══ NOTAS POR PANTALLAS (29/09/2026 · trad-js.js _cuaPintarVista) ══
   Una palabra por pantalla, con la rejilla de las páginas de «más» (640 px
   | el resto) para que la palabra quede encima de «назад» y la frase encima
   de la barra. Nada se desliza en vertical: sólo la lista de «12 слов». */
.noche .ncu-panel.cu-pantallas .cu-cabeza { position:absolute; left:82px; top:168px; display:flex; align-items:baseline; gap:40px; z-index:3; transition:opacity .5s ease; }
.noche .ncu-panel.cu-pantallas .cu-cabeza .ent-op { font-size:24px; line-height:1; padding:6px 0; color:#F2F2F4; opacity:.55; background:none; border:0; cursor:pointer;
  transition:opacity var(--dc-t-lento, .45s) var(--dc-ease, ease), transform var(--dc-t-lento, .45s) var(--dc-ease, ease); }
.noche .ncu-panel.cu-pantallas .cu-cabeza .ent-op[hidden] { display:none; }
.noche .ncu-panel.cu-pantallas .cu-cabeza .cu-cuenta { opacity:.85; text-shadow:0 0 18px rgba(242,242,244,.3); }
@media (any-hover: hover) { .noche .ncu-panel.cu-pantallas .cu-cabeza .ent-op:hover { opacity:1; } }
.noche .ncu-panel.cu-pantallas .cu-caja { position:absolute; left:60px; right:90px; top:240px; bottom:190px; transition:opacity .6s ease, scale .8s var(--dc-ease); }
.noche .ncu-panel.cu-pantallas .cu-hoja { position:absolute; inset:0; }
.noche .cu-pantallas .cu-hoja-in { height:100%; display:grid; grid-template-columns:640px minmax(0, 1fr); column-gap:64px; align-items:center; padding-left:22px; box-sizing:border-box; margin:0; }
.noche .cu-pantallas .cu-lado-a, .noche .cu-pantallas .cu-lado-b { min-width:0; }
.noche .cu-pantallas .cu-lado-b { display:flex; flex-direction:column; align-items:flex-start; }
.noche .cu-pantallas .cu-ctx { margin-top:0; }
.noche .cu-pantallas .cu-ctx.cu-ayuda { font-family:inherit; font-style:normal; font-size:26px; opacity:.6; }
.noche .cu-pantallas .cu-origen { margin-top:30px; }
.noche .cu-pantallas .cu-quitar { margin-top:30px; font-size:20px; opacity:.4; color:#F2F2F4; background:none; border:0; padding:0; cursor:pointer; }
.noche .cu-pantallas .cu-es.cu-grande { font-size:104px; }
.noche .ncu-panel.cu-pantallas .cu-pie.mp-pie { position:absolute; left:60px; right:90px; bottom:56px; transition:opacity .6s ease; }
/* escribir una palabra tuya: un campo invisible con la letra de la palabra grande */
.noche .cu-pantallas .cu-campo { display:block; width:100%; border:0; outline:0; background:none; padding:0; margin:0; color:#F2F2F4; font-family:inherit; letter-spacing:inherit;
  caret-color:#F2F2F4; -webkit-user-select:text; user-select:text; border-radius:0; box-shadow:none; }
.noche .cu-pantallas .cu-campo::placeholder { color:rgba(242,242,244,.28); text-shadow:none; }
.noche .cu-pantallas .cu-ru-suelta:empty { display:none; }
.noche .cu-pantallas .cu-lado-b .ent-op { font-size:40px; line-height:1; color:#F2F2F4; background:none; border:0; padding:8px 0; cursor:pointer; text-shadow:var(--n-brillo);
  transition:opacity var(--dc-t-lento, .45s) var(--dc-ease, ease); }
.noche .cu-pantallas .cu-traducir { opacity:.25; pointer-events:none; }
.noche .cu-pantallas .cu-traducir.lista { opacity:1; pointer-events:auto; }
.noche .cu-pantallas .cu-guardar:disabled { opacity:.45; text-shadow:none; cursor:default; }
/* «12 слов»: la lista de todas, con la letra de los géneros de la música */
.noche .ncu-panel.cu-pantallas .cu-indice { left:60px; top:230px; bottom:40px; right:auto; gap:6px; padding:10px 40px 80px 22px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  opacity:0; translate:-24px 0; pointer-events:none; transition:opacity .45s ease, translate .7s var(--dc-ease);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 90px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 90px), transparent 100%); }
.noche .ncu-panel.cu-pantallas .cu-indice::-webkit-scrollbar { display:none; }
.noche .ncu-panel.cu-pantallas .cu-indice[hidden] { display:none !important; }
.noche .ncu-panel.cu-pantallas .cu-indice.abierto { opacity:1; translate:0 0; pointer-events:auto; }
.noche .cu-indice .nm-genero { font-size:52px; display:flex; align-items:baseline; gap:18px; background:none; border:0; padding:0; cursor:pointer; }
.noche .cu-indice .nm-genero.on { font-size:60px; }
.noche .cu-indice .nm-genero small { font-size:20px; color:rgba(242,242,244,.5); text-shadow:none; }
.noche .ncu-panel.cu-pantallas.eligiendo .cu-caja, .noche .ncu-panel.cu-pantallas.eligiendo .cu-pie { opacity:0; scale:.97; pointer-events:none; }

/* ── en el móvil: la palabra arriba, la frase debajo; la barra abajo ── */
.noche.alto .ncu-panel.cu-pantallas .cu-cabeza { left:24px; top:104px; gap:26px; }
.noche.alto .ncu-panel.cu-pantallas .cu-cabeza .ent-op { font-size:17px; }
.noche.alto .ncu-panel.cu-pantallas .cu-caja { left:24px; right:24px; top:150px; bottom:96px; }
.noche.alto .cu-pantallas .cu-hoja-in { grid-template-columns:minmax(0, 1fr); grid-auto-rows:min-content; align-content:center; row-gap:26px; padding-left:0; }
.noche.alto .cu-pantallas .cu-es.cu-grande { font-size:56px; }
.noche.alto .cu-pantallas .cu-ctx.cu-ayuda { font-size:17px; }
.noche.alto .cu-pantallas .cu-origen, .noche.alto .cu-pantallas .cu-quitar { margin-top:16px; }
.noche.alto .cu-pantallas .cu-quitar { font-size:15px; }
.noche.alto .cu-pantallas .cu-lado-b .ent-op { font-size:26px; }
.noche.alto .ncu-panel.cu-pantallas .cu-pie.mp-pie { left:0; right:0; bottom:16px; }
.noche.alto .ncu-panel.cu-pantallas .cu-indice { left:24px; right:24px; top:140px; bottom:24px; flex-direction:column; align-items:flex-start; flex-wrap:nowrap; padding:10px 0 80px; }
.noche.alto .cu-indice .nm-genero { font-size:32px; gap:12px; }
.noche.alto .cu-indice .nm-genero.on { font-size:38px; }
.noche.alto .cu-indice .nm-genero small { font-size:14px; }


/* ══ FOLIO, LA REVISTA DEL CLUB (28/09/2026 · frente/folio-js.js) ══════════
   El diseño de la app Folio (revista-6.html) en la sala del club: el tablero
   de píldoras de alto distinto en columnas, la portada primero, y el lector.
   La letra y la sala, las del club; la foto de cada artículo, DENTRO de su
   píldora, fundiéndose hacia el texto. Nada en mayúsculas.
   29/09: el ARTÍCULO va por pantallas (.fo-caja), con la pieza de las
   páginas de «más» abajo (.mp-pie: la barra de metal y «назад · дальше»);
   el TABLERO es la excepción (Rolando): se hojea desplazándose, cada
   píldora a su alto. Sólo se anima transform y opacity. */
.fo { position:absolute; inset:0; color:#F2F2F4; font-family:var(--dc-font); }
.fo button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; }
/* ── EL TABLERO: se desplaza (la excepción), por debajo del logotipo ── */
.fo-feed { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; touch-action:pan-y;
  transition:opacity .5s var(--dc-ease), transform .7s var(--dc-ease); }
.fo-feed::-webkit-scrollbar { display:none; }
.fo-lista { width:1080px; margin:0 auto; padding:168px 0 110px; }
.fo-cab { display:flex; align-items:center; gap:14px; padding:0 6px; opacity:0; transform:translateY(14px); transition:opacity .7s ease .15s, transform .9s var(--dc-ease) .15s; }
.fo-ico { width:40px; height:40px; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.35); }
/* 29/09 (Rolando): sin la ñ ni «hablamosclub»: sólo «revista», en minúsculas, con la sombra blanca de la casa */
.fo-cab { align-items:baseline; }
.fo-marca { font-size:40px; line-height:1; color:#F2F2F4; text-shadow:var(--n-brillo); }
.fo-fecha { margin-left:auto; font-size:20px; opacity:.5; }
.fo-saludo { font:inherit; font-size:76px; line-height:1; letter-spacing:-.02em; margin:34px 6px 0; opacity:0; transform:translateY(14px); transition:opacity .7s ease .25s, transform .9s var(--dc-ease) .25s; }
.fo-saludo span { opacity:.5; }
.fo-niveles { display:flex; flex-wrap:wrap; gap:14px 30px; margin:30px 6px 0; }
.fo-feed .fo-niveles { opacity:0; transition:opacity .7s ease .4s; }
.noche .fo-niveles .ent-op { font-size:24px; line-height:1; padding:4px 0; }
.fo.llega .fo-cab, .fo.llega .fo-saludo { opacity:1; transform:none; }
.fo.llega .fo-feed .fo-niveles { opacity:1; }
/* las columnas de Folio: se reparten de izquierda a derecha a la columna más corta */
.fo-mosaico { display:flex; align-items:flex-start; gap:22px; margin-top:40px; transition:opacity .32s ease; }
.fo-mosaico.cruza { opacity:0; }
.fo-colm { flex:1 1 0; min-width:0; }
.fo-carta.libre { flex:none; width:100%; margin:0 0 22px; opacity:0; }
.fo.llega .fo-carta.libre { animation:foSube .8s var(--dc-ease) both; animation-delay:calc(.35s + min(var(--i), 8) * 70ms); }
.fo-mosaico.sin-entrada .fo-carta.libre { animation:none !important; opacity:1; }
.fo.llega .fo-carta.libre.leida { animation-name:foSubeLeida; }
.fo-mosaico.sin-entrada .fo-carta.libre.leida { opacity:.5; }
@keyframes foSube { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }   /* translate, no transform: así el «hover» sigue funcionando */
@keyframes foSubeLeida { from { opacity:0; translate:0 18px; } to { opacity:.5; translate:0 0; } }

/* ── EL ARTÍCULO: encima del tablero, una pantalla cada vez ── */
.fo-lect { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .45s ease; }
.fo.leyendo .fo-lect { opacity:1; pointer-events:auto; transition:opacity .7s ease .2s; }
.fo.leyendo .fo-feed { opacity:0; transform:scale(.985); pointer-events:none; }
/* la pantalla: entre el logotipo y la barra, a lo ancho de las páginas de «más» */
.fo-caja { position:absolute; left:90px; right:90px; top:150px; bottom:190px; }
.fo-hoja { position:absolute; inset:0; }
/* abajo, la barra de metal y «назад · дальше» (la pieza de «más», con su rejilla: 640 px | la barra) */
.fo-pie.mp-pie { position:absolute; left:90px; right:90px; bottom:56px; }

/* ── LA PÍLDORA: en el tablero, a su alto (el texto abajo y, encima, sitio para la foto) ── */
.fo-carta { position:relative; flex:1 1 0; min-height:0; display:flex !important; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate;
  border-radius:calc(28 * var(--nu)); background:linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  box-shadow:0 30px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform var(--dc-t-lento) var(--dc-ease), opacity .45s ease; }
@media (any-hover:hover) { .fo-carta:hover { transform:translateY(-3px) scale(1.012); } }
.fo-carta:active { transform:scale(.985); transition-duration:.12s; }
/* la foto: llena la píldora y se va fundiendo hacia el texto; en las altas se ve más */
.fo-foto { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 34%, rgba(0,0,0,.3) 72%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 34%, rgba(0,0,0,.3) 72%, transparent 100%); }
.fo-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.fo-carta.alta .fo-foto { opacity:.72; }
.fo-carta.portada .fo-foto { opacity:.92; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.18) 100%); mask-image:linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.18) 100%); }
/* un velo encima de la foto: con las fotos claras (el casete, la almohada) el texto blanco no se leía */
.fo-carta::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(10,10,12,.16) 0%, rgba(10,10,12,.3) 45%, rgba(10,10,12,.64) 100%); }
.fo-txt { display:flex; flex-direction:column; padding:24px 26px 24px; }
.fo-carta.libre .fo-txt { padding-top:120px; }
.fo-carta.libre.grande .fo-txt { padding-top:190px; }
.fo-carta.libre.portada .fo-txt { padding-top:250px; }
.fo-carta.libre.grande .fo-foto { opacity:.72; }
.fo-cat { font-size:18px; color:#FFD84A; opacity:.92; margin-bottom:9px; }
.fo-tit { font-size:27px; line-height:1.07; letter-spacing:-.012em; text-shadow:0 2px 14px rgba(0,0,0,.45);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fo-carta.alta .fo-tit, .fo-carta.libre.grande .fo-tit { font-size:33px; -webkit-line-clamp:4; }
.fo-carta.libre .fo-tit { -webkit-line-clamp:5; }
.fo-carta.portada .fo-tit { font-size:38px; line-height:1.03; }
.fo-res { margin-top:10px; font-size:17px; line-height:1.36; opacity:.66;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fo-carta.alta .fo-res { -webkit-line-clamp:4; font-size:18px; }
.fo-carta.libre .fo-res { -webkit-line-clamp:3; }
.fo-carta.libre.grande .fo-res { -webkit-line-clamp:5; }
.fo-carta.libre.portada .fo-res { -webkit-line-clamp:4; font-size:19px; opacity:.78; }
.fo-meta { display:flex; align-items:center; gap:9px; margin-top:14px; font-size:15px; opacity:.45; }
.fo-meta i { width:3px; height:3px; border-radius:50%; background:currentColor; }
/* leída: se apaga, como en Folio */
.fo-carta.leida { opacity:.5 !important; }

/* ── EL ARTÍCULO: su portada (la foto a la izquierda, como el visual de «más»; el texto a la derecha) ── */
.fo-portada { position:absolute; inset:0; display:grid; grid-template-columns:640px minmax(0, 1fr); column-gap:64px; align-items:center; padding-left:22px; }
.fo-art-foto { margin:0; width:640px; height:min(calc(100% - 34px), 450px); border-radius:calc(28 * var(--nu)); overflow:hidden; background:rgba(255,255,255,.04); box-shadow:0 30px 60px rgba(0,0,0,.34); }
.fo-art-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.fo-art-tema { display:flex; align-items:baseline; gap:14px; }
.fo-art-tema .fo-cat { margin:0; font-size:20px; }
.fo-art-min { font-size:18px; opacity:.45; }
.fo-art-cab h1 { font:inherit; font-size:52px; line-height:1.03; letter-spacing:-.022em; margin:16px 0 18px; text-wrap:balance; }
.fo-entra { font-size:21px; line-height:1.42; opacity:.66; margin:0; }
.fo-art-niv { margin-top:26px; }
/* el texto: una revista abierta - dos columnas en el ordenador, una en el móvil */
.fo-pliego { position:absolute; inset:0; display:flex; gap:90px; }
.fo-col { flex:1 1 0; min-width:0; }
.fo-col p { font-size:21px; line-height:1.6; margin:0 0 .85em; color:rgba(242,242,244,.92); }
.fo-col p.primera::first-letter { font-size:3.2em; float:left; line-height:.8; padding:.07em .09em 0 0; color:#F2F2F4; text-shadow:var(--n-brillo); }   /* 29/09: con la sombra blanca */
.fo .folio-g { text-decoration:underline dotted rgba(242,242,244,.5); text-decoration-thickness:1.5px; text-underline-offset:.22em; cursor:pointer; }
/* la última: «siguiente para ti» (sin el ❦) */
.fo-fin { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* el crédito de la foto, debajo de la foto */
.fo-art-fotocol { display:flex; flex-direction:column; min-height:0; }
.noche .fo-art-fotocol .folio-credito { font-family:var(--dc-font); font-size:15px; opacity:.4; margin:12px 0 0 4px; color:inherit; text-align:left; }
.noche .fo-art-fotocol .folio-credito a { color:inherit; text-decoration:underline; text-underline-offset:.2em; }
.fo-sig-tit { font-size:22px; opacity:.55; margin:0 0 16px; align-self:center; }
.fo-sig { width:560px; height:280px; display:flex; }

/* ── LA PALABRA QUE SE LEVANTA (la de .w-chip.selected del banco de palabras) ── */
.fo-texto .fo-alzable { display:inline-block; transform-origin:50% 85%;
  transition:transform var(--dc-t-lento) var(--dc-ease), text-shadow var(--dc-t-lento) var(--dc-ease), color var(--dc-t-lento) var(--dc-ease); }
.fo-texto .fo-alzable.alzada { color:#fff; transform:translateY(calc(-8 * var(--nu))) scale(1.08);
  text-shadow:0 calc(16 * var(--nu)) calc(26 * var(--nu)) rgba(0,0,0,.62), 0 calc(28 * var(--nu)) calc(44 * var(--nu)) rgba(0,0,0,.3); }
/* sin el recuadro de la selección: lo que se ve es la palabra que sube */
.noche .fo .fo-texto *::highlight(tr-sel), .noche .fo .fo-texto::highlight(tr-sel) { background-color:transparent; }

/* ── EN EL MÓVIL ── */
.noche.alto .fo-caja { left:18px; right:18px; top:112px; bottom:86px; }
.noche.alto .fo-pie.mp-pie { left:0; right:0; bottom:16px; }
.noche.alto .fo-lista { width:auto; padding:124px 14px 90px; }
.noche.alto .fo-cab { gap:10px; padding:0 4px; }
.noche.alto .fo-ico { width:30px; height:30px; border-radius:8px; }
.noche.alto .fo-marca { font-size:28px; }
.noche.alto .fo-fecha { font-size:14px; }
.noche.alto .fo-saludo { font-size:40px; margin:22px 4px 0; }
.noche.alto .fo-niveles { gap:10px 22px; margin:20px 4px 0; }
.noche.alto .fo-niveles .ent-op { font-size:18px; }
.noche.alto .fo-mosaico { gap:10px; margin-top:24px; }
.noche.alto .fo-carta.libre { margin-bottom:10px; }
.noche.alto .fo-carta.libre .fo-txt { padding-top:74px; }
.noche.alto .fo-carta.libre.grande .fo-txt { padding-top:112px; }
.noche.alto .fo-carta.libre.portada .fo-txt { padding-top:140px; }
.noche.alto .fo-carta.libre .fo-res { display:-webkit-box; font-size:12.5px; margin-top:7px; -webkit-line-clamp:3; }
.noche.alto .fo-art-niv { margin:14px 0 0; }
.noche.alto .fo-carta { border-radius:calc(28 * var(--nu) * 1.2); box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07); }
.noche.alto .fo-txt { padding:13px 13px 14px; }
.noche.alto .fo-cat { font-size:12px; margin-bottom:5px; }
.noche.alto .fo-tit { font-size:16.5px; line-height:1.1; -webkit-line-clamp:4; }
.noche.alto .fo-carta.alta .fo-tit { font-size:19px; -webkit-line-clamp:5; }
.noche.alto .fo-carta.portada .fo-tit { font-size:21px; }
.noche.alto .fo-res { display:none; }
.noche.alto .fo-carta.alta .fo-res { display:-webkit-box; font-size:12.5px; margin-top:7px; -webkit-line-clamp:3; }
.noche.alto .fo-meta { font-size:11px; gap:6px; margin-top:8px; }
.noche.alto .fo-portada { display:flex; flex-direction:column; gap:22px; padding:0; align-items:stretch; }
.noche.alto .fo-art-fotocol { flex:1 1 0; }
.noche.alto .fo-art-foto { width:100%; height:auto; flex:1 1 0; min-height:0; border-radius:calc(28 * var(--nu) * 1.2); }
.noche.alto .fo-art-cab { flex:none; }
.noche.alto .fo-art-tema .fo-cat { font-size:14px; }
.noche.alto .fo-art-min { font-size:13px; }
.noche.alto .fo-art-cab h1 { font-size:30px; margin:10px 0 12px; }
.noche.alto .fo-entra { font-size:16px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.noche.alto .fo-col p { font-size:17.5px; line-height:1.58; }
.noche.alto .fo-art-fotocol .folio-credito { font-size:11px; margin-top:8px; }
.noche.alto .fo-sig-tit { font-size:16px; }
.noche.alto .fo-sig { width:100%; height:250px; }

@media (prefers-reduced-motion: reduce) {
  .fo-carta, .fo-texto .fo-alzable { transition:none !important; }
}

/* ── 04/10 · UNA FOTO POR TROZO (folio-js: _foFotos) ──
   Detrás, la foto de ese trozo ya difuminada (horneada), con el velo oscuro
   que deja leer; el texto a la derecha; «смотреть фото» aparta el texto y
   enseña la foto viva. Sólo fundidos: nada se desenfoca en vivo. */
.fo-pliego.fo-confoto { display:block; border-radius:26px; overflow:hidden; }
.fo-fondo { position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity .7s ease; }
.fo-fondo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,12,14,.18) 0%, rgba(12,12,14,.52) 44%, rgba(12,12,14,.74) 100%); }
.fo-nitida { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }
.fo-confoto .fo-col { position:absolute; top:42px; right:48px; bottom:70px; width:min(620px, 46%); transition:opacity .5s ease, transform .6s cubic-bezier(.25,.1,.25,1); }
.fo-confoto .fo-col p { text-shadow:0 2px 14px rgba(0,0,0,.45); }
.fo-verfoto { position:absolute; left:40px; bottom:30px; z-index:3; font-size:24px; line-height:1; padding:12px 0; opacity:.8; }   /* 06/10: es el botón de siempre (.ent-op: texto con brillo, sin cápsula); aquí sólo el sitio y el tamaño, como los niveles */
.fo-foto-cred { position:absolute; right:48px; bottom:34px; z-index:3; font-size:12px; color:rgba(242,242,244,.5); text-decoration:none; opacity:0; transition:opacity .5s ease; }
.fo-confoto.ver .fo-fondo { opacity:0; }
.fo-confoto.ver .fo-nitida, .fo-confoto.ver .fo-foto-cred { opacity:1; }
.fo-confoto.ver .fo-col { opacity:0; transform:translateX(24px); pointer-events:none; }
.noche.alto .fo-confoto .fo-col { left:20px; right:20px; top:auto; bottom:70px; width:auto; max-height:calc(100% - 110px); overflow:hidden; }
.noche.alto .fo-fondo::after { background:linear-gradient(180deg, rgba(12,12,14,.2) 0%, rgba(12,12,14,.55) 40%, rgba(12,12,14,.8) 100%); }
.noche.alto .fo-verfoto { left:20px; bottom:20px; font-size:18px; padding:10px 0; }
.noche.alto .fo-foto-cred { right:20px; bottom:26px; }
@media (prefers-reduced-motion: reduce) { .fo-fondo, .fo-nitida, .fo-confoto .fo-col { transition:none; } }


/* «без учителя» y el destello del pago (24/09/2026) - sólo opacity/transform */
.nace-ov { position: fixed; inset: 0; z-index: 1400; pointer-events: none; }
.nace-luz { position: absolute; inset: 0; background: #fff; opacity: 0;
  animation: naceLuz 1.5s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes naceLuz { 0% { opacity: 0; } 22% { opacity: .92; } 100% { opacity: 0; } }
/* «más» en la esquina, grande, con el metal de la casa (.m-mas .cr-tier-t) */
.nace-mas { position: absolute; right: clamp(20px, 4vw, 72px); bottom: clamp(20px, 5vh, 64px);
  font-size: clamp(84px, 13vw, 210px); line-height: 1; opacity: 0; transform: translateY(18px) scale(.92);
  transform-origin: right bottom; animation: naceMas 1.4s cubic-bezier(.2,.8,.2,1) .5s forwards; }
.nace-mas .cr-tier-t { font-size: inherit !important; line-height: 1; }
.nace-mas .mas-luz { display: none; }
/* 29/09 - «solo» (lo que se paga al mes): la letra de la casa, blanca con su brillo, sin metal */
.nace-mas .nace-solo-t { display: inline-block; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 0 26px rgba(242,242,244,.55), 0 0 80px rgba(242,242,244,.2), 0 6px 30px rgba(0,0,0,.16); }
@keyframes naceMas { to { opacity: 1; transform: none; } }
.nace-ov.fin .nace-mas { opacity: 1; transform: none; animation: naceMasFin 1.3s ease forwards; }
@keyframes naceMasFin { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
/* la pestaña: crece desde nada, se pasa un poco y se asienta; el brillo es
   una sombra blanca en una capa aparte que sólo cambia de opacidad */
.aula-tab.naciendo { position: relative; animation: naceTab 1.5s cubic-bezier(.2,.9,.25,1.25) both; }
@keyframes naceTab { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.22); } 100% { opacity: 1; transform: scale(1); } }
.aula-tab.naciendo::after { content: ''; position: absolute; inset: -4px; border-radius: var(--dc-r-nav, 34px); pointer-events: none;
  box-shadow: 0 0 34px 10px rgba(255,255,255,.95), 0 0 90px 24px rgba(255,255,255,.55); opacity: 0;
  animation: naceBrillo 5.4s ease-out .3s forwards; }
@keyframes naceBrillo { 0% { opacity: 0; } 18% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 0; } }
/* el halo: un degradado radial blanco (sin desenfoque en vivo) que sólo
   cambia de opacidad y escala, centrado sobre la pestaña que nace */
.nace-halo { position: absolute; transform: translate(-50%, -50%) scale(.4); opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0) 30%, rgba(255,255,255,.9) 52%, rgba(255,255,255,.35) 75%, rgba(255,255,255,0));   /* corona: el centro, donde van las letras blancas, se queda limpio */
  animation: naceHalo 5s cubic-bezier(.2,.8,.2,1) .15s forwards; }
@keyframes naceHalo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  60% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
/* la pestaña «más» de la parte clara: el logo de metal del club (.m-mas
   .cr-tier-t) al tamaño de sus vecinas, un punto mayor, como en la noche */
.aula-tab.tab-mas .mp-metal { font-size: 1.22em; line-height: 1; vertical-align: -0.06em; }
.aula-tab.tab-mas .mp-metal .cr-tier-t { font-size: inherit !important; line-height: 1; }
.aula-tab.tab-mas .mp-metal .mas-luz { display: none; }
/* en «más» la píldora es la del club, el metal oscuro (#3D424A → #AAAEB0):
   plata sobre plata no se leía */
#screen-home .alumno-tabs:has(.tab-mas.active) .aula-tab-indicator, #screen-student .alumno-tabs:has(.tab-mas.active) .aula-tab-indicator {
  background: linear-gradient(90deg, #3D424A, #AAAEB0); }
/* en el club (25/09 noche): la corona sobre «clases», por encima de la sala */
.nace-ov.nace-ov-club { z-index: 2300; }
.noche .n-tabs .n-tab-puente.nace-enciende { color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.7); transition: color .6s ease, text-shadow .6s ease; }
/* el tutor, debajo de las lecciones */
#alumno-panel-auto .auto-tg { display: flex; flex-direction: column; align-items: center; gap: var(--dc-sp-10, 10px); margin: var(--dc-sp-40, 40px) auto var(--dc-sp-60, 60px); text-align: center; }
#alumno-panel-auto .auto-tg-sub { max-width: 30em; opacity: .6; }
#alumno-panel-auto .auto-pie { text-align: center; margin: var(--dc-sp-24, 24px) auto 0; max-width: 30em; opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .nace-luz, .nace-mas, .nace-halo, .aula-tab.naciendo, .aula-tab.naciendo::after { animation-duration: .01s; }
}
/* 30/09 - EL DESTELLO DEL PAGO ES SÓLO ESTO (Rolando: «simplemente destello
   de sombra blanca en solo»): la palabra de lo que acaba de llegar -la
   pestaña «solo» del club o de lo claro- se enciende con la sombra blanca de
   la casa, sube y se queda en un brillo suave. Sin luz de pantalla ni aro. */
.noche .n-tabs .n-tab.nace-brilla, #screen-home .aula-tab.nace-brilla { animation:naceBrilla 5.4s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes naceBrilla {
  0%   { text-shadow:0 0 0 rgba(255,255,255,0); }
  20%  { color:#fff; text-shadow:0 0 8px #fff, 0 0 26px rgba(255,255,255,.95), 0 0 64px rgba(255,255,255,.72), 0 0 120px rgba(255,255,255,.45); }
  100% { color:#fff; text-shadow:0 0 22px rgba(255,255,255,.4); }
}
/* «más» es metal (texto recortado): su brillo va por fuera, con drop-shadow */
.noche .n-tabs .n-tab.nace-brilla .mp-metal { animation:naceBrillaMetal 5.4s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes naceBrillaMetal {
  0%   { filter:none; }
  20%  { filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 34px rgba(255,255,255,.8)); }
  100% { filter:drop-shadow(0 0 14px rgba(255,255,255,.35)); }
}
@media (prefers-reduced-motion: reduce) { .nace-brilla, .nace-brilla .mp-metal { animation-duration:.01s !important; } }


/* ══ TU TARJETA ES TU LLAVE (25/09/2026) ══ */
.cu-boton { display:inline-flex; align-items:center; gap:12px; padding:0; border:0; background:none; cursor:pointer; font-family:var(--dc-font, 'Coolvetica', sans-serif);
  color:rgba(242,242,244,.86); -webkit-tap-highlight-color:transparent; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.cu-boton[hidden] { display:none !important; }
.cu-boton:active { transform:scale(.96); }
@media (any-hover:hover) { .cu-boton:hover { transform:scale(1.04); } }
/* la tarjeta en pequeño: los mismos metales que la de verdad (carnet-css) */
.cu-mini { position:relative; display:inline-block; width:72px; height:45px; border-radius:5px; overflow:hidden; flex:0 0 auto; isolation:isolate;
  box-shadow:0 8px 20px rgba(10,12,16,.4); }
/* la tarjeta de verdad (780×492) a escala; quieta por dentro: su brillo lento
   repintaría el texto en cada fotograma, y está siempre a la vista */
.cu-mini-carta .cr-carta { position:absolute; left:0; top:0; transform:scale(.0923); transform-origin:0 0; box-shadow:none; }
.cu-mini-carta .cr-carta, .cu-mini-carta .cr-carta * { animation:none !important; transition:none !important; }
.cu-mini-carta .mas-luz { display:none; }
.cu-mini.vacia { opacity:.62; }
/* el brillo: una franja de luz que cruza (sólo transform) cada 7 s */
.cu-mini::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 65%);
  transform:translateX(-130%); animation:cuBrillo 7s cubic-bezier(.45,0,.2,1) 1.5s infinite; }
@keyframes cuBrillo { 0% { transform:translateX(-130%); } 22%, 100% { transform:translateX(130%); } }
@media (prefers-reduced-motion:reduce) { .cu-mini::after { animation:none; opacity:0; } }
.cu-t { font-size:24px; letter-spacing:.01em; white-space:nowrap; color:#F2F2F4;
  /* el brillo de la casa (el del logotipo): sombra blanca */
  text-shadow:0 0 18px rgba(242,242,244,.42), 0 0 44px rgba(242,242,244,.16); }
.cu-claro .cu-t { font-size:19px; }
@media (max-width:700px) { .cu-claro .cu-t { font-size:15px; } }
/* la línea base del logo (la mide _cuentaAlinear) */
.cu-boton { translate:0 var(--cu-dy, 0px); }
.cu-base { display:inline-block; width:0; height:0; overflow:hidden; vertical-align:baseline; }

/* en el club: arriba a la derecha, a la altura del logo; sólo en el escaparate
   (dentro de una ventana, esa esquina es del título de la ventana) */
/* 25/09 noche: la línea base del logo, YA en su sitio (48+36 / 38+20, lo que
   medía _cuentaAlinear): antes nacía 36 px más arriba y bajaba de un salto */
.noche .cu-club { position:absolute; right:56px; top:84px; z-index:9; }
.noche.alto .cu-club { right:24px; top:58px; }
.noche .cu-club, html.cab-club #screen-home .cu-claro { --cu-dy:0px; }
.noche.alto .cu-club .cu-t { font-size:16px; }
/* en el móvil el logo ocupa media anchura: sólo «вход» junto a la tarjeta */
.cu-t-corto { display:none; }
.noche.alto .cu-club .cu-t-largo { display:none; }
.noche.alto .cu-club .cu-t-corto { display:inline; }
.noche.alto .cu-club .cu-mini { width:56px; height:35px; border-radius:4px; }
.noche.alto .cu-club .cu-mini-carta .cr-carta { transform:scale(.16); }   /* en el club del móvil la tarjeta mide 350 (carnet-css), no 780 */
.noche:not(.lista) .cu-club, .noche:not([data-vista="esc"]) .cu-club { opacity:0; pointer-events:none; }

/* «clases», el puente, al final de la barra del club. 25/09 (noche): sin
   flecha, como «club» en la barra clara - las dos barras son la misma, sólo
   cambia el modo (Rolando) */
.noche .n-tabs .n-tab-puente { color:rgba(242,242,244,.5); }

/* en la escuela (lo claro): la tarjeta en el sitio de «Salir», que ahora vive dentro del panel */
html.cu-con-tarjeta #logout-btn { display:none !important; }
.cu-claro { align-self:center; }
.cu-claro .cu-mini { width:60px; height:38px; border-radius:4px; }
.cu-claro .cu-mini-carta .cr-carta { transform:scale(.077); }

/* el panel de tu cuenta - 25/09 (noche), Rolando: «que la tarjeta que sale
   sea mucho más grande… que ese menú tenga el mismo lenguaje visual que toda
   la plataforma, que las opciones se vean iguales». Es el aviso de la casa
   (.aviso-ov / .aviso-op): lo de detrás desenfocado con el mismo velo, la
   tarjeta grande a la izquierda y las opciones en Coolvetica a 60 con la
   sombra fuerte; al acercarte a una, las demás se apagan. */
#cuenta-ov { position:fixed; inset:0; z-index:2450;   /* por encima del club (#noche, 2200) */ display:flex; align-items:center; justify-content:center; pointer-events:none;
  padding:var(--dc-sp-60, 60px) var(--dc-sp-76, 76px); box-sizing:border-box; }
#cuenta-ov .cu-velo { position:absolute; inset:0; background:rgba(30,40,55,.14); opacity:0; transition:opacity .34s var(--dc-ease);
  -webkit-backdrop-filter:blur(26px) saturate(130%); backdrop-filter:blur(26px) saturate(130%); }
html.sin-desenfoque #cuenta-ov .cu-velo { background:rgba(30,40,55,.88); -webkit-backdrop-filter:none; backdrop-filter:none; }
#cuenta-ov .cu-caja { position:relative; display:flex; flex-direction:row; align-items:center; gap:calc(96 * var(--dc-u, .75px)); opacity:0;
  transform:scale(.985); filter:blur(2px); transition:opacity .34s var(--dc-ease), transform var(--dc-t-entrada) var(--dc-ease), filter var(--dc-t-entrada) var(--dc-ease); }
#cuenta-ov.on { pointer-events:auto; }
#cuenta-ov.on .cu-velo { opacity:1; }
#cuenta-ov.on .cu-caja { opacity:1; transform:none; filter:none; }
/* la tarjeta de verdad (780×492) casi a su tamaño: --cu-k la escala */
#cuenta-ov .cu-carta { position:relative; flex:none;
  width:calc(780px * var(--cu-k, .6)); height:calc(492px * var(--cu-k, .6)); }
#cuenta-ov .cu-carta .cr-carta { position:absolute; left:0; top:0; transform:scale(var(--cu-k, .6)); transform-origin:0 0; box-shadow:0 40px 90px rgba(20,30,45,.45); }
#cuenta-ov .cu-ops { display:flex; flex-direction:column; align-items:flex-start; gap:calc(34 * var(--dc-u, .75px)); }
#cuenta-ov .ent-op { font-family:var(--dc-font); font-weight:var(--dc-weight); font-size:var(--dc-fs-60); line-height:1; letter-spacing:var(--dc-tracking);
  color:var(--dc-ink); text-shadow:var(--dc-shadow-text-strong); text-transform:lowercase; background:none; border:0; cursor:pointer; opacity:1;
  padding:var(--dc-sp-24) var(--dc-sp-36); margin:calc(var(--dc-sp-24) * -1) calc(var(--dc-sp-36) * -1);
  transform-origin:left center; transition:transform var(--dc-t-lento) var(--dc-ease), opacity var(--dc-t-lento) var(--dc-ease); }
#cuenta-ov .ent-op:focus { outline:none; }
#cuenta-ov .ent-op:active { transform:scale(.985); }
@media (any-hover:hover) {
  #cuenta-ov .cu-ops:has(.ent-op:hover) .ent-op:not(:hover) { opacity:.42; }
  #cuenta-ov .ent-op:hover { transform:scale(1.08); }
}
/* «закрыть» es la salida, no una opción más: más pequeña y apagada */
#cuenta-ov .ent-op.cu-cerrar { font-size:var(--dc-fs-40); opacity:.55; margin-top:calc(var(--dc-sp-24) * -.2); }
@media (max-width:700px) {
  #cuenta-ov { padding:24px 20px; }
  #cuenta-ov .cu-caja { flex-direction:column; align-items:flex-start; gap:40px; }
  #cuenta-ov .cu-ops { gap:22px; }
  #cuenta-ov .ent-op { font-size:var(--dc-fs-60, 34px); }
  #cuenta-ov .ent-op.cu-cerrar { font-size:var(--dc-fs-40, 24px); }
}
@media (prefers-reduced-motion:reduce) { #cuenta-ov .cu-velo, #cuenta-ov .cu-caja { transition-duration:.01s; } }

/* ══ LA PUERTA POR MODOS (25/09, 2.ª vuelta) ══ */
#muro .mu-lado .mu-plan-t { font-size:18px; color:rgba(242,242,244,.62); text-align:center; }
#muro .mu-tres { display:flex; gap:22px; align-items:flex-start; }
#muro .mu-item { display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto; }
#muro .mu-tres .mu-carta { width:200px; height:126px; }
#muro .mu-tres .mu-carta .cr-carta { transform:scale(.2564); }
#muro .mu-cap { font-size:20px; color:rgba(242,242,244,.85); }
#muro .mu-cap .mp-metal { font-size:22px; }
/* la pizarra en movimiento (la de «más → clases»: 1100×720) a la medida de una tarjeta */
#muro .mu-pz { position:relative; width:193px; height:126px; border-radius:10px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.35); }
#muro .mu-pz .mp-clase { position:absolute; left:0; top:0; width:1100px; height:720px; transform:scale(.1755); transform-origin:0 0; }
/* en el móvil, las tres a la vez (la pregunta es «¿cuál de las tres es la tuya?») */
@media (max-width:700px) {
  #muro .mu-tres { justify-content:center; gap:12px; }
  #muro .mu-tres .mu-carta { width:108px; height:68px; }
  #muro .mu-tres .mu-carta .cr-carta { transform:scale(.1385); }
  #muro .mu-pz { width:104px; height:68px; border-radius:6px; }
  #muro .mu-pz .mp-clase { transform:scale(.0945); }
  #muro .mu-cap { font-size:15px; }
  #muro .mu-cap .mp-metal { font-size:17px; }
}


/* ══ UN SOLO MUNDO (26/09/2026): tu cuenta bajo tu tarjeta ══
   Los enlaces son .mp-enlace (la pieza de la casa en esa página); aquí sólo
   se apilan, y el primero separa la cuenta de «Попробовать первый урок». */
.noche .un-cuenta { display:flex; flex-direction:column; align-items:flex-start; margin-top:34px; }
.noche .un-cuenta .mp-enlace { margin-top:6px; font-size:26px; }
.noche .un-cuenta .mp-enlace[data-un="salir"] { color:rgba(242,242,244,.6); }
.noche.alto .un-cuenta { align-items:center; margin-top:18px; }
.noche.alto .un-cuenta .mp-enlace { font-size:16px; margin-top:6px; }

/* 07/10 noche - las настройки del socio sin clases, aquí mismo (unmundo-js: _unAjustes) */
.noche .un-aj { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:18px; max-height:400px; overflow:hidden;
  transition:max-height .7s var(--dc-ease), opacity .5s var(--dc-ease); animation:unAjEntra .6s var(--dc-ease) both; }
.noche .un-aj.plegada, .noche .un-aj-clave.plegada { max-height:0; opacity:0; margin-top:0; pointer-events:none; }
@keyframes unAjEntra { from { opacity:0; transform:translateY(8px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
.noche .un-aj-fila { display:flex; align-items:baseline; gap:22px; }
.noche .un-aj-t { font-size:20px; color:rgba(242,242,244,.55); min-width:90px; text-align:left; }
.noche .un-aj .ent-op { background:none; border:0; padding:2px 0; cursor:pointer; font:inherit; font-size:24px; color:rgba(242,242,244,.55); transition:color .4s ease, text-shadow .4s ease; }
.noche .un-aj .ent-op.active, .noche .un-aj .ent-op.un-aj-guardar { color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.45); }
.noche .un-aj-ayuda { font-size:18px; line-height:1.35; color:rgba(242,242,244,.6); text-align:left; }
.noche .un-aj-clave { display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-height:300px; overflow:hidden; transition:max-height .7s var(--dc-ease), opacity .5s var(--dc-ease); }
.noche .un-aj .ent-campo { width:280px; background:none; border:0; border-bottom:1px solid rgba(242,242,244,.25); padding:6px 0; font:inherit; font-size:20px; color:#F2F2F4; text-align:left; outline:none; }
.noche .un-aj .ent-campo::placeholder { color:rgba(242,242,244,.4); }
.noche.alto .un-aj { align-items:flex-start; gap:6px; margin-top:12px; }
.noche.alto .un-aj-t { font-size:14px; min-width:64px; }
.noche.alto .un-aj .ent-op { font-size:16px; }
.noche.alto .un-aj-ayuda { font-size:13px; }
.noche.alto .un-aj .ent-campo { width:230px; font-size:16px; }
.noche .un-aj-plan { font-size:24px; color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.4); }
.noche .un-aj .ent-op.un-aj-ir { white-space:nowrap; color:#F2F2F4 !important; text-shadow:0 0 18px rgba(242,242,244,.4); }
.noche.alto .un-aj-plan { font-size:16px; }
.noche.alto .un-aj-t { min-width:96px; }


/* La barra clara con las pestañas del MISMO tamaño que la del club (Rolando:
   «la barra de menú del mismo tamaño que la del club, para que haya
   coherencia»). En el ordenador ya lo eran (--dc-u = --pl-u del club). En el
   móvil el club usa 24 · 9/20 en su escala (ancho/390, hasta 1,6) y la fila
   se desliza: aquí igual, sin barra de desplazamiento visible. */
@media (max-width:699px), (orientation:portrait) and (max-width:1100px) {
  #screen-home .alumno-tabs:not(.prof-tabs) { --un-u:min(calc(100vw / 390), 1.6px);
    justify-content:flex-start; gap:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding-left:calc(18 * var(--un-u)); padding-right:calc(18 * var(--un-u)); padding-top:calc(var(--dc-sp-40) + 40px); margin-top:-40px; padding-bottom:calc(var(--dc-sp-24) + 70px); margin-bottom:-70px;
    position:relative; z-index:3; pointer-events:none; }   /* caja alta: la sombra de la píldora cabe entera; no roba toques, sólo las palabras */
  #screen-home .alumno-tabs:not(.prof-tabs)::-webkit-scrollbar { display:none; }
  #screen-home .alumno-tabs:not(.prof-tabs) .aula-tab { pointer-events:auto; flex:none; white-space:nowrap; letter-spacing:calc(.2 * var(--un-u));
    font-size:calc(24 * var(--un-u)); line-height:1.25; padding:calc(9 * var(--un-u)) calc(20 * var(--un-u)); }
  #screen-home .alumno-tabs:not(.prof-tabs) .tab-mas .mp-metal,
  #screen-home .alumno-tabs:not(.prof-tabs) .tab-mas .mp-metal .cr-tier-t { font-size:calc(30 * var(--un-u)) !important; line-height:1 !important; }
}
/* 26/09: la pestaña de las clases con él se llama «con Rolando»: el nombre, con mayúscula (la barra lo pone todo en minúscula) */
#screen-home #atab-clases, #screen-student #atab-clases { text-transform: none !important; }

/* 07/10 noche - las настройки del socio sin clases, aquí mismo (unmundo-js: _unAjustes) */
.noche .un-aj { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:18px; max-height:400px; overflow:hidden;
  transition:max-height .7s var(--dc-ease), opacity .5s var(--dc-ease); animation:unAjEntra .6s var(--dc-ease) both; }
.noche .un-aj.plegada, .noche .un-aj-clave.plegada { max-height:0; opacity:0; margin-top:0; pointer-events:none; }
@keyframes unAjEntra { from { opacity:0; transform:translateY(8px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
.noche .un-aj-fila { display:flex; align-items:baseline; gap:22px; }
.noche .un-aj-t { font-size:20px; color:rgba(242,242,244,.55); min-width:90px; text-align:left; }
.noche .un-aj .ent-op { background:none; border:0; padding:2px 0; cursor:pointer; font:inherit; font-size:24px; color:rgba(242,242,244,.55); transition:color .4s ease, text-shadow .4s ease; }
.noche .un-aj .ent-op.active, .noche .un-aj .ent-op.un-aj-guardar { color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.45); }
.noche .un-aj-ayuda { font-size:18px; line-height:1.35; color:rgba(242,242,244,.6); text-align:left; }
.noche .un-aj-clave { display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-height:300px; overflow:hidden; transition:max-height .7s var(--dc-ease), opacity .5s var(--dc-ease); }
.noche .un-aj .ent-campo { width:280px; background:none; border:0; border-bottom:1px solid rgba(242,242,244,.25); padding:6px 0; font:inherit; font-size:20px; color:#F2F2F4; text-align:left; outline:none; }
.noche .un-aj .ent-campo::placeholder { color:rgba(242,242,244,.4); }
.noche.alto .un-aj { align-items:flex-start; gap:6px; margin-top:12px; }
.noche.alto .un-aj-t { font-size:14px; min-width:64px; }
.noche.alto .un-aj .ent-op { font-size:16px; }
.noche.alto .un-aj-ayuda { font-size:13px; }
.noche.alto .un-aj .ent-campo { width:230px; font-size:16px; }
.noche .un-aj-plan { font-size:24px; color:#F2F2F4; text-shadow:0 0 18px rgba(242,242,244,.4); }
.noche .un-aj .ent-op.un-aj-ir { white-space:nowrap; color:#F2F2F4 !important; text-shadow:0 0 18px rgba(242,242,244,.4); }
.noche.alto .un-aj-plan { font-size:16px; }
.noche.alto .un-aj-t { min-width:96px; }
/* 08/10: el telón entre el club y una lección (unmundo-js: _unTelon). Bajo la lección (1200) y el club (2200), sobre el aula clara. */
#un-telon { position:fixed; inset:0; z-index:1150; pointer-events:none; opacity:0; visibility:hidden;
  background:linear-gradient(135deg, #2C2D2E 0%, #16171A 48%, #0A0A0C 100%); transition:opacity .2s ease, visibility 0s linear .2s; }
#un-telon.on { opacity:1; visibility:visible; transition:none; pointer-events:auto; }

/* 10/10 - настройки del socio: panel a pantalla completa, fondo difuminado, columna centrada, botones de la casa (.mp-enlace) */
.noche .un-ajov { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; overflow-y:auto;
  padding:max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); background:rgba(14,16,22,.38);
  -webkit-backdrop-filter:blur(26px) saturate(120%); backdrop-filter:blur(26px) saturate(120%); opacity:0; transition:opacity .4s var(--dc-ease); }
.noche .un-ajov.on { opacity:1; }
.noche .un-ajov-c { margin:auto; width:min(100%,560px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.noche .un-ajov-plan { font-size:clamp(22px,4.6vw,30px); color:#F2F2F4; text-shadow:0 0 22px rgba(242,242,244,.42); margin-bottom:10px; }
.noche .un-ajov .un-ajb { margin-top:10px; font-size:clamp(24px,5.6vw,34px); }
.noche .un-ajov .un-ajb-s { margin:0 14px; font-size:clamp(22px,5vw,30px); color:rgba(242,242,244,.55); text-shadow:none; }
.noche .un-ajov .un-ajb-s.active { color:#F2F2F4; text-shadow:0 0 22px rgba(242,242,244,.5); }
.noche .un-ajov .un-ajb-quieto { margin-top:26px; color:rgba(242,242,244,.6); }
.noche .un-ajf { display:flex; flex-direction:column; align-items:center; gap:0; margin-top:16px; opacity:0; translate:0 10px; animation:mpEntra .55s var(--dc-ease) forwards; }
.noche .un-ajf-t { font-size:clamp(15px,3.4vw,18px); color:rgba(242,242,244,.5); }
.noche .un-ajf-b { display:flex; justify-content:center; flex-wrap:wrap; }
.noche .un-ajf-b .un-ajb-s { opacity:1; translate:0 0; animation:none; margin-top:2px; }
.noche .un-ajov-ayuda { font-size:clamp(15px,3.6vw,18px); line-height:1.35; color:rgba(242,242,244,.6); margin-top:6px; }
.noche .un-ajov-clave { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:8px; max-height:300px; overflow:hidden; transition:max-height .6s var(--dc-ease), opacity .4s var(--dc-ease); }
.noche .un-ajov-clave.plegada { max-height:0; opacity:0; margin-top:0; pointer-events:none; }
.noche .un-ajov .ent-campo { width:min(78vw,300px); background:none; border:0; border-bottom:1px solid rgba(242,242,244,.45); color:#F2F2F4; font:inherit; font-size:max(16px,22px); padding:6px 2px; text-align:center; outline:none; }
.noche .un-ajov .ent-campo::placeholder { color:rgba(242,242,244,.4); }
.noche.alto .un-ajov .un-ajb { font-size:clamp(20px,5vw,26px); margin-top:8px; }


/* ══ LA INVITACIÓN A «MÁS» (26/09/2026, frente/invita-js.js) ══════════
   Todo con piezas que ya existen: la luz blanca del destello (.nace-luz),
   la marca de «más» del escaparate (.mp-marca-mas, su metal y su
   linterna) y los enlaces de texto de la sala (.mp-enlace). Sólo
   opacity/transform; nada se desenfoca en vivo. */
.noche .inv-ov { position: fixed; inset: 0; z-index: 2350; display: flex; align-items: center; justify-content: center;
  font-family: var(--dc-font, 'Coolvetica', sans-serif); }
.inv-ov .inv-velo { position: absolute; inset: 0; background: rgba(12,13,16,.86); opacity: 0; animation: invVelo .8s ease forwards; }
@keyframes invVelo { to { opacity: 1; } }
.inv-ov .nace-luz { z-index: 3; pointer-events: none; }
.inv-ov .inv-caja { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: min(1100px, 100vw); box-sizing: border-box;
  opacity: 0; transform: translateY(16px) scale(.97); animation: invEntra 1.3s cubic-bezier(.2,.8,.2,1) .45s forwards; }
@keyframes invEntra { to { opacity: 1; transform: none; } }
.inv-ov .inv-sobre { font-size: clamp(22px, 2.3vw, 34px); color: rgba(242,242,244,.78); letter-spacing: .2px; }
/* el nombre en metal, la marca del escaparate (más fuerte que la de allí, que en el móvil va a 104 px de diseño) */
.inv-ov .inv-marca { padding: 10px 0 0; }
.noche .inv-ov .inv-marca .n-mas-hc, .noche.alto .inv-ov .inv-marca .n-mas-hc { font-size: clamp(30px, 3.6vw, 56px); }
.noche .inv-ov .inv-marca .mp-metal { font-size: clamp(120px, 15vw, 220px); }
.inv-ov .inv-marca .mp-metal .mas-luz { animation: masLuz 2.6s cubic-bezier(.3,0,.2,1) .9s both; }
/* 29/09 - la invitación es a «solo»: su nombre en la letra del club, blanca con el brillo de la casa (sin metal), al tamaño que tenía «más» */
.inv-ov .inv-marca .inv-solo-t { display: block; font-size: clamp(120px, 15vw, 220px); line-height: .9; letter-spacing: -.02em; color: #F2F2F4;
  text-shadow: 0 0 26px rgba(242,242,244,.38), 0 0 80px rgba(242,242,244,.14); }
.inv-ov .inv-que { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.35; color: rgba(242,242,244,.8); max-width: 26em; margin: 18px auto 0; }
.inv-ov .inv-puertas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 44px; margin-top: 30px; }
.noche .inv-ov .inv-puertas .mp-enlace { margin: 0; font-size: clamp(20px, 1.9vw, 30px); animation-delay: 1.1s; }
/* la puerta ya usada: en gris y quieta, sin tachar (Rolando) */
.noche .inv-ov .inv-puertas .mp-enlace.hecha { color: rgba(242,242,244,.32); text-shadow: none; pointer-events: none; cursor: default; transform: none; }
/* «что такое más ›»: discreto, debajo de las dos puertas; «más» en su metal */
.inv-ov .inv-quees { display: block; margin: 26px auto 0; padding: 6px 10px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: clamp(17px, 1.4vw, 22px); color: rgba(242,242,244,.7); }
.inv-ov .inv-quees .mp-metal { font-size: 1.12em; }
.inv-ov .inv-quees .mp-metal .cr-tier-t { font-size: inherit !important; line-height: 1; }
.inv-ov .inv-quees .mp-metal .mas-luz { display: none; }
@media (any-hover: hover) { .inv-ov .inv-quees:hover { color: #F2F2F4; } }
.inv-ov .inv-luego { margin-top: 14px; padding: 8px 14px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: clamp(15px, 1.2vw, 18px); color: rgba(242,242,244,.45); }
@media (any-hover: hover) { .inv-ov .inv-luego:hover { color: rgba(242,242,244,.75); } }
.inv-ov.fuera { transition: opacity .6s ease; opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .inv-ov .inv-puertas { flex-direction: column; align-items: center; gap: 14px; }
}

/* la pestaña «solo» de la cinta LATE mientras la invitación está sin usar
   (29/09; antes era la linterna de «más»): un halo suave detrás de la
   palabra, despacio, de vez en cuando. Sólo opacity/transform. */
.noche.inv-nueva .n-tabs .n-tab[data-k="solo"] { position: relative; }
.noche.inv-nueva .n-tabs .n-tab[data-k="solo"]::after { content: ''; position: absolute; inset: -8px -14px; border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242,242,244,.30), rgba(242,242,244,0)); opacity: 0; transform: scale(.55);
  animation: invLatido 5.5s ease-in-out 2s infinite; }
@keyframes invLatido { 0%, 100% { opacity: 0; transform: scale(.55); } 35% { opacity: .75; transform: scale(1.05); } 65% { opacity: .25; transform: scale(1); } }
.nv-esc.quieto .n-tabs .n-tab[data-k="solo"]::after { animation-play-state: paused; }

/* bajo el nombre del escaparate de «solo» (29/09; antes, de «más»), para quien tiene la invitación */
.noche .emx-marca .inv-linea { display: none; margin-top: 20px; font-size: 30px; line-height: 1.2; color: rgba(242,242,244,.72);
  text-shadow: 0 0 22px rgba(242,242,244,.3); }
.noche.alto .emx-marca .inv-linea { font-size: 17px; margin-top: 12px; }
.noche.invitado .emx-marca .inv-linea { display: block; }

@media (prefers-reduced-motion: reduce) {
  .inv-ov .inv-velo, .inv-ov .inv-caja { animation-duration: .01s; }
  .noche.inv-nueva .n-tabs .n-tab[data-k="solo"]::after { animation: none; opacity: .5; transform: none; }
}
/* 27/09 - «что такое más»: el contenido se va y el velo se queda (y se cierra
   del todo) mientras detrás se abre «más» (invita-js: _invAMas) */
/* (la caja y la luz tienen su animación de entrada «forwards», que manda sobre opacity: se sale con otra animación) */
.inv-ov.velando .inv-caja, .inv-ov.velando .nace-luz { pointer-events: none; animation: invSale .3s ease forwards; }
@keyframes invSale { from { opacity: 1; } to { opacity: 0; } }
.inv-ov.velando .inv-velo { background: rgba(12,13,16,.97); transition: background .3s var(--dc-ease); }
/* ══ 08/10 - ELEGIR EL NIVEL (invita-js: _nivElegir) ══════════════════
   La hoja de opciones de la casa (#ln-hoja.ln-oscura de linea-css: el velo
   que difumina lo de detrás y las .ent-op que entran una tras otra), con la
   pregunta arriba, los cuatro niveles EN GRANDE y, debajo de cada uno, qué
   es y su lección. Sólo opacidad, transform y filter, como allí. */
#ln-hoja.nv-hoja { z-index:2470; font-family:var(--dc-font); font-weight:var(--dc-weight); color:var(--dc-ink, #F2F2F4); }
/* el difuminado, el de la puerta (visita-css: html.muro-abierto): lo de detrás se desenfoca y se queda quieto; el velo, su luz */
#ln-hoja.nv-hoja .ln-velo { -webkit-backdrop-filter:none; backdrop-filter:none; background:radial-gradient(70% 70% at 50% 45%, rgba(10,10,12,.34), rgba(10,10,12,.78)); }
html.nv-abierto .noche-escenario, html.nv-abierto #screen-home, html.nv-abierto #folio-ov { filter:blur(18px) saturate(.9); transition:filter var(--dc-t-entrada) var(--dc-ease); }
html.nv-abierto .noche *, html.nv-abierto #folio-ov * { animation-play-state:paused !important; }
#ln-hoja.nv-hoja .ln-lista { gap:var(--dc-sp-8, 8px); max-width:min(100vw, calc(1100 * var(--dc-u))); }
#ln-hoja.nv-hoja .nv-q, #ln-hoja.nv-hoja .nv-sub, #ln-hoja.nv-hoja .nv-luego { text-align:center; opacity:0; transform:translateY(calc(14 * var(--dc-u, .75px))); filter:blur(2px);
  transition:opacity .5s var(--dc-ease) calc(var(--ln-i, 0) * 34ms), transform .7s var(--dc-ease) calc(var(--ln-i, 0) * 34ms), filter .5s var(--dc-ease) calc(var(--ln-i, 0) * 34ms); }
#ln-hoja.nv-hoja.on .nv-q, #ln-hoja.nv-hoja.on .nv-sub { opacity:1; transform:none; filter:none; }
#ln-hoja.nv-hoja .nv-q { font-size:var(--dc-fs-60); line-height:1.1; letter-spacing:var(--dc-tracking); text-shadow:var(--dc-shadow-text-strong); }
#ln-hoja.nv-hoja .nv-sub { font-size:var(--dc-fs-30); line-height:1.35; color:var(--dc-ink-70, rgba(242,242,244,.75)); margin-bottom:var(--dc-sp-24, 24px); max-width:26em; }
#ln-hoja.nv-hoja .nv-op { display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--dc-u, .75px)); padding:var(--dc-sp-8, 8px) var(--dc-sp-24, 24px); text-transform:none; }
#ln-hoja.nv-hoja .nv-n { font-size:var(--dc-fs-100); line-height:.95; letter-spacing:var(--dc-tracking); }
#ln-hoja.nv-hoja .nv-d, #ln-hoja.nv-hoja .nv-l { font-size:var(--dc-fs-30); line-height:1.25; }
#ln-hoja.nv-hoja .nv-l { opacity:.62; }
#ln-hoja.nv-hoja.on .nv-op { opacity:.66; }
#ln-hoja.nv-hoja.on .nv-op.active { opacity:1; text-shadow:var(--dc-shadow-text-strong); }
#ln-hoja.nv-hoja .nv-luego { margin-top:var(--dc-sp-24, 24px); padding:var(--dc-sp-8, 8px) var(--dc-sp-16, 16px); background:none; border:0; cursor:pointer; font:inherit; font-size:var(--dc-fs-30); color:inherit; }
#ln-hoja.nv-hoja.on .nv-luego { opacity:.45; transform:none; filter:none; }
@media (any-hover: hover) { #ln-hoja.nv-hoja.on .nv-luego:hover { opacity:.8; } }
#ln-hoja.nv-hoja:not(.on) .nv-q, #ln-hoja.nv-hoja:not(.on) .nv-sub, #ln-hoja.nv-hoja:not(.on) .nv-luego { transition-delay:0s !important; transition-duration:.28s !important; }
/* en el móvil (alto): dos y dos, para que todo quepa sin desplazar */
@media (max-width:700px) {
  #ln-hoja.nv-hoja .ln-lista { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; padding:var(--dc-sp-24, 24px) var(--dc-sp-16, 16px); }
  #ln-hoja.nv-hoja .nv-q, #ln-hoja.nv-hoja .nv-sub, #ln-hoja.nv-hoja .nv-luego { flex-basis:100%; }
  #ln-hoja.nv-hoja .nv-op { flex:0 0 46%; box-sizing:border-box; padding:var(--dc-sp-16, 16px) var(--dc-sp-8, 8px); }
  #ln-hoja.nv-hoja .nv-n { font-size:72px; }
  #ln-hoja.nv-hoja .nv-d, #ln-hoja.nv-hoja .nv-l { font-size:15px; }
  #ln-hoja.nv-hoja .nv-q { font-size:30px; }
  #ln-hoja.nv-hoja .nv-sub { font-size:16px; margin-bottom:8px; }
  #ln-hoja.nv-hoja .nv-luego { font-size:16px; margin-top:8px; }
}
@media (prefers-reduced-motion: reduce) { #ln-hoja.nv-hoja .nv-q, #ln-hoja.nv-hoja .nv-sub, #ln-hoja.nv-hoja .nv-luego { transition:none; } }