/* ============================================================
   PIXELCLUB — CAPA DE PULIDO ESTÉTICO v2
   Eleva el acabado visual: hero con muro de portadas, jerarquía,
   profundidad, ficha de creador, modal, formularios y micro-detalles.
   Se carga la última: solo refina, no cambia funcionalidad.
   ============================================================ */

/* ═══════════════ 1. HERO — dos columnas, sin vacíos ═══════════════ */
.hero-banner {
  min-height: auto;                 /* antes 78vh: generaba un enorme hueco */
  padding: calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-3xl);
  align-items: center;
  border-bottom: 1px solid rgba(var(--accent-games-rgb), .12);
}
.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: var(--space-3xl);
  max-width: var(--container-xl);
  padding-top: 0;
  padding-bottom: 0;
}
.hero-copy { max-width: 620px; }

.hero-kicker {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: 3px;
  color: var(--accent-games);
  border: 1px solid rgba(var(--accent-games-rgb), .4);
  background: rgba(var(--accent-games-rgb), .07);
  padding: 7px 12px;
  margin-bottom: var(--space-lg);
}
.hero-title { margin-bottom: var(--space-md); }
.hero-subtitle { font-size: var(--text-xl); line-height: 1.65; margin-bottom: 0; }
.hero-subtitle strong { color: var(--text-primary); }
.hero-buttons { margin-top: var(--space-xl); }

/* Barra de cifras reales del catálogo */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px dashed rgba(255, 255, 255, .12);
}
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat-value { font-family: var(--font-pixel); font-size: var(--pixel-lg); line-height: 1; }
.hero-stat-value.c-cyan    { color: var(--accent-games);  text-shadow: 0 0 12px rgba(var(--accent-games-rgb), .5); }
.hero-stat-value.c-magenta { color: var(--accent-movies); text-shadow: 0 0 12px rgba(var(--accent-movies-rgb), .5); }
.hero-stat-value.c-yellow  { color: var(--accent-series); text-shadow: 0 0 12px rgba(var(--accent-series-rgb), .5); }
.hero-stat-label { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-secondary); }

/* Muro de portadas: rejilla en perspectiva que llena el lado derecho */
.hero-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  transform: perspective(1200px) rotateY(-13deg) rotateX(4deg);
  transform-style: preserve-3d;
  mask-image: linear-gradient(200deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(200deg, #000 55%, transparent 100%);
}
.hero-tile {
  aspect-ratio: var(--card-aspect-ratio);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .10);
  background: var(--surface-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
  animation: heroTileIn .7s var(--d, 0s) both ease-out, heroFloat 7s var(--d, 0s) ease-in-out infinite;
}
.hero-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tile-2 { margin-top: 26px; }
.hero-tile-3 { margin-top: -14px; }
.hero-tile-5 { margin-top: 26px; }
.hero-tile-6 { margin-top: -14px; }
@keyframes heroTileIn {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

@media (max-width: 980px) {
  .hero-content { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .hero-wall { grid-template-columns: repeat(4, 1fr); transform: none; mask-image: none; -webkit-mask-image: none; }
  .hero-tile-5, .hero-tile-6 { display: none; }
  .hero-tile-2, .hero-tile-3 { margin-top: 0; }
  .hero-copy { max-width: none; }
}
@media (max-width: 560px) {
  .hero-banner { padding-top: calc(var(--navbar-height) + var(--space-xl)); }
  .hero-wall { grid-template-columns: repeat(3, 1fr); }
  .hero-tile-4 { display: none; }
  .hero-stats { gap: var(--space-lg); }
}

/* ═══════════════ 2. FICHA DE CREADOR — layout arreglado ═══════════════ */
.profile-info {
  align-items: flex-start;          /* antes flex-end: descolocaba el avatar */
  gap: var(--space-xl);
  margin-top: -64px;
  padding-bottom: var(--space-xl);
}
.profile-avatar {
  width: 148px; height: 148px;
  border-width: 4px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .55), var(--shadow-glow-cyan);
}
.profile-details { padding-bottom: 0; padding-top: var(--space-lg); }
.profile-name { font-size: var(--pixel-2xl); line-height: 1.25; margin-bottom: 6px; }
.profile-channel { margin-bottom: var(--space-md); }

/* Estadísticas como panel, no como texto suelto */
.profile-stats {
  gap: 0;
  margin: var(--space-lg) 0;
  border: 2px solid var(--ring);
  background: var(--surface-2);
  display: inline-flex;
  flex-wrap: wrap;
}
.profile-stat {
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-sm) var(--space-lg);
  border-right: 1px solid var(--ring);
}
.profile-stat:last-child { border-right: none; }
.profile-stat-value { font-size: var(--pixel-base); color: var(--accent-games); }
.profile-stat-label { font-size: var(--text-base); color: var(--text-muted); }

.profile-description { margin-top: var(--space-sm); max-width: 640px; line-height: 1.7; }
.profile-social { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.profile-social a {
  font-family: var(--font-pixel); font-size: var(--pixel-xs);
  padding: 9px 14px;
  border: 2px solid var(--ring);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.profile-social a:hover { border-color: var(--accent-games); color: var(--accent-games); background: rgba(var(--accent-games-rgb), .08); }

/* Botón seguir dentro de la ficha: alineado con el nombre */
.follow-btn-lg { margin: var(--space-xs) 0 0; }

@media (max-width: 768px) {
  .profile-info { flex-direction: column; align-items: center; text-align: center; margin-top: -52px; }
  .profile-details { padding-top: var(--space-md); }
  .profile-stats { justify-content: center; }
  .profile-social { justify-content: center; }
}

/* ═══════════════ 3. MODAL DE FICHA ═══════════════ */
/* Cabecera con arte de portada de fondo: nunca un rectángulo negro */
.modal-header-banner {
  background-size: cover;
  background-position: center;
  position: relative;
}
.modal-header-banner::before {
  content: '';
  position: absolute; inset: 0;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  background: rgba(6, 8, 15, .55);
}
.modal-trailer-iframe { position: relative; z-index: 1; background: transparent; opacity: 1; transition: opacity .3s ease; }
/* Mientras el iframe de YouTube no ha pintado nada, se queda invisible y se
   ve la portada de fondo de `.modal-header-banner` (o su tráiler previo) en
   su lugar — la alternativa, sin esto, es un rectángulo negro varios segundos. */
.modal-trailer-iframe.cargando { opacity: 0; }

/* Títulos de sección legibles (antes 7px, casi ilegibles) */
.modal-section h3 {
  font-size: var(--pixel-sm);
  letter-spacing: .6px;
  padding-bottom: 8px;
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--ring);
}
.modal-item-title { line-height: 1.3; }
.modal-description { font-size: var(--text-xl); }

/* FIX: .btn-secondary pisaba el diseño de los botones de compra */
.buy-key-btn.btn-secondary,
.buy-key-btn {
  background: linear-gradient(135deg, var(--accent-games) 0%, var(--accent-info) 100%) !important;
  color: var(--text-inverse) !important;
  border: 2px solid rgba(255, 255, 255, .18) !important;
  font-size: var(--pixel-sm);
  padding: 13px 18px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
}
.buy-key-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(0, 0, 0, .5), 0 0 22px rgba(var(--accent-games-rgb), .45); }

.modal-streamer-chip { border-radius: 0; padding: 8px 14px; font-size: var(--text-lg); }
.modal-rating-box { border-color: var(--ring); background: rgba(0, 0, 0, .35); }
.rating-score-title { font-size: var(--pixel-xs); }

/* ═══════════════ 4. FORMULARIOS / LOGIN / CONTACTO ═══════════════ */
.pixel-input, .pixel-textarea, .pixel-select {
  border-color: rgba(255, 255, 255, .10);
  padding: 14px var(--space-md);
  font-size: var(--text-xl);
}
.pixel-input:focus, .pixel-textarea:focus, .pixel-select:focus {
  border-color: var(--accent-games);
  box-shadow: 0 0 0 3px rgba(var(--accent-games-rgb), .12);
}
.form-label { font-size: var(--pixel-xs); letter-spacing: .6px; color: var(--text-secondary); }

.page-login .page-header p,
.page-login .page-subtitle { font-size: var(--text-lg); max-width: 420px; margin-left: auto; margin-right: auto; }

.contact-form-card, .contact-info-card {
  background: var(--surface-2);
  border: 2px solid var(--ring);
  padding: var(--space-xl);
}
.contact-info-item {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .08);
}
.contact-info-item:last-of-type { border-bottom: none; }
.contact-info-icon { font-size: var(--pixel-2xl); }
.contact-info-item h4 { font-family: var(--font-pixel); font-size: var(--pixel-sm); color: var(--text-primary); margin-bottom: 4px; }
.contact-info-item p { color: var(--text-secondary); font-size: var(--text-lg); }
.contact-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 2px solid var(--ring);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.contact-social-link:hover { border-color: var(--accent-movies); color: var(--accent-movies); background: rgba(var(--accent-movies-rgb), .1); }

/* ═══════════════ 5. PROFUNDIDAD Y TEXTURA GLOBAL ═══════════════ */
/* El velo de fondo (antes fijo cyan/magenta) ahora respira con la zona de
   navegación: ver `body { background-image }` en zonas.css. Se queda solo
   este comentario para que quien busque el fondo de la página sepa dónde
   está de verdad. */

/* Navbar con un pelo más de presencia al hacer scroll */
.navbar.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .55); }

