/*
Theme Name:     opera-child
Description:    Tema para web de Amigos de la ópera de A Coruña
Author:         Jueves
Author URI:     https://jueves.eu/
Template:       Divi
*/

.header-contact-btn{
    display:inline-block;
    padding:8px 18px;
    background:#F5F5F5;
    border:1px solid #D9D9D9;
    border-radius:4px;

    color:#333;
    font-size:15px;
    font-weight:600;
    line-height:1;
    text-decoration:none;

    transition:all .25s ease;
}

.header-contact-btn:hover{
    background:#808000;
    border-color:#808000;
    color:#fff;
}

/* ==========================================================================
   ESTILOS PERSONALIZADOS PARA EL NUEVO FOOTER (DIVI 5)
   ========================================================================== */

/* Fondo, textos y enlaces base */
#main-footer, 
.footer-custom-section {
    background-color: #2d2d2d !important;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
}

.footer-custom-section h3, 
.footer-custom-section h4 {
    color: #808000 !important; /* Verde Oliva */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-custom-section a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-custom-section a:hover,
.footer-bottom-custom a:hover {
    color: #808000 !important;
}

/* Listas con viñeta de color en el footer */
.footer-custom-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-custom-section ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.footer-custom-section ul li::before {
    content: "•";
    color: #808000;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* --- EXCEPCIONES: Eliminar viñetas en Redes y Menús de Divi --- */
.footer-custom-section .et_pb_social_media_follow li::before,
.footer-bottom-custom ul li::before {
    content: none !important; /* Desactiva el punto de un plumazo */
}

/* Módulo de Redes Sociales */
.footer-custom-section .et_pb_social_media_follow {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.footer-custom-section .et_pb_social_media_follow li {
    padding-left: 0 !important;
    margin: 0 6px !important;
}

/* Barra inferior (Créditos y Legal) */
.footer-bottom-custom {
    background-color: transparent !important;
    border-top: 1px solid #3d3d3d;
    padding: 20px 0;
    text-align: center;
}

.footer-bottom-custom a {
    color: #b0b0b0;
    font-size: 13px;
}





/* ==========================================================================
   SHORTCODE: BLOQUE DE NOTICIAS DIVIDIDO (IZQ/DER)
   ========================================================================== */

.news-split-container {
    display: flex;
    gap: 30px;
    width: 100%;
    margin: 20px 0;
}

/* Columna Izquierda: Destacada */
.news-left-featured {
    flex: 1.2; /* Ligeramente más ancha para dar peso */
    min-height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.news-left-featured:hover {
    transform: translateY(-3px);
}

.news-featured-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

.news-featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    color: #ffffff;
}

.news-date {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #808000; /* Tu color Verde Oliva */
    font-weight: bold;
    display: inline-block;
    margin-bottom: 8px;
}

.news-featured-title {
    color: #ffffff !important;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0 !important;
    line-height: 1.3;
}

.news-featured-excerpt {
    color: #e0e0e0;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Columna Derecha: Lista de 3 */
.news-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribución perfectamente proporcionada */
    gap: 15px;
}

.news-right-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff; /* Si va en la HOME (blanca). Si va en zona oscura, cambiar a #2d2d2d */
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: background 0.3s ease;
}

.news-right-item:hover {
    background: #fdfdfd;
}

.news-right-thumb {
    width: 85px;
    height: 85px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
}

.news-right-content {
    flex: 1;
}

.news-right-title {
    font-size: 15px;
    font-weight: 600;
    margin: 4px 0 0 0 !important;
    line-height: 1.4;
}

.news-right-title a {
    color: #2d2d2d !important; /* Texto oscuro */
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-right-title a:hover {
    color: #808000 !important; /* Hover verde oliva */
}

/* --- ADAPTACIÓN MÓVIL (RESPONSIVE) --- */
@media (max-width: 767px) {
    .news-split-container {
        flex-direction: column;
    }
    .news-left-featured {
        min-height: 300px;
    }
    .news-right-column {
        gap: 20px;
    }
}











/* ==========================================================================
   SHORTCODE: LISTA FLEXIBLE PARA COLUMNAS (50%)
   ========================================================================== */

.news-flex-col-block {
    width: 100%;
    margin-bottom: 30px;
}

/* Título de la sección */
.news-flex-heading {
    color: #2d2d2d !important; /* Si va en fondo blanco de la Home. Si va en fondo oscuro, cambia a #ffffff o #808000 */
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #808000; /* Línea decorativa verde oliva debajo del título */
    padding-bottom: 8px;
}

.news-flex-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Fila de la lista */
.news-flex-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #ededed; /* Separador sutil entre filas */
}

.news-flex-item:last-child {
    border-bottom: none; /* Quita la línea al último elemento */
}

/* Miniatura */
.news-flex-thumb {
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
}

.news-flex-content {
    flex: 1;
}

/* Reemplazo de la fecha por las categorías */
.news-flex-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #808000; /* Color corporativo */
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

/* Título de la entrada */
.news-flex-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 !important;
}

.news-flex-title a {
    color: #2d2d2d !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

/* Contenedor del botón y diseño corporativo */
.news-flex-btn-container {
    margin-top: 20px;
    text-align: left;
}

.news-flex-more-btn {
    display: inline-block;
    background-color: #808000; /* Fondo Verde Oliva */
    color: #ffffff !important;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.news-flex-more-btn:hover {
    background-color: #2d2d2d; /* Cambia a gris oscuro al pasar el cursor */
    transform: translateY(-1px);
}


















/* ==========================================================================
   SHORTCODE: TEATRO DE VÍDEOS DINÁMICO (70% / 30%)
   ========================================================================== */

.video-theater-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    background-color: #1f1f1f; /* Fondo oscuro tipo cine que hace resaltar los vídeos */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* --- REPRODUCTOR GRANDE (IZQUIERDA) --- */
.video-theater-main {
    flex: 2.3; /* Toma la mayor parte del espacio */
    position: relative;
}

.video-theater-main a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

.video-theater-preview {
    width: 100%;
    height: 100%;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    position: relative;
    transition: background-image 0.2s ease-in-out;
}

.video-theater-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.3) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border-radius: 6px;
}

