/*
Theme Name: Sindicato Único CLM (hijo de Astra)
Theme URI: https://sindicatounico.org/
Description: Child theme de Astra con las correcciones del informe de diseño del 2026-10-06 (contraste, cascada, objetivos táctiles y aviso de cookies), fuera del tema padre.
Author: Sindicato Único de Castilla-La Mancha
Author URI: https://sindicatounico.org/
Template: astra
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: su-hijo
Tags: child-theme, accessibility
*/

/* ==========================================================================
   CÓMO SE CARGA ESTE FICHERO
   --------------------------------------------------------------------------
   Lo encola functions.php con el handle `su-hijo-css`, dependiendo de
   `astra-theme-css` y de `su-tema-css` (la capa propia del padre) y con
   prioridad 999, así que se imprime DESPUÉS de:
       1. astra-theme-css   (main.min.css de Astra)
       2. el CSS en línea de Astra (astra-theme-css-inline-css)
       3. su-tema.css       (wp-content/themes/astra/assets/css/su-tema.css)
       4. su-tema-inline-css (solo declara --su-sello)
   Ese orden importa: cuando empatamos en especificidad, ganamos por orden.
   ==========================================================================

   REGLAS DE ESTE FICHERO
   --------------------------------------------------------------------------
   · No se declara ninguna variable de la paleta del padre que no nos
     corresponda. En particular NO se declara `--su-sello`: la inyecta
     `su-tema.php` (del padre) en `su-tema-inline-css` con la URL del sello y,
     como este fichero va después, si la redeclarásemos aquí la pisaríamos y la
     marca de agua del hero y de la banda desaparecería. Ver la sección 02.
   · Se usan valores literales (o variables propias `--suc-*`) en vez de las
     variables del padre. Este fichero tiene que seguir funcionando aunque el
     padre cambie de nombre sus variables.
   · Casi todo gana por ESPECIFICIDAD, no por `!important`. Cada `!important`
     que queda está justificado en línea: solo se usa donde el valor original
     es un **estilo en línea** (atributo `style="…"`) o viene de la plantilla
     del plugin de cookies, que es lo único que la cascada normal no puede
     batir.
   · No se tocan los estilos de foco (`:focus-visible`) ni los enlaces de
     salto al contenido salvo lo indicado y justificado en la sección 09.
   ==========================================================================

   ÍNDICE
     01. Encabezados dentro de bloques oscuros ............ P0-1, P1-1
     02. Variable --su-sello: por qué NO se toca
     03. Botón blanco dentro de bloques oscuros ........... P1-2
     04. Contraste del gate de elecciones sindicales ...... P0-2
     05. Contraste del contenido con estilos en línea ..... P1-3, P2-2, P2-3
     06. Aviso de cookies ................................ P1-4, P3-6
     07. Objetivos táctiles: menú móvil y controles ....... P2-1
     08. Foco visible (pulido) ............................
     09. Lo que NO se toca aquí y por qué
   ========================================================================== */

/* --------------------------------------------------------------------------
   02. Variables propias
   --------------------------------------------------------------------------
   Espacio de nombres `--suc-` (sindicato único child) para no colisionar
   nunca con las `--su-*` del padre. IMPORTANTE: aquí no va `--su-sello`. */
:root {
    --suc-rojo-claro: #e35d68;   /* rojo de marca aclarado: pasa 4,5:1 sobre fondos casi negros */
    --suc-gris-texto: #5a5a5a;   /* el mismo gris que ya usa su-tema.css (6,9:1 sobre blanco) */
    --suc-negro: #141414;
    --suc-blanco: #ffffff;
}

