/* ==========================================================================
   1. REGISTRO TIPOGRÁFICO CORPORATIVO (EL OBRERO)
   ========================================================================== */

/* Instalación de la fuente Berlingske */
@font-face {
    font-family: 'Berlingske Serif Medium';
    src: url('../fonts/Berlingske/berlingskeserif-md-webfont.woff2') format('woff2'),
         url('../fonts/Berlingske/berlingskeserif-md-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Aplicar Berlingske a los titulares */
h1, h2, h3, h4, h5, h6, .gkMenu > ul > li > a, .news-title {
    font-family: 'Berlingske Serif Medium', Georgia, serif !important;
}

/* Aplicar Times New Roman a la lectura de artículos con espacio limpio */
p, 
.article-body p, 
.item-page p,
.news-content p {
    font-family: 'Times New Roman', Times, Georgia, serif !important;
    font-size: 17px;
    line-height: 1.6;
    color: #222222;
    margin-bottom: 24px !important; 
}

/* ==========================================================================
   2. CONFIGURACIÓN DE ENLACES DORADOS (HOVERS COMPARTIDOS)
   ========================================================================== */
a:hover, a:focus {
    color: #C69214 !important;
    text-decoration: none;
}

.gkMenu > ul > li a:hover,
.gkMenu > ul > li.active > a,
.gkMenu > ul > li:hover > a {
    color: #C69214 !important;
}

.news-title a:hover {
    color: #C69214 !important;
}

/* ==========================================================================
   3. CONFIGURACIÓN TIPOGRÁFICA Y DE LECTURA (EL OBRERO)
   ========================================================================== */

@font-face {
    font-family: 'Berlingske Serif Medium';
    src: url('../fonts/Berlingske/berlingskeserif-md-webfont.woff2') format('woff2'),
         url('../fonts/Berlingske/berlingskeserif-md-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6, .gkMenu > ul > li > a, .news-title {
    font-family: 'Berlingske Serif Medium', Georgia, serif !important;
}

p, .article-body p, .item-page p, .news-content p {
    font-family: 'Times New Roman', Times, Georgia, serif !important;
    font-size: 17px;
    line-height: 1.3;
    color: #222222;
    margin-bottom: 24px !important; 
}

/* ==========================================================================
   4. CONFIGURACIÓN DE COLORES HOVER (ENLACES DORADOS)
   ========================================================================== */
a:hover, a:focus {
    color: #C69214 !important;
    text-decoration: none;
}

.gkMenu > ul > li a:hover,
.gkMenu > ul > li.active > a,
.gkMenu > ul > li:hover > a {
    color: #C69214 !important;
}

.news-title a:hover {
    color: #C69214 !important;
}

/* ==========================================================================
   5. CONFIGURACIÓN DE COLORES HOVER (ENLACES DORADOS)
   ========================================================================== */

#gkHeaderNav .gkMainMenu .gkmenu.level0 > li > a, #gkHeaderNav .gkMainMenu .gkmenu.level0 > li > span {
  height: 80px;
  line-height: 80px;
  padding: 0 15px;
  font-size: 11px !important;
  font-weight: bold;
  text-decoration: none;
}

.gkTopBar {
  background: #f7cf3c !important;
  height: 40px !important;
  line-height: 40px;
  color: rgba(255,255,255,0.5);
  padding-left: 0px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
}

.gkTopBar2 {
  background: #f1f1f1 !important;
  height: 40px;
  line-height: 40px;
  color: rgba(255,255,255,0.5);
  padding-left: 0px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
}

#gkBg {
  padding-top: 80px !important;
  -webkit-transition: transform 350ms;
  -moz-transition: transform 350ms;
  -o-transition: transform 350ms;
  transition: transform 350ms;
  -ms-transition: transform 350ms;
}

#gkPageContent {
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0 0 0 !important; /* FIJACIÓN DE MARGEN: Deja 30px fijos arriba y 0 abajo */
    /*border-top: 1px solid #EAEAEA !important;*/
  /*border-top: 1px solid #EAEAEA !important;*/
}

#gkPageContent, #gkBottom, #gkFooter {
  max-width: 1350px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   1. ESTILOS BASE COMPARTIDOS (NUEVA FUENTE CORPORATIVA UNIFICADA)
   ========================================================================== */
.posicion-logo-personalizada {
    width: 100% !important;
    display: block !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
}

.bloque-cabecera-obrero {
    display: flex !important;
    flex-direction: column !important; /* Fuerza las dos líneas */
    align-items: center !important; /* Centrado horizontal absoluto */
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Aplicamos tu tipografía exacta al título del periódico */
.logo-texto-obrero a {
    color: #000000 !important;
    font-family: 'Berlingske Serif Medium', Georgia, serif !important; /* FUENTE CORPORATIVA */
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.0 !important; /* Pega el eslogan al texto */
    display: block !important;
}

/* Aplicamos tu tipografía exacta al eslogan */
.slogan-texto-obrero {
    color: #323232 !important;
    font-family: 'Berlingske Serif Medium', Georgia, serif !important; /* FUENTE CORPORATIVA UNIFICADA */
    font-weight: normal !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   2. REGLAS EXCLUSIVAS PARA PC (BORDES ENMARCADOS AL ANCHO REAL DE 1350PX)
   ========================================================================== */
@media (min-width: 769px) {
    /* 1. ENCENDEMOS tu nueva posición de módulo con el logo centrado */
    .posicion-logo-personalizada {
        display: block !important;
        width: 100% !important;
        background-color: #FFFFFF !important;
    }

    /* 2. OCULTACIÓN QUIRÚRGICA: Apagamos el logo viejo de fábrica pero permitimos que el menú respire */
    #gkLogo, .gkLogoArea {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Limpieza de contenedores e inyecciones de Gavick */
    #gkHeader, #gkBg, #gkHeaderNav, .gkHeaderNav, #gkMainMenu, .gkMainMenu {
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Separación equilibrada del bloque del logo */
    .bloque-cabecera-obrero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 25px !important;    /* Espacio respecto a la franja gris */
        margin-bottom: 22px !important; /* Espacio antes del menú de secciones */
    }

    /* Tamaños ajustados para PC */
    .logo-texto-obrero a { 
        font-size: 38px !important; 
    }
    .slogan-texto-obrero { 
        font-size: 12px !important; 
        letter-spacing: 1px !important; 
        margin-top: 0px !important; /* Clava el eslogan pegado arriba */
    }

    /* 4. EL RIEL DE LOS BORDES COMPACTO: Forzamos la longitud exacta de la plantilla (1350px) */
    .gkMainMenu > ul, 
    #gkMainMenu > ul {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        justify-content: center !important; 
        align-items: center !important; /* Centrado vertical absoluto exacto del texto */
        
        width: 100% !important;
        max-width: 1350px !important; /* FIJA LOS BORDES MILIMÉTRICAMENTE CON EL ANCHO DE TU PORTADA */
        margin: 0 auto !important; /* Centra el riel de forma simétrica en el monitor */
        
        /* PINCHAMOS LOS DOS BORDES EN ESTA LISTA DE ANCHO FIJO */
        border-top: 1px solid #EAEAEA !important;
        border-bottom: 1px solid #111 !important;
        
        height: 45px !important;
        min-height: 34px !important;
        padding: 0 !important; 
        box-sizing: border-box !important;
        float: none !important;
        list-style: none !important;
    }

    /* 5. ELEMENTOS INTERNOS Y ENLACES (ALINEACIÓN VERTICAL MATEMÁTICA) */
    .gkMainMenu > ul > li,
    #gkMainMenu > ul > li {
        float: none !important; 
        display: inline-flex !important;
        align-items: center !important; 
        height: 34px !important; 
        margin: 0 12px !important; 
        padding: 0 !important;
        white-space: nowrap !important; 
    }

    .gkMainMenu > ul > li > a,
    #gkMainMenu > ul > li > a,
    .gkMainMenu a {
        display: inline-flex !important;
        align-items: center !important; 
        height: 34px !important; 
        line-height: 34px !important; /* Sincroniza el interlineado exacto de las letras */
        padding: 0 !important; 
        margin: 0 !important;
        font-family: 'Berlingske Serif Medium', Georgia, serif !important;
    }
}

