/* ============================================================
   VISOR DE IMÁGENES (js/visor-portada.js) — clases pdp-visor-*
   Lo usan la ficha del juego (portada), la ficha de PS Plus y la página de Opiniones (fotos de clientes).
   Antes vivía dentro de css/producto.css; se separó para no cargar toda la ficha donde solo se necesita el visor.
   Móvil primero: la X, las flechas y el contador miden >= 44 px.
   ============================================================ */

html.pdp-visor-open, body.pdp-visor-open { overflow: hidden; }
/* Con el visor abierto, el chat flotante se esconde (la barra inferior del celular se esconde sola: ve el [aria-modal] visible) */
html.pdp-visor-open .px-asst-fab, html.pdp-visor-open .px-asst-peek, html.pdp-visor-open .px-asst-toast,
html.pdp-visor-open .px-asst-pill, html.pdp-visor-open .px-asst-side { visibility: hidden !important; }
/* El aviso de cookies (z-index enorme, puesto por js/analytics.js) taparía el nombre del juego: se esconde mientras el visor está abierto, como con las otras ventanas */
html.pdp-visor-open #px-analytics-consent-banner { display: none !important; }

.pdp-visor {
  position: fixed; inset: 0; z-index: 10000;
  color: #fff; font-family: "Oxanium", sans-serif; overscroll-behavior: contain;
}
.pdp-visor-fondo { position: absolute; inset: 0; background: rgba(4, 7, 18, 0.94); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pdp-visor-fondo {
    background: rgba(4, 7, 18, 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  }
}
.pdp-visor-escena {
  position: absolute; inset: 0; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.pdp-visor-fig { position: absolute; will-change: transform; }
.pdp-visor-img {
  display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform-origin: 50% 50%; will-change: transform;
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none;
}
.pdp-visor-nombre {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center; font: 700 18px/1.25 "Oxanium", sans-serif; letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); overflow-wrap: anywhere; pointer-events: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.pdp-visor-cerrar {
  position: absolute; z-index: 2; top: calc(8px + env(safe-area-inset-top, 0px)); right: 12px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pdp-visor-cerrar:hover { background: rgba(255, 255, 255, 0.26); }
.pdp-visor-cerrar:active { transform: scale(0.94); }
.pdp-visor-cerrar:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }


/* ── Varias imágenes (fotos de opiniones): flechas, contador y leyenda con la opinión ─────────────── */
.pdp-visor-nav, .pdp-visor-cuenta { position: absolute; z-index: 2; }
.pdp-visor-nav {
  top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pdp-visor-nav--prev { left: 8px; }
.pdp-visor-nav--next { right: 8px; }
.pdp-visor-nav:hover { background: rgba(255, 255, 255, 0.26); }
.pdp-visor-nav:active { transform: scale(0.94); }
.pdp-visor-nav:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.pdp-visor-nav[hidden], .pdp-visor-cuenta[hidden] { display: none; }
.pdp-visor-cuenta {
  top: calc(8px + env(safe-area-inset-top, 0px)); left: 12px; display: grid; place-items: center; height: 44px; padding: 0 14px;
  border-radius: 22px; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3);
  font: 700 14px/1 "Oxanium", sans-serif; letter-spacing: 0.02em; pointer-events: none;
}
.pdp-visor-nombre--libre {
  display: grid; gap: 4px; justify-items: center; -webkit-line-clamp: unset; line-clamp: unset; font-weight: 600;
  max-height: 46vh; background: linear-gradient(180deg, rgba(4, 7, 18, 0) 0%, rgba(4, 7, 18, 0.82) 38%);
  padding-top: 22px;
}
.pdp-visor-leyenda-est { color: #fbbf24; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.pdp-visor-leyenda-quien { font: 700 15px/1.25 "Oxanium", sans-serif; color: #fff; }
.pdp-visor-leyenda-quien span { color: #cdd6f1; font-weight: 600; }
.pdp-visor-leyenda-txt {
  max-width: 62ch; margin: 0; color: #eef1fb; font: 500 15px/1.4 "Rajdhani", sans-serif;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
@media (min-width: 768px) {
  .pdp-visor-nav--prev { left: 20px; }
  .pdp-visor-nav--next { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-visor-cerrar, .pdp-visor-nav, .pdp-visor-fig, .pdp-visor-img { transition: none !important; }
  .pdp-visor-cerrar:active, .pdp-visor-nav:active { transform: none; }
}