/* ═══════════════════════════════════════════════════════════════
   NICACOMP Gaming: /gaming (concepto "sala de exhibición")

   La tienda gaming como una sala oscura donde la luz celeste es el
   material. Las fotos vienen sobre blanco y se funden con su pozo de luz
   gracias a mix-blend-mode:multiply: el blanco de la foto toma el color
   del pozo, así que el pozo decide cómo se ve cada producto.

   Dos intensidades de luz, a propósito:
   · Vitrina y protagonistas (--gx-spot): foco claro y frío al centro,
     un aro de contraluz celeste justo donde termina el producto (lo
     separa del fondo) y un piso en grilla.
   · Tarjetas chicas (--gx-well): pozo acero oscuro con grilla tenue y
     un contraluz celeste bajo. Quedan calladas para que las
     protagonistas resalten.

   Ritmo: la vitrina con su placa; el riel pegajoso; la tira de Ofertas
   (una fila); los estantes, que eligen su forma según cuántos productos
   tienen (dos estantes de uno van lado a lado); el tablero del armador
   con ranuras vacías; las tarjetas de regalo y el cierre.

   Familia "NICACOMP Gaming" (compartida con /armador):
   · Superficies casi negras derivadas de --bg #181D23.
   · Celeste (--cyan) es la luz principal; violeta (--purple) sólo rebote.
   · Display Schibsted 800 con tracking cerrado; specs en JetBrains Mono.
   · Formas: botones en píldora; vitrina, tarjetas y tablero en 12-14px;
     pozos y miniaturas en 8px; chips en 4px.
   · Movimiento con cubic-bezier(.16,1,.3,1); hover sólo con pointer:fine.

   Todo cuelga de <main class="gx">: la hoja la carga sólo gaming.html.
   Se enlaza después de nc-departments.css. Subir su ?v= en cada cambio.
   ═══════════════════════════════════════════════════════════════ */
.gx{
  /* nc-departments.css cambia la mono por la de texto en los
     departamentos; acá la mono es parte del lenguaje y vuelve. */
  --fm:"JetBrains Mono",ui-monospace,monospace;
  --gx-void:#080C10;
  --gx-deep:#0C1116;
  --gx-panel:#11171E;
  --gx-panel2:#18212B;
  --gx-line:rgba(255,255,255,.07);
  --gx-line-c:rgba(124,196,248,.18);
  /* Celeste claro para texto chico sobre fondos teñidos de cyan. */
  --gx-ice:#8FCDF9;
  --gx-ink:#0B1620;
  --gx-c-a:rgba(12,149,243,.55);
  --gx-v-a:rgba(105,71,230,.38);
  --gx-r:14px;
  --gx-r-md:12px;
  --gx-r-sm:8px;
  /* Pozo de las tarjetas chicas: acero oscuro, grilla tenue y contraluz
     celeste detrás del producto. */
  --gx-well:
    radial-gradient(44% 40% at 50% 54%,rgba(12,149,243,.38),transparent 74%),
    linear-gradient(rgba(143,205,249,.075) 1px,transparent 1px) center/14px 14px,
    linear-gradient(90deg,rgba(143,205,249,.075) 1px,transparent 1px) center/14px 14px,
    radial-gradient(72% 76% at 50% 46%,#A2B6C8 0%,#6C8399 36%,#2F4050 68%,#141C25 100%);
  /* Foco de las protagonistas: centro frío y claro, aro de contraluz
     celeste donde termina el producto, caída a acero y a casi negro. */
  --gx-spot:
    radial-gradient(58% 56% at 50% 47%,transparent 62%,rgba(12,149,243,.42) 76%,transparent 90%),
    radial-gradient(64% 66% at 50% 46%,#E6F0F8 0%,#C4D7E7 30%,#7C9AB6 56%,#2B4157 78%,#0F1820 100%);
  --gx-ease:cubic-bezier(.16,1,.3,1);
  --gx-rail-h:54px;
  background:var(--gx-deep);
  overflow-x:clip;
}
.gx-wrap{max-width:1280px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.gx-wrap{padding:0 24px}}
@media(min-width:1100px){.gx-wrap{padding:0 32px}}
.gx h1,.gx h2,.gx h3{text-wrap:balance}
.gx p{text-wrap:pretty}
.gx i[data-lucide]{display:inline-block;width:1em;height:1em;flex-shrink:0}
.gx svg.lucide,.toast svg.lucide{width:1em;height:1em;stroke-width:2;flex-shrink:0}
.gx-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ═══ BOTONES ══════════════════════════════════════════════════
   Píldoras, como en el armador. Celeste siempre con tinta oscura: el
   blanco sobre --cyan no llega a AA. */
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.75rem 1.35rem;border-radius:999px;border:1px solid transparent;font-family:var(--fd);font-size:.95rem;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--gx-ease),border-color .2s var(--gx-ease),color .2s var(--gx-ease),box-shadow .3s var(--gx-ease),transform .16s var(--gx-ease)}
.gx-btn:active{transform:scale(.97)}
.gx-btn-cyan{background:var(--cyan);color:var(--gx-ink);box-shadow:0 0 0 1px rgba(143,205,249,.35) inset,0 10px 30px -12px var(--gx-c-a)}
.gx-btn-ghost{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.18);color:var(--text)}
.gx-btn-wa{background:var(--wa);color:var(--wa-ink)}
@media(pointer:fine){
  .gx-btn-cyan:hover{background:var(--price);box-shadow:0 0 0 1px rgba(143,205,249,.5) inset,0 14px 38px -10px var(--gx-c-a)}
  .gx-btn-ghost:hover{border-color:var(--price);color:var(--gx-ice);background:rgba(12,149,243,.06)}
  .gx-btn-wa:hover{filter:brightness(1.08)}
  .gx-btn svg{transition:transform .25s var(--gx-ease)}
  .gx-btn:hover svg:last-child{transform:translateX(3px)}
  .gx-btn[href^="#"]:hover svg:last-child{transform:translateY(3px)}
}

/* ═══ PORTADA: LA VITRINA ══════════════════════════════════════ */
.gx-hero{position:relative;isolation:isolate;background:var(--gx-void);padding:clamp(1.25rem,3vw,2.75rem) 0 clamp(2.25rem,4.5vw,3.75rem);overflow:clip}
/* Luz ambiente: líneas de barrido tenues, rebote violeta arriba a la
   derecha y el resplandor celeste del piso. */
