/* HERO BANNER  */

/* Desktop: altura normal del hero */
.hero-emprendimiento {
    min-height: 500px;
}

@media (min-width: 992px) {
    .p-lg-editorial-hero {
        padding: 24px !important;
    }
}

/* Aplicar 'Tiempos Headline' al H1 del banner principal y a otros H1 de esta vista */
.page-programas h1 {
    font-family: 'TiemposHeadline' !important;
    line-height: 88px !important;
    font-size: 80px !important;
}

.page-programas h2 {
    font-family: 'TiemposHeadline' !important;
    font-size: 48px;
}

.page-programas h3 {
    font-family: 'TiemposHeadline' !important;
    font-size: 32px;
}

.page-programas h4 {
    font-family: 'BentonSansBBVA-Medium' !important;
    font-size: 24px;
}

.page-programas a {
    font-family: 'BentonSansBBVA-Book' !important;
}

.page-programas p {
    font-family: 'BentonSansBBVA-Book' !important;
    color: hsla(233, 82%, 15%, 1);
    font-size: 20px;
}

.title-hero-programa-editorial {
    color: #070E46;
    overflow-wrap: break-word;
    font-family: 'TiemposHeadline', sans-serif !important;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0%
}

.subTitle-hero-programa-editorial {
    font-family: 'BentonSansBBVA-Book', sans-serif !important;
    font-weight: 400;
    font-size: 15.01px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #070E46;
}

/* ==========================================================================
   Parte D - Donaciones
   ========================================================================== */

.contenedor-parte-d {
    /* Sombra suave para que flote sobre el fondo gris */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
}

/* Ajuste para que en móviles la imagen no quede gigante */
@media (max-width: 991px) {
    .contenedor-parte-d img {
        min-height: 300px !important;
    }
    .btn-share-blue{
        margin-left: 0 !important;
    }
    
}

/* Efecto hover sutil para el botón blanco */
.contenedor-parte-d .btn-light {
    transition: all 0.3s ease;
}

.contenedor-parte-d .btn-light:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Clases Utilitarias de la Vista
   ========================================================================== */

.padding-dinamico {
    /* 1rem en móviles, 5% del ancho de pantalla en PC normales, tope de 8rem en monitores gigantes */
    padding-left: clamp(1rem, 8.5vw, 8.5rem) !important;
    padding-right: clamp(1rem, 8.5vw, 8.5rem) !important;
}

.titulo-biblioteca {
    font-family: 'TiemposHeadline-Bold', serif; /* O la fuente de títulos configurada */
    color: #072146; /* Color azul corporativo de BBVA */
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0%;
    text-align: center;
}

/* ==========================================================================
   Estilos de biblioteca digital
   ========================================================================== */

/* Contenedor general de pestañas */
.biblioteca-filtros .nav-tabs {
    border-bottom: 2px solid #D2D4D6 !important; /* Línea gris de fondo completa */
}

/* Estilo base del botón/pestaña */
.biblioteca-filtros .btn-tab {
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    font-size: 1.1rem;
    color: #001391 !important; /* Gris de texto inactivo */
    border: none !important;
    background: transparent !important;
    padding: 12px 24px;
    margin-bottom: -2px; /* Alineación perfecta sobre el borde */
    position: relative;
    transition: color 0.3s ease;
}

/* Efecto Hover */
.biblioteca-filtros .btn-tab:hover {
    color: #072146 !important; /* Azul oscuro al pasar el cursor */
}

/* Estado Activo (Pestaña Seleccionada) */
.biblioteca-filtros .btn-tab.active {
    color: #072146 !important; /* Azul corporativo */
    font-family: 'BentonSansBBVA-Bold', sans-serif;
}

/* Línea azul indicadora debajo de la pestaña activa */
.biblioteca-filtros .btn-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #070E46; /* Azul brillante indicador de BBVA */
}

.title-biblioteca {
    font-family: Tiempos Headline;
    color: #070E46;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0%;
}

.description-biblioteca {
    font-family: 'BentonSansBBVA-Book', sans-serif;
    color: #070E46;
    font-weight: 400;
    font-size: 15.01px;
    line-height: 24px;
    letter-spacing: 0%;
}

.btn-descargar {
    background-color: #001391;
    color: #ffffff;
    border: none;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 137px !important;
    height: 56px;
    opacity: 1;
    border-radius: 8px !important;
    font-weight: 500;
}

.btn-descargar:hover {
    background-color: #070E46 !important;
}

.btn-descargar-CC {
    background-color: #001391;
    color: #ffffff;
    border: none;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 137px !important;
    height: 56px;
    opacity: 1;
    border-radius: 8px !important;
    font-weight: 500;
}

.btn-descargar-CC:hover {
    background-color: #f8f7f7 !important;
    color: #070E46 !important;
}

.btn-compartir {
    background-color: #F7F8F8;
    color: #001391;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 138px !important;
    height: 56px;
    opacity: 1;
    border-radius: 8px !important;
    border: none;
    font-weight: 500;
}

