/* ============================================================
   PIXELCLUB — Zonas de navegación (Descubrimiento / Actividad / Progresión)
   ============================================================
   La navbar deja de ser una lista plana de enlaces y pasa a ser el mapa del
   ecosistema: tres bloques, tres familias de color — nada más. La versión
   anterior de este archivo daba un tono distinto a cada página dentro de un
   mismo bloque (Novedades violeta, Gratis magenta, Social fucsia…); esta
   versión lo simplifica a propósito: **un bloque, una sola identidad**, más
   apagada y más seria que la primera pasada.

     CYAN     → DESCUBRIMIENTO  (Inicio, Catálogo, Creadores)
     MAGENTA  → ACTIVIDAD       (Novedades, Gratis, Social)
     ÁMBAR    → PROGRESIÓN      (Pase, Tienda, Perfil)

   Los tonos vienen de la dirección pedida en el encargo (cyan/magenta/ámbar
   apagados, "más premium, menos estridente") con el mismo matiz que ya
   tenía la marca — no son colores nuevos, son los de siempre, desaturados.

   `@property` con `syntax: '<color>'` / `'<number>'` es lo que permite que
   el navegador anime estos valores en la transición entre páginas en vez de
   dar un salto seco — mismo truco que ya se usaba para el `--giro` del
   carnet. NAVBAR y FONDO usan la misma técnica pero con variables propias:
   el fondo necesita animar canal a canal (R/G/B por separado) para poder
   mezclarlos dentro de varios `radial-gradient()` a la vez sin que salten.
   ============================================================ */

@property --zone-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #26d0d8;
}
@property --zone-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #129aa8;
}

/* ── Canales R/G/B del fondo, registrados por separado ──────────────────
   rgba() acepta cada canal como un argumento independiente: si cada uno es
   su propia custom property animatable, el navegador interpola los tres a
   la vez y el gradient entero se ve crossfadear en vez de saltar de un
   color a otro. Es el mismo mecanismo que --zone-primary de arriba, solo
   que aquí necesitamos los números sueltos para poder bajarles la opacidad
   dentro de los radial-gradient del fondo. */
@property --zone-pr { syntax: '<number>'; inherits: true; initial-value: 38; }
@property --zone-pg { syntax: '<number>'; inherits: true; initial-value: 208; }
@property --zone-pb { syntax: '<number>'; inherits: true; initial-value: 216; }
@property --zone-sr { syntax: '<number>'; inherits: true; initial-value: 18; }
@property --zone-sg { syntax: '<number>'; inherits: true; initial-value: 154; }
@property --zone-sb { syntax: '<number>'; inherits: true; initial-value: 168; }
@property --zone-bg-base {
  syntax: '<color>';
  inherits: true;
  initial-value: #05080d;
}
/* Deriva ligera de la posición del radial principal: el "movimiento
   ambiental opcional" del encargo (sección 14). Extremadamente lento y
   apagable por completo con `prefers-reduced-motion`. */
@property --zone-drift-x { syntax: '<percentage>'; inherits: true; initial-value: 12%; }
@property --zone-drift-y { syntax: '<percentage>'; inherits: true; initial-value: -6%; }

:root {
  /* ── Descubrimiento (por defecto) — cyan/turquesa apagado ────────────── */
  --zone-primary: #26d0d8;
  --zone-primary-rgb: 38, 208, 216;
  --zone-secondary: #129aa8;
  --zone-secondary-rgb: 18, 154, 168;
  --zone-glow-rgb: 38, 208, 216;
  --zone-intensity: .8;

  --zone-pr: 38;  --zone-pg: 208; --zone-pb: 216;
  --zone-sr: 18;  --zone-sg: 154; --zone-sb: 168;
  --zone-bg-base: #05080d;

  /* Un solo sitio para el ritmo del cambio. La navegación en sí es
     inmediata; esto es solo el color y el fondo poniéndose al día detrás,
     así que puede tomarse su tiempo sin que se note como lentitud. */
  --zone-transition: 320ms ease;
  /* El fondo respira más despacio que la navbar a propósito: es una
     atmósfera, no un botón — 450-700 ms pedía el encargo. */
  --zone-bg-transition: 560ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --zone-transition: 0ms;
    --zone-bg-transition: 0ms;
  }
}

