/* ═══ 20/09/2026 - LA PUERTA, CON SU ESCAPARATE ═══
   A la izquierda las tres tarjetas de verdad y dos opciones en texto; a la
   derecha, la puerta de siempre (marca, «hacer mi carnet · entrar», campos
   invisibles). En el móvil, la puerta arriba y las tarjetas debajo, en una
   tira que se desliza. Ninguna píldora. */
#muro .mu-caja { flex-direction:row; align-items:center; justify-content:center; gap:calc(150 * var(--dc-u)); max-width:calc(2100 * var(--dc-u)); }
#muro .mu-centro { display:flex; flex-direction:column; align-items:center; text-align:center; flex:0 1 calc(980 * var(--dc-u)); min-width:0; }
.mu-lado { display:flex; flex-direction:column; align-items:center; gap:var(--dc-sp-40); flex:0 0 auto; }
.mu-cartas { position:relative; display:flex; flex-direction:column; gap:22px; }
.mu-carta { position:relative; width:260px; height:164px; flex:0 0 auto; }
.mu-carta .cr-carta { position:absolute; left:0; top:0; transform:scale(.3333); transform-origin:0 0; }
/* las tarjetas se eligen como los géneros de la música: apagadas, se encienden
   al pasar el ratón, y la elegida crece y brilla (mismos .6s y misma curva) */
button.mu-carta { padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  opacity:.5; transform:scale(.9);
  transition:opacity .6s var(--dc-ease), transform .6s var(--dc-ease), filter .6s var(--dc-ease); }
@media (any-hover:hover) { button.mu-carta:not(.on):hover { opacity:.86; transform:scale(.97); } }
button.mu-carta.on { opacity:1; transform:scale(1.08); filter:drop-shadow(0 0 calc(26 * var(--dc-u)) rgba(242,242,244,.3)); }
button.mu-carta:focus-visible { outline:none; opacity:.86; }
.mu-plan-t { max-width:280px; min-height:2.8em; text-align:center; font-size:var(--dc-fs-22); line-height:1.35; color:var(--dc-ink-70); }
/* mientras la sala se recoloca detrás, sólo queda el velo */
#muro.velando .mu-caja { opacity:0; pointer-events:none; transition:opacity .3s var(--dc-ease); }
.mu-opciones { display:flex; flex-direction:column; align-items:center; gap:var(--dc-sp-14); }
#muro .mu-op { font-size:var(--dc-fs-40); white-space:nowrap; }
/* la casilla del consentimiento: sin caja nativa, como el resto de la puerta */
#muro .mu-acepto { display:flex; align-items:flex-start; gap:var(--dc-sp-16); max-width:calc(620 * var(--dc-u)); padding:calc(20 * var(--dc-u)) calc(24 * var(--dc-u));
  text-align:left; font-size:var(--dc-fs-22); line-height:1.35; color:var(--dc-ink-70); cursor:pointer; max-height:calc(320 * var(--dc-u)); }
#muro .mu-acepto input { -webkit-appearance:none; appearance:none; flex:0 0 auto; width:1.15em; height:1.15em; margin:.12em 0 0; border:2px solid rgba(242,242,244,.55);
  border-radius:.3em; background:transparent; transition:background var(--dc-t-salida) var(--dc-ease), box-shadow var(--dc-t-salida) var(--dc-ease); }
#muro .mu-acepto input:checked { background:rgba(242,242,244,.92); box-shadow:0 0 calc(18 * var(--dc-u)) rgba(242,242,244,.4); }
#muro .mu-acepto a { color:inherit; text-decoration:underline; text-underline-offset:.16em; }
/* el botón de elegir de «¿cuál es para ti?» */
.noche .mp-cc-ir { margin-top:22px; font-size:30px; opacity:1; color:#F2F2F4; text-shadow:0 0 22px rgba(242,242,244,.35); }
.mp-cc-ir[disabled] { opacity:.45; pointer-events:none; }
.noche.alto .mp-cc-ir { grid-column:2; justify-self:start; text-align:left; padding:0; margin-top:8px; font-size:16px; line-height:1.2; }
@media (max-width:900px) {
  #muro .mu-caja { flex-direction:column; gap:var(--dc-sp-48); }
  #muro .mu-centro { order:1; flex-basis:auto; width:100%; }
  .mu-lado { order:2; width:100%; }
  .mu-cartas { flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; width:calc(100% + 2 * var(--dc-sp-24)); margin:-44px calc(-1 * var(--dc-sp-24)); padding:70px var(--dc-sp-24) 78px; box-sizing:border-box; scrollbar-width:none; }
  .mu-cartas::-webkit-scrollbar { display:none; }
  .mu-carta { scroll-snap-align:center; }
}
/* ═══ 20/09 - MÚSICA POR DENTRO ═══
   Escritorio: la lista de géneros acaba encima de «lo que suena» y se desliza
   (con la difuminación arriba y abajo) en vez de quedar tapada por él. */
.noche:not(.alto) .nm-generos { top:186px; bottom:190px; padding:32px 0; overflow-y:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%); }
.noche:not(.alto) .nm-generos::-webkit-scrollbar { display:none; }
/* Lo mismo para los géneros del cine, que además son muchos (los saca TMDb). */
.noche:not(.alto) .rc-generos { top:186px; bottom:120px; max-height:none; padding:28px 0; overflow-y:auto;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 56px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 56px), transparent 100%); }
/* 22/09 - las plataformas, EN VERTICAL otra vez (Rolando). El 20/09 se
   pusieron en horizontal porque en el móvil no cabían en columna; ahora sí
   caben: la portada mide lo que quepa y detrás de las opciones la sala se
   difumina (.n-velo), así que no hay que apretarlas contra nada. */
.noche.alto .nm-servicios { flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:10px; font-size:24px; }
.noche.alto .servicios-abiertos .nm-servicios { max-height:280px; }
/* ═══ 20/09 - LA PIZARRA, CON LA TARJETA «MÁS» EN UNA ESQUINA ═══ */
.pz-carta { position:absolute; right:24px; bottom:24px; width:170px; height:107px; z-index:5; pointer-events:none; }
.pz-carta .cr-carta { position:absolute; left:0; top:0; transform:scale(.218); transform-origin:0 0; }
.noche.alto .pz-carta { right:14px; bottom:14px; width:120px; height:76px; }
.noche.alto .pz-carta .cr-carta { transform:scale(.154); }