/* ============================================
   PIXELCLUB — El escaparate (/comprar)
   ============================================
   La disposición viene de Instant Gaming, que es la referencia pedida. Lo que
   se ha traído de allí, medido con Playwright sobre su web y anotado en
   `REDISEÑO.md`:

     · El descuento va PEGADO a la esquina de abajo de la portada, grande, con
       el acento de la marca. Es lo primero que se ve de su rejilla.
     · La tarjeta no es una caja con relleno: es arte, y debajo una fila corta
       de datos. Todo lo que no sea el cartel se calla.
     · El precio pesa 1,4 veces el título. Ni más, ni al revés.
     · Sus filas dejan los bajos dentados y no pasa nada; lo que alinea la
       vista es el borde de ARRIBA de cada fila.
     · Al pasar el ratón, lo que se acerca es la PORTADA (1.075 en 0,3 s); la
       tarjeta no se toca. El movimiento va dentro del marco y no empuja a los
       vecinos. Aquí se hace igual, y encima la tarjeta se levanta 4 px: ese
       salto sí es de la casa, y viene de `sistema.css`.

   Los colores y las tipografías NO vienen de allí: salen enteros de
   `variables.css` y `sistema.css`. Aquí no se define ni un solo hex — si algún
   día cambia el turquesa de la marca, este archivo cambia solo.

   El acento de cada ficha llega por la variable `--acento`, que pone el JS
   según sea juego, película o serie; el de la página entera, por
   `--acento-pagina`. Así una misma regla sirve para los tres.
   ============================================ */

.page-comprar {
  padding-bottom: var(--space-4xl);
}

/* ════════════════════════════════════════════════════════════════════════
   1. LA CABECERA
   ════════════════════════════════════════════════════════════════════════
   Su portada abre con UNA cosa: el chollo del día a pantalla completa, con su
   arte de fondo, su precio y su botón. Aquí eso se convierte en dos columnas:
   a la izquierda dónde estás y qué hay, a la derecha lo mejor que hay ahora
   mismo. Antes esta zona era un título, una frase que se partía a media
   pantalla y una línea de cifras: correcta y sin ninguna fuerza. */

.comprar-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--space-xl);
  /* Alineados por ABAJO y no por el centro. Centrados, la columna de texto
     —que es más corta que el panel del destacado— dejaba un hueco muerto de
     unos 60 px justo encima de las pestañas, y la cabecera parecía sin
     terminar. Por abajo las dos columnas acaban a la misma altura y las
     pestañas arrancan pegadas a ellas. */
  align-items: end;
  margin-bottom: var(--pc-ritmo-corto);
}

.comprar-cabecera-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* Sin esto un título largo empuja a la columna del destacado, y las dos
     columnas dejan de medir lo mismo al saltar de pestaña. */
  min-width: 0;
}

/* El antetítulo: dice dónde estás sin gastar el tamaño del titular. */
.comprar-antetitulo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento-pagina, var(--accent-games));
}

.comprar-antetitulo-icono {
  display: inline-flex;
  color: currentColor;
}

/* El titular, y por qué es tan grande.
   En pixel art una tipografía pequeña se lee PEOR que una normal —no tiene
   suavizado— y grande se lee mejor y además se ve el dibujo de cada letra, que
   es de lo que va todo esto. El `clamp` lo sostiene en móvil. */
.comprar-titular {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: clamp(var(--pixel-xl), 3.4vw, var(--pixel-4xl));
  line-height: 1.25;
  color: var(--text-primary);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75);
}

/* La categoría, en el acento de la pestaña. Es lo único que cambia entre las
   tres, así que es lo único que se colorea. Sin cursiva: el `em` está por lo
   que significa, no por cómo se dibuja. */
.comprar-titular em {
  font-style: normal;
  color: var(--acento-pagina, var(--accent-games));
}

.comprar-entradilla {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--text-secondary);
  /* Una medida de lectura, no el ancho de la columna: a 1440 px la frase se
     estiraba hasta los 900 px y luego partía por donde le tocaba. */
  max-width: 46ch;
}

/* ── El resumen, en pastillas ─────────────────────────────────────────────
   Mismo patrón que su barra de confianza de la ficha de producto
   («Steam · En stock · Descarga digital»): datos cortos, seguidos, ninguno
   gritando. Corridos con puntos se leían como una sola frase larga y la cifra
   que importa —cuántos hay rebajados— se perdía en medio. */

