/* ==========================================================================
   Tipografía de la vista Programas
   ========================================================================== */

/* 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-Medium' !important;
    font-weight: 500 !important;
}

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

.btn-bbva-white:hover {
    background-color: #f0f0f0;
    color: #070E46 !important;
}

.btn-bbva-white {
    background-color: #ffffff;
    color: #001391 !important;
    text-decoration: none;
    font-size: 15px;
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    padding: 14px 28px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 56px;
    width: 184px;
    display: grid; place-items: center
}

.slide-counter {
    color: #070E46;
    font-size: 15.01px;
    font-family: 'BentonSansBBVA-BookItalic', sans-serif;
    background-color: white;
    border-radius: 40px;
    padding: 9px 12px;
}

.btn-bbva{
    width: 184px;
    height: 56px;
    display: grid; place-items: center;

}

/* ==========================================================================
   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;
    }
    .modulo-papagayo {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    }
    .modulo-papagayo h2{
        text-align: left !important;
    }
    .modulo-papagayo p{
        text-align: left !important;
    }
    .page-programas h1 {
        font-size: 48px !important;
    }
    .page-programas h2 {
        font-size: 32px !important;
    }
      /* Carrusel Iniciativas - padding reducido en móvil */
    #carruselIniciativas .card-body.px-4 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }
    .page-programas h3 {
        margin-top: 0px;
    }

}

/* 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;
}

.btn-blanco{
    background-color: #f7f8f8;
    display: inline-block;
    color: #001391 !important;
    text-decoration: none;
    font-size: 15px;
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    padding: 14px 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;

}

.btn-blanco:hover {
    background-color: #f0f0f0 !important;
    color: #070e46 !important;
}



/* ==========================================================================
   Módulo: Programa Papagayo
   ========================================================================== */

/* --------------------------------------------------------------------------
   Resolución Tablet (768px - 991px)
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .btn-bbva{
        width: 100% !important;

    }

    .btn-bbva-white {
        width: 100%;
    }
    
    /* 1. MANTENEMOS EL "PAPEL":
       No sobreescribimos el background ni el shadow. Dejamos que el HTML respire.
       Solo centramos la tarjeta y le damos un ancho máximo elegante. */
    .modulo-papagayo h2 {
        font-size: 32px;
    }

    /* 2. Invertimos el DOM: Imagen pasa arriba, texto pasa abajo */
    .modulo-papagayo .row.align-items-center {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 3. COLUMNA DE IMAGEN (Pasa arriba) */
    .modulo-papagayo .col-lg-6:last-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 2rem !important; /* Margen para separarla del título */
    }

    /* 4. 🔥 ELIMINAMOS LA "IMAGEN BLANCA FANTASMA":
       Sobreescribimos los 168px de la clase global para que la foto llene 
       completamente su contenedor, eliminando el espacio blanco vacío a su alrededor. */
    .modulo-papagayo .ratio img.img-fluid {
        width: 100% !important;
        height: 100% !important; /* Fuerza a llenar la caja */
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
        border-radius: 1rem !important; /* Le aplicamos el redondeo directo a la foto */
    }

    /* 5. COLUMNA DE TEXTO (Pasa abajo) */
    .modulo-papagayo .col-lg-6:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important; 
        text-align: left !important;
    }

    /* 6. Ajustes de Tipografía y botón full-width */
    .modulo-papagayo h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .modulo-papagayo p {
        font-size: 1rem !important;
    }

    .modulo-papagayo .btn {
        display: block !important;
        width: 100% !important;
        margin-top: 1.5rem !important;
    }
}
/* --------------------------------------------------------------------------
   Resolución Mobile (Hasta 767px)
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .btn-bbva{
        width: 100% !important;

    }
    
    .btn-bbva-white {
        width: 100%;
    }
    /* 1. ADAPTACIÓN DEL "PAPEL":
       Mantenemos el fondo blanco y la sombra, pero reducimos el padding 
       para aprovechar al máximo el espacio en pantallas pequeñas. */
    .modulo-papagayo {
        border-radius: 1rem !important;
    }

    /* 2. INVERSIÓN DEL DOM (Mobile): Imagen pasa arriba, texto pasa abajo */
    .modulo-papagayo .row.align-items-center {
        display: flex !important;
        flex-direction: column-reverse !important;
        text-align: center !important; /* Centramos todo el contenido en celular */
    }

    /* 3. COLUMNA DE IMAGEN (Pasa arriba) */
    .modulo-papagayo .col-lg-6:last-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 1.5rem !important; /* Espacio de respiración antes del título */
    }

    /* 4. 🔥 ESCUDO ANTI-GLOBAL (Mobile):
       Sobreescribimos los 168px de la clase .img-fluid. Dejamos que la imagen
       ocupe el 100% del ancho del celular. */
    .modulo-papagayo .ratio img.img-fluid {
        width: 100% !important;
        height: auto !important; /* En móvil dejamos que la altura fluya orgánicamente */
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
        border-radius: 0.75rem !important; /* Redondeo ligeramente más suave para móvil */
    }

    /* 5. COLUMNA DE TEXTO (Pasa abajo) */
    .modulo-papagayo .col-lg-6:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important; 
    }

    /* 6. Ajustes de Tipografía (Legibilidad Mobile) */
    .modulo-papagayo h2 {
        font-size: 1.5rem !important; /* Título un poco más pequeño para evitar saltos de línea excesivos */
        margin-bottom: 1rem !important;
    }

    .modulo-papagayo p {
        font-size: 0.95rem !important;

    }

    /* 7. Botón 100% de ancho (Área táctil optimizada) */
    .modulo-papagayo .btn {
        display: block !important;
        width: 100% !important;
        margin-top: 1rem !important;
        padding: 0.75rem !important;
    }



}


