/* =========================================================================================
 * POST INDIVIDUAL /blog/{slug} — port de blog_post_redesign.html          [Luis 2026-07-29]
 *
 * Estructura, maquetación, espaciado y breakpoints (960 / 560) son los de la maqueta.
 * Los VALORES salen de public/css/blog-tokens.css, que se carga antes. Aquí no hay ni un
 * hex ni una familia tipográfica literal.
 *
 * ⚠️ TODO SCOPEADO BAJO .gcb: la maqueta usa nombres genéricos (.art, .head, .meta, .facts,
 * .offer, .author, .rel) que sueltos en el CSS global chocarían con medio sitio.
 *
 * ⚠️ public/css/blog.css YA NO SE CARGA aquí. No se ha tocado el fichero, solo se ha
 * quitado su <link>. Traía `._gc_blog ._gc_blog__single__content a{color:#2492e2!important}`
 * y un `a,a:visited{color:#e4e4e4}` GLOBAL contra los que la hoja anterior tenía que pelear
 * a base de !important; sin él, el cuerpo del post se estila limpio.
 * ========================================================================================= */

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

.gcb h1, .gcb h2, .gcb h3, .gcb h4, .gcb p,
.gcb dl, .gcb dt, .gcb dd, .gcb figure, .gcb nav {
    margin: 0;
    padding: 0;
}

.gcb {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    line-height: 1.65;
    -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-post);
    padding: 0 var(--shell-pad);
}

/* El salto a un #ancla del índice tiene que dejar el H2 por debajo del carril/cabecera. */
.gcb .art h2[id] {
    scroll-margin-top: 80px;
}


/* ── Barra de progreso de lectura ────────────────────────────────────────────────────── */
.gc-progress {
    background: var(--lime);
    height: 2px;
    left: 0;
    position: fixed;
    top: 0;
    transition: width .1s linear;
    width: 0;
    z-index: 60;
}


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

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

.gcb .head {
    border-bottom: 1px solid var(--line);
    max-width: 860px;
    padding: 22px 0 26px;
}

.gcb .chip {
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--lime-ink);
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--weight-strong);
    letter-spacing: .12em;
    margin-bottom: 16px;
    padding: 5px 10px;
    text-transform: uppercase;
}

.gcb .head h1 {
    font-family: var(--disp);
    font-size: clamp(30px, 4.6vw, 50px);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: 1.03;
}

.gcb .meta {
    align-items: center;
    color: var(--faint);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11.5px;
    gap: 9px;
    margin-top: 18px;
}

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

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

.gcb .meta .fresh {
    color: var(--lime-ink);
}


/* ── Disposición ─────────────────────────────────────────────────────────────────────── */
.gcb .wrap {
    align-items: start;
    display: grid;
    gap: 52px;
    grid-template-columns: 220px 1fr;
    padding: 34px 0 60px;
}


/* ── Índice ──────────────────────────────────────────────────────────────────────────── */
.gcb .toc {
    position: sticky;
    top: 26px;
}

.gcb .toc h2 {
    border-bottom: 1px solid var(--line);
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--weight-strong);
    letter-spacing: .14em;
    margin-bottom: 12px;
    padding-bottom: 12px;
    text-transform: uppercase;
}

.gcb .toc a {
    border-left: 2px solid var(--line);
    color: var(--dim);
    display: block;
    font-size: 13.5px;
    overflow-wrap: anywhere;
    padding: 6px 0 6px 12px;
    transition: .15s;
}

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

.gcb .toc a.on {
    border-left-color: var(--lime-ink);
    color: var(--lime-ink);
}


/* ── Artículo ────────────────────────────────────────────────────────────────────────── */
.gcb .art {
    max-width: 720px;
    min-width: 0;
}

.gcb .art p {
    color: var(--prose);
    font-size: 16.5px;
    margin: 0 0 18px;
}

.gcb .art h2 {
    font-family: var(--disp);
    font-size: 26px;
    font-weight: var(--weight-display);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 44px 0 16px;
}

.gcb .art h3 {
    font-size: 17px;
    font-weight: var(--weight-strong);
    letter-spacing: -.01em;
    margin: 28px 0 10px;
}

.gcb .art ul,
.gcb .art ol {
    margin: 0 0 18px;
    padding-left: 18px;
}

.gcb .art li {
    color: var(--prose);
    font-size: 15.5px;
    margin-bottom: 8px;
}

