/* ════════════════════════════════════════════════════════════════════════
   NexoGamer — SITE v2 «SEÑAL» (rediseño 2026) · capa de las páginas interiores
   ------------------------------------------------------------------------
   Se carga LA ÚLTIMA en todas las páginas menos la home (que usa home-v2.css).
   Funciona en dos niveles:
     1. REMAPEA las variables v1 (--black/--surface/--card/--text…) que ya usan
        category.css y los <style> de cada plantilla → toda la maquetación
        existente hereda la paleta SEÑAL sin reescribir layouts.
     2. RE-ESTILIZA los componentes de identidad: titulares a Clash Display,
        imágenes de producto en panel claro (legibilidad), chips ácidos,
        monograma XO y marca de agua del footer.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · REMAPEO de la paleta v1 → SEÑAL ─────────────────────────────── */
:root {
  --black:  #05060A;  --black2: #0B0D14;  --black3: #12141E;
  --surface:#12141E;  --card:   #161826;
  --border: rgba(255, 255, 255, .09);
  --violet: #9D4EDD;  --violet-light: #C084FC;  --violet-dark: #7C3AED;
  --text:   #F2F2F7;  --text-secondary: #C3C6D4;  --text-muted: #9FA3B5;
}
body { background: var(--ng-bg, #05060A); color: var(--ng-text, #F2F2F7); }
::selection { background: var(--ng-violet); color: #fff; }

/* Profundidad de fondo (misma película que la home, estática) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--ng-depth-1), var(--ng-depth-2);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ── 2 · TITULARES a Clash Display ───────────────────────────────────── */
/* Todos los h1 del sitio llevan el display (varias plantillas usan <h1> sin
   clase: noticias, sobre-nosotros, legales). Sentence case por defecto; la
   caja alta solo en cabeceras de sección/categoría (clases de abajo). */
h1 { font-family: var(--ng-font-display) !important; font-weight: 600; letter-spacing: -.015em; }

/* Cabeceras de sección/categoría: display en caja alta (identidad SEÑAL) */
.cat-h1, .section-h, .prop-heading, .news-featured-title {
  font-family: var(--ng-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--ng-track-display);
  word-spacing: .14em;   /* Clash Display + tracking negativo pegan las palabras; se separan para leer */
  text-transform: uppercase;
}
.cat-h1 { font-size: var(--ng-fs-h1) !important; line-height: 1.03 !important; }
/* Titulares de contenido (artículos, fichas, cards de noticia): display SIN
   caja alta — los títulos largos editoriales respiran mejor en sentence case. */
.art-title, .prod-name, .news-card-title, .art-modal-title {
  font-family: var(--ng-font-display) !important;
  font-weight: 600;
  letter-spacing: -.015em;
  word-spacing: .08em;
}

/* Eyebrows/etiquetas pequeñas en mono (sabor ficha técnica) */
.cat-range, .group-eyebrow, .prop-label {
  font-family: var(--ng-mono) !important;
  letter-spacing: .08em;
}
.cat-range {
  color: var(--ng-acid) !important;
  background: var(--ng-acid-dim) !important;
  border: none !important;
  border-radius: var(--ng-r-sm);
}

/* ── 2b · NAV v2 — RÉPLICA EXACTA del nav de la home en todas las páginas.
   Cada plantilla trae su propia base de nav (category.css, inline de noticia/
   producto, inline de sobre/legales): este bloque las neutraliza y reconstruye
   el diseño del main (transparente arriba → blur al scrollear, subrayado ácido,
   CTA blanca→ácida). !important para ganar a las 3 bases por orden de carga. ── */
.site-nav {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  display: flex !important; align-items: center !important; gap: 28px !important;
  height: auto !important;
  padding: 16px clamp(20px, 4vw, 48px) !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .25s var(--ng-ease, ease), border-color .25s var(--ng-ease, ease), padding .25s var(--ng-ease, ease) !important;
}
.site-nav::before { display: none !important; }   /* línea decorativa de category.css */
.site-nav.scrolled {
  background: rgba(5, 6, 10, .78) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--ng-border-2) !important;
  padding-top: 10px !important; padding-bottom: 10px !important;
}
.logo {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  font-size: 19px !important; letter-spacing: .02em !important;
  color: var(--ng-text) !important; text-decoration: none !important;
  transform: none !important; height: auto !important;
}
.logo:hover { transform: none !important; }
.logo-dot::before { display: none !important; }   /* brillo animado de category.css */
.nav-links {
  display: flex !important; align-items: center !important; gap: 26px !important;
  margin-left: auto !important; height: auto !important;
}
.nav-links > a, .nav-links a:not(.dd-item) {
  font-size: 13.5px !important; font-weight: 500 !important;
  letter-spacing: .04em !important; text-transform: uppercase;
  color: var(--ng-text-2) !important;
  height: auto !important; padding: 0 !important;
  position: relative;
}
.nav-links > a::after {
  content: '' !important; position: absolute !important; left: 0 !important; bottom: -5px !important;
  top: auto !important; width: 100% !important; height: 1.5px !important;
  background: var(--ng-acid) !important;
  transform: scaleX(0); transform-origin: right;
  transition: transform .25s var(--ng-ease-out, ease) !important;
  opacity: 1 !important;
}
.nav-links > a:hover { color: var(--ng-text) !important; }
.nav-links > a:hover::after { transform: scaleX(1); transform-origin: left; }
.hamburger { background: none !important; border: none !important; width: 40px !important; height: 40px !important; position: relative !important; }
.hamburger span {
  position: absolute !important; left: 9px !important; width: 22px !important; height: 2px !important;
  background: var(--ng-text) !important; border-radius: 0 !important; margin: 0 !important;
  transition: transform .25s var(--ng-ease, ease), opacity .15s, top .25s var(--ng-ease, ease) !important;
}
.hamburger span:nth-child(1) { top: 13px !important; }
.hamburger span:nth-child(2) { top: 19px !important; }
.hamburger span:nth-child(3) { top: 25px !important; }
.hamburger.open span:nth-child(1) { top: 19px !important; transform: rotate(45deg) !important; }
.hamburger.open span:nth-child(2) { opacity: 0 !important; }
.hamburger.open span:nth-child(3) { top: 19px !important; transform: rotate(-45deg) !important; }
.nav-products-btn {
  font-size: 13.5px !important; font-weight: 500 !important;
  letter-spacing: .04em !important; text-transform: uppercase;
  color: var(--ng-text-2) !important; background: none !important; border: none !important;
}
.nav-products-btn:hover { color: var(--ng-text) !important; }
.nav-dropdown {
  background: rgba(18, 20, 30, .96) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ng-border-2) !important;
  border-radius: var(--ng-r-md) !important;
  box-shadow: var(--ng-shadow-2) !important;
}
.dd-item { color: var(--ng-text-2) !important; font-size: 13.5px !important; }
.dd-item:hover { background: rgba(255, 255, 255, .05) !important; color: var(--ng-text) !important; }
.dd-section-label { font-family: var(--ng-mono) !important; font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase; }

/* Mecánica del desplegable — noticia/producto no la tenían (su nav v1 era
   mínimo, sin dropdown); en las categorías estas reglas coinciden con las
   suyas y no interfieren. Comportamiento móvil: .dd-open lo pone js/nav.js. */
.nav-products-wrap { position: relative; }
.nav-products-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; cursor: pointer; font-family: inherit; }
.nav-chevron { transition: transform .15s; }
.nav-products-wrap:hover .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: -14px; min-width: 250px;
  padding: 8px; z-index: 1001;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ng-ease, ease), transform .25s var(--ng-ease, ease), visibility .25s;
  /* category.css pone pointer-events:none al panel salvo en hover → al cruzar
     el hueco botón→panel se perdía el hover y el ratón ya no podía re-engancharlo
     (los clics caían al vacío). Con visibility:hidden no intercepta nada igualmente. */
  pointer-events: auto !important;
}
/* Puente invisible que cubre el hueco de 14px: bajar del botón al panel nunca
   rompe el :hover del wrap. */