.gx-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    radial-gradient(40% 50% at 86% 8%,rgba(105,71,230,.2),transparent 70%),
    radial-gradient(52% 44% at 68% 100%,rgba(12,149,243,.26),transparent 72%);
}
/* El piso de la sala: grilla en perspectiva bajo toda la portada. */
.gx-hero::after{
  content:"";position:absolute;left:-20%;right:-20%;bottom:-2px;height:42%;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(63,169,245,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(63,169,245,.26) 1px,transparent 1px);
  background-size:64px 64px;background-position:center bottom;
  transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 15%,transparent 92%);mask-image:linear-gradient(to top,#000 15%,transparent 92%);
}

/* Celular y tablet: la columna de texto se abre (display:contents) para
   que la vitrina suba justo debajo del título y el precio se vea antes. */
.gx-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.gx-hero-copy{display:contents}
.gx-kicker{order:1}
.gx h1{order:2}
.gx-stage{order:3;margin-top:1.25rem}
.gx-ctas{order:4;margin-top:1.25rem}
.gx-lead{order:5;margin-top:1rem}
@media(min-width:1024px){
  .gx-hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,4vw,4rem)}
  .gx-hero-copy{display:block}
  .gx-stage{margin-top:0}
  .gx-lead{margin-top:1.2rem}
  .gx-ctas{margin-top:1.75rem}
  .gx-hero::after{left:34%;right:-12%}
}
.gx-kicker{display:flex;align-items:center;gap:.7rem;font-family:var(--fm);font-size:.8rem;font-weight:500;color:var(--price);margin-bottom:1rem}
.gx-kicker::before{content:"";width:1.6rem;height:2px;background:currentColor;box-shadow:0 0 10px var(--gx-c-a);flex-shrink:0}
@media(max-width:639px){.gx-kicker{display:none}}
.gx h1{font-family:var(--fd);font-weight:800;font-size:clamp(2.15rem,1.4rem + 3.3vw,4.1rem);line-height:.98;letter-spacing:-.04em;max-width:15ch}
.gx h1 span{color:var(--price);text-shadow:0 0 40px rgba(12,149,243,.45)}
.gx-lead{color:var(--text2);font-size:clamp(1rem,.95rem + .35vw,1.18rem);line-height:1.6;max-width:40ch}
.gx-ctas{display:flex;flex-wrap:wrap;gap:.65rem}
@media(max-width:479px){
  .gx-ctas .gx-btn{flex:1 1 0;padding-inline:.9rem;font-size:.9rem}
}