/* ==========================================================================
   3. INTERRUPTOR INTELIGENTE PARA LA VERSIÓN MÓVIL (PANTALLAS PEQUEÑAS)
   ========================================================================== */
@media (max-width: 768px) {
    /* APAGAMOS por completo tu nueva posición de módulo para que no rompa el móvil */
    .posicion-logo-personalizada {
        display: none !important;
        height: 0 !important;
    }

    /* ENCENDEMOS y liberamos la cabecera original nativa de la plantilla de Gavick */
    .gkHeaderTop, #gkHeaderTop {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        background-color: #FFFFFF !important;
        position: relative !important;
        padding: 0 !important; 
        margin: 0 !important;
        border-top: none !important; 
        border-bottom: 0px solid #EAEAEA !important; /* Línea gris limpia que cierra la cabecera */
        box-sizing: border-box !important;
        margin-top: 10px !important;
    }

    /* Forzamos a que el logo de texto nativo de la plantilla sea visible en el teléfono */
    #gkLogo, .gkLogoArea {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: left !important; 
        padding-left: 15px !important;
    }

    /* Forzamos a que la hamburguesa nativa original de la plantilla aparezca en su sitio de fábrica */
    #static-aside-menu-toggler, 
    .menu-toggle, 
    #gkMobileMenuOpen,
    #gkMobileMenu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 34% !important;
        transform: translateY(-50%) !important; 
        right: 15px !important;
        z-index: 99999 !important;
    }

    /* BAJAMOS EL CONTENIDO Y LE APLICAMOS UN BORDE SUPERIOR DE SEPARACIÓN EN MÓVIL */
    #gkPageContent, .gkPageContent, #gkContentWrap {
        margin-top: 0px !important; 
        /*border-top: 1px solid #EAEAEA !important;*/
        padding-top: 0px !important; 
    }
}

/* Corrección estética para la cabecera fija */
#gkHeader {
    background-color: #ffffff !important;
    transition: box-shadow 0.2s ease-in-out;
}

/* Fuerza la opacidad y prioridad de capa de la zona del logotipo */
#gkHeader {
    background: #ffffff !important;
    z-index: 99999 !important;
}

/* Evita que las barras estáticas de la plantilla se superpongan en el scroll */
#gkTopBar, .gkTopBar, #gkTopBar2 {
    z-index: 10 !important;
}

/* --- FRANJA BLANCA CONTINUA RESPONSIVE (MÉTODO SIN SOLAPAMIENTOS) --- */
@media (max-width: 768px) {
    /* 1. Volvemos completamente invisible la imagen original de la plantilla */
    #gkLogo img, .gkLogo img {
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important; 
        width: 0 !important; 
    }

    /* 2. Reseteamos la caja nativa de la plantilla para que no genere espacios vacíos */
    #gkLogo, .gkLogo {
        display: none !important;
        visibility: hidden !important;
    }

    /* 3. Convertimos tu caja blanca en una franja horizontal continua de lado a lado */
    .logo-movil-personalizado {
        background-color: #ffffff !important; /* Escudo blanco opaco total */
        position: absolute !important;
        top: 80px !important;    /* Altura idónea clavada justo debajo de la franja gris */
        left: 0 !important;      /* Anclada al borde izquierdo físico de la pantalla */
        width: 100% !important;  /* Se estira al 100% para tapar las noticias de lado a lado */
        height: 55px !important; /* Altura compacta y elegante para que no coma pantalla */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-family: 'Times New Roman', Times, serif !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0px !important; /* Eliminamos las esquinas redondeadas para que sea una barra recta */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; /* Sombra sutil inferior muy fina */
        z-index: 9999 !important;
        pointer-events: none !important;
    }

    /* Título principal centrado matemáticamente dentro de la nueva barra recta */
    .logo-movil-personalizado .titulo {
        font-weight: 900 !important;
        font-size: 25px !important; /* Un punto más compacto para máxima nitidez */
        color: #111111 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        display: block !important;
        margin: 0 0 2px 0 !important;
    }

    /* Eslogan perfectamente coordinado debajo */
    .logo-movil-personalizado .slogan {
        font-family: Arial, sans-serif !important;
        font-size: 8px !important;
        color: #555555 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: block !important;
    }

    /* 4. Forzamos al botón del menú hamburguesa (si reaparece en scroll) a colocarse por encima del fondo */
    #gkButtonMenu, .gk-button-menu, #gkMobileMenu, .gk-mobile-menu, #gkHeaderNav i, .fa-bars {
        z-index: 100000 !important;
        position: relative !important;
    }
}

/* Apagado estricto en ordenadores de escritorio */
@media (min-width: 769px) {
    .logo-movil-personalizado {
        display: none !important;
    }
}

html #gkHeaderNav {
  float: right;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-left: 0px solid #ddd !important;
  box-sizing: content-box;
}

/* --- OCULTAR EL CONTENEDOR INFO DE LA CATEGORÍA SI ESTÁ VACÍO --- */
#gkPageContent p.nspInfo:empty,
p.nspInfo:empty,
.marquesina-obrero-automatica + #gkPageContent p.nspInfo:empty {
    display: none !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    height: 0 !important;
    width: 0 !important;
}

.nspMain .nspInfo2 {
  position: absolute;
  background: #323232 !important;
  padding: 6px 15px !important;
  color: #fff;
  margin-top: -58px !important;
  min-width: 132px;
  text-transform: uppercase;
}

/* --- ANULACIÓN ABSOLUTA Y GLOBAL DE CUALQUIER TIPO DE LÍNEA INFERIOR EN HOVER --- */
a:hover,
a:hover *,
.box a:hover,
.box h1 a:hover,
.box h2 a:hover,
.box h3 a:hover,
.box h4 a:hover,
.box h5 a:hover,
.nspHeader a:hover,
.nspArts a:hover,
.nspArt h2 a:hover,
.readmore:hover {
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    border-bottom-width: 0px !important;
    box-shadow: none !important;
    text-underline-offset: unset !important;
    background: transparent !important; /* Por si Gavick usó un background-color de 1px como línea */
}

/* --- CONFIGURACIÓN EXACTA DE TÍTULOS CON LÍNEA SUPERIOR E INFERIOR COMBINADA --- */

/* 1. La línea superior fina que delimita el módulo por arriba */
.linea-titulo h3.header,
.linea-titulo .box-title,
.linea-titulo .gkHeader {
    border-top: 1px solid #e5e5e5 !important; /* Línea superior fina gris */
    padding-top: 15px !important;              /* Espacio entre la línea superior y el texto */
    margin: 0 0 20px 0 !important;             /* Margen inferior para separar el bloque de las noticias */
    text-align: left !important;
    text-transform: none !important;
    background: none !important;
    
    /* 2. La línea gris fina inferior que cruza de lado a lado (100% ancho) */
    border-bottom: 1px solid #e5e5e5 !important; 
    position: relative !important;             /* Necesario para posicionar la línea gruesa encima */
}

/* 3. El texto del título y su línea negra gruesa integrada */
.linea-titulo h3.header > span,
.linea-titulo .box-title > span,
.linea-titulo .gkHeader > span {
    display: inline-block !important;          /* Ajusta el ancho al tamaño de la palabra */
    font-size: 22px !important;                /* Tamaño destacado */
    font-weight: 700 !important;               /* Negrita rotunda */
    color: #323232 !important;                 /* Texto negro */
    text-transform: none !important;
    padding-bottom: 8px !important;            /* Separación interna con las líneas */
    
    /* La línea negra gruesa que se superpone a la gris */
    border-bottom: 4px solid #323232 !important; 
    
    /* Truco CSS para que pise exactamente a la línea gris inferior del contenedor */
    margin-bottom: -1px !important;            
    position: relative !important;
    z-index: 2 !important;
}

