/* ============================================================================
   PIXELCLUB — Fondos de sección
   ============================================================================
   El decorado a pantalla completa que puede llevar una pantalla detrás de su
   contenido. Genérico: lo usa cualquier página que se marque con `tiene-fondo`
   y meta `fondoSeccionHTML()` como primer hijo.

   La tienda NO usa esto. Su sala es un diorama con un personaje anclado a un
   punto del dibujo, y vive en `tienda.css` con su propia maquinaria. Aquí solo
   hay papel pintado.
   ========================================================================== */

.tiene-fondo {
  position: relative;
  isolation: isolate;
  /* Lo que la página deja de aire arriba, y que el decorado tiene que subir
     para taparlo. `polish.css` le pone a `.page-content-type` un
     `padding-top: var(--space-lg)`, y sin compensarlo quedaba una franja de
     24 px del color de la zona entre la barra de navegación y el decorado: el
     corte se veía a la primera. Va contra el MISMO token que el relleno, así
     que si un día cambia, esto cambia con él. */
  --pc-fondo-respiro: var(--space-lg);
}

/* El respiro de arriba no es igual en todas las pantallas: el perfil se separa
   100 px de la barra (lo lleva en un `style` en línea dentro de `Profile.js`) y
   las demás usan el `--space-lg` de `polish.css`. Si algún día cambia ese 100,
   hay que cambiarlo aquí también — por eso queda dicho y no escondido. */
.page-profile.tiene-fondo { --pc-fondo-respiro: 100px; }

/* Creadores usa `--space-2xl` en vez del `--space-lg` de las demás
   (`pages.css`), así que con el valor por defecto quedaban 24 px de franja de
   la zona entre la barra de navegación y el decorado. */
.page-youtubers.tiene-fondo { --pc-fondo-respiro: var(--space-2xl); }

/* El decorado se queda quieto mientras la página pasa por delante.

   `sticky` con margen inferior negativo, y no `fixed`: así el fondo existe
   SOLO mientras se está en esta pantalla y no se cuela por debajo del pie de
   página ni de la siguiente sección. Es el mismo montaje que ya funcionaba en
   la tienda.

   El ancho se estira más allá del contenedor (`calc(50% - 50vw)`): un decorado
   que se corta a 1200 px y deja franjas del color de fondo a los lados no es
   un decorado. */
.pc-fondo {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Arriba sube lo que mide el respiro de la página, para que entre la barra de
     navegación y el decorado no quede una franja del color de la zona. */
  margin: calc(-1 * var(--pc-fondo-respiro, 0px))
          calc(50% - 50vw)
          calc(var(--pc-fondo-respiro, 0px) - 100vh);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-primary, #0a0a0f);
}

.pc-fondo-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Es pixel art: sin esto el navegador lo suaviza al agrandar y se convierte
     en una acuarela. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* La niebla.

   El decorado tiene que NOTARSE y no LEERSE: en cuanto se ve con detalle, el
   ojo se va a él y el contenido —que es a lo que se viene— pasa a segundo
   plano. Esta capa lo deja en penumbra y reserva el poco contraste que queda
   para el centro, que es por donde baja el texto. */
.pc-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* UNA sola capa, y suave. La primera versión llevaba dos superpuestas —las
     mismas que la tienda— y aquí sobraba: la sala del videoclub es un interior
     iluminado y aguanta penumbra, pero esta calle ya es de noche. Con la niebla
     de la tienda no se veía la ciudad. */
  background: radial-gradient(140% 95% at 50% 30%,
    rgba(8, 8, 16, .12) 0%, rgba(8, 8, 16, .46) 55%, rgba(8, 8, 16, .74) 100%);
}

/* Todo el contenido va por delante del decorado. */
.tiene-fondo > *:not(.pc-fondo) {
  position: relative;
  z-index: 1;
}

/* El banner de portada trae su PROPIO fondo opaco y su propio velo, pensados
   para cuando no hay nada detrás. Con decorado, los dos juntos lo tapaban
   entero: el pasillo solo asomaba por debajo del banner. Aquí se le quitan los
   dos y se deja que mande el de la sección. Va dentro de `.tiene-fondo`, así
   que la portada de Inicio —que usa el mismo banner— no se entera. */