/* Escenario: la caja de luz y, pegada abajo, la placa con los datos. */
.gx-stage{position:relative;min-width:0;filter:drop-shadow(0 30px 60px rgba(12,149,243,.18))}
.gx-case{
  position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;
  border-radius:var(--gx-r) var(--gx-r) 0 0;
  border:1px solid rgba(124,196,248,.3);border-bottom:0;
  background:
    radial-gradient(52% 54% at 50% 46%,transparent 58%,rgba(12,149,243,.62) 75%,rgba(12,149,243,0) 93%),
    radial-gradient(56% 60% at 50% 44%,#EAF3FA 0%,#C8DBEA 32%,#6E92B3 58%,#1C2F42 80%,#0A1118 100%),
    #0A1118;
}
@media(min-width:1024px){.gx-case{aspect-ratio:16/9.6}}
/* El piso del estudio: grilla celeste en perspectiva. La foto (multiply)
   la tapa donde hay producto y la deja ver donde es blanca. */
.gx-case-floor{
  position:absolute;left:-30%;right:-30%;bottom:0;height:46%;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(63,169,245,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(63,169,245,.9) 1px,transparent 1px);
  background-size:44px 44px;background-position:center bottom;
  transform:perspective(320px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 95%);mask-image:linear-gradient(to top,#000 10%,transparent 95%);
}
/* Tira de luz arriba y línea del piso abajo, como en un exhibidor. */
.gx-case::before{content:"";position:absolute;top:0;left:12%;right:12%;height:2px;z-index:3;background:linear-gradient(90deg,transparent,var(--cyan) 20%,var(--cyan) 80%,transparent);box-shadow:0 0 18px 2px var(--cyan)}
.gx-case::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 80px 10px rgba(5,9,13,.6),inset 0 -2px 0 rgba(143,205,249,.85)}
/* .gx-shot no se posiciona ni lleva z-index: si creara su propio contexto
   de apilamiento, el multiply de la foto no vería la luz de la caja. */
.gx-shot img{position:absolute;z-index:1;left:10%;top:6%;width:80%;height:78%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .2s var(--gx-ease),transform .35s var(--gx-ease),filter .2s var(--gx-ease)}

/* Placa con los datos: pegada bajo la vitrina, una sola pieza con ella. */
.gx-plate{
  position:relative;display:grid;gap:.85rem;
  padding:1rem 1.1rem 1.1rem;border-radius:0 0 var(--gx-r) var(--gx-r);
  background:linear-gradient(180deg,#0F1820,#0B1117);border:1px solid rgba(124,196,248,.3);border-top-color:rgba(143,205,249,.55);
  transition:opacity .2s var(--gx-ease),filter .2s var(--gx-ease),transform .25s var(--gx-ease);
}
.gx-plate-info{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.gx-plate-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.gx-plate-top:empty{display:none}
.gx-feat-name{font-family:var(--fd);font-size:clamp(1.15rem,1rem + .8vw,1.55rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gx-plate-buy{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.gx-feat-price{font-family:var(--fm);font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);font-weight:700;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gx-feat-price .pc-old{font-size:.8rem}
.gx-feat-disc{padding:.12rem .45rem;border-radius:4px;background:var(--offer);color:#1A1500;font-family:var(--fm);font-size:.72rem;font-weight:700}
.gx-feat-acts{display:flex;gap:.5rem}
.gx-feat-acts .gx-btn{flex:1 1 auto;min-height:46px;padding:.6rem 1.05rem;font-size:.9rem}
@media(max-width:479px){
  .gx-plate .gx-specs li:nth-child(n+4){display:none}
  .gx-sm-hide{display:none}
}
@media(min-width:640px){
  .gx-plate{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:1.5rem;padding:1.15rem 1.35rem 1.25rem}
  .gx-plate-buy{align-items:flex-end}
  .gx-feat-acts .gx-btn{flex:0 0 auto}
}

/* Miniaturas: otros productos de vitrina, dentro de la caja, abajo. */
.gx-picks{position:absolute;left:.7rem;bottom:.7rem;z-index:4;display:flex;gap:.4rem}
.gx-picks:empty{display:none}
.gx-pick{position:relative;width:46px;height:46px;padding:0;border-radius:var(--gx-r-sm);border:1px solid rgba(143,205,249,.28);background:var(--gx-well);overflow:hidden;isolation:isolate;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.7);transition:border-color .2s var(--gx-ease),box-shadow .25s var(--gx-ease),transform .16s var(--gx-ease),opacity .2s var(--gx-ease)}
.gx-pick img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;mix-blend-mode:multiply}
.gx-pick[aria-pressed="false"]{opacity:.72}
.gx-pick[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 18px -2px var(--gx-c-a)}
@media(min-width:640px){.gx-pick{width:56px;height:56px}.gx-picks{left:1rem;bottom:1rem;gap:.5rem}}
@media(pointer:fine){
  .gx-pick:hover{opacity:1;transform:translateY(-2px);border-color:rgba(143,205,249,.7)}
}
.gx-stage.is-swap .gx-shot img{opacity:0;transform:scale(.97);filter:blur(6px)}
.gx-stage.is-swap .gx-plate-info,.gx-stage.is-swap .gx-plate-buy{opacity:0;filter:blur(4px)}
.gx-plate-info,.gx-plate-buy{transition:opacity .2s var(--gx-ease),filter .2s var(--gx-ease)}

/* Sin producto destacado (sin datos o error): la portada queda en una columna. */
.gx-sin-vitrina .gx-stage{display:none}
.gx-sin-vitrina .gx-hero-grid{grid-template-columns:minmax(0,1fr)}
.gx-sin-vitrina::after{left:-20%;right:-20%}

/* Cargando */
.gx-case.is-loading{background:var(--gx-panel2)}
.gx-case.is-loading .gx-case-floor{opacity:.25}
.gx-sk{display:block;height:14px;border-radius:4px;background:var(--gx-panel2)}
.gx-sk-a{width:30%}
.gx-sk-b{width:80%;height:20px}
.gx-sk-c{width:140px;height:28px}

/* Entrada: el texto sube en cascada y la vitrina "se enciende". */
@media(prefers-reduced-motion:no-preference){
  .gx-hero-copy>*{animation:gx-sube .8s var(--gx-ease) both}
  .gx h1{animation-delay:.06s}
  .gx-lead{animation-delay:.12s}
  .gx-ctas{animation-delay:.18s}
  .gx-case{animation:gx-enciende 1.1s var(--gx-ease) .1s both}
  .gx-shot img{animation:gx-aparece .9s var(--gx-ease) both}
  .gx-sk,.gx-case.is-loading,.gx-rail-sk,.gx-card-sk,.gx-lead-sk{animation:gx-late 1.3s ease-in-out infinite alternate}
}
@keyframes gx-sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gx-enciende{0%{filter:brightness(.35)}35%{filter:brightness(.9)}45%{filter:brightness(.6)}100%{filter:none}}
@keyframes gx-aparece{from{opacity:0;transform:scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes gx-late{from{opacity:.5}to{opacity:1}}

/* ═══ RIEL DE CATEGORÍAS ═══════════════════════════════════════ */
.gx-rail{position:sticky;top:var(--hdr-h,59px);z-index:20;scroll-margin-top:var(--hdr-h,59px);background:rgba(8,12,16,.9);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-block:1px solid var(--gx-line)}
.gx-rail-track{position:relative;display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.gx-rail-track::-webkit-scrollbar{display:none}
.gx-rail-track.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
@media(min-width:640px){.gx-rail-track{margin:0 -8px;padding:0 8px}}
.gx-rail-link{position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:var(--gx-rail-h);padding:0 .85rem;white-space:nowrap;color:var(--text2);font-family:var(--fd);font-size:.92rem;font-weight:600;transition:color .2s var(--gx-ease)}
/* El riel recorta lo que sobresale (overflow-x:auto): el foco va por dentro. */
.gx .gx-rail-link:focus-visible{outline-offset:-4px;border-radius:var(--gx-r-sm,8px)}
.gx-rail-link svg{width:17px;height:17px;color:var(--text3);transition:color .2s var(--gx-ease)}
.gx-rail-link::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:-1px;height:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);transform:scaleX(0);transition:transform .35s var(--gx-ease)}
.gx-rail-link[aria-current="true"]{color:var(--text)}
.gx-rail-link[aria-current="true"] svg{color:var(--price)}
.gx-rail-link[aria-current="true"]::after{transform:scaleX(1)}
@media(pointer:fine){
  .gx-rail-link:hover{color:var(--text)}
  .gx-rail-link:hover svg{color:var(--price)}
}
.gx-rail-sk{flex:0 0 120px;height:16px;margin:19px .85rem;border-radius:4px;background:var(--gx-panel2)}

/* ═══ ESTANTES ═════════════════════════════════════════════════ */
.gx-shelves{padding:clamp(.75rem,2vw,1.5rem) 0 clamp(1.5rem,3vw,2.5rem);background:var(--gx-deep)}
.gx-shelf{padding:clamp(1.5rem,3.2vw,2.5rem) 0;scroll-margin-top:calc(var(--hdr-h,59px) + var(--gx-rail-h) + 4px)}
.gx-shelf-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.gx-shelf h2{display:flex;align-items:center;gap:.7rem;min-width:0;font-family:var(--fd);font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);font-weight:800;line-height:1.05;letter-spacing:-.035em}
.gx-shelf-t{min-width:0;overflow-wrap:break-word;hyphens:manual}
.gx-shelf-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:var(--gx-r-sm);border:1px solid rgba(63,169,245,.32);background:rgba(12,149,243,.1);color:var(--gx-ice);font-size:1.1rem;box-shadow:0 0 18px -6px var(--gx-c-a)}
.gx-shelf--oferta .gx-shelf-ico{border-color:rgba(230,198,97,.45);background:rgba(230,198,97,.1);color:var(--offer);box-shadow:0 0 18px -6px rgba(230,198,97,.6)}
@media(max-width:479px){
  .gx-shelf h2{font-size:1.3rem;gap:.55rem}
  .gx-shelf-ico{width:32px;height:32px;font-size:1rem}
  /* En el celular «Ver todo» queda en ícono; el texto sigue siendo su
     nombre accesible. */
  .gx-all{width:44px;padding:0}
  .gx-all span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.gx-shelf-ctl{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.gx-shelf:not(.has-over):not(.is-grid) .gx-shelf-ctl{display:none}
.gx-arrow,.gx-all{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);color:var(--text);cursor:pointer;transition:border-color .2s var(--gx-ease),color .2s var(--gx-ease),background-color .2s var(--gx-ease),opacity .2s var(--gx-ease)}
.gx-arrow{width:44px;font-size:1.15rem}
.gx-arrow:disabled{opacity:.3;cursor:default}
.gx-all{padding:0 1rem;font-family:var(--fd);font-size:.86rem;font-weight:600;white-space:nowrap}
.gx-all svg{color:var(--price)}
.gx-shelf.is-grid .gx-arrow{display:none}
@media(max-width:767px){.gx-arrow{display:none}}
@media(pointer:fine){
  .gx-arrow:not(:disabled):hover,.gx-all:hover{border-color:var(--price);color:var(--gx-ice);background:rgba(12,149,243,.07)}
}

.gx-shelf-body{display:grid;gap:1rem;min-width:0}

/* La fila: deslizable con snap; en el celular corre de borde a borde
   y muestra tarjeta y media para que se note que sigue. */
.gx-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,58vw,232px);gap:.85rem;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;margin:0 -16px;padding:.35rem 16px 1.1rem}
.gx-track::-webkit-scrollbar{display:none}
@media(min-width:640px){.gx-track{margin:0;padding:.35rem 0 1.1rem;scroll-padding-inline:0;gap:1rem}}
/* Bordes que se desvanecen mientras queda fila para ese lado. */
@media(min-width:640px){
  .gx-track.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
  .gx-track.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px);mask-image:linear-gradient(90deg,transparent,#000 72px)}
  .gx-track.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent)}
}
/* «Ver todo»: la misma fila se abre en grilla en su lugar. */
.gx-shelf.is-grid .gx-track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;margin:0;padding:.35rem 0 .5rem;gap:.65rem;-webkit-mask-image:none;mask-image:none}
@media(min-width:640px){.gx-shelf.is-grid .gx-track{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}}

