/* =========================================================================================
 * LISTADO /blog Y PÁGINAS DE CATEGORÍA — port de blog_redesign.html      [Luis 2026-07-29]
 *
 * Estructura, maquetación, espaciado y breakpoints (980 / 620) son los de la maqueta.
 * Los VALORES (color, tipografía, radios, anchos) salen de public/css/blog-tokens.css,
 * que se carga antes. Aquí no hay ni un hex.
 *
 * ⚠️ TODO VA SCOPEADO BAJO .gcb. La maqueta usa nombres genéricos (.card, .grid, .lead,
 * .art, .rule, .cat) que en el CSS global del sitio chocarían con medio catálogo. El
 * contenedor raíz de la plantilla es <div class="gcb">, así que nada de esto se escapa.
 * Por el mismo motivo el reset `*{margin:0;padding:0}` de la maqueta está acotado a .gcb.
 *
 * ⚠️ public/css/blog.css YA NO SE CARGA en estas páginas. No se ha tocado el fichero: se
 * ha quitado su <link>. Traía una regla GLOBAL `a,a:visited{color:#e4e4e4}` que, sobre el
 * fondo claro de la maqueta, dejaba todos los enlaces del blog en gris casi invisible, y
 * su tarjeta de listado (alto fijo de 235px) es justo la que sustituye esta hoja.
 * ========================================================================================= */

/* ── Reset acotado ───────────────────────────────────────────────────────────────────── */
.gcb,
.gcb *,
.gcb *::before,
.gcb *::after {
    box-sizing: border-box;
}

.gcb h1, .gcb h2, .gcb h3, .gcb h4, .gcb p,
.gcb ul, .gcb ol, .gcb li, .gcb figure, .gcb nav {
    margin: 0;
    padding: 0;
}

.gcb {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.gcb a {
    color: inherit;
    text-decoration: none;
}

.gcb :focus-visible {
    border-radius: var(--r-xs);
    outline: 2px solid var(--lime-ink);
    outline-offset: 3px;
}

.gcb .shell {
    margin: 0 auto;
    max-width: var(--shell-max);
    padding: 0 var(--shell-pad);
}


/* ── Cabecera ────────────────────────────────────────────────────────────────────────── */
.gcb .crumb {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    padding: 26px 0 0;
    text-transform: uppercase;
}

.gcb .crumb a:hover {
    color: var(--dim);
}

.gcb .masthead {
    border-bottom: 1px solid var(--line);
    padding: 30px 0 26px;
}

.gcb .masthead h1 {
    font-family: var(--disp);
    font-size: clamp(38px, 7vw, 72px);
    font-weight: var(--weight-display);
    letter-spacing: -.035em;
    line-height: .94;
}

.gcb .masthead h1 span {
    color: var(--lime-ink);
}

.gcb .masthead > p {
    color: var(--dim);
    font-size: 16px;
    margin-top: 14px;
    max-width: 520px;
}

/* Contador de guías. La cifra sale del recuento REAL de posts del idioma, no de un
   literal: la maqueta decía "214 guides" y son 200. */
.gcb .masthead .count {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    margin-top: 18px;
    text-transform: uppercase;
}

.gcb .masthead .count b {
    color: var(--lime-ink);
    font-weight: var(--weight-strong);
}


/* ── Carril de categorías ────────────────────────────────────────────────────────────── */
.gcb .rail {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--veil);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.gcb .rail-inner {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;
}

.gcb .rail-inner::-webkit-scrollbar {
    display: none;
}

.gcb .cat {
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--dim);
    flex: none;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    padding: 8px 14px;
    text-transform: uppercase;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}

.gcb .cat:hover {
    border-color: var(--dim);
    color: var(--paper);
}

.gcb .cat[aria-current="true"] {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--on-lime);
    font-weight: var(--weight-strong);
}


/* ── Intro de categoría ──────────────────────────────────────────────────────────────── */
.gcb .cat-intro {
    color: var(--dim);
    font-size: 15px;
    line-height: 1.6;
    margin: 26px 0 0;
    max-width: 640px;
}


/* ── Historia destacada ──────────────────────────────────────────────────────────────── */
.gcb .lead {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: grid;
    gap: 0;
    grid-template-columns: 1.15fr 1fr;
    margin: 34px 0 44px;
    overflow: hidden;
    transition: border-color .2s;
}

.gcb .lead:hover {
    border-color: var(--line-2);
}

.gcb .lead .art {
    background-position: center;
    background-size: cover;
    min-height: 340px;
    position: relative;
}

.gcb .lead .art::after {
    background: linear-gradient(90deg, transparent 55%, var(--panel));
    content: "";
    inset: 0;
    position: absolute;
}

.gcb .lead .art .tape {
    background: var(--lime);
    border-radius: var(--r-xs);
    color: var(--on-lime);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--weight-strong);
    left: 16px;
    letter-spacing: .12em;
    padding: 5px 10px;
    position: absolute;
    text-transform: uppercase;
    top: 16px;
    z-index: 2;
}

.gcb .lead .txt {
    display: flex;
    flex-direction: column;
    padding: 34px 34px 28px;
}

