/* --- Paleta de Colores "Mi Casita Azul" --- */
:root {
    /* EL COLOR PROTAGONISTA */
    --color-azul-esencial: #0077b6; /* Un azul cielo profundo y acogedor */
    --color-azul-oscuro: #023e8a;   /* Para efectos hover (pasar el mouse) */

    /* Colores de Soporte (del templo) */
    --color-marron-madera: #7f5539;
    --color-crema: #f4f1ee;         /* Un tono arena muy suave para fondos alternos */

    /* Neutros */
    --color-texto: #333333;
    --color-fondo: #ffffff;
    --blanco: #ffffff;
}

/* Estilo Base */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    line-height: 1.6;
    color: var(--color-texto);
    background-color: var(--color-fondo);
}

h1, h2, h3 { color: var(--color-texto); font-weight: 700; }
/* Los títulos principales ahora llevan un toque del azul */
h2 { text-align: center; margin-bottom: 40px; font-size: 2.5rem; color: var(--color-azul-esencial); }

.contenedor {
    max-width: 1100px;
    margin: auto;
    padding: 80px 20px;
}

/* Fondos Alternos */
.bg-crema { background-color: var(--color-crema); }

/* Navegación */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: var(--blanco);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* El logo ahora es AZUL */
.logo { font-weight: 800; font-size: 1.5rem; color: var(--color-azul-esencial); letter-spacing: -1px; }

/* AJUSTE PARA EL LOGO CON ENLACE */
.logo a {
    text-decoration: none;      /* Quita el subrayado */
    color: inherit;             /* Hereda el color original del logo (Azul o Blanco) */
    display: block;             /* Ocupa todo el espacio para facilitar el clic */
    transition: opacity 0.3s;   /* Una pequeña animación suave */
}
.logo a:hover {
    opacity: 0.8;               /* Se aclara un poquito al pasar el mouse */
    cursor: pointer;
}

nav ul { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; }
nav ul li { margin-left: 30px; }
nav ul li a {
    text-decoration: none;
    color: var(--color-texto);
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}
/* Al pasar el mouse, los enlaces se ponen azules */
nav ul li a:hover { color: var(--color-azul-esencial); }

/* Botón en el menú - AHORA AZUL */
.btn-nav {
    background-color: var(--color-azul-esencial);
    color: var(--blanco) !important;
    padding: 10px 25px;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 119, 182, 0.2); /* Sombra azul suave */
}
.btn-nav:hover { background-color: var(--color-azul-oscuro); transform: translateY(-2px); }


/* --- SECCIÓN HERO CON VIDEO --- */
.hero {
    height: 85vh;
    position: relative; /* Fundamental para contener el video */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--blanco);
    overflow: hidden; /* Evita que el video se salga de los bordes */
}

/* Estilos para que el video llene toda la pantalla */
.video-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que el video se adapte sin deformarse, igual que las fotos */
    z-index: 0; /* Nivel 0: Al fondo del todo */
}

/* La capa de tu "Casita Azul" sobre el video */
.capa-oscura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Mantenemos tu identidad visual con un degradado azul semitransparente */
    background: linear-gradient(rgba(0, 119, 182, 0.4), rgba(0, 62, 138, 0.6));
    z-index: 1; /* Nivel 1: Encima del video */
}

/* Aseguramos que el texto esté por encima de todo */
.hero-content {
    position: relative;
    z-index: 2; /* Nivel 2: Al frente de todo */
}

.hero-content h1 { font-size: 3.5rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.hero-content p { font-size: 1.3rem; margin-bottom: 30px; font-weight: 500; }

/* CORRECCIÓN DE COLOR EN PORTADAS (Hero) */
/* Esto fuerza a que todos los títulos y párrafos dentro de la portada sean blancos */
.hero-interno h1,
.hero-interno p,
.hero-content h1, 
.hero-content p {
    color: #ffffff !important; /* El !important asegura que nadie lo cambie */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); /* Sombra para que se lea perfecto sobre cualquier foto */
}

/* Botones Principales - AHORA AZULES */
.btn-principal {
    display: inline-block;
    background-color: var(--color-azul-esencial);
    color: var(--blanco);
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 119, 182, 0.3); /* Sombra azul */
}

