/* GamingArte — capa propia sobre el design system. Tema oscuro (variante D). */
:root {
  --color-bg: #0f1110; --color-surface: #171a18; --color-text: #e9ece9;
  --color-accent: #2fb37a; --color-accent-600: #27995f; --color-accent-700: #5fcf9c;
  --color-accent-100: #12281e; --color-accent-800: #a8ead0;
  --color-neutral-100: #1d211f; --color-neutral-800: #cfd5d1;
  --color-divider: rgba(233, 236, 233, 0.16);
  color-scheme: dark;
}
/* ⚠ El header es `position: sticky; top: 0` y mide 65px: sin esto, TODO salto a un ancla
   deja el destino tapado por la barra. Medido el 2026-09-10 en chromium: `#q`, `#marcas` y
   `#nosotros` quedaban 65px por debajo del borde del header, y `#contacto` 20px.
   `scroll-padding-top` va en el contenedor de scroll y cubre todos los anclas de una vez
   —los que hay y los que vengan—, a diferencia de un `scroll-margin-top` por elemento.
   El valor es el alto del header (65) mas aire (15). */
html { scroll-padding-top: 80px; }

/* Rubro sin resultados al filtrar (plan S-05). Atenuado y sin clic, nunca oculto: esconder
   rubros cambia el alto de la barra lateral en cada tecla. */
.ga-cat-vacio { opacity: .38; pointer-events: none; }
/* El rubro va en linea propia bajo el nombre, NO como tercer chip arriba (plan S-05).
   Medido el 2026-09-10: como chip, "Placas de video" se partia en dos renglones en la
   columna angosta de la grilla —6 de las 13 tarjetas del filtro "video"— y empujaba el
   titulo 17px, desalineando la fila. En linea propia siempre ocupa un rengln y no empuja
   nada. Es contexto, no una etiqueta de la jerarquia de la marca: por eso va atenuado. */
.ga-rubro { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .04em;
            color: color-mix(in srgb, var(--color-text) 58%, transparent); }

body { background: var(--color-bg); color: var(--color-text); min-height: 100vh; }

