/* ============================================
   PIXELCLUB — Sistema de diseño
   ============================================
   Los patrones que se sacaron de medir Instant Gaming, traducidos a la marca.
   El análisis completo está en `REDISEÑO.md`.

   QUÉ ES ESTO Y QUÉ NO ES
   -----------------------
   NO sustituye a `variables.css`. Va encima y se apoya en él: aquí no se
   define ni un solo color nuevo, todos salen de allí. Si mañana cambia el
   turquesa de la marca, este archivo cambia solo.

   Todo lleva el prefijo `--pc-` para que se vea de un vistazo qué viene del
   sistema y qué es un valor suelto que alguien escribió a mano.

   LO QUE **NO** SE COPIA DE ELLOS
   -------------------------------
   Sus esquinas redondeadas (10px, 7px) y sus sombras `inset`. PixelClub tiene
   esquinas rectas y sombra dura de 2px porque es pixel art: eso aparece 170
   veces en la web y es identidad, no un descuido. Copiarlo sería perder lo
   único que no se puede imitar.
   ============================================ */

:root {
  /* ── Superficies ──────────────────────────────────────────────────────────
     Su profundidad no sale de sombras: sale de tres grises apilados con un
     filo claro entre medias. Aquí es lo mismo con los azules de la marca. */
  --pc-capa-0: var(--bg-primary);      /* el suelo */
  --pc-capa-1: var(--bg-secondary);    /* barras, regletas, zonas agrupadas */
  --pc-capa-2: var(--bg-card);         /* lo que se puede tocar */
  --pc-filo:   var(--border-color);    /* separa capas; su borde de 1px */

  /* ── Velos para lo interactivo tenue ──────────────────────────────────────
     Ellos usan blanco al 4% y les vale porque su fondo es gris medio
     (#272727). El nuestro es casi negro: al 4% no se ve nada. Medido y
     subido a 6% y 10%, que es donde empieza a leerse sobre #0A0A0F. */
  --pc-velo:        rgba(255, 255, 255, 0.06);
  --pc-velo-fuerte: rgba(255, 255, 255, 0.10);

  /* ── Ritmo vertical ───────────────────────────────────────────────────────
     Ellos dejan 80px entre secciones. Nuestra escala es más apretada y el
     contenido más denso, así que 64 — pero la regla es la misma: una sola
     distancia para todo, no la que le apetezca a cada página. */
  --pc-ritmo:       var(--space-3xl);  /* 64px, entre secciones */
  --pc-ritmo-corto: var(--space-xl);   /* 32px, dentro de una sección */

  /* ── Rejilla ──────────────────────────────────────────────────────────────
     La columna baja de 230 a 208 px, y no es un capricho: con 230 caben 4
     columnas en 1280, la portada 2:3 se va a 470 px de alto y la ficha entera
     mide 730. Eso es **una fila y cuarto por pantalla**. Instant Gaming enseña
     más de dos filas, y por eso su página parece una tienda y esta parecía una
     galería de carteles.

     Con 208 caben 5 (portada de 336 px) y la ficha baja a ~540. La portada
     sigue siendo grande —es un videoclub, el cartel manda— pero ya se ve que
     detrás hay catálogo. */
  --pc-col-min:       208px;
  --pc-col-min-movil: 150px;
  --pc-hueco:         var(--space-lg);
  --pc-hueco-movil:   var(--space-sm);

  /* ── Movimiento ───────────────────────────────────────────────────────────
     Su web está completamente quieta: cero transiciones en las tarjetas. Aquí
     no se copia, porque un videoclub arcade sin movimiento sería un folleto —
     pero sí se copia la contención: nada en bucle, nada que empuje a los
     vecinos, y siempre a saltos, que es como se mueve el pixel art. */
  --pc-salto:       var(--transition-fast);   /* .12s steps(3) */
  --pc-salto-largo: var(--transition-normal); /* .24s steps(4) */

  /* ── Elevación 8-bit ──────────────────────────────────────────────────────
     Nuestro equivalente a su borde `inset`: una sombra dura, sin difuminar.
     Tres niveles y ninguno más. */
  --pc-alto-0: var(--shadow-pixel-sm);
  --pc-alto-1: var(--shadow-pixel);
  --pc-alto-2: var(--shadow-pixel-lg);

  /* ── Lo que se pone ENCIMA de una imagen ──────────────────────────────────
     Su distintivo de descuento va pegado al borde de abajo de la portada, y
     ahí un texto blanco puede caer sobre una zona clara del cartel y perderse.
     Ellos lo resuelven con el naranja opaco del propio distintivo; aquí, que
     además hay nota y «jugando», hace falta un velo que oscurezca el pie de la
     portada. Va de transparente a casi negro para que no se note el corte. */
  --pc-velo-arte: linear-gradient(to top,
                    rgba(10, 10, 15, 0.80) 0%,
                    rgba(10, 10, 15, 0.28) 14%,
                    rgba(10, 10, 15, 0) 34%);

  /* Este velo pasó por una versión que llegaba al 55 % a media portada, y en
     las capturas se veía el fallo de bulto: los carteles quedaban apagados,
     que es justo lo contrario de lo que hace su web —allí el arte va a plena
     luz—. Ahora solo cubre el tercio de abajo, y aun así casi no hace falta:
     la nota, el «jugando» y el descuento llevan cada uno su propio fondo
     opaco. Se queda porque asienta el distintivo del descuento contra
     carteles muy claros (Celeste, Palworld). */

  /* Cuánto se acerca el cartel al pasar el ratón.
     Medido en su web: la portada crece a 1.075 en 0.3s (lo que NO se mide en
     la tarjeta, que está quieta — el zoom vive en la imagen de dentro). Aquí
     se copia el gesto, pero a saltos: un acercamiento suave delataría que
     esto no es pixel art. */
  --pc-zoom-arte: 1.06;

  /* Los dos velos de la tarjeta «a sangre» (t-02). En ella los datos viven
     DENTRO de la portada, así que el velo ya no asienta un distintivo: tiene
     que dejar leer un título en VT323 sobre cualquier cartel.
       · datos  → al pasar el ratón o con el foco: sube hasta media portada,
                  porque ahí caben título, año, género y, en la ficha de un
                  creador, su frase.
       · franja → en pantallas táctiles, siempre puesta: solo el título en una
                  línea, así que se queda en el cuarto de abajo y el cartel
                  sigue a plena luz.
     Mismo casi negro que `--pc-velo-arte` (el de --bg-primary). */
  --pc-velo-datos: linear-gradient(to top,
                     rgba(10, 10, 15, 0.95) 0%,
                     rgba(10, 10, 15, 0.55) 40%,
                     rgba(10, 10, 15, 0) 65%);
  --pc-velo-franja: linear-gradient(to top,
                      rgba(10, 10, 15, 0.92) 0%,
                      rgba(10, 10, 15, 0.92) 45%,
                      rgba(10, 10, 15, 0) 100%);

  /* Color por función, y esto sí es una decisión de diseño ─────────────────
     Ellos tienen UN acento (naranja) y lo usan para marca y descuento; su
     verde significa «disponible» y nunca precio.

     Aquí el reparto es:
       · descuento  → magenta de marca. Antes era un rojo (#ff3333) que no
                      está en la paleta: un color de error haciendo de oferta.
       · precio     → verde SOLO si está rebajado; si no, tinta normal. Así el
                      verde significa algo en vez de decorar 61 fichas.
       · nota       → amarillo de marca. Estaba en verde y chocaba con el
                      precio: dos verdes distintos a 2 cm uno del otro.
       · tipo/acento→ el de la sección (turquesa, magenta, amarillo). */
  /* No es var(--accent-movies) a secas: los chips de descuento llevan texto
     BLANCO encima, y el blanco sobre #f72585 mide 3.78:1 (WCAG AA pide 4.5).
     Este magenta un 10% más hondo mide 4.65:1 y sigue leyéndose como el
     color de rebaja de la casa. Si se vuelve a #f72585, el texto de los
     chips tiene que dejar de ser blanco. */
  --pc-descuento: #dc1f78;
  --pc-precio-rebaja: var(--pixel-green);
  --pc-nota: var(--accent-series);
}

