/* Navbar inicial transparente */
        
            .navbar {
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 10;
                transition: background 0.3s;
            }


            .navbar.scrolled {
                background-color: #001C24;
            }

            .navbar-brand img {
                height: 50px;
            }

            .nav-link {
                color: white !important;
                font-weight: 500;
                margin-left: 15px;
                transition: color 0.3s;
            }

            .nav-link:hover {
                color: #f4b400 !important;
            }


            .hero {
                position: relative;
                height: 100vh;
                overflow: hidden;
                color: white;
                text-align: center;
            }

            .hero video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: -1;
                filter: brightness(60%);
            }

            .hero-content {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                z-index: 2;
            }

            .hero h1 {
                font-size: 3rem;
                font-weight: bold;
            }

            .hero p {
                font-size: 1.3rem;
                margin-bottom: 1.5rem;
            }

            .btn-hero {
                background-color: #f4b400;
                color: white;
                border-radius: 30px;
                padding: 12px 28px;
                font-weight: bold;
                text-transform: uppercase;
                transition: background 0.3s;
            }

            .btn-hero:hover {
                background-color: #d39e00;
                color: white;
            }


            section {
                padding: 80px 0;
            }

            .bg-light-gray {
                background-color: #f9f9f9;
            }

            

            body {
                scroll-behavior: smooth;
                font-family: 'Roboto', sans-serif;
                background-color: #f1f1f1;
                color: #042b4b;
            }
            .pacto{
                background-color: #A58FFF;
            }
            .card-modern {
                border-radius: 15px;
                overflow: hidden;
                box-shadow: 0 6px 20px rgba(0,0,0,0.1);
                transition: transform 0.3s, box-shadow 0.3s;
            }
            .card-modern:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 25px rgba(0,0,0,0.2);
            }
            .card-modern img {
                height: 200px;
                object-fit: cover;
            }
            .card-modern .card-body {
                padding: 1.5rem;
            }
            .card-modern .btn-custom {
                background-color: #007bff;
                color: #fff;
                border-radius: 50px;
                padding: 0.5rem 1.5rem;
                transition: background-color 0.3s;
            }
            .card-modern .btn-custom:hover {
                background-color: #0056b3;
            }

            .contact-map {
                position: relative;
                width: 100%;
                height: 500px;
            }
            .contact-map iframe {
                width: 100%;
                height: 100%;
                border: 0;
            }

            .contact-card {
                position: absolute;
                top: 20%;
                right: 5%;
                max-width: 350px;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 15px;
                box-shadow: 0 8px 25px rgba(0,0,0,0.15);
                padding: 1.5rem;
                transition: transform 0.3s, box-shadow 0.3s;
            }
            .contact-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 30px rgba(0,0,0,0.2);
            }
            .contact-card h5 {
                margin-bottom: 1rem;
            }
            .contact-card a {
                text-decoration: none;
                color: #007bff;
            }
            .contact-card a:hover {
                text-decoration: underline;
            }

            @media (max-width: 768px) {
                .contact-card {
                    position: static;
                    max-width: 90%;
                    margin: 1rem auto;
                }
            }

            .pacto-seccion {
                padding: 60px 20px;
                font-family: 'Roboto', Arial, sans-serif; 
            }

            .contenedor-pacto {
                max-width: 1100px;
                margin: 0 auto;
            }

            .pacto-header {
                text-align: center;
                margin-bottom: 50px;
            }

            .pacto-header h1 {
                font-size: 2.5em;
                color: #343A40;
                margin-bottom: 15px;
            }

            .definicion-pacto {
                font-size: 1.1em;
                font-style: italic;
                color: #6C757D;
                max-width: 700px;
                margin: 0 auto;
                padding: 20px;
                border-left: 5px solid #007BFF;
                background-color: #F8F9FA; 
            }


            .pacto-lista {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
                gap: 30px;
            }

            .pacto-punto {
                position: relative;
                padding: 30px;
                border: 1px solid #E9ECEF;
                border-radius: 8px;
                transition: transform 0.3s, box-shadow 0.3s;
            }

            .pacto-punto:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            }


            .numero-punto {
                position: absolute;
                top: -15px;
                left: -15px;
                width: 40px;
                height: 40px;
                background-color: #007BFF; 
                color: white;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
                font-size: 1.2em;
                box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
            }


            .pacto-punto h2 {
                font-size: 1.4em;
                color: #007BFF; 
                margin-top: 0;
                margin-bottom: 15px;
                padding-left: 30px; 
            }


            .pacto-punto ul {
                list-style: none; 
                padding-left: 0;
            }

            .pacto-punto ul li {
                padding-left: 20px;
                position: relative;
                margin-bottom: 10px;
                color: #495057;
            }


            .pacto-punto ul li::before {
                content: '✓'; 
                color: #28A745; 
                font-weight: bold;
                display: inline-block;
                width: 1em;
                margin-left: -1em;
            }

        
            @media (max-width: 768px) {
                .pacto-seccion {
                    padding: 40px 15px;
                }

                .pacto-header h1 {
                    font-size: 2em;
                }
                
                .pacto-lista {
                
                    grid-template-columns: 1fr; 
                }
            }
                
            :root {
                --primary-color: #0d6efd; 
            }


            .horario-card {
                transition: all 0.3s ease-in-out;
                border-left: 5px solid; 
                border-radius: 8px;
            }

            .horario-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
            }


            .day-time-focus {
                font-weight: 700;
                line-height: 1.2;
                padding-bottom: 10px;
                border-bottom: 1px solid #dee2e6; 
            }

            .day-time-focus .day-of-week {
                display: block;
                font-size: 1.1em;
                text-transform: uppercase;
                margin-bottom: 5px;
            }

            .day-time-focus .time-main {
                display: block;
                font-size: 2.2em; 
            }

        
            .card-title {
                margin-top: 12px;
                font-size: 1.3em;
            }

        
            .list-unstyled li {
                font-size: 0.95em;
                color: #bfbfbf;
            }

        
            .text-primary { color: var(--primary-color) !important; }
            .text-success { color: #198754 !important; }
            .text-warning { color: #ffc107 !important; }
            .text-info { color: #0dcaf0 !important; }

        
            #quienes-somos {
                font-family: 'Roboto', sans-serif;
                color: #343a40;
            }

            .text-primary { color: var(--primary-color) !important; }

            .timeline {
                position: relative;
                padding: 20px 0;
            }


            .timeline::before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 50%;
                width: 3px;
                background: #e9ecef; 
                transform: translateX(-50%);
            }

            .timeline-item {
                margin-bottom: 20px;
                position: relative;
            }

            .timeline-item:nth-child(odd) .timeline-content {
                left: 0;
                text-align: right;
                padding-right: 40px;
            }

            .timeline-item:nth-child(even) .timeline-content {
                left: 50%;
                padding-left: 40px;
                text-align: left;
            }

            .timeline-content {
                position: relative;
                width: 50%;
                padding: 15px;
                border-radius: 6px;
            }

            .timeline-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #fff;
                border: 3px solid #fff;
                z-index: 100;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 1.2em;
            }

            @media (max-width: 992px) {
                .timeline::before {
                    left: 20px;
                    transform: translateX(0);
                }
                
                .timeline-item:nth-child(odd) .timeline-content,
                .timeline-item:nth-child(even) .timeline-content {
                    width: 100%;
                    left: 0;
                    padding-left: 50px; 
                    padding-right: 15px;
                    text-align: left;
                }

                .timeline-icon {
                    left: 20px;
                    transform: translate(-50%, -50%);
                }
            }

            .ministerio-list li, .mision-list li {
                padding: 5px 0;
                font-size: 1.05em;
            }

            .ministerio-list .text-success { color: #198754 !important; }
            .mision-list .text-danger { color: #dc3545 !important; }

            .custom-submit-btn {
                transition: background-color 0.3s ease, transform 0.3s ease;
            }

            .custom-submit-btn:hover {
                background-color: var(--primary-color);
                border-color: var(--primary-color);
                transform: scale(1.02); 
            }

            .form-control:focus {
                border-color: var(--primary-color);
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); 
            }

            .modal-header.bg-primary {
                background-color: var(--primary-color) !important;
            }

            .modal-header .btn-close-white {
                filter: invert(1) grayscale(100%) brightness(200%); 
            }
            footer {

                background: #001C24;
                color: #bbb;
                padding: 30px 0 0;
                text-align: center;
            }
            footer a:hover i {
                color: #f4b400 !important;
                transform: scale(1.2);
                transition: all 0.3s;
            }
            footer a:hover {
                color: #fff !important;
                text-decoration: underline;
            }
            .menu-footer
            {

            }
            .footer-link {
                color: #bfbfbf;
                text-decoration: none;
                transition: color 0.3s, transform 0.2s;
                display: inline-block;
            }
            .footer-link:hover {
                color: #fff;
                transform: translateX(3px);
            }

            .footer-icon {
                color: #ccc;
                font-size: 1.9rem;
                transition: all 0.3s ease;
            }
            .footer-icon:hover {
                color: #f4b400;
                transform: scale(1.2);
            }

            footer hr {
                opacity: 0.2;
            }

            footer small {
                font-size: 0.9rem;
            }
            .horarios-list li {
                margin-bottom: 1rem;
                padding: 0.8rem 1rem;
                border-left: 4px solid #f4b400;
                background: rgba(255,255,255,0.05);
                border-radius: 6px;
                transition: all 0.3s ease-in-out;
            }

            .horarios-list li:hover {
                background: rgba(255,255,255,0.1);
                transform: translateX(4px);
            }

            .horarios-list .dia {
                display: block;
                font-weight: 700;
                color: #fff;
                font-size: 1rem;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .horarios-list .detalle {
                display: block;
                color: #bfbfbf;
                font-size: 0.95rem;
                margin-left: 0.5rem;
            }
            .title-hours
            {
                font-weight: 700;
                color: #fff;
                font-size: 0.9rem;
            }
            /* EN QUÉ CREEMOS */
            .credo-contenedor {
                max-width: 850px;
                background: #fff;
                padding: 50px 40px;
                border-radius: 15px;
                box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
            }

            .credo-intro {
                font-size: 1.15rem;
                color: #333;
                text-align: justify;
                margin-bottom: 2rem;
                line-height: 1.7;
            }

            .credo-bloque {
                display: flex;
                align-items: flex-start;
                gap: 15px;
                margin-bottom: 1.8rem;
                text-align: justify;
            }

            .credo-bloque i {
                font-size: 1.8rem;
                color: #007bff;
                flex-shrink: 0;
                margin-top: 3px;
            }

            .credo-bloque p {
                margin: 0;
                color: #444;
                font-size: 1.05rem;
                line-height: 1.7;
            }

            @media (max-width: 768px) {
                .credo-contenedor {
                    padding: 30px 20px;
                }
                .credo-intro, .credo-bloque p {
                    font-size: 1rem;
                }
            }

             /* 🖼️ Galería tipo LightGallery Animated Thumbnails */
            .lightgallery {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
            }

            .lightgallery a {
                display: block;
                overflow: hidden;
                /*border-radius: 6px;*/
                flex: 0 1 auto;
                line-height: 0;
                transition: transform 0.3s ease;
            }

            .lightgallery a img {
                height: 200px; /* 🔹 Mantén mismo alto para todas las imágenes */
                width: auto;   /* 🔹 Deja que el ancho varíe según la proporción */
                object-fit: cover;
                display: block;
                transition: transform 0.4s ease;
                /*border-radius: 6px;*/
            }

            /* Efecto hover elegante */
            .lightgallery a:hover img {
                transform: scale(1.05);
                filter: brightness(1.1);
            }
            .gallery-container h2 {
                text-align: center;
                font-weight: bold;
                color: white;
                margin-bottom: 1rem;
                /* border-left: 4px solid #ffc107; */
                padding-left: 10px;
                font-size: 24px;
            }

            .lg-backdrop {
                background-color: rgba(228, 228, 228, 0.9) !important;
            }
            .lg-thumb-outer {
                background-color: #111 !important;
            }
            .galeria{
                background-color: #001C24;
                color: #ffc107 !important;
            }
            .ver-toda-galeria
            {
                text-align: center;
            }
            .bg-IBG {
                background-color: #001C24 !important;
            }
            .btn-ver-galerias
            {
                background-color: #007BFF !important;
            }
            .overlay {
                background-color: #152630;
                color: #fff;
                align-items: center;
                transition: opacity 0.3s ease;
                font-size: 1.2rem;
                text-align: center;
                border-radius: 8px;

            }
            .overlay:hover {
                background-color: #ffc107;
                color: #fff;
           

            }