/* --- TRUCO DEFINITIVO: FORZAR LÍNEA SUPERIOR DE 4PX EN LOS MÓDULOS CON NUESTRA CLASE --- */
.linea-titulo .header,
.linea-titulo div.header,
.box.linea-titulo .header {
  border-top: 4px solid #323232 !important; /* Fuerza los 4px de grosor y el color negro puro */
  padding-top: 25px !important;              /* Espacio de separación elegante bajo la línea gruesa */
  margin-bottom: 30px !important;            /* Mantiene la separación con las noticias */
}

.nspMain.big-list .nspInfo2 {
  position: static;
  margin: 0;
    margin-top: 0px;
    margin-bottom: 0px;
  background: none !important;
  color: inherit;
  padding: 0;
  color: #999;
  font-size: 12px;
  min-width: 90px;
  text-transform: none !important;
}

/* --- NUEVA CLASE EXCLUSIVA: LINEA-TITULO2 (CON 30PX EXTRA DE SEPARACIÓN) --- */

/* 1. La línea superior fina y la línea gris de fondo */
.linea-titulo2 h3.header,
.linea-titulo2 .box-title,
.linea-titulo2 .gkHeader,
.linea-titulo2 div.header {
    border-top: 1px solid #e5e5e5 !important; 
    padding-top: 15px !important;              
    text-align: left !important;
    text-transform: none !important;
    background: none !important;
    border-bottom: 1px solid #e5e5e5 !important; 
    position: relative !important;             
    
    /* Incrementamos el margen inferior para descolgar el contenido 30px más */
    margin: 0 0 60px 0 !important; /* Subido de 30px a 60px para lograr el efecto */
}

/* 2. El texto del título y su línea gruesa integrada (#323232) */
.linea-titulo2 h3.header > span,
.linea-titulo2 .box-title > span,
.linea-titulo2 .gkHeader > span,
.linea-titulo2 div.header > span {
    display: inline-block !important;          
    font-size: 22px !important;                
    font-weight: 700 !important;               
    color: #323232 !important;                 
    text-transform: none !important;
    padding-bottom: 8px !important;            
    border-bottom: 4px solid #323232 !important; 
    margin-bottom: -1px !important;            
    position: relative !important;
    z-index: 2 !important;
}

/* 3. Forzar la línea superior gruesa de 4px (#323232) y asegurar el espacio inferior */
.linea-titulo2 .header,
.linea-titulo2 div.header,
.box.linea-titulo2 .header {
  border-top: 4px solid #323232 !important; 
  padding-top: 25px !important;              
}  

/* ==========================================================================
   RECUPERACIÓN TOTAL: LÍNEA DOBLE CORPORATIVA AL 100% DE ANCHO
   ========================================================================== */

/* 1. La caja del módulo: Genera la línea gruesa superior y controla la separación */
.box.solo-borde,
div.box.solo-borde,
#gkBottom1 .box.solo-borde,
#gkBottom2 .box.solo-borde,
#gkFooter .box.solo-borde {
    background: none !important;
    position: relative !important;          /* Eje obligatorio para la línea fina */
    display: block !important;
    visibility: visible !important;         /* Fuerza a que el contenedor sea visible */
    
    /* LA LÍNEA GRUESA SUPERIOR (Mide el 100% del ancho del bloque) */
    border-top: 4px solid #323232 !important; 
    border-bottom: none !important;         
    border-left: none !important;
    border-right: none !important;
    
    /* ¡MÁS DESPEGADOS! Espaciados corregidos para separar los bloques */
    margin-top: 55px !important;            /* Separa el módulo del bloque que tiene arriba */
    padding-top: 40px !important;           /* Separa el contenido interno (enlaces/textos) de las líneas */
    
    clear: both !important;
    width: 100% !important;
}

/* 2. LA LÍNEA GRIS FINA: La inyectamos de forma absoluta justo debajo de la gruesa */
.box.solo-borde::before,
div.box.solo-borde::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;                      /* Se engancha milimétricamente debajo del border-top de 4px */
    left: 0 !important;
    width: 100% !important;                 /* Estira al 100% exacto del ancho de la página */
    height: 1px !important;                 /* Grosor de la línea fina */
    background-color: #e5e5e5 !important;   /* Color gris estándar de tus líneas de continuación */
    display: block !important;
    z-index: 10 !important;
}

/* 3. Limpieza absoluta de los bordes internos de los artículos (el 1px residual) */
.solo-borde .nspArt,
.nspMain.big-list .solo-borde .nspArt,
#gkPageContent .solo-borde .nspArt,
.solo-borde .nspArts {
    border-top: none !important;
    border-bottom: none !important;
    border: none !important;
}

/* 4. Ocultar cabeceras vacías de Gavick */
.solo-borde .header,
.solo-borde div.header,
.solo-borde h3.header,
.solo-borde .gkHeader {
    display: none !important;
}

/* --- CONFIGURACIÓN ESTÉTICA FINAL DEL TITULAR DESTACADO --- */

/* 1. Atacar al primer título grande con su tipografía y proporciones correctas */
.titular-grande .leading h4.nspHeader.fleft.fnone.has-image a,
.titular-grande div.leading h4.nspHeader a,
.titular-grande .nspArts > .nspArt:first-of-type h4.nspHeader a {
    font-family: 'Berlingske Serif Medium', 'Georgia', serif !important; /* Fuerza la fuente editorial */
    font-size: 30px !important;         /* Nivelado imponente con Actualidad */
    line-height: 1.15 !important;       /* Interlineado exacto nativo de Gavick para titulares grandes */
    font-weight: 700 !important;        /* Grosor rotundo idéntico al de tu inspector */
    color: #323232 !important;          /* Aplicamos tu nuevo color corporativo gris carbón */
    letter-spacing: -0.5px !important;   /* Compresión sutil para mejorar la estética en textos grandes */
    text-decoration: none !important;
}

/* 2. Suavizar el color al pasar el ratón por encima (Hover) */
.titular-grande .leading h4.nspHeader a:hover {
    color: #C5A059 !important;          /* Cambia suavemente a tu color oro Pantone Rich Gold */
}

/* 3. Ajuste de separación inferior respecto al extracto del artículo */
.titular-grande .leading h4.nspHeader {
    margin-bottom: 18px !important;     /* Colchón de aire elegante para que respire el bloque */
    margin-top: 10px !important;        /* Pequeña separación con la imagen superior */
}

/* 4. ESCUDO: Asegurar que los textos de la derecha sigan en su sitio */
.titular-grande .nspArtsScroll1 h4.nspHeader a,
.titular-grande .nspArtsScroll2 h4.nspHeader a,
.titular-grande .nspArt:not(:first-of-type) h4.nspHeader a {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   REGLA GENERAL: SUSTITUCIÓN GLOBAL DE COLOR #1A1A1A POR #323232
   ========================================================================== */

/* 1. Color de texto general en los elementos principales del sitio */
body, 
p, 
span, 
div, 
li, 
input, 
textarea,
#gkPageContent {
    color: #323232; /* Suaviza el color del texto base en todo el portal */
}

/* 2. Cabeceras, etiquetas de títulos nativas y selectores de módulos de Gavick */
h1, h2, h3, h4, h5, h6,
.box-title,
.gkHeader,
.header,
.nspHeader,
.nspArts h4 a,
.nspArt h2 a {
    color: #323232 !important; /* Aplica el gris carbón a los titulares */
}

/* 3. Reemplazo en bordes generales (Líneas divisorias nativas de la plantilla) */
hr,
.box,
.gkModule,
.nspArt,
div.header,
h3.header {
    border-color: #323232; /* Cambia el color de los bordes estructurales oscuros */
}