/* ── Actividad: Novedades, Gratis y Social comparten UNA identidad ──────
   magenta/frambuesa apagada, no tres tonos distintos. Gratis se queda
   dentro de esta familia a propósito (no se vuelve verde ni dorado); si
   necesita comunicar "gratis" usa el verde arcade que ya existía como
   acento puntual, no como color estructural. */
body[data-zone="novedades"],
body[data-zone="gratis"],
body[data-zone="social"] {
  --zone-primary: #d94a9d;
  --zone-primary-rgb: 217, 74, 157;
  --zone-secondary: #a93b84;
  --zone-secondary-rgb: 169, 59, 132;
  --zone-glow-rgb: 217, 74, 157;
  --zone-intensity: .8;

  --zone-pr: 217; --zone-pg: 74;  --zone-pb: 157;
  --zone-sr: 169; --zone-sg: 59;  --zone-sb: 132;
  /* Negro-violeta, no negro-azul: el mismo tipo de "casi negro" que el resto
     de bloques pero virado a un cálido serio, no a un morado lavanda. */
  --zone-bg-base: #0a0611;
}

/* ── Progresión: Pase, Tienda y Perfil comparten UNA identidad ──────────
   ámbar/dorado sobrio. */
body[data-zone="pase"],
body[data-zone="tienda"],
body[data-zone="perfil"] {
  --zone-primary: #d6a63a;
  --zone-primary-rgb: 214, 166, 58;
  --zone-secondary: #9c7822;
  --zone-secondary-rgb: 156, 120, 34;
  --zone-glow-rgb: 214, 166, 58;
  --zone-intensity: .8;

  --zone-pr: 214; --zone-pg: 166; --zone-pb: 58;
  --zone-sr: 156; --zone-sg: 120; --zone-sb: 34;
  /* Negro cálido: no el mismo negro-azul de Descubrimiento con otro color
     encima, sino un negro con un pelín de marrón/ámbar debajo. */
  --zone-bg-base: #0d0a05;
}

/* Creadores sigue en Descubrimiento (usa el valor de :root): es el puente
   hacia Actividad, pero el encargo pide solo 3 colores protagonistas, así
   que el puente se nota por proximidad en el menú, no por un cuarto tono. */

/* ═══════════════════════════════════════════════════════════════════════
   LA NAVBAR COMO MAPA
   ═══════════════════════════════════════════════════════════════════════
   Sin cambios en esta corrección: la navbar y su clasificación por bloques
   ya estaban resueltas. Esta pasada es solo fondo/atmósfera — ver el punto
   20 del encargo ("NO TOQUES LA NAVBAR"). */

.navbar-link,
.navbar-link::after,
.nav-grupo-boton,
.nav-sep {
  transition:
    color var(--zone-transition),
    background var(--zone-transition),
    border-color var(--zone-transition),
    box-shadow var(--zone-transition),
    width var(--transition-normal);
}

.navbar-link.active,
.nav-grupo-boton.active {
  color: var(--zone-primary);
}

.navbar-link::after {
  background: var(--zone-primary);
  box-shadow: 0 0 5px rgba(var(--zone-glow-rgb), .5);
}

/* Línea fija bajo TODA la barra: el mapa del ecosistema en sus tres únicos
   tramos — sin paradas intermedias, para que no se lea como arcoíris.
   1-2 px, opacidad baja, blur controlado. */
.navbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  opacity: .45;
  background: linear-gradient(
    90deg,
    #26d0d8 0%,
    #26d0d8 32%,
    #d94a9d 32%,
    #d94a9d 66%,
    #d6a63a 66%,
    #d6a63a 100%
  );
  filter: blur(.4px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ATMÓSFERA / FONDO POR ZONA
   ═══════════════════════════════════════════════════════════════════════
   Esto es lo que corrige el encargo: antes el fondo apenas cambiaba entre
   bloques (dos radiales a .045/.035 de opacidad, casi indistinguibles). El
   sistema nuevo es EL MISMO en los tres bloques — misma composición, mismas
   posiciones, mismas capas — y solo cambian los tokens de color de arriba.
   Tres habitaciones del mismo sitio, no tres fondos distintos.

   Capas, de arriba a abajo (el primer gradient de la lista es el que queda
   más cerca de la pantalla):
     1. grano — textura de ruido casi imperceptible (capa 5 del encargo):
        rompe la planitud del degradado sin leerse como "ruido" a simple vista
     2. motas — "pequeños pixels" muy dispersos y casi invisibles
     3-4. rejilla — líneas de 1px, la que ya insinuaba la marca (bajada un
        punto más de opacidad: menos protagonista, más integrada)
     5. luz secundaria — foco grande, arriba a la derecha
     6. luz principal — foco grande, arriba a la izquierda (el que más pesa)
     7. base — un degradado casi negro, teñido por el mismo tono, que ancla
        todo lo demás
   Nada de esto son manchas de color: son grandes y muy suaves, pensadas
   para leerse como "iluminación ambiental", no como diseño gráfico. */
body {
  background-color: var(--zone-bg-base);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/></svg>"),
    radial-gradient(1.5px 1.5px at 8% 22%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .35), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 68%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .28), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 34%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .3), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 88%, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .22), transparent 60%),
    linear-gradient(rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .028) 1px, transparent 1px),
    radial-gradient(1200px 800px at 92% 12%, rgba(var(--zone-sr), var(--zone-sg), var(--zone-sb), .065), transparent 65%),
    radial-gradient(1300px 850px at var(--zone-drift-x) var(--zone-drift-y), rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .1), transparent 70%),
    linear-gradient(180deg, rgba(var(--zone-pr), var(--zone-pg), var(--zone-pb), .06) 0%, var(--zone-bg-base) 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 100px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 34px 34px, 34px 34px, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-attachment: fixed;
  /* `steps()` y no `ease`: animar un gradient repinta, no es gratis como un
     transform. Con pasos discretos el navegador solo recalcula 8 veces en
     48s en vez de en cada fotograma — barato de verdad, y de paso combina
     con el "nada se desvanece, cambia de fotograma" que ya pedía el resto
     de la web (ver `--transition-*` en variables.css). */
  animation: zona-respirar 48s steps(8) infinite;
  transition:
    background-color var(--zone-bg-transition),
    --zone-pr var(--zone-bg-transition),
    --zone-pg var(--zone-bg-transition),
    --zone-pb var(--zone-bg-transition),
    --zone-sr var(--zone-bg-transition),
    --zone-sg var(--zone-bg-transition),
    --zone-sb var(--zone-bg-transition),
    --zone-bg-base var(--zone-bg-transition);
}

/* Deriva casi imperceptible del foco principal: "que parezca vivo, no
   animado" (punto 14 del encargo). Un vaivén de pocos puntos porcentuales
   en 46 segundos no se percibe como movimiento, solo como que el fondo
   respira. */
@keyframes zona-respirar {
  0%, 100% { --zone-drift-x: 12%; --zone-drift-y: -6%; }
  50%      { --zone-drift-x: 17%; --zone-drift-y: -2%; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* Viñeta: oscurece los bordes de la ventana para dar profundidad, siempre
   neutra (no se tiñe del color de zona — eso ya lo hacen los focos de
   arriba). `body::after` ya lo usa el scanline global, así que esta va en
   `::before`, por debajo de la navbar y del contenido en el orden natural
   del documento — no necesita z-index propio. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 120% at 50% 12%, transparent 40%, rgba(2, 3, 6, .5) 100%);
}

/* En pantallas táctiles, un fondo fijo de diez capas fuerza repintados al
   desplazar el contenido. Se conserva exactamente la misma composición y
   paleta, pero se deja anclada al documento y sin la deriva imperceptible. */