.tiene-fondo .hero-banner { background: transparent; }
.tiene-fondo .hero-bg,
.tiene-fondo .hero-bg::after { display: none; }

/* Pero el texto del banner se queda sin el velo que lo separaba del fondo, y
   encima cae sobre la parte más cargada del dibujo (las estanterías). Se le
   devuelve el contraste de dos maneras: una sombra dura a la letra y una
   penumbra suave SOLO detrás de la columna de texto, que es la mitad
   izquierda. El resto del banner se queda limpio para que se vea el pasillo. */
.tiene-fondo .hero-kicker,
.tiene-fondo .hero-subtitle,
.tiene-fondo .hero-stat,
.tiene-fondo .hero-stat-label {
  text-shadow: 0 2px 6px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .8);
}

.tiene-fondo .hero-copy {
  position: relative;
}

.tiene-fondo .hero-copy::before {
  content: '';
  position: absolute;
  /* Sin sangrado LATERAL: con valores negativos a los lados, el resplandor se
     sale del contenedor y en una pantalla estrecha empuja la página entera 27 px
     a la derecha. Como el degradado ya se apaga solo antes del borde, no se
     pierde nada visual y se gana no tener desplazamiento lateral. */
  inset: -24px 0;
  z-index: -1;
  background: radial-gradient(96% 74% at 32% 50%,
    rgba(8, 8, 16, .82) 0%, rgba(8, 8, 16, .55) 55%, rgba(8, 8, 16, 0) 100%);
  pointer-events: none;
}

/* Los paneles de una pantalla con fondo dejan de ser opacos: se ve el decorado
   detrás, atenuado. Es lo que hace que el contenido pertenezca al sitio en vez
   de estar pegado encima de una foto.

   El desenfoque es lo que permite bajar la opacidad sin perder legibilidad: sin
   él, a este nivel de transparencia los rótulos de neón de detrás se colarían
   entre las letras del titular.

   Las tarjetas de contenido (`.content-card`) estaban en esta lista y salieron
   en t-02: desde que son «a sangre» no tienen panel, la portada las cubre
   enteras y el desenfoque solo costaba pintar sesenta capas invisibles. */
.tiene-fondo .nov-ficha,
.tiene-fondo .contact-form-card,
.tiene-fondo .contact-info-card,
.tiene-fondo .contact-info-item {
  background: rgba(22, 33, 62, .74);
  backdrop-filter: blur(3px);
}

/* Lo que se pulsa o se escribe NO se vuelve translúcido, al revés: se le pone
   un fondo sólido. Un botón con un flexo encendido asomando entre sus letras
   deja de leerse, y un botón que no se lee es un botón roto. Los paneles pueden
   permitirse el efecto porque son superficies grandes; estos no. */
.tiene-fondo input,
.tiene-fondo textarea,
.tiene-fondo select {
  background: rgba(9, 12, 24, .94);
}

/* Solo el fondo, nunca el color de la letra: el botón primario del sistema es
   de contorno —letra cian sobre oscuro— y al pintarle el relleno de cian se
   quedaba cian sobre cian, ilegible. Aquí solo se tapa lo que hay detrás. */
/* El `:not(.active)` no es un capricho: la pastilla activa lleva la letra
   OSCURA porque va sobre relleno cian, y al pintarle fondo oscuro se volvía
   ilegible. Mismo tropiezo que ya di con el botón primario. */
/* Y el `:not(.pixel-btn-macizo)` es el MISMO tropiezo por tercera vez: el
   macizo es el relleno cian con letra oscura (la tecla que se hunde), y esta
   regla —dos clases— le ganaba a `.pixel-btn-macizo` —una— y lo dejaba en
   letra oscura sobre fondo oscuro (1,02:1 medido en /gratis). Su relleno ya
   es opaco: no necesita tapar el decorado, no se toca. */
/* Cuarta vez, misma forma: `.pase-comprar-premium` (pase.css) es OTRO botón
   de relleno opaco con letra oscura —dorado con `#10101a`, no `.pixel-btn-macizo`
   pero la misma idea— y esta regla le ganaba igual, dejándolo en 1,03:1
   medido en /pase. Se excluye por nombre porque no lleva la clase `-macizo`:
   si aparece un quinto botón así, es que el patrón general es "letra oscura
   sobre relleno opaco propio", no una lista de nombres que memorizar. */