/* --------------------------------------------------------------------------
   01. Encabezados dentro de bloques oscuros  (P0-1 y P1-1)
   --------------------------------------------------------------------------
   Qué arregla
     · P0-1: el <h1> "Sindicato Único de Castilla-La Mancha" del hero de la
       portada salía rgb(20,20,20) sobre #0a0a0a = 1,07:1 (invisible).
     · P1-1: los <h2>/<h3> de la banda "Únete a la lucha obrera" salían igual.

   Causa raíz (verificada en el CSS servido, no es una sospecha)
     Astra fija el color de los encabezados con una regla DIRECTA:
         h1,h2,h3,h4,h5,h6 { color: var(--ast-global-color-2) }   (valor #141414)
       (en `astra-theme-css-inline-css`; y `h1..h6` en main.min.css con #808285)
     Una regla directa sobre el propio `h1` gana SIEMPRE al `color` heredado de
     un contenedor, por muy específico que sea. Por eso `.su-heroe{color:#fff}`
     del padre no pinta nada en los titulares.

   Por qué estos selectores ganan sin `!important`
     `.su-heroe h1` = (0,1,1) > la regla de Astra `h1` = (0,0,1) y también >
       `.entry-content :where(h1,…)` = (0,1,0), porque `:where()` no suma.
     El pie del padre ya usa este mismo patrón (`.su-pie h3{color:#fff}`).

   Alcance: solo los tres contenedores oscuros. Ningún titular sobre fondo
   claro (.su-seccion, .su-papel, tarjetas de provincias) se toca: siguen en
   #141414 como ahora. Los párrafos tampoco se tocan (ya tienen color propio
   en el padre: rgba(255,255,255,.88) en el hero y .78 en las tarjetas). */
.su-heroe h1, .su-heroe h2, .su-heroe h3, .su-heroe h4, .su-heroe h5, .su-heroe h6,
.su-banda h1, .su-banda h2, .su-banda h3, .su-banda h4, .su-banda h5, .su-banda h6,
.su-oscuro h1, .su-oscuro h2, .su-oscuro h3, .su-oscuro h4, .su-oscuro h5, .su-oscuro h6 {
    color: var(--suc-blanco);   /* #fff sobre #0a0a0a = 19,8:1 (antes 1,07:1) */
}

/* --------------------------------------------------------------------------
   03. Botón blanco dentro de bloques oscuros  (P1-2)
   --------------------------------------------------------------------------
   Qué arregla
     El botón "Quiénes somos" del hero (`.su-btn--blanco`, texto #141414 sobre
     fondo blanco) salía blanco sobre blanco = 1:1: parecía un botón vacío.

   Causa raíz
     su-tema.css: 92-94  `.su-banda a, .su-heroe a, .su-oscuro a { color:#fff }`  (0,1,1)
     su-tema.css: 213    `.su-btn--blanco { background:#fff; color: var(--su-negro) }` (0,1,0)
     El enlace (0,1,1) gana a la clase del botón (0,1,0).

   Por qué estos selectores ganan sin `!important`
     `.su-heroe .su-btn--blanco` = (0,2,0) > `.su-heroe a` = (0,1,1).
     Las variantes :hover/:focus/:focus-visible suben a (0,3,0) y también
     ganan a los `:hover` del padre (0,2,0). El estado `:visited` lo cubre el
     selector base: `.su-heroe a` no lleva pseudo-clase.

   No se tocan `.su-btn--rojo` (blanco sobre rojo, 6,0:1) ni `.su-btn--borde`
   (blanco con borde claro sobre fondo oscuro): ya tienen su propio color. */
.su-heroe .su-btn--blanco,
.su-banda .su-btn--blanco,
.su-oscuro .su-btn--blanco,
.su-heroe .su-btn--blanco:visited,
.su-banda .su-btn--blanco:visited,
.su-oscuro .su-btn--blanco:visited,
.su-heroe .su-btn--blanco:hover,
.su-banda .su-btn--blanco:hover,
.su-oscuro .su-btn--blanco:hover,
.su-heroe .su-btn--blanco:focus,
.su-banda .su-btn--blanco:focus,
.su-oscuro .su-btn--blanco:focus,
.su-heroe .su-btn--blanco:focus-visible,
.su-banda .su-btn--blanco:focus-visible,
.su-oscuro .su-btn--blanco:focus-visible {
    color: var(--suc-negro);   /* #141414 sobre #fff = 18,4:1 */
}

