/* ==========================================================================
   MACRO REBORN — CATÁLOGO DE JUEGOS
   Usa los mismos tokens y componentes (:root, .navbar, .eyebrow,
   .titulo-principal, .pie-footer, etc.) definidos en css/inicio.css.
   Este archivo cubre lo específico de la página de Juegos.
   ========================================================================== */

.mr-root {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ==========================================================================
   NAVBAR
   Ya no necesita nada especial acá: usa el layout estándar de 2 filas
   de css/inicio.css (el mismo que el resto del sitio). La versión vieja
   de este bloque centraba el buscador a mano con position:absolute
   pensada para cuando .nav-links quedaba vacío; con .nav-categorias
   ese caso ya no existe, así que se sacó para no pisar el layout nuevo.
   ========================================================================== */


/* ==========================================================================
   ENCABEZADO DEL CATÁLOGO
   ========================================================================== */

.catalogo-header {
  position: relative;
  overflow: hidden;
  padding: 64px 24px 56px;
  text-align: center;
  background:
    radial-gradient(ellipse 800px 420px at 50% -15%, rgba(240, 180, 41, 0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 100%);
  border-bottom: 1px solid var(--line);
}

.catalogo-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(240, 180, 41, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 180, 41, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, black 40%, transparent 90%);
  pointer-events: none;
}

.catalogo-header-contenido {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.catalogo-header .titulo-principal {
  font-size: clamp(30px, 5.5vw, 48px);
  margin: 18px 0 0;
}

.catalogo-header .descripcion {
  margin: 16px auto 0;
}

.catalogo-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-muted);
}

.stat-pill b {
  color: var(--gold-bright);
}

/* ==========================================================================
   SECCIONES DE JUEGOS
   ========================================================================== */

.seccion-juegos {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 24px 10px;
}

/* Oculta por completo una sección si su grilla está vacía              */
/* (ej: "Nuevos" mientras ningún juego tenga tipo "nuevo" en los datos), */
/* sin tocar la lógica de js/juegos.js: es puramente una regla CSS.      */
.seccion-juegos:has(.lista-juegos:empty) {
  display: none;
}

.seccion-titulo-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.seccion-titulo-fila h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 24px);
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.seccion-titulo-fila .seccion-linea {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  min-width: 40px;
}

.seccion-conteo {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Distintivo por sección: Destacados en dorado, Nuevos en cyan */
#seccionDestacados .seccion-titulo-fila h2 { color: var(--gold-bright); }
#seccionNuevos .seccion-titulo-fila h2 { color: var(--cyan); }

/* ==========================================================================
   GRILLA Y TARJETAS DE JUEGOS
   ========================================================================== */

.lista-juegos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 22px;
}

.juego-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
  border: 2px solid var(--clasico-borde);
  border-radius: var(--clasico-radio);
  padding: 18px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}

.juego-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(240, 180, 41, 0.15);
}