/* Estante 'track': en escritorio la protagonista ocupa todo el alto del
   estante y el título y la fila van a su lado. Se alterna de lado entre
   estantes (--flip) para cortar la repetición. */
@media(min-width:1024px){
  .gx-shelf--track>.gx-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"lead head" "lead track";column-gap:1.5rem}
  .gx-shelf--flip>.gx-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head lead" "track lead"}
  .gx-shelf--track .gx-shelf-body{display:contents}
  .gx-shelf--track .gx-shelf-head{grid-area:head;align-self:start}
  .gx-shelf--track .pc--lead{grid-area:lead}
  .gx-shelf--track .gx-track{grid-area:track;align-self:end;padding-bottom:0}
  /* Si la protagonista es más alta que la fila, la foto de cada tarjeta
     crece para llenar: el texto queda junto, sin hueco antes del precio. */
  .gx .gx-shelf--track .gx-track .pc-img{flex:1 1 auto;aspect-ratio:auto;min-height:160px}
  /* Cuerpo con alto mínimo común: las fotos y la línea del piso quedan
     alineadas de una tarjeta a la otra. */
  .gx .gx-shelf--track .gx-track .pc-body{flex:0 0 auto;min-height:190px}
  .gx-shelf--track.is-grid>.gx-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "lead" "track";row-gap:1rem}
}

/* Dos estantes de un solo producto seguidos van lado a lado. */
@media(min-width:768px){
  .gx-duo{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.25rem}
  .gx-duo>.gx-shelf>.gx-wrap{padding:0}
}
@media(min-width:1100px){.gx-duo{padding:0 32px}}

/* Estante 'vit' (2 o 3 productos): la protagonista ancha y las demás en
   una columna angosta, con la foto que crece para no dejar huecos. */
.gx-vit{gap:1rem}
@media(min-width:768px){
  .gx-vit{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-auto-rows:1fr}
  .gx-vit .pc--lead{grid-row:span 2}
  .gx-vit--2 .pc--lead{grid-row:auto}
}

/* Estante 'deal': la tira de Ofertas, una sola fila de tarjetas compactas. */
.gx-shelf--deal{padding-bottom:clamp(.75rem,2vw,1.25rem)}
.gx-track--deal{grid-auto-columns:clamp(268px,80vw,300px)}
.gx-shelf.is-grid .gx-track--deal{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}

/* ═══ TARJETAS DE PRODUCTO ═════════════════════════════════════ */
.gx .pc{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--gx-panel);border:1px solid var(--gx-line);border-radius:var(--gx-r-md);overflow:hidden;cursor:pointer;scroll-snap-align:start}
/* El pozo de luz chico: acero oscuro, grilla, contraluz celeste y la
   línea celeste del piso. */
.gx .pc-img{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;flex-shrink:0;overflow:hidden;background:var(--gx-well);box-shadow:inset 0 0 0 1px rgba(143,205,249,.06),inset 0 0 34px 6px rgba(5,9,13,.5);color:#C6D6E4;font-size:2.4rem}
.gx .pc-img img{position:absolute;left:13%;top:10%;width:74%;height:74%;object-fit:contain;display:block;mix-blend-mode:multiply;transition:transform .5s var(--gx-ease)}
.gx .pc-img::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:2px;z-index:2;background:var(--cyan);box-shadow:0 0 12px 1px var(--cyan),0 -6px 18px rgba(12,149,243,.45);opacity:.55;transform:scaleX(.5);transition:transform .45s var(--gx-ease),opacity .3s var(--gx-ease)}
.gx .pc-disc{position:absolute;top:.6rem;left:.6rem;z-index:3;padding:.12rem .45rem;border-radius:4px;background:var(--offer);color:#1A1500;font-family:var(--fm);font-size:.72rem;font-weight:700}
.gx .pc-body{display:flex;flex-direction:column;gap:.45rem;flex:1;min-width:0;padding:.85rem .9rem .95rem;border-top:1px solid rgba(143,205,249,.14)}
.gx-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.gx .pc-badge,.gx-cond{padding:.1rem .42rem;border-radius:4px;font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.gx .pc-badge{background:rgba(12,149,243,.15);color:var(--gx-ice)}
.gx-cond{background:rgba(255,255,255,.08);color:var(--text)}
.gx .pc-name{font-family:var(--fd);font-size:.92rem;font-weight:600;line-height:1.3;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gx-specs{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem}
.gx-specs li{padding:.08rem .4rem;border:1px solid rgba(124,196,248,.24);border-radius:4px;font-family:var(--fm);font-size:.66rem;line-height:1.5;color:var(--text2);white-space:nowrap}
.gx .pc-price{margin-top:auto;padding-top:.2rem;font-family:var(--fm);font-size:1.08rem;font-weight:700;color:var(--price);font-variant-numeric:tabular-nums}
.gx .pc-ask{font-family:var(--fd);font-size:.85rem;font-weight:600;color:var(--text2)}
.gx .pc-old{display:inline-block;white-space:nowrap;margin-left:.45rem;font-size:.76rem;font-weight:400;color:var(--muted);text-decoration:line-through}
.gx .pc-add{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:44px;margin-top:.35rem;padding:.5rem .75rem;border-radius:999px;border:1px solid rgba(63,169,245,.45);background:rgba(12,149,243,.08);color:var(--gx-ice);font-family:var(--fd);font-size:.84rem;font-weight:600;text-align:center;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--gx-ease),border-color .2s var(--gx-ease),color .2s var(--gx-ease),transform .16s var(--gx-ease)}
.gx .pc-add:active{transform:scale(.97)}
.gx .pc-add.gx-ver{border-color:rgba(255,255,255,.16);background:transparent;color:var(--text)}
.gx .pc-add.gx-wa{border-color:rgba(37,211,102,.5);background:transparent;color:var(--wa)}
@media(pointer:fine){
  .gx .pc{transition:transform .35s var(--gx-ease),border-color .25s var(--gx-ease),box-shadow .35s var(--gx-ease)}
  .gx .pc:hover{transform:translateY(-4px);border-color:rgba(63,169,245,.5);box-shadow:0 0 0 1px rgba(63,169,245,.2),0 22px 40px -22px rgba(12,149,243,.7),0 34px 60px -34px var(--gx-v-a)}
  .gx .pc:hover .pc-img img{transform:scale(1.05)}
  .gx .pc:hover .pc-img::after{transform:scaleX(1);opacity:1}
  .gx .pc-add:hover{background:var(--cyan);border-color:var(--cyan);color:var(--gx-ink)}
  .gx .pc-add.gx-ver:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.34);color:var(--text)}
  .gx .pc-add.gx-wa:hover{background:var(--wa);border-color:var(--wa);color:var(--wa-ink)}
}