.gcb .art strong,
.gcb .art b {
    color: var(--paper);
    font-weight: var(--weight-medium);
}

/* Enlaces dentro de la prosa: subrayado en lima oscurecido, que sobre claro sí contrasta. */
.gcb .art p a,
.gcb .art li a {
    border-bottom: 1px solid var(--line-2);
    color: var(--lime-ink);
}

.gcb .art p a:hover,
.gcb .art li a:hover {
    border-bottom-color: var(--lime-ink);
}

.gcb .art img {
    border-radius: var(--r);
    display: block;
    height: auto;
    margin: 0 auto 18px;
    max-width: 100%;
}

.gcb .art .lede {
    color: var(--dim);
    font-size: 18.5px;
    line-height: 1.6;
}


/* ── Key facts ───────────────────────────────────────────────────────────────────────── */
.gcb .facts {
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    margin: 8px 0 34px;
    padding: 22px 24px;
}

.gcb .facts h2 {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--weight-strong);
    letter-spacing: .14em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.gcb .facts dl {
    display: grid;
    gap: 16px 22px;
    grid-template-columns: 1fr 1fr;
}

.gcb .facts .row {
    min-width: 0;
}

.gcb .facts dt {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.gcb .facts dd {
    font-size: 15px;
    font-weight: var(--weight-medium);
}

.gcb .facts dd .amt {
    color: var(--lime-ink);
    font-family: var(--mono);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-strong);
}

.gcb .facts dd small {
    color: var(--faint);
    display: block;
    font-size: 12px;
    font-weight: var(--weight-body);
    margin-top: 2px;
}

.gcb .facts .pick {
    border-top: 1px solid var(--line);
    grid-column: 1 / -1;
    padding-top: 14px;
}

.gcb .facts .pick dd {
    color: var(--prose);
    font-size: 14.5px;
    font-weight: var(--weight-body);
    line-height: 1.55;
}

.gcb .facts .pick dd b {
    color: var(--lime-ink);
    font-weight: var(--weight-medium);
}

.gcb .facts .cta {
    background: var(--lime);
    border-radius: 8px;
    color: var(--on-lime);
    display: inline-block;
    font-size: 13.5px;
    font-weight: var(--weight-strong);
    margin-top: 16px;
    padding: 10px 18px;
}

.gcb .facts .cta:hover {
    background: var(--lime-hover);
}


/* ── Filas de oferta ─────────────────────────────────────────────────────────────────── */
.gcb .offers {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin: 20px 0 26px;
    overflow: hidden;
}

.gcb .offer {
    align-items: center;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr auto auto;
    padding: 13px 16px;
    transition: background .15s;
}

.gcb .offer:last-of-type {
    border-bottom: none;
}

.gcb .offer:hover {
    background: var(--panel-2);
}

.gcb .offer .who {
    min-width: 0;
}

.gcb .offer .ed {
    display: block;
    font-size: 14px;
    font-weight: var(--weight-medium);
}

.gcb .offer .st {
    color: var(--faint);
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.gcb .offer .code {
    border: 1px dashed var(--amber);
    border-radius: var(--r-xs);
    color: var(--amber-ink);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--weight-strong);
    padding: 3px 7px;
    white-space: nowrap;
}

/* Sin cupón la celda queda vacía pero conserva la columna, para que los precios de todas
   las filas sigan alineados en la misma vertical. */
.gcb .offer .code--none {
    border: none;
    padding: 0;
}

.gcb .offer .amt {
    color: var(--lime-ink);
    font-family: var(--mono);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-strong);
    text-align: right;
    white-space: nowrap;
}

.gcb .offers-all {
    background: var(--panel-2);
    border-top: 1px solid var(--line);
    color: var(--lime-ink);
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .05em;
    padding: 13px;
    text-align: center;
}

.gcb .offers-all:hover {
    background: var(--line);
}


/* ── FAQ en acordeón ─────────────────────────────────────────────────────────────────── */
.gcb details.faq-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: 9px;
    overflow: hidden;
}

.gcb details.faq-item summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 15.5px;
    font-weight: var(--weight-medium);
    gap: 16px;
    justify-content: space-between;
    list-style: none;
    padding: 15px 18px;
}

.gcb details.faq-item summary::-webkit-details-marker {
    display: none;
}

/* El <h3> original se conserva dentro del <summary> (no se pierde la jerarquía de
   encabezados), pero hereda el tamaño de la fila para no romper la maqueta. */
.gcb details.faq-item summary h3 {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    margin: 0;
}

