:root {
    --rojo-fuego: #E2231A;
    --naranja: #F57C00;
    --oro: #FFC107;
    --azul-profundo: #0D47A1;
    --azul-medio: #1565C0;
    --azul-claro: #42A5F5;
    --gris-claro: #F5F5F5;
    --gris-medio: #9E9E9E;
    --gris-oscuro: #333333;
    --azul-pro: #0D47A1;
    --gris-txt: #F5F5F5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
}

/* HEADER Y NAVEGACIÓN */
header {
    position: fixed;
    width: 100%;
    padding: 15px 5%;
    background: rgba(13, 71, 161, 0.9);
    z-index: 1000;
    transition: 0.4s;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 50px;
    margin-right: 12px;
}

.logo-text {
    color: white;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.main-t {
    font-weight: 700;
    font-size: 0.9rem;
}

.sub-t {
    color: var(--oro);
    font-size: 0.75rem;
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    margin-left: 25px;
    font-size: 0.85rem;
    font-weight: 400;
}

/* SECCIÓN HERO (VIDEO FULLSCREEN) */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Esto hace que el video llene toda la pantalla */
    z-index: -2;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Oscurece el video para que el texto resalte */
    z-index: -1;
}

.hero-content {
    max-width: 800px;
    padding: 20px;
}

.badge {
    background: #F57C00;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 0.7rem;
    letter-spacing: 2px;
}

.hero h1 {
    color: var(--azul-profundo);
    font-size: 3.5rem;
    margin: 20px 0;
    font-weight: 700;
}

.txt-gold {
    color: var(--oro);
}

.loc {
    color: var(--azul-medio);
    font-size: 1.5rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.verse {
    color: var(--azul-profundo);
    font-style: italic;
    margin-bottom: 30px;
    font-weight: 300;
}

.btn-main {
    padding: 12px 35px;
    border: 2px solid var(--azul-profundo);
    color: #0D47A1;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-main:hover {
    background: var(--oro);
    color: var(--azul-pro);
}

/* SECCIÓN AGENDA */
.agenda-section {
    background-color: var(--gris-claro);
    /* Fondo neutro para limpieza */
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.title-main {
    font-size: 3rem;
    color: var(--azul-profundo);
    text-transform: uppercase;
    font-weight: 800;
}

.txt-red {
    color: var(--rojo-fuego);
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.divider .line {
    width: 50px;
    height: 2px;
    background: var(--oro);
}

.divider i {
    color: var(--azul-medio);
}

/* GRID 3x2 */
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Fuerza 3 columnas */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* TARJETAS MEJORADAS */
.agenda-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: 0.4s;
    border-bottom: 4px solid transparent;
}

.agenda-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(13, 71, 161, 0.15);
}

/* Acentos de color en la parte superior */
.card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    border-radius: 15px 15px 0 0;
}

.accent-blue {
    background: var(--azul-profundo);
}

.accent-gold {
    background: var(--oro);
}

.accent-red {
    background: var(--rojo-fuego);
}

.accent-blue-light {
    background: var(--azul-claro);
}

.accent-orange {
    background: var(--naranja);
}

.accent-gold-full {
    background: linear-gradient(to right, var(--oro), var(--naranja));
}

.card-icon {
    font-size: 2rem;
    color: var(--azul-profundo);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.agenda-card h3 {
    color: var(--gris-oscuro);
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.agenda-card p {
    color: var(--gris-medio);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.info-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--azul-medio);
    font-weight: 600;
    margin-bottom: 5px;
}

.info-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--azul-medio);
    font-weight: 600;
    margin-bottom: 5px;
}


/* Resalte especial para el Culto Central */
.highlight-card {
    background: white;
}

.highlight-card h3 {
    color: var(--gris-oscuro);
}

.highlight-card p {
    color: var(--gris-medio);
}

.highlight-card .info-list li {
    color: var(--azul-medio);
}

.highlight-card .card-icon {
    color: var(--azul-profundo);
}

/* Responsive: 2 columnas en tablets, 1 en móviles */
@media (max-width: 992px) {
    .agenda-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .agenda-grid {
        grid-template-columns: 1fr;
    }
}

/* SECCIÓN PRÓXIMOS EVENTOS */
.events-section {
    background-color: var(--gris-claro);
    /* Fondo neutro para limpieza */
    padding: 100px 0;
    text-align: center;
}

.txt-gold {
    color: #FFC107;
}

.underline-gold {
    width: 80px;
    height: 3px;
    background-color: #FFC107;
    margin: 10px auto 40px;
}

.events-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0 5%;
}

.event-item {
    position: relative;
    cursor: pointer;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.event-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-item:hover {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 71, 161, 0.7);
    /* Azul profundo con transparencia */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
    color: #FFC107;
    font-size: 2rem;
}

.event-item:hover .overlay {
    opacity: 1;
}

/* ESTILOS DE LA VENTANA FLOTANTE (MODAL) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

.modal-content {
    max-width: 80%;
    max-height: 80%;
    border: 3px solid #FFC107;
    border-radius: 10px;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* ========================================================== */
/* SECCIÓN FUNDAMENTOS DE FE - ESTILO INSTITUCIONAL & RESPONSIVE */
/* ========================================================== */

.faith-section {
    /* Recuperamos la imagen de fondo */
    background: url('../img/fondo-manos.jpeg') no-repeat center/cover;
    position: relative;
    /* Aseguramos que todo el contenido sobre la imagen sea blanco por defecto */
    color: #ffffff;
}

/* Recuperamos el degradado azul con opacidad para que se vea la imagen detrás */
.overlay-blue {
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.95) 0%, rgba(21, 101, 192, 0.85) 100%);
    padding-top: 60px;
    padding-bottom: 30px;
    /* Reducido de 80px a 30px */
}

/* Cabecera centradita */
.faith-header {
    text-align: center;
    margin-bottom: 60px;
}

/* Título principal con acento en BLANCO para resaltar sobre el azul */
.faith-header h2 {
    font-size: 2.8rem;
    color: #ffffff;
    /* Letras blancas para contraste total */
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
}

/* El subtítulo en Dorado Institucional */
.agenda-tag {
    color: #FFC107;
    /* Amarillo Dorado ADDP */
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1rem;
    margin-top: 10px;
    display: block;
}

/* La rayita dorada debajo del título */
.underline-gold {
    width: 80px;
    height: 4px;
    background-color: #FFC107;
    margin: 15px auto;
}

/* ========================================================== */
/* GRID Y ALINEACIÓN DE FUNDAMENTOS */
/* ========================================================== */

.faith-grid {
    display: grid;
    /* 4 Columnas perfectas en PC */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    /* Espacio elegante entre columnas */
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
}

.faith-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espacio entre cada item */
}

