/* GameMediaX — Catálogo, tarjetas de juego y biblioteca (requiere tokens.css + components.css) */
.cat-wrap { max-width: 1300px; margin: 0 auto; padding: 1.25rem var(--gap) 4rem; }
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cat-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; text-transform: uppercase; color: var(--white); line-height: 1; }
.cat-sub { color: var(--text-muted); font-size: .9rem; margin-top: .35rem; }
.cat-search { flex: 1 1 340px; max-width: 520px; display: flex; align-items: center; gap: .5rem; position: relative;
              background: var(--bg2); border: 1px solid var(--border-md); border-radius: var(--radius); padding: .35rem .35rem .35rem .8rem; }
.cat-search:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow-sm); }
.cat-search > svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.cat-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--white); font: inherit; font-size: .92rem; padding: .35rem 0; }
.cat-search input:focus { outline: none; }

.cat-quick, .cat-tags, .cat-active { display: flex; gap: .4rem; flex-wrap: wrap; }
.cat-quick { margin-bottom: 1.75rem; }
.cat-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem; border-radius: var(--radius-pill);
            border: 1px solid var(--border-md); background: var(--glass); color: var(--text); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cat-chip svg { width: 13px; height: 13px; }
.cat-chip span { color: var(--text-muted); font-weight: 500; }
.cat-chip:hover { border-color: var(--orange); color: var(--orange); }
.cat-chip.is-on { background: var(--orange-glow-sm); border-color: var(--border-orange); color: var(--white); }
.cat-chip-steam { margin-left: auto; color: var(--text-dim); }

.cat-section { margin-bottom: 2.25rem; }
.cat-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .85rem; }
.cat-section-head h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
                       text-transform: uppercase; color: var(--white); line-height: 1.1; }