.ga-wrap   { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); }
.ga-header { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.ga-nav    { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.ga-brand  { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.ga-brand img   { height: 36px; width: auto; filter: brightness(0) invert(1); }
.ga-brand span  { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.ga-nav-links   { display: flex; gap: 24px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.ga-nav-links a { color: inherit; text-decoration: none; }
.ga-nav-links a:hover, .ga-nav-links a[aria-current="page"] { color: var(--color-accent-700); }
.ga-lang   { display: flex; gap: 2px; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.ga-lang b { padding: 4px 8px; background: var(--color-accent); color: var(--color-bg); font-weight: 600; }
.ga-lang a { padding: 4px 8px; color: inherit; text-decoration: none; border: 1px solid var(--color-divider); }
/* Acceso al buscador (plan S-04). El icono mide 18px pero el area de clic es de 44: es el
   minimo tocable, y sin esto en un celular hay que apuntar a un icono de 18px. El
   :focus-visible es el mismo tratamiento que el resto del header — se llega con Tab. */
.ga-buscar { display: inline-flex; align-items: center; justify-content: center;
             width: 44px; height: 44px; margin: -10px -12px; color: inherit;
             text-decoration: none; flex: none; }
.ga-buscar:hover { color: var(--color-accent-700); }
.ga-buscar:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -6px; }

.ga-kicker { display: block; font-size: 13px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); margin-bottom: 12px; }
.ga-h1     { font-family: var(--font-heading); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 0 -0.04em; }
.ga-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: start; }
.ga-side   { position: sticky; top: 88px; display: grid; gap: 2px; font-size: 14px; }
.ga-cat    { display: flex; justify-content: space-between; gap: 12px; text-align: left; padding: 9px 10px;
             border: 1px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ga-cat:hover      { color: var(--color-accent-700); }
.ga-cat[aria-pressed="true"] { border-left-color: var(--color-accent); color: var(--color-accent-700); font-weight: 600; }
.ga-cat i  { opacity: .5; font-style: normal; font-variant-numeric: tabular-nums; }
.ga-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }

/* ⚠ `[hidden]` tiene que ganarle a cualquier `display` de autor. El user-agent trae
   `[hidden] { display: none }` con la misma especificidad que una clase, y el CSS de autor
   le gana: `.ga-card { display: flex }` dejaba las 228 tarjetas visibles aunque el buscador
   las marcara `hidden` una por una. El filtro del catalogo estuvo muerto desde 612d8f0.
   Medido el 2026-09-10: 227 marcadas, 228 visibles. */
[hidden] { display: none !important; }

.ga-card       { display: flex; flex-direction: column; padding: 12px; }
.ga-shot       { aspect-ratio: 4 / 3; background: var(--color-surface); display: grid; place-items: center; overflow: hidden; }
.ga-shot img   { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.ga-shot span  { font-family: var(--font-heading); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
                 color: color-mix(in srgb, var(--color-text) 35%, transparent); padding: 0 16px; text-align: center; }
.ga-meta       { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
.ga-meta b     { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 400; }
.ga-card h2    { font-family: var(--font-heading); font-weight: 600; font-size: 21px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; margin: 6px 0 0; }
.ga-card p     { font-size: 13px; line-height: 19px; margin: 8px 0 16px; flex: 1; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.ga-actions    { display: flex; gap: 8px; }

.ga-empty  { padding: 48px 0; text-align: center; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.ga-footer { border-top: 1px solid var(--color-divider); margin-top: 96px; }
.ga-footer > div { padding-block: 32px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center;
                   font-size: 13px; line-height: 20px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.ga-footer img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .7; }
.ga-footer nav { display: flex; gap: 20px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.ga-footer a   { color: inherit; text-decoration: none; }

.ga-wa { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 10px;
         height: 56px; padding: 0 22px 0 16px; border-radius: 999px; background: linear-gradient(135deg, #34d97a 0%, #1fb463 100%);
         color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: .03em; text-decoration: none;
         box-shadow: 0 10px 28px rgba(31,180,99,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
         transition: transform .15s ease, box-shadow .15s ease; }
.ga-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(31,180,99,.45), 0 0 0 1px rgba(255,255,255,.18) inset; }
.ga-wa span  { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); }

@media (max-width: 980px) {
  .ga-layout { grid-template-columns: 1fr; gap: 24px; }
  .ga-side   { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .ga-grid   { grid-template-columns: repeat(2, 1fr); }
  .ga-nav-links { display: none; }
  /* ⚠ Con la lupa (plan S-04) el header ya no entra a 390px: medido, el boton de WhatsApp
     quedaba en right=403 sobre un viewport de 390. La regla de §3.4 es explicita — lo que
     se achica es el boton, NUNCA la lupa: el pedido es que el buscador este disponible.
     El boton conserva su icono y su area tocable; lo que se va es el rotulo. */
  .ga-header .btn-primary { font-size: 0; padding-inline: 12px; gap: 0; }
  .ga-header .btn-primary svg { width: 20px; height: 20px; }
}
@media (max-width: 620px) { .ga-grid { grid-template-columns: 1fr; } }

/* ── home ─────────────────────────────────────────────────────────────── */
.ga-header-blur { background: color-mix(in srgb, #0f1110 88%, transparent); backdrop-filter: blur(10px); }
.ga-hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; }
.ga-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Deriva lentísima: 40s, 4% de escala. A esa velocidad no se percibe como animación,
     se percibe como que la imagen está viva. Un movimiento más rápido abarata el plano. */
  transform-origin: 52% 58%;
  animation: ga-deriva 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ga-deriva {
  from { transform: scale(1.00) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.8%, -1.2%, 0); }
}

/* Barrido de luz: cruza el plano cada 14s. Imita el parpadeo de las pantallas sin tocar
   la foto. `screen` sobre un fondo casi negro sube solo las luces.
   ⚠ Va enmascarado al tercio superior. Sin la mascara, al cruzar la zona del titular
   aclaraba el fondo y el kicker verde perdia contraste hasta volverse ilegible: se vio
   comparando dos capturas del ciclo. La luz vive donde estan las pantallas, no donde
   esta el texto. */
.ga-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 35%,
    color-mix(in srgb, var(--color-accent) 32%, transparent) 48%,
    transparent 62%);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 42%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 42%);
  animation: ga-barrido 7s linear infinite;
}
@keyframes ga-barrido {
  from { transform: translateX(-60%); }
  to   { transform: translateX(60%); }
}

/* El velo y el contenido van por encima del barrido. */
.ga-hero-veil { z-index: 2; }
.ga-hero-in   { z-index: 3; }

/* Quien pidió menos movimiento no recibe ninguno. No es un detalle de accesibilidad
   opcional: para algunas personas este tipo de deriva produce mareo. */
@media (prefers-reduced-motion: reduce) {
  .ga-hero-img { animation: none; }
  .ga-hero::after { animation: none; opacity: 0; }
}
.ga-figura img { width: 100%; height: 100%; object-fit: cover; }
.ga-figura { overflow: hidden; }
.ga-hero-bg { position: absolute; inset: 0; background:
    radial-gradient(120% 90% at 20% 0%, #1c3b2c 0%, transparent 60%),
    radial-gradient(100% 80% at 85% 15%, #14312a 0%, transparent 65%), #0f1110; }
.ga-hero-bg::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--color-divider) 1px, transparent 1px),
                    linear-gradient(90deg, var(--color-divider) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 100%); }
.ga-hero-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,17,16,.35) 0%, rgba(15,17,16,.55) 45%, rgba(15,17,16,.96) 100%); }
.ga-hero-in { position: relative; pointer-events: none; width: 100%; padding-block: 120px 72px; }
.ga-hero-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(52px, 7.5vw, 112px);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 0 -.05em; max-width: 14ch; }
.ga-hero-title span { display: block; }
.ga-eyebrow { display: block; font-size: 13px; line-height: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin-bottom: 14px; }
.ga-2col { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 24px 64px; align-items: end; margin-top: 32px; }
.ga-h2 { font-family: var(--font-heading); font-weight: 600; font-size: 44px; line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.ga-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.ga-marcas b { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.ga-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.ga-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ga-tabs .btn { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ga-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--color-divider); }
.ga-3col b { font-family: var(--font-heading); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; display: block; }
.ga-3col p { font-size: 14px; line-height: 21px; margin: 6px 0 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.ga-contacto { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 48px clamp(32px,5vw,96px); }
.ga-contacto .fila { display: flex; gap: 12px; align-items: flex-start; }
.ga-contacto svg { flex: none; margin-top: 2px; color: var(--color-accent); }
.ga-contacto a { color: inherit; text-decoration: none; }
.ga-form { padding: 28px; display: grid; gap: 16px; background: var(--color-surface); }
.ga-form .input { background: var(--color-bg); }
.ga-form label { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.ga-pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 980px) {
  .ga-2col, .ga-contacto, .ga-3col, .ga-pareja { grid-template-columns: 1fr; }
  .ga-4col { grid-template-columns: repeat(2, 1fr); }
  .ga-tabs { justify-content: flex-start; }
}
@media (max-width: 620px) { .ga-4col { grid-template-columns: 1fr; } }

/* ── páginas generadas ─────────────────────────────────────────────────── */
.ga-side a.ga-cat { text-decoration: none; }
.ga-cat[aria-current="page"] { border-left-color: var(--color-accent); color: var(--color-accent-700); font-weight: 600; }
.ga-shot-link { display: block; }
.ga-card h2 a, .ga-card h3 a { color: inherit; text-decoration: none; }
.ga-card h2 a:hover, .ga-card h3 a:hover { color: var(--color-accent-700); }

.ga-catlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.ga-catlink  { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
               padding: 14px 16px; border: 1px solid var(--color-divider); color: inherit; text-decoration: none; }
.ga-catlink:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.ga-catlink b { font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.ga-catlink i { font-style: normal; opacity: .5; font-variant-numeric: tabular-nums; }

.ga-figura { background: var(--color-surface); display: grid; place-items: center; }
.ga-figura span { font-family: var(--font-heading); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
                  color: color-mix(in srgb, var(--color-text) 30%, transparent); }

.ga-migas { font-size: 13px; margin-bottom: 32px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.ga-migas a { color: inherit; text-decoration: none; }
.ga-migas a:hover { color: var(--color-accent-700); }

.ga-ficha { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.ga-ficha-foto { padding: 12px; }
.ga-shot-grande { aspect-ratio: 1 / 1; }
.ga-specs { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 32px 0 0;
            padding-top: 24px; border-top: 1px solid var(--color-divider); font-size: 14px; }
.ga-specs dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
               color: color-mix(in srgb, var(--color-text) 50%, transparent); align-self: center; }
.ga-specs dd { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 16px;
               letter-spacing: .02em; text-transform: uppercase; }
.ga-nota { font-size: 13px; margin-top: 24px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

@media (max-width: 980px) {
  .ga-catlinks { grid-template-columns: repeat(2, 1fr); }
  .ga-ficha    { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .ga-catlinks { grid-template-columns: 1fr; } }

/* ── Hero en video (2026-09-10) ───────────────────────────────────────────
   Clip de 6s generado con bytedance/seedance-2.0-fast desde hero-sala.png. Va encima de
   la foto, que sigue siendo el poster y el LCP: 450 KB que solo se pagan si el navegador
   llega a mostrarlos. El .on lo pone hero-video.js recien en loadeddata. */
.ga-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; opacity: 0; transition: opacity .25s linear; }
.ga-hero-vid.on { opacity: 1; }
/* Con el video andando, el CSS del hero se apaga: superpuestos pelean entre si. */
.ga-hero:has(.ga-hero-vid.on) .ga-hero-img { animation: none; }
.ga-hero:has(.ga-hero-vid.on)::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ga-hero-vid { display: none; } }