/* La protagonista ('lead'). Lleva el foco claro y su forma depende del
   ancho que le toque (container query):
   · angosta (celular): foto a la izquierda, datos a la derecha;
   · media: foto arriba;
   · ancha: foto grande a la izquierda. */
.gx .pc--lead{container:gxlead/inline-size;border-radius:var(--gx-r);border-color:rgba(124,196,248,.26);box-shadow:0 0 0 1px rgba(12,149,243,.08),0 30px 60px -36px rgba(12,149,243,.55)}
.gx .pc--lead .pc-img{background:var(--gx-spot);box-shadow:inset 0 0 50px 8px rgba(5,9,13,.55)}
.gx .pc--lead .pc-img img{left:9%;top:7%;width:82%;height:78%}
/* Piso en grilla bajo la protagonista. */
.gx .pc--lead .pc-img::before{content:"";position:absolute;left:-30%;right:-30%;bottom:0;height:44%;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(63,169,245,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(63,169,245,.7) 1px,transparent 1px);background-size:34px 34px;background-position:center bottom;transform:perspective(260px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 5%,transparent 90%);mask-image:linear-gradient(to top,#000 5%,transparent 90%)}
.gx .pc--lead .pc-img::after{opacity:.85;transform:scaleX(.6);left:12%;right:12%}
.gx-lead-in{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);flex:1;min-height:0}
.gx .pc--lead .pc-img{aspect-ratio:auto;min-height:100%}
.gx .pc--lead .pc-body{gap:.45rem;padding:.8rem .85rem .85rem;border-top:0;border-left:1px solid rgba(143,205,249,.16)}
.gx .pc--lead .gx-specs li:nth-child(n+3){display:none}
.gx-lead-t{font-family:var(--fd);font-size:1.05rem;font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gx .pc-name.gx-lead-t{font-size:1.05rem;font-weight:800;line-height:1.1}
.gx-lead-buy{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;padding-top:.2rem}
.gx .pc--lead .pc-price{margin-top:0;padding-top:0;font-size:1.2rem;letter-spacing:-.02em}
.gx-lead-acts{display:flex;gap:.4rem}
.gx .pc--lead .pc-add{flex:1 1 auto;width:auto;min-width:0;margin-top:0;padding-inline:.6rem;font-size:.8rem}
/* En angosto el botón pierde el ícono para que «Agregar a mi PC» entre entero. */
.gx .pc--lead .pc-add svg{display:none}
/* WhatsApp de la protagonista: en angosto queda en ícono; el texto sigue
   en el DOM como nombre accesible. */
.gx-lead-wa{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;flex-shrink:0;min-width:44px;min-height:44px;padding:.5rem;border-radius:999px;border:1px solid rgba(37,211,102,.5);color:var(--wa);font-family:var(--fd);font-size:.84rem;font-weight:600;white-space:nowrap;transition:background-color .2s var(--gx-ease),color .2s var(--gx-ease),border-color .2s var(--gx-ease)}
.gx-lead-wa svg{font-size:1.05rem}
.gx-lead-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(pointer:fine){.gx-lead-wa:hover{background:var(--wa);border-color:var(--wa);color:var(--wa-ink)}}
@container gxlead (min-width:440px){
  .gx-lead-in{grid-template-columns:none;grid-template-rows:auto 1fr}
  .gx .pc--lead .pc-img{aspect-ratio:16/10;min-height:0}
  .gx .pc--lead .pc-body{border-left:0;border-top:1px solid rgba(143,205,249,.16);gap:.55rem;padding:1rem 1.15rem 1.15rem}
  .gx .pc--lead .gx-specs li:nth-child(n+3){display:list-item}
  .gx-lead-t,.gx .pc-name.gx-lead-t{font-size:clamp(1.25rem,5cqi,1.6rem);-webkit-line-clamp:2;line-clamp:2}
  .gx .pc--lead .pc-price{font-size:clamp(1.3rem,4.6cqi,1.6rem)}
  .gx-lead-buy{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:1rem}
  .gx-lead-acts{flex-shrink:0}
  .gx .pc--lead .pc-add{flex:0 0 auto;padding-inline:1rem;font-size:.84rem}
  .gx .pc--lead .pc-add svg{display:block}
  .gx-lead-wa{padding:.5rem .95rem}
  .gx-lead-wa span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
}
@container gxlead (min-width:700px){
  .gx-lead-in{grid-template-rows:none;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .gx .pc--lead .pc-img{aspect-ratio:auto;min-height:100%}
  .gx .pc--lead .pc-body{border-top:0;border-left:1px solid rgba(143,205,249,.16);padding:clamp(1.25rem,3cqi,2.25rem);justify-content:center}
  .gx-lead-t,.gx .pc-name.gx-lead-t{font-size:clamp(1.6rem,4.2cqi,2.6rem);-webkit-line-clamp:3;line-clamp:3}
  .gx-lead-buy{flex-direction:column;align-items:stretch;margin-top:1rem}
  .gx .pc--lead .pc-price{font-size:clamp(1.5rem,3cqi,2rem)}
  .gx .pc--lead .pc-add{flex:1 1 auto}
}
/* En el estante 'track' de escritorio la protagonista llena el alto. */
@media(min-width:1024px){
  .gx-shelf--track .gx-lead-in{grid-template-rows:1fr auto}
  .gx .gx-shelf--track .pc--lead .pc-img{aspect-ratio:auto;min-height:230px}
  .gx .gx-shelf--track.is-grid .pc--lead .pc-img{min-height:0;aspect-ratio:2/1}
  .gx-duo .pc--lead .pc-img{aspect-ratio:16/9.5}
}
/* Encendido: la protagonista arranca en penumbra y su foco parpadea al
   entrar en pantalla. El contenido se ve siempre; sólo cambia la luz. */
.gx-armed .pc--lead:not(.is-on) .pc-img{filter:brightness(.5) saturate(.7)}
.gx-armed .pc--lead:not(.is-on) .pc-img::after{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .gx-armed .pc--lead.is-on .pc-img{animation:gx-foco .9s linear both}
  .gx-armed .pc--lead.is-on .pc-img::after{animation:gx-piso .7s var(--gx-ease) .35s both}
}
@keyframes gx-foco{0%{filter:brightness(.5) saturate(.7)}8%{filter:brightness(1.05)}13%{filter:brightness(.6)}22%{filter:brightness(1)}28%{filter:brightness(.8)}40%,100%{filter:none}}
@keyframes gx-piso{from{opacity:0;transform:scaleX(0)}to{opacity:.85;transform:scaleX(.6)}}

/* 'row': acompaña a la protagonista en estantes cortos. La foto crece
   para llenar el alto y el texto queda junto, sin huecos. */
.gx .pc--row .pc-img{flex:1 1 auto;aspect-ratio:auto;min-height:150px}
.gx .pc--row .pc-body{flex:0 0 auto}
@media(max-width:767px){
  .gx .pc--row{flex-direction:row}
  .gx .pc--row .pc-img{flex:0 0 40%;min-height:140px}
  .gx .pc--row .pc-body{flex:1 1 auto;border-top:0;border-left:1px solid rgba(143,205,249,.14)}
}

/* 'deal': compacta y horizontal, para la tira de Ofertas. */
.gx-deal-in{display:grid;grid-template-columns:96px minmax(0,1fr);flex:1}
.gx .pc--deal{border-color:rgba(230,198,97,.16)}
.gx .pc--deal .pc-img{aspect-ratio:auto;min-height:100%}
.gx .pc--deal .pc-img img{left:10%;top:12%;width:80%;height:76%}
.gx .pc--deal .pc-img::after{background:var(--offer);box-shadow:0 0 12px 1px rgba(230,198,97,.75);left:20%;right:20%}
.gx .pc--deal .pc-body{border-top:0;border-left:1px solid rgba(143,205,249,.12);padding:.7rem .8rem .75rem;gap:.3rem}
.gx .pc--deal .pc-name{font-size:.86rem}
.gx .pc--deal .pc-price{font-size:1rem;padding-top:0}
.gx .pc--deal .pc-add{min-height:40px;margin-top:.15rem;font-size:.8rem}
.gx .pc--deal .pc-disc{top:.45rem;left:.45rem;font-size:.68rem}

/* Enlace a las categorías que no llevan estante. */
.gx-more{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin:.5rem 0 0;padding:1rem 0 0;border-top:1px solid var(--gx-line);color:var(--text2);font-size:.95rem}
.gx-more a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--gx-ice);font-family:var(--fd);font-weight:600;text-decoration:underline;text-decoration-color:rgba(143,205,249,.4);text-underline-offset:4px;transition:text-decoration-color .2s var(--gx-ease)}
@media(pointer:fine){.gx-more a:hover{text-decoration-color:var(--gx-ice)}}

/* ═══ PUENTE AL ARMADOR: EL TABLERO ════════════════════════════
   Un adelanto del configurador: ranuras vacías en contorno celeste
   (como el gabinete fantasma del armador), pistas de circuito entre
   ellas, el contador de piezas y el total en blanco. */
.gx-build{position:relative;isolation:isolate;overflow:clip;padding:clamp(3rem,7vw,5.5rem) 0;margin:clamp(.5rem,2vw,1.5rem) 0;background:var(--gx-void);border-block:1px solid var(--gx-line-c)}
.gx-build::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    radial-gradient(40% 70% at 10% 50%,rgba(105,71,230,.16),transparent 70%),
    radial-gradient(45% 60% at 74% 45%,rgba(12,149,243,.16),transparent 72%);
}
.gx-build-grid{display:grid;gap:2.25rem;align-items:center}
@media(min-width:1024px){.gx-build-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,5vw,5rem)}}
.gx-build h2{font-family:var(--fd);font-size:clamp(2rem,1.3rem + 3vw,3.5rem);font-weight:800;line-height:.98;letter-spacing:-.04em;max-width:12ch}
.gx-build-copy p{color:var(--text2);max-width:42ch;margin:1rem 0 1.6rem;font-size:1.05rem}
@media(max-width:479px){.gx-build-copy .gx-btn{width:100%}}