/* ============================================
   CONTENEDOR
   ============================================
   Ellos encajonan a 1200px aunque la ventana tenga 1600. Aquí se respeta el
   `--container-xl` que ya existía (1280px) para no pelearse con el resto de
   la web. */

.pc-ancho {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ============================================
   RITMO
   ============================================
   Una sola distancia entre secciones, en vez de que cada página decida. */

.pc-seccion + .pc-seccion { margin-top: var(--pc-ritmo); }

/* ============================================
   REJILLA
   ============================================ */

.pc-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pc-col-min), 1fr));
  gap: var(--pc-hueco);
  /* ── `start`, y aquí hubo que rectificar ───────────────────────────────────
     Esto decía `stretch`, con el argumento de que si las tarjetas miden
     distinto los precios se descolocan y no se pueden comparar bajando la
     vista. El argumento no se sostiene: el precio va pegado DEBAJO de una
     portada de proporción fija, así que cae siempre a la misma altura mida lo
     que mida la tarjeta. Lo que alinea los precios es la portada, no el
     estirado.

     Y estirar tenía un precio muy caro, que se ve en cualquier captura de la
     tienda: solo 8 de 80 fichas llevan cita de creador, así que las 72
     restantes se estiraban hasta la altura de esas 8 y quedaban con **más de
     100 px de vacío** entre los datos y el botón. Una tarjeta medía 730 px de
     alto para enseñar 400 px de cosas.

     Con `start` cada tarjeta mide lo que ocupa. Los bordes de abajo quedan
     algo dentados, exactamente igual que en la rejilla de Instant Gaming
     (donde las fichas con «RESERVA» son más altas que las demás), y a cambio
     no hay ni un hueco muerto. */
  align-items: start;
}