.btn-principal:hover { transform: translateY(-3px); background-color: var(--color-azul-oscuro); }

/* Grids y Secciones */
.grid-nosotros, .comunidad-flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    text-align: center;
}

.info-bloque h3, .bloque h3 { color: var(--color-marron-madera); /* Usamos el marrón para subtítulos para dar calidez */ }
.info-bloque, .bloque { padding: 20px; }


/* Ministerios */
.ministerios-lista ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.ministerios-lista li {
    background: var(--blanco);
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    font-weight: 600;
    color: var(--color-azul-esencial); /* Texto azul */
    border: 1px solid transparent;
    transition: 0.3s;
}
.ministerios-lista li:hover { border-color: var(--color-azul-esencial); transform: scale(1.05); }


/* Sacramentos */
.grid-sacramentos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
.sacramento {
    background-color: var(--blanco);
    border: 2px solid var(--color-crema);
    color: var(--color-marron-madera);
    padding: 20px 40px;
    border-radius: 15px;
    font-weight: 700;
    transition: 0.3s;
    cursor: default;
}
/* Al pasar el mouse, se encienden en AZUL */
.sacramento:hover {
    border-color: var(--color-azul-esencial);
    color: var(--blanco);
    background: var(--color-azul-esencial);
    box-shadow: 0 5px 15px rgba(0, 119, 182, 0.2);
}

/* Contacto */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 40px;
}

.contacto-info p { font-size: 1.1rem; margin-bottom: 20px; display: flex; align-items: center; }
.redes-sociales a { color: var(--color-azul-esencial); text-decoration: none; font-weight: 700; margin-right: 15px; font-size: 1.1rem; }
.redes-sociales a:hover { text-decoration: underline; }

.contacto-form form { display: flex; flex-direction: column; gap: 20px; }
.contacto-form input, .contacto-form textarea {
    padding: 15px;
    border: 2px solid var(--color-crema);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: 0.3s;
}
/* Cuando haces clic para escribir, el borde se pone AZUL */
.contacto-form input:focus, .contacto-form textarea:focus { outline: none; border-color: var(--color-azul-esencial); }

/* Footer - Usamos el azul oscuro para cerrar */
footer { text-align: center; padding: 40px; background: var(--color-azul-esencial); color: var(--blanco); }

/* --- ARREGLO DEL MENÚ EN MÓVIL (Estilo App) --- */