@media (max-width: 768px) {
  body {
    position: relative;
    background-attachment: scroll;
    animation: none;
  }

  body::before { position: absolute; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SUPERFICIES: un tinte de borde muy tenue, no tarjetas de colores
   ═══════════════════════════════════════════════════════════════════════
   Toque ligero a propósito: cambia el borde de las tarjetas de contenido
   al color del bloque en vez de dejarlo siempre en el borde neutro, y les
   añade un resplandor interior mínimo para que se sientan "en la misma
   habitación" que el fondo. Nada de fondos de color ni sombras fuertes —
   es la misma tarjeta oscura de siempre con el borde y el aire alrededor
   "contaminados".

   Las tarjetas de contenido (`.content-card`) salieron de estas dos reglas en
   t-02: desde que son «a sangre» no tienen borde que teñir, y este selector
   con `body[data-zone]` delante ganaba en especificidad al hover de
   redesign.css y se comía el filo de color y el movimiento. */
.youtuber-card {
  transition: border-color var(--zone-transition), box-shadow var(--zone-transition);
}
body[data-zone] .youtuber-card {
  border-color: rgba(var(--zone-primary-rgb), .18);
  box-shadow: inset 0 0 40px rgba(var(--zone-primary-rgb), .05);
}

/* ═════════════════════════════════════════════════════════════════════
   CONTENIDO: el título de página deja de ser fijo
   ═════════════════════════════════════════════════════════════════════
   `.neon-text-cyan` es de antes de que existieran las zonas: la usan los
   `<h1 class="page-title">` de Novedades, Para ti, Gratis ahora y Perfil, y
   el resultado es un título cyan brillante encima de un fondo magenta o
   ámbar — el "neón improvisado" que describe el encargo, y la causa más
   visible de que Actividad y Progresión aún no se sientan como su propio
   sitio. Fuera de un bloque con identidad propia (Inicio, Catálogo,
   Creadores) sigue legítimamente cyan; dentro de Actividad o Progresión, se
   pone al día con el color de su zona. Ni la plantilla ni la clase cambian
   de nombre: solo el resultado. El glow también baja de intensidad respecto
   al cyan original — menos "cartel de neón", más título con identidad. */
body[data-zone="novedades"] .page-title.neon-text-cyan,
body[data-zone="gratis"] .page-title.neon-text-cyan,
body[data-zone="social"] .page-title.neon-text-cyan,
body[data-zone="pase"] .page-title.neon-text-cyan,
body[data-zone="tienda"] .page-title.neon-text-cyan,
body[data-zone="perfil"] .page-title.neon-text-cyan {
  color: var(--zone-primary);
  text-shadow:
    0 0 4px rgba(var(--zone-glow-rgb), .45),
    0 0 12px rgba(var(--zone-glow-rgb), .22);
}

/* Las pestañas de Novedades (`Feed.js`) reutilizan `.tab-games`/`.tab-series`
   —clases genéricas de pestaña, sin significado de tipo de contenido aquí— y
   por eso una se pintaba cyan y la otra amarilla dentro de una página
   magenta. Estas dos clases NO se usan en ningún otro sitio de la web (solo
   en ese componente), así que retocarlas aquí no toca ninguna pestaña de
   tipo de contenido real (esas siguen en `components.css`, sin tocar). */
body[data-zone="novedades"] .tab-btn.active,
body[data-zone="gratis"] .tab-btn.active,
body[data-zone="social"] .tab-btn.active,
body[data-zone="pase"] .tab-btn.active,
body[data-zone="tienda"] .tab-btn.active,
body[data-zone="perfil"] .tab-btn.active {
  color: var(--zone-primary);
}
body[data-zone="novedades"] .tab-btn.active::after,
body[data-zone="gratis"] .tab-btn.active::after,
body[data-zone="social"] .tab-btn.active::after,
body[data-zone="pase"] .tab-btn.active::after,
body[data-zone="tienda"] .tab-btn.active::after,
body[data-zone="perfil"] .tab-btn.active::after {
  background: var(--zone-primary);
}