@media (max-width: 640px) {
  .pc-rejilla {
    grid-template-columns: repeat(auto-fill, minmax(var(--pc-col-min-movil), 1fr));
    gap: var(--pc-hueco-movil);
  }
}

/* ============================================
   CONTROLES
   ============================================
   Ellos tienen UNA forma de botón repetida por toda la web: pastilla, velo
   tenue, sin borde. Aquí la forma es recta y con filo —la marca— pero la
   disciplina es la misma: una sola forma, dos variantes.

   `--pc-acento` lo pone quien use la clase, según sea juego, película o
   serie. Así una regla sirve para los tres. */

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  padding: 11px var(--space-md);
  /* 44px de alto mínimo: lo que necesita un dedo en el móvil. */
  min-height: 44px;
  border: var(--border-width) solid var(--pc-filo);
  background: var(--pc-velo);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--pc-salto), color var(--pc-salto),
              border-color var(--pc-salto), transform var(--pc-salto),
              box-shadow var(--pc-salto);
}

.pc-btn:hover {
  background: var(--pc-velo-fuerte);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* El botón principal, el que lleva el acento de su sección. */
.pc-btn-fuerte {
  background: var(--pc-acento, var(--accent-games));
  border-color: var(--pc-acento, var(--accent-games));
  color: var(--text-inverse);
  box-shadow: var(--pc-alto-0);
}

.pc-btn-fuerte:hover {
  background: var(--pc-acento, var(--accent-games));
  color: var(--text-inverse);
  filter: brightness(1.12);
}

/* Se hunde al pulsarlo, como la tecla de una recreativa: sale de su sombra y
   vuelve. Es la microinteracción que ellos NO tienen y que aquí sí toca. */
.pc-btn:hover, .pc-btn:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--pc-alto-2); }
.pc-btn:active { transform: translate(2px, 2px); box-shadow: none; }

.pc-btn:focus-visible {
  outline: var(--border-width) solid var(--text-primary);
  outline-offset: 2px;
}

/* ============================================
   CAMPOS
   ============================================ */

.pc-campo {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 10px var(--space-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  border: var(--border-width) solid var(--pc-filo);
  transition: border-color var(--pc-salto);
}

.pc-campo::placeholder { color: var(--text-muted); }

.pc-campo:focus {
  outline: none;
  border-color: var(--pc-acento, var(--accent-games));
}

/* ============================================
   DISTINTIVOS
   ============================================
   Ellos pegan el descuento a un borde con radio solo en dos esquinas. Aquí no
   hay radios, así que lo que marca «esto va pegado» es que no tiene margen. */

.pc-tag {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  line-height: 1;
  padding: 5px 7px;
  background: var(--pc-acento, var(--accent-games));
  color: var(--text-inverse);
}

.pc-tag-alerta {
  background: var(--accent-danger);
  color: #fff;
  box-shadow: var(--pc-alto-0);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.pc-tag-tenue {
  background: var(--bg-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--pc-filo);
}

/* ============================================
   TARJETA
   ============================================ */

.pc-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--pc-capa-2);
  border: var(--border-width) solid var(--pc-filo);
  box-shadow: var(--pc-alto-0);
  transition: transform var(--pc-salto-largo),
              border-color var(--pc-salto-largo),
              box-shadow var(--pc-salto-largo);
}

.pc-tarjeta:hover,
.pc-tarjeta:focus-within {
  transform: translateY(-4px);
  border-color: var(--pc-acento, var(--accent-games));
  box-shadow: var(--pc-alto-2);
}