/* 4. Reemplazo en elementos con fondos sólidos oscuros (si los hubiera) */
.bg-dark,
.dark-block,
button.button,
input[type="submit"] {
    background-color: #323232;
    border-color: #323232;
}

.single-page .article-header-wrap .item-social-icons {
  background: #ee3333;
  border-radius: 50%;
  bottom: -20px !important;
  -webkit-box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  display: block;
  height: 50px;
  line-height: 51px;
  position: absolute;
  right: 45px !important;
  text-align: center;
  width: 50px;
}

.bannergroup .bannerfooter {
  background: #f8f8f8;
  text-align: center;
  color: #999;
  text-transform: none !important;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  line-height: 25px !important;
}

/* ==========================================================================
   9. FIJACIÓN DE LA POSICIÓN UNIVERSAL ENCAJONADA A 1350PX
   ========================================================================== */
#gkBajoMenuReal.posicion-universal-obrero-fija {
    display: block !important;
    position: relative !important;
    
    /* SOLUCIÓN AL BORDE: Se encaja a 1350px para clonar el ancho del menú superior */
    width: 100% !important;        
    max-width: 1350px !important;  /* Ajustado al ancho estricto de tu portada */
    margin: 0 auto !important;     /* Centra la barra en medio de la pantalla */
    
    height: 45px !important;       /* Altura fija estricta solicitada */
    max-height: 45px !important; 
    min-height: 45px !important; 
    background-color: #ffffff !important; 
    
    /* Línea negra fina idéntica en fuerza y color a la del menú de arriba */
    border-top: none !important;                 
    border-bottom: 1px solid #111111 !important; 
    box-sizing: content-box !important;
    
    padding: 0 !important;
    clear: both !important;
    overflow: hidden !important; 
}