.nav-dropdown::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-products-wrap:hover .nav-dropdown,
.nav-products-wrap:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-dropdown .dd-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; text-decoration: none; border-radius: var(--ng-r-sm, 6px); }
.dd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dd-label { flex: 1; }
.dd-arrow { color: var(--ng-text-muted); font-size: 15px; }
.dd-divider { height: 1px; background: var(--ng-border-2); margin: 7px 4px; }
.dd-item--sub { padding-left: 22px !important; }
@media (min-width: 769px) { .hamburger { display: none !important; } }
@media (max-width: 768px) {
  .site-nav {
    background: rgba(5, 6, 10, .85) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--ng-border-2) !important;
  }
  .hamburger { display: block !important; margin-left: auto !important; }
  .nav-cta { display: none !important; }
  .nav-links {
    position: fixed !important; inset: 58px 0 auto 0 !important; z-index: 999 !important;
    display: none !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    margin: 0 !important; height: auto !important; max-height: none !important;
    background: rgba(5, 6, 10, .97) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ng-border-2) !important;
    padding: 12px 20px 20px !important;
    transform: none !important; opacity: 1 !important; visibility: visible !important;
  }
  .nav-links.open { display: flex !important; }
  .nav-links > a { padding: 14px 4px !important; font-size: 15px !important; border-bottom: 1px solid var(--ng-border-2) !important; }
  .nav-links > a::after { display: none !important; }
  .nav-products-wrap { border-bottom: 1px solid var(--ng-border-2); }
  .nav-products-btn { width: 100%; justify-content: space-between; padding: 14px 4px !important; font-size: 15px !important; }
  .nav-dropdown { position: static; opacity: 1; transform: none; box-shadow: none !important; border: none !important; background: none !important; padding: 0 0 8px 8px; display: none; visibility: hidden; }
  .nav-products-wrap.dd-open .nav-dropdown { display: block; visibility: visible; }
}