/* Al tabular, que se marque la tarjeta entera y no solo el botón: con 80 en
   pantalla, un cerco de 1px no dice dónde estás. */
.pc-tarjeta:focus-within {
  outline: var(--border-pixel) solid var(--pc-acento, var(--accent-games));
  outline-offset: 2px;
}

/* El arte, con su proporción fija. `flex-shrink: 0` NO es decorativo: sin él,
   cuando el texto de abajo pide sitio, el flex le roba altura a la portada y
   las tarjetas de una fila dejan de estar alineadas. */
.pc-tarjeta-arte {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-input);
  flex-shrink: 0;
}

.pc-tarjeta-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pc-salto-largo);
}

/* El acercamiento del cartel: SU gesto, el único que tienen. Medido en su web
   con el ratón encima (`transform: matrix(1.075…)`, `transition .3s` sobre la
   imagen, no sobre la tarjeta). Aquí a saltos y algo más corto.

   Va sobre la imagen y no sobre la tarjeta a propósito: mover la tarjeta
   entera empuja a las vecinas y hace bailar la rejilla. */
.pc-tarjeta:hover .pc-tarjeta-arte img,
.pc-tarjeta:focus-within .pc-tarjeta-arte img {
  transform: scale(var(--pc-zoom-arte));
}

/* Cuando la portada de verdad falla, `delegacion.js` pone en su sitio un SVG
   dibujado con el título y marca esta clase. Ese repuesto NO se acerca al
   pasar por encima: acercarse a un texto centrado delata al instante que ahí
   no hay arte, y además lo deja borroso. Se queda quieto y con un filo del
   acento de la sección, para que se lea como una carátula provisional a
   propósito y no como una imagen rota. Rescatado de rediseno-instagaming
   (76df273), que sí lo tenía y esta rama no. */
.pc-tarjeta-arte img.portada-de-repuesto {
  transform: none !important;
  outline: var(--pc-filo-fino, 1px) solid var(--pc-acento, var(--accent-games));
  outline-offset: -6px;
}

/* El velo del pie de la portada, para que lo que va encima siempre se lea.
   Es un pseudo-elemento y no un div: no debe poder recibir el ratón ni salir
   en el árbol de accesibilidad. */
.pc-tarjeta-arte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pc-velo-arte);
  pointer-events: none;
}

/* Lo que se coloca sobre la portada va POR ENCIMA del velo. */
.pc-tarjeta-arte > :not(img) { position: absolute; z-index: 1; }

/* ============================================
   PASTILLA DE DATO (chip)
   ============================================
   Su barra de confianza («Steam · En stock · Descarga digital») son pastillas
   de dato: fondo tenue, letra pequeña, nada de borde de color. Sirven para
   decir muchas cosas cortas seguidas sin que ninguna grite.

   Aquí valen para el resumen del escaparate (cuántos hay, cuántos rebajados,
   de cuándo son los precios), que antes era una frase corrida con puntos. */

.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1;
  padding: 7px var(--space-sm);
  background: var(--pc-velo);
  border: 1px solid var(--pc-filo);
  color: var(--text-secondary);
  white-space: nowrap;
}

.pc-chip b {
  font-weight: normal;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   PANEL
   ============================================
   Su ficha de producto pone los datos de compra en un panel oscuro sobre el
   arte del juego. La idea que se traduce no es el desenfoque —que aquí sería
   caro y ajeno— sino la de **una zona con su propio fondo encima del arte**
   para que el precio y el botón se lean sin depender del cartel de debajo. */

.pc-panel {
  position: relative;
  background: var(--pc-capa-1);
  border: var(--border-width) solid var(--pc-filo);
  box-shadow: var(--pc-alto-0);
  padding: var(--space-lg);
}

/* ============================================
   ACCESIBILIDAD Y RESPETO
   ============================================ */

/* El `[hidden]` tiene que ganar SIEMPRE. Una regla de autor con `display`
   pisa el `display:none` que el navegador da a `[hidden]`, y entonces se
   esconden cosas que se siguen viendo. Ya pasó con el buscador de la tienda:
   el contador decía «1 de 80» y las ochenta seguían en pantalla. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pc-btn, .pc-tarjeta, .pc-campo, .pc-tarjeta-arte img { transition: none; }
  .pc-tarjeta:hover { transform: none; }
  .pc-btn:hover, .pc-btn:active { transform: none; }
  .pc-tarjeta:hover .pc-tarjeta-arte img,
  .pc-tarjeta:focus-within .pc-tarjeta-arte img { transform: none; }
}