/* 2. RECTIFICACIÓN CRÍTICA: FULMINAR CUALQUIER BORDE FANTASMA INTERNO DE LA LISTA GAVICK */
.barra-secciones-horizontal-fija,
.barra-secciones-horizontal-fija div,
.barra-secciones-horizontal-fija ul,
.barra-secciones-horizontal-fija .mod-menu,
.barra-secciones-horizontal-fija .menu {
    display: flex !important;
    align-items: center !important; /* CENTRADO VERTICAL ABSOLUTO EXACTO EN LOS 45PX */
    justify-content: flex-start !important;
    white-space: nowrap !important; 
    flex-wrap: nowrap !important;   /* Prohíbe de forma estricta el doble renglón */
    width: 100% !important;
    max-width: 1350px !important;   /* Cuadra al milímetro con tus bordes de portada */
    margin: 0 auto !important;      /* Centra la rejilla de texto en medio del monitor */
    padding: 0 37px !important;     /* Mantiene la pastilla "SECCIONES:" en línea con ACTUALIDAD */
    height: 100% !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    background: transparent !important;
    
    /* ANULACIÓN ABSOLUTA: Borra el filete gris que la plantilla inyecta por defecto */
    border: none !important;        
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* 3. Separación horizontal holgada y elegante entre palabras */
.barra-secciones-horizontal-fija li {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 28px !important;   
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: none !important;
    height: 100% !important;
    border: none !important; /* Limpia bordes en los elementos de la lista */
}

.barra-secciones-horizontal-fija li::before {
    display: none !important;
    content: "" !important;
}

/* Tipografía Serif en minúsculas para las subsecciones */
.barra-secciones-horizontal-fija li a {
    font-family: "Times New Roman", Times, Georgia, serif !important;
    font-size: 13.5px !important;    
    color: #333333 !important;       
    text-transform: none !important; /* Mantiene estrictamente tus minúsculas */
    letter-spacing: 0.2px !important;
    line-height: 45px !important;    /* Alineación de las letras en el centro exacto de la caja */
    display: inline-block !important;
}

.barra-secciones-horizontal-fija li a:hover {
    color: #C69214 !important;       /* Dorado corporativo de El Obrero al pasar el ratón */
}

/* Formato rígido para la pastilla inicial "SECCIONES:" */
.barra-secciones-horizontal-fija li.separator,
.barra-secciones-horizontal-fija li span.separator,
.barra-secciones-horizontal-fija li .mod-menu__separator {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-right: 20px !important;   
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* ==========================================================================
   10. COMPORTAMIENTO ELÁSTICO RESPONSIVE PARA SMARTPHONES
   ========================================================================== */
@media (max-width: 768px) {
    #gkBajoMenuReal.posicion-universal-obrero-fija,
    .camara-aire-obrero-estable {
        display: none !important;       /* Desaparece por completo en teléfonos móviles */
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   CLASE DE OCULTACIÓN ABSOLUTA EN SMARTPHONES (EL OBRERO)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Esconde el módulo interno tal y como lo tenías configurado */
    .ocultar-en-movil {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. LA CLAVE: Si el contenedor macro `#gkBajoMenuReal` detecta dentro de 
       sus entrañas la clase de ocultación, se destruye a sí mismo a 0px en móviles */
    #gkBajoMenuReal:has(.ocultar-en-movil),
    #gkBajoMenuReal {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important; /* Elimina la línea fina negra inferior */
    }
}

.gkHeaderTop {
  height: 45px !important;
}

#gkHighlighterGK5-0 .gkHighlighterInterface {
  background-color: #f7cf3c;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  width: auto !important;
}

/* ==========================================================================
   FIJACIÓN INDESTRUCTIBLE DEL BOTÓN DE COMPARTIR DENTRO DE LA IMAGEN
   ========================================================================== */

/* 1. Forzar al contenedor de la imagen del artículo a actuar como ancla de coordenadas */
.item-image,
.has-image,
.nspArt .img-wrap,
.article-image {
    position: relative !important; /* Convierte la foto en un molde rígido para el icono */
    display: block !important;
}

/* 2. Clavar el icono rojo en la esquina inferior derecha con márgenes idénticos */
.single-page .article-header-wrap .item-social-icons,
.item-social-icons,
[class*="social-icons"],
[class*="share-button"] {
    position: absolute !important; /* Se mueve estrictamente dentro del marco de la foto */
    top: auto !important;          /* Desactiva cualquier cálculo de altura viejo */
    
    /* MÁXIMA PRECISIÓN: Fijamos 15 píxeles estrictos tanto a la derecha como abajo */
    right: 15px !important;        /* Margen derecho igual */
    bottom: 15px !important;       /* Margen inferior idéntico */
    
    margin: 0 !important;
    z-index: 99 !important;        /* Asegura que flote limpiamente sobre la imagen sin esconderse */
}

.campo-alto-personalizado input {
    height: 55px !important;
    line-height: 55px !important; /* Centra el texto verticalmente */
    padding: 0 15px !important;
}

.campo-alto-personalizado-2 textarea {
    padding-top: 20px !important; /* Empuja todo el bloque de texto hacia abajo */
}

.convertforms .captcha-container .captcha-equation {
  font-size: 1.0em !important;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  white-space: nowrap;
}

.campo-alto-personalizado input {
    height: 55px !important;
    line-height: 55px !important; /* Centra el texto verticalmente */
    padding: 0 15px !important;
}

.campo-alto-personalizado-2 textarea {
    padding-top: 20px !important; /* Empuja todo el bloque de texto hacia abajo */
}

.convertforms.cf-success .cf-response {
  background-color: #af50e5 !important;
  display: block;
}

.convertforms .cf-response {
  color: #fff;
  margin-bottom: 20px;
  padding: 10px 15px;
  width: 100%;
  border-radius: var(--input-border-radius);
  display: none;
  text-align: center;
}

#cf_1 {
  --font: Arial;
  --max-width: 800px !important;
  --background-color: rgba(255, 255, 255, 1);
  --border-radius: 0px;
  --label-color: #585858;
}

/* Resaltar enlaces dentro del contenido del artículo */
.itemBody a, 
article a {
    color: #9a770a !important; /* Color rojo (cámbialo por tu color corporativo) */
    font-weight: 600; /* Texto un poco más grueso/negrita */
    text-decoration: none !important; /* Subrayado por defecto */
    transition: color 0.2s ease;
}

/* Efecto al pasar el ratón (Hover) */
.itemBody a:hover, 
article a:hover {
    color: #323232 !important; /* Cambia a negro al pasar el ratón */
    text-decoration: none; /* Quita el subrayado al pasar el ratón */
}

/* Desactivar el botón en los menús o páginas con ID 105, 108 y 115 */
body.itemid-77 .item-social-icons,
body.itemid-108 .item-social-icons,
body.itemid-115 .item-social-icons,
body.itemid-105 .share-button,
body.itemid-108 .share-button,
body.itemid-115 .share-button {
    display: none !important;
}

/* Eliminar por completo el círculo con número en los módulos de noticias */
.nspMain.small-img .nspArtPage .nspArt .nspImageWrapper::before {
    display: none !important;
    content: none !important;
}

/* Invertir el orden de autor y fecha en los detalles del artículo */
dl.article-info {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important; /* Mantiene los elementos en línea horizontal */
}

/* Forzar a la fecha (.published) a posicionarse primero */
dl.article-info dd.published {
    order: 1 !important;
}

/* Forzar al autor (.createdby) a posicionarse después */
dl.article-info dd.createdby {
    order: 2 !important;
}

/* Colocar cualquier otro dato sobrante al final */
dl.article-info dd {
    order: 3;
}

/* 1. Ocultar el guion original que aparece al principio */
dl.article-info::before {
    display: none !important;
    content: "" !important;
}

/* 2. Añadir un margen a la fecha y al autor para que respiren */
dl.article-info dd.published {
    margin-right: 8px !important;
}

dl.article-info dd.createdby {
    margin-left: 8px !important;
}

/* 3. Crear el nuevo guion dinámico JUSTO entre la fecha y el autor */
dl.article-info dd.published::after {
    content: "-" !important;
    margin-left: 12px !important;
    color: #999999; /* Color gris suave para el guion (puedes cambiarlo) */
    display: inline-block;
}

/* Eliminar el primer guion ocultando el pseudo-elemento de la fecha */
dl.article-info dd.published::before {
    display: none !important;
    content: "" !important;
    font-size: 0 !important;
    width: 0 !important;
}

/* Forzar que no haya un espacio en blanco fantasma antes del texto */
dl.article-info dd.published {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.article-info {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px !important;
  color: #999;
}

.nspMain .nspInfo {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px !important;
  color: #999;
}

/* Ajustar los títulos del módulo inferior al tamaño del bloque lateral */
.bloque-debajo-articulo .nspMain .nspHeader h3.nspHeader,
.bloque-debajo-articulo .nspMain .nspHeader a {
    font-size: 16px !important;
    line-height: normal !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Reducir los márgenes inferiores de las imágenes para compactar más el bloque */
.bloque-debajo-articulo .nspMain .nspHeader {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

/* Aplicar el estilo del sufijo linea-titulo de forma forzada a este bloque */
.bloque-debajo-articulo h3, 
.bloque-debajo-articulo h3.nspHeader, 
.bloque-debajo-articulo .nspMain > h3 {
    border-bottom: 2px solid #323232 !important; /* Reemplaza por el color de tu línea (ej. rojo) */
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    font-size: 18px !important; /* Ajusta el tamaño de la cabecera si lo necesitas */
    font-weight: 700 !important;
    text-transform: none; /* O la transformación de texto que usen tus otros títulos */
}

/* Contenedor principal de la cabecera de donaciones */
.seccion-donar-header {
    text-align: center !important;
    margin-bottom: 10px !important;
    padding: 20px 0 !important;
}

/* Título principal superior - ¡ERROR DE SINTAXIS CORREGIDO AQUÍ! */
.seccion-donar-header h2 {
    font-family: "Berlingske Serif Medium", Georgia, serif !important; /* Corregido: eliminado el exceso de comillas */
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 5px !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

/* Subtítulo inferior (¡Tú lo haces posible!) */
.seccion-donar-header p {
    font-family: "Berlingske Serif Medium", Georgia, serif !important;
    font-size: 0px !important;
    font-weight: 500 !important;
    color: #cc0000 !important; 
    margin-top: 0 !important;
    letter-spacing: 0 !important;
}

@media (min-width: 768px) {
/* 1. Contenedor principal del artículo con altura fija */
.blog .items-row [class*="span"] .item {
    height: 600px !important; 
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px !important; 
}

/* 2. Títulos alineados con espacio fijo para 3-4 líneas */
.blog .items-row [class*="span"] .item .page-header {
    height: 85px !important; 
    margin-bottom: 15px !important;
    overflow: hidden;
}

/* 3. LIMITAR TEXTO DE INTRODUCCIÓN A EXACTAMENTE 4 LÍNEAS */
.blog .items-row [class*="span"] .item > p {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important; 
    max-height: 6em !important; 
    margin-bottom: 0 !important;
}

/* 4. Anclar la fecha y autor abajo del todo */
.blog .items-row [class*="span"] .item .article-info-footer {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    background: #fff; 
}

/* Añadir un borde decorativo inferior debajo de la descripción de la categoría */
.blog .category-desc,
.category-view .category-desc {
    border-bottom: 1px solid #e5e5e5 !important; 
    padding-bottom: 0px !important;            
    margin-bottom: 30px !important;             
    display: block !important;                  
}
}

/* Aplica los estilos de "linea-titulo" SOLO al encabezado de la categoría */
.blog > .page-header h2,
.blog > h2 {
  display: inline-block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #323232 !important;
  text-transform: none !important;
  padding-bottom: 8px !important;
  border-bottom: 4px solid #323232 !important;
  margin-bottom: -1px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Forzar la separación del contenedor principal */
.blog .category-desc,
.category-view .category-desc {
    margin-top: 25px !important;
    margin-bottom: 30px !important;
}


/* ==========================================================================
   SOLUCIÓN DEFINITIVA ALIAS GAVICK: MENÚ OPACO Y DESBLOQUEADO
   ========================================================================== */

/* 1. Pintar el menú de blanco sólido y darle prioridad, pero SIN bloquear su movimiento nativo */
@media (max-width: 979px) {
#aside-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    z-index: 999998 !important; /* Mantiene el panel un piso por debajo del botón */
    box-shadow: -5px 0 25px rgba(0,0,0,0.15) !important;
}

/* 2. RECORTE DE MARGEN SUPERIOR: Reducimos el colchón de aire para aproximar "ACTUALIDAD" a la X */
#aside-menu > div {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 10px 24px 30px 24px !important; /* Reducido de 85px a 60px para pegar el primer ítem arriba */
    box-sizing: border-box !important;
}

/* 3. Asegurar que los enlaces de las categorías sean oscuros y legibles */
#aside-menu a {
    color: #333333 !important;
    font-size: 15px !important;
}

/* 4. SUBIR LA CABECERA Y EL ICONO UN PISO POR ENCIMA DEL MENÚ PARA QUE REACCIONEN */
#gkHeaderNav,
.has-off-canvas,
#gkMobileMenu {
    z-index: 999999 !important; /* Capa superior absoluta respecto al panel blanco */
    position: relative !important;
}
}

/* ==========================================================================
   INTEGRACIÓN CONTROL DE ESTADOS DE POSICIÓN PARA EL ICONO
   ========================================================================== */

/* 5. CON MENÚ CERRADO: Ajuste de precisión para alinearlo al borde derecho de la imagen */
#static-aside-menu-toggler,
#gkMobileMenu #static-aside-menu-toggler {
    position: relative !important;    
    top: -12px !important;            /* Mantiene la altura perfecta que ya conseguimos */
    margin-right: -60px !important;   /* Incrementado de -10px a -22px para alinearlo con el borde de la imagen */
    z-index: 999999 !important;
    display: inline-block !important;
    cursor: pointer !important;
}


/* 6. CON MENÚ ABIERTO: Mantiene la X flotando en una esquina limpia arriba a la derecha */
.gk-aside-opened #static-aside-menu-toggler,
#gkBg.gk-aside-opened #static-aside-menu-toggler {
    position: fixed !important;       
    top: 25px !important;             /* Distancia vertical limpia respecto al techo */
    right: 25px !important;           /* Alineación limpia respecto al borde derecho */
    z-index: 2147483647 !important;   
}