.gcb details.faq-item summary::after {
    color: var(--lime-ink);
    content: "+";
    flex: none;
    font-family: var(--mono);
    font-size: 18px;
}

.gcb details.faq-item[open] summary::after {
    content: "\2212";
}

.gcb details.faq-item summary:focus-visible {
    outline: 2px solid var(--lime-ink);
    outline-offset: -2px;
}

.gcb details.faq-item .ans {
    padding: 0 18px 17px;
}

.gcb details.faq-item .ans p,
.gcb details.faq-item .ans li {
    color: var(--prose);
    font-size: 15px;
}

.gcb details.faq-item .ans > p:last-child {
    margin-bottom: 0;
}


/* ── Caja de autor ───────────────────────────────────────────────────────────────────── */
.gcb .author {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: flex;
    gap: 16px;
    margin: 44px 0;
    padding: 22px 0;
}

/* HUECO DEL AVATAR. No existe ninguna foto del autor en el proyecto: el único avatar del
   repo (assets/images/avatar.png) es el marcador genérico de comentarista anónimo, no una
   foto de Luis. Se deja el hueco reservado de la maqueta, sin imagen, sin foto de stock y
   sin gravatar. Cuando exista el fichero, la plantilla lo pinta sola. */
.gcb .author .av {
    background: var(--panel-2);
    border: 1px dashed var(--line-2);
    border-radius: 50%;
    flex: none;
    height: 46px;
    overflow: hidden;
    width: 46px;
}

.gcb .author .av img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gcb .author .nm {
    font-size: 15px;
    font-weight: var(--weight-strong);
}

.gcb .author p {
    color: var(--dim);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 7px 0 0;
}


/* ── Relacionados ────────────────────────────────────────────────────────────────────── */
.gcb .rule {
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: var(--weight-strong);
    letter-spacing: .14em;
    margin-top: 44px;
    text-transform: uppercase;
}

.gcb .rel-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
}

.gcb .rel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 15px 16px;
    transition: .16s;
}

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