@media (max-width: 768px) {
    
    /* 1. Contenedor principal más compacto */
    nav {
        flex-direction: column; /* Logo arriba, menú abajo */
        padding: 10px 0;        /* Quitamos el relleno exagerado de los lados */
        gap: 10px;              /* Espacio pequeño entre logo y menú */
        background: var(--blanco); /* Aseguramos fondo blanco */
    }

    /* 2. Ajuste del Logo */
    .logo { 
        font-size: 1.3rem;      /* Un poco más pequeño para que no grite */
        width: 100%;            /* Ocupa todo el ancho */
        text-align: center;     /* Centrado */
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(0,0,0,0.05); /* Una línea sutil separadora */
    }

    /* 3. ¡LA MAGIA! Menú Horizontal Deslizable */
    nav ul {
        flex-direction: row;        /* Los ponemos en fila, no en columna */
        width: 100%;                /* Ocupa todo el ancho de la pantalla */
        overflow-x: auto;           /* Permite deslizar con el dedo (Scroll horizontal) */
        white-space: nowrap;        /* Prohíbe que los textos salten de línea */
        justify-content: flex-start;/* Empiezan desde la izquierda */
        gap: 10px;                  /* Espacio entre botones */
        padding: 0 15px 10px 15px;  /* Relleno para que no toquen los bordes */
        margin-top: 5px;
        
        /* Ocultar la barra de scroll fea (pero sigue funcionando) */
        scrollbar-width: none;      /* Para Firefox */
        -ms-overflow-style: none;   /* Para IE/Edge */
    }
    
    /* Ocultar barra scroll en Chrome/Safari */
    nav ul::-webkit-scrollbar {
        display: none; 
    }

    /* 4. Estilo de cada botón (tipo "Píldora") */
    nav ul li {
        margin: 0; /* Reseteamos márgenes viejos */
        flex: 0 0 auto; /* Evita que se aplasten */
    }

    nav ul li a {
        display: block;
        padding: 8px 15px;
        background-color: var(--color-crema); /* Fondo suave */
        border-radius: 20px;    /* Bordes redondos */
        font-size: 0.85rem;     /* Texto legible pero compacto */
        color: var(--color-azul-oscuro);
    }

    /* El enlace activo o al tocar se pone azul */
    nav ul li a:hover, nav ul li a:active {
        background-color: var(--color-azul-esencial);
        color: var(--blanco);
    }

    /* El botón de contacto destacado se integra al estilo */
    .btn-nav {
        background-color: var(--color-azul-esencial) !important;
        color: var(--blanco) !important;
        box-shadow: none;
    }
    
    /* AJUSTES EXTRA PARA EL CONTENIDO (Para que no se vea mal el resto) */
    .hero { height: 60vh; } /* Portada más corta en celular */
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; padding: 0 10px; }
    .contenedor { padding: 40px 20px; }
    .contacto-grid, .dos-columnas-contacto { grid-template-columns: 1fr; }
    
    /* Forzamos que los iframes (mapas/videos) no se salgan */
    iframe { max-width: 100%; }
}

/* --- NUEVOS ESTILOS PARA FOTOS DINÁMICAS --- */

/* El contenedor recorta la foto si se sale al hacer zoom */
.foto-contenedor {
    width: 100%;
    height: 250px; /* Altura fija para que todas se vean iguales */
    overflow: hidden; /* La clave: oculta lo que se sale del marco */
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 119, 182, 0.15); /* Sombra azul suave */
}

/* La foto en sí misma */
.foto-viva {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto llene el espacio sin deformarse */
    transition: transform 0.6s ease; /* Define que el movimiento dure 0.6 segundos y sea suave */
}

/* EL EFECTO: Al pasar el mouse sobre el bloque, la foto hace zoom */
.info-bloque-dinamico:hover .foto-viva {
    transform: scale(1.1); /* Aumenta el tamaño un 10% */
}

/* Ajuste para los textos debajo de las fotos */
.info-bloque-dinamico h3 { margin-bottom: 10px; color: var(--color-azul-esencial); }
.info-bloque-dinamico p { font-size: 0.95rem; }