.btn-compartir2 {
    background-color: #001391;
    color: #FFFFFF;
    border: 2px solid #FFFFFF !important;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 138px !important;
    height: 56px;
    opacity: 1;
    border-radius: 8px !important;
    border: none;
    font-weight: 500;
}

.btn-compartir:hover {
    background-color: transparent !important;
    color: #001391 !important;
}

.btn-compartir2:hover {
    background-color: transparent !important;
    border: 2px solid #001391 !important;
    color: #FFFFFF !important;
}

/* =============================================================================
 * ESTILOS DE CORRECCIÓN ABSOLUTA PARA EL ESTILO MINIMALISTA SUELTO Y SUBRAYADO
 * ============================================================================= */
.prensa-custom-pagination {
    font-family: 'BentonSans', sans-serif !important;
    gap: 16px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 48px !important;
    margin-bottom: 24px !important;
}

.prensa-custom-pagination .page-separator {
    color: #D2D4D6 !important;
    font-weight: 300 !important;
    user-select: none !important;
    margin: 0 4px !important;
    font-size: 16px !important;
}

.prensa-custom-pagination .page-numbers-container {
    gap: 20px !important;
    align-items: center !important;
    display: flex !important;
}

.prensa-custom-pagination .page-nav,
.prensa-custom-pagination .page-num {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #001391 !important; /* Azul Corporativo BBVA Provincial */
    text-decoration: none !important;
    position: relative !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease-in-out !important;
}

/* Estilo del Número Actual Seleccionado con su línea inferior dinámica */
.prensa-custom-pagination .page-num.current {
    color: #070E46 !important;
    font-weight: 700 !important;
    pointer-events: none !important;
}

.prensa-custom-pagination a.page-nav:hover,
.prensa-custom-pagination a.page-num:hover {
    color: #070E46 !important;
}

.prensa-custom-pagination .page-nav.disabled {
    color: #98A0A6 !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.patrocinios-main-title {
    color: #070E46;
    font-family: 'TiemposHeadline', serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 56px;
    letter-spacing: 0%;
    text-align: center;
}

/* ========================================================================================
 * ESTILOS DE cabecera de sección y botones de filtro para el bloque de biblioteca digital
 * ======================================================================================== */

.programa-editorial-main-title {
    font-family: 'TiemposHeadline-Bold', serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0%;
    text-align: center;
}

.btn-programa-editorial,
.btn-catalogo-cultural {
    background: none;
    border: none;
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    font-size: 15px;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
}

.btn-programa-editorial,
.btn-catalogo-cultural {
    color: #001391 !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: #070E46 !important;
    border-color: #ffffff;
    background-color: #f7f8f8 !important;
}

.btn-compartir:focus-visible {
    color: #070E46 !important;
    background-color: #ffffff;
    border-color: none;
    outline: 0;
    box-shadow: none;
}

.btn-check:checked+.btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
    box-shadow: none !important;
}

.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: none;
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.card-title-programa-editorial {
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0%;
}

