/* Gamesstation — hoja de estilos global.
   Porta literal el bloque <style> del prototipo (Gamesstation - rediseño.dc.html,
   líneas 24-55) más las clases de :hover generadas a partir de cada style-hover
   distinto que usaba el runtime del prototipo (support.js), ya que en HTML real
   no existe ese atributo. El resto del diseño vive inline en los templates,
   copiado verbatim del prototipo, tal como se documentó en el plan. */

/* el atributo `hidden` debe ganar siempre, incluso sobre un `display` puesto
   inline en el mismo elemento (los overlays fijan display:flex/grid inline
   para cuando SÍ se muestran, y JS alterna `el.hidden`) */
[hidden] { display: none !important; }

/* overflow-x en AMBOS html y body (en vez de solo uno) hace que el
   navegador los trate a los dos como contenedores de scroll a la vez, lo
   cual rompe `position: sticky` en toda la página (el header quedaba sin
   fijarse al hacer scroll) — `clip` evita el desborde horizontal igual que
   `hidden`, pero sin crear ese contenedor de scroll. */
html { background: #08070C; overflow-x: clip; }
body { margin: 0; background: #08070C; color: #F2EFF7; font-family: 'IBM Plex Sans', system-ui, sans-serif; overflow-x: clip; max-width: 100vw; }
a { color: #47C9F5; text-decoration: none; }
a:hover { color: #8FE0FA; }
* { box-sizing: border-box; }
button { font-family: inherit; }
img { max-width: 100%; }

@keyframes gsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gsGlow { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes gsShine { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
@keyframes gsFloat { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-9px,0); } }
@keyframes gsToastIn { from { opacity: 0; transform: translate3d(-14px,10px,0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gsPromoIn { from { opacity: 0; transform: translate3d(0,16px,0); } to { opacity: 1; transform: none; } }
@keyframes gsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(53,214,192,0); } 55% { box-shadow: 0 0 0 5px rgba(53,214,192,0.10); } }

/* destello glossy: pseudo-elemento + transform/opacity, sin JS por tarjeta */
[data-gloss]::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 60%; z-index: 1; pointer-events: none; opacity: 0; transform: translate3d(0,0,0) rotate(12deg); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.26) 45%, rgba(143,224,250,0.16) 60%, rgba(255,255,255,0) 100%); transition: transform .78s cubic-bezier(.22,.68,.36,1), opacity .28s ease; will-change: transform, opacity; }
[data-gloss]:hover::after { opacity: 1; transform: translate3d(300%,0,0) rotate(12deg); }
[data-logo] { transition: transform .32s cubic-bezier(.22,.68,.36,1), filter .3s ease; }
[data-logo-wrap]:hover [data-logo] { transform: rotate(-9deg) scale(1.09); filter: saturate(1.3) brightness(1.12) drop-shadow(0 0 9px rgba(0,174,239,0.55)) drop-shadow(0 0 18px rgba(107,46,145,0.42)); }
[data-logo-wrap] [data-logo-mark] { transition: color .3s ease; }
[data-logo-wrap]:hover [data-logo-mark] { color: #C99BFF; }
[data-reveal] { will-change: transform, opacity; }
:focus-visible { outline: 2px solid #47C9F5; outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: #100E18; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: #2A2438; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3D2560; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- ticker superior: banner en una sola línea con barrido continuo ----
   el contenido se duplica una vez en el HTML (dos grupos idénticos seguidos)
   y la pista se desplaza exactamente -50% en bucle, así el segundo grupo
   entra justo cuando el primero termina de salir, sin salto visible. */
@keyframes gsTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gs-ticker-track { animation: gsTickerScroll 22s linear infinite; will-change: transform; }
.gs-ticker:hover .gs-ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .gs-ticker { overflow-x: auto; }
}

/* revela "Ver detalle →" al pasar el mouse sobre la carátula (catálogo) */
[data-gloss]:hover .gs-reveal-detail { opacity: 1; }

/* ---- desplegable de moneda a la medida (el <select> nativo no permite
   estilizar la lista abierta de opciones, así que se reemplaza por un
   botón + lista propia, con la misma paleta oscura del resto del sitio) --- */
.gs-currency-option:hover, .gs-currency-option:focus-visible { background: #221D2F; }
.gs-currency-widget-open .gs-currency-caret { transform: rotate(180deg); }

/* ---- oculta la barra de scroll nativa del riel horizontal (el scroll
   sigue funcionando con rueda/touch/arrastre, solo no se ve la barra) ---- */
[data-rail-track] { scrollbar-width: none; -ms-overflow-style: none; }
[data-rail-track]::-webkit-scrollbar { display: none; height: 0; }

/* ---- hero con video: la columna de video ocupa más espacio que el texto
   en pantallas anchas (como la referencia), en vez de repartirse 50/50.
   Solo se aplica una vez que el grid ya decidió mostrar 2 columnas lado a
   lado (auto-fit las colapsa a 1 columna por debajo de ~760px). ---- */
@media (min-width: 760px) {
  .gs-hero-has-video { grid-template-columns: 1fr 1.45fr !important; }
}
.gs-hero3d-video { align-self: stretch; }

/* ---- header responsivo -----------------------------------------------
   el menú de navegación (Catálogo/Combos/...) se esconde detrás del botón
   hamburguesa por debajo de 860px, PERO los accesos de moneda/carrito/
   ingresar (`.gs-header-actions`) se quedan siempre visibles junto al
   botón — solo se compactan a solo-ícono para caber en una sola fila. ---- */
.gs-nav-toggle { display: none; }
/* el ícono de búsqueda del header solo existe en móvil — en desktop el
   buscador del hero (u otro de la página) siempre está a mano. */
.gs-header-search { display: none; }
@media (max-width: 860px) {
  .gs-nav-toggle { display: flex; }
  /* con el menú de navegación oculto no queda nada más que pueda necesitar
     envolverse aquí — el `flex-wrap: wrap` de esta fila solo servía para el
     menú de escritorio, y en pantallas muy angostas empujaba TODA la fila
     de íconos (logo + búsqueda + moneda + carrito + cuenta + hamburguesa)
     a una segunda línea completa. Se fuerza una sola línea en móvil. */
  .gs-header-row { flex-wrap: nowrap !important; gap: 12px !important; }
  .gs-header-actions { flex-shrink: 0; }
  [data-header-search]:not([hidden]) { display: block; }
  .gs-logo-text { display: none; }
  /* el panel de navegación ya no es un ítem más de la fila del header (esa
     fila ahora es `nowrap`, así que un hijo `width:100%` ya no tiene dónde
     "caer" a su propia línea y terminaba desbordándose a la derecha) — se
     saca del flujo por completo y flota centrado, como pidió el usuario. */
  .gs-header-menu { display: none !important; }
  .gs-header-menu.gs-open {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 14px;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: calc(100% - 40px); max-width: 420px; margin-top: 2px;
    padding: 16px; border-radius: 14px; background: #14111C; border: 1px solid #2A2438;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55); z-index: 30;
  }
  .gs-header-menu nav { flex-direction: column; align-items: center; width: 100%; gap: 14px; }

  .gs-header-actions { order: 1; gap: 6px; }
  .gs-header-actions .gs-action-label { display: none; }
  .gs-header-actions .gs-icon-cart, .gs-header-actions .gs-icon-login { display: block !important; }
  .gs-cart-link, .gs-login-link { padding: 0 10px !important; gap: 6px !important; }

  .gs-currency-form { padding: 0 10px !important; width: 38px; }
  .gs-currency-trigger { padding-right: 0 !important; }
  .gs-currency-caret { display: none; }
  /* el botón de moneda vive cerca del borde derecho del header — un menú
     anclado a `right:0` se sale por la izquierda de la pantalla en angosto.
     `position:fixed` lo saca del contenedor del botón y lo centra en la
     PANTALLA real (el `top` exacto lo calcula el JS del widget). */
  .gs-currency-menu { position: fixed !important; right: auto !important; left: 50% !important; transform: translateX(-50%); width: calc(100vw - 40px); max-width: 260px; }
}

/* ---- control segmentado de plataforma (catálogo): en pantallas angostas se
   vuelve una fila de chips con scroll horizontal en vez de tercios fijos,
   para que las etiquetas de dos líneas no se recorten ---- */
@media (max-width: 640px) {
  .gs-seg-wrap { overflow-x: auto; min-width: 0 !important; }
  .gs-seg-indicator { display: none; }
  .gs-seg-tab { flex: 0 0 auto !important; height: auto !important; min-height: 48px; padding: 8px 14px !important; white-space: nowrap; }
  .gs-seg-tab.gs-active { background: linear-gradient(140deg, #06283A, #0B1420); border-color: #00AEEF !important; }
  /* el enlace "PlayStation Plus" comparte fila con el control segmentado; a este
     ancho no caben los dos lado a lado y el segmentado queda aplastado a una
     franja casi inservible, así que se apilan en dos filas completas */
  .gs-catalog-segrow > .gs-seg-wrap { flex: 1 1 100%; max-width: 100%; }
  .gs-catalog-segrow > .gs-catalog-plus-link { flex: 1 1 100%; justify-content: center; height: 46px !important; }
}

/* ---- catálogo en móvil: el encabezado (breadcrumb, título, contador,
   control segmentado, buscador) es alto y sumado a la barra flotante de
   ofertas dejaba la primera tarjeta de producto totalmente tapada al entrar
   a la página — parecía que no había nada debajo sin hacer scroll primero.
   Se compacta solo bajo este ancho para que la primera fila de productos
   asome de entrada. ---- */
@media (max-width: 640px) {
  .gs-catalog-wrap { gap: 14px !important; padding-top: 18px !important; }
  .gs-catalog-title { font-size: 25px !important; }
  .gs-catalog-headrow { padding-bottom: 12px !important; }
}

/* ---- clases de :hover generadas a partir de los style-hover del prototipo ---- */
.gs-h1:hover { border-color: #00AEEF; }
.gs-h2:hover { border-color: #6B2E91; color: #FFFFFF; }
.gs-h3:hover { border-color: #6B2E91; }
.gs-h4:hover { color: #FFFFFF; border-color: #9B5AC8; }
.gs-h5:hover { background: #34C3F5; }
.gs-h6:hover { border-color: #00AEEF; color: #8FE0FA; }
.gs-h7:hover { border-color: #3D2560; transform: translateY(-3px); }
.gs-h8:hover { color: #8FE0FA; }
.gs-h9:hover { background: #4FE084; }
.gs-h10:hover { border-color: #6B2E91; box-shadow: 0 0 34px rgba(107,46,145,0.28); }
.gs-h11:hover { border-color: #00AEEF; transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 44px rgba(0,174,239,0.14); }
.gs-h12:hover { color: #FF7AB8; }
.gs-h13:hover { opacity: 1; }
.gs-h14:hover { background: #00AEEF; border-color: #00AEEF; color: #04212E; }
.gs-h15:hover { border-color: #25D366; color: #A8F0C6; }
.gs-h16:hover { border-color: #4A3D63; }
.gs-h17:hover { border-color: #7A2A2A; color: #FF8A8A; }
.gs-h18:hover { border-color: #7A2A2A; background: #1E0F12; color: #FF8A8A; }
.gs-h19:hover { border-color: #4FA8E0; box-shadow: 0 0 30px rgba(0,174,239,0.18); }
.gs-h20:hover { background: #4FE084; box-shadow: 0 0 34px rgba(37,211,102,0.24); }
.gs-h21:hover { border-color: #00AEEF; transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,174,239,0.16); }
.gs-h22:hover { background: #4FE084; box-shadow: 0 0 36px rgba(37,211,102,0.26); }
.gs-h23:hover { background: #4FE084; box-shadow: 0 0 40px rgba(37,211,102,0.28); }
.gs-h24:hover { border-color: #47C9F5; color: #FFFFFF; }
.gs-h25:hover { border-color: #E38FA6; }
.gs-h26:hover { background: #8140AE; }
.gs-h27:hover { color: #F2EFF7; border-color: #4A3D63; }
.gs-h28:hover { background: rgba(227,143,166,0.9); color: #14111C; }