.comprar-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
}

.comprar-chip-oferta {
  border-color: rgba(57, 255, 20, 0.35);
}

.comprar-chip-oferta b {
  color: var(--pixel-green);
}

.comprar-chip-fecha {
  color: var(--text-muted);
}

/* ── El destacado ─────────────────────────────────────────────────────────
   Su chollo del día, encogido a un panel. El arte del propio juego hace de
   fondo, desenfocado y oscurecido: la idea de que el fondo de la zona de
   compra sea el juego que estás mirando es suya.

   El desenfoque es UNO en toda la página. Cuatro capas desenfocadas por ficha
   × 80 fichas sería niebla para el navegador; una sola, no. */

.comprar-destacado {
  overflow: hidden;
  padding: var(--space-md);
  /* El botón del destacado usa `--acento`, que en una ficha lo pone el JS.
     Aquí no hay ficha, así que sin esto se quedaba en el turquesa de reserva
     y salía un botón de juegos en la pestaña de Películas. */
  --acento: var(--acento-pagina, var(--accent-games));
}

.comprar-destacado-fondo {
  position: absolute;
  inset: -20%;
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.5) saturate(1.35);
  opacity: 0.9;
  pointer-events: none;
}

/* Todo lo que no es el fondo va por encima de él. */
.comprar-destacado > :not(.comprar-destacado-fondo) {
  position: relative;
  z-index: 1;
}

.comprar-destacado-antetitulo {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: 0.1em;
  color: var(--pixel-green);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.comprar-destacado-cuerpo {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.comprar-destacado-portada {
  width: 92px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: var(--border-width) solid var(--pc-filo);
  box-shadow: var(--pc-alto-1);
}

.comprar-destacado-datos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  flex: 1;
}

.comprar-destacado-titulo {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--text-primary);
}

.comprar-destacado-meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.comprar-destacado-cifras {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-2xs) 0 var(--space-xs);
}

/* En el destacado el descuento no va pegado a ninguna esquina: aquí es una
   cifra más de la fila, así que se coloca sola. */
.comprar-destacado-cifras .comprar-descuento {
  position: static;
}

.comprar-destacado-cifras .comprar-precio-ahora {
  font-size: var(--pixel-2xl);
}

.comprar-cifras-oferta .comprar-precio-ahora {
  color: var(--pc-precio-rebaja);
}

/* Sobre el fondo del destacado —que lleva el arte desenfocado detrás— el gris
   de `--text-muted` del precio tachado se hundía hasta no leerse. Sube un
   escalón: sigue siendo secundario, pero se lee. */
.comprar-destacado-cifras .comprar-precio-antes {
  color: var(--text-secondary);
}

.comprar-destacado-notatexto {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* El botón del destacado es la acción principal de la zona: se le deja sitio
   pero no se estira a todo lo ancho del panel, que quedaría desproporcionado
   junto a una portada de 92 px. */
.comprar-destacado .comprar-cta {
  align-self: flex-start;
  min-width: 190px;
}

@media (max-width: 900px) {
  .comprar-cabecera {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Apilado, el panel pasa a ocupar todo el ancho y con la portada de 92 px se
     quedaba con media tabla vacía a la derecha. Un cartel más grande y las
     cifras junto al botón lo llenan sin añadir nada nuevo. */
  .comprar-destacado { padding: var(--space-lg); }
  .comprar-destacado-portada { width: 120px; }
  .comprar-destacado-titulo { font-size: var(--text-2xl); }
}

/* ════════════════════════════════════════════════════════════════════════
   2. PESTAÑAS Y FILTROS
   ════════════════════════════════════════════════════════════════════════
   Ellos marcan la plataforma activa con una pastilla rellena de su naranja y
   dejan las demás en texto plano. La misma idea con esquinas rectas: la activa
   se rellena con el acento de su categoría, las otras son un velo. Antes las
   tres eran cajas huecas iguales y la activa solo cambiaba el color del borde:
   había que fijarse para saber dónde estabas. */

.comprar-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.comprar-pestana {
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  line-height: 1;
  padding: 13px var(--space-lg);
  text-decoration: none;
  border: var(--border-width) solid var(--pc-filo);
  background: var(--pc-velo);
  color: var(--text-secondary);
  transition: background var(--pc-salto), border-color var(--pc-salto),
              color var(--pc-salto);
}

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

.comprar-pestana[aria-current="page"] {
  background: var(--tono, var(--accent-games));
  border-color: var(--tono, var(--accent-games));
  color: var(--text-inverse);
  box-shadow: var(--pc-alto-0);
}

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

/* ── Buscador y filtros ───────────────────────────────────────────────────
   Con 80 fichas, bajar buscando un título con el ojo es perder a la gente. El
   filtro actúa sobre lo ya pintado: esconder no cuesta nada y evita volver a
   pedir datos. */

.comprar-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--pc-ritmo-corto);
}