.gx-board{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--gx-r);border:1px solid rgba(124,196,248,.24);background:#0A1016;box-shadow:inset 0 1px 0 rgba(143,205,249,.12),0 40px 80px -40px rgba(12,149,243,.45)}
/* Las pistas del circuito: líneas finas que corren por debajo de las
   ranuras y se ven en los espacios entre ellas. */
.gx-board::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(63,169,245,.22) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    repeating-linear-gradient(0deg,transparent 0 21px,rgba(63,169,245,.12) 21px 22px),
    repeating-linear-gradient(90deg,transparent 0 41px,rgba(63,169,245,.07) 41px 42px);
}
/* La línea de escaneo que recorre el tablero al encenderse. */
.gx-board::after{content:"";position:absolute;left:0;right:0;top:0;height:80px;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(12,149,243,.22) 70%,rgba(143,205,249,.7) 98%,transparent);opacity:0;transform:translateY(-100%)}
.gx-board-top,.gx-board-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;background:rgba(8,12,16,.92)}
.gx-board-top{border-bottom:1px solid var(--gx-line-c)}
.gx-board-foot{border-top:1px solid var(--gx-line-c);flex-wrap:wrap}
.gx-board-t{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:700;font-size:.98rem}
.gx-board-t svg{color:var(--price)}
.gx-board-n{font-family:var(--fm);font-size:.75rem;color:var(--text2)}
.gx-board-sum-l{font-family:var(--fd);font-weight:700;font-size:.95rem;color:var(--text2)}
/* El total en blanco: los dígitos son casillas vacías, como un display
   que todavía no tiene nada que mostrar. */