/* ==========================================================================
   RETOQUES FINALES MENÚ ABIERTO: TIPOGRAFÍA Y ESTADO ACTIVADO
   ========================================================================== */

/* 1. Respetar mayúsculas y minúsculas naturales de los ítems de menú */
#aside-menu ul li a {
    text-transform: none !important; /* Cancela el forzado a mayúsculas y respeta tu escritura */
}

/* 2. Dar el color corporativo al ítem de menú activado (página actual) */
#aside-menu ul li.active > a,
#aside-menu ul li.current > a,
#aside-menu ul li.active a,
#aside-menu ul li.current a {
    color: #323232 !important;        /* Cambia el color del texto (puedes usar #000000 o el gris oscuro del botón) */
    font-weight: bold !important;       /* Mantiene el texto en negrita */
    text-decoration: underline !important; /* Añade el subrayado al ítem activo */
    text-underline-offset: 4px !important;  /* Separa ligeramente el subrayado del texto para que respire */
}

/* ==========================================================================
   UNIFICACIÓN DE ESTILOS FILTRADA: SÓLO EN PÁGINAS INDIVIDUALES / ESTÁTICAS
   ========================================================================== */

/* 1. Crear el riel con la línea gris de fondo SÓLO en la vista de artículo único (single-page) */
.single-page .page-header {
    border-top: none !important;                 /* Mantiene el borde superior suprimido */
    border-bottom: 1px solid #e5e5e5 !important; /* Mantiene la línea fina gris de fondo */
    padding-top: 5px !important;                  
    padding-bottom: 0 !important;                 
    margin: 25px 0 25px 0 !important;             
    text-align: left !important;
    background: none !important;
    position: relative !important;                /* Eje obligatorio para el solape */
    height: auto !important;
}

/* 2. Aplicar la línea negra de 4px EXCLUSIVAMENTE al titular de la página única */
.single-page .page-header h2 {
    display: inline-block !important;             /* Ajusta al ancho de la palabra */
    font-family: 'Berlingske Serif Medium', Georgia, serif !important; /* Fuente corporativa */
    font-size: 22px !important;                   /* Tamaño unificado */
    font-weight: 700 !important;                  /* Grosor rotundo */
    color: #323232 !important;                    /* Color gris carbón */
    text-transform: none !important;              
    
    /* Dibujar la línea negra gruesa integrada */
    padding-bottom: 8px !important;               
    border-bottom: 4px solid #323232 !important;  /* Línea negra de 4px */
    
    /* Pisar milimétricamente la línea gris inferior */
    margin-bottom: -1px !important;               
    position: relative !important;
    z-index: 2 !important;
}

/* ==========================================================================
   JERARQUÍA DE SUBMENÚS: AÑADIR SÍMBOLO VISUAL E INDENTACIÓN
   ========================================================================== */
@media (max-width: 979px) {

    /* 1. Identificar los elementos que son hijos (segundo nivel) y darles sangría */
    #aside-menu ul li ul li a,
    #aside-menu ul.sub-menu li a,
    #aside-menu ul li.child a,
    #aside-menu ul li li a {
        padding-left: 0px !important;    /* Desplaza el texto a la derecha creando escalonamiento */
        font-weight: normal !important;   /* Hace el texto un poco más fino que el principal */
        font-size: 14.5px !important;     /* Reduce sutilmente el tamaño para jerarquizar */
        color: #555555 !important;        /* Un tono gris oscuro elegante en lugar de negro puro */
    }

    /* 2. Inyectar automáticamente el guion o flecha sutil antes del texto */
    #aside-menu ul li ul li a::before,
    #aside-menu ul.sub-menu li a::before,
    #aside-menu ul li.child a::before,
    #aside-menu ul li li a::before {
        content: "— " !important;         /* Inyecta un guion largo editorial elegante */
        color: #999999 !important;        /* Gris más suave para el símbolo */
        margin-right: 5px !important;     /* Separación entre el guion y la palabra */
        display: inline-block !important;
    }
}

/* ==========================================================================
   HOMOGENEIZAR ESPACIADO ENTRE BLOQUES PRINCIPALES Y SUBMENÚS
   ========================================================================== */
@media (max-width: 979px) {

    /* 1. Eliminar cualquier residuo de margen inferior acumulado en las sublistas */
    #aside-menu ul li ul,
    #aside-menu ul.sub-menu,
    #aside-menu ul li .child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. Unificar de forma matemática el colchón inferior de CADA elemento de la lista */
    #aside-menu ul li,
    #aside-menu li {
        margin-bottom: 4px !important;  /* Controla la distancia uniforme entre ítems */
        padding-bottom: 0 !important;
    }

    /* 3. Asegurar una separación limpia e idéntica antes de arrancar un nuevo bloque principal */
    #aside-menu ul li + li {
        margin-top: 4px !important;
    }
}

.gkAsideMenu > ul {
  padding: 10px 0 20px 10px !important;
}

/* Ocultar el módulo en pantallas medianas y grandes (Ordenadores y tablets) */
@media (min-width: 768px) {
    .solo-movil {
        display: none !important;
    }
}

/* Forzar a que todas las tarjetas de Minitek tengan la misma altura visual */
.wm-wall .wm-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
}

/* Limitar el texto de introducción para que no descuadre las filas */
.wm-wall .wm-item-intro {
    display: -webkit-box !important;
    -webkit-line-clamp: 3; /* Muestra un máximo de 3 líneas de texto */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 72px !important; /* Altura fija estimada para las 3 líneas */
}

/* Darle un aire más limpio a los títulos de las noticias */
.wm-wall .wm-item-title a {
    font-size: 18px !important;
    line-height: 1.3 !important;
    color: #222222 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Eliminar el subrayado de los enlaces del periódico en el muro */
.wm-wall .wm-item-title a:hover {
    text-decoration: none !important;
    color: #ff4500 !important; /* El color de acento o resalte que quieras al pasar el ratón */
}

/* Espaciado de las tarjetas */
.wm-wall .wm-item {
    background: #ffffff !important;
    border: 1px solid #eef0f3 !important; /* Un borde gris muy sutil */
    padding: 15px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

h3.mwall-title a, h3.mwall-title span {
  font-size: 20px !important;
  line-height: 1.33 !important;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  word-wrap: break-word;
  text-decoration: none;
}

.mwall-s-desc, .mwall-desc {
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 400;
  padding: 8px 15px 15px;
}

/* ==========================================================================
   MÉTODO COMPONENTE DIRECTO: CABECERA CLONADA DE PUBLICIDAD (.LINEA-TITULO)
   ========================================================================== */

/* 1. Contenedor principal: Quita el borde negro superior y genera el riel gris fino continuo */
.linea-titulo2-comp #gkPageContent > h1,
.linea-titulo2-comp div.page-header,
.linea-titulo2-comp .com-minitekwall h1,
.linea-titulo2-comp #gkPageContent > div > h1 {
    border-top: none !important;                 /* ELIMINA POR COMPLETO EL BORDE NEGRO SUPERIOR */
    border-bottom: 1px solid #e5e5e5 !important; /* Línea inferior fina gris que cruza la web */
    padding-top: 5px !important;                  /* Reduce el espacio superior */
    padding-bottom: 0 !important;
    margin: 15px 0 20px 0 !important;             /* Ajusta el colchón respecto al texto inferior */
    text-align: left !important;
    background: none !important;
    position: relative !important;                /* Eje obligatorio para el solape exacto */
    display: block !important;
    width: 100% !important;
}

/* 2. El texto del título: Forzar la base negra de 4px pisando matemáticamente a la gris */
.linea-titulo2-comp #gkPageContent h1,
.linea-titulo2-comp .page-title,
.linea-titulo2-comp h1.page-title,
.linea-titulo2-comp .com-minitekwall h1 {
    display: inline-block !important;              /* Ajusta la línea al ancho de la palabra */
    font-family: 'Berlingske Serif Medium', Georgia, serif !important; /* FUENTE CORPORATIVA */
    font-size: 22px !important;                    /* Tamaño exacto de tus portadas */
    font-weight: 700 !important;                   /* Negrita rotunda */
    color: #323232 !important;                     /* Color gris carbón de El Obrero */
    text-transform: none !important;
    padding-bottom: 8px !important;                /* Distancia fina con las líneas */
    margin: 0 !important;
    
    /* La línea negra gruesa integrada en la base */
    border-bottom: 4px solid #323232 !important; 
    
    /* SOLUClÓN AL DESFASE: Pisa con precisión milimétrica el filete gris inferior */
    margin-bottom: -1px !important;            
    position: relative !important;
    z-index: 2 !important;
}

/* 3. Escudo de seguridad para evitar que la plantilla vuelva a forzar el borde superior negro */
.linea-titulo2-comp #gkPageContent > div > h1 {
    border-top: none !important;
}

