/* ===== Header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(10, 14, 26, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-heading);
  white-space: nowrap;
}

.logo__main {
  font-size: 1.1rem;
  color: var(--color-text);
}

.logo__accent {
  font-size: 1.1rem;
  color: var(--color-accent);
}

/* Botón hamburguesa: solo existe visualmente en mobile (ver layout.css) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
}

.nav-toggle__line {
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* máscara: sugiere visualmente que la fila de categorías sigue a los lados */
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.main-nav::-webkit-scrollbar {
  display: none;
}

.main-nav__list {
  display: flex;
  gap: var(--space-xs);
  padding: 2px 24px;
  scroll-padding-inline: 24px;
}

.main-nav__list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 0 var(--space-sm);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.main-nav__list a.is-active {
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.search-box {
  position: relative;
  min-width: 200px;
}

.search-box__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-box__input {
  width: 100%;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 2.25rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-box__input::placeholder {
  color: var(--color-text-muted);
}

.search-box__input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.2);
}

/* ===== Hero: carrusel de destacados ===== */

.hero {
  position: relative;
  height: min(70vh, 560px);
  min-height: 380px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease;
}

.hero-slide--active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Scrim oscuro: el fondo es una captura de gameplay real y puede ser
   clara o caótica, este degradado garantiza que el texto siempre sea
   legible sin importar qué imagen quede detrás. */
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.55) 45%, rgba(10, 14, 26, 0.25) 100%),
    linear-gradient(to right, rgba(10, 14, 26, 0.75) 0%, rgba(10, 14, 26, 0.1) 55%);
}

.hero-slide__content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* padding-bottom extra: deja hueco fijo para que hero__dots nunca
     quede encima del botón "Comprar ahora". */
  padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 40px);
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.hero-slide__cover {
  width: clamp(110px, 18vw, 190px);
  /* el atributo HTML height="800" del <img> pisa a aspect-ratio si no se
     fija height:auto explícito (los atributos width/height actúan como
     "presentational hints" con más peso que el auto por defecto). */
  height: auto;
  aspect-ratio: 3 / 4;
  /* contain (no cover): algunas portadas oficiales traen su propio marco
     decorativo y se recortaban mal al forzar el relleno del cuadro. */
  object-fit: contain;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.hero-slide__info {
  padding-bottom: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.hero-slide__eyebrow {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-slide__title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.hero-slide__price {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.hero-slide__price strong {
  color: var(--color-text);
}

.btn--buy-now {
  margin-top: var(--space-xs);
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
  align-self: flex-start;
}

.btn--buy-now:hover,
.btn--buy-now:focus-visible {
  box-shadow: 0 8px 20px rgba(0, 210, 255, 0.35);
}

.hero__dots {
  position: absolute;
  z-index: 3;
  bottom: var(--space-sm);
  right: var(--space-lg);
  display: flex;
  gap: var(--space-xs);
}

.hero-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(241, 245, 249, 0.4);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.hero-dot--active::before {
  background-color: var(--color-accent);
  transform: scale(1.3);
}

/* ===== Botones ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: #0a0e1a;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

/* Ícono oficial de WhatsApp (assets/icons/whatsapp.svg): ya trae su propio
   color/círculo, a diferencia del glifo monocromo anterior. */
.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Botón flotante de WhatsApp, visible en toda la página */
.whatsapp-float {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 60;
  width: 56px;
  height: 56px;
  display: flex;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  transition: transform var(--transition-fast);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08);
}

.whatsapp-float img {
  width: 100%;
  height: 100%;
}

/* ===== Secciones de categoría ===== */

.category-section {
  padding: var(--space-lg);
}

.category-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-border);
}

.category-section__emoji {
  font-size: 1.2rem;
}

/* ===== Tarjeta de juego ===== */

/* .game-card es un <button>: reset de los estilos por defecto del navegador
   para que se vea igual que la <article> que reemplazó. */
.game-card {
  width: 100%;
  /* los <button> no se encogen bajo el tamaño de su contenido por defecto
     (a diferencia del <article> anterior); sin esto, el grid solo cabía
     una columna en mobile. */
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.game-card:hover .game-card__cart-icon,
.game-card:focus-visible .game-card__cart-icon {
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
}

.game-card__image-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  background-color: var(--color-surface-alt);
  overflow: hidden;
}

.game-card__image-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Juegos sin portada vertical: banner completo sobre fondo difuminado en
   vez de recortarlo (ver comentario en js/app.js). */
.game-card__image-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* scale > 1 evita que se note el borde nítido del blur en los bordes */
  transform: scale(1.15);
  filter: blur(18px) brightness(0.45) saturate(1.2);
}