/* ==========================================================================
   Módulo: Donaciones y Patrocinios (Parte D)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Resolución Tablet y Mobile (Hasta 991px)
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
    
    /* 1. CONFIGURACIÓN DE LA TARJETA (Contenedor Principal)
       Eliminamos el padding para que la imagen pueda tocar los bordes,
       agregamos overflow hidden para que la foto respete las esquinas redondeadas,
       y limitamos el ancho para que luzca como una tarjeta elegante. */
    .contenedor-parte-d {
        padding: 0 !important; 
        overflow: hidden !important; 

    }

    /* 2. INVERSIÓN DEL DOM (Flex column-reverse)
       Obligamos a la imagen a subir y al texto a bajar, sin tocar el HTML. */
    .contenedor-parte-d .row {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 3. COLUMNA DE IMAGEN (Último hijo en HTML, pero se muestra arriba) */
    .contenedor-parte-d .col-lg-6:last-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px;
        top: -10px;
        position: relative;
    }

    /* Ajustes para la foto: Anula redondeos individuales para heredar los del contenedor */
    .contenedor-parte-d .col-lg-6:last-child img {
        width: 100% !important;
        height: auto !important;
    }

    /* 4. COLUMNA DE TEXTO (Primer hijo en HTML, pero se muestra abajo) */
    .contenedor-parte-d .col-lg-6:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem !important; /* Devolvemos el aire (padding) exclusivamente al texto */
        text-align: left !important;
    }

    /* 5. TIPOGRAFÍA Y ESPACIADOS */
    .contenedor-parte-d h2 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
        margin-top: -59px;
    }

    .contenedor-parte-d p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* 6. BOTÓN FULL-WIDTH (Área táctil expandida) */
    .contenedor-parte-d .btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}
/* --------------------------------------------------------------------------
   Tarjeta Premios ANDA - imagen arriba y texto abajo solo en tablet
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .contenedor-premio {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
}

@media (max-width: 767px) {
    .contenedor-premio {
        align-items: flex-start !important;
        text-align: left !important;
    }
}
/* ==========================================================================
   Módulo: Parte E (Voluntariado Corporativo) - Ajustes Forzados
   ========================================================================== */

@media (max-width: 991px) {
    
    /* 1. Forzamos el texto de toda la tarjeta a la izquierda */
    .forzar-alineacion-izq {
        margin-left: 0% !important;
    }

    /* 2. Forzamos el texto de toda la tarjeta a la izquierda */
    .forzar-texto-izq {
        text-align: left !important;
    }

}


@media (max-width: 767.98px) {

    .page-herramientas h1 {

        font-size: 40px !important;
    }

    #hero-herramienta {
        padding-top: 250px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .btn-bbva {
        width: 100% !important;
    }

}


/* --------------------------------------------------------------------------
   Resolución Mobile
-------------------------------------------------------------------------- */

@media (max-width: 767.98px) {



}