.tiene-fondo .filter-pill:not(.active),
.tiene-fondo .pixel-btn:not(.pixel-btn-macizo):not(.pase-comprar-premium),
.tiene-fondo .empty-state {
  background-color: rgba(9, 12, 24, .9);
  backdrop-filter: blur(3px);
}


.tiene-fondo .nov-ficha:hover,
.tiene-fondo .nov-ficha:focus-visible {
  background: rgba(31, 43, 71, .9);
}

/* El texto suelto necesita un poco de sombra para despegarse del decorado.
   El contador del pie es el que más sufre: cae justo sobre la parte iluminada
   de la calle y sin sombra se pierde encima del coche. */
.tiene-fondo .page-subtitle,
.tiene-fondo .section-subtitle,
.tiene-fondo .rejilla-cuenta,
.tiene-fondo .tab-btn {
  text-shadow: 0 2px 5px rgba(0, 0, 0, .95);
}

.tiene-fondo .page-title {
  text-shadow: 0 0 14px rgba(0, 245, 212, .35), 0 3px 0 rgba(0, 0, 0, .7);
}

/* En pantallas pequeñas el decorado compite con el contenido y gana él, que no
   es lo que se busca: se atenúa más. */
@media (max-width: 640px) {
  .pc-fondo::after {
    background: radial-gradient(120% 80% at 50% 40%,
      rgba(8, 8, 16, .3) 0%, rgba(8, 8, 16, .62) 62%, rgba(8, 8, 16, .84) 100%);
  }
}

/* ── Gratis ahora, adaptado al decorado ────────────────────────────────────
   La pantalla traía su PROPIO polvo de estrellas (`fondo-estrellas`, en
   `pixel-effects.css`): puntitos repetidos pensados para un fondo negro
   plano. Contra una foto ya no aportan nada y compiten con ella, así que la
   página deja de pedir esa clase al instalar el decorado — no hace falta
   apagar nada aquí, ya no se pide.

   El destacado y las tarjetas usan `background: var(--bg-card)`, sólido: se
   pasan a translúcidas igual que el resto de paneles del sistema. */
.tiene-fondo .gratis-hero,
.tiene-fondo .gratis-card {
  background: rgba(22, 33, 62, .74);
  backdrop-filter: blur(3px);
}

/* ── Pixel Pass, adaptado al decorado ──────────────────────────────────────
   Estas cajas se diseñaron casi transparentes (rgba de .02 a .08) para vivir
   sobre el fondo plano de siempre — un matiz, no una superficie. Contra la
   foto del bar, cargada de neones, ese matiz deja de notarse y el texto
   —niveles, XP, nombres de premio— queda flotando directamente sobre las
   botellas. Se les da una base sólida solo aquí. */
.tiene-fondo .pase-resumen-dato,
.tiene-fondo .pase-proxima-recompensa,
.tiene-fondo .pase-recompensas-disponibles,
.tiene-fondo .pase-nivel-actual,
.tiene-fondo .pase-casilla,
.tiene-fondo .pase-premium-aviso,
.tiene-fondo .pase-fuentes li {
  background-color: rgba(9, 12, 24, .82);
  backdrop-filter: blur(3px);
}
.tiene-fondo .pase-obj-previo {
  background-color: rgba(9, 12, 24, .92);
}
/* El dorado del carril premium era el propio fondo de la casilla: al pasar
   esta a base sólida se perdía la única pista de qué casillas son premium
   sin mirar el borde. Se le devuelve como un tinte sobre la misma base. */
.tiene-fondo .pase-casilla.premium,
.tiene-fondo .pase-proxima-recompensa.premium {
  background: linear-gradient(180deg, rgba(255, 214, 10, .16), rgba(9, 12, 24, .86));
}
.tiene-fondo .pase-titulo h1,
.tiene-fondo .pase-temporada,
.tiene-fondo .pase-nivel-cab {
  text-shadow: 0 2px 5px rgba(0, 0, 0, .95);
}