/* ============================================================
   CATÁLOGO Y OFERTAS — rediseño con el header nuevo (octubre 2026)
   Lo cargan catalogo.html y promociones.html DESPUÉS de styles.css.
   Filtros compartidos (barra de consola + panel "Filtrar y ordenar"): js/filtros-ui.js (clases pxf-*).
   Mantiene los nombres de clase que generan js/filters.js y js/promociones.js (psc-*, pso-*) y los
   redefine con tokens de la Home. Reglas de accesibilidad de esta hoja:
     · texto >= 4.5:1 sobre su fondo (3:1 el grande)
     · controles táctiles >= 44px de alto en celular (>= 40px en escritorio)
     · foco visible y sin depender solo del color
   ============================================================ */
body.has-header-px {
  --cx-bg: #060a18;
  --cx-surface: #0d1428;
  --cx-surface-2: #111a33;
  --cx-border: rgba(139, 92, 246, 0.24);
  --cx-border-strong: rgba(167, 139, 250, 0.55);
  --cx-text: #eef1fb;
  --cx-muted: #aab8dc;
  --cx-violet: #7c3aed;
  --cx-violet-2: #8b5cf6;
  --cx-focus: #c4b5fd;
  --cx-ok: #6ee7b7;
  --cx-warn: #fcd34d;
  --cx-sale: #be123c;
}

/* ── Contenedor ─────────────────────────────────────────────── */
body.has-header-px .psc-layout,
body.has-header-px .pso-layout {
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 28px 32px 88px;
  background: transparent; min-height: 0;
  display: block;
}
body.has-header-px .psc-layout a:focus-visible,
body.has-header-px .psc-layout button:focus-visible,
body.has-header-px .psc-layout select:focus-visible,
body.has-header-px .psc-layout input:focus-visible,
body.has-header-px .pso-layout a:focus-visible,
body.has-header-px .pso-layout button:focus-visible,
body.has-header-px .pso-layout select:focus-visible,
body.has-header-px .pso-layout input:focus-visible,
body.has-header-px .catalog-quickview a:focus-visible,
body.has-header-px .catalog-quickview button:focus-visible {
  outline: 2px solid var(--cx-focus); outline-offset: 3px;
}

/* ── Encabezado del catálogo ────────────────────────────────── */
body.has-header-px .psc-layout .psc-header {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  padding: 0; margin: 0 0 22px; background: none; border: 0; border-radius: 0;
  position: static; box-shadow: none; min-height: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.has-header-px .psc-header-left { display: grid; gap: 6px; min-width: 0; }
body.has-header-px .psc-layout .psc-kicker, body.has-header-px .pso-layout .psc-kicker {
  margin: 0; font: 700 0.82rem "Oxanium", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #b9a6ff;
}
body.has-header-px .psc-layout .psc-header-title {
  margin: 0; font: 700 clamp(1.9rem, 3.6vw, 2.6rem)/1.1 "Oxanium", sans-serif; color: #fff; letter-spacing: 0;
}
body.has-header-px .psc-header-sub {
  margin: 0; max-width: 62ch; color: var(--cx-muted); font: 500 1.1rem/1.45 "Rajdhani", sans-serif;
}
body.has-header-px .psc-header-count, body.has-header-px #psc-count-label {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(124, 58, 237, 0.16); border: 1px solid var(--cx-border);
  color: #e3dcff; font: 700 0.98rem "Rajdhani", sans-serif; white-space: nowrap;
}

/* ── Barra de herramientas: consola + "Filtrar y ordenar" (+ atajos) ──────────
   Celular: arriba la consola (segmentada) y el botón; abajo los atajos deslizables.
   Compu: todo en una sola fila dentro de una tarjeta fija arriba. */
body.has-header-px .pxf-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 0;
}
@media (min-width: 768px) {
  body.has-header-px .pxf-bar {
    flex-wrap: nowrap; gap: 12px; padding: 10px 12px; margin: 0 0 16px; border-radius: 16px;
    background: rgba(13, 20, 40, 0.94); border: 1px solid var(--cx-border);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}
@media (min-width: 1024px) {
  body.has-header-px .pxf-bar { position: sticky; top: calc(var(--pxh-h, 72px) + 10px); z-index: 30; }
}

/* Chips (consola, tipo de cuenta, géneros, atajos) */
body.has-header-px .psc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.has-header-px .psc-chip,
body.has-header-px .pso-quick-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--cx-border); color: #dfe4ff;
  font: 600 1rem "Rajdhani", sans-serif; letter-spacing: 0.01em; text-transform: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