.card-text-programa-editorial {
    font-family: 'BentonSansBBVA-Book', sans-serif;
    color: #070E46 !important;
    font-weight: 400;
    font-size: 15.01px;
    line-height: 24px;
    letter-spacing: 0%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   1. CONTROL DE COLOR: PESTAÑAS DE FILTRO (Catálogo Cultural / Prog. Editorial)
   ========================================================================== */

/* Estado por defecto (Inactivo) */
.programa-editorial-biblioteca .btn-tab-filtro {
    color: #001391 !important; /* Azul estándar inactivo */
    background: none !important;
    border: none !important;
    transition: color 0.3s ease;
}

/* Estado Activo / Seleccionado de la Pestaña Superior */
.programa-editorial-biblioteca .btn-tab-filtro.active,
.programa-editorial-biblioteca .btn-tab-filtro:active,
.programa-editorial-biblioteca .btn-tab-filtro:focus {
    color: #070E46 !important; /* Azul oscuro premium de BBVA al activarse */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 15.01px;
    font-family: 'BentonSansBBVA-Medium' !important;
    cursor: pointer;
    line-height: 24px;
    letter-spacing: 0%;
    font-weight: 500 !important;
}

/* ==========================================================================
   2. CONTROL DE COLOR: BOTÓN COMPARTIR 2 (Tarjetas del Catálogo Cultural)
   ========================================================================== */

/* Estado por defecto (Sobre el fondo azul de la tarjeta) */
.btn-compartir2 {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* ESTADO CUANDO SE ACTIVA (Dropdown Abierto / Click Presionado) */
.btn-compartir2.btn.show,
.btn-compartir2.btn.active,
:not(.btn-check) + .btn-compartir2:active {
    color: #FFFFFF !important; /* El texto cambia a azul corporativo */
    border: 2px solid #FFFFFF !important;
}

/* Hover intermedio por si pasan el mouse antes de dar click */
.btn-compartir2:hover {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* ===================================================================================================
 * ESTILOS RESPONSIVE PARA EL BLOQUE DE BIBLIOTECA DIGITAL (Programas Editoriales y Catálogo Cultural)
 * =================================================================================================== */

/* Padding base desktop */
.section-destacado-editorial {
    padding: 24px !important;
}

@media (min-width: 768px) and (max-width: 991px) {

    .mxAuto-Resp {
        margin-top: 0px !important;
    }

    .col9-Resp {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .hero-emprendimiento {
        min-height: 580px !important;
        align-items: flex-end !important;
        padding-bottom: 24px !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .title-hero-programa-editorial {
        font-size: 40px !important;
        line-height: 48px !important;
    }

    .patrocinios-main-title {
        font-size: 32px !important;
        line-height: 40px !important;
        text-align: left !important;
    }

    .programa-editorial-biblioteca {
        padding-top: 5% !important;
    }
 
    .img-container-libro {
        width: 100% !important;
        height: 528.75px !important;
    }

    .card-libro-secundario {
        padding: 18px !important;
    }

    .wrapper-imagen-destacada-editorial {
        height: 180px !important;
        max-width: 100% !important;
    }

    /* Primera card destacada: apilar verticalmente con imagen arriba */
    .section-destacado-editorial .row.flex-md-row {
        flex-direction: column !important;
    }

    .section-destacado-editorial .col-md-5 {
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
    }

    .section-destacado-editorial .col-md-7 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .section-destacado-editorial .wrapper-img-normalizado {
        max-width: 100% !important;
        height: 390px !important;
        margin-left: 0 !important;
    }
    .img-fluid-pg {
        max-width: 100% !important;
        aspect-ratio: 18 / 10;
        height: auto !important;
     }

    /* Padding unificado para la card destacada */
    .section-destacado-editorial {
        padding: 18px !important;
    }

    /* Botón Descargar al 100% en tablet, Share apilado abajo */
    .btn-descargar-CC,
    .btn-descargar {
        width: 100% !important;
        min-height: 56px !important;
    }

    .section-destacado-editorial .d-flex.gap-2 > .dropdown,
    .card-libro-secundario .d-flex.gap-2 > .dropdown,
    .d-flex.gap-2 > .dropdown.d-inline-block {
        width: 50% !important;
        flex: 0 0 50% !important;
        display: flex !important;
    }

    .btn-compartir2,
    .btn-compartir {
        width: 100% !important;
    }
    .hero-emprendimiento .bg-white {
        margin: 0 auto !important;
        max-width: 100% !important;
        padding: 24px !important;
    }
     .hero-editorial {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        background-position: center center !important;
        background-size: cover !important;
        text-align: center; 
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Ajuste de los títulos principales */
    .hero-editorial h1,
    .hero-editorial .hero-title {
        font-size: 2rem !important; /* Reduce el tamaño de fuente exagerado de PC */
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    /* Ajuste del subtítulo o descripción corta */
    .hero-editorial p,
    .hero-editorial .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Elementos flotantes o columnas de Bootstrap invertidas */
    .hero-editorial .row {
        flex-direction: column-reverse !important; /* Si la imagen está a la derecha, pasa abajo del texto */
    }

    /* Ajuste de imágenes internas del banner si aplica */
    .hero-editorial img {
        max-width: 85% !important;
        height: auto !important;
        margin-top: 1.5rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Botón o enlaces de acción (Call to Action) */
    .hero-editorial .btn,
    .hero-editorial .cta-link {
        width: 100% !important; /* Botón a ancho completo en móvil para fácil pulsación tactile */
        max-width: 280px;
        margin: 0 auto !important;
        display: inline-block;
    }

  
}

/* Móvil: Botones 50% */
@media (max-width: 991px) {
    .btn-descargar-CC,
    .btn-descargar {
        width: 100% !important;
        margin-bottom: 10px;
        min-height: 56px !important;
    }

    .section-destacado-editorial .d-flex.gap-2 > .dropdown,
    .card-libro-secundario .d-flex.gap-2 > .dropdown,
    .d-flex.gap-2 > .dropdown.d-inline-block {
        width: 50% !important;
        flex: 0 0 50% !important;
        display: flex !important;
    }

    .btn-compartir2,
    .btn-compartir {
        width: 100% !important;
    }
    .patrocinios-main-title{
        font-size: 32px !important;
        line-height: 40px !important;
        text-align: left !important;
        margin-top: -20px;
    }
    .mx-auto.mxAuto-Resp {
        margin-top: 0px !important;
    }

    /* Hero: Caja blanca centrada y más abajo en móvil */
    .hero-emprendimiento {
        align-items: flex-end !important;
        padding-bottom: 24px !important;
    }

    .hero-emprendimiento .bg-white {
        margin: 0 auto !important;
        max-width: 98% !important;
    }

    .hero-emprendimiento .col9-Resp {
        width: 100% !important;
        margin-top: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    .subTitle-hero-programa-editorial{
        width: 94% !important;
    }
}