.gcb .rel .k {
    color: var(--lime-ink);
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: var(--weight-strong);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gcb .rel h4 {
    font-size: 14.5px;
    font-weight: var(--weight-medium);
    line-height: 1.3;
    margin-top: 7px;
}


/* ── Barra de compra fija ────────────────────────────────────────────────────────────── */
.gc-buybar {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: var(--veil-2);
    border-top: 1px solid var(--line-2);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
    z-index: 50;
}

.gc-buybar.show {
    transform: translateY(0);
}

.gc-buybar .inner {
    align-items: center;
    display: flex;
    gap: 16px;
    margin: 0 auto;
    max-width: var(--shell-max-post);
    padding: 11px var(--shell-pad);
}

.gc-buybar .g {
    color: var(--paper);
    flex: 1;
    font-size: 13.5px;
    font-weight: var(--weight-medium);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-buybar .g small {
    color: var(--faint);
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: var(--weight-body);
}

.gc-buybar .p {
    color: var(--lime-ink);
    flex: none;
    font-family: var(--mono);
    font-size: 19px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-strong);
}

.gc-buybar .cta {
    background: var(--lime);
    border-radius: 8px;
    color: var(--on-lime);
    flex: none;
    font-size: 13.5px;
    font-weight: var(--weight-strong);
    padding: 11px 20px;
    transition: .15s;
    white-space: nowrap;
}

.gc-buybar .cta:hover {
    background: var(--lime-hover);
}

/* La barra vive FUERA de .gcb (es fixed y cuelga del body), así que la regla general
   `.gcb :focus-visible` no la alcanza: se le pone la suya o su CTA se queda sin foco
   visible al llegar con el tabulador. Detectado tabulando de verdad, no leyendo el CSS. */
.gc-buybar a:focus-visible {
    border-radius: var(--r-xs);
    outline: 2px solid var(--on-lime);
    outline-offset: 3px;
}


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

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


/* ── ⚠️ COLORES EN LÍNEA HEREDADOS DEL CUERPO DE LOS POSTS ───────────────────────────────
 *
 * Los cuerpos de articles_data llevan color escrito a mano en el atributo style, elegido
 * para el blog OSCURO de antes. Al pasar el blog a fondo claro, esos textos van de ilegibles
 * a invisibles. Medido sobre los 200 posts (idioma es), ocurrencias y contraste sobre #fff:
 *
 *   color:#e4e4e4   105 veces ....  1.27:1   texto casi blanco → INVISIBLE
 *   color:#d97706   330 veces ....  3.19:1   ámbar → suspende AA (4.5:1)
 *   color:#b1b1b1    20 veces ....  2.14:1   gris claro → prácticamente invisible
 *   color:#ff2e56    20 veces ....  3.63:1   rojo → suspende AA
 *
 * Se remapean al equivalente de la paleta clara. NO se toca la BD: es una capa de
 * presentación y los 200 posts × 6 idiomas se quedan como están.
 *
 * NO se tocan los que traen su PROPIO fondo oscuro en el mismo style (botón
 * `background:#374151;color:#fff` y badge `background:#00b67a;color:#ffffff`): ahí el
 * blanco es correcto y cambiarlo los rompería.
 *
 * ⚠️ RESIDUO QUE NO SE PUEDE ARREGLAR DESDE CSS: 20 ocurrencias de
 * `color:#9fbf00 !important` (2.12:1) y 20 de `color:#f44336 !important` (3.68:1). Un
 * !important EN LÍNEA gana a cualquier !important de hoja de estilos, así que solo se
 * corrigen editando esos posts. Quedan anotadas.
 */
.gcb .art [style*="color:#e4e4e4"],
.gcb .art [style*="color: #e4e4e4"],
.gcb .art [style*="color:#b1b1b1"],
.gcb .art [style*="color: #b1b1b1"] {
    color: var(--prose) !important;
}

.gcb .art [style*="color:#d97706"],
.gcb .art [style*="color: #d97706"] {
    color: var(--amber-ink) !important;
}

/* [2026-07-29] El blog vuelve a tema OSCURO, así que este remapeo se desactiva.
 * El #c8102e se eligió por contraste sobre BLANCO (5.88:1); sobre el fondo oscuro es un
 * rojo apagado que se lee peor que el original. El #ff2e56 de los posts se eligió en su
 * día justamente para fondo oscuro, así que lo correcto ahora es no tocarlo.
 * Los dos remapeos de arriba sí se quedan: apuntan a variables (--prose, --amber-ink),
 * de modo que siguen el tema activo solos y no hay nada que revertir en ellos.
 * Si algún día se reactiva el tema claro, hay que volver a poner el #c8102e aquí. */


/* ── Bloques heredados que viven DENTRO del cuerpo del post ──────────────────────────── */

/* El shortcode [offers mode="hub"] de los 13 posts con rejilla de denominaciones sigue
   pintando .offer-card (public/css/offers-card.css), que es un componente propio y de
   paleta oscura. No se toca su CSS: solo se le da aire dentro de la columna del artículo. */
.gcb .offers-shortcode-block {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin: 18px 0 28px;
}

.gcb .offers-shortcode-block .offer-card {
    margin: 0;
}

.gcb .offers-shortcode-block .offer-card__discount-code__copy-icon {
    cursor: pointer;
}

@media (max-width: 767px) {
    .gcb .offers-shortcode-block .offer-card .offer-card-row--top { height: 60px; }
    .gcb .offers-shortcode-block .offer-card .offer-card-row--bottom { height: 50px; }
    .gcb .offers-shortcode-block .offer-card .offer-card-row--bottom .offer-card-col { padding-top: 9px; padding-bottom: 9px; }
    .gcb .offers-shortcode-block .offer-card .offer-card-col__block .offer-card-col__value { font-size: 11px; line-height: 1.25; }
    .gcb .offers-shortcode-block .offer-card .offer-card-col__block .offer-card-col__label { font-size: 10px; line-height: 1.2; }
}


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

    .gcb .wrap {
        gap: 0;
        grid-template-columns: 1fr;
    }

    .gcb .toc {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--r);
        margin-bottom: 26px;
        padding: 16px 18px;
        position: static;
    }

    .gcb .toc .links {
        display: grid;
        gap: 0 16px;
        grid-template-columns: 1fr 1fr;
    }

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

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

@media (max-width: 560px) {

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

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

    /* Sin sitio para la columna del cupón: el código pasa bajo la tienda, no se pierde. */
    .gcb .offer {
        grid-template-columns: 1fr auto;
    }

    .gcb .offer .code {
        display: none;
    }

    .gc-buybar .g small {
        display: none;
    }

    .gc-buybar .inner {
        gap: 11px;
        padding: 10px var(--shell-pad-sm);
    }

    /* 390px sin scroll horizontal: los títulos del catálogo traen nombres largos sin
       espacios (slugs de juego, códigos de edición) que no caben en 354px. */
    .gcb .head h1,
    .gcb .art h2,
    .gcb .art h3,
    .gcb .rel h4,
    .gcb details.faq-item summary {
        overflow-wrap: anywhere;
    }
}

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

    .gcb *,
    .gcb *::before,
    .gcb *::after,
    .gc-buybar,
    .gc-progress {
        transition: none !important;
        animation: none !important;
    }

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