.faith-column .item {
    display: flex;
    align-items: flex-start;
    /* Alinea el número con la primera línea */
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
    color: #ffffff;
    /* Texto de los fundamentos en blanco */
}

/* El número en Dorado Institucional y fondo blanco */
.faith-column .item span {
    background: #ffffff;
    /* Fondo blanco para el círculo */
    color: #0D47A1;
    /* Texto azul profundo dentro del círculo */
    font-weight: 800;
    font-size: 0.8rem;

    /* Círculo perfecto y fijo */
    min-width: 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Evita que el círculo se aplaste */
    margin-top: 1px;
    /* Ajuste visual fino */
}

/* ========================================================== */
/* BOTÓN DE DESCARGA PDF */
/* ========================================================== */
/* Ajuste del área del botón para que no empuje tanto hacia abajo */
.btn-area {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
    /* Eliminamos margen inferior */
}

.btn-download {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #FFC107;
    /* Borde Dorado */
    color: #FFC107;
    /* Texto Dorado */
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s ease;
    background: transparent;
}

/* Efecto hover elegante */
.btn-download:hover {
    background: #FFC107;
    /* Fondo Dorado al pasar el mouse */
    color: #0D47A1;
    /* Texto Azul Profundo al pasar el mouse */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

/* ========================================================== */
/* RESPONSIVE - AJUSTES PARA TABLETS Y MÓVILES */
/* ========================================================== */

/* Tablets (1024px o menos) - De 4 columnas a 2 */
@media (max-width: 1024px) {
    .faith-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* Celulares (600px o menos) - De 2 columnas a 1 */
@media (max-width: 600px) {
    .faith-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .faith-header h2 {
        font-size: 2.2rem;
    }
}

/* ========================================================== */
/* FOOTER REDISEÑADO (PROFESIONAL Y RESPONSIVE)               */
/* ========================================================== */
.main-footer {
    background-color: #0D47A1;
    color: #E0E0E0;
    padding: 40px 0 20px;
    font-size: 0.9rem;
    margin-top: 0;
}

/* Contenedor principal con tope de ancho para que no se deforme en monitores grandes */
.main-footer .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    /* Permite que los elementos bajen en móviles */
    justify-content: center;
    /* Centra el contenido */
    gap: 40px;
    /* Espacio uniforme entre columnas */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
    margin-bottom: 20px;
}

.footer-col {
    flex: 1;
    min-width: 250px;
    /* Evita que las columnas sean demasiado flacas */
    max-width: 350px;
    /* Evita que se estiren demasiado en PC */
    text-align: center;
}

.footer-col h4 {
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.footer-col p {
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Enlaces y Botones */
.phone-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: 0.3s;
}

.phone-link:hover {
    color: #FFC107;
}

.social-links-inline {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.social-links-inline a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.social-links-inline a:hover {
    color: #FFC107;
    transform: translateY(-2px);
}

.btn-yape {
    background-color: #FFC107;
    color: #0D47A1;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-yape:hover {
    background-color: #ffffff;
    transform: scale(1.05);
}

/* Parte inferior (Créditos) */
.footer-bottom {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.brand-badge-small {
    background-color: #FFC107;
    color: #0D47A1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    margin: 0 auto 15px;
}

/* Media Query para asegurar que en tablets/móviles se vea perfecto */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        /* Apila las columnas */
        align-items: center;
        gap: 30px;
    }

    .footer-col {
        max-width: 100%;
    }
}

/* ========================================================== */
/* BOTÓN WHATSAPP FLOTANTE CON NOTIFICACIÓN                   */
/* ========================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    /* Verde oficial de WhatsApp */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1) rotate(5deg);
}

.notify-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    background-color: #E2231A;
    /* Rojo Fuego Institucional */
    border-radius: 50%;
    border: 2px solid white;
}

/* ========================================================== */
/* BOTÓN WHATSAPP (LIMPIO)                                   */
/* ========================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    text-decoration: none;
    transition: 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* ... Fin de tus estilos anteriores ... */

/* ========================================================== */
/* ESTILOS PARA ANIMACIONES AL HACER SCROLL */
/* ========================================================== */

/* Clase base para los elementos que se ocultarán inicialmente */
/* Estado inicial de la animación */
.animate-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    visibility: hidden;
}

/* Estado cuando se activa (clase añadida por JS) */
.animate-item.appear {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Retrasos para efecto cascada (se activan uno tras otro) */
.faith-grid .animate-item:nth-child(1) {
    transition-delay: 0.1s;
}

.faith-grid .animate-item:nth-child(2) {
    transition-delay: 0.3s;
}

.faith-grid .animate-item:nth-child(3) {
    transition-delay: 0.5s;
}

.faith-grid .animate-item:nth-child(4) {
    transition-delay: 0.7s;
}

/* Estilo del Header fuera del overlay */
.faith-section .section-header {
    background-color: var(--gris-claro);
    /* O el color neutro que prefieras */
    padding: 60px 0 20px;
    text-align: center;
}

/* SECCIÓN UBICACIÓN */
.location-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* Info a la izquierda, mapa a la derecha */
    gap: 40px;
    align-items: center;
}

.location-info {
    padding: 40px;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.location-info h2 span {
    color: var(--azul-profundo);
}

.info-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    color: #555;
}

.info-item i {
    color: var(--oro);
    font-size: 1.2rem;
    margin-top: 5px;
}

.btn-maps {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 25px;
    background-color: var(--azul-profundo);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    transition: 0.3s;
}

.btn-maps:hover {
    background-color: var(--oro);
    color: var(--azul-profundo);
}

.location-map iframe {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Responsive para Ubicación */
@media (max-width: 992px) {
    .location-grid {
        grid-template-columns: 1fr;
    }

    .location-map iframe {
        height: 350px;
    }
}

/* --- ESTILOS PÁGINA QUIÉNES SOMOS --- */

.page-header {
    background: url('../img/fondo-manos.jpg') no-repeat center/cover;
    /* Usamos la misma imagen para consistencia */
    text-align: center;
    color: white;
    font-size: 2rem;
}

.page-header .overlay-blue {
    background: rgba(13, 71, 161, 0.9);
    /* Azul Institucional con transparencia */
    padding: 100px 0 60px;
}

.page-header h1 span {
    color: #FFC107;
    /* Dorado */
    font-size: 4rem;
}

.breadcrumb {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 10px;
}

.about-description {
    padding: 80px 0;
    background: #fff;
    text-align: center;
    line-height: 1.8;
}

.about-text {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #444;
    text-align: justify;
}

.mission-vision {
    padding-bottom: 80px;
    background: #f9f9f9;
}

.mission-vision p {
    text-align: justify;
}

/* Reutilizamos el estilo de grid que ya tenemos pero ajustado */
/* Ajuste para que las tarjetas no peguen a los extremos */
.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    /* Espacio generoso entre tarjetas */

    /* CONTROL DE EXTREMOS */
    max-width: 1500px;
    /* Evita que se estiren demasiado en pantallas grandes */
    margin: -40px auto 0;
    /* Centra horizontalmente y mantiene el efecto de subida */
    padding: 0 40px;
    /* Margen de seguridad interno para que no peguen a los bordes */
}