/* --------------------------------------------------------------------------
   04. Contraste del gate de elecciones sindicales  (P0-2)
   --------------------------------------------------------------------------
   Qué arregla (medido por axe en las 4 capturas de /elecciones-sindicales/)
     · .wpcf7-list-item-label  #141414 sobre #1c1c1c = 1,08:1  ← el texto
       "He leído y acepto la política de protección de datos" era ilegible.
       Es un consentimiento RGPD: el usuario firmaba a ciegas.
     · a[href$="politica-de-privacidad/"]  #c11e2d sobre #1c1c1c = 2,83:1.

   Origen de cada color (comprobado)
     · #141414 del label: regla de Astra `label,legend{color:var(--ast-global-color-2)}`
       → (0,0,1). No es un estilo en línea.
     · #c11e2d del enlace: regla de Astra `a{color:#c11e2d}` → (0,0,1). Tampoco
       es un estilo en línea.
     Por eso aquí NO hace falta `!important`: `.elec-gate-wrap label` (0,1,1) y
   `.elec-gate-wrap a` (0,1,1) ganan de sobra. Es una corrección del borrador 03,
   que usaba `!important` en todo el bloque sin necesidad.

   AVISO IMPORTANTE — no se pinta el contenedor
     `.elec-gate-wrap` tiene, además de los campos, un NODO DE TEXTO huérfano:
     el CSS del gate se guardó como texto visible en la página en vez de dentro
     de un <style> (ver `snippets/02-contenido-elecciones-css-huerfano.md`).
     Ese texto es lo que axe mide como 1,62:1 (#3a3a3a sobre #141414).
     Si aquí pusiéramos `.elec-gate-wrap{color:#fff}` el nodo pasaría de
     invisible a BLANCO y BRILLANTE: se arreglaría el ratio y empeoraría el
     aspecto. El arreglo correcto es de CONTENIDO (borrar ese texto). Hasta que
     se haga, la violación de axe sobre `.elec-gate-wrap` sigue ahí a propósito. */
.elec-gate-wrap p,
.elec-gate-wrap label,
.elec-gate-wrap legend,
.elec-gate-wrap .elec-toggle-label,
.elec-gate-wrap .wpcf7-list-item-label,
.elec-gate-wrap .wpcf7-list-item-label span,
.elec-gate-wrap .wpcf7-acceptance,
.elec-gate-wrap .wpcf7-response-output {
    color: var(--suc-blanco);   /* 17,0:1 sobre #1c1c1c y 18,4:1 sobre #141414 */
}

.elec-gate-wrap a,
.elec-gate-wrap a:visited,
.elec-gate-wrap .wpcf7-list-item-label a {
    color: var(--suc-rojo-claro);   /* #e35d68 sobre #1c1c1c = 4,89:1 */
    text-decoration: underline;     /* no depender solo del color (WCAG 1.4.1) */
}

/* --------------------------------------------------------------------------
   05. Contraste del contenido con estilos en línea  (P1-3, P2-2, P2-3)
   --------------------------------------------------------------------------
   Aviso: los cuatro casos de esta sección son colores puestos como ATRIBUTO
   `style="…"` dentro del contenido de las páginas. Ninguna regla de hoja de
   estilo puede ganar a un estilo en línea sin `!important`: por eso aquí sí se
   usa, y está justificado uno a uno. El arreglo bueno a medio plazo es cambiar
   el color en el bloque de Gutenberg (ver plan-implantacion.md, pasos 5 y 7);
   esto es el parche reversible mientras tanto.
   -------------------------------------------------------------------------- */

/* P1-3a · /afiliate/ — rótulo "Afiliación web": #c11e2d sobre #141414 = 3,06:1
   El span es  <span style="color:#c11e2d;font-weight:800;letter-spacing:2px;…">
   y cuelga de `.rgpd-gate-wrap > div > p`, dentro de la banda oscura.
   Selector deliberadamente LARGO: en esa misma página hay seis <strong> rojos
   sobre fondo BLANCO dentro del mismo `.rgpd-gate-wrap` (la caja de protección
   de datos). Un `[style*="color:#c11e2d"]` a secas los teñiría de rojo claro
   sobre blanco y los dejaría por debajo del mínimo. Con la ruta directa
   (`> div > p > span`) solo cae el rótulo de la banda. */
.rgpd-gate-wrap > div > p > span[style*="color:#c11e2d"] {
    color: var(--suc-rojo-claro) !important;   /* #e35d68 sobre #141414 = 5,29:1 */
}