.gcb .lead .kicker {
    color: var(--lime-ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.gcb .lead h2 {
    font-family: var(--disp);
    font-size: clamp(24px, 2.7vw, 34px);
    font-weight: var(--weight-display);
    letter-spacing: -.025em;
    line-height: 1.08;
}

.gcb .lead .txt > p {
    color: var(--dim);
    font-size: 15px;
    margin-top: 14px;
    max-width: 46ch;
}

.gcb .lead .foot {
    margin-top: auto;
    padding-top: 24px;
}


/* ── Tira de precio ──────────────────────────────────────────────────────────────────── */
.gcb .price-strip {
    align-items: center;
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 0;
}

.gcb .price-strip .tag {
    color: var(--faint);
    flex: none;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: var(--weight-strong);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gcb .price-strip .game {
    color: var(--dim);
    flex: 1;
    font-size: 12.5px;
    font-weight: var(--weight-medium);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcb .price-strip .now {
    color: var(--lime-ink);
    flex: none;
    font-family: var(--mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-strong);
}

.gcb .price-strip .off {
    background: var(--lime);
    border-radius: var(--r-xs);
    color: var(--on-lime);
    flex: none;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: var(--weight-strong);
    padding: 2px 6px;
}

/* La tira de reseña de tienda reutiliza la misma fila: la nota va donde el precio.
   ESCALA 0-5 SIEMPRE (trustpilot_reviews.tp_of dice 10 y es un dato FALSO). */
.gcb .price-strip .score {
    color: var(--lime-ink);
    flex: none;
    font-family: var(--mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-strong);
}


/* ── Firma ───────────────────────────────────────────────────────────────────────────── */
.gcb .byline {
    align-items: center;
    color: var(--faint);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    gap: 8px;
    letter-spacing: .03em;
}

.gcb .byline .dot {
    background: var(--faint);
    border-radius: 50%;
    height: 3px;
    width: 3px;
}

.gcb .byline b {
    color: var(--dim);
    font-weight: 500;
}


/* ── Regla de sección ────────────────────────────────────────────────────────────────── */
.gcb .rule {
    align-items: center;
    display: flex;
    gap: 16px;
    margin: 0 0 22px;
}

.gcb .rule h3 {
    color: var(--dim);
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: var(--weight-strong);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.gcb .rule .bar {
    background: var(--line);
    flex: 1;
    height: 1px;
}


/* ── Rejilla de tarjetas ─────────────────────────────────────────────────────────────── */
.gcb .grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

/* La tarjeta es flex en columna con .foot en margin-top:auto: se ajusta SIEMPRE a su
   contenido y las de una misma fila se igualan solas por la rejilla. Es lo que resuelve
   el hueco muerto del listado anterior (alto fijo de 235px con 90px de texto: 100px de
   vacío entre el extracto y el pie, medido en headless a 1440px). */
.gcb .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .18s cubic-bezier(.2, .7, .2, 1), border-color .18s;
}

.gcb .card:hover {
    border-color: var(--line-2);
    transform: translateY(-3px);
}

.gcb .card .art {
    aspect-ratio: 16 / 10;
    background-position: center;
    background-size: cover;
    flex: none;
    position: relative;
}

.gcb .card .art .tape {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: var(--veil-2);
    border-radius: var(--r-xs);
    color: var(--lime-ink);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: var(--weight-strong);
    left: 11px;
    letter-spacing: .1em;
    padding: 4px 8px;
    position: absolute;
    text-transform: uppercase;
    top: 11px;
}

.gcb .card .txt {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 18px 15px;
}

.gcb .card h4 {
    font-size: 16px;
    font-weight: var(--weight-strong);
    letter-spacing: -.012em;
    line-height: 1.24;
}

.gcb .card .sum {
    -webkit-box-orient: vertical;
    color: var(--dim);
    display: -webkit-box;
    font-size: 13.5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.5;
    margin-top: 9px;
    overflow: hidden;
}

.gcb .card .foot {
    margin-top: auto;
    padding-top: 16px;
}


/* ── Paginador ───────────────────────────────────────────────────────────────────────── */
.gcb .pager {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 46px 0 12px;
}

.gcb .pager a {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--dim);
    font-family: var(--mono);
    font-size: 12px;
    padding: 8px 13px;
    transition: .15s;
}

.gcb .pager a:hover {
    border-color: var(--dim);
    color: var(--paper);
}

.gcb .pager a[aria-current="page"] {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--on-lime);
    font-weight: var(--weight-strong);
}

.gcb .pager .gap {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 12px;
    padding: 0 4px;
}


/* ── Pie del bloque ──────────────────────────────────────────────────────────────────── */
.gcb .blog-foot {
    border-top: 1px solid var(--line);
    margin-top: 40px;
    padding: 26px 0 44px;
}

.gcb .blog-foot p {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
}


/* ── Responsive (breakpoints de la maqueta) ──────────────────────────────────────────── */
@media (max-width: 980px) {

    .gcb .lead {
        grid-template-columns: 1fr;
    }

    .gcb .lead .art {
        min-height: 220px;
    }

    .gcb .lead .art::after {
        background: linear-gradient(180deg, transparent 45%, var(--panel));
    }

    .gcb .lead .txt {
        padding: 24px;
    }

    .gcb .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {

    .gcb .grid {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .gcb .shell {
        padding: 0 var(--shell-pad-sm);
    }

    /* 390px sin scroll horizontal: los titulares del catálogo traen nombres de juego
       sin espacios que no caben en una columna de 354px. */
    .gcb .lead h2,
    .gcb .card h4,
    .gcb .masthead h1 {
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gcb *,
    .gcb *::before,
    .gcb *::after {
        animation: none !important;
        transition: none !important;
    }

    .gcb .card:hover {
        transform: none;
    }
}