body.has-header-px .psc-chip:hover, body.has-header-px .pso-quick-chip:hover {
  background: rgba(124, 58, 237, 0.22); border-color: var(--cx-border-strong); color: #fff;
}
body.has-header-px .psc-chip.is-active, body.has-header-px .pso-quick-chip.is-active {
  background: var(--cx-violet); border-color: var(--cx-violet); color: #fff; box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}
body.has-header-px .pso-quick-chip[hidden] { display: none; }

/* Selector de consola segmentado (Todas / PS5 / PS4 / PS Plus) */
body.has-header-px .psc-chips.pxf-seg {
  flex: 1 1 auto; min-width: max-content; flex-wrap: nowrap; gap: 2px; padding: 3px; margin: 0; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--cx-border);
}
body.has-header-px .pxf-seg .psc-chip {
  flex: 1 1 0; min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: #dfe4ff;
}
body.has-header-px .pxf-seg .psc-chip:hover { background: rgba(124, 58, 237, 0.22); }
body.has-header-px .pxf-seg .psc-chip.is-active { background: var(--cx-violet); color: #fff; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4); }
@media (min-width: 768px) {
  body.has-header-px .psc-chips.pxf-seg { flex: 0 0 auto; }
  body.has-header-px .pxf-seg .psc-chip { flex: 0 0 auto; min-width: 64px; padding: 0 18px; }
}

/* Botón "Filtrar y ordenar" con el número de filtros aplicados */
body.has-header-px .psc-filter-toggle-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto;
  height: 52px; padding: 0 14px; border-radius: 14px; cursor: pointer; position: relative; white-space: nowrap;
  background: rgba(124, 58, 237, 0.2); border: 1px solid var(--cx-border-strong); color: #fff;
  font: 700 1rem "Rajdhani", sans-serif;
}
body.has-header-px .psc-filter-toggle-btn:hover { background: rgba(124, 58, 237, 0.34); }
body.has-header-px .psc-filter-toggle-btn svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
body.has-header-px .pxf-open-short { display: none; }
@media (max-width: 379.98px) {
  body.has-header-px .pxf-open-txt { display: none; }
  body.has-header-px .pxf-open-short { display: inline; }
}
body.has-header-px .psc-active-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #fff; color: #3b1d8a; font: 700 0.82rem "Oxanium", sans-serif; position: absolute; top: -8px; right: -6px; transform: none;
  box-shadow: 0 0 0 2px #060a18;
}
body.has-header-px .psc-active-badge[hidden] { display: none; }
@media (min-width: 768px) {
  body.has-header-px .psc-filter-toggle-btn { flex: 0 0 auto; height: 48px; padding: 0 18px; order: 3; margin-left: auto; }
}

/* Atajos: una fila deslizable (celular: debajo de la consola; compu: entre la consola y el botón) */
body.has-header-px .pxf-shortcuts {
  order: 3; flex: 0 0 100%; display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px;
}
body.has-header-px .pxf-shortcuts::-webkit-scrollbar { display: none; }
body.has-header-px .pxf-shortcuts[hidden] { display: none; }
@media (min-width: 768px) {
  body.has-header-px .pxf-shortcuts { order: 2; flex: 1 1 auto; margin: 0; }
}