.comprar-buscador {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
}

/* La lupa dentro del campo. Es de ellos: su buscador es un botón redondo con
   la lupa y nada más. Aquí no puede ser un botón —el filtrado es en vivo, no
   hay nada que pulsar—, así que es el icono del campo. */
.comprar-buscador-lupa {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
}

.comprar-buscador .pc-campo {
  padding-left: calc(var(--space-sm) * 2 + 18px);
}

.comprar-buscador .pc-campo:focus {
  border-color: var(--acento-pagina, var(--accent-games));
}

/* El botón de «solo rebajados» encendido: verde, que es el color que en esta
   página significa rebaja. */
.comprar-filtro-btn[aria-pressed="true"] {
  background: var(--pixel-green);
  border-color: var(--pixel-green);
  color: var(--text-inverse);
  box-shadow: var(--pc-alto-0);
}

.comprar-filtro-btn[aria-pressed="true"]:hover {
  background: var(--pixel-green);
  color: var(--text-inverse);
  filter: brightness(1.1);
}

/* Cuántas quedan tras filtrar. Vacío cuando no se está filtrando: un contador
   que siempre dice «80 de 80» es ruido. */
.comprar-filtros-cuenta {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: var(--space-2xs);
}

/* ════════════════════════════════════════════════════════════════════════
   3. SECCIONES
   ════════════════════════════════════════════════════════════════════════ */

.comprar-seccion {
  margin-bottom: var(--pc-ritmo);
}

/* El titular de sección sube de 12 a 14 px y gana un cuadro de acento a la
   izquierda. El suyo mide 31 px sobre 15 de cuerpo —el doble largo— y por eso
   sus secciones se separan solas al bajar. Aquí iba a 12 px, apenas mayor que
   los datos de una ficha, y la página se leía como una lista continua. */
.comprar-seccion-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-pixel);
  font-size: var(--pixel-lg);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 var(--pc-ritmo-corto);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width) solid var(--pc-filo);
}

/* El cuadrito de acento. Un `::before` y no un carácter: no tiene que
   pronunciarlo ningún lector de pantalla. */
.comprar-seccion-titulo::before {
  content: '';
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--acento-pagina, var(--accent-games));
  box-shadow: var(--pc-alto-0);
}

/* El número de la sección, en la misma línea del titular: dice cuánto hay sin
   obligar a contar las fichas. */
.comprar-cuenta {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  line-height: 1;
  padding: 5px 8px;
  background: var(--pc-descuento);
  color: #fff;
  box-shadow: var(--pc-alto-0);
}

.comprar-seccion-ofertas .comprar-seccion-titulo {
  color: var(--pixel-green);
  border-bottom-color: rgba(57, 255, 20, 0.28);
}

.comprar-seccion-ofertas .comprar-seccion-titulo::before {
  background: var(--pixel-green);
}

/* La cuenta de una sección que no es una oferta (por ejemplo, cuántas series
   hay en cada plataforma). Mismo sitio y mismo peso, pero sin el color de
   rebaja: no todo lo que se cuenta es un chollo. */