.juego-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.badge-categoria,
.badge-estado {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-categoria {
  background: rgba(56, 189, 248, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(56, 189, 248, 0.3);
  max-width: 60%;
}

.badge-estado {
  background: var(--warning-bg);
  color: var(--gold-bright);
  border: 1px solid rgba(240, 180, 41, 0.35);
}

.juego-imagen {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  background: radial-gradient(circle at 50% 40%, rgba(240, 180, 41, 0.12), rgba(0, 0, 0, 0.25) 70%);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
}

.juego-card h3 {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--text-main);
}

.juego-descripcion-corta {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}

.juego-card > a {
  margin-top: auto;
  display: block;
}

.juego-card button {
  width: 100%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  color: var(--text-on-accent);
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.juego-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Toque de detalle "cartucho" clásico en la primera fila de Destacados */
#juegosDestacados .juego-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 4px 4px;
  opacity: 0.8;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .catalogo-header {
    padding: 48px 18px 40px;
  }

  .seccion-juegos {
    padding: 40px 18px 0;
  }

  .lista-juegos {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }

  .juego-imagen {
    height: 90px;
    font-size: 42px;
  }
}

@media (max-width: 420px) {
  .lista-juegos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
   FILTROS + TARJETAS DE PORTAL
   ============================================================================ */
.catalogo-busqueda { display:flex; align-items:center; gap:10px; max-width:760px; margin:24px auto 0; padding:12px 15px; background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; }
.catalogo-busqueda:focus-within { border-color:var(--gold); box-shadow:0 0 0 4px var(--focus-ring); }
.catalogo-busqueda span { opacity:.85; }
.catalogo-busqueda input { width:100%; border:0; outline:0; background:transparent; color:var(--text-main); font:600 15px var(--font-body); }
.catalogo-busqueda input::placeholder { color:var(--text-placeholder); }
.catalogo-filtros { max-width:1200px; margin:22px auto 0; padding:14px; display:flex; gap:12px; flex-wrap:wrap; align-items:end; background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; }
.catalogo-filtro-bloque { display:flex; flex-direction:column; gap:5px; min-width:180px; }
.catalogo-filtro-bloque label { font-size:10px; font-weight:800; letter-spacing:.9px; color:var(--text-muted); text-transform:uppercase; }
.catalogo-filtro-bloque select { min-height:40px; border:1px solid var(--line); border-radius:9px; background:var(--bg-panel-alt); color:var(--text-main); padding:0 11px; font:600 13px var(--font-body); outline:none; }
.catalogo-filtro-bloque select:focus { border-color:var(--gold); }
.catalogo-resultados { margin-left:auto; color:var(--text-muted); font-size:12px; padding-bottom:10px; }
.catalogo-resultados strong,.catalogo-resultados b { color:var(--gold-bright); }
.juego-card { overflow:hidden; padding:0; border-width:1px; border-color:var(--line); background:linear-gradient(180deg,var(--bg-panel),var(--bg-base)); }
.juego-card-link { color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%; }
.juego-card-top { padding:11px 11px 0; margin-bottom:8px; }
.juego-imagen { position:relative; height:auto; aspect-ratio:16/10; margin:0; border:0; border-radius:0; overflow:hidden; }
.juego-imagen img { width:100%; height:100%; object-fit:cover; transition:transform .24s ease; }
.juego-card:hover .juego-imagen img { transform:scale(1.05); }
.juego-hover-accion { position:absolute; left:50%; bottom:10px; transform:translate(-50%,8px); opacity:0; padding:7px 14px; border-radius:999px; background:var(--gold); color:var(--text-on-accent); font-size:11px; font-weight:900; transition:.18s ease; }
.juego-card:hover .juego-hover-accion { opacity:1; transform:translate(-50%,0); }
.juego-card-contenido { padding:11px 13px 13px; display:flex; flex:1; flex-direction:column; }
.juego-card h3 { font-size:14px; line-height:1.25; margin-bottom:7px; text-align:left; }
.juego-descripcion-corta { font-size:11.5px; min-height:32px; margin-bottom:9px; text-align:left; }
.juego-card-meta { display:flex; justify-content:space-between; gap:8px; margin-top:auto; font-size:10px; color:var(--text-muted); }
.juego-card-meta span:last-child { color:var(--gold-bright); font-weight:700; }
.juego-card > a { margin-top:0; }
.juego-card button { display:none; }
.juego-card-cta { display:inline-flex; align-items:center; justify-content:center; margin-top:10px; padding:9px 12px; border-radius:10px; background:var(--accent, var(--accent)); color:#fff; font-weight:800; font-size:11px; text-decoration:none; transition:transform .2s ease, filter .2s ease; }
.juego-card:hover .juego-card-cta { transform:translateY(-1px); filter:brightness(1.08); }
@media (max-width:768px){ .catalogo-resultados{width:100%; margin-left:0; padding-bottom:0;} .catalogo-filtro-bloque{flex:1 1 180px;} .juego-card-top{padding:8px 8px 0;} }


/* Estados editoriales del catálogo: ayudan a distinguir rápidamente qué está en auge. */
.juego-imagen { position: relative; }
.juego-card-tags { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 3; pointer-events: none; }
.juego-card-tag { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 800; background: rgba(15,23,42,.9); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); box-shadow: 0 5px 14px rgba(0,0,0,.22); }
.juego-card-tag.trending { color: #ffb75d; border-color: rgba(255,183,93,.35); }
.juego-card-tag.popular { color: #ffe16b; border-color: rgba(255,225,107,.35); }
.juego-card-tag.nuevo { color: #7dd3fc; border-color: rgba(125,211,252,.35); }
.juego-card-tag.destacado { color: #ffd166; border-color: rgba(255,209,102,.35); }
.juego-card:hover .juego-card-tag { transform: translateY(-1px); }


/* ========================================================================
   CENTRO DE DESCUBRIMIENTO — filtros y vistas rápidas
   Se apoya en js/juegos.js existente; no crea una segunda lógica de catálogo.
   ======================================================================== */
.mr-catalogo-herramientas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px 6px;
}

.mr-catalogo-vistas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.mr-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.mr-chip:hover,
.mr-chip.activo {
  color: var(--gold-bright);
  border-color: rgba(240, 180, 41, .45);
  transform: translateY(-1px);
}

.mr-filtros-catalogo {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) minmax(170px, .8fr) minmax(170px, .8fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-panel), rgba(255,255,255,.01));
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.mr-buscador-catalogo,
.mr-select-catalogo {
  min-width: 0;
}

.mr-buscador-catalogo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-base);
}

.mr-buscador-catalogo span {
  flex: 0 0 auto;
  font-size: 17px;
}

.mr-buscador-catalogo input,
.mr-select-catalogo select {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--text-main);
  background: transparent;
  font: inherit;
}

.mr-buscador-catalogo input::placeholder {
  color: var(--text-muted);
}

.mr-select-catalogo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-base);
}

.mr-select-catalogo span {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 800;
}

.mr-select-catalogo select {
  cursor: pointer;
}

.mr-catalogo-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 12px 2px 0;
}

.mr-catalogo-enlaces a {
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}

.mr-catalogo-enlaces a:hover {
  color: var(--gold-bright);
}

.mr-resultados-catalogo {
  max-width: 1200px;
  margin: 8px auto 0;
  padding: 0 24px;
  color: var(--text-muted);
  font-size: 13px;
}

.mr-resultados-catalogo strong {
  color: var(--text-main);
}

@media (max-width: 800px) {
  .mr-filtros-catalogo {
    grid-template-columns: 1fr;
  }

  .mr-catalogo-herramientas,
  .mr-resultados-catalogo {
    padding-left: 16px;
    padding-right: 16px;
  }
}