/* --- PORTADAS PARA PÁGINAS INTERNAS --- */
.hero-interno {
    height: 35vh; /* Más bajita que la principal */
    background: linear-gradient(rgba(0, 119, 182, 0.8), rgba(0, 62, 138, 0.9)), url('foto-templo.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--blanco);
    border-bottom: 5px solid var(--color-marron-madera); /* Un toque de la puerta del templo */
}

.hero-interno h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* --- NUEVOS ESTILOS PARA LA PÁGINA "NOSOTROS" --- */

/* La Portada Interna (Más pequeña y elegante) */
.hero-interno {
    height: 40vh;
    background: linear-gradient(rgba(0, 119, 182, 0.7), rgba(0, 62, 138, 0.8)), url('foto-templo.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--blanco);
    border-bottom: 5px solid var(--color-marron-madera);
}

.hero-interno h1 { font-size: 3.5rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.hero-interno p { font-size: 1.2rem; font-weight: 300; }

/* El Diseño Zig-Zag (Texto de un lado, Foto del otro) */
.zig-zag {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 60px 20px;
}

.zz-texto { flex: 1; text-align: left; }
.zz-texto h2 { text-align: left; margin-bottom: 5px; }
.subtitulo-marron { color: var(--color-marron-madera); font-size: 1.2rem; margin-bottom: 20px; font-weight: 600; }
.zz-texto p { font-size: 1.05rem; margin-bottom: 15px; }

.zz-imagen { flex: 1; }

/* Invertir el orden en el bloque de Historia */
.zig-zag.invertido { flex-direction: row-reverse; }

/* Grid de Pastores */
.pastores-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.tarjeta-pastor {
    background: var(--blanco);
    border: 1px solid var(--color-crema);
    border-radius: 20px;
    padding: 40px 30px;
    width: 300px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efecto de elevación al pasar el mouse */
.tarjeta-pastor:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 119, 182, 0.15);
    border-color: var(--color-azul-esencial);
}

.pastor-foto-circulo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid var(--color-crema);
    transition: border-color 0.4s ease;
}

.tarjeta-pastor:hover .pastor-foto-circulo { border-color: var(--color-azul-esencial); }

.pastor-foto-circulo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pastor-cargo { color: var(--color-marron-madera); font-weight: 700; margin-top: -10px; margin-bottom: 15px; text-transform: uppercase; font-size: 0.85rem; }
.pastor-bio { font-size: 0.95rem; color: #555; }

/* Ajuste para móviles */
@media (max-width: 768px) {
    .zig-zag, .zig-zag.invertido { flex-direction: column; gap: 30px; }
    .zz-texto h2 { text-align: center; }
    .zz-texto { text-align: center; }
}
/* --- ESTILOS PARA LA PÁGINA DE EVANGELIZACIÓN --- */

.ministerios-grid {
    display: grid;
    /* Esto hace que las tarjetas se adapten solas al tamaño de la pantalla */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 20px;
}

.tarjeta-ministerio {
    background: var(--blanco);
    border-radius: 15px;
    overflow: hidden; /* Mantiene la foto dentro de las esquinas redondeadas */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-bottom: 4px solid transparent;
}

/* Efecto al pasar el mouse sobre toda la tarjeta */
.tarjeta-ministerio:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 119, 182, 0.15);
    border-bottom: 4px solid var(--color-azul-esencial); /* Aparece una línea azul abajo */
}