.comprar-cuenta-neutra {
  background: var(--pc-velo-fuerte);
  color: var(--text-secondary);
  border: 1px solid var(--pc-filo);
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════
   4. LA FICHA
   ════════════════════════════════════════════════════════════════════════
   La caja, el borde y la elevación salen de `.pc-tarjeta`; el marco del arte,
   su recorte y el acercamiento al pasar el ratón, de `.pc-tarjeta-arte`. Aquí
   solo va lo que es propio del escaparate. */

.comprar-ficha {
  --pc-acento: var(--acento);
  /* Con 80 fichas, las de más abajo no necesitan pintarse hasta que se llegue
     a ellas. `contain-intrinsic-size` le da al navegador una altura estimada
     para que la barra de desplazamiento no pegue saltos. Bajó de 620 a 520
     porque la ficha ya no se estira. */
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

/* ── Lo que va sobre la portada ───────────────────────────────────────────
   Tres cosas como mucho, y cada una en su esquina. La cuarta que había —el
   rótulo «Juego» arriba a la izquierda— se ha quitado: dentro de una pestaña
   las 80 fichas son del mismo tipo, así que eran 80 rótulos idénticos ocupando
   la mejor esquina del cartel para no distinguir nada. */

/* La nota, arriba a la derecha. Pasa de verde a amarillo de marca: el verde lo
   necesita el precio, y tener dos verdes distintos a dos centímetros uno del
   otro hacía que ninguno significase nada. */
.comprar-nota {
  top: var(--space-xs);
  right: var(--space-xs);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  line-height: 1;
  padding: 6px 7px;
  background: rgba(10, 10, 15, 0.82);
  color: var(--pc-nota);
  border: 1px solid rgba(255, 214, 10, 0.4);
}

/* La misma nota fuera de una portada (en el destacado). */
.comprar-nota-suelta {
  position: static;
  display: inline-block;
  font-size: var(--pixel-lg);
  padding: 7px 9px;
}

/* «3 jugando»: solo lo llevan 13 de los 80 juegos, así que aquí sí distingue
   de verdad. Arriba a la izquierda, la esquina que ha dejado libre el rótulo
   de tipo. */
.comprar-vivo {
  top: var(--space-xs);
  left: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1;
  padding: 6px 8px;
  background: rgba(10, 10, 15, 0.82);
  color: var(--text-secondary);
  border: 1px solid rgba(57, 255, 20, 0.35);
}

.comprar-vivo b {
  color: var(--pixel-green);
  font-weight: normal;
}

/* ── EL DESCUENTO ─────────────────────────────────────────────────────────
   El gesto más reconocible de su rejilla, y el cambio que más se nota aquí.
   Estaba dentro de la franja del precio, a 8 px, peleándose por 74 px de alto
   con las cifras; ahora está donde ellos lo ponen: pegado a la esquina de
   abajo a la izquierda de la portada, sin margen, grande.

   Y en magenta de marca, no en el rojo suelto de antes (#ff3333, un color de
   error haciendo de oferta). Ellos usan su naranja de marca para esto mismo:
   el descuento merece el color de la casa. */

.comprar-descuento {
  left: 0;
  bottom: 0;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  line-height: 1;
  padding: 8px 10px;
  background: var(--pc-descuento);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
  box-shadow: var(--pc-alto-0);
}

/* ── La regleta del precio ────────────────────────────────────────────────
   Franja pegada bajo la portada. Como la portada mide siempre 2:3, la regleta
   cae a la misma altura en toda la fila y los precios se pueden comparar
   bajando la vista. Eso es lo que separa un escaparate de una lista.

   El precio de ahora manda: es lo mayor de la ficha después del cartel, y su
   proporción con el título es la que usan ellos —1,4 veces. */

.comprar-regleta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--pc-capa-1);
  border-top: var(--border-width) solid var(--pc-filo);
}

/* Con rebaja se tiñe la franja entera: un distintivo pequeño se pierde entre
   80 portadas, una banda no. El tinte es del magenta del descuento, para que
   la franja y el rótulo de arriba sean obviamente la misma noticia. */
.comprar-regleta-oferta {
  background: rgba(247, 37, 133, 0.14);
  border-top-color: var(--pc-descuento);
}

.comprar-cifras {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* El precio de ahora va PRIMERO y el tachado detrás. Al revés —como estaba—
   lo primero que leía el ojo bajando por la columna era el precio viejo. */
.comprar-precio-ahora {
  font-family: var(--font-pixel);
  font-size: var(--pixel-lg);
  line-height: 1;
  color: var(--text-primary);
  /* Sombra DURA, sin difuminar: es lo que hace que el número parezca de
     marcador de recreativa. Un desenfoque aquí rompe el pixel art. */
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);
  font-variant-numeric: tabular-nums;
}

/* Verde SOLO cuando hay rebaja. Antes iban en verde los 61 precios de la
   página, así que el verde no decía nada; ahora significa «esto está rebajado»
   y se puede localizar una oferta sin leer una sola cifra. */