/* Secciones de la home con más aire entre bloques */
.home-section { margin-bottom: var(--space-2xl); }

/* Pastillas de filtro y botones: foco visible coherente */
.filter-pill:focus-visible,
.pixel-btn:focus-visible,
.follow-btn:focus-visible { outline-offset: 2px; }

/* Barras de scroll con la identidad del proyecto */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-games-rgb), .45) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
*::-webkit-scrollbar-thumb { background: rgba(var(--accent-games-rgb), .35); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-games-rgb), .6); background-clip: content-box; }

/* Selección de texto con color de marca */
::selection { background: rgba(var(--accent-games-rgb), .3); color: #fff; }

/* Estado vacío un poco más cálido */
.empty-state h3 { font-family: var(--font-pixel); font-size: var(--pixel-base); color: var(--text-primary); line-height: 1.5; }
.empty-state p { font-size: var(--text-xl); max-width: 460px; margin: 0 auto; }

/* ═══════════════ 6. PIE DE TARJETA — una sola línea limpia ═══════════════ */
/* Antes se partía en 3 líneas con "·" sueltos al principio de cada una. */
.content-card-meta {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--pixel-lg);
  gap: 0;
  display: block;                 /* permite ellipsis real sobre el conjunto */
}
.content-card-meta > span { display: inline; }
.content-card-meta > span + span::before {
  content: '·';
  margin: 0 5px;
  color: var(--text-muted);
}
.content-card-reco { white-space: nowrap; }

/* Ficha de creador: la categoría baja a su propia línea (no compite con las stats) */
.page-profile .youtuber-category { display: inline-block; margin-top: var(--space-xs); }

/* ═══════════════ 7. FIX DESBORDAMIENTOS EN MÓVIL ═══════════════ */
/* .rec-reason con nowrap forzaba el ancho mínimo de la columna del grid */
.page-recs .rec-cell { min-width: 0; }
.rec-reason { white-space: normal; overflow-wrap: anywhere; }

/* La tarjeta de contacto no encogía por debajo de su contenido */
.contact-layout { min-width: 0; }
.contact-layout > * { min-width: 0; }
.contact-form-card, .contact-info-card { max-width: 100%; }

@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr !important; display: grid; gap: var(--space-lg); }
  .contact-form-card, .contact-info-card { padding: var(--space-lg); }
}
@media (max-width: 480px) {
  .contact-form-card, .contact-info-card { padding: var(--space-md); }
  .rec-reason { font-size: var(--pixel-xs); }
}

/* ═══════════════ 8. HUB DE CREADOR ═══════════════ */
.profile-breadcrumb { padding-top: var(--space-lg); margin-bottom: var(--space-xs); }
.breadcrumb {
  font-family: var(--font-pixel); font-size: var(--pixel-xs); letter-spacing: .5px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--accent-games); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-current { color: var(--accent-series); }

.profile-actions { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin: var(--space-xs) 0 var(--space-sm); }
.follow-btn-lg { position: static; }
.pixel-btn-share {
  font-size: var(--pixel-xs);
  border-color: var(--accent-movies);
  color: var(--accent-movies);
  background: rgba(var(--accent-movies-rgb), .08);
}
.pixel-btn-share:hover { background: rgba(var(--accent-movies-rgb), .18); }

/* Sección "Ahora mismo" */
.hub-now { margin: var(--space-xl) 0 var(--space-2xl); }
.hub-now-row {
  display: flex; gap: var(--space-lg); overflow-x: auto; padding-bottom: var(--space-sm);
  scroll-snap-type: x mandatory;
}
.hub-now-row .content-card { width: 190px; flex-shrink: 0; scroll-snap-align: start; }

/* Actividad reciente del creador */
.hub-activity { margin-top: var(--space-3xl); }

@media (max-width: 560px) {
  .hub-now-row .content-card { width: 150px; }
  .profile-actions { width: 100%; }
}

/* ============================================
   Pulido v13 — accesibilidad y detalles
   ============================================ */

/* Enlace "saltar al contenido" (visible solo al enfocar con teclado) */
.skip-to-content {
  position: fixed;
  top: -60px;
  left: var(--space-sm);
  z-index: 2147483646;
  background: var(--accent-games);
  color: #04120f;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--pixel-sm);
  padding: 10px 14px;
  border: 2px solid #04120f;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-to-content:focus {
  top: var(--space-sm);
  outline: 2px solid #fff;
}

/* Botón "volver arriba" */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  /* El menú móvil (#navbar-mobile, z-index 900) vive DENTRO de <nav
     id="main-navbar"> (components.css), que es `position: fixed` con
     z-index: var(--z-navbar) = 500 y por tanto crea su propio contexto de
     apilamiento: su z-index interno (900) solo compite consigo mismo, y hacia
     fuera el <nav> entero pesa 500. Como este botón es hijo directo de
     <body>, para quedar realmente por debajo del menú abierto no basta con
     poner un número menor que 900 — hay que bajar de 500 (el techo real del
     <nav>). 480 lo deja también por debajo del propio <nav>. */
  z-index: 480;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pixel-xl);
  color: var(--accent-games);
  background: rgba(10, 10, 20, 0.85);
  border: 2px solid var(--accent-games);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, background .18s ease;
  image-rendering: pixelated;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--accent-games);
  color: #04120f;
  box-shadow: 0 0 18px rgba(0, 245, 212, 0.6);
}
@media (max-width: 560px) {
  .back-to-top { width: 42px; height: 42px; right: 12px; bottom: 12px; font-size: var(--pixel-lg); }
}

/* Insignia "NUEVO" en el feed de novedades */
.feed-new-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--pixel-xs);
  letter-spacing: 1px;
  color: #04120f;
  background: var(--accent-series, #ffd60a);
  border-radius: 2px;
  vertical-align: middle;
  animation: newPulse 1.6s ease-in-out infinite;
}
@keyframes newPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 214, 10, 0); }
  50% { box-shadow: 0 0 10px rgba(255, 214, 10, 0.7); }
}