/* P1-3b · /afiliate/ — chip de WhatsApp: #fff sobre #25D366 = 1,98:1
   El <a> lleva `style="…background:#25D366;color:#fff…"`. Se arregla sin salir
   del verde de marca: texto casi negro encima. */
a[href*="wa.me"][style*="background:#25D366"],
a[href*="wa.me"][style*="background: #25D366"] {
    color: var(--suc-negro) !important;   /* #141414 sobre #25D366 = 9,29:1 */
}

/* P2-3 · /contacto/ — etiquetas "Email", "Teléfono", "Sede"
   `style="…color:#888…"` sobre blanco = 3,54:1 (12 px en negrita). */
.entry-content [style*="color:#888"],
.entry-content [style*="color:#888888"] {
    color: var(--suc-gris-texto) !important;   /* #5a5a5a sobre #fff = 6,90:1 */
}

/* P2-2 · /documentos-recursos/ — insignia "PRÓXIMAMENTE" y descripción
   `style="display:inline-block;background:#999;color:#fff…"` → 2,38:1 (texto blanco)
   `style="…color:#777…"` sobre #f4f4f4 → 3,09:1 */
.entry-content [style*="background:#999"] {
    background: var(--suc-gris-texto) !important;   /* blanco encima = 6,90:1 */
}
.entry-content [style*="color:#777"] {
    color: var(--suc-gris-texto) !important;        /* sobre #f4f4f4 = 6,27:1 */
}

/* P3 · /elecciones-sindicales/ — aviso de fuentes de la guía
   `.su-fuentes__aviso` del padre usa --su-gris-claro (#8a8a8a) sobre #f4f1ee
   = 3,06:1. Aquí NO hace falta `!important`: mismo selector que el padre
   (0,1,0) y este fichero se imprime después. */
.su-fuentes__aviso {
    color: var(--suc-gris-texto);   /* 6,13:1 sobre #f4f1ee */
}

/* --------------------------------------------------------------------------
   06. Aviso de cookies  (P1-4 y P3-6)
   --------------------------------------------------------------------------
   Qué arregla
     · P1-4: el aviso tapaba contenido en 8 páginas (en móvil ~280 px de 800 =
       35 % del viewport, incluidos los dos CTA del hero y media docena de
       enlaces del menú desplegable; en portátil, la primera columna de
       contenido). Aquí se recorta la huella; el quitar el solape del todo es
       CONFIGURACIÓN de CookieYes (ver plan-implementación, paso 6).
     · P3-6: los tres botones azules (#1863DC) son el único elemento del sitio
       fuera de la paleta del sindicato.

   Por qué se usan DOS mecanismos distintos aquí
     a) Estructura (ancho, márgenes, alturas): `html body …` sube a (0,1,2).
        CookieYes inyecta su CSS con JavaScript DESPUÉS de nuestra hoja, así
        que a igual especificidad ganaría el plugin; con (0,1,2) ganamos por
        especificidad en cualquier orden y no hace falta `!important`.
     b) Colores de los botones: vienen como estilo EN LÍNEA en la plantilla del
        plugin (`style="color:#FFFFFF;background-color:#1863DC"`), así que sí
        necesitan `!important`.
   -------------------------------------------------------------------------- */

/* a) Huella del aviso: más estrecho, más compacto y con la descripción en su
   propio hueco desplazable para que no crezca sin control. */
html body .cky-consent-container {
    max-width: 360px;
    font-size: 13.5px;
    line-height: 1.45;
}
html body .cky-consent-bar {
    padding: 14px 16px;
    border-radius: 10px;
}
html body .cky-title {
    font-size: 15px;
    margin-bottom: 6px;
}
html body .cky-notice-des {
    max-height: 4.8em;
    overflow: auto;
}
html body .cky-btn {
    min-height: 44px;        /* objetivos táctiles, ver sección 07 */
    font-weight: 700;
}
html body .cky-btn-close,
html body .cky-show-desc-btn,
html body .cky-accordion-btn {
    min-height: 44px;
}
html body .cky-btn-close {
    min-width: 44px;
}

/* b) Paleta de marca en los botones (el color original es un estilo en línea
   de la plantilla del plugin: sin `!important` no hay forma de ganarle). */