/* 4. Limpieza de contenedores fantasma de Minitek */
.linea-titulo2-comp div[id^="rwall_items_"] {
    border: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   LÍNEA SEPARADORA SUPERIOR PARA LAS IMÁGENES DE MINITEK
   ========================================================================== */

/* Forzar una línea gris superior justo antes de que empiece la primera hilera de fotos */
.linea-titulo2-comp div[id^="rwall_items_"],
.linea-titulo2-comp .mwall-container {
    border-top: 1px solid #e5e5e5 !important; /* Línea fina gris idéntica a tus otros rieles */
    padding-top: 35px !important;              /* Espacio de aire entre la línea y las imágenes */
    margin-top: 25px !important;              /* Espacio de aire entre el texto superior y la línea */
    display: block !important;
    clear: both !important;
}

/* 2. Escudo por si el texto viene dentro de un contenedor anidado */
.linea-titulo2-comp .category-desc p {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   RECALIBRACIÓN HORIZONTAL: CLAVAR ALTURA EXACTA CON AVISO LEGAL
   ========================================================================== */

/* 1. Blindaje absoluto: Garantizar la eliminación del borde negro superior */
.linea-titulo2-comp #gkPageContent > h1, 
.linea-titulo2-comp div.page-header, 
.linea-titulo2-comp .com-minitekwall h1, 
.linea-titulo2-comp #gkPageContent > div > h1 {
    border-top: none !important;
}

/* 2. Compensar el espacio superior para bajar el título y alinearlo con la izquierda */
.linea-titulo2-comp #gkPageContent {
    margin-top: 40px !important;   /* Añade el colchón exacto que le falta respecto a las páginas estáticas */
    padding-top: 0 !important;
}