/* Ficha rápida en el modal (dónde verla / dirección / plataformas) */
.modal-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
}
.modal-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent-games);
  border-radius: 4px;
  min-width: 0;
}
.modal-fact-label {
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  color: var(--text-muted, #9a9ab0);
  text-transform: uppercase;
}
.modal-fact-value {
  font-size: var(--pixel-lg);
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  word-break: break-word;
}


/* ============================================================
   NEO — El socio del videoclub (personaje + menú de chat)
   ============================================================ */

.neo-root {
  position: fixed;
  left: 18px;
  bottom: 18px;
  /* Por debajo de --z-modal-overlay (900): NEO no debe taparse encima de una
     ficha, del test de gustos ni del carnet. */
  z-index: 880;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.neo-root > * { pointer-events: auto; }

/* La ilustración se sirve como imagen: filo de píxel al escalar */
.neo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Personaje ── */
.neo-fab {
  position: relative;
  width: 66px;                 /* antes 92px: tapaba el contenido de la esquina */
  height: 125px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .82;                /* en reposo se aparta; al pasar el ratón vuelve entero */
  transform-origin: bottom left;
  filter: drop-shadow(0 0 8px rgba(0, 229, 208, .35));
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
.neo-fab:hover { opacity: 1; transform: translateY(-4px) scale(1.16); filter: drop-shadow(0 0 18px rgba(232, 50, 156, .55)); }
.neo-fab:focus-visible { outline: 3px solid var(--accent-games); outline-offset: 4px; }

.neo-sprite {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  animation: neoIdle 3.4s ease-in-out infinite;
}
@keyframes neoIdle { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-5px);} }

.neo-shadow {
  position: absolute;
  left: 50%; bottom: 2px;
  width: 34px; height: 6px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  filter: blur(3px);
  animation: neoShadow 3.4s ease-in-out infinite;
}
/* Saltito al abrir el chat */
.neo-sprite.neo-hop { animation: neoHop .5s ease; }
@keyframes neoHop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-14px) scale(1.04, .96); }
  70%  { transform: translateY(0) scale(.97, 1.03); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes neoShadow {
  0%,100% { transform: translateX(-50%) scale(1); opacity: .5; }
  50%     { transform: translateX(-50%) scale(.82); opacity: .3; }
}

/* ── Bocadillo ── */
.neo-teaser {
  position: relative;
  max-width: 215px;
  padding: 9px 12px;
  font-family: 'VT323', monospace;
  font-size: var(--text-base);
  line-height: 1.2;
  color: #06121a;
  background: var(--accent-games);
  border: 2px solid #06121a;
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.neo-teaser::after {
  content: '';
  position: absolute;
  left: 24px; top: 100%;
  border: 7px solid transparent;
  border-top-color: var(--accent-games);
}
.neo-teaser.show { opacity: 1; transform: translateY(0) scale(1); }

/* ── Menú de chat (marco neón doble) ── */
.neo-panel {
  position: absolute;
  left: 0;
  bottom: 176px;
  width: min(392px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 240px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0b0718;
  border: 3px solid var(--accent-games);
  border-radius: 10px;
  box-shadow: 0 0 0 3px #0b0718, 0 0 0 6px rgba(232,50,156,.85),
              0 0 34px rgba(0,229,208,.35), 0 20px 46px rgba(0,0,0,.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.neo-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* Rejilla neón de fondo */
.neo-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,208,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,50,156,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* ── Cabecera ── */
.neo-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-bottom: 3px solid rgba(232, 50, 156, .8);
}
.neo-portrait {
  width: 54px; height: 48px;
  flex-shrink: 0;
  padding: 2px;
  image-rendering: pixelated;
  border: 2px solid var(--accent-games);
  border-radius: 5px;
  background: rgba(0, 229, 208, .07);
}
.neo-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.neo-title {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--pixel-lg);
  line-height: 1.15;
  color: var(--accent-games);
  text-shadow: 0 0 8px rgba(0, 245, 212, .75);
  word-break: break-word;
}
.neo-status { font-family: 'VT323', monospace; font-size: var(--text-base); color: #dfe1ea; line-height: 1; }
.neo-status b { color: #4ade80; font-weight: 400; }

.neo-close {
  margin-left: auto;
  align-self: flex-start;
  width: 28px; height: 28px;
  font-size: var(--text-base); line-height: 1;
  color: #9a9ab0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  cursor: pointer;
}
.neo-close:hover { color: #fff; border-color: var(--accent-movies); }

/* ── Hilo de mensajes ── */
.neo-thread {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  margin: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: rgba(4, 2, 12, .72);
  border: 2px solid rgba(232, 50, 156, .75);
  border-radius: 7px;
  scrollbar-width: thin;
}
.neo-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px; }
.neo-head {
  width: 28px; height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
  image-rendering: pixelated;
}
.neo-say {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: 'VT323', monospace;
  font-size: var(--text-base);
  line-height: 1.32;
  color: #ffffff;
  word-break: break-word;
}
.neo-who { color: var(--accent-movies); font-weight: 700; }
.neo-line-user .neo-who { color: #4ade80; }
.neo-line-user { padding-left: 33px; }
.neo-say b { color: var(--accent-games); font-weight: 400; }

/* Puntos de "escribiendo" */
.neo-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.neo-dots i { width: 6px; height: 6px; background: var(--accent-games); animation: neoDot .9s ease-in-out infinite; }
.neo-dots i:nth-child(2) { animation-delay: .15s; }
.neo-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes neoDot { 0%,100% { opacity:.25; transform: translateY(0);} 50% { opacity:1; transform: translateY(-4px);} }

/* ── Resultados ── */
.neo-results {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  margin: 2px 0 0 33px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.neo-result {
  flex: 0 0 auto;
  width: 64px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.neo-result img {
  width: 64px; height: 90px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 3px;
  transition: border-color .15s ease, transform .15s ease;
}
.neo-result:hover img { border-color: var(--accent-games); transform: translateY(-3px); }
.neo-result-title {
  display: -webkit-box;
  margin-top: 4px;
  font-size: var(--text-xs);
  line-height: 1.25;
  color: #9a9ab0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.neo-link {
  flex-basis: 100%;
  margin-left: 33px;
  font-family: 'VT323', monospace;
  font-size: var(--pixel-xl);
  color: var(--accent-series, #ffd60a);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  align-self: flex-start;
}
.neo-link:hover { color: #fff; }

/* ── Sugerencias ── */
.neo-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 0 33px; }
.neo-chip {
  padding: 5px 9px;
  font-size: var(--text-sm);
  color: var(--accent-games);
  background: rgba(0, 245, 212, .09);
  border: 1px solid rgba(0, 245, 212, .45);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.neo-chip:hover { background: var(--accent-games); color: #06121a; }

/* ── Barra de escritura ── */
.neo-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px 12px;
}
.neo-emoji {
  width: 42px; height: 42px;
  flex-shrink: 0;
  font-size: var(--pixel-2xl);
  line-height: 1;
  background: #1b1430;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 6px;
  cursor: pointer;
}
.neo-emoji:hover { border-color: var(--accent-series, #ffd60a); }
.neo-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font-family: 'VT323', monospace;
  font-size: var(--text-base);
  color: #fff;
  background: #120c24;
  border: 2px solid var(--accent-games);
  border-radius: 6px;
}
.neo-input::placeholder { color: #7e86a8; }
.neo-input:focus { outline: none; box-shadow: 0 0 10px rgba(0,245,212,.45); }
.neo-send {
  width: 46px; height: 42px;
  flex-shrink: 0;
  font-size: var(--pixel-xl);
  color: var(--accent-movies);
  background: #1b1430;
  border: 2px solid var(--accent-movies);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.neo-send:hover { background: var(--accent-movies); color: #0b0718; }

@media (max-width: 560px) {
  .neo-root { left: 8px; bottom: 8px; }
  .neo-fab { width: 52px; height: 98px; }
  .neo-panel { bottom: 130px; max-height: calc(100vh - 190px); }
  .neo-title { font-size: var(--pixel-base); }
  .neo-say, .neo-input { font-size: var(--pixel-xl); }
  .neo-teaser { font-size: var(--pixel-xl); max-width: 178px; }
}

@media (prefers-reduced-motion: reduce) {
  .neo-sprite, .neo-shadow { animation: none; }
}

/* ── NEO: más vida (reacciones, notas y estados) ───────────────────────── */

/* Reacción al responder */
.neo-sprite.neo-wiggle { animation: neoWiggle .55s ease; }
@keyframes neoWiggle {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-3.5deg); }
  60%     { transform: rotate(3deg); }
}

/* Estiramiento cuando lleva rato quieto */
.neo-sprite.neo-stretch { animation: neoStretch 1.3s ease; }
@keyframes neoStretch {
  0%,100% { transform: translateY(0) scale(1, 1); }
  30%     { transform: translateY(-6px) scale(.97, 1.05); }
  55%     { transform: translateY(0) scale(1.03, .97); }
  75%     { transform: translateY(-2px) scale(1, 1); }
}

/* Notas musicales saliendo de los cascos */
.neo-notes {
  position: absolute;
  right: -6px;
  top: 8px;
  width: 34px;
  height: 60px;
  pointer-events: none;
}
.neo-notes i {
  position: absolute;
  left: 6px;
  bottom: 0;
  font-style: normal;
  font-size: var(--pixel-lg);
  color: var(--accent-games);
  text-shadow: 0 0 6px rgba(0, 245, 212, .8);
  opacity: 0;
  animation: neoNote 6s ease-in-out infinite;
}
.neo-notes i:nth-child(2) { left: 15px; font-size: var(--pixel-base); color: var(--accent-movies);
  text-shadow: 0 0 6px rgba(247,37,133,.8); animation-delay: 2s; }
.neo-notes i:nth-child(3) { left: 2px;  font-size: var(--pixel-sm); animation-delay: 4s; }
@keyframes neoNote {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  15%  { opacity: .95; }
  60%  { opacity: .6; }
  100% { opacity: 0; transform: translateY(-42px) translateX(9px) rotate(16deg); }
}

/* Estado de la cabecera */
.neo-status b.neo-on { color: #4ade80; }
.neo-status b.neo-typing-state { color: var(--accent-series, #ffd60a); }

@media (prefers-reduced-motion: reduce) {
  .neo-notes, .neo-sprite.neo-wiggle, .neo-sprite.neo-stretch { animation: none; }
  .neo-notes { display: none; }
}

/* Cabecera del modal sin tráiler: se luce el arte de portada */
.modal-header-banner.no-trailer {
  background-size: cover;
  background-position: center 25%;
  position: relative;
}
.modal-header-banner.no-trailer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,20,.15) 0%, rgba(10,10,20,.75) 100%);
}

/* ── Top del creador ("Lo mejor de su estantería") ── */
.hub-top { margin: var(--space-2xl) 0 var(--space-xl); }
.hub-top-sub {
  margin: -6px 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-muted, #9a9ab0);
}
.hub-top-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.hub-top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid var(--accent-series, #ffd60a);
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.hub-top-item:hover {
  background: rgba(255,214,10,.09);
  border-left-color: var(--accent-games);
  transform: translateX(3px);
}
.hub-top-item:focus-visible { outline: 2px solid var(--accent-games); outline-offset: 2px; }
.hub-top-rank {
  flex-shrink: 0;
  width: 26px;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--pixel-lg);
  color: var(--accent-series, #ffd60a);
  text-align: center;
}
.hub-top-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hub-top-title {
  font-weight: 700;
  font-size: var(--pixel-lg);
  color: var(--text-primary, #f0f0f5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-top-meta { font-size: var(--text-xs); color: var(--text-muted, #9a9ab0); }
.hub-top-rating {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-games);
}
@media (max-width: 560px) {
  .hub-top-list { grid-template-columns: 1fr; }
}

/* ── Buscador global de la barra ── */
.navbar-search { position: relative; flex-shrink: 0; margin-left: auto; }
.navbar-search-input {
  width: 150px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary, #f0f0f5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  transition: width .2s ease, border-color .15s ease;
}
/* `text-overflow` en el propio campo (c-01): en móvil mide 110px y
   «Buscar…» no cabía por 3px — salía cortado en seco. El placeholder hereda
   el recorte del input, así que la elipsis va aquí y no en el pseudo. */
.navbar-search-input { text-overflow: ellipsis; }
.navbar-search-input::placeholder { color: #7e86a8; }
.navbar-search-input:focus {
  outline: none;
  width: 210px;
  border-color: var(--accent-games);
  box-shadow: 0 0 8px rgba(0,245,212,.3);
}
.navbar-search-results {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  width: min(340px, calc(100vw - 24px));
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: rgba(12,12,24,.98);
  border: 2px solid var(--accent-games);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
  z-index: 1100;
}
.nsr-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.nsr-row:hover { background: rgba(0,245,212,.1); }
.nsr-row img {
  width: 34px; height: 46px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 3px;
  image-rendering: auto;
}
.nsr-text { display: flex; flex-direction: column; min-width: 0; }
.nsr-title {
  font-size: var(--pixel-lg); font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsr-meta { font-size: var(--text-xs); color: var(--text-muted, #9a9ab0); }
.nsr-empty { margin: 0; padding: 12px; font-size: var(--text-sm); color: var(--text-muted, #9a9ab0); text-align: center; }

@media (max-width: 900px) {
  .navbar-search { order: 3; margin-left: 8px; }
  .navbar-search-input { width: 110px; }
  .navbar-search-input:focus { width: 150px; }
}
@media (max-width: 560px) {
  .navbar-search-input { width: 92px; font-size: var(--text-xs); }
  .navbar-search-input:focus { width: 130px; }
}

/* ── Estados de Mi Lista ── */
.modal-list-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.modal-status-picker { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.status-chip {
  padding: 5px 9px;
  font-size: var(--text-sm);
  color: var(--text-muted, #9a9ab0);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.status-chip:hover { color: #fff; border-color: var(--accent-games); }
.status-chip.active {
  color: #06121a;
  background: var(--accent-games);
  border-color: var(--accent-games);
  font-weight: 700;
}
/* Insignia de estado en las tarjetas de Mi Lista */
.card-status-pill {
  position: absolute;
  left: 6px; bottom: 6px;
  z-index: 3;
  padding: 3px 7px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #06121a;
  background: var(--accent-games);
  border-radius: 3px;
}
.card-status-pill.st-pending { background: var(--accent-series, #ffd60a); }
.card-status-pill.st-playing { background: var(--accent-games); }
.card-status-pill.st-done    { background: #4ade80; }
@media (max-width: 560px) {
  .modal-list-actions { align-items: stretch; width: 100%; }
  .modal-status-picker { justify-content: flex-start; }
}

/* Resumen de estados en Mi Lista */
.mylist-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.mylist-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--accent-games);
  border-radius: 4px;
}
.mylist-stat.st-pending { border-left-color: var(--accent-series, #ffd60a); }
.mylist-stat.st-done    { border-left-color: #4ade80; }
.mylist-stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--pixel-xl);
  color: var(--text-primary, #f0f0f5);
}
.mylist-stat-label { font-size: var(--text-sm); color: var(--text-muted, #9a9ab0); }

/* ── Barra de navegación: cabe todo sin apelotonarse ──────────────────────
   Al añadir Juegos/Películas/Series y el buscador, el menú se quedó corto de
   espacio en pantallas medianas y el logo llegaba a tocar el primer enlace. */
.navbar-inner { gap: var(--space-lg); }
.navbar-links { gap: var(--space-md); flex-wrap: nowrap; }
.navbar-link { white-space: nowrap; }

/* La insignia de avisos de gratis sobre el enlace GRATIS (c-04): mismo
   lenguaje que el contador de noticias, en el verde de «gratis». Solo
   existe cuando hay avisos sin ver — la pinta y la quita Navbar.js. */
.navbar-link.tiene-aviso { position: relative; }
.navbar-gratis-aviso {
  position: absolute;
  top: -7px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-inverse);
  background: var(--pixel-green);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 10px rgba(57, 255, 20, .55);
}

/* Entre 769 y 1180 px hay que apretar un poco: menos separación y letra algo
   menor, en vez de que se solapen los elementos. */
@media (max-width: 1180px) {
  .navbar-inner { gap: var(--space-md); }
  .navbar-links { gap: 12px; }
  .navbar-link { font-size: var(--pixel-xs); }
  .navbar-logo { font-size: var(--pixel-base); }
  .navbar-search-input { width: 96px; }
  .navbar-search-input:focus { width: 140px; }
}
@media (max-width: 980px) {
  .navbar-links { gap: 9px; }
  .navbar-link { font-size: var(--pixel-xs); }
}
/* En móvil el menú pasa al desplegable; el buscador se queda visible */
@media (max-width: 768px) {
  .navbar-search { margin-left: auto; margin-right: var(--space-sm); }
}

/* El banner generado se veía demasiado apagado tras el degradado del tema */
.profile-banner-bg {
  background-size: cover;
  background-position: center;
  opacity: 1;
  filter: saturate(1.15) brightness(1.25);
}

/* ═══════════════ Pulido v2: menos hueco vacío, NEO más discreto ═══════════════ */

/* Hero: recortar el aire de más de la parte superior */
.hero-banner { padding-top: calc(var(--navbar-height) + var(--space-lg)); padding-bottom: var(--space-xl); }
/* En el hero, dejar sitio a NEO para que no tape la cifra de "Creadores" */
@media (min-width: 901px) {
  .hero-stats { padding-left: 78px; }
}

/* Cabeceras de sección (Juegos/Películas/Series): mucho menos espacio muerto */
.page-content-type { padding-top: var(--space-lg); }
.page-content-type .page-subtitle {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  max-width: 680px;
  line-height: 1.3;
}
.page-content-type .page-header { margin-bottom: var(--space-sm); }
/* El separador de puntos ocupaba una franja enorme: se reduce. (La clase
   `.pixel-divider` ya no existe desde t-04; queda el `hr` suelto.) */
.page-content-type hr { margin: var(--space-md) 0; }
/* En Juegos, Películas y Series el separador se quitó (t-02: a Rubén no le
   gustaban los guiones). Su aire se queda, para que el primer carrusel no se
   pegue a la entradilla. */
.page-content-type .page-subtitle + .subcategory-section { margin-top: var(--pc-ritmo-corto); }

/* ═══════════════════════════════════════════════════════════
   TIENDA DE PIXELCOINS
   ═══════════════════════════════════════════════════════════ */
.page-shop { padding: var(--space-xl) 0 var(--space-3xl); }

.shop-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-xl);
}
.shop-title { font-family: 'Press Start 2P', monospace; font-size: var(--text-base); color: var(--accent-games); margin: 0 0 8px; line-height: 1.3; }
.shop-sub { max-width: 620px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.shop-sub b { color: var(--accent-series, #ffd60a); }

.shop-saldo {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 14px 20px; background: rgba(255,214,10,.08);
  border: 2px solid var(--accent-series, #ffd60a); border-radius: 6px;
}
.shop-saldo-num { font-family: 'Press Start 2P', monospace; font-size: var(--pixel-xl); color: var(--accent-series, #ffd60a); }
.shop-saldo-lbl { font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 1px; }
.shop-racha { margin-top: 4px; font-size: var(--text-sm); color: #ff8500; }

/* Vista previa del avatar */
.shop-preview {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-lg); margin-bottom: var(--space-lg);
  background: rgba(255,255,255,.03); border: 1px solid var(--ring); border-radius: 8px;
}
.shop-preview-avatar {
  position: relative; width: 108px; height: 108px; flex-shrink: 0;
  background: #12121e; overflow: visible;
}
.shop-preview-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.shop-preview-badge {
  position: absolute; right: -8px; bottom: -8px; z-index: 3;
  font-size: var(--text-lg); line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
.shop-preview-info { display: flex; flex-direction: column; gap: 4px; }
.shop-preview-name { font-family: 'Press Start 2P', monospace; font-size: var(--pixel-lg); color: var(--text-primary); }
.shop-preview-title { font-size: var(--pixel-lg); color: var(--accent-games); font-style: italic; }

/* Barra de progreso */
.shop-progreso { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-2xl); flex-wrap: wrap; }
.shop-progreso-barra { flex: 1; min-width: 180px; height: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--ring); overflow: hidden; }
.shop-progreso-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-games), var(--accent-series, #ffd60a)); transition: width .4s ease; }
.shop-progreso-txt { font-size: var(--text-sm); color: var(--text-muted); }

/* Dos columnas: tienda + panel lateral */
.shop-cols { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--space-2xl); align-items: start; }

.shop-familia { margin-bottom: var(--space-2xl); }
.shop-familia-titulo { font-family: 'Press Start 2P', monospace; font-size: var(--pixel-lg); color: var(--text-primary); margin: 0 0 4px; }
.shop-familia-desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-md); }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: var(--space-md); }

.shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-md); text-align: center;
  background: var(--surface-2); border: 2px solid var(--ring); border-radius: 6px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.shop-item:hover { transform: translateY(-4px); border-color: var(--accent-games); box-shadow: 0 10px 22px rgba(0,0,0,.5); }
.shop-item.es-mio { border-color: rgba(0,245,212,.45); }
.shop-item[data-rareza="epico"]      { border-color: rgba(247,37,133,.4); }
.shop-item[data-rareza="legendario"] { border-color: rgba(255,214,10,.5); box-shadow: 0 0 16px rgba(255,214,10,.12); }

.shop-item-muestra { display: flex; align-items: center; justify-content: center; height: 76px; width: 100%; }
.shop-item-swatch { display: block; width: 62px; height: 62px; background: #14141f; }
.shop-item-emoji { font-size: var(--text-3xl); line-height: 1; }
.shop-item-titulo { font-size: var(--text-sm); color: var(--accent-games); font-style: italic; padding: 0 6px; }
.shop-item-nombre { font-size: var(--pixel-lg); font-weight: 700; color: var(--text-primary); margin: 0; }
.shop-item-rareza { font-size: var(--text-xs); letter-spacing: 1px; text-transform: uppercase; }
.shop-item-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; margin: 0 0 6px; min-height: 32px; }

.shop-btn {
  width: 100%; padding: 9px; font-family: 'Press Start 2P', monospace; font-size: var(--pixel-sm);
  border: 2px solid var(--accent-games); background: rgba(0,245,212,.1);
  color: var(--accent-games); cursor: pointer; border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.shop-btn:hover:not(:disabled) { background: var(--accent-games); color: #06121a; }
.shop-btn-eq { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,.1); cursor: default; }
.shop-btn-comprar { border-color: var(--accent-series, #ffd60a); color: var(--accent-series, #ffd60a); background: rgba(255,214,10,.1); }
.shop-btn-comprar:hover:not(:disabled) { background: var(--accent-series, #ffd60a); color: #06121a; }
.shop-btn.sin-saldo { opacity: .45; cursor: not-allowed; border-color: var(--ring); color: var(--text-muted); background: transparent; }

/* Panel lateral */
.shop-aside { display: flex; flex-direction: column; gap: var(--space-lg); position: sticky; top: calc(var(--navbar-height) + 16px); }
.shop-ganar, .shop-historial { padding: var(--space-lg); background: var(--surface-2); border: 2px solid var(--ring); border-radius: 6px; }
.shop-ganar h3, .shop-historial h3 { font-family: 'Press Start 2P', monospace; font-size: var(--pixel-sm); color: var(--accent-games); margin: 0 0 var(--space-md); }
.shop-ganar ul, .shop-historial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shop-ganar-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.shop-ganar-icon { flex-shrink: 0; }
.shop-ganar-label { flex: 1; color: var(--text-secondary); }
.shop-ganar-coins { color: var(--accent-series, #ffd60a); font-weight: 700; }
.shop-ganar-nota { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.shop-historial li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); }
.shop-historial b.pos { color: #4ade80; }
.shop-historial b.neg { color: var(--accent-movies); }

/* ── Efectos de los objetos (se usan también en el perfil) ── */
.obj-marco-rgb { animation: objRGB 3s linear infinite; }
@keyframes objRGB {
  0%   { border-color: #00f5d4; box-shadow: 0 0 14px rgba(0,245,212,.7); }
  33%  { border-color: #f72585; box-shadow: 0 0 14px rgba(247,37,133,.7); }
  66%  { border-color: #ffd60a; box-shadow: 0 0 14px rgba(255,214,10,.7); }
  100% { border-color: #00f5d4; box-shadow: 0 0 14px rgba(0,245,212,.7); }
}
.obj-marco-glitch { animation: objGlitch 2.2s steps(2) infinite; }
@keyframes objGlitch {
  0%, 90%, 100% { transform: translate(0); filter: none; }
  92%  { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  94%  { transform: translate(2px, -1px); filter: hue-rotate(-60deg); }
  96%  { transform: translate(-1px, 0); }
}
.obj-fondo-rejilla {
  background-image: linear-gradient(rgba(0,245,212,.22) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,245,212,.22) 1px, transparent 1px);
  background-size: 8px 8px;
}
.obj-fondo-scan { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 2px, transparent 2px 4px); }
.obj-fondo-estrellas {
  background-color: #0b0b1a;
  background-image: radial-gradient(#fff 1px, transparent 1px), radial-gradient(#00f5d4 1px, transparent 1px);
  background-size: 16px 16px, 26px 26px;
  background-position: 0 0, 8px 11px;
  animation: objTwinkle 3s steps(2) infinite;
}
@keyframes objTwinkle { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
.obj-fondo-matrix {
  background-color: #030c06;
  background-image: repeating-linear-gradient(180deg, rgba(74,222,128,.5) 0 3px, transparent 3px 10px);
  background-size: 6px 30px;
  animation: objMatrix 1.6s linear infinite;
}
@keyframes objMatrix { from { background-position: 0 0; } to { background-position: 0 30px; } }

/* Saldo en la barra de navegación */
.navbar-coins {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; margin-left: 6px;
  font-family: 'Press Start 2P', monospace; font-size: var(--pixel-xs);
  color: var(--accent-series, #ffd60a);
  background: rgba(255,214,10,.1);
  border: 1px solid rgba(255,214,10,.45); border-radius: 4px;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.navbar-coins:hover { background: rgba(255,214,10,.22); transform: translateY(-1px); }
.navbar-coins.gano { animation: coinsPop .6s ease; }
@keyframes coinsPop {
  0%,100% { transform: scale(1); }
  35%     { transform: scale(1.22); box-shadow: 0 0 16px rgba(255,214,10,.7); }
}

@media (max-width: 900px) {
  .shop-cols { grid-template-columns: 1fr; }
  /* La regla base es `sticky` con `top` (calc de navbar+16px), y este
     `static` lo ignora en silencio. Si algún día pasa a `relative`, añade
     `top: auto` en la misma regla — si no, hereda ese `top` y se desplaza
     sin que nadie lo pida (pasó de verdad en pc-035, editor de avatar). */
  .shop-aside { position: static; }
}
@media (max-width: 560px) {
  .shop-title { font-size: var(--pixel-lg); }
  .shop-header { flex-direction: column; }
  .shop-saldo { align-items: flex-start; width: 100%; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
  /* Era 34×22.5, la mitad del mínimo táctil de 44×44 (accesibilidad.css).
     La fila de iconos de la navbar (noticias, hamburguesa) ya mide 44px de
     alto aquí, así que crecer no altera el alto de la cabecera — solo se
     ensancha un poco el pastilla, absorbido por el buscador contraíble de
     al lado (polish.css, arreglo del buscador móvil). */
  .navbar-coins { font-size: var(--pixel-xs); padding: 5px 7px; min-width: 44px; min-height: 44px; justify-content: center; }
}

/* Objetos equipados en el perfil del usuario */
.perfil-avatar-eq { border: 3px solid var(--accent-games); box-shadow: 0 0 15px var(--accent-games); }
.perfil-avatar-insignia {
  position: absolute; right: -9px; bottom: -9px; z-index: 3;
  font-size: var(--pixel-3xl); line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.75));
}
.perfil-titulo-eq {
  margin: 6px 0 0; font-size: var(--pixel-lg); font-style: italic;
  color: var(--accent-games); letter-spacing: .3px;
}
.perfil-coins {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px;
}
.perfil-coins-saldo {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 12px; text-decoration: none;
  font-family: 'Press Start 2P', monospace; font-size: var(--pixel-base);
  color: var(--accent-series, #ffd60a);
  background: rgba(255,214,10,.1);
  border: 2px solid var(--accent-series, #ffd60a); border-radius: 5px;
  transition: background .15s ease;
}
.perfil-coins-saldo:hover { background: rgba(255,214,10,.24); }
.perfil-coins-saldo small { font-family: var(--font-body); font-size: var(--text-xs); opacity: .85; }
.perfil-coins-dato { font-size: var(--text-sm); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   CARNET DE SOCIO
   La tarjeta se dibuja en un canvas; aquí solo se viste el modal y el botón
   que lo abre desde el perfil.
   ══════════════════════════════════════════════════════════════════════════ */

.carnet-modal {
  max-width: 880px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 26px 24px;
  text-align: center;
}
.carnet-titulo {
  font-family: var(--font-pixel);
  /* --pixel-md nunca existió en variables.css: el font-size real que se veía
     era el valor de reserva (16px), no un token. Se deja en --pixel-xl, el
     escalón real más cercano. */
  font-size: var(--pixel-xl);
  color: var(--accent-games);
  margin: 0 0 10px;
  text-shadow: 0 0 12px rgba(0, 245, 212, .45);
}
.carnet-sub {
  font-family: var(--font-body);
  font-size: var(--text-xl, 20px);
  color: var(--text-secondary);
  margin: 0 auto 20px;
  max-width: 620px;
  line-height: 1.4;
}
.carnet-sub a { color: var(--accent-series); text-decoration: underline; }

.carnet-lienzo {
  position: relative;
  background: #05050c;
  border: 2px solid rgba(255, 255, 255, .1);
  padding: 10px;
  margin-bottom: 20px;
}
.carnet-lienzo canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}
.carnet-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  color: var(--text-muted);
  background: #05050c;
}

.carnet-acciones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.carnet-nota {
  font-family: var(--font-body);
  font-size: var(--text-lg, 18px);
  color: var(--text-muted);
  margin-top: 14px;
}

/* Botón de acceso desde el perfil */
.perfil-carnet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  line-height: 1.6;
  padding: 10px 14px;
  margin-top: 10px;
  cursor: pointer;
  color: #05050c;
  background: linear-gradient(135deg, #ffd60a, #f7a600);
  border: 2px solid #fff3b0;
  box-shadow: 0 0 14px rgba(255, 214, 10, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.perfil-carnet-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(255, 214, 10, .6);
}

@media (max-width: 640px) {
  .carnet-modal { padding: 22px 14px 18px; }
  .carnet-titulo { font-size: var(--pixel-base); }
  .carnet-acciones .pixel-btn { width: 100%; }
}

/* El texto de ayuda del carnet, más contenido en pantallas pequeñas */
@media (max-width: 640px) {
  .carnet-sub { font-size: var(--text-lg, 18px); line-height: 1.3; }
}

/* Radio Videoclub — quitada. Aquí vivía la barra de emisión, el botón de la
   navbar y la animación que bajaba la navbar mientras sonaba (`top:
   var(--radio-alto)` sobre `body.radio-al-aire .navbar`). `.navbar` ya no
   necesita animar `top` en absoluto: nada vuelve a tocarlo.

   OJO si se añade otra animación a `.navbar`: `transition` es una propiedad
   única — declararla otra vez no se combina con esta, la SUSTITUYE entera.
   `background` (oscurecerse al hacer scroll), `transform` y `opacity`
   (ocultarse/aparecer) van siempre juntas en la misma línea por eso. */
.navbar {
  transition:
    background var(--transition-normal),
    transform var(--navbar-show-duration) var(--navbar-ease),
    opacity var(--navbar-show-duration) var(--navbar-ease);
}

/* ══════════════════════════════════════════════════════════════════════════
   HÉROE — rejilla de fondo y píxeles flotantes
   Estaba dentro de un <style> en HeroBanner.js: el CSS vivía en una plantilla
   de JavaScript y se volvía a analizar en cada pintado de la portada.
   ══════════════════════════════════════════════════════════════════════════ */

      .hero-pixel-grid {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image:
          linear-gradient(rgba(0,245,212,0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0,245,212,0.02) 1px, transparent 1px);
        background-size: 32px 32px;
        z-index: 1;
      }

      .hero-floating-pixels {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: 2;
      }

      .floating-pixel {
        position: absolute;
        bottom: -20px;
        left: var(--x);
        width: 8px;
        height: 8px;
        background: var(--color);
        opacity: 0.5;
        animation: floatUp 6s var(--delay) infinite ease-in;
        image-rendering: pixelated;
      }

      .floating-pixel::after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: inherit;
        box-shadow: 0 0 6px var(--color);
      }

      @keyframes floatUp {
        0% { transform: translateY(0) rotate(0deg); opacity: 0; }
        10% { opacity: 0.6; }
        90% { opacity: 0.6; }
        100% { transform: translateY(-80vh) rotate(360deg); opacity: 0; }
      }
    
/* ══════════════════════════════════════════════════════════════════════════
   SALTAR AL CONTENIDO
   Primer elemento enfocable del documento. Oculto hasta que recibe el foco,
   momento en el que baja a la vista. Sin él, quien navega con teclado tiene
   que recorrer los nueve enlaces del menú en cada página.
   ══════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 3000;
  padding: 12px 18px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  color: #05050c;
  background: var(--accent-games, #00f5d4);
  border: 2px solid #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* El destino del salto no debe dibujar un cerco al recibir el foco por código */
#page-content:focus { outline: none; }

/* El título que recibe el foco al cambiar de página no debe dibujar el cerco:
   nadie ha tabulado hasta él, se le lleva el foco para que los lectores de
   pantalla anuncien la página nueva. Sigue siendo inalcanzable con Tab
   (tabindex="-1"), así que no se pierde ninguna pista de navegación. */
.foco-de-ruta:focus,
.foco-de-ruta:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   REJILLA PAGINADA — botón de "ver más" y cuenta de resultados
   Las páginas de catálogo pintaban su colección entera: 17.000 px de alto en
   un móvil. Ahora van por lotes y este es el pie que los pide.
   ══════════════════════════════════════════════════════════════════════════ */

.rejilla-mas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 28px 0 8px;
}
.rejilla-mas-btn[hidden] { display: none; }
.rejilla-mas-btn { min-width: 240px; }

.rejilla-cuenta {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg, 18px);
  color: var(--text-muted);
  letter-spacing: .5px;
}

/* La ficha que recibe el foco al ampliar no debe dibujar el cerco: nadie ha
   tabulado hasta ella, se le lleva el foco para no perder el sitio. */
.content-card[tabindex="-1"]:focus,
.youtuber-card[tabindex="-1"]:focus { outline: none; }

@media (max-width: 560px) {
  .rejilla-mas-btn { width: 100%; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL MUÑECO — vistas previas en la tienda y en el perfil
   Se pinta con `image-rendering: pixelated` para que al ampliarlo el píxel
   quede con filo y no borroso.
   ══════════════════════════════════════════════════════════════════════════ */

.shop-item-munieco,
.shop-preview-munieco,
.munieco {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.shop-item-munieco { height: 104px; width: auto; margin: 0 auto; }
.shop-preview-munieco { height: 100%; width: auto; margin: 0 auto; object-fit: contain; }
.shop-preview-munieco svg { display: block; width: 100%; height: 100%; }

/* ── Editor del muñeco ── */
.editor-munieco { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }

.editor-vista {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px;
  background: #0a0a14;
  border: 2px solid var(--accent-games);
  box-shadow: 0 0 20px rgba(0, 245, 212, .18);
}
.editor-vista img { height: 208px; width: auto; }
.editor-giro { display: flex; gap: 6px; }
.editor-giro button {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  padding: 6px 9px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  cursor: pointer;
}
.editor-giro button.activo {
  color: #05050c;
  background: var(--accent-games);
  border-color: var(--accent-games);
}

.editor-ranuras { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.editor-ranura h4 {
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  color: var(--text-secondary);
  margin: 0 0 8px;
  letter-spacing: 1px;
}
.editor-opciones { display: flex; gap: 8px; flex-wrap: wrap; }

.editor-op {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  background: #12121f;
  border: 2px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.editor-op:hover { transform: translateY(-2px); border-color: var(--accent-games); }
.editor-op.puesto { border-color: var(--accent-games); box-shadow: 0 0 10px rgba(0, 245, 212, .45); }
.editor-op.bloqueado { opacity: .55; cursor: not-allowed; }
.editor-op img { image-rendering: pixelated; height: 100%; width: auto; margin: 0 auto; display: block; }
.editor-op .swatch { display: block; width: 100%; height: 100%; }
.editor-op .precio {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  padding: 2px 0;
  text-align: center;
  color: #05050c;
  background: var(--accent-series);
}
.editor-op.bloqueado .precio { background: var(--text-muted); }

.editor-aviso {
  font-family: var(--font-body);
  font-size: var(--text-lg, 18px);
  color: var(--text-muted);
  margin: 4px 0 0;
}
.editor-aviso a { color: var(--accent-series); }

@media (max-width: 640px) {
  .editor-munieco { gap: 16px; }
  .editor-vista { width: 100%; }
  .editor-vista img { height: 160px; }
  .editor-op { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MENÚ: EL CATÁLOGO AGRUPADO EN UN DESPLEGABLE
   ══════════════════════════════════════════════════════════════════════════
   Juegos, Películas y Series eran tres enlaces sueltos para ser una sola cosa.
   Agrupados, la barra pasa de nueve enlaces a siete y respira.

   El color por tipo (cian juegos · magenta películas · amarillo series) es el
   mismo que ya usan las tarjetas y las cabeceras de sección, así que el
   desplegable no inventa un lenguaje nuevo: repite el que ya existe.
   ────────────────────────────────────────────────────────────────────────── */

.nav-grupo { position: relative; display: flex; align-items: center; }

/* El botón tiene que pasar por enlace: hereda .navbar-link y se le quitan los
   adornos que el navegador le pone por ser <button>. */
.nav-grupo-boton {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Ni una sola declaración de tipografía aquí, a propósito. El botón ya lleva
     la clase .navbar-link, que le da fuente, tamaño y espaciado igual que a los
     enlaces. Poner `font-family: inherit` (que es lo que había) lo rompía: no
     heredaba del enlace, sino del contenedor —o sea, la fuente y el tamaño del
     cuerpo—, y "CATÁLOGO" salía en otra letra y más pequeño. */
}
.nav-grupo-flecha {
  font-size: .85em;
  opacity: .6;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-grupo.abierto .nav-grupo-flecha { transform: rotate(180deg); opacity: 1; }
.nav-grupo.abierto > .nav-grupo-boton { color: var(--text-primary); }
.nav-grupo.abierto > .nav-grupo-boton::after { width: 100%; }

.nav-desplegable {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 16px;
  min-width: 196px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(10, 10, 15, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid rgba(0, 245, 212, .22);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .65);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              visibility var(--transition-fast);
}

/* Puente invisible entre el botón y el panel: sin él, el hueco de 16px basta
   para que el ratón "salga" del grupo y el menú se cierre a medio camino. */
.nav-desplegable::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -18px;
  height: 18px;
}

.nav-grupo.abierto .nav-desplegable {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  min-height: 44px;              /* objetivo táctil, para tabletas */
  box-sizing: border-box;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  border-left: 3px solid transparent;
  transition: color var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.nav-opcion-icono {
  font-size: var(--pixel-lg);
  line-height: 1;
  filter: grayscale(.55);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.nav-opcion:hover,
.nav-opcion:focus-visible { transform: translateX(3px); }
.nav-opcion:hover .nav-opcion-icono,
.nav-opcion:focus-visible .nav-opcion-icono { filter: none; transform: scale(1.14); }
.nav-opcion:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* ── Cada opción, con su color ── */
.nav-opcion[data-tipo="games"]:hover,
.nav-opcion[data-tipo="games"]:focus-visible,
.nav-opcion[data-tipo="games"].active {
  color: var(--accent-games);
  border-left-color: var(--accent-games);
  background: rgba(0, 245, 212, .10);
}
/* El magenta de marca se queda corto de contraste a este tamaño, así que como
   LETRA se usa la variante clara; el borde y el tinte siguen siendo el de
   marca. */
.nav-opcion[data-tipo="movies"]:hover,
.nav-opcion[data-tipo="movies"]:focus-visible,
.nav-opcion[data-tipo="movies"].active {
  color: var(--accent-movies-texto);
  border-left-color: var(--accent-movies);
  background: rgba(247, 37, 133, .12);
}
.nav-opcion[data-tipo="series"]:hover,
.nav-opcion[data-tipo="series"]:focus-visible,
.nav-opcion[data-tipo="series"].active {
  color: var(--accent-series);
  border-left-color: var(--accent-series);
  background: rgba(255, 214, 10, .10);
}
/* La que ya estás viendo se queda encendida sin necesidad del ratón */
.nav-opcion.active .nav-opcion-icono { filter: none; }

/* ── Barra más limpia, en tres bloques ──
   Ocho enlaces seguidos y a la misma distancia se leen como una lista larga.
   Agrupados por lo que uno viene a hacer —dónde mirar · qué hay nuevo · lo
   tuyo— y con aire entre grupos, se leen como tres ideas.

   El aire hace casi todo el trabajo; la línea solo lo remata, por eso es
   apenas visible y se desvanece por los extremos. */
.navbar-links { gap: 0; }

.nav-bloque {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-sep {
  width: 1px;
  height: 18px;
  margin: 0 var(--space-lg);
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 245, 212, .28) 25%,
    rgba(0, 245, 212, .28) 75%,
    transparent
  );
}

.navbar-link::after { height: 2px; box-shadow: 0 0 4px var(--accent-games); }

/* Al estrecharse se aprieta el aire entre bloques antes que el de dentro: el
   agrupado se nota hasta el último píxel que quede. */
@media (max-width: 1320px) {
  .nav-sep { margin: 0 var(--space-md); }
}
@media (max-width: 1180px) {
  .nav-bloque { gap: 12px; }
  .nav-sep { margin: 0 14px; }
  .navbar-link { font-size: var(--pixel-xs); }
  .nav-opcion { font-size: var(--pixel-xs); }
}
@media (max-width: 980px) {
  .nav-bloque { gap: 9px; }
  .nav-sep { margin: 0 10px; height: 14px; }
}

/* ── El menú del móvil, con los mismos tres bloques ── */
.navbar-mobile { gap: var(--space-xl); }
.nav-bloque-movil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.nav-bloque-movil + .nav-bloque-movil {
  width: min(280px, 68vw);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(0, 245, 212, .18);
}

/* ── El grupo "Catálogo", en acordeón ──
   Antes iba plano: Catálogo, Juegos, Películas y Series se leían como cuatro
   líneas al mismo nivel, con el rótulo del grupo repetido junto a sus propios
   hijos — la duplicación que se pedía quitar. Es un <details> nativo: sin
   estado en JS, cerrado por defecto (salvo que ya estés en una ruta del
   grupo, ver `esActiva` en Navbar.js), y el navegador ya sabe anunciarlo a
   lectores de pantalla sin que le pongamos aria-expanded a mano. Las filas de
   dentro son las mismas `.nav-opcion` que pinta el desplegable de
   escritorio — mismo icono, mismo color por tipo — así el acordeón no
   inventa un componente nuevo, solo cambia el envoltorio. */
.nav-acordeon-movil { width: min(280px, 78vw); }

.nav-acordeon-movil > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}
/* El triángulo nativo del <summary> ya lo dibuja `.nav-grupo-flecha`: el
   marcador por defecto del navegador sobra. */
.nav-acordeon-movil > summary::-webkit-details-marker { display: none; }
.nav-acordeon-movil > summary::marker { content: ''; }

.nav-acordeon-movil .nav-grupo-flecha { display: inline-block; }
.nav-acordeon-movil[open] > summary .nav-grupo-flecha { transform: rotate(180deg); opacity: 1; }
.nav-acordeon-movil[open] > summary { color: var(--text-primary); }
.nav-acordeon-movil[open] > summary::after { width: 100%; }

.nav-acordeon-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-sm);
  padding: 4px;
  background: rgba(255, 255, 255, .03);
  border: 2px solid rgba(0, 245, 212, .2);
  box-shadow: var(--shadow-pixel-sm);
}
/* `.nav-opcion` ya trae objetivo táctil de 44px y su propio color por tipo
   (`data-tipo`); aquí solo se ajusta el ancho para que ocupe todo el panel. */
.nav-acordeon-panel .nav-opcion { width: 100%; box-sizing: border-box; }

/* En el móvil el menú entero pasa al desplegable de pantalla completa. El
   grupo de escritorio (hover) no pinta nada ahí: el acordeón de arriba ocupa
   su sitio. */
@media (max-width: 768px) {
  .nav-grupo { display: none; }

  .navbar-mobile {
    box-sizing: border-box;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--navbar-height) + var(--space-md)) var(--space-md) calc(var(--space-xl) + env(safe-area-inset-bottom));
  }

  /* El menú sigue teniendo la misma tipografía y ritmo visual; solo crece la
     zona que responde al pulgar. */
  .navbar-mobile .navbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAR — tres zonas de verdad + ocultación inteligente al hacer scroll
   ══════════════════════════════════════════════════════════════════════════
   `top: 0` ya estaba bien puesto (components.css) — no había ningún margen,
   padding exterior ni wrapper desplazado creando una franja por encima; lo
   comprobamos midiendo `getBoundingClientRect()` antes de tocar nada. Lo que
   sí fallaba era la distribución: `.navbar-inner` repartía los hijos (logo,
   enlaces, noticias, monedas, buscador, hamburguesa) con el mismo
   `justify-content: space-between`, así que los controles de la derecha no
   se leían como un bloque y en pantallas anchas quedaba muerto el espacio
   central. Esto pasa a un grid de tres columnas — logo / navegación / apenas
   controles — con la navegación centrada en el hueco de en medio, no en la
   pantalla entera. */
.navbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-xl);
  /* Antes tope en --container-xl (1280px): en un monitor ancho dejaba una
     franja muerta a cada lado. --container-2xl (1440px) ya existía como
     token del proyecto — no es un valor nuevo, es el siguiente que había. */
  max-width: var(--container-2xl);
}

.navbar-links {
  /* El bloque central se centra en SU columna (el hueco entre logo y
     controles), no en el viewport — así el equilibrio se nota aunque logo y
     controles no midan lo mismo, que es justo el caso aquí. */
  justify-content: center;
}

/* Noticias, PixelCoins, buscador y hamburguesa iban sueltos como hijos
   directos de `.navbar-inner`; ahora son un único grupo con su propio
   espaciado, para que se perciban como "las utilidades", no como iconos
   flotando por su cuenta. */
.navbar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}
/* El buscador se empujaba solo a la derecha con `margin-left: auto` cuando
   vivía suelto en `.navbar-inner`; dentro de `.navbar-controls` ese margen
   separaría el buscador y la hamburguesa del resto del grupo en vez de
   mantenerlos juntos, así que aquí se anula. */
.navbar-controls .navbar-search { margin-left: 0; }

@media (max-width: 1180px) {
  .navbar-inner { column-gap: var(--space-md); }
}

/* ══════════════════════════════════════════════════════════════════════════
   n-02 — LA BARRA NO SE PISA, SIN LETRA ILEGIBLE (10/09/2026)
   ══════════════════════════════════════════════════════════════════════════
   A 1280px la barra medía más de lo que cabía (~1271px de contenido en 1216
   útiles) y el bloque central de enlaces —flex nowrap CENTRADO en una columna
   minmax(0,1fr)— desbordaba su columna POR LOS DOS LADOS a la vez: el
   sobrante caía mitad sobre el logo y mitad bajo la campana. Una medición
   anterior dio «sin solape» mirando la caja del CONTENEDOR, que nunca se sale
   de su columna; quienes se salen son sus HIJOS. Por eso la prueba
   tests/navbar_sin_solapes.mjs mide por PAREJAS de cajas visibles.

   El arreglo de urgencia anterior (commit 3dd7c65) bajaba la letra de los
   enlaces a --pixel-xs (8px) en TODO el tramo 769–1440px, es decir en los
   portátiles más comunes: resolvía el solape a costa de dejar la navegación
   en un tamaño que ya no se lee cómodamente. Se retira y se sustituye por
   esto, que respeta el tamaño de letra.

   Dos tramos, medidos y no a ojo:

   · 1280–1440: cabe en UNA fila apretando AIRE, no texto — aire lateral y de
     columnas 32→24, logo un punto abajo, buscador 110→90 y los huecos entre
     enlaces un paso más cortos: ~110px recuperados frente a los 83 que
     faltaban en el peor caso.

   · 769–1279: NO cabe en una fila sin encoger el texto hasta lo ilegible
     (a 1024 faltaban ~340px), y quitar secciones es decisión de producto que
     no toca aquí. La barra pasa a DOS filas: logo y utilidades arriba, la
     navegación entera debajo — todo sigue visible y nada se pisa. La altura
     viaja por el MISMO token `--navbar-height` que ya usan héroes, rellenos
     de página y stickies, así que todos se ajustan solos.

   LA FRONTERA ES 1280, NO 1180, y el número no es de gusto: está medido
   barriendo anchos de 10 en 10 con el bloque de dos filas anulado. Lo que
   pide UNA fila sin pisarse, con la letra a 9px:
       sin sesión .................... desde 1200px
       con el nombre recortado a 9 ... desde 1240px
       con el nombre recortado a 12 .. desde 1270px
   Cortar en 1180 —como venía la propuesta original, que solo se probó a
   1024/1280/1440 y nunca en su propio punto de ruptura— dejaba ROTO todo el
   tramo 1181–1239: a 1181px «CATÁLOGO» pisaba el logo 26px con un nombre
   largo. Con la frontera en 1280 quedan 40px de margen en el peor caso, y
   1280 es además el ancho de portátil más común: es justo donde interesa
   tener holgura y no jugársela a un píxel.

   El `min-width: 769px` de los tres bloques NO es decorativo, y no estaba
   en la versión original de estas reglas: por debajo de 769px el menú vive en
   la hamburguesa y estas reglas no arreglan nada, pero polish.css se carga
   DESPUÉS de components.css y con la misma especificidad, así que sin la
   guarda pisaban el móvil — el padding de la barra subía de 16 a 24px y el
   logo de 10 a 12px justo donde el buscador ya iba al límite (ver el bloque
   «Buscador de la navbar en móvil», más abajo, que se escribió porque a 360px
   sobran ~18px). Medido a 390px con la prueba: con la guarda, la barra móvil
   no cambia ni un píxel. */
@media (min-width: 769px) and (max-width: 1440px) {
  .navbar { padding: 0 var(--space-lg); }
  .navbar-inner { column-gap: var(--space-lg); }
}

@media (min-width: 769px) and (max-width: 1366px) {
  .navbar-logo { font-size: var(--pixel-base); }
  .navbar-search-input { width: 90px; }
  .navbar-search-input:focus { width: 120px; }
  .nav-bloque { gap: 12px; }
  .nav-sep { margin: 0 12px; }
}

@media (min-width: 769px) and (max-width: 1279px) {
  :root { --navbar-height: 104px; }
  .navbar { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  /* En su propia fila los enlaces tienen sitio de sobra, así que aquí se
     DESHACE el encogido a 8px que traían de antes las reglas de ≤1180 y
     ≤980px (más arriba en este archivo): se encogían porque compartían fila
     con el logo y las utilidades, y eso ya no pasa. Vuelven a los 9px de
     `redesign.css`, que es el tamaño de la barra en pantalla ancha — el
     objetivo de todo esto era dejar de pagar el hueco con legibilidad.
     Va con doble clase para no tocar `.navbar-mobile .navbar-link`, que es
     otro menú y tiene su propio tamaño. */
  .navbar-links .navbar-link { font-size: 9px; }
  .navbar-inner {
    grid-template-columns: auto auto;
    grid-template-areas:
      'logo    controles'
      'enlaces enlaces';
    row-gap: 4px;
    justify-content: space-between;
  }
  .navbar-logo { grid-area: logo; }
  .navbar-controls { grid-area: controles; justify-self: end; }
  .navbar-links {
    grid-area: enlaces;
    justify-content: center;
    /* Con sitio de sobra en su propia fila no hace falta envolver, pero se
       permite: mejor una tercera línea rara que un solape seguro. */
    flex-wrap: wrap;
  }
}

/* ── Auto-hide ──
   La Navbar y su línea cromática (`.navbar::before`, en zonas.css) son UNA
   unidad: el `transform` va en `.navbar`, así que el pseudo-elemento se mueve
   con ella sin ninguna regla aparte.

   Solo dos estados, y los decide el JS con una única clase
   (`.navbar--oculta`); la animación entera vive aquí, en CSS — nada de
   lógica duplicada. Al ser una `transition` (no una `@keyframes`), si el
   scroll cambia de sentido a media subida el navegador interpola desde el
   `translateY` en el que esté en ese instante, no desde el extremo: por eso
   no hace falta ningún código para "invertir" la animación, es gratis. */
.navbar {
  transform: translateY(0);
  opacity: 1;
}
.navbar.navbar--oculta:not(:hover):not(:focus-within) {
  transform: translateY(-100%);
  /* Una variación de opacity casi imperceptible (98%) para que se note más
     "sólida" al moverse, sin que la ocultación se lea como un fundido — el
     desplazamiento sigue siendo lo que se ve. */
  opacity: .98;
  /* Igual que arriba: `transition` no se combina entre reglas, se sustituye.
     Se repite `background` aquí para no perder su animación mientras la
     Navbar está en el estado oculto. */
  transition:
    background var(--transition-normal),
    transform var(--navbar-hide-duration) var(--navbar-ease),
    opacity var(--navbar-hide-duration) var(--navbar-ease);
}

/* Quien pide menos movimiento sigue teniendo el ocultar/aparecer —lo pide la
   sección 35 del encargo—, pero reducida "bastante", no a cero: a 0ms el
   salto es instantáneo y se lee como un fallo (un popup), no como una Navbar
   que respeta la preferencia. 90ms deja el movimiento fuera del umbral que
   `prefers-reduced-motion` busca evitar (parallax/rebote largo) sin caer en
   el salto brusco.

   El !important es obligatorio, no decorativo: `base.css` apaga TODAS las
   transiciones del sitio con `*, *::before, *::after { transition-duration:
   0.001ms !important; }` bajo esta misma media query (killswitch general de
   accesibilidad). Sin `!important` aquí, esa regla universal gana siempre
   —por especificidad de `!important` sobre `!important`, no por orden— y
   este bloque queda escrito pero nunca se aplica. Con él, la mayor
   especificidad de `.navbar` decide el empate. */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar.navbar--oculta:not(:hover):not(:focus-within) {
    transition-duration: 90ms !important;
  }
}

/* ── Buscador de la navbar en móvil: se salía de la pantalla ──────────────
   Medido con Playwright a 360/390/430px: dentro de `.navbar-controls`
   (noticias + monedas + buscador + hamburguesa, con `gap` fijo) el hueco
   real disponible en el móvil más estrecho probado (360px) es ~188px, y
   solo noticias + monedas + hamburguesa YA ocupan ~170px de eso. El
   buscador tenía `flex-shrink: 0` y un ancho fijo (96–150px según el punto
   de ruptura), así que no cabía de ninguna manera: sobraba, y como además
   `order: 3` (línea ~1004) lo dejaba como ÚLTIMO hijo — detrás de la
   hamburguesa — todo ese sobrante se acumulaba a su derecha y lo empujaba
   fuera del viewport. El panel de resultados, anclado con `right: 0` al
   propio buscador (línea ~961), heredaba el mismo desplazamiento: por eso
   perdía ~28% por el borde.
   No hay manera de que un input de texto útil conviva en la misma fila que
   esos tres botones de icono a 360px — así que aquí, y solo hasta 768px
   (el punto en que el menú ya es la hamburguesa; escritorio no toca este
   bloque), el buscador se encoge de verdad en reposo (nunca se sale,
   aunque quede angosto) y al enfocarlo — que es cuando de verdad hace
   falta verlo entero para escribir — se saca del flujo y flota anclado al
   viewport, igual que el panel de resultados. Así ninguno de los dos
   depende de dónde acabe cabiendo la cajita estrecha de al lado. */
@media (max-width: 768px) {
  .navbar-search {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 120px;
  }
  .navbar-search-input {
    width: 100%;
    min-width: 0;
  }
  .navbar-search-input:focus {
    position: fixed;
    left: var(--space-sm);
    right: var(--space-sm);
    top: 13px;
    width: auto;
    z-index: 1101;
  }
  .navbar-search-results {
    position: fixed;
    left: var(--space-sm);
    right: var(--space-sm);
    top: calc(var(--navbar-height) + 8px);
    width: auto;
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TIENDA — confirmar antes de gastar, y candados que dicen algo
   ══════════════════════════════════════════════════════════════════════════
   Antes UN clic gastaba hasta 900 PixelCoins sin preguntar, el primer texto de
   la página era una disculpa ("esto está a medias") y los botones de lo que no
   te llegaba eran un candado mudo. */

/* El aviso de cabecera. Deja de ser un cartel punteado (que se lee como "aquí
   falta algo") y pasa a contar qué hay y dónde se luce. */
.shop-aviso-retiro {
  margin: 14px 0 0;
  padding: 11px 15px;
  border-left: 3px solid var(--accent-games, #00f5d4);
  background: rgba(0, 245, 212, .06);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-secondary, #bbb);
}
.shop-aviso-retiro a { color: var(--accent-games, #00f5d4); }

/* Sin cuenta, el botón ES la invitación: antes eran 20 candados mudos y ni
   una sola llamada a registrarse. */
.shop-btn-entrar {
  display: block;
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: 2px dashed var(--accent-games, #00f5d4);
  color: var(--accent-games, #00f5d4);
}

/* El diálogo de confirmación */
.shop-confirmar {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  background: rgba(6, 6, 12, .82);
  padding: 20px;
}
.shop-conf {
  background: var(--bg-card, #14141f);
  border: 3px solid var(--accent-games, #00f5d4);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .6);
  padding: 22px 26px;
  max-width: 380px;
  text-align: center;
}
.shop-conf-tit {
  margin: 0 0 12px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  line-height: 1.6;
  color: var(--text-primary);
}
.shop-conf-precio {
  margin: 0 0 4px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xl);
  color: var(--accent-series, #ffd60a);
}
.shop-conf-saldo {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.shop-conf-saldo b { color: var(--text-primary); }
.shop-conf-botones { display: flex; gap: 10px; justify-content: center; }
.shop-conf-botones .pixel-btn { min-height: 44px; }

/* «Inicio» vuelve a la barra (Rubén, 10/09/2026). Con ese enlace de más, a
   1280 y 1440 px con sesión y un nombre largo, la fila única volvía a pisar
   el logo y la campana (13 y 10 px, medido con tests/navbar_sin_solapes.mjs).
   En vez de bajar la letra o mover la frontera de las dos filas, hasta 1440 px
   la barra dice solo «Perfil»: el nombre sigue en el `title` y en el menú del
   móvil. */
@media (min-width: 769px) and (max-width: 1440px) {
  .navbar-perfil-nombre { display: none; }
}