.gx-board-sum{display:inline-flex;align-items:center;gap:4px;font-family:var(--fm);font-size:1.25rem;font-weight:700;color:var(--text3)}
.gx-board-sum::after{content:none}
.gx-dig{display:inline-block;width:14px;height:22px;border-radius:3px;border:1px solid rgba(124,196,248,.28);background:rgba(12,149,243,.06)}
.gx-dig:first-of-type{margin-left:6px}
.gx-dig-sep{width:4px;border:0;background:none;position:relative}
.gx-dig-sep::after{content:"";position:absolute;left:1px;bottom:1px;width:3px;height:5px;border-radius:1px;background:rgba(124,196,248,.35)}

.gx-bays{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:76px;gap:.55rem;padding:.85rem}
.gx-bay[data-slot="gpu"]{grid-column:1/-1;grid-row:span 2}
/* En móvil la fuente ocupa el ancho, como la bahía de abajo del gabinete:
   así la grilla de dos columnas no deja un hueco al final. */
.gx-bay[data-slot="psu"]{grid-column:1/-1}
@media(min-width:640px){
  .gx-bays{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,clamp(76px,7.6vw,94px));gap:.7rem;padding:1.15rem;
    grid-template-areas:"gpu gpu gpu mb mb" "gpu gpu gpu mb mb" "case cpu ram cool psu" "case ssd ssd cool psu"}
  .gx-bay[data-slot="gpu"]{grid-area:gpu}
  .gx-bay[data-slot="ram"]{grid-area:ram}
  .gx-bay[data-slot="mb"]{grid-area:mb}
  .gx-bay[data-slot="cpu"]{grid-area:cpu}
  .gx-bay[data-slot="ssd"]{grid-area:ssd}
  .gx-bay[data-slot="case"]{grid-area:case}
  .gx-bay[data-slot="cool"]{grid-area:cool}
  .gx-bay[data-slot="psu"]{grid-area:psu}
}
/* Cada ranura: contorno punteado celeste (vacía), esquinas marcadas y el
   ícono de la pieza en fantasma. */
.gx-bay{--lit:rgba(124,196,248,.42);position:relative;min-width:0;border-radius:var(--gx-r-sm);border:1px dashed var(--lit);background:rgba(10,16,22,.88);overflow:hidden;transition:border-color .5s var(--gx-ease),box-shadow .6s var(--gx-ease),background-color .5s var(--gx-ease)}
.gx-bay::before{content:"";position:absolute;inset:5px;border-radius:5px;pointer-events:none;
  background:
    linear-gradient(var(--lit),var(--lit)) left top/10px 1px no-repeat,linear-gradient(var(--lit),var(--lit)) left top/1px 10px no-repeat,
    linear-gradient(var(--lit),var(--lit)) right top/10px 1px no-repeat,linear-gradient(var(--lit),var(--lit)) right top/1px 10px no-repeat,
    linear-gradient(var(--lit),var(--lit)) left bottom/10px 1px no-repeat,linear-gradient(var(--lit),var(--lit)) left bottom/1px 10px no-repeat,
    linear-gradient(var(--lit),var(--lit)) right bottom/10px 1px no-repeat,linear-gradient(var(--lit),var(--lit)) right bottom/1px 10px no-repeat}
.gx-sock{position:absolute;inset:0 0 22px;display:flex;align-items:center;justify-content:center;color:rgba(143,205,249,.55);font-size:1.5rem}
.gx-bay-lbl{position:absolute;left:10px;bottom:7px;font-family:var(--fm);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gx-ice)}
/* Detalles de cada zócalo, dibujados con la misma luz: el peine PCIe de
   la gráfica, la grilla de pines del procesador y la ranura de la RAM. */
.gx-bay[data-slot="gpu"] .gx-sock{font-size:2.6rem}
.gx-bay[data-slot="gpu"]::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:7px;background:repeating-linear-gradient(90deg,rgba(143,205,249,.5) 0 3px,transparent 3px 6px);border-radius:2px 2px 0 0;opacity:.7}
.gx-bay[data-slot="gpu"] .gx-bay-lbl{bottom:12px;font-size:.78rem;color:var(--text)}
.gx-bay[data-slot="cpu"] .gx-sock{background:radial-gradient(rgba(143,205,249,.22) 1px,transparent 1.5px) center/7px 7px;-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.gx-bay[data-slot="ram"] .gx-sock{background:linear-gradient(90deg,transparent calc(50% - 3px),rgba(143,205,249,.16) calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px))}
.gx-bay[data-slot="mb"] .gx-sock{font-size:2rem}
/* La ranura del primer paso: el procesador, como en el armador. */
.gx-bay.is-next{--lit:var(--cyan);border-style:solid;background:rgba(12,149,243,.08);box-shadow:inset 0 0 26px -8px var(--gx-c-a),0 0 24px -8px var(--gx-c-a)}
.gx-bay.is-next .gx-sock{color:var(--gx-ice)}
.gx-bay-st{position:absolute;right:7px;top:7px;padding:.05rem .45rem;border-radius:999px;background:var(--cyan);color:var(--gx-ink);font-family:var(--fd);font-size:.7rem;font-weight:700;line-height:1.5}

/* Encendido al entrar en pantalla: el escaneo baja y las ranuras se
   prenden en orden (el orden de armado). */