/* 3. Estabilizar el componente Minitek para que no empuje el título hacia abajo */
.linea-titulo2-comp .com-minitekwall,
.linea-titulo2-comp div[id^="rwall_items_"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.mwall-description {
  padding: 0px 0 !important;
}

/* ==========================================================================
   ANULACIÓN ABSOLUTA DE TRANSICIONES Y REBOTES EN IMÁGENES
   ========================================================================== */

/* Forzar a que la imagen y su contenedor aparezcan fijos e instantáneos sin tiempos de espera */
.linea-titulo2-comp .mwall-item-media,
.linea-titulo2-comp .mwall-item-media img,
.linea-titulo2-comp .mwall-media-container img,
.linea-titulo2-comp .mwall-container img {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* ==========================================================================
   ESTILIZADO EDITORIAL DE LA FECHA (EL OBRERO MOPDERNO)
   ========================================================================== */

.linea-titulo2-comp .mwall-item-date,
.linea-titulo2-comp .mwall-date,
div.rwall-date,
.mwall-item-inner .mwall-date {
    font-family: Arial, sans-serif !important;    /* Una fuente de palo seco limpia para metadatos */
    font-size: 12px !important;                   /* Tamaño compacto pero muy legible */
    color: #888888 !important;                    /* Un gris ceniza elegante que no ensucia la tarjeta */
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;             /* Un ligero espaciado entre letras tipo prensa */
    text-transform: lowercase !important;         /* Asegura la base en minúsculas */
    display: block !important;
    margin-bottom: 5px !important;               /* Separa la fecha del titular */
}

/* El truco: Poner la primera letra del mes en Mayúscula automáticamente */
.linea-titulo2-comp .mwall-item-date::first-letter,
div.rwall-date::first-letter {
    text-transform: uppercase !important;
}

#gkSidebarRight, .gkSidebarRight {
  float: right;
  padding-left: 30px;
  padding-right: 30px;
  border-left: 1px solid #ddd;
  padding-top: 0px !important;
}

.nspMain.small-img .nspHeader {
  font-size: 16px;
  line-height: normal;
  margin-bottom: 0;
  margin-top: 0px;
}

.mwall-list .mwall-item-inner {
  position: relative;
  padding: 0px 0px 0px 10px;
}

/* ==========================================================================
   REPARACIÓN DE MÁRGENES EN MÓVLES (BLINDAJE INDESTRUCTIBLE)
   ========================================================================== */



/* ==========================================================================
   FORMULARIO ACYMAILING - EFECTO HOVER CRUZADO (ESPEJO)
   ========================================================================== */

/* 1. BOTÓN SUSCRIBIRSE (Estado Normal: Amarillo) */
#acymailing_module_formformAcymailing29321 .subbutton.btn-primary,
div.acymailing_module .subbutton.btn-primary,
.acymailing_module_form .btn-primary {
    background: #f7cf3c !important;
    background-color: #f7cf3c !important;
    border-color: #f7cf3c !important;
    color: #323232 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* BOTÓN SUSCRIBIRSE (Estado Hover: Pasa a Gris Oscuro #323232) */
#acymailing_module_formformAcymailing29321 .subbutton.btn-primary:hover,
#acymailing_module_formformAcymailing29321 .subbutton.btn-primary:focus,
#acymailing_module_formformAcymailing29321 .subbutton.btn-primary:active,
div.acymailing_module .subbutton.btn-primary:hover,
.acymailing_module_form .btn-primary:hover {
    background: #323232 !important;
    background-color: #323232 !important;
    border-color: #323232 !important;
    color: #ffffff !important;
}

/* 2. BOTÓN ELIMINAR SUSCRIPCIÓN (Estado Normal: Gris Oscuro) */
#acymailing_module_formformAcymailing29321 .subbutton.btn-inverse,
div.acymailing_module .subbutton.btn-inverse,
.acymailing_module_form .btn-inverse {
    background: #323232 !important;
    background-color: #323232 !important;
    border-color: #323232 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* BOTÓN ELIMINAR SUSCRIPCIÓN (Estado Hover: Pasa a Amarillo #f7cf3c) */
#acymailing_module_formformAcymailing29321 .subbutton.btn-inverse:hover,
#acymailing_module_formformAcymailing29321 .subbutton.btn-inverse:focus,
#acymailing_module_formformAcymailing29321 .subbutton.btn-inverse:active,
div.acymailing_module .subbutton.btn-inverse:hover,
.acymailing_module_form .btn-inverse:hover,
.btn.btn-inverse:hover {
    background: #f7cf3c !important;
    background-color: #f7cf3c !important;
    border-color: #f7cf3c !important;
    color: #323232 !important; /* Texto oscuro para que se lea bien sobre el amarillo */
}

.back-to-top i {
  font-size: 20px;
  line-height: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   BUSCADOR DE LA HEMEROTECA - EFECTO HOVER CRUZADO (ESPEJO)
   ========================================================================== */

/* 1. BOTÓN BUSCAR (Estado Normal: Amarillo Corporativo) */
#jform_finder-searchform button.btn-primary,
.finder input-group button.btn-primary,
.finder button[type="submit"] {
    background: #f7cf3c !important;
    background-color: #f7cf3c !important;
    border-color: #f7cf3c !important;
    color: #323232 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* BOTÓN BUSCAR (Estado Hover: Pasa a Gris Oscuro #323232 con texto blanco) */
#jform_finder-searchform button.btn-primary:hover,
#jform_finder-searchform button.btn-primary:focus,
.finder input-group button.btn-primary:hover,
.finder button[type="submit"]:hover {
    background: #323232 !important;
    background-color: #323232 !important;
    border-color: #323232 !important;
    color: #ffffff !important;
}

/* 2. BOTÓN BÚSQUEDA AVANZADA (Estado Normal: Gris Oscuro) */
#jform_finder-searchform button.btn-secondary,
.finder button.btn-secondary,
.finder button[data-bs-toggle="collapse"] {
    background: #323232 !important;
    background-color: #323232 !important;
    border-color: #323232 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* BOTÓN BÚSQUEDA AVANZADA (Estado Hover: Pasa a Amarillo con texto oscuro) */
#jform_finder-searchform button.btn-secondary:hover,
#jform_finder-searchform button.btn-secondary:focus,
.finder button.btn-secondary:hover,
.finder button[data-bs-toggle="collapse"]:hover {
    background: #f7cf3c !important;
    background-color: #f7cf3c !important;
    border-color: #f7cf3c !important;
    color: #323232 !important;
}

/* ==========================================================================
   SEPARACIÓN DE BOTONES EN EL BUSCADOR
   ========================================================================== */
#jform_finder-searchform button.btn-primary,
.finder input-group button.btn-primary,
.finder button[type="submit"] {
    margin-right: 12px !important; /* Espacio hacia la derecha en ordenadores */
}

/* Ajuste fluido para dispositivos móviles si se apilan en vertical */
@media (max-width: 767px) {
    #jform_finder-searchform button.btn-primary,
    .finder input-group button.btn-primary,
    .finder button[type="submit"] {
        margin-right: 0 !important;
        margin-bottom: 10px !important; /* Espacio hacia abajo si se ponen uno sobre otro */
    }
}

/* ==========================================================================
   PÁGINA ERROR 404 - REDUCIR ESPACIOS Y SUBIR ENLACES
   ========================================================================== */

/* 1. Reducir el alto forzado del contenedor del mensaje */
.error-page-container,
div[class*="error-page-container"],
#gkContent {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 20px !important; /* Reduce el espacio vacío debajo del texto */
}

/* 2. Forzar al módulo de enlaces a subir inmediatamente después del texto */
.error-page #gkSidebar,
#gkSidebar.gkSidebar {
    float: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 30px !important;     /* Espacio perfecto y visible bajo el texto */
    margin-bottom: 50px !important;  
    clear: both !important;
}

/* 3. Estilo de los enlaces individuales */
.error-page #gkSidebar strong,
.error-page #gkSidebar a,
.error-page #gkSidebar span {
    font-size: 15px !important;
    margin: 0 15px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.btn.btn-inverse:active, .btn.btn-inverse.active {
  background: #f7cf3c !important;
  color: #323232 !important;
  border-color: #f7cf3c !important;
}

.nspMain .readon-button-wrap a:hover, .nspMain .readon-button-wrap a:focus, .nspMain .readon-button-wrap a:active, .nspMain .readon-button-wrap a.active, .nspMain .readon-button-wrap a.disabled, .nspMain .readon-button-wrap a[disabled] {
  color: #323232 !important;
  background-color: #f7cf3c !important;
}

#gkHeaderNav {
  background: none !important;
}

.item-page > div[itemprop="articleBody"] ol li::before, .item-page > .itemIntroText ol li::before, .item-page > .itemFullText ol li::before {
  content: counter(step-counter) ".";
  color: #323232 !important;
  left: 0;
  position: absolute;
}

.gkNspPM-EvoNews1 .leading .nspHeader {
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.nspMain.big-img .nspHeader {
  font-size: 35px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.gkNspPM-EvoNews2 .leading .nspHeader {
  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.gkNspPM-EvoNews3 .leading .nspHeader {
  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.nspMain.big-list .nspHeader {
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .gkNspPM-EvoNews1 .leading .nspHeader {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.nspMain.big-img .nspHeader {
  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.gkNspPM-EvoNews2 .leading .nspHeader {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.gkNspPM-EvoNews3 .leading .nspHeader {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.nspMain.big-list .nspHeader {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}
}

@media (max-width: 768px) {
.titular-grande .leading h4.nspHeader.fleft.fnone.has-image a, .titular-grande div.leading h4.nspHeader a, .titular-grande .nspArts > .nspArt:first-of-type h4.nspHeader a {
  font-family: 'Berlingske Serif Medium', 'Georgia', serif !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #323232 !important;
  letter-spacing: -0.5px !important;
  text-decoration: none !important;
}
}

#ampz_inline_top, #ampz_inline_bottom {
  margin: 20px 0 !important;
}

#gkMainbodyTopWrap {
  border-bottom: none !important;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

#gkBottom .box + .box {
  margin-top: 30px !important;
}

.gkNspPM-EvoNews3 .intro {
  border-top: none !important;
  padding-top: 0px !important;
}

.nspMain .readon-button-wrap a {
  border-color: none !important;
}

.item-page > div[itemprop="articleBody"] ul > li::before, .item-page > .itemIntroText ul > li::before, .item-page > .itemFullText ul > li::before, .list-1 > li::before, .list-2 > li::before, .list-3 > li::before {
  color: #323232 !important;
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  top: 5px;
}

.mwall-pagination-wrapper {
  /*margin: 25px 0 30px;*/
  margin: 30px 0 0px !important;
}

.mwall-columns .mwall-item-inner {
  padding: 0px 0 !important;
  position: relative;
  z-index: 2;
}

/* Estilo del botón/pastilla oscuro */
.pastilla-amarilla, 
a.pastilla-amarilla {
    background-color: #f7cf3c !important; /* Fondo gris oscuro */
    color: #323232 !important;            /* Texto blanco para excelente contraste */
    display: inline-block !important;      /* Le da forma de botón */
    padding: 2px 6px 8px 8px !important;         /* Margen interno para que sea mullido */
    border-radius: none;        /* Bordes completamente redondeados */
    font-weight: bold !important;          /* Texto en negrita */
    margin-top: 5px !important;            /* Separación con el ítem superior */
    text-align: center !important;
    text-decoration: none !important;     /* Quita subrayados */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efecto Hover (al pasar el ratón o pulsar en móvil) */
.pastilla-amarilla:hover, 
.pastilla-amarilla:focus,
.pastilla-amarilla:active {
    background-color: #f7cf3c !important; /* Un gris un poco más claro al interactuar */
    color: #323232 !important;            /* Mantiene el texto blanco */
    text-decoration: none !important;
    transform: scale(1.02);               /* Un ligerísimo efecto de aumento al pulsar */
}

/* 1. Oculta el módulo por defecto si detecta elementos de listado de categoría */
.blog .solo-en-articulos,
.category-desc + .solo-en-articulos,
#gkMainbody:has(.category-desc) ~ #gkSidebarRight .solo-en-articulos,
#gkMainbody:has(.blog) ~ #gkSidebarRight .solo-en-articulos {
    display: none !important;
}

/* 2. Lo muestra únicamente cuando la página cargada es un artículo completo (item-page) */
.item-page .solo-en-articulos,
#gkMainbody:has(.item-page) ~ #gkSidebarRight .solo-en-articulos {
    display: block !important;
}