.comprar-regleta-oferta .comprar-precio-ahora {
  color: var(--pc-precio-rebaja);
}

.comprar-precio-antes {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pc-descuento);
  font-variant-numeric: tabular-nums;
}

/* Mismo motivo que en el destacado: sobre la franja teñida de magenta el
   gris de --text-muted baja a 4.21:1 (AA pide 4.5). Un escalón arriba mide
   4.59:1 sin dejar de ser secundario. */
.comprar-regleta-oferta .comprar-precio-antes,
.comprar-regleta-oferta .comprar-fuente {
  color: var(--text-secondary);
}

/* De qué tienda es el precio y cuándo se miró. Sin fecha, un precio no se
   puede juzgar. */
.comprar-fuente {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* El hueco honesto: 19 de 80 juegos no tienen precio comprobable, y decirlo
   vale más que dejar la franja muda o inventar un guion. */
.comprar-sinprecio {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* ── El cuerpo ────────────────────────────────────────────────────────────
   Título, datos y botón, apretados. Antes esto llevaba un `gap` general y el
   pie empujado al fondo con `margin-top: auto`, y como la rejilla estiraba
   todas las fichas a la altura de la más alta, las 72 sin cita de creador
   quedaban con más de 100 px de nada en medio. Ahora cada distancia se pone
   donde toca y la ficha mide lo que ocupa. */

.comprar-cuerpo {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
}

.comprar-titulo {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  /* Hueco fijo de dos líneas: «Celeste» y «Red Dead Redemption 2» tienen que
     dejar el resto de la ficha a la misma altura. Lo que pase de dos líneas se
     corta con puntos suspensivos en vez de estirar la ficha. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--text-lg) * 1.15 * 2);
}

.comprar-meta {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--text-muted);
  margin: var(--space-2xs) 0 0;
  /* Una línea y punto. «2020 · Acción · 1 creador» se partía en dos y bajaba
     el botón de esa ficha 24 px respecto a las cuatro de su fila: un
     desnivel que no aporta nada y que se ve enseguida. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El número de creadores, dentro de la línea de datos: informa sin ocupar una
   fila propia. Usa el acento de TEXTO, no el de marca (ver FichaComprar.js). */
.comprar-meta b {
  color: var(--acento-texto);
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}

/* ── La voz del creador ───────────────────────────────────────────────────
   Solo la tienen 8 de 80. Cuando está, es lo mejor que hay en la ficha, así
   que se queda; lo que ya no hace es obligar a las otras 72 a crecer. */

/* Compacta a propósito: sin caja de fondo y con poco relleno. Como no todas
   las fichas la llevan, cada píxel que ocupa es un píxel de desnivel con sus
   vecinas de fila. Leída como una línea entrecomillada —y no como un panel
   dentro de la tarjeta— el desnivel baja de 85 a unos 55 px y la fila vuelve
   a parecer una fila. */
.comprar-cita {
  margin: var(--space-xs) 0 0;
  padding: 0 0 0 var(--space-xs);
  border-left: var(--border-pixel) solid var(--acento);
}

.comprar-cita p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comprar-cita cite {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: normal;
}

/* ── El pie: un botón y una línea ─────────────────────────────────────────
   Antes eran tres botones por ficha —240 en la página de juegos, todos en
   tipografía de píxeles. Manda uno y los otros bajan a texto: siguen ahí para
   quien los quiera, sin pelearse por la atención. */

.comprar-pie {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.comprar-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-pixel);
  line-height: 1.4;
  padding: 9px var(--space-xs);
  border: var(--border-width) solid var(--acento, var(--accent-games));
  background: var(--acento, var(--accent-games));
  color: var(--text-inverse);
  box-shadow: var(--pc-alto-0);
  transition: transform var(--pc-salto), box-shadow var(--pc-salto),
              filter var(--pc-salto);
}

.comprar-cta-verbo {
  display: block;
  font-size: var(--pixel-xs);
  opacity: 0.72;
}

.comprar-cta-tienda {
  display: block;
  font-size: var(--pixel-sm);
  /* En su propia línea para que «Instant Gaming» no se parta por donde le
     apetezca cuando la ficha baja a 150 px en móvil. */
  overflow-wrap: break-word;
}

/* Se hunde al pulsar, como la tecla de una recreativa: sale de la sombra y
   vuelve. Es la microinteracción que su web NO tiene y que aquí sí toca. */
.comprar-cta:hover,
.comprar-cta:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--pc-alto-2);
  filter: brightness(1.1);
}