/* El contenedor de la foto */
.min-foto-caja {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

/* La foto misma con efecto zoom */
.min-foto-viva {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tarjeta-ministerio:hover .min-foto-viva {
    transform: scale(1.1);
}

/* El texto debajo de la foto */
.min-contenido {
    padding: 25px;
    text-align: left;
}

.min-contenido h3 {
    color: var(--color-marron-madera);
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.min-contenido p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Tarjeta destacada (hace que Catequesis pueda ocupar más espacio visual si la pantalla es grande) */
@media (min-width: 900px) {
    .tarjeta-ministerio.destacado {
        grid-column: span 2; /* Ocupa dos columnas */
        display: flex; /* Pone foto de un lado y texto del otro */
    }
    .tarjeta-ministerio.destacado .min-foto-caja {
        width: 50%;
        height: auto;
    }
    .tarjeta-ministerio.destacado .min-contenido {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Etiquetas (Pills) para la Catequesis */
.etiquetas-flex {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.etiqueta-pill {
    background-color: var(--color-crema);
    color: var(--color-azul-oscuro);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(0, 119, 182, 0.2);
    transition: 0.3s;
}

.tarjeta-ministerio:hover .etiqueta-pill {
    background-color: var(--color-azul-esencial);
    color: var(--blanco);
}
/* --- ESTILOS PARA LA PÁGINA DE SACRAMENTOS --- */

.categoria-sacramentos {
    margin-bottom: 60px;
}

.titulo-categoria {
    text-align: center;
    color: var(--color-marron-madera);
    font-size: 1.8rem;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

/* Una pequeña línea decorativa debajo de los títulos de categoría */
.titulo-categoria::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-azul-esencial);
    border-radius: 2px;
}

/* Grillas adaptables para 3 o 2 columnas según la categoría */
.sacramentos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.tres-columnas .tarjeta-sacramento {
    flex: 1 1 calc(33.333% - 30px);
    min-width: 280px;
    max-width: 350px;
}

.dos-columnas .tarjeta-sacramento {
    flex: 1 1 calc(50% - 30px);
    min-width: 280px;
    max-width: 450px;
}

/* Diseño de la Tarjeta */
.tarjeta-sacramento {
    background: var(--blanco);
    border: 1px solid var(--color-crema);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tarjeta-sacramento:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 119, 182, 0.1);
    border-color: rgba(0, 119, 182, 0.3);
}

.sac-foto {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 3px solid var(--color-azul-esencial);
}

.sac-contenido {
    padding: 25px;
    flex-grow: 1; /* Empuja el botón hacia abajo si el texto es corto */
    display: flex;
    flex-direction: column;
}

.sac-contenido h3 {
    color: var(--color-azul-oscuro);
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.sac-contenido p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Enlaces sutiles estilo texto para los requisitos */
.enlace-requisitos {
    color: var(--color-marron-madera);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    align-self: flex-start; /* Lo alinea a la izquierda */
}

.enlace-requisitos:hover {
    color: var(--color-azul-esencial);
    text-decoration: underline;
}
/* --- ESTILOS PARA LA PÁGINA COMUNIDAD --- */

/* Grid de Carismas */
.carismas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* Tarjeta de Carisma */
.tarjeta-carisma {
    background: var(--blanco);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid var(--color-crema);
}

.tarjeta-carisma:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 119, 182, 0.15);
}

/* Imagen de fondo en la tarjeta */
.carisma-imagen {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--color-azul-esencial);
}

.carisma-info {
    padding: 25px;
}

.carisma-info h3 {
    margin-top: 0;
    color: var(--color-azul-oscuro);
    font-size: 1.3rem;
}

/* Etiquetas para las Ramas (Samuel, Serafines, etc.) */
.ramas-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.tag-rama {
    background-color: var(--color-crema);
    color: var(--color-marron-madera);
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Estilo para "Próximamente" (Camino Neocatecumenal) */
.tarjeta-carisma.proximo {
    opacity: 0.8;
    border-style: dashed;
}

.etiqueta-proximamente {
    background-color: #eee;
    color: #777;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

/* --- SECCIÓN CARIDAD --- */

.cabecera-caridad {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.caridad-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.bloque-caridad {
    flex: 1 1 300px;
    background: var(--blanco);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
}

.icono-caridad {
    font-size: 2.5rem;
    color: var(--color-azul-esencial);
    margin-bottom: 20px;
}

/* El bloque principal de Cáritas se destaca */
.destacado-caridad {
    border: 2px solid var(--color-azul-esencial);
    background-color: #f0f7fa; /* Un azul muy muy clarito */
}

.btn-donar {
    display: inline-block;
    margin-top: 20px;
    background-color: var(--color-azul-esencial);
    color: var(--blanco);
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.btn-donar:hover {
    background-color: var(--color-azul-oscuro);
    transform: scale(1.05);
}
/* --- ESTILOS PARA LA PÁGINA CONTACTO --- */

/* Grid de Redes Sociales */
.redes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.tarjeta-red {
    flex: 1 1 300px;
    max-width: 350px;
    background: var(--blanco);
    border: 1px solid var(--color-crema);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    text-decoration: none;
    color: var(--color-texto);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.tarjeta-red:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 119, 182, 0.15);
}

/* Colores específicos para cada red al pasar el mouse */
.tarjeta-red.whatsapp:hover { border-color: #25D366; }
.tarjeta-red.instagram:hover { border-color: #E1306C; }
.tarjeta-red.email:hover { border-color: var(--color-azul-esencial); }

.icono-red {
    font-size: 3rem;
    margin-bottom: 20px;
}
.whatsapp .icono-red { color: #25D366; }
.instagram .icono-red { color: #E1306C; }
.email .icono-red { color: var(--color-azul-esencial); }

.tarjeta-red h3 { margin: 10px 0; font-size: 1.4rem; color: var(--color-azul-oscuro); }
.tarjeta-red p { color: #666; font-size: 0.95rem; margin-bottom: 25px; }

.btn-accion {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-crema);
    color: var(--color-azul-esencial);
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s;
}

.tarjeta-red:hover .btn-accion {
    background-color: var(--color-azul-esencial);
    color: var(--blanco);
}

/* Sección Ubicación */
.dos-columnas-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.direccion {
    font-size: 1.2rem;
    color: var(--color-azul-oscuro);
    margin-bottom: 30px;
}

.horarios-caja {
    background: var(--blanco);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    border-left: 5px solid var(--color-marron-madera);
}

.horarios-caja h3 { margin-top: 0; font-size: 1.1rem; color: var(--color-marron-madera); }
.horarios-caja ul { list-style: none; padding: 0; margin: 0; }
.horarios-caja li { margin-bottom: 8px; font-size: 0.95rem; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.horarios-caja li:last-child { border-bottom: none; }

.mapa-contenedor iframe {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Grid de Enlaces Útiles */
.enlaces-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.enlace-util {
    background: var(--blanco);
    border: 1px solid var(--color-crema);
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.enlace-util i { color: var(--color-azul-esencial); }

.enlace-util:hover {
    background: var(--color-azul-esencial);
    color: var(--blanco);
    border-color: var(--color-azul-esencial);
}
.enlace-util:hover i { color: var(--blanco); }

/* Móvil */
@media (max-width: 768px) {
    .dos-columnas-contacto { grid-template-columns: 1fr; }
    .mapa-contenedor { height: 300px; }
}
/* --- AJUSTES FINALES PARA MÓVIL (Mobile Polish) --- */

@media (max-width: 768px) {
    
    /* 1. Títulos más pequeños para que no ocupen toda la pantalla */
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
    
    /* 2. Más espacio a los lados para que el texto respire */
    .contenedor {
        padding: 60px 25px; /* Más margen lateral */
    }

    /* 3. El Menú un poco más compacto */
    nav { padding: 15px; }
    nav ul li { margin: 8px 0; }
    
    /* 4. Las portadas internas (Hero) más bajitas en móvil */
    .hero-interno { height: 30vh; }
    
    /* 5. Ajuste para que los videos no corten el texto */
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 1rem; padding: 0 20px; }

    /* 6. Botones que ocupan todo el ancho (más fácil de tocar) */
    .btn-principal, .btn-donar {
        display: block;
        width: 100%; /* Botón ancho completo */
        box-sizing: border-box; /* Para que el padding no rompa el ancho */
        text-align: center;
    }
}
/* --- ESTILOS PARA LA PÁGINA EVENTOS --- */

/* Evento Destacado (Spotlight) */
.evento-destacado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    background: var(--blanco);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 119, 182, 0.15);
    border: 1px solid var(--color-crema);
}

.destacado-img {
    flex: 1 1 400px;
    height: 350px;
    overflow: hidden;
}

.destacado-info {
    flex: 1 1 300px;
    padding: 40px;
}

.etiqueta-alerta {
    background-color: var(--color-azul-esencial);
    color: var(--blanco);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.destacado-info h2 {
    font-size: 2.2rem;
    color: var(--color-azul-oscuro);
    margin: 15px 0;
    text-align: left;
}

.fecha-grande {
    font-size: 1.2rem;
    color: var(--color-marron-madera);
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Grid de Agenda */
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.tarjeta-evento {
    background: var(--blanco);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    border-left: 5px solid var(--color-azul-esencial);
}

.tarjeta-evento:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}

/* El cuadrito de la fecha */
.fecha-badge {
    background-color: var(--color-crema);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    min-width: 60px;
    border: 1px solid rgba(0,0,0,0.05);
}

.fecha-badge .dia {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-azul-esencial);
    line-height: 1;
}

.fecha-badge .mes {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    margin-top: 3px;
}

.evento-detalle h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--color-texto);
}

.evento-detalle .hora {
    font-size: 0.85rem;
    color: var(--color-marron-madera);
    margin-bottom: 8px;
    font-weight: 600;
}

.evento-detalle p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Botón de Descarga PDF */
.caja-descarga {
    background-color: var(--color-azul-oscuro);
    color: var(--blanco);
    padding: 50px;
    border-radius: 20px;
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('patron-sutil.png'); /* Opcional */
}

.caja-descarga h3 { color: var(--blanco); }

.btn-descarga {
    display: inline-block;
    background-color: var(--blanco);
    color: var(--color-azul-oscuro);
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-descarga:hover {
    transform: scale(1.05);
    background-color: var(--color-marron-madera);
    color: var(--blanco);
}

@media (max-width: 768px) {
    .evento-destacado { flex-direction: column; gap: 0; }
    .destacado-img { width: 100%; height: 250px; }
    .destacado-info { padding: 30px 20px; }
}

/* Ajuste específico para la sección Nosotros con texto largo */
.zig-zag .foto-contenedor {
    height: 350px; /* Un poco más alta que los 250px estándar para equilibrar el texto */
}

/* En móviles, volvemos a un tamaño más manejable */
@media (max-width: 768px) {
    .zig-zag .foto-contenedor {
        height: 250px;
    }
}

/* --- CORRECCIÓN DEFINITIVA DE ENLACES (Opción Nuclear) --- */

/* 1. Atacamos directamente al enlace */
a.enlace-tarjeta,
a.enlace-tarjeta:link,
a.enlace-tarjeta:visited,
a.enlace-tarjeta:active {
    text-decoration: none !important; /* ¡Sin subrayado! */
    border: none !important;          /* ¡Sin bordes! */
    color: inherit !important;        /* Color normal, no azul */
    display: block;
    cursor: pointer;
}

/* 2. Aseguramos que el TÍTULO H3 dentro del enlace no tenga línea */
.info-bloque-dinamico h3 {
    text-decoration: none !important;
    color: var(--color-azul-oscuro) !important;
    border-bottom: none !important;
}

/* 3. Solo al pasar el mouse (hover), cambiamos el color suavemente */
a.enlace-tarjeta:hover h3 {
    color: var(--color-azul-esencial) !important;
    /* Si quieres que se subraye SOLO al pasar el mouse, deja esta línea.
       Si no quieres NUNCA subrayado, bórrala o pon 'none'. */
    text-decoration: underline !important; 
}
/* --- CORRECCIÓN DE ENCUADRE --- */

/* Obliga a que las fotos de la sección 'Nosotros' enfoquen siempre ARRIBA */
.zz-imagen .foto-viva {
    object-position: top center !important; 
}
/* --- CORRECCIÓN DE ATERRIZAJE (SCROLL OFFSET) --- */

/* Esto crea un "colchón" invisible encima de las secciones */
#santa-lucia,
#historia,
section {
    scroll-margin-top: 120px; /* El freno de seguridad */
}

/* Para móviles, donde el menú es más pequeño, frenamos menos */
@media (max-width: 768px) {
    #santa-lucia,
    #historia,
    section {
        scroll-margin-top: 80px;
    }
}
/* --- LLAMADO A LA ACCIÓN EN COMUNIDAD (CORREGIDO) --- */

.cta-comunidad {
    /* TRUCO NUEVO: Si está dentro de una grilla, ocupa todo el ancho */
    grid-column: 1 / -1; 
    
    text-align: center; 
    margin: 60px auto;  
    padding: 50px 20px;
    background-color: #fafafa;
    border-radius: 20px;
    width: 100%; /* Asegura que llene el espacio */
    max-width: 900px; /* Que no se estire demasiado en pantallas gigantes */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}

.cta-comunidad h2 {
    font-size: 3rem; 
    color: var(--color-azul-esencial);
    margin-bottom: 15px;
    line-height: 1.1;
}

.cta-comunidad p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 35px;
}
/* --- ESTILO TARJETA SEMANA SANTA (DISEÑO ENMARCADO) --- */

.evento-destacado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;  /* Centra la foto y el texto verticalmente */
    gap: 40px;            /* Espacio generoso entre la foto y el texto */
    padding: 30px;        /* ¡La Clave! Un marco blanco interno alrededor de todo */
    background: var(--blanco);
    border-radius: 25px;  /* Bordes de la tarjeta principal */
    box-shadow: 0 15px 40px rgba(0, 119, 182, 0.10); /* Sombra más suave y difusa */
    border: 1px solid rgba(0,0,0,0.03); /* Borde sutil */
    margin-bottom: 50px;
}

/* La caja de la foto ahora es independiente y redondita */
.destacado-img {
    flex: 1 1 350px;      /* Ancho base */
    height: 350px;        /* Altura cuadrada elegante */
    border-radius: 20px;  /* ¡Aquí están los bordes redondeados que querías! */
    overflow: hidden;     /* Recorta la foto perfectamente */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* La foto tiene su propia sombrita */
}

.destacado-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* La foto se adapta sin deformarse */
    transition: transform 0.5s ease; /* Un efectito suave si quieres */
}

/* Un toque extra: si pasas el mouse, la foto se acerca un poquito */
.evento-destacado:hover .destacado-img img {
    transform: scale(1.05);
}

.destacado-info {
    flex: 1 1 350px; /* El texto ocupa el otro espacio */
    padding: 10px;   /* Un poquito de aire extra */
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    .evento-destacado {
        flex-direction: column;
        padding: 20px; /* Menos marco en celular */
        gap: 20px;
    }
    .destacado-img {
        width: 100%;
        height: 250px; /* Más bajita en celular */
    }
}
/* --- EFECTO ZOOM EN SECCIÓN NOSOTROS --- */

/* 1. El marco (contenedor) */
.zz-imagen {
    overflow: hidden; /* IMPORTANTE: Esto evita que la foto se salga del cuadro al crecer */
    border-radius: 20px; /* Asegura que las esquinas sigan redondas durante el zoom */
    cursor: pointer; /* Cambia el cursor a manita para invitar a tocar */
}

/* 2. La foto (estado normal) */
.zz-imagen img {
    transition: transform 0.6s ease; /* La magia de la suavidad */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. La foto (cuando el mouse pasa por encima) */
.zz-imagen:hover img {
    transform: scale(1.1); /* Crece un 10% */
}
/* --- PÁGINA DE CONTACTO --- */

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mitad texto, mitad mapa */
    gap: 50px;
    align-items: start;
}

/* Ítems de datos (dirección, reloj) */
.dato-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Sombra muy suave */
    border: 1px solid #f0f0f0;
}

.icono-dato {
    width: 50px;
    height: 50px;
    background-color: var(--color-crema);
    color: var(--color-azul-esencial);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

/* El Mapa */
.mapa-wrapper {
    height: 500px; /* Altura fija para que se vea bien el mapa */
    border-radius: 20px;
    overflow: hidden; /* Recorta las esquinas del mapa */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 5px solid #fff; /* Marco blanco tipo foto */
}

/* Botones Sociales Grandes */
.botones-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-social:hover {
    transform: translateY(-3px); /* Se levanta un poquito */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Colores específicos de cada marca */
.whatsapp {
    background-color: #25D366; 
}

.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
}

.correo {
    background-color: var(--color-marron-madera);
}

/* Versión móvil */
@media (max-width: 768px) {
    .contacto-grid {
        grid-template-columns: 1fr; /* Una sola columna */
    }
    .mapa-wrapper {
        height: 350px; /* Mapa más pequeño en celular */
        order: -1; /* Pone el mapa PRIMERO, arriba de los datos */
    }
}