/* ── Resultados: conteo y vista ─────────────────────────────── */
body.has-header-px .psc-main { padding: 0; min-width: 0; flex: none; }
body.has-header-px .psc-body { display: block; }
body.has-header-px .psc-toolbar, body.has-header-px .pso-sticky-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 0; flex-wrap: wrap; position: static; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.has-header-px .psc-result-count { color: var(--cx-muted); font: 600 1.02rem "Rajdhani", sans-serif; }
body.has-header-px .psc-view-toggle { display: inline-flex; gap: 6px; }
body.has-header-px .psc-view-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--cx-border); color: #dfe4ff; font-size: 1.25rem; line-height: 1;
}
body.has-header-px .psc-view-btn:hover { border-color: var(--cx-border-strong); color: #fff; }
body.has-header-px .psc-view-btn.is-active { background: var(--cx-violet); border-color: var(--cx-violet); color: #fff; }

/* Filtros activos (chips con ×) */
body.has-header-px .psc-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
body.has-header-px .psc-active-filters[hidden] { display: none; }
body.has-header-px .psc-active-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: rgba(124, 58, 237, 0.2); border: 1px solid var(--cx-border-strong); color: #fff; font: 600 1rem "Rajdhani", sans-serif;
}
body.has-header-px .psc-active-chip:hover { background: rgba(124, 58, 237, 0.34); }
body.has-header-px .psc-active-chip span { font-size: 1.3rem; line-height: 1; color: #d8ccff; }
body.has-header-px .psc-active-chip--all { background: transparent; border-color: var(--cx-border); color: #dfe4ff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Grilla y tarjetas ──────────────────────────────────────── */
body.has-header-px .psc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 20px; margin: 0 0 36px; }
body.has-header-px .psc-grid .psc-card, body.has-header-px .psc-layout .psc-card, body.has-header-px .pso-layout .psc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: var(--cx-surface); border: 1px solid var(--cx-border); box-shadow: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
body.has-header-px .psc-layout .psc-card:hover, body.has-header-px .pso-layout .psc-card:hover {
  border-color: var(--cx-border-strong); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
body.has-header-px .psc-layout .psc-card .psc-card-link, body.has-header-px .pso-layout .psc-card .psc-card-link {
  display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none;
}
body.has-header-px .psc-layout .psc-card .psc-card-thumb, body.has-header-px .pso-layout .psc-card .psc-card-thumb { position: relative; }
body.has-header-px .psc-layout .psc-card .psc-card-body, body.has-header-px .pso-layout .psc-card .psc-card-body {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; flex: 1;
}
body.has-header-px .psc-layout .psc-card .psc-card-platform, body.has-header-px .pso-layout .psc-card .psc-card-platform {
  margin: 0; color: var(--cx-muted); font: 700 0.84rem "Oxanium", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
body.has-header-px .psc-layout .psc-card .psc-card-name, body.has-header-px .pso-layout .psc-card .psc-card-name {
  margin: 0; color: #fff; font: 700 1.08rem/1.25 "Oxanium", sans-serif; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.has-header-px .psc-layout .psc-card .psc-card-price { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; background: none; border: 0; }
body.has-header-px .psc-layout .psc-card .psc-card-price > span, body.has-header-px .pso-layout .psc-card .pso-price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(139, 92, 246, 0.16);
}
body.has-header-px .psc-price-label {
  color: var(--cx-muted); font: 700 0.8rem "Oxanium", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
body.has-header-px .psc-price-amount, body.has-header-px .pso-price-value {
  color: #fff; font: 700 1.14rem "Oxanium", sans-serif;
}
body.has-header-px .psc-layout .psc-card .psc-card-price > span > strong, body.has-header-px .psc-layout .psc-card .psc-card-price > span:nth-child(2) > strong { color: var(--cx-muted); }
body.has-header-px .psc-price-consult { color: var(--cx-muted); font: 600 1rem "Rajdhani", sans-serif; }
body.has-header-px .psc-card-price--consult { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); }
body.has-header-px .psc-card-coins { margin: 6px 0 0; }

/* Etiquetas sobre la portada */
body.has-header-px .psc-card .psc-badge {
  position: absolute; bottom: 10px; left: 10px; top: auto; right: auto; z-index: 2;
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font: 700 0.8rem "Oxanium", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(6, 10, 24, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.has-header-px .psc-card .psc-badge--avail { color: var(--cx-ok); border: 1px solid rgba(110, 231, 183, 0.55); }
body.has-header-px .psc-card .psc-badge--pause { color: var(--cx-warn); border: 1px solid rgba(252, 211, 77, 0.55); }
body.has-header-px .psc-card .psc-badge--offer { color: #fff; background: var(--cx-sale); border: 1px solid rgba(255, 255, 255, 0.25); }
body.has-header-px .psc-card .psc-card-fav {
  position: absolute; top: 6px; right: 6px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; background: rgba(6, 10, 24, 0.78); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; font-size: 1.25rem; line-height: 1; padding: 0;
}
body.has-header-px .psc-card .psc-card-fav:hover { border-color: var(--cx-border-strong); }
body.has-header-px .psc-card .psc-card-fav.is-active { color: #ff7a9c; border-color: rgba(255, 122, 156, 0.7); }

/* Tarjetas de ofertas */
body.has-header-px .pso-badge-stack { position: absolute; top: 10px; left: 10px; right: 56px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
body.has-header-px .pso-sale-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px;
  background: rgba(6, 10, 24, 0.88); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
  font: 700 0.76rem "Oxanium", sans-serif; letter-spacing: 0.06em;
}
body.has-header-px .pso-sale-badge:first-child { background: var(--cx-sale); border-color: rgba(255, 255, 255, 0.25); }
body.has-header-px .pso-discount-pill {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--cx-sale); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); font: 700 0.98rem "Oxanium", sans-serif;
}
body.has-header-px .pso-urgency { margin: 0; color: #fda4af; font: 700 0.84rem/1.25 "Oxanium", sans-serif; letter-spacing: 0.01em; text-transform: none; } /* cierre real de la oferta ("Termina hoy a las 23:59"): en minúsculas se lee mejor y entra en una línea */
body.has-header-px .pso-price-value-group { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
body.has-header-px .pso-price-before { color: #9aa8c9; font: 500 0.88rem "Rajdhani", sans-serif; text-decoration: line-through; }
body.has-header-px .pso-availability { margin: 2px 0 0; font: 700 0.9rem "Rajdhani", sans-serif; }
body.has-header-px .pso-availability.is-ok { color: var(--cx-ok); }
body.has-header-px .pso-availability.is-off { color: var(--cx-warn); }

/* Vista compacta: lista de filas (miniatura a la izquierda, nombre y precios en una línea) */
body.has-header-px .psc-grid--compact { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 10px; }
body.has-header-px .psc-grid--compact .psc-card { flex-direction: row; align-items: stretch; min-height: 84px; max-height: none; contain: none; border-radius: 14px; }
body.has-header-px .psc-grid--compact .psc-card:hover { transform: none; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-link { flex-direction: row; align-items: stretch; flex: 1; min-width: 0; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-thumb { width: 84px; height: auto; flex: none; aspect-ratio: auto; border-radius: 0; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-body { flex-direction: row; align-items: center; gap: 14px; padding: 10px 60px 10px 14px; overflow: hidden; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-platform,
body.has-header-px .psc-grid--compact .psc-card .psc-badge,
body.has-header-px .psc-grid--compact .psc-card .psc-card-coins,
body.has-header-px .psc-grid--compact .psc-card .pso-badge-stack,
body.has-header-px .psc-grid--compact .psc-card .pso-urgency,
body.has-header-px .psc-grid--compact .psc-card .pso-availability { display: none; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-name { flex: 1; min-width: 0; min-height: 0; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 1.02rem; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-price { display: flex; flex: none; gap: 8px; margin: 0; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-price > span, body.has-header-px .psc-grid--compact .pso-card .pso-price-row { padding: 5px 9px; flex-wrap: nowrap; }
body.has-header-px .psc-grid--compact .psc-card .psc-card-fav { top: 50%; right: 10px; transform: translateY(-50%); }
body.has-header-px .psc-grid--compact .pso-discount-pill { right: 6px; bottom: 6px; min-height: 22px; padding: 0 8px; font-size: 0.8rem; }

/* Estados vacíos y carga */
body.has-header-px .psc-empty, body.has-header-px .promo-empty-state {
  grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; border-radius: 16px;
  background: var(--cx-surface); border: 1px dashed var(--cx-border-strong); color: var(--cx-muted); font: 500 1.1rem/1.4 "Rajdhani", sans-serif;
}
body.has-header-px .promo-empty-state[hidden] { display: none; }
body.has-header-px .promo-empty-state h3 { margin: 0; color: #fff; font: 700 1.3rem "Oxanium", sans-serif; }
body.has-header-px .promo-empty-state p { margin: 0; }
body.has-header-px .psc-empty-link { color: #c4b5fd; text-decoration: underline; }
body.has-header-px .psc-empty-clear, body.has-header-px .promo-empty-btn {
  min-height: 44px; padding: 0 20px; border-radius: 12px; cursor: pointer;
  background: var(--cx-violet); border: 0; color: #fff; font: 700 1rem "Rajdhani", sans-serif;
}

/* ── Paginación ─────────────────────────────────────────────── */
body.has-header-px .psc-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
body.has-header-px .psc-pagination[hidden] { display: none; }
body.has-header-px .psc-page-numbers { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
body.has-header-px .psc-page-btn, body.has-header-px .psc-page-num {
  min-width: 44px; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--cx-border); color: #eef1fb;
  font: 700 1rem "Rajdhani", sans-serif;
}
body.has-header-px .psc-page-btn:hover:not(:disabled), body.has-header-px .psc-page-num:hover { border-color: var(--cx-border-strong); background: rgba(124, 58, 237, 0.22); }
body.has-header-px .psc-page-num.is-active { background: var(--cx-violet); border-color: var(--cx-violet); color: #fff; }
body.has-header-px .psc-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
body.has-header-px .psc-page-ellipsis { color: var(--cx-muted); padding: 0 4px; }
body.has-header-px .psc-page-btn .px-icon { width: 16px; height: 16px; display: inline-flex; }
body.has-header-px .psc-page-btn .px-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Panel "Filtrar y ordenar": hoja inferior en celular, panel lateral en compu ───────────── */
body.has-header-px .psc-sidebar.pxf-panel {
  position: fixed; z-index: 9100; top: auto; right: 0; bottom: 0; left: 0; width: auto; height: auto;
  max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: #0b1226; border: 1px solid var(--cx-border-strong); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translateY(105%); visibility: hidden; pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.2, 1), visibility 0s linear 0.3s;
}
body.has-header-px .psc-sidebar.pxf-panel.is-open {
  transform: none; visibility: visible; pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.2, 1), visibility 0s;
}
body.has-header-px .psc-overlay { display: block; position: fixed; inset: 0; background: rgba(2, 4, 10, 0.6); z-index: 9090; }
body.has-header-px .psc-overlay[hidden] { display: none; }
@media (min-width: 768px) {
  body.has-header-px .psc-sidebar.pxf-panel {
    top: 0; left: auto; right: 0; bottom: 0; width: min(420px, 92vw); height: 100vh; height: 100dvh; max-height: none;
    border: 0; border-left: 1px solid var(--cx-border-strong); border-radius: 0; box-shadow: -24px 0 64px rgba(0, 0, 0, 0.6);
    transform: translateX(105%);
  }
}
body.has-header-px .pxf-panel-head {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 14px 12px 20px; border-bottom: 1px solid var(--cx-border);
}
/* Agarradera de la hoja (solo decorativa, en celular) */
body.has-header-px .pxf-panel-head::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255, 255, 255, 0.22);
}
@media (min-width: 768px) {
  body.has-header-px .pxf-panel-head { padding-top: 14px; }
  body.has-header-px .pxf-panel-head::before { display: none; }
}
body.has-header-px .pxf-panel-title { margin: 0; color: #fff; font: 700 1.3rem/1.2 "Oxanium", sans-serif; letter-spacing: 0; outline: none; }
body.has-header-px .pxf-panel .psc-sidebar-close {
  position: static; flex: 0 0 auto; width: 44px; height: 44px; display: inline-grid !important; place-items: center; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--cx-border); color: #fff; font-size: 1.4rem; line-height: 1; transform: none;
}
body.has-header-px .pxf-panel .psc-sidebar-close:hover { border-color: var(--cx-border-strong); transform: none; }
body.has-header-px .pxf-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 6px; }
body.has-header-px .pxf-panel .psc-filter-group { animation: none; }
body.has-header-px .pxf-panel-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #0b1226; border-top: 1px solid var(--cx-border);
}
body.has-header-px .psc-clear-btn {
  flex: 0 0 auto; min-height: 48px; padding: 0 18px; border-radius: 12px; cursor: pointer; background: transparent; border: 1px solid var(--cx-border);
  color: #dfe4ff; font: 700 1rem "Rajdhani", sans-serif;
}
body.has-header-px .psc-clear-btn:hover { border-color: var(--cx-border-strong); color: #fff; }
body.has-header-px .pxf-apply {
  flex: 1 1 auto; min-height: 48px; padding: 0 18px; border-radius: 12px; cursor: pointer; background: var(--cx-violet); border: 0; color: #fff;
  font: 700 1.05rem "Rajdhani", sans-serif;
}
body.has-header-px .pxf-apply:hover { background: var(--cx-violet-2); }
body.has-header-px .psc-sort-select {
  width: 100%; min-width: 0; height: 48px; padding: 0 38px 0 14px; border-radius: 12px; cursor: pointer;
  background-color: rgba(255, 255, 255, 0.06); border: 1px solid var(--cx-border); color: var(--cx-text);
  font: 600 1rem "Rajdhani", sans-serif; color-scheme: dark;
}
body.has-header-px .psc-sort-select option { background: #0d1428; color: #eef1fb; }
/* Géneros: los más usados a la vista; el resto aparece con "Ver todos los géneros" */
body.has-header-px .pxf-generos:not(.is-expanded) .pxf-extra { display: none; }
body.has-header-px .pxf-more {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 4px; cursor: pointer;
  background: none; border: 0; color: #c4b5fd; font: 700 1rem "Rajdhani", sans-serif; text-decoration: underline; text-underline-offset: 3px;
}
body.has-header-px .pxf-more[hidden] { display: none; }
body.has-header-px .psc-filter-group { margin: 0 0 20px; }
body.has-header-px .psc-filter-label {
  display: block; margin: 0 0 10px; color: #cfd8f3; font: 700 0.9rem "Oxanium", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
body.has-header-px .psc-filter-label strong { color: #fff; }
body.has-header-px .psc-range { width: 100%; accent-color: #8b5cf6; height: 44px; margin: 0; cursor: pointer; }
body.has-header-px .psc-range-labels { display: flex; justify-content: space-between; color: var(--cx-muted); font: 600 0.92rem "Rajdhani", sans-serif; }
body.has-header-px .pso-toggle-list { display: grid; gap: 8px; }
body.has-header-px .pso-toggle {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--cx-border); color: #eef1fb; font: 600 1rem "Rajdhani", sans-serif;
}
/* El <input> real cubre toda la fila (área táctil completa) y la casilla se dibuja aparte */
body.has-header-px .pso-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
body.has-header-px .pso-toggle span::before {
  content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 12px; vertical-align: -4px; border-radius: 6px;
  border: 2px solid #8b95b8; background: transparent; transition: background 0.12s, border-color 0.12s;
}
body.has-header-px .pso-toggle input:checked + span::before {
  background: var(--cx-violet-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--cx-violet-2);
}
body.has-header-px .pso-toggle:has(input:checked) { border-color: var(--cx-border-strong); background: rgba(124, 58, 237, 0.2); }
body.has-header-px .pso-toggle:has(input:focus-visible) { outline: 2px solid var(--cx-focus); outline-offset: 2px; }

/* ── Ofertas: encabezado compacto (título, cuántas hay y cuándo terminan) ───────────────────── */
body.has-header-px .pso-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2px 24px; margin: 0 0 14px;
}
body.has-header-px .pso-head-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
body.has-header-px .pso-head h1 { margin: 0; color: #fff; font: 700 clamp(1.7rem, 3.2vw, 2.4rem)/1.1 "Oxanium", sans-serif; letter-spacing: 0; }
body.has-header-px .pso-head-count { color: var(--cx-muted); font: 600 1.1rem "Rajdhani", sans-serif; }
body.has-header-px .pso-head-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 18px; }
body.has-header-px .pso-cierre { color: #fda4af; font: 700 1.02rem "Rajdhani", sans-serif; letter-spacing: 0.01em; }
body.has-header-px .pso-cierre[hidden] { display: none; }
body.has-header-px .pso-head-link {
  display: inline-flex; align-items: center; min-height: 44px; color: #c4b5fd; font: 700 1rem "Rajdhani", sans-serif;
  text-decoration: underline; text-underline-offset: 3px;
}
body.has-header-px .pso-head-link:hover { color: #fff; }

/* ── Vista PS Plus (Catálogo): son pocos planes, sin orden, filtros, lista ni chips ───────────── */
body.has-header-px .is-psplus .psc-filter-toggle-btn,
body.has-header-px .is-psplus .psc-toolbar { display: none !important; }
@media (min-width: 768px) {
  body.has-header-px .is-psplus .pxf-bar { width: fit-content; max-width: 100%; }
}

/* ── Vista rápida ───────────────────────────────────────────── */
body.has-header-px .catalog-quickview-dialog { border-radius: 20px; background: #0b1226; border: 1px solid var(--cx-border-strong); }
body.has-header-px .catalog-quickview-close {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--cx-border); color: #fff; font-size: 1.5rem; line-height: 1;
}
body.has-header-px .catalog-quickview .psc-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 12px; text-decoration: none;
  background: var(--cx-violet); color: #fff; font: 700 1.02rem "Rajdhani", sans-serif;
}
body.has-header-px .catalog-quickview .psc-btn-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--cx-border); color: #fff; font-size: 1.25rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
  body.has-header-px .psc-layout, body.has-header-px .pso-layout { padding: 20px 20px 72px; }
}
@media (max-width: 767.98px) {
  body.has-header-px .psc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* En celular queda siempre la grilla: sin selector de vista ni "ver todo el catálogo" suelto en el encabezado */
  body.has-header-px .psc-view-toggle, body.has-header-px .pso-head-link { display: none; }
  body.has-header-px .psc-toolbar, body.has-header-px .pso-sticky-toolbar { min-height: 0; padding: 0; margin-bottom: 10px; }
}
@media (max-width: 640px) {
  body.has-header-px .psc-layout, body.has-header-px .pso-layout { padding: 14px 14px 56px; }
  body.has-header-px .psc-layout .psc-header { margin-bottom: 16px; }
  body.has-header-px .psc-header-sub { font-size: 1.04rem; }
  body.has-header-px .psc-chip, body.has-header-px .pso-quick-chip { min-height: 44px; }
  body.has-header-px .pxf-seg .psc-chip { min-height: 44px; }
  body.has-header-px .psc-layout .psc-card .psc-card-body, body.has-header-px .pso-layout .psc-card .psc-card-body { padding: 10px 10px 12px; }
  body.has-header-px .psc-layout .psc-card .psc-card-name, body.has-header-px .pso-layout .psc-card .psc-card-name { font-size: 0.98rem; }
  body.has-header-px .psc-price-amount, body.has-header-px .pso-price-value { font-size: 1.02rem; }
  body.has-header-px .psc-layout .psc-card .psc-card-price > span, body.has-header-px .pso-layout .psc-card .pso-price-row { padding: 6px 8px; flex-wrap: wrap; gap: 2px 8px; }

  /* Celular: encabezado compacto para ver productos en la primera pantalla (título + dato clave, sin párrafos). */
  body.has-header-px .psc-layout .psc-header { flex-wrap: nowrap; align-items: center; margin-bottom: 12px; gap: 8px 12px; }
  body.has-header-px .psc-layout .psc-kicker,
  body.has-header-px .psc-layout .psc-header-sub { display: none; }
  body.has-header-px .psc-layout .psc-header-title { font-size: 1.7rem; }
  body.has-header-px .psc-header-count, body.has-header-px #psc-count-label { min-height: 36px; padding: 0 12px; font-size: 0.95rem; }
}
/* ── Celular: tarjetas compactas (catálogo y ofertas) ───────────
   2 columnas a 360–430 px sin perder información: portada baja, plataforma + disponibilidad en una
   sola línea, título a 2 líneas y una única caja de precios con filas Primaria / Secundaria
   (precio de referencia tachado debajo de la etiqueta). Escritorio no cambia.
   Las clases pso-* / psc-* las generan js/promociones.js y js/filters.js. */
body.has-header-px .psc-card-avail { display: none; } /* solo se ve en celular (en escritorio el estado va como etiqueta sobre la portada) */
@media (max-width: 640px) {
  body.has-header-px .psc-grid { gap: 10px; }
  body.has-header-px .psc-layout .psc-card, body.has-header-px .pso-layout .psc-card {
    border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  }

  /* Portada más baja, con el foco arriba (ahí suele estar el logo del juego) */
  body.has-header-px .psc-layout .psc-card .psc-card-thumb, body.has-header-px .pso-layout .psc-card .psc-card-thumb { aspect-ratio: 4 / 3; }
  body.has-header-px .psc-layout .psc-card .psc-card-bg, body.has-header-px .pso-layout .psc-card .psc-card-bg { background-position: 50% 10%; }

  /* Cuerpo: línea meta (plataforma · disponibilidad), título, precios */
  body.has-header-px .psc-layout .psc-card .psc-card-body, body.has-header-px .pso-layout .psc-card .psc-card-body {
    display: flex; flex-flow: row wrap; align-content: flex-start; align-items: center; gap: 0 6px; padding: 7px 9px 9px;
  }
  body.has-header-px .psc-layout .psc-card .psc-card-platform, body.has-header-px .pso-layout .psc-card .psc-card-platform {
    order: 1; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 700 0.75rem/1.3 "Oxanium", sans-serif; letter-spacing: 0.05em;
  }
  body.has-header-px .psc-layout .psc-card .psc-card-avail, body.has-header-px .pso-layout .psc-card .pso-availability {
    order: 2; flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none; text-transform: none; letter-spacing: 0.02em;
    font: 700 0.75rem/1.3 "Oxanium", sans-serif;
  }
  body.has-header-px .psc-layout .psc-card .psc-card-avail::before, body.has-header-px .pso-layout .psc-card .pso-availability::before {
    content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: translateY(-1px);
  }
  body.has-header-px .psc-layout .psc-card .psc-card-avail.is-ok, body.has-header-px .pso-layout .psc-card .pso-availability.is-ok { color: var(--cx-ok); }
  body.has-header-px .psc-layout .psc-card .psc-card-avail.is-off, body.has-header-px .pso-layout .psc-card .pso-availability.is-off { color: var(--cx-warn); }
  body.has-header-px .pso-layout .pso-avail-extra { display: none; }
  body.has-header-px .psc-layout .psc-card .psc-card-name, body.has-header-px .pso-layout .psc-card .psc-card-name {
    order: 3; flex: 0 0 100%; margin: 4px 0 0; min-height: 2.44em; font: 700 0.92rem/1.22 "Oxanium", sans-serif;
  }
  body.has-header-px .pso-layout .psc-card .pso-urgency {
    order: 4; flex: 0 0 100%; margin: 3px 0 0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Una sola caja de precios: etiqueta (y precio de referencia debajo) a la izquierda, precio a la derecha */
  body.has-header-px .psc-layout .psc-card .psc-card-price, body.has-header-px .pso-layout .psc-card .psc-card-price {
    order: 5; flex: 0 0 100%; display: grid; gap: 0; margin: 6px 0 0; padding: 0 9px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(139, 92, 246, 0.2);
  }
  body.has-header-px .psc-layout .psc-card .psc-card-price--consult, body.has-header-px .pso-layout .psc-card .psc-card-price--consult { padding: 7px 9px; }
  body.has-header-px .psc-layout .psc-card .psc-card-price > span, body.has-header-px .pso-layout .psc-card .psc-card-price > span {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price";
    column-gap: 6px; align-items: center; padding: 4px 0; border: 0; border-radius: 0; background: none;
  }
  body.has-header-px .pso-layout .psc-card .psc-card-price > span:has(.pso-price-before) { grid-template-areas: "label price" "before price"; }
  body.has-header-px .psc-layout .psc-card .psc-card-price > span + span, body.has-header-px .pso-layout .psc-card .psc-card-price > span + span {
    border-top: 1px solid rgba(139, 92, 246, 0.2);
  }
  body.has-header-px .psc-layout .psc-card .psc-price-label, body.has-header-px .pso-layout .psc-card .psc-price-label {
    grid-area: label; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 0.82rem/1.2 "Rajdhani", sans-serif; letter-spacing: 0.02em; text-transform: none;
  }
  body.has-header-px .pso-layout .psc-card .pso-price-value-group { display: contents; }
  body.has-header-px .psc-layout .psc-card .psc-price-amount, body.has-header-px .pso-layout .psc-card .psc-price-amount {
    grid-area: price; justify-self: end; font: 700 1.05rem/1.1 "Oxanium", sans-serif; white-space: nowrap;
  }
  body.has-header-px .pso-layout .psc-card .pso-price-before { grid-area: before; justify-self: start; font: 500 0.75rem/1.2 "Rajdhani", sans-serif; }
  body.has-header-px .psc-layout .psc-card .psc-card-coins { order: 6; margin: 6px 0 0; padding: 2px 8px; font-size: 0.8rem; }

  /* Insignias chicas sobre la portada: descuento arriba a la izquierda; FLASH / HOT / BUNDLE abajo.
     "OFERTA" sobra cuando ya está el -XX % (en esta página todo es oferta). */
  body.has-header-px .psc-layout .psc-card .psc-badge--avail, body.has-header-px .psc-layout .psc-card .psc-badge--pause { display: none; }
  body.has-header-px .psc-layout .psc-card .psc-badge--offer {
    top: 7px; left: 7px; bottom: auto; min-height: 22px; padding: 0 8px; font-size: 0.75rem; letter-spacing: 0.04em;
  }
  body.has-header-px .pso-layout .pso-discount-pill {
    top: 7px; left: 7px; right: auto; bottom: auto; min-height: 22px; padding: 0 8px; font: 700 0.8rem/1 "Oxanium", sans-serif;
  }
  body.has-header-px .pso-layout .pso-badge-stack { top: auto; bottom: 7px; left: 7px; right: 7px; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
  body.has-header-px .pso-layout .psc-card-thumb:not(:has(.pso-discount-pill)) .pso-badge-stack { top: 7px; bottom: auto; right: 50px; }
  body.has-header-px .pso-layout .psc-card-thumb:has(.pso-discount-pill) .pso-sale-badge--base { display: none; }
  body.has-header-px .pso-layout .pso-sale-badge { min-height: 20px; padding: 0 7px; font-size: 0.75rem; letter-spacing: 0.04em; white-space: nowrap; }

  @media (max-width: 380px) {
    body.has-header-px .psc-layout .psc-card .psc-card-body, body.has-header-px .pso-layout .psc-card .psc-card-body { padding-left: 7px; padding-right: 7px; }
    body.has-header-px .psc-layout .psc-card .psc-card-price, body.has-header-px .pso-layout .psc-card .psc-card-price { padding: 0 7px; }
    body.has-header-px .psc-layout .psc-card .psc-price-amount, body.has-header-px .pso-layout .psc-card .psc-price-amount { font-size: 0.95rem; }
    body.has-header-px .psc-layout .psc-card .psc-card-price > span, body.has-header-px .pso-layout .psc-card .psc-card-price > span { column-gap: 4px; }
  }

  /* Favorito: zona táctil de 44 x 44, círculo visible de 30 */
  body.has-header-px .psc-layout .psc-card .psc-card-fav, body.has-header-px .pso-layout .psc-card .psc-card-fav {
    top: 0; right: 0; width: 44px; height: 44px; background: none; border: 0; font-size: 1rem; isolation: isolate;
  }
  body.has-header-px .psc-layout .psc-card .psc-card-fav::before, body.has-header-px .pso-layout .psc-card .psc-card-fav::before {
    content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 50%;
    background: rgba(6, 10, 24, 0.72); border: 1px solid rgba(255, 255, 255, 0.22);
  }
  body.has-header-px .psc-layout .psc-card .psc-card-fav.is-active::before, body.has-header-px .pso-layout .psc-card .psc-card-fav.is-active::before { border-color: rgba(255, 122, 156, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  body.has-header-px .psc-card, body.has-header-px .psc-chip, body.has-header-px .psc-sidebar { transition: none; }
  body.has-header-px .psc-layout .psc-card:hover, body.has-header-px .pso-layout .psc-card:hover { transform: none; }
}