.comprar-cta:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

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

/* Las demás tiendas, como texto. Son las que más fácil se pierden al tabular,
   así que su foco también se ve. */
.comprar-tambien {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.comprar-tambien span { opacity: 0.8; }

.comprar-tambien a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.comprar-tambien a:hover { color: var(--acento-texto); }

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

/* ════════════════════════════════════════════════════════════════════════
   5. AVISOS, VACÍOS Y EL BOTÓN DE «VER MÁS»
   ════════════════════════════════════════════════════════════════════════ */

/* El aviso de afiliación es obligatorio en cuanto haya comisión, y por eso
   vive pegado al escaparate y no escondido en el pie: la ley pide que se vea
   junto a los enlaces. */
.comprar-aviso {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin: 0 0 var(--pc-ritmo-corto);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--pc-filo);
  border-left: var(--border-pixel) solid var(--accent-series);
  background: rgba(255, 214, 10, 0.05);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.comprar-aviso a { color: var(--accent-series); }

.comprar-vacio {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-muted);
  padding: var(--space-2xl) 0;
  text-align: center;
}

/* El botón que revela el resto de una sección larga. Ancho completo: es un
   final de lista, no una acción más que compita con los botones de compra de
   las fichas. */
.comprar-vermas {
  display: flex;
  width: 100%;
  margin-top: var(--pc-ritmo-corto);
}

/* ── El [hidden] tiene que ganar ──────────────────────────────────────────
   ESTO NO ES UN DETALLE. `.comprar-ficha` declara `display: flex` (a través de
   `.pc-tarjeta`), y una regla de autor gana siempre al `display: none` que el
   navegador aplica a `[hidden]` desde su hoja de estilos. Resultado: el
   buscador marcaba las fichas como ocultas, el contador decía «1 de 80»… y las
   ochenta seguían viéndose en pantalla.

   `sistema.css` ya lleva un `[hidden] { display: none !important }` general;
   esto se queda por si algún día esa hoja no está. */
.comprar-ficha[hidden],
.comprar-seccion[hidden],
.comprar-vermas[hidden] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   6. MÓVIL
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .comprar-destacado { padding: var(--space-md); }
  .comprar-destacado-portada { width: 84px; }
  .comprar-destacado-titulo { font-size: var(--text-xl); }

  /* Las tres pestañas se reparten el ancho: en móvil un objetivo táctil que
     mide lo que su palabra deja «Series» mucho más pequeño que «Películas». */
  .comprar-pestana {
    flex: 1;
    text-align: center;
    padding: 13px var(--space-xs);
  }

  .comprar-buscador { max-width: none; }

  /* A dos columnas de 150 px no cabe el verbo encima del nombre de la tienda
     sin que el botón mida tres líneas: se aprieta el interlineado. */
  .comprar-cta { padding: 8px 6px; line-height: 1.3; }

  .comprar-regleta { min-height: 58px; padding: var(--space-xs); }

  /* ── Las cifras, a la medida de una columna de 173 px ────────────────────
     A dos columnas en un móvil de 390 px la ficha mide 173 px, y con el
     precio a 14 px de tipografía de píxeles «14,99 € 59,99 €» no cabe en una
     línea: el tachado se iba abajo, la regleta de esa ficha crecía y el
     precio de su vecina quedaba a otra altura. Justo lo que la regleta existe
     para evitar. Un escalón menos en cada cifra y vuelven a caber. */
  .comprar-precio-ahora { font-size: var(--pixel-base); }
  .comprar-precio-antes { font-size: var(--text-sm); }

  /* El título también baja un escalón: a 24 px, «Hogwarts Legacy» ya ocupaba
     las dos líneas que hay reservadas y cualquier título mediano se cortaba. */
  .comprar-titulo {
    font-size: var(--text-base);
    min-height: calc(var(--text-base) * 1.15 * 2);
  }

  .comprar-cuerpo { padding: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .comprar-cta, .comprar-pestana { transition: none; }
  .comprar-cta:hover, .comprar-cta:active { transform: none; }
}