/* ── 3 · MONOGRAMA XO (logo v2 en nav y footer) ──────────────────────── */
.logo-dot {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--ng-violet-strong, #7C3AED), var(--ng-violet, #9D4EDD));
  border-radius: 0 !important;
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
  box-shadow: var(--ng-glow);
}
.logo, .footer-brand, .footer-logo { font-family: var(--ng-font-display) !important; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.footer-logo-dot {
  background: linear-gradient(135deg, var(--ng-violet-strong, #7C3AED), var(--ng-violet, #9D4EDD)) !important;
  color: #fff !important; font-size: 9px !important;
  border-radius: 0 !important;
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
}

/* ── 4 · PRODUCT CARDS (variante completa de categoría) ──────────────── */
/* Anti-CLS: el grid nace vacío (las cards las pinta JS) y el footer saltaba al
   inyectarse (~0.15 de CLS, pre-existente en v1). Reservamos el alto de una
   fila para que nada por debajo se mueva en el primer render. */
.products-grid { min-height: 560px; }
@media (max-width: 768px) { .products-grid { min-height: 480px; } }
/* Imágenes v2 recortadas a transparencia (scripts/cutout-images.py): el
   producto flota sobre la card con glow sutil; artworks oscuros se integran. */
.product-card { background: var(--ng-surface) !important; border-color: var(--ng-border-2) !important; }
.product-card:hover { border-color: var(--ng-border) !important; box-shadow: var(--ng-shadow-2), var(--ng-glow) !important; }
.product-img {
  background: var(--ng-img-glow) !important;
  margin: 10px 10px 0; border-radius: var(--ng-r-md);
  overflow: hidden;
}
.product-img img {
  object-fit: contain !important; object-position: center !important;
  filter: var(--ng-img-shadow);
}
/* Ficha de producto (producto.html): mismo tratamiento flotante que las cards */
.prod-imgbox {
  background: var(--ng-img-glow-lg) !important;
  border-color: var(--ng-border-2) !important;
}
.prod-imgbox img { filter: var(--ng-img-shadow-lg); }
.product-name { font-family: var(--ng-font-display) !important; font-weight: 500; color: var(--ng-text) !important; }
.product-cat { font-family: var(--ng-mono) !important; letter-spacing: .14em; color: var(--ng-text-label) !important; }
.product-desc, .verdict-row { color: var(--ng-text-hi) !important; }
.product-price { font-family: var(--ng-mono) !important; color: var(--ng-acid) !important; }
.product-rating { font-family: var(--ng-mono) !important; color: var(--ng-text-data) !important; }

/* Filtros de categoría y chips: mono + acento */
.filter-btn { font-family: var(--ng-mono) !important; letter-spacing: .05em; text-transform: uppercase; font-size: 11px !important; }
.filter-btn.active { border-color: var(--ng-violet) !important; }

/* ── 5 · BOTONES compartidos ─────────────────────────────────────────── */
.nav-cta {
  background: var(--ng-text) !important; color: var(--ng-bg) !important;
  border: none !important; border-radius: var(--ng-r-sm) !important;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600 !important;
  transition: background var(--ng-dur-fast), box-shadow var(--ng-dur-fast) !important;
}
.nav-cta:hover { background: var(--ng-acid) !important; box-shadow: var(--ng-glow-acid) !important; }
.btn-ver-todos:hover { border-color: var(--ng-violet) !important; box-shadow: var(--ng-glow) !important; }

/* ── 6 · ARTÍCULOS del blog (noticia.html + prerender SSR) ───────────── */
.art-title { line-height: 1.1 !important; }
.art-body h2, .art-content h2 {
  font-family: var(--ng-font-display) !important; font-weight: 600;
  letter-spacing: 0; word-spacing: .12em;   /* Clash Display aprieta el espacio entre palabras: se restaura para poder leer */
}
.art-body a, .art-content a { color: var(--ng-violet-light); }

/* ── 7 · FOOTER con marca de agua (identidad de cierre en todo el sitio) ── */
#footer, footer.footer, .site-footer { position: relative; overflow: hidden; }
#footer::after, footer.footer::after, .site-footer::after {
  content: 'NEXOGAMER';
  position: absolute; left: 50%; bottom: -.24em; transform: translateX(-50%);
  font-family: var(--ng-font-display); font-weight: 600;
  font-size: clamp(80px, 12vw, 180px); line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .05);
  pointer-events: none; user-select: none;
}
.footer-links a:hover { color: var(--ng-acid) !important; }

/* ── 8 · Reduced-motion: nada nuevo que apagar (capas estáticas) ─────── */