.cat-section-head h2 svg { width: 18px; height: 18px; color: var(--orange); }
.cat-section-head p { color: var(--text-muted); font-size: .82rem; margin-top: .2rem; }
.cat-more { display: inline-flex; align-items: center; gap: .3rem; color: var(--orange); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cat-more svg { width: 14px; height: 14px; }

/* Tarjeta */
.gx-row, .gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.gx-card { position: relative; display: flex; background: var(--bg2); border: 1px solid var(--border-md); border-radius: var(--radius);
           overflow: hidden; transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
.gx-card:hover { border-color: var(--border-orange); transform: translateY(-3px); box-shadow: var(--shadow); }
.gx-link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.gx-link:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.gx-cover { position: relative; aspect-ratio: 16/9; background: var(--bg4); display: flex; align-items: center; justify-content: center; color: var(--text-muted); overflow: hidden; }
.gx-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow); }
.gx-card:hover .gx-cover img { transform: scale(1.05); }
.gx-flags { position: absolute; left: .5rem; top: .5rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.gx-flags .badge { backdrop-filter: blur(8px); background: rgba(8,8,10,.7); }
.gx-flags .badge svg { width: 11px; height: 11px; }
.gx-body { padding: .75rem .85rem .85rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.gx-title { font-size: .98rem; font-weight: 700; color: var(--white); line-height: 1.25; }
.gx-card:hover .gx-title { color: var(--orange); }
.gx-dev { font-size: .76rem; color: var(--text-dim); }
.gx-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gx-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }
.gx-meta svg { width: 11px; height: 11px; vertical-align: -1px; }
.gx-status { padding: .1rem .45rem; border-radius: var(--radius-pill); border: 1px solid var(--border-md); color: var(--text); font-weight: 600; }
.gx-released { color: var(--green); border-color: var(--success-border); }
.gx-demo, .gx-early_access { color: var(--orange); border-color: var(--border-orange); }
.gx-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .45rem; }
.gx-price { font-weight: 800; font-size: .88rem; color: var(--orange); }
.gx-price.is-free { color: var(--green); }
.gx-stats { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--text-muted); }
.gx-stats svg { width: 12px; height: 12px; }
.gx-fav { position: absolute; right: .5rem; top: .5rem; width: 34px; height: 34px; border-radius: 50%;
          border: 1px solid rgba(255,255,255,.15); background: rgba(8,8,10,.65); backdrop-filter: blur(8px); color: var(--white);
          display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.gx-fav svg { width: 16px; height: 16px; }
.gx-fav:hover { color: var(--orange); }
.gx-fav[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.gx-fav[aria-pressed="true"] svg { fill: currentColor; }
.gx-fav:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Resultados filtrados */
.cat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.cat-filters { position: sticky; top: 1rem; background: var(--bg2); border: 1px solid var(--border-md); border-radius: var(--radius); padding: .25rem 1rem 1rem; }
.cat-filters summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; padding: .7rem 0; font-weight: 700; color: var(--white); font-size: .9rem; }
.cat-filters summary::-webkit-details-marker { display: none; }
.cat-filters summary svg { width: 16px; height: 16px; color: var(--orange); }
.cat-filters .form-group { margin-bottom: .75rem; }
.cat-filters select { padding: .5rem .6rem; font-size: .84rem; }
.cat-results-head { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.cat-results-head p { color: var(--text-dim); font-size: .88rem; }
.cat-results-head strong { color: var(--white); }
.cat-active .cat-chip svg { width: 12px; height: 12px; }

/* Biblioteca */
.lib-tabs { margin-bottom: 1.5rem; }
.lib-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.lib-list { display: flex; flex-direction: column; gap: .3rem; background: var(--bg2); border: 1px solid var(--border-md); border-radius: var(--radius);
            padding: .9rem 1rem; color: inherit; text-decoration: none; }
.lib-list:hover { border-color: var(--border-orange); }
.lib-list strong { color: var(--white); display: flex; align-items: center; gap: .4rem; }
.lib-list strong svg { width: 15px; height: 15px; color: var(--orange); }
.lib-list span { font-size: .78rem; color: var(--text-muted); }
.lib-feed { display: flex; flex-direction: column; gap: .6rem; }
.lib-feed-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .9rem; background: var(--bg2); border: 1px solid var(--border-md);
                 border-radius: var(--radius); padding: .7rem; color: inherit; text-decoration: none; }
.lib-feed-item:hover { border-color: var(--border-orange); }
.lib-feed-item .cv { aspect-ratio: 16/9; border-radius: var(--radius-sm); background: var(--bg4); overflow: hidden; }
.lib-feed-item .cv img { width: 100%; height: 100%; object-fit: cover; }
.lib-feed-item h3 { font-size: .95rem; color: var(--white); margin: .25rem 0 .2rem; }
.lib-feed-item p { font-size: .82rem; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-feed-item small { font-size: .74rem; color: var(--text-muted); }
.add-list { position: relative; display: inline-block; }
.add-list-menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30; min-width: 230px; background: var(--bg2); border: 1px solid var(--border-md);
                 border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem; }
.add-list-menu[hidden] { display: none; }
.add-list-menu label { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 6px; font-size: .85rem; color: var(--text); cursor: pointer; }
.add-list-menu label:hover { background: var(--glass-md); }
.add-list-menu input[type=checkbox] { accent-color: var(--orange); width: 15px; height: 15px; }
.add-list-menu a { display: block; padding: .45rem .5rem; font-size: .82rem; color: var(--orange); text-decoration: none; border-top: 1px solid var(--border); margin-top: .3rem; }

@media (max-width: 860px) {
    .cat-layout { grid-template-columns: 1fr; }
    .cat-filters { position: static; }
    .cat-filters:not([open]) { padding-bottom: .25rem; }
    .gx-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem;
              margin: 0 calc(var(--gap) * -1); padding-left: var(--gap); padding-right: var(--gap); }
    .gx-row::-webkit-scrollbar { display: none; }
    .gx-row .gx-card { flex: 0 0 min(72vw, 260px); scroll-snap-align: start; }
    .cat-chip-steam { margin-left: 0; }
    .cat-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gap) * -1) 1.5rem; padding: 0 var(--gap) .2rem; }
    .cat-quick::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
    .gx-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .gx-grid .gx-desc { display: none; }
    .gx-grid .gx-title { font-size: .88rem; }
    .lib-feed-item { grid-template-columns: 72px minmax(0, 1fr); }
}