.game-card__image-wrap--letterbox img {
  object-fit: contain;
}

/* Badge "PS4 y PS5": todo el catálogo aplica a ambas consolas, así que es
   el mismo texto en todas las tarjetas (no tenemos ese dato por juego). */
.game-card__platform {
  position: absolute;
  z-index: 2;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: 2px 8px;
  border-radius: 999px;
  background-color: rgba(10, 14, 26, 0.75);
  backdrop-filter: blur(4px);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Ícono de carrito centrado sobre la portada: indica "tocar para ver más" */
.game-card__cart-icon {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--space-xs);
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(10, 14, 26, 0.75);
  backdrop-filter: blur(4px);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.game-card__cart-icon svg {
  width: 18px;
  height: 18px;
}

.game-card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}

.game-card__title {
  font-size: 0.9rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
}

.game-card__price-range {
  margin-top: auto;
  padding-top: 4px;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ===== Buscador sin resultados ===== */

.no-results {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-xl);
}

/* ===== Footer ===== */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.site-footer__content {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__tagline {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.site-footer__social {
  display: flex;
  gap: var(--space-md);
}

/* Íconos de marca (whatsapp.svg / instagram.png): ya traen su propio
   color, así que el "botón" es solo el ícono con un ligero hover, sin
   círculo ni borde extra encima. */
.site-footer__social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-footer__social a img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  transform: translateY(-2px);
  opacity: 0.85;
}

.site-footer__legal {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* ===== Medios de pago (footer + ficha de producto) =====
   Insignia de confianza: no procesamos estos pagos directamente (todo se
   coordina por WhatsApp), pero mostrar los medios que se aceptan da la
   misma confianza que en una tienda real. */

.site-footer__payments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  width: 100%;
}

.site-footer__payments-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.site-footer__payments-label svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.site-footer__payments-row,
.game-modal__payments-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
}

.payment-badge {
  height: 26px;
  padding: 5px 10px;
  background-color: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
}

.payment-badge--text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

/* Colores de marca de DaviPlata y PSE: no encontramos un logo vectorial
   de fuente confiable para reutilizar, así que van como texto con su
   color oficial en vez de un logo posiblemente incorrecto. */
.payment-badge--daviplata {
  color: #e4032e;
}

.payment-badge--pse {
  color: #00558c;
}

.game-modal__payments {
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.game-modal__payments-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* ===== Ficha de producto (modal) ===== */

.game-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.game-modal[hidden] {
  display: none;
}

.game-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(5, 7, 13, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.game-modal.is-open .game-modal__backdrop {
  opacity: 1;
}

.game-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  max-height: min(88vh, 800px);
  overflow-y: auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: transform 220ms ease, opacity 220ms ease;
}

.game-modal.is-open .game-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.game-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: rgba(10, 14, 26, 0.65);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-modal__close:hover,
.game-modal__close:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
}

.game-modal__content {
  display: flex;
}

.game-modal__media {
  position: relative;
  width: 40%;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  background-color: var(--color-surface-alt);
  overflow: hidden;
}

/* Scrim: el botón de cerrar flota sobre la esquina superior de la imagen
   (sobre todo en mobile, donde la portada ocupa todo el ancho arriba). Sin
   esto se veía como si le faltara un pedazo a la portada; con el degradado
   se lee como una superposición intencional, no como un recorte roto. */
.game-modal__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(5, 7, 13, 0.7), transparent);
  pointer-events: none;
}

.game-modal__cover {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-modal__cover--letterbox {
  object-fit: contain;
}

.game-modal__cover-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.15);
  filter: blur(18px) brightness(0.45) saturate(1.2);
}

.game-modal__info {
  flex: 1;
  min-width: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.game-modal__platform {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--color-surface-alt);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.game-modal__title {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--color-text);
}

.game-modal__description {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.game-modal__prices {
  margin-top: auto;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-modal__price-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.game-modal__price-row strong {
  color: var(--color-text);
  font-size: 1rem;
}

.game-modal__price--secondary {
  color: var(--color-price-secondary) !important;
}

.game-modal__cta {
  justify-content: center;
  width: 100%;
}

/* Bloquea el scroll de la página de fondo mientras el modal está abierto */
body.modal-open {
  overflow: hidden;
}