@media(prefers-reduced-motion:no-preference){
  .gx-board.is-armed .gx-bay{--lit:rgba(124,196,248,.1);border-color:rgba(124,196,248,.1);box-shadow:none;background:rgba(10,16,22,.6);transition-delay:calc(var(--i,0)*70ms + 100ms)}
  .gx-board.is-armed .gx-sock,.gx-board.is-armed .gx-bay-lbl,.gx-board.is-armed .gx-bay-st{opacity:.15;transition:opacity .4s var(--gx-ease) calc(var(--i,0)*70ms + 100ms)}
  .gx-board.is-armed.is-on .gx-bay{--lit:rgba(124,196,248,.42);border-color:rgba(124,196,248,.42);background:rgba(10,16,22,.88)}
  .gx-board.is-armed.is-on .gx-bay.is-next{--lit:var(--cyan);border-color:var(--cyan);background:rgba(12,149,243,.08);box-shadow:inset 0 0 26px -8px var(--gx-c-a),0 0 24px -8px var(--gx-c-a)}
  .gx-board.is-armed.is-on .gx-sock,.gx-board.is-armed.is-on .gx-bay-lbl,.gx-board.is-armed.is-on .gx-bay-st{opacity:1}
  .gx-board.is-on::after{animation:gx-scan 1.2s var(--gx-ease) both}
}
@keyframes gx-scan{0%{opacity:0;transform:translateY(-100%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(560px)}}

/* ═══ TARJETAS Y SUSCRIPCIONES ═════════════════════════════════ */
.gx-gift{position:relative;isolation:isolate;padding:clamp(2rem,4.5vw,3.5rem) 0 clamp(2.75rem,6vw,4.75rem);background:var(--gx-deep)}
.gx-gift::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 45% at 82% 45%,rgba(105,71,230,.16),transparent 70%)}
.gx-gift-head h2{font-family:var(--fd);font-size:clamp(1.6rem,1.2rem + 1.7vw,2.6rem);font-weight:800;line-height:1.05;letter-spacing:-.035em}
.gx-gift-head p{color:var(--text2);max-width:52ch;margin-top:.55rem}
.gx-gift-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;margin:1.5rem -16px 0;padding:.6rem 16px 1rem;perspective:900px}
.gx-gift-grid::-webkit-scrollbar{display:none}
@media(min-width:640px){.gx-gift-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:1.75rem 0 0;padding:.6rem 0 0;gap:1.25rem}}
@media(min-width:1024px){.gx-gift-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gx .gx-gc{background:transparent;border:0;overflow:visible}
.gx-gc-art{
  --gc:var(--cyan);--gc-deep:#0E2233;--gc-a:var(--gx-c-a);
  position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.586;border-radius:var(--gx-r-md);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.15rem;padding:1rem 1.05rem .95rem;
  background:var(--gc-deep);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -22px var(--gc-a);
  transform-style:preserve-3d;transition:transform .45s var(--gx-ease),box-shadow .45s var(--gx-ease);
}
/* Halo del color de la marca, en la esquina del logo (no detrás del texto). */
.gx-gc-art::before{content:"";position:absolute;right:-25%;top:-70%;width:85%;height:110%;z-index:-1;border-radius:50%;background:var(--gc);opacity:.6;filter:blur(28px)}
/* Lámina holográfica: un brillo que cruza la tarjeta en hover. */
.gx-gc-art::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.2) 45%,rgba(143,205,249,.16) 52%,transparent 66%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s var(--gx-ease)}
.gx .gx-gc-logo{position:absolute;left:1.05rem;top:1rem;width:min(64%,190px);height:36px;aspect-ratio:auto;border-radius:6px;background:#F6F8FA;box-shadow:0 4px 14px -6px rgba(0,0,0,.6);font-size:1.3rem;color:#334}
.gx .gx-gc-logo::before,.gx .gx-gc-logo::after{content:none}
.gx .gx-gc-logo img{left:8px;top:6px;width:calc(100% - 16px);height:calc(100% - 12px);mix-blend-mode:normal}
.gx-gc-reg{position:absolute;right:.85rem;top:1.05rem;padding:.1rem .45rem;border-radius:4px;background:rgba(5,8,12,.6);color:#fff;font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.05em}
.gx-gc-plan{font-family:var(--fd);font-size:clamp(1.12rem,1rem + .4vw,1.3rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:#fff}
.gx-gc-det{font-family:var(--fm);font-size:.78rem;font-weight:500;color:#D6E4F0}
.gx .gx-gc .pc-body{border-top:0;padding:.85rem .15rem 0;gap:.35rem}
.gx .gx-gc .pc-name{font-size:.86rem;font-weight:500;color:var(--text2)}
.gx .gx-gc .pc-add{margin-top:.2rem}
@media(pointer:fine){
  .gx .gx-gc:hover{transform:none;box-shadow:none;border-color:transparent}
  .gx-gc:hover .gx-gc-art{transform:translateY(-6px) rotateX(7deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 50px -24px var(--gc-a)}
  .gx-gc:hover .gx-gc-art::after{background-position:-20% 0}
}

/* ═══ ESTADOS: cargando, vacío, error ══════════════════════════ */
.gx-sk-shelf{display:grid;gap:1rem;padding:2rem 0}
@media(min-width:1024px){.gx-sk-shelf{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.gx-lead-sk{min-height:320px;border-radius:var(--gx-r);background:var(--gx-panel)}
.gx-track-sk{overflow:hidden}
.gx-card-sk{aspect-ratio:3/4.4;border-radius:var(--gx-r-md);background:var(--gx-panel)}
.gx .g-empty{display:grid;justify-items:center;gap:.85rem;margin:1.5rem 0;padding:2.75rem 1rem;border:1px dashed rgba(255,255,255,.16);border-radius:var(--gx-r);text-align:center;color:var(--text2)}
.gx .g-empty-ico{font-size:2rem;color:var(--text3)}
.gx .g-empty p{max-width:44ch}
.gx .g-empty a{color:var(--price);text-decoration:underline;text-underline-offset:3px}

/* ═══ CIERRE ═══════════════════════════════════════════════════ */
.gx-cierre{position:relative;padding:clamp(3rem,6vw,4.75rem) 0;background:var(--gx-void)}
.gx-cierre::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--cyan) 70%,transparent);box-shadow:0 0 18px 1px rgba(12,149,243,.5)}
.gx-cierre-grid{display:grid;gap:1rem;justify-items:start}
@media(min-width:900px){
  .gx-cierre-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:4rem;align-items:end}
  .gx-cierre h2{grid-row:1/3}
}
.gx-cierre h2{font-family:var(--fd);font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.04em;max-width:15ch}
.gx-cierre p{color:var(--text2);max-width:46ch}
.gx-cierre .gx-btn{margin-top:.4rem}
@media(max-width:479px){.gx-cierre .gx-btn{width:100%}}

/* ═══ AVISO ════════════════════════════════════════════════════ */
.toast{position:fixed;left:50%;bottom:1.5rem;z-index:var(--z-overlay,400);display:flex;align-items:center;gap:.5rem;max-width:calc(100vw - 32px);padding:.7rem 1.1rem;border-radius:999px;border:1px solid rgba(124,196,248,.25);background:#12171C;color:var(--text);font-family:var(--fd);font-size:.86rem;font-weight:600;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px);transition:opacity .25s var(--gx-ease,ease),transform .25s var(--gx-ease,ease)}
.toast.show{opacity:1;transform:translateX(-50%)}

@media(prefers-reduced-motion:reduce){
  .gx *,.gx *::before,.gx *::after,.toast{transition:none!important;animation:none!important}
  .gx-armed .pc--lead .pc-img{filter:none}
}