/* Botón de Play Gigante */
.video-theater-play-btn {
    align-self: center;
    margin-auto: auto;
    margin-top: calc(210px - 75px); /* Centrado vertical aproximado */
    color: #ffffff;
    font-size: 36px;
    background: rgba(128, 128, 0, 0.85); /* Tu verde oliva corporativo */
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding-left: 6px;
    box-shadow: 0 0 20px rgba(128, 128, 0, 0.6);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.video-theater-main:hover .video-theater-play-btn {
    transform: scale(1.15);
    background-color: #808000;
}

/* Título del vídeo grande */
.video-theater-main-title {
    color: #ffffff !important;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* --- LISTA DE REPRODUCCIÓN (DERECHA) --- */
.video-theater-playlist {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto; /* Permite scroll si hubiese más elementos en el futuro */
    padding-right: 5px;
}

/* Personalizar barra de scroll de la playlist */
.video-theater-playlist::-webkit-scrollbar {
    width: 6px;
}
.video-theater-playlist::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 3px;
}

/* Elemento individual de la lista */
.playlist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #2d2d2d;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.playlist-item:hover {
    background: #3a3a3a;
}

/* Estado activo (el seleccionado actual) */
.playlist-item.is-active {
    background: #444440;
    border-left: 4px solid #808000; /* Indicador con tu color de marca */
}

.playlist-item-thumb {
    width: 80px;
    height: 55px;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    flex-shrink: 0;
}

.playlist-item-info {
    flex: 1;
}

.playlist-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #e0e0e0 !important;
    line-height: 1.4;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.playlist-item.is-active .playlist-item-title {
    color: #ffffff !important;
    font-weight: 600;
}

/* --- ADAPTACIÓN MÓVIL --- */
@media (max-width: 980px) {
    .video-theater-wrapper {
        flex-direction: column;
    }
    .video-theater-preview {
        min-height: 300px;
    }
    .video-theater-play-btn {
        margin-top: calc(150px - 65px);
    }
    .video-theater-playlist {
        max-height: none;
    }
}

















/* ==========================================================================
   HERO HOME: SPLIT 2 ÓPERAS PRINCIPALES
   ========================================================================== */

.hero-opera-box {
    padding: 60px 40px 40px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Empuja el texto hacia abajo */
    min-height: 550px; /* Altura ideal de la cabecera */
    box-sizing: border-box;
}