/* ── PORTADA DEL POST ─────────────────────────────────────────────────────────────────
 * [2026-07-29] Encargo de Luis: la imagen del thumbnail arriba del todo, justo debajo
 * del H1. Misma imagen que la tarjeta del listado.
 * `aspect-ratio` fijo + `object-fit:cover` para que no haya salto de layout mientras
 * carga (CLS) sea cual sea el tamaño real del fichero, que varía entre posts.
 */
.gcb .post-cover {
    margin: 22px 0 0;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--panel);
}
/* [2026-07-29] Sin `aspect-ratio` ni `object-fit:cover`: eso era lo que RECORTABA las
   portadas (Luis lo vio en halo-campaign-evolved). Cada portada tiene su propia
   proporción, así que se respeta la natural y solo se limita el ancho. */
.gcb .post-cover img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 560px) {
    .gcb .post-cover { margin-top: 18px; border-radius: var(--r); }
}

/* ── CAJAS DE AVISO CON FONDO CLARO EN LÍNEA ──────────────────────────────────────────
 * [2026-07-29] Luis: "los textos dentro de los TIPS amarillos no se ven".
 * Los cuerpos de los posts traen cajas con el fondo escrito a mano en el atributo style
 * (#fef9c3 amarillo 33 usos, #fff3cd ámbar 2, #fef2f2 rojo claro 3). El fondo es CLARO
 * pero el texto hereda el color del tema OSCURO (--prose, casi blanco) -> ilegible.
 * Se fuerza texto oscuro dentro de la caja y se propaga a los hijos, porque el <strong>
 * de "Our tip:" hereda --paper y desaparecía igual.
 * No se toca la BD: es capa de presentación, y los 200 posts x 6 idiomas se quedan como
 * están. Si algún día vuelve el tema claro, esta regla es inofensiva (ya era negro).
 */
.gcb .art [style*="background-color:#fef9c3"],
.gcb .art [style*="background-color: #fef9c3"],
.gcb .art [style*="background-color:#fff3cd"],
.gcb .art [style*="background-color: #fff3cd"],
.gcb .art [style*="background-color:#fef2f2"],
.gcb .art [style*="background-color: #fef2f2"] {
    color: #1a1a1a !important;
}

.gcb .art [style*="background-color:#fef9c3"] *,
.gcb .art [style*="background-color: #fef9c3"] *,
.gcb .art [style*="background-color:#fff3cd"] *,
.gcb .art [style*="background-color: #fff3cd"] *,
.gcb .art [style*="background-color:#fef2f2"] *,
.gcb .art [style*="background-color: #fef2f2"] * {
    color: inherit !important;
}

/* Un enlace dentro de la caja tiene que seguir viéndose como enlace: mismo negro pero
   subrayado, en vez de perderse entre el texto. */
.gcb .art [style*="background-color:#fef9c3"] a,
.gcb .art [style*="background-color: #fef9c3"] a,
.gcb .art [style*="background-color:#fff3cd"] a,
.gcb .art [style*="background-color: #fff3cd"] a,
.gcb .art [style*="background-color:#fef2f2"] a,
.gcb .art [style*="background-color: #fef2f2"] a {
    border-bottom: 1px solid rgba(0, 0, 0, .45);
    text-decoration: none;
}

/* ── PORTADA: TAMAÑO REDUCIDO ─────────────────────────────────────────────────────────
 * [2026-07-29] Luis: "la imagen que has puesto en los post es demasiado tocha".
 * Se limita el ancho en vez de recortar más el alto: así la proporción de la imagen no
 * cambia y la cabecera no se come la primera pantalla. En movil ocupa el ancho completo,
 * donde 460px ya es todo el viewport.
 */
/* Un pelín más grande que los 460px iniciales y CENTRADA (encargo de Luis). El tope de
   620px la deja por debajo del ancho de lectura del cuerpo (720px), así que sigue leyéndose
   como portada y no como una imagen a sangre que se come la primera pantalla. */
.gcb .post-cover {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}