html body .cky-btn-accept {
    background: #c11e2d !important;   /* rojo de marca en vez del azul del plugin */
    border-color: #c11e2d !important;
    color: #fff !important;           /* 6,02:1 sobre #c11e2d */
}
html body .cky-btn-reject {
    background: transparent !important;
    border: 2px solid var(--suc-negro) !important;
    color: var(--suc-negro) !important;   /* 18,4:1 sobre el blanco de la barra */
}
html body .cky-btn-customize {
    color: #c11e2d !important;            /* enlace secundario, en rojo de marca */
    border-color: #c11e2d !important;
}

/* c) Móvil y tablet: barra pegada abajo, con tope de altura. Con la
   descripción recortada a 4,8em el aviso baja de ~280 px a ~150 px y deja
   libres los CTA del hero, que están a ~400-520 px del borde superior. */
@media (max-width: 921px) {
    html body .cky-consent-container {
        width: auto;
        max-width: none;
        left: 0;
        right: 0;
        bottom: 0;
    }
    html body .cky-consent-bar {
        max-height: 48vh;
        overflow: auto;
        border-radius: 12px 12px 0 0;
    }
}

/* --------------------------------------------------------------------------
   07. Objetivos táctiles: menú móvil y controles  (P2-1)
   --------------------------------------------------------------------------
   Qué arregla
     El botón del menú móvil mide 42×42 px. El sitio YA intenta agrandarlo,
     pero con el selector equivocado:
        .ast-mobile-menu-trigger { width:90px !important; … }        (bloque custom-mobile-menu)
        .ast-mobile-menu-trigger { width:80px !important; … }        (bloque anónimo del <head>)
     El botón real tiene la clase `ast-mobile-menu-trigger-minimal`:
        <button class="menu-toggle main-header-menu-toggle ast-mobile-menu-trigger-minimal">
     → los dos bloques son CSS muerto. Aquí va el selector corregido; los dos
       bloques viejos hay que BORRARLOS (ver snippets/01) para no dejar reglas
       contradictorias si alguien los "arregla" en el futuro.

   Por qué gana sin `!important` (y por qué el borrador 05 se queda corto)
     Las reglas de Astra que fijan el tamaño son:
       .ast-button-wrap .menu-toggle                            → (0,2,0)  width/height en em
       .ast-button-wrap .menu-toggle.main-header-menu-toggle    → (0,3,0)  width:auto; padding
       [data-section="…"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg
                                                                → (0,4,0)  20×20 px
     El selector de abajo es (0,5,0) y el del icono también (0,5,0), así que
     ganan por especificidad en cualquier orden de carga. El borrador 05 usaba
     `!important` porque partía de `.ast-mobile-menu-trigger-minimal` (0,1,0),
     que efectivamente pierde; con la ruta completa no hace falta. */