/* Ajuste adicional para la descripción superior */
.about-text {
    max-width: 850px;
    /* Estrecha un poco el texto para que coincida con el grid */
    margin: 0 auto;
    padding: 0 20px;
}

.about-card {
    background: white;
    padding: 50px 35px;
    /* Más espacio interno para que el texto respire */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Sombra más suave y moderna */
    text-align: center;
    border-top: 6px solid #0D47A1;
    /* Borde más grueso arriba */
    transition: transform 0.3s ease;
}

.about-card.accent-gold {
    border-top-color: #FFC107;
}

/* Alineación de textos internos */
.about-card h3 {
    font-size: 1.5rem;
    margin: 20px 0;
    color: #333;
}

.about-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
        /* Una sola tarjeta por fila en móviles */
        padding: 0 20px;
        /* Menos espacio en los lados para pantallas pequeñas */
        margin-top: 20px;
        /* Eliminamos el efecto de subida en móviles */
    }
}

/* ========================================================== */
/* SECCIÓN NUESTRA HISTORIA                                  */
/* ========================================================== */

.history-section {
    background-color: #F5F5F5;
    /* Fondo Neutro de limpieza */
    padding: 100px 0;
    /* Espaciado interno amplio y elegante */
}

/* Flexbox para alineación limpia */
.history-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    /* Espacio elegante entre texto e imagen */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Columna Texto */
.history-text {
    flex: 1.2;
    /* Un poco más de espacio para el texto */
    color: var(--gris-oscuro);
    line-height: 1.8;
    font-size: 1rem;
    text-align: justify;
    /* Justificado profesional */
}