.hero-tag {
    color: #ffffff; /* Tu verde oliva corporativo */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.hero-title {
    color: #ffffff !important;
    font-size: 48px !important;
    font-weight: 800;
    margin: 0 0 2px 0 !important;
    text-transform: uppercase;
    line-height: 1.1;
}

.hero-author {
    color: #dcdcdc;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 15px;
    display: block;
}

.hero-cast {
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 25px !important;
    max-width: 90%;
}

/* Botonera interna */
.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-hero-primary, 
.btn-hero-secondary {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Botón Comprar */
.btn-hero-primary {
    background-color: #808000;
    color: #ffffff !important;
    border: 2px solid #808000;
}

.btn-hero-primary:hover {
    background-color: #ffffff;
    color: #2d2d2d !important;
    border-color: #ffffff;
}

/* Botón + Info */
.btn-hero-secondary {
    background-color: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

.btn-hero-secondary:hover {
    background-color: #ffffff;
    color: #2d2d2d !important;
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 767px) {
    .hero-opera-box {
        min-height: 450px;
        padding: 40px 20px 30px 20px;
    }
    .hero-title {
        font-size: 36px !important;
    }
}


/* ==========================================================================
   FILTRO DE DEGRADADO AUTOMÁTICO PARA LAS COLUMNAS HERO
   ========================================================================== */

/* 1. Preparamos las columnas para albergar la capa oscura */
.hero-col-izda,
.hero-col-dcha {
    position: relative !important;
    overflow: hidden !important;
}

/* 2. Creamos una capa invisible superpuesta por encima de la foto pero por debajo del texto */
.hero-col-izda::before,
.hero-col-dcha::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Este es el degradado que se aplicará automáticamente sobre cualquier imagen */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
    pointer-events: none; /* Permite que se pueda hacer clic a través de ella */
}

/* 3. Forzamos a que el contenedor del texto y los botones se sitúe por encima del degradado */
.hero-opera-box {
    position: relative;
    z-index: 2; /* Al ser mayor que el z-index de la capa anterior, el texto se lee limpio */
}


/* ==========================================================================
   SECCIÓN BANNERS DÚPLEX: FOCO ESCÉNICO ALTO CONTRASTE + JERARQUÍA
   ========================================================================== */

/* 1. Fondo de la sección: Foco de luz dramático de alto contraste */
.banner-socio-seccion {
    background: radial-gradient(circle at center, #4a4a4a 0%, #121212 100%) !important;
    padding: 40px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

/* Contenedor flexible de los 2 banners */
.banner-doble-wrapper {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Base común para ambas tarjetas (Fix Safari min-width) */
.banner-socio-card {
    flex: 1 1 0%;
    min-width: 0; /* FIX SAFARI */
    padding: 26px 30px !important;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --------------------------------------------------------------------------
   3. OPCIÓN 3: DIFERENCIACIÓN DE LOS 2 BANNERS
   -------------------------------------------------------------------------- */

/* BANNER 1: 74ª Temporada (Elegante y secundario) */
.banner-socio-card:nth-child(1) {
    background-color: rgba(45, 45, 45, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 4px solid #ffffff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.banner-socio-card:nth-child(1):hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.6);
}

/* BANNER 2: Hazte Socio (Protagonista de conversión) */
.banner-socio-card:nth-child(2) {
    background: linear-gradient(135deg, #383c27 0%, #222518 100%) !important;
    border: 1px solid rgba(128, 128, 0, 0.4);
    border-top: 4px solid #808000 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(128, 128, 0, 0.2);
}

.banner-socio-card:nth-child(2):hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7), 0 0 30px rgba(128, 128, 0, 0.35);
}

/* --------------------------------------------------------------------------
   TEXTOS Y BOTONES (Ajustes de elasticidad para Safari)
   -------------------------------------------------------------------------- */
.banner-socio-text {
    flex: 1 1 auto;
    min-width: 0; /* FIX SAFARI: evita que el texto se monte bajo/sobre el botón */
}

.banner-socio-text h3,
.banner-socio-text h1 {
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}

.banner-socio-text p {
    color: #cccccc !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.banner-socio-text strong {
    color: #b5b500 !important;
}

/* Botones */
.banner-socio-card .btn-socio-cta {
    background-color: #808000;
    color: #ffffff !important;
    padding: 12px 22px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: inline-block;
    flex-shrink: 0; /* FIX SAFARI: Impide compresión del botón */
}

.banner-socio-card .btn-socio-cta:hover {
    background-color: #ffffff;
    color: #121212 !important;
}

/* --- ADAPTACIÓN RESPONSIVE --- */
@media (max-width: 980px) {
    .banner-doble-wrapper {
        flex-direction: column;
        gap: 18px;
    }
}

@media (max-width: 580px) {
    .banner-socio-card {
        flex-direction: column;
        text-align: center;
        padding: 22px 20px !important;
    }
    
    .banner-socio-card .btn-socio-cta {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
}




/* ==========================================================================
   CABECERA DE NOTICIAS PREMIUM: REDISEÑO COMPACTO Y UNIFICADO
   ========================================================================== */

/* 1. Estilo de la Fila Completa: Unificada en blanco y más compacta */
.cabecera-noticia-destacada {
    background-color: #ffffff !important; /* Eliminamos el gris, todo a blanco limpio */
    padding: 35px 0 25px 0 !important; /* Relleno vertical muy reducido para evitar el espacio vacío */
    border-bottom: 2px solid #808000; /* Tu verde oliva delimita de forma rotunda el fin de la cabecera */
    align-items: center !important; /* Mantiene el centrado vertical perfecto */
}

/* 2. Potenciación del Título y Metadatos */
.cabecera-noticia-destacada .entry-title {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.5px;
}

/* Enlaces de categorías y fecha */
.cabecera-noticia-destacada .et_pb_title_meta_container {
    font-size: 12px !important;
    color: #666666 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cabecera-noticia-destacada .et_pb_title_meta_container a {
    color: #808000 !important; /* Categorías en verde oliva */
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cabecera-noticia-destacada .et_pb_title_meta_container a:hover {
    color: #1a1a1a !important;
}

/* Ocultar los comentarios */
.cabecera-noticia-destacada .comments-number {
    display: none !important;
}

/* 3. Control de la Imagen Destacada */
.noticia-thumb-variable,
.noticia-thumb-variable .et_pb_image_wrap,
.noticia-thumb-variable img {
    width: 100% !important;
    height: 320px !important; /* Reducida ligeramente de 380px a 320px para compactar el bloque */
}

.noticia-thumb-variable img {
    object-fit: cover !important; 
    object-position: center !important;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Sombra más sutil y limpia */
}

/* --- AJUSTE ADICIONAL DE ESPACIADO PARA EL CUERPO (SECCIÓN INFERIOR) --- */
/* Forzamos a que la sección del contenido empiece pegada a la línea verde sin huecos gigantes */
.cabecera-noticia-destacada + .et_pb_section {
    padding-top: 30px !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
    .cabecera-noticia-destacada {
        padding: 25px 0 15px 0 !important;
    }
    .cabecera-noticia-destacada .entry-title {
        font-size: 26px !important;
    }
    .noticia-thumb-variable,
    .noticia-thumb-variable .et_pb_image_wrap,
    .noticia-thumb-variable img {
        height: 220px !important;
    }
}










/* ==========================================================================
   MENÚ SUPERIOR: BOTÓN DESTACADO "HAZTE SOCIO"
   ========================================================================== */

/* 1. Estilo del botón en ordenadores (Escritorio) */
@media (min-width: 981px) {
    /* Buscamos el elemento de lista con tu clase y apuntamos a su enlace */
    .boton-socio a {
        background-color: #808000 !important; /* Tu verde oliva de marca */
        color: #ffffff !important; /* Texto en blanco puro para máximo contraste */
        padding: 10px 20px !important; /* Espaciado interno para darle forma de botón */
        border-radius: 4px !important; /* Esquinas ligeramente redondeadas corporativas */
        font-weight: 700 !important; /* Texto en negrita para resaltar */
        text-transform: uppercase !important; /* Letras mayúsculas institucionales */
        letter-spacing: 0.5px !important;
        transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease !important;
        
        /* Ajustes de alineación vertical en la barra de navegación de Divi */
        margin-top: -5px !important; 
        display: inline-block !important;
        box-shadow: 0 4px 10px rgba(128, 128, 0, 0.2); /* Sutil brillo verde inferior */
    }

    /* Efecto al pasar el cursor (Hover) */
    .boton-socio a:hover {
        background-color: #2d2d2d !important; /* Cambia al gris oscuro de tu paleta */
        color: #ffffff !important;
        transform: translateY(-1px); /* Pequeño efecto de elevación interactivo */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }
}

/* 2. Adaptación para el Menú Móvil (Hamburguesa) */
@media (max-width: 980px) {
    .boton-socio a {
        background-color: #808000 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        padding: 12px !important;
        margin: 10px 20px !important; /* Separa el botón del resto de enlaces planos del menú móvil */
        border-radius: 4px !important;
        display: block !important;
    }
    
    .boton-socio a:hover {
        background-color: #2d2d2d !important;
    }
}













/* ==========================================================================
   THEME BUILDER: REJILLA DE ARCHIVOS HISTÓRICOS Y CATEGORÍAS
   ========================================================================== */

/* 1. Forzar que Divi 5 maquete el Grid del blog de forma limpia */
.grid-archivos-historicos .et_pb_salvage_iterable {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas en escritorio */
    gap: 30px !important;
}

/* 2. Estilo de cada tarjeta individual de noticia */
.grid-archivos-historicos .et_pb_post {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.grid-archivos-historicos .et_pb_post:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

/* 3. Control de las imágenes destacadas del archivo (Tratamiento Object-Fit) */
.grid-archivos-historicos .entry-featured-image-url {
    margin: 0 !important;
    height: 450px !important; /* Altura fija para que todas las tarjetas midan lo mismo */
    overflow: hidden !important;
}

.grid-archivos-historicos .entry-featured-image-url img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recorta y adapta fotos verticales u horizontales sobre la marcha */
    object-position: center !important;
}

/* 4. Textos internos de las tarjetas */
.grid-archivos-historicos .entry-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding: 20px 20px 5px 20px !important;
    margin: 0 !important;
}

.grid-archivos-historicos .entry-title a {
    color: #2d2d2d !important;
    text-decoration: none !important;
}

.grid-archivos-historicos .entry-title a:hover {
    color: #808000 !important; /* Tu verde oliva al pasar el cursor */
}

/* Fecha de la noticia */
.grid-archivos-historicos .post-meta {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #888888 !important;
    padding: 0 20px 10px 20px !important;
    margin: 0 !important;
}

/* Extracto o resumen del texto */
.grid-archivos-historicos .post-content {
    padding: 0 20px 20px 20px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #666666 !important;
    flex-grow: 1 !important; /* Empuja el botón o final de tarjeta hacia abajo equitativamente */
}

/* --- ADAPTACIÓN RESPONSIVE (TABLETS Y MÓVILES) --- */
@media (max-width: 980px) {
    .grid-archivos-historicos .et_pb_salvage_iterable {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en tablets */
    }
}

@media (max-width: 767px) {
    .grid-archivos-historicos .et_pb_salvage_iterable {
        grid-template-columns: 1fr !important; /* 1 sola columna en móvil */
    }
    .grid-archivos-historicos .entry-featured-image-url {
        height: 180px !important;
    }
}






/* ==========================================================================
   ARCHIVOS HISTÓRICOS: CABECERA PREMIUM Y PAGINACIÓN ESTILIZADA
   ========================================================================== */

/* --- 1. CABECERA CON ENTIDAD (Fondo Oscuro Institucional) --- */
/* Aplica esto a la sección o fila del título en tu plantilla de Archivos */
.cabecera-archivo-titulo {
    background-color: #1a1a1a !important; /* Gris casi negro tipo teatro */
    background-image: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    padding: 60px 20px !important;
    text-align: center !important;
    border-bottom: 4px solid #808000; /* Tu verde oliva como ancla visual */
    margin-bottom: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* El h2 dinámico del título del archivo */
.cabecera-archivo-titulo h2,
.cabecera-archivo-titulo .entry-title {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- 2. PAGINACIÓN MODERNA (ESTILO BOTONES) --- */
.pagination.clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px; /* Alineado con el ancho del grid */
    margin: 40px auto !important;
    padding: 20px 0 !important;
    border-top: 1px solid #eaeaea;
}

/* Contenedores nativos izquierdo y derecho de Divi */
.pagination .alignleft,
.pagination .alignright {
    float: none !important; /* Cancelamos el float antiguo */
    margin: 0 !important;
}

/* Estilo de los enlaces convertidos en botones */
.pagination a {
    background-color: #ffffff !important;
    color: #2d2d2d !important;
    border: 2px solid #2d2d2d !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block;
}

/* Efecto hover de los botones de paginación */
.pagination a:hover {
    background-color: #808000 !important; /* Tu verde oliva al pasar el cursor */
    border-color: #808000 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(128, 128, 0, 0.15);
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
    .cabecera-archivo-titulo {
        padding: 40px 15px !important;
    }
    .cabecera-archivo-titulo h2,
    .cabecera-archivo-titulo .entry-title {
        font-size: 28px !important;
    }
    .pagination.clearfix {
        flex-direction: column !important;
        gap: 15px;
    }
    .pagination a {
        width: 100%;
        text-align: center;
    }
}







/* Apuntamos directamente al H2 dentro del módulo con esa clase */
.home-seccion-titulo h2 {
    text-align: center !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #2d2d2d !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
}

/* ==========================================================================
   HOME: REJILLA DE ACTIVIDADES PARALELAS (VERSIÓN DEFINITIVA DIVI 5)
   ========================================================================== */

/* 2. Estilo de cada Tarjeta (Card) */
.grid-actividades-home .et_pb_column {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    
    /* 💥 NEUTRALIZACIÓN DE ESPACIOS GIGANTES DE DIVI 5 💥 */
    --vertical-gap: 4px !important;     /* Forzamos a que el hueco interno entre módulos sea mínimo */
    --module-gutter: 4px !important;    /* Anulamos el espaciado por defecto del layout */
}

/* 3. Control ultra-compacto de las Imágenes */
.grid-actividades-home .et_pb_image {
    margin: 0 0 6px 0 !important;
    height: 180px !important; /* Imagen más baja para ahorrar espacio vertical */
    width: 100% !important;
}

.grid-actividades-home .et_pb_image_wrap,
.grid-actividades-home .et_pb_image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.grid-actividades-home .et_pb_image img {
    object-fit: cover !important;
}

/* 4. Rellenos de los bloques de texto */
.grid-actividades-home .et_pb_text {
    padding-left: 16px !important; /* Más compacto lateralmente */
    padding-right: 16px !important;
    margin: 0 !important; /* Eliminamos márgenes nativos; el flujo lo controla la variable */
}

/* 5. TÍTULO UNIVERSAL */
.grid-actividades-home .et_pb_text h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2d2d2d !important;
    text-transform: uppercase;
    line-height: 1.2 !important;
    margin: 4px 0 2px 0 !important;
}

/* 6. EL METADATO VERDE (INFALIBLE) */
/* "Coge cualquier módulo de texto que sea hermano directo del módulo que contiene el H3" */
.grid-actividades-home .et_pb_text:has(h3) + .et_pb_text p {
    color: #808000 !important; /* Tu verde oliva corporativo */
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 2px 0 !important;
}

/* 7. EXTRACTO DESCRIPTIVO (PÁRRAFO GENERAL) */
/* Modificamos el párrafo de la descripción para diferenciarlo claramente del metadato */
.grid-actividades-home .et_pb_text:has(h3) + .et_pb_text + .et_pb_text p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #666666 !important;
    margin: 0 0 10px 0 !important;
}

/* 8. Botón optimizado al fondo */
.grid-actividades-home .et_pb_button_module_wrapper {
    margin-top: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 14px !important;
    display: block !important;
}

.grid-actividades-home a.et_pb_button {
    display: inline-block !important;
    background-color: transparent !important;
    color: #2d2d2d !important;
    border: 2px solid #2d2d2d !important;
    padding: 4px 30px 4px 10px !important; /* Súper fino y elegante */
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    position: relative !important;
    overflow: hidden !important;
}

.grid-actividades-home a.et_pb_button:hover {
    background-color: #808000 !important;
    border-color: #808000 !important;
    color: #ffffff !important;
}

/* Control de Flecha Hover */
.grid-actividades-home a.et_pb_button:after {
    font-size: 11px !important;
    line-height: 1em !important;
    right: 8px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    transition: all 0.2s ease !important;
}

.grid-actividades-home a.et_pb_button:hover:after {
    opacity: 1 !important;
    color: #ffffff !important;
}