@media (max-width: 921px) {
    [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg {
        width: 26px;
        height: 26px;
    }
}

/* Barra superior y pie: aquí el criterio es proporcional, no dogmático.
   WCAG 2.2 AA (2.5.8) exige 24×24 px y ya se cumple (los enlaces del pie
   miden 106×17 y los de la barra 39×20). El umbral de 44×44 es de WCAG 2.5.5
   (AAA): aplicarlo a enlaces de texto apilados haría el pie ~120 px más alto.
   Se amplía el área de toque sin cambiar la densidad visual.
   Los enlaces de salto al contenido (`.su-saltar-contenido`, 1×1 px) NO se
   tocan: están ocultos a propósito y no son un objetivo táctil. */
.su-barra-superior a,
.su-pie a {
    display: inline-block;
    padding: 8px 2px;
}

/* --------------------------------------------------------------------------
   08. Foco visible (pulido, NO es un arreglo)
   --------------------------------------------------------------------------
   El tema ya tiene foco: su-tema.css usa
     :focus-visible { outline: 3px solid rgba(193,30,45,.45); outline-offset: 2px; }
   Este fichero NO lo elimina: lo mantiene y solo lo hace opaco, porque el rojo
   al 45 % sobre el rojo de marca se ve poco. Se conserva el mismo grosor, el
   mismo desplazamiento y el mismo color; solo cambia la transparencia.
   Rollback: borrar este bloque devuelve exactamente el foco del padre. */
:focus-visible {
    outline: 3px solid #c11e2d;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   09. Lo que NO se toca aquí y por qué
   --------------------------------------------------------------------------
   · P3-1 (crédito "Tema Astra para WordPress" sin subrayar). Comprobado en el
     HTML servido hoy: ese enlace vive en `.site-below-footer-wrap`, que
     su-tema.css oculta con `display:none !important`. axe solo lo midió en las
     7 páginas que se sirvieron con la versión vieja del pie. Con el pie actual
     no es visible, así que NO se añade ningún subrayado.
   · P2-4 (logo_512.png da 404). No se arregla con CSS: es un fichero que falta,
     usado en og:image, en --su-sello y en el <img class="su-pie__sello">.
     Ver plan-implantacion.md, paso 4.
   · P2-5 (dos contentinfo, sin <main> en la 404, barra superior y WhatsApp
     fuera de landmarks). Es marcado, no estilo; ver snippets/04.
   · P2-6 (sin h1 en /noticias/) y P2-7 (h2 "Inicio" antes del h1): ajustes de
     Astra, no CSS. Ocultar el h2 por CSS dejaría el encabezado en el DOM y
     seguiría rompiendo `heading-order`; ver plan-implantacion.md, paso 7.
   · P2-8 y P1-5: son de medición (CLS en /afiliate/ y LCP en /contacto/).
   · La marca de agua y el resto del sistema visual del padre: intactos.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. Noticias laborales (/noticias-laborales/)
   --------------------------------------------------------------------------
   Qué arregla
     a) Las pestañas Igualdad, Salud laboral y Prevención no pertenecen a esta
        página: duplican el menú y se llevan al visitante fuera. Las genera el
        plugin en el shortcode [noticias_laborales] y no acepta ningún atributo
        para ocultarlas (solo max/colab/local), así que se ocultan por CSS.
        Se queda Actualidad, que es la sección de esta página.
     b) La noticia destacada reservaba SIEMPRE dos columnas (foto + texto). Si la
        noticia no trae foto, la primera columna quedaba en blanco: media tarjeta
        vacía. Sin foto, una sola columna.
     c) Las tarjetas sin foto se estiraban a la altura de las que sí la tienen
        (height:100%), dejando un hueco blanco grande bajo el texto. Con
        align-items:start cada tarjeta mide lo que mide su contenido; para que la
        rejilla conserve ritmo visual, las que no tienen foto llevan una franja
        roja de marca arriba.
     d) Un poco más de densidad: menos aire entre y dentro de las tarjetas.

   Alcance: solo esta página y solo estos componentes. El sistema visual del
   padre y el resto de páginas no se tocan.
   -------------------------------------------------------------------------- */

/* a) Fuera las tres pestañas que no son de esta página. */
.su-pestanas a:not(.activa) {
    display: none;
}

/* b) La destacada, a una columna cuando no hay imagen que enseñar. */
.su-destacada:not(:has(.su-destacada__media img)) {
    grid-template-columns: minmax(0, 1fr);
}
.su-destacada:not(:has(.su-destacada__media img)) .su-destacada__media {
    display: none;
}

/* c) Ni tarjetas estiradas ni huecos por debajo. */
.su-rejilla-notas {
    display: block;
    columns: 2;
    column-gap: 20px;
}
.su-rejilla-notas .su-nota {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
@media (max-width: 700px) {
    .su-rejilla-notas {
        columns: 1;
    }
}
.su-nota:not(:has(.su-nota__media))::before {
    content: '';
    display: block;
    height: 6px;
    background: var(--suc-rojo);
}

/* e) La barra lateral se queda pegada al scroll. Antes medía 1.250 px y la
   columna de al lado tiene 7.972 px: quedaban unos 6.700 px de vacío a la
   derecha, que es lo que daba sensación de página a medio hacer. Pegada, esa
   columna siempre tiene contenido y el bloque sigue a la vista al leer. */
.su-noticias aside {
    position: sticky;
    top: 24px;
}

/* d) Densidad: menos relleno en la tarjeta y títulos más compactos. */
.su-nota__cuerpo {
    padding: 16px 16px 18px;
}
.su-nota__titulo {
    line-height: 1.25;
}

   -------------------------------------------------------------------------- */