.history-text .agenda-tag {
    color: var(--oro);
    /* Dorado para el tag */
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

.history-text p {
    margin-bottom: 20px;
}

.history-text strong {
    color: var(--azul-profundo);
    /* Resalte institucional */
    font-weight: 700;
}

/* Columna Imagen */
.history-image {
    flex: 1;
    /* Espacio para la imagen */
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.history-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    /* Bordes redondeados profesionales */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Sombra suave para limpieza */
    transition: 0.4s ease;
}

.history-image img:hover {
    transform: scale(1.05);
    /* Efecto de escala al hover */
    box-shadow: 0 15px 40px rgba(13, 71, 161, 0.15);
}

/* ========================================================== */
/* RESPONSIVE                                                */
/* ========================================================== */
@media (max-width: 992px) {
    .history-flex {
        flex-direction: column;
        /* Apila texto e imagen en móviles y tablets */
        gap: 40px;
        text-align: center;
    }

    .history-text {
        order: 1;
        /* Texto primero en responsive */
        font-size: 0.95rem;
    }

    .history-image {
        order: 2;
        /* Imagen después en responsive */
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .history-section {
        padding: 80px 0;
    }

    .history-flex {
        padding: 0 15px;
    }
}

/* ========================================================== */
/* SECCIÓN VALORES INSTITUCIONALES                           */
/* ========================================================== */

.values-section {
    background-color: #F5F5F5;
    /* Fondo Neutro de limpieza */
    padding: 100px 0;
    /* Espaciado interno amplio */
}

/* GRID DE VALORES */
.values-grid {
    display: grid;
    /* 5 Columnas iguales en PC */
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    /* Espacio elegante entre tarjetas */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* TARJETAS DE VALORES (Limpias) */
.value-card {
    background: white;
    padding: 40px 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    /* Sombra suave para limpieza */
    transition: 0.4s ease;
    text-align: center;
    border-bottom: 3px solid transparent;
    /* Borde inferior para hover */
}

.value-card:hover {
    transform: translateY(-8px);
    /* Efecto de levitación al hover */
    box-shadow: 0 12px 35px rgba(13, 71, 161, 0.1);
    border-bottom-color: var(--oro);
    /* Borde dorado al hover */
}

/* Iconos de la tarjeta (con los colores de tu referencia) */
.value-card .card-icon {
    font-size: 2.2rem;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Colores de Icono específicos de la referencia */
.icon-red i {
    color: #E2231A;
}

/* Rojo Fuego ADDP */
.icon-blue i {
    color: #1565C0;
}

/* Azul Medio ADDP */
.icon-gold i {
    color: #FFC107;
}

/* Amarillo Dorado ADDP */
.icon-green i {
    color: #4CAF50;
}

/* Verde de tu referencia */
.icon-purple i {
    color: #9C27B0;
}

/* Púrpura de tu referencia */

/* Título de la tarjeta (Dorado ADDP) */
.value-card h3 {
    color: var(--oro);
    /* Usamos el dorado institucional */
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Texto de la referencia bíblica (Gris ADDP) */
.value-card .bible-verse {
    color: var(--gris-medio);
    /* Gris neutro para texto secundario */
    font-size: 0.85rem;
    line-height: 1.5;
    font-style: italic;
    /* Estilo itálico para las referencias */
}

/* ========================================================== */
/* RESPONSIVE                                                */
/* ========================================================== */

/* Tablets (1024px o menos) - De 5 columnas a 3 */
@media (max-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* Tablets pequeñas / Móviles horizontales (768px o menos) - De 3 columnas a 2 */
@media (max-width: 768px) {
    .values-section {
        padding: 80px 0;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 15px;
    }
}

/* Celulares (480px o menos) - De 2 columnas a 1 */
@media (max-width: 480px) {
    .values-grid {
        grid-template-columns: 1fr;
        /* Una columna por fila */
    }

    .value-card {
        padding: 30px 20px;
    }
}

/* --- SECCIÓN GALERÍA (SECUENCIA VISUAL LIMPIA) --- */
.moments-section {
    background-color: #ffffff;
    /* Fondo blanco para limpieza total */
    padding: 90px 0;
}

.gallery-wrapper {
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    /* Para posicionar las flechas */
}

/* Contenedor del slider principal */
.main-slider-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Imagen Principal */
/* Imagen Principal con sombra y bordes */
.main-display {
    width: 100%;
    height: 550px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    /* Sombra suave institucional */
    border: 1px solid #eee;
    z-index: 1;
    /* Por debajo de las flechas */
}

.main-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Estilos de las FLECHAS DE NAVEGACIÓN */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(13, 71, 161, 0.2);
    /* Azul traslúcido suave */
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10;
    /* Por encima de la imagen */
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* Efecto hover profesional */
.slider-btn:hover {
    background: #FFC107;
    /* Dorado institucional al pasar mouse */
    color: #0D47A1;
    /* Texto azul profundo al pasar mouse */
    transform: translateY(-50%) scale(1.1);
}

.main-display:hover img {
    transform: scale(1.03);
}

/* Capa de texto al pasar el mouse */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 71, 161, 0.2);
    /* Azul traslúcido suave */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    opacity: 0;
    transition: 0.3s;
}

.main-display:hover .hover-overlay {
    opacity: 1;
}

/* Carrusel de Miniaturas */
.thumbnail-carousel {
    margin-top: 25px;
    padding: 10px;
}

.thumb-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.thumb {
    width: 110px;
    height: 75px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: 0.3s;
    opacity: 0.6;
}

.thumb.active,
.thumb:hover {
    border-color: var(--oro);
    /* Usamos el amarillo institucional */
    opacity: 1;
    transform: translateY(-5px);
}

/* --- ESTILOS DEL LIGHTBOX --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

#lightbox-img {
    max-width: 90%;
    max-height: 85%;
    border-radius: 10px;
    border: 3px solid white;
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    color: white;
    font-size: 50px;
    cursor: pointer;
}

/* ========================================================== */
/* ESTILO PARA EL LOGO INSTITUCIONAL EN EL FOOTER           */
/* ========================================================== */

.footer-logo-institucional {
    max-width: 130px;
    /* Ajusta este valor para el tamaño deseado en PC */
    height: auto;
    display: block;
    margin: 0 auto 15px;
    /* Centrado horizontal y margen inferior */

    /* Pequeño toque profesional: filtro para que resalte más sobre el azul si es necesario */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Ajuste Responsivo para móviles */
@media (max-width: 768px) {
    .footer-logo-institucional {
        max-width: 100px;
        /* Un poco más pequeño en celulares */
        margin-bottom: 10px;
    }
}

/*---------------------------------------------------*/
/* --- PÁGINA DE EVENTOS --- */
/*---------------------------------------------------*/

/* Banner superior */
.eventos-page .page-header {
    background-image: url('../img/banner-eventos.jpg');
    background-size: cover;
    background-position: center;
}

/* --- SECCIÓN CALENDARIO --- */
.calendar-section {
    padding: 40px 0;
    background-color: #f4f7f6;
}

/* Tarjeta Principal (Ajustada y Centrada) */
.calendar-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    max-width: 950px;
    /* Tamaño reducido para mejor visualización */
    margin: 20px auto;
}

/* Barra de Filtros Institucional */
.calendar-filter-bar {
    background: #0D47A1;
    padding: 20px 25px;
    border-bottom: 4px solid #FFD700;
}

.calendar-filter-bar span {
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
    display: block;
    font-size: 0.95rem;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.filter-btn.active {
    background: #FFD700;
    color: #0D47A1;
    border-color: #FFD700;
    font-weight: bold;
}

/* --- PERSONALIZACIÓN FULLCALENDAR --- */
.calendar-body {
    padding: 25px;
    background-color: #ffffff;
}

.fc {
    color: #333;
    font-family: 'Poppins', sans-serif;
}

/* Cursor de manito en días y eventos */
.fc-daygrid-day,
.fc-daygrid-event,
.fc-button {
    cursor: pointer !important;
}

.fc .fc-toolbar-title {
    color: #0D47A1;
    font-weight: 700;
    font-size: 1.4rem !important;
}

.fc .fc-button-primary {
    background-color: #FFD700 !important;
    border-color: #FFD700 !important;
    color: #0D47A1 !important;
    font-weight: bold !important;
}

.fc .fc-view-harness {
    background-color: #fff;
    min-height: 500px !important;
    /* Altura compacta para no perder la cabecera */
}

/* --- ESTILOS DEL MODAL (VENTANA FLOTANTE) --- */
/* --- ESTILOS DEL MODAL (VENTANA FLOTANTE CENTRADA) --- */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);

    /* CENTRADO MAESTRO */
    display: none;
    /* Se cambia a 'flex' por JS */
    align-items: center;
    /* Centra verticalmente */
    justify-content: center;
    /* Centra horizontalmente */
}

.modal-content {
    background-color: #fff;
    width: 95%;
    max-width: 800px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    outline: none;
    /* Eliminamos el margin auto para que flex haga su trabajo */
}

/* Ajuste para la X de cierre dentro del modal */
.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background-color: white;
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.close-modal:hover {
    background-color: #FFD700;
    color: #0D47A1;
    transform: scale(1.1);
}

/* Estructura Interna del Modal */
.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .modal-grid {
        grid-template-columns: 1fr;
    }
}

.modal-img-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 300px;
}

.modal-info-column {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Animación de entrada */
.animate-up {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- SECCIÓN TESTIMONIOS (LIMPIO Y CENTRADO) --- */
.testimonials-section {
    padding: 80px 0;
    background-color: #f8f9fa;
    /* Gris muy suave de fondo */
    display: flex;
    justify-content: center;
}

/* Contenedor principal que limita el ancho para que no llegue a los extremos */
.testimonials-container {
    width: 90%;
    max-width: 1100px;
    /* Ancho ideal para estética profesional */
    margin: 0 auto;
}

.testimonials-carousel {
    display: grid;
    grid-template-columns: 120px 1fr;
    /* Espacio optimizado para los avatares */
    gap: 40px;
    margin-top: 50px;
    align-items: center;
}

/* --- COLUMNA DE SELECTORES (AVATARS) --- */
.testimonials-selectors {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.testimonial-select {
    position: relative;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0.5;
    /* Inactivos más sutiles */
}

.testimonial-select img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* La banderita sutil en la esquina del avatar */
.testimonial-select .flag {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    z-index: 2;
}

.testimonial-select .flag img {
    object-fit: cover;
}

/* Efecto cuando el avatar está seleccionado */
.testimonial-select.active,
.testimonial-select:hover {
    opacity: 1;
    border-color: var(--oro);
    /* Asegúrate de tener definida esta variable */
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(13, 71, 161, 0.2);
}

/* --- TARJETA PRINCIPAL DEL TESTIMONIO --- */
.testimonial-main-card {
    background-color: #fff;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    position: relative;
    border-left: 8px solid var(--azul-profundo);
    /* Borde más acentuado */
    min-height: 320px;
}

/* Animación para el cambio de contenido */
#active-testimonial-content {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .testimonials-carousel {
        grid-template-columns: 1fr;
        /* En móviles, los avatars van arriba de la tarjeta */
        gap: 30px;
    }

    .testimonials-selectors {
        flex-direction: row;
        /* Avatars en fila horizontal para móviles */
        justify-content: center;
    }
}

/* --- ESTILOS DEL MODAL YAPE --- */
.yape-modal {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    z-index: 10000;
    /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Fondo oscuro */
    justify-content: center;
    align-items: center;
}

.yape-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.close-yape {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}

.yape-qr-container h3 {
    color: #1d1d1b;
    margin: 15px 0 5px;
    font-size: 1.2rem;
}

.yape-qr-container p {
    color: #666;
    font-size: 0.9rem;
}

/* Imagen del QR centrada y ajustada */
.yape-qr-img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    /* Centrado horizontal */
}

/* --- ESTILO BASE DEL BOTÓN YAPE --- */
.btn-yape {
    background-color: #fff;
    /* Fondo blanco */
    color: #742284;
    /* Texto morado oscuro institucional */
    border: 2px solid #742284;
    /* Borde morado */
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Animación suave */
}

/* --- SOLUCIÓN: ESTILO AL PASAR EL MOUSE (:hover) --- */
.btn-yape:hover {
    background-color: #742284;
    /* El fondo se vuelve morado */
    color: #fff;
    /* ¡IMPORTANTE! El texto cambia a blanco para contrastar */
}

/* --- SECCIÓN ESCRÍBENOS: ESTILO PROFESIONAL --- */
.escribenos-section {
    padding: 100px 0;
    background-color: #f4f7f6; /* Gris tenue para resaltar la tarjeta */
    display: flex;
    justify-content: center;
    align-items: center;
}

.escribenos-container {
    width: 90%;
    max-width: 1150px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease;
}

.escribenos-container:hover {
    transform: translateY(-10px);
}

/* COLUMNA FORMULARIO (IZQUIERDA) */
.form-column {
    padding: 60px 80px;
}

.title-escribenos {
    font-size: 3rem;
    color: #1a1a1a;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.subtitle-escribenos {
    color: #666;
    font-size: 1rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

.input-group {
    margin-bottom: 25px;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 15px 0;
    border: none;
    border-bottom: 2px solid #eee;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
    background: transparent;
}

.input-group input:focus,
.input-group textarea:focus {
    border-bottom: 2px solid #0D47A1;
}

.btn-enviar {
    width: 100%;
    padding: 18px;
    background-color: #000;
    color: #fff;
    border: none;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.btn-enviar:hover {
    background-color: #0D47A1;
    box-shadow: 0 10px 20px rgba(13, 71, 161, 0.3);
}

/* COLUMNA INFO (DERECHA - AZUL ADDP) */
.info-column {
    background-color: #0D47A1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: #ffffff;
}

.info-title {
    font-size: 2.8rem;
    margin-bottom: 40px;
    font-weight: 800;
    color: #ffffff;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}

.info-item i {
    color: #FFD700; /* Oro */
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.info-item span {
    color: #ffffff !important;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Redes Sociales */
.social-links-info {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.social-links-info a {
    color: #ffffff;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-links-info a:hover {
    color: #FFD700;
    transform: scale(1.2);
}

/* --- RESPONSIVE CORREGIDO --- */
@media (max-width: 900px) {
    .escribenos-container {
        grid-template-columns: 1fr; /* Columna única */
        width: 95%;
    }

    .form-column, .info-column {
        padding: 50px 30px;
        text-align: center; /* Centra textos */
    }

    .title-escribenos {
        font-size: 2.2rem;
    }

    .info-item {
        flex-direction: column; /* Icono arriba del texto */
        gap: 10px;
        justify-content: center;
    }

    .info-item span {
        text-align: center;
    }

    .social-links-info {
        justify-content: center; /* Centra redes sociales */
        position: static; /* Quita el absolute para que fluya en el centro */
        margin-top: 30px;
    }
}

/* --- MODAL YAPE CENTRADO --- */
.yape-modal {
    display: none;
    /* Se cambia a 'flex' vía JS */
    position: fixed;
    z-index: 9999;
    /* Aseguramos que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Fondo oscuro */
    justify-content: center;
    align-items: center;
}

.yape-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.close-yape {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.yape-qr-img {
    width: 100%;
    max-width: 250px;
    height: auto;
    margin-bottom: 15px;
    border-radius: 10px;
}

/* --- ESTILO DEL BOTÓN YAPE EN EL FOOTER --- */
.btn-yape {
    background-color: #ffffff;
    color: #742284;
    /* Color corporativo Yape */
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-yape:hover {
    background-color: #742284;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/*-----------pagina proyectos-----------*/
/* --- SECCIÓN PROYECTOS --- */
.projects-detail-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.projects-detail-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

/* Limitamos el ancho de la tarjeta para que no vaya de extremo a extremo */
.project-card {
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
    max-width: 1500px;
    /* Ancho máximo ideal para lectura */
    margin: 0 auto;
    /* Centrado horizontal */
}

.project-image {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
}

.status-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #FFD700;
    color: #000;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.project-info {
    flex: 1.2;
    padding: 60px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-title {
    color: #0D47A1;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.2;
    text-align: center;
}

.project-title .highlight {
    color: #c02127;
}

.title-separator {
    width: 50px;
    height: 3px;
    background: #FFD700;
    margin-bottom: 25px;
}

.project-text {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.quote-container {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.quote-container i {
    color: #FFD700;
    font-size: 2rem;
}

.quote-text {
    color: #777;
    font-size: 0.9rem;
    font-style: italic;
}

/* Responsive para la tarjeta */
@media (max-width: 768px) {
    .project-info {
        padding: 30px;
    }

    .project-title {
        font-size: 1.5rem;
    }
}

/* Ajuste para tablets y celulares */
@media (max-width: 992px) {
    .project-card {
        flex-direction: column;
        max-width: 600px;
        /* En móvil se ve mejor más angosto */
    }

    .project-image {
        min-width: 100%;
        height: 300px;
    }

    .project-info {
        padding: 40px 30px;
    }
}

/* --- SECCIÓN MISIÓN, VISIÓN Y VALORES --- */
.mision-vision-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* Contenedores de restricción para evitar el estiramiento extremo */
.mision-vision-wrapper,
.valores-content-area {
    max-width: 1500px;
    /* Ancho máximo para lectura óptima */
    margin: 0 auto;
    /* Centrado horizontal */
    padding: 0 25px;
    /* Margen de seguridad lateral */
}

/* Grilla de Misión y Visión (2 columnas) */
.mision-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    margin-bottom: 90px;
}

.mv-card {
    background: #fdfdfd;
    padding: 45px;
    border-radius: 15px;
    border-top: 5px solid #0D47A1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* CENTRA TODO EL CONTENIDO DE LA TARJETA */
    text-align: center;
    /* Centra el título */
    transition: transform 0.3s ease;
}

.mv-card:hover {
    transform: translateY(-5px);
}

.mv-icon-circle {
    width: 70px;
    /* Un poco más grande para destacar */
    height: 70px;
    background: #0D47A1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.title-sub {
    font-size: 1.7rem;
    color: #333;
    margin-bottom: 10px;
    /* Espacio reducido para la línea */
}

.title-sub span {
    color: #c02127;
}

.underline-gold-left {
    width: 45px;
    height: 4px;
    background: #FFD700;
    margin-bottom: 25px;
}

/* Grilla de Valores (Auto-ajustable) */
.valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
    justify-content: center;
    /* Centra las tarjetas si sobra espacio */
}

.valor-item {
    padding: 40px 30px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    text-align: center;
    /* Centra iconos y títulos */
    transition: all 0.3s ease;
}

.valor-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: #FFD700;
}

.valor-icon {
    font-size: 2.8rem;
    color: #0D47A1;
    margin-bottom: 20px;
    display: inline-block;
}

.valor-item h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #0D47A1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .mision-vision-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .mision-vision-section {
        padding: 50px 0;
    }

    .mv-card {
        padding: 30px;
    }

    .valor-item {
        padding: 30px 20px;
    }
}

/* LA LÍNEA DORADA CENTRADA */
.underline-gold-center {
    width: 50px;
    height: 4px;
    background: #FFD700;
    margin: 0 auto 25px auto;
    /* El '0 auto' la centra horizontalmente */
    border-radius: 2px;
}

.mv-card .project-text {
    text-align: justify;
    /* El texto se mantiene justificado para orden */
    width: 100%;
    /* Asegura que ocupe todo el ancho disponible */
}

/* --- SECCIÓN APOYO VOLUNTARIO (FONDO CLARO) --- */
.support-section {
    padding: 100px 0;
    background-color: #f9f9f9;
    /* Gris muy claro para separar del footer */
    text-align: center;
    border-top: 1px solid #eee;
    /* Línea sutil de separación */
}

.support-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.support-section .title-main {
    color: #0D47A1;
}

/* Ajuste de colores para fondo claro */
.bible-verse-dark {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.6;
    margin: 20px 0;
    color: #333;
    /* Texto oscuro */
    font-weight: 400;
}

.verse-ref {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    color: #0D47A1;
    /* Referencia en azul */
    font-size: 1.1rem;
}

.quote-icon-dark {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 10px;
    display: block;
}

.quote-icon {
    font-size: 2rem;
    color: #FFD700;
    opacity: 0.6;
}

.support-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.btn-support {
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-yape-style {
    background: #742284;
    color: #fff;
}

.btn-bank-style {
    background: #FFD700;
    color: #000;
}

.btn-support:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- MODAL BANCARIO --- */
.bank-modal-width {
    max-width: 700px !important;
}

.bank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.bank-card {
    padding: 25px;
    background: #f9f9f9;
    border-radius: 15px;
    text-align: left;
    border: 1px solid #eee;
}

.bank-logo {
    height: 25px;
    margin-bottom: 15px;
    display: block;
}

.bank-card h4 {
    color: #0D47A1;
    margin-bottom: 10px;
    font-size: 1rem;
}

.bank-card p {
    font-size: 0.9rem;
    color: #555;
    margin: 5px 0;
}

.owner {
    font-size: 0.75rem !important;
    color: #888 !important;
    margin-top: 10px !important;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

@media (max-width: 600px) {
    .bank-grid {
        grid-template-columns: 1fr;
    }

    .bible-verse {
        font-size: 1.1rem;
    }
}

/* Botones con sombras para que "floten" sobre el fondo claro */
.btn-support {
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra suave */
}

.btn-yape-style {
    background: #742284;
    color: #fff;
}

.btn-bank-style {
    background: #FFD700;
    color: #000;
}

.btn-support:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* --- CORRECCIÓN POSICIÓN BOTÓN CERRAR (X) --- */

/* 1. Aseguramos que el contenido del modal sea el punto de referencia */
.yape-modal-content {
    position: relative;
    /* CRUCIAL: Esto ancla la X a la esquina de esta caja */
    padding: 50px 40px 40px 40px;
    /* Espacio extra arriba para que la X no choque con el título */
    border-radius: 20px;
    background: #fff;
    margin: auto;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* 2. Estilo específico para la X de cerrar */
.close-yape,
.close-bank {
    position: absolute;
    top: 15px;
    /* Distancia desde arriba */
    right: 20px;
    /* Distancia desde la derecha */
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
    z-index: 100;
    /* Asegura que esté por encima de todo */
}

/* Efecto al pasar el mouse */
.close-yape:hover,
.close-bank:hover {
    color: #c02127;
    /* Cambia a rojo o al color institucional */
    transform: scale(1.1);
}

/* --- ESTILOS PÁGINA UBÍCANOS --- */

.page-banner {
    padding: 120px 0 60px;
    background-color: #f4f7f6;
    text-align: center;
}

.contact-map-section {
    padding: 80px 0;
    background: #fff;
}

/* El wrapper que une el mapa y la info */
.contact-wrapper {
    display: grid;
    grid-template-columns: 350px 1fr;
    /* Info a la izquierda, Mapa a la derecha */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.info-card {
    background: #0D47A1;
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(13, 71, 161, 0.2);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.icon-box {
    background: rgba(255, 255, 255, 0.1);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #FFD700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-item h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: #FFD700;
}

.info-item p {
    font-size: 1rem;
    line-height: 1.4;
    color: #e0e0e0;
}

.map-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}

/* Responsive para celulares */
@media (max-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .info-card {
        order: 2;
        /* Mapa arriba, Info abajo en móvil */
    }
}

.directions-action {
    margin-top: 25px;
    text-align: center;
}

.btn-directions {
    background-color: #d9534f;
    /* Rojo institucional */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-directions:hover {
    background-color: #c9302c;
    color: white;
}

/* --- ESTILOS DEL MENÚ HAMBURGUESA --- */

/* Ocultar el botón en computadoras */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        /* Forzamos que aparezca */
        background: none;
        border: none;
        color: #ffffff !important;
        /* Forzamos color blanco */
        font-size: 2rem;
        cursor: pointer;
        z-index: 1100;
    }

    /* Asegúrate de que esto también esté para que el menú no tape todo */
    .nav-links {
        display: none;
        /* Se oculta por defecto en móvil */
        flex-direction: column;
        background-color: #0D47A1;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        padding: 20px 0;
    }

    .nav-links.active {
        display: flex !important;
        /* Se muestra al hacer clic */
    }
}

.nav-links li {
    text-align: center;
    margin: 10px 0;
}

/* --- ESTILOS AVANCE DE PROYECTO --- */
.project-progress-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.progress-container {
    max-width: 800px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    color: #333;
}

.progress-bar-bg {
    width: 100%;
    height: 25px;
    background-color: #e0e0e0;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0D47A1, #1976D2);
    border-radius: 50px;
    transition: width 1s ease-in-out;
    position: relative;
}

/* Efecto de brillo en la barra */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.2) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 100%);
}

.txt-red {
    color: #d9534f;
}


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

/* 1. Evitar el desplazamiento horizontal en toda la web */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* 2. Ajuste específico para el contenedor principal de Quiénes Somos */
/* Asegúrate de que el contenedor de texto no tenga anchos fijos en px */
.quienes-somos-container, .container { 
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
}

/* 3. Asegurar que el botón de WhatsApp siempre esté visible y encima de todo */
.whatsapp-float {
    bleed: right 20px bottom 20px; /* Si usas coordenadas */
    right: 20px !important;
    bottom: 20px !important;
    z-index: 9999 !important;
}

@media (max-width: 768px) {
    header {
        padding: 0 20px !important; /* Añade un margen interno para que no pegue al borde */
    }
    
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .menu-toggle {
        margin-right: 10px; /* Empuja las rayitas un poco hacia la izquierda */
    }
}

/* Ajuste para la ventana flotante de imágenes en móviles */
@media (max-width: 600px) {
    /* Si usas una librería como Lightbox o un modal propio */
    .modal-content, .lightbox-image, .fancybox-content {
        width: 95% !important; /* Que ocupe casi todo el ancho */
        height: auto !important;
        max-height: 70vh; /* Que no se pase del alto de la pantalla */
        margin: auto;
    }

    /* Ajuste del botón de cerrar (X) para que sea fácil de tocar */
    .close-modal, .lightbox-close {
        top: 10px !important;
        right: 10px !important;
        font-size: 30px;
        color: white;
    }
}

/*--------------FACHA DE LA IGLESIA ---------------*/

/* Variables de color basadas en tus fotos */
:root {
    --azul-principal: #0d47a1;
    --amarillo-acento: #ffc107;
    --gris-fondo: #f4f7f9;
    --texto-oscuro: #2c3e50;
    --blanco: #ffffff;
}

.nuestra-iglesia {
    padding: 80px 0;
    background-color: var(--gris-fondo);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.iglesia-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Proporción ligeramente desigual para balance */
    gap: 50px;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Estilo de la Foto --- */
.iglesia-foto {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    background: #fff;
}

.iglesia-foto img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.iglesia-foto:hover img {
    transform: scale(1.08);
}

.foto-caption {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    color: white;
    padding: 30px 25px;
    position: absolute;
    bottom: 0;
    width: 130%;
    box-sizing: border-box;
}

.caption-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    color: var(--amarillo-acento);
    font-weight: 700;
}

.caption-address {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* --- Estilo del Versículo (Lado Derecho) --- */
.iglesia-versiculo {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.quote-icon {
    font-size: 3rem;
    color: var(--azul-principal);
    margin-bottom: 25px;
    opacity: 0.15;
}

.texto-biblico {
    font-size: 1.6rem;
    font-style: italic;
    color: var(--texto-oscuro);
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 400;
    position: relative;
    text-align: justify;
}

.cita-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cita-biblica {
    font-weight: 800;
    color: var(--azul-principal);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.95rem;
}

.separador-decorativo {
    width: 60px;
    height: 4px;
    background-color: var(--amarillo-acento);
    border-radius: 2px;
}

/* --- Adaptación para Móviles --- */
@media (max-width: 992px) {
    .iglesia-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .nuestra-iglesia {
        padding: 50px 0;
    }

    .texto-biblico {
        font-size: 1.4rem;
    }
}

/*---------para pantallas pequeñas----------*/
@media (max-width: 768px) {
    /* Título principal (Azul) */
    .hero-container h1 {
        font-size: 2rem !important; /* Más pequeño para que quepa en una línea o dos */
        width: 90%;
        margin: 0 auto;
    }

    /* Título secundario (Amarillo - La Ciudad del Gran Rey) */
    .hero-container h2 {
        font-size: 1.8rem !important;
        margin-top: 15px;
        text-align: center;
    }

    /* Ubicación y Versículo (Monsefú... y Mateo 18:20) */
    .hero-container p, .hero-container span {
        font-size: 1rem !important;
        width: 100%;
        text-align: center;
        padding: 0 10px;
    }
}

/*----------------Centrado Universal de Textos----------*/

@media (max-width: 768px) {
    section, div, header, footer {
        text-align: center;
    }

    /* Asegura que las imágenes y botones también se centren */
    .btn-enviar, .btn-descargar, img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

/* Contenedor principal del inicio */
.hero {
    position: relative;
    height: 100vh;
    display: flex; /* Usamos flexbox */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    text-align: center;
    overflow: hidden;
}

/* El cuadro que contiene los textos */
.hero-content {
    position: relative;
    z-index: 2;
    width: 90%; /* Evita que choque con los bordes en pantallas pequeñas */
    max-width: 1000px; /* Límite para pantallas muy grandes */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Alinea los hijos (h1, p, etc) al centro */
}

/*--------------------*/
@media (max-width: 768px) {
    /* Reducimos el tamaño del título principal */
    .hero-content h1 {
        font-size: 1.8rem !important; /* Tamaño manejable para celular */
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /* El texto en amarillo "La ciudad del Gran Rey" */
    .txt-gold {
        font-size: 1.6rem !important;
        display: block; /* Hace que se vea mejor debajo del texto principal */
        margin-top: 5px;
    }

    /* Ubicación (Monsefú — Chiclayo...) */
    .hero-content .loc {
        font-size: 0.9rem !important;
        letter-spacing: 1px;
    }

    /* El versículo (Mateo 18:20) */
    .hero-content .verse {
        font-size: 0.85rem !important;
        padding: 0 15px;
        line-height: 1.4;
    }
    
    /* El badge de BIENVENIDOS */
    .badge {
        font-size: 0.7rem;
        padding: 5px 15px;
        margin-bottom: 20px;
    }
}

@media (max-width: 1366px) and (min-width: 769px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }
    .hero-content .verse {
        max-width: 80%; /* Para que el texto no sea una línea tan larga */
    }
}
/*----ajuste para el titulo fundamentos de la fe----*/

/* Estilo general para los títulos de sección */
.titulo-seccion {
    font-size: 3rem; /* Tamaño para PC */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--azul-pro);
    text-align: center;
    line-height: 1.1;
    margin-bottom: 10px;
}

.titulo-seccion span {
    color: #e74c3c; /* Color rojizo que se ve en tu imagen para "DE FE" */
    display: block; /* Hace que "DE FE" baje a la siguiente línea si es necesario */
}


/* --- RESPONSIVE: Ajuste para Celulares --- */
@media (max-width: 480px) {
    .titulo-seccion {
        font-size: 2.5rem; /* Reducimos el tamaño para que quepa "FUNDAMENTOS" */
        padding: 0 10px;   /* Evita que las letras toquen los bordes de la pantalla */
    }
   
}

/* --- CORRECCIÓN DE TÍTULOS LARGOS EN MÓVIL --- */
@media (max-width: 480px) {
    /* Ajuste para Valores Institucionales y Apoyo Voluntario */
    .valores-section h2, 
    .apoyo-section h2,
    .titulo-largo {
        font-size: 1.8rem !important; /* Tamaño reducido para que quepa la palabra */
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        padding: 0 10px !important;
        box-sizing: border-box;
        overflow-wrap: break-word; /* Evita que la palabra se salga si es extrema */
    }

    /* Aseguramos que el subrayado oro también esté centrado */
    .underline-gold {
        margin: 10px auto !important; /* "auto" es la clave para centrar */
        float: none !important;
    }
}

/* --- CORRECCIÓN VALORES INSTITUCIONALES (MÓVIL) --- */
@media (max-width: 768px) {
    /* Forzamos que el encabezado de la sección ocupe todo el ancho y se centre */
    .section-header {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 15px; /* Evita que las letras choquen con los bordes */
    }

    .title-main {
        font-size: 2rem !important; /* Tamaño reducido para móviles */
        line-height: 1.2;
        margin-bottom: 10px;
        display: block; /* Asegura que el título fluya bien */
    }

    /* Hacemos que la palabra larga baje de línea si es necesario para no romper el centro */
    .title-main .txt-red {
        display: block; 
        font-size: 2.2rem; /* Puede ser un poquito más grande si quieres resaltar */
    }

    /* Centramos la línea dorada bajo el título */
    .underline-gold {
        margin: 0 auto !important;
        width: 80px; /* Tamaño controlado del subrayado */
    }
    
    /* Ajuste extra para el grid de valores en móvil */
    .valores-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .valor-item {
        width: 100%;
        max-width: 350px; /* Para que las tarjetas no sean infinitas */
    }
}

/* --- SECCIÓN NUESTRA IGLESIA (UBÍCANOS) --- */
.nuestra-iglesia {
    padding: 60px 0;
    background-color: #fff;
}

.iglesia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Contenedor de la Foto */
.iglesia-foto-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.iglesia-foto {
    position: relative;
    width: 100%;
    display: block;
}

.iglesia-foto img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Capa de texto sobre la foto (Caption) */
.foto-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(transparent, rgba(13, 71, 161, 0.9)); /* Azul institucional */
    color: #fff;
    box-sizing: border-box; /* Evita desbordamientos */
}

.caption-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--oro); /* Color oro */
    margin-bottom: 5px;
    font-weight: 700;
}

.caption-address {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* --- RESPONSIVE MÓVIL (CORRECCIÓN) --- */
@media (max-width: 768px) {
    .iglesia-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 30px;
    }

    .foto-caption {
        padding: 20px; /* Reducimos padding en móvil */
    }

    .caption-address {
        font-size: 1.1rem; /* Reducimos fuente para que quepa la calle */
        white-space: normal; /* Permite salto de línea si es necesario */
    }
    
    .iglesia-versiculo {
        text-align: center;
        padding: 0 10px;
    }
    
    .texto-biblico {
        font-size: 1.1rem;
    }
}

/* ================================================================
   SECCIÓN VIDEO (HISTORIA / PROYECTOS)
   ================================================================ */

/* 1. CONTENEDOR DE LA MINIATURA (PREVIEW) */
.history-video-container {
    flex: 1;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.video-preview {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.video-preview img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Efectos Hover */
.video-preview:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(13, 71, 161, 0.2);
}

.video-preview:hover img {
    transform: scale(1.05);
}

/* Botón Play Overlay */
.play-button-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(13, 71, 161, 0.4); /* Azul traslúcido */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.play-button-overlay i {
    font-size: 5rem;
    color: #D4AF37; /* Oro */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
    transition: transform 0.3s ease, color 0.3s ease;
}

.video-preview:hover .play-button-overlay {
    background: rgba(13, 71, 161, 0.6);
}

.video-preview:hover .play-button-overlay i {
    transform: scale(1.1);
    color: #fff;
}

/* 2. VENTANA FLOTANTE (MODAL) */
.video-modal {
    display: none; /* Se activa con JS (flex) */
    position: fixed;
    z-index: 99999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInQuick 0.3s ease;
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #000;
    border: 3px solid #D4AF37;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

/* Botón X Flotante */
.close-video-modal {
    position: absolute;
    top: -15px; 
    right: -15px;
    width: 35px;
    height: 35px;
    background-color: #D4AF37;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 100;
    transition: 0.3s;
}

.close-video-modal:hover {
    transform: scale(1.1);
    background-color: #fff;
}

/* 3. CONTENEDOR DE VIDEO RESPONSIVE */
.video-responsive-container {
    width: 100%;
    line-height: 0;
    border-radius: 9px;
    overflow: hidden;
}

.video-responsive-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* 4. ANIMACIONES Y MEDIA QUERIES */
@keyframes fadeInQuick {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
    .history-video-container {
        order: 2; 
        max-width: 100%;
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .video-modal-content {
        width: 97%;
    }
    .close-video-modal {
        top: -10px;
        right: -10px;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
}

/* ================================================================
   ESTILOS ESPECÍFICOS: SECCIÓN VIDEO PROYECTOS
   ================================================================ */

.project-video-section {
    padding: 80px 0; /* Espaciado superior e inferior */
    background-color: #f9f9f9; /* Un fondo gris muy sutil opcional */
}

.project-video-flex {
    display: flex;
    align-items: center; /* Centrado vertical */
    gap: 50px; /* Espacio entre texto y video */
}

.project-video-text {
    flex: 1.2; /* El texto ocupa un poco más de espacio */
}

.project-video-text h3 {
    font-size: 2.2rem;
    color: var(--azul-oscuro); /* Tu color azul institucional */
    margin: 15px 0 25px 0;
    line-height: 1.3;
}

.project-video-container {
    flex: 1; /* El video ocupa una parte */
    max-width: 500px;
}

/* --- AJUSTES RESPONSIVE --- */
@media (max-width: 992px) {
    .project-video-flex {
        flex-direction: column; /* Columna en móviles */
        text-align: center; /* Texto centrado opcional */
        gap: 30px;
    }
    
    .project-video-container {
        max-width: 100%;
        margin-top: 20px;
    }
}