/* ========================================= */
/* 1. VARIABLES GLOBALES Y RESET */
/* ========================================= */
:root {
    /* Fondo Principal Oscuro (Base del Body/Contenedores) */
    --bg-dark: #202020;
    /* Un gris muy oscuro, menos duro que el negro puro. */

    /* Fondo Secundario Oscuro (Para secciones alternas o tarjetas) */
    --bg-light: #252525;
    /* Un gris un poco más claro para dar profundidad y separación. */

    /* Color Principal: (para elementos de navegación, iconos, bordes) */
    --primary-color: #e8e8e8;

    /* Color Secundario/Acento:  (para CTAs, botones, enlaces destacados, hover) */
    --secondary-color: #b3b3b3;

    /* Texto Claro (Texto principal, títulos) */
    --text-light: #1f1e1e;
    /* Blanco roto para evitar el brillo excesivo sobre el fondo oscuro. */

    /* Texto Secundario/Subtítulos (Para texto menos prominente o de ayuda) */
    --text-dark: #A0A0A0;
    /* Un gris medio para subtítulos o texto descriptivo. */

    /* Fuente */
    --font-family: 'Lato', sans-serif;

    /* 💡 Sombras (Se cambian a sombras interiores o sutiles sobre fondos oscuros) */
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.6);
}

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

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-light);
    scroll-behavior: smooth;
}

/* ========================================= */
/* 2. HEADER Y NAVEGACIÓN (Sticky/Impresionante) */
/* ========================================= */
.header {
    background-color: var(--bg-dark);
    box-shadow: var(--shadow-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    transition: background-color 0.3s ease;
}

.header .logo-img {
    height: 60px;
    /* Ajusta este valor para controlar la altura del logo */
    width: auto;
    /* Mantiene la proporción de la imagen */
    vertical-align: middle;
    margin-right: 0;
    /* No necesitamos margen si no hay texto al lado */
    padding: 5px 0;
    /* Pequeño padding vertical si es necesario */
}

/* Si el logo del header es "VIDA" y quieres un tamaño de fuente específico */
.header .logo {
    font-size: 2.5rem;
    /* Ajusta el tamaño de la fuente si el logo es solo texto */
    font-weight: 800;
    color: var(--text-color, #ffffff);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-top: 10px;
    /* Ajusta el padding para alinear verticalmente */
    padding-bottom: 10px;
    display: flex;
    /* Para que la imagen y el texto (si lo hubiera) estén en línea */
    align-items: center;
    /* Centra verticalmente los elementos dentro del logo */
}

/* Puedes eliminar el estilo .header .logo si solo usarás la imagen */
/* y el contenedor .logo solo contendrá la imagen */

.nav a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 700;
    margin-left: 20px;
    padding: 8px 15px;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    /* ✅ CAMBIO CLAVE: Reducir este valor de 0.95rem a un valor más pequeño */
    font-size: 0.65rem;
    text-transform: uppercase;
}

.nav a:hover {
    color: var(--text-light);
    /* Color del texto se vuelve blanco */
    background-color: var(--secondary-color);
    /* Fondo Deep Ruby */
    transform: translateY(-2px);
    /* Pequeño levantamiento */
    box-shadow: 0 4px 10px rgba(136, 14, 79, 0.4);
    /* Sombra ajustada al nuevo color */
}

/* ========================================= */
/* 2.5. SUBMENÚ DESPLEGABLE (DROPDOWN) - NUEVO */
/* ========================================= */

/* Contenedor del Dropdown (el <li> que contiene el submenú) */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Enlace que activa el dropdown */
.dropdown-toggle {
    cursor: pointer;
}

/* Flecha indicadora de submenú */
.dropdown-toggle::after {
    content: ' \25BE';
    /* Código de flecha hacia abajo */
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/* Contenedor real del submenú */
.dropdown-menu {
    display: none;
    /* Por defecto, oculto */
    position: absolute;
    top: 100%;
    /* Se posiciona justo debajo del enlace padre */
    left: 0;
    min-width: 220px;
    background-color: var(--text-light);
    box-shadow: var(--shadow-medium);
    border-radius: 5px;
    z-index: 1001;
    /* Debe estar por encima de otros elementos */
    padding: 10px 0;
}

/* Estilos para los elementos dentro del submenú */
.dropdown-menu a {
    color: var(--primary-color);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin: 0;
    border-radius: 0;
    /* Remueve el borde redondeado */
    font-weight: 600;
}

/* Estilo hover en enlaces del submenú */
.dropdown-menu a:hover {
    background-color: var(--bg-light);
    /* Fondo gris claro en hover */
    color: var(--secondary-color);
    transform: none;
    /* Evita el levantamiento */
    box-shadow: none;
}

/* Activación del Dropdown en Escritorio (Hover) */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Rotar la flecha al abrir el menú en escritorio */
.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Fin 2.5. Dropdown */
/* ========================================= */


/* Asegura que el botón de DONAR y del INSTITUTO mantenga su estilo distintivo */
.cta-button {
    background-color: var(--secondary-color) !important;
    color: var(--text-light) !important;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700 !important;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(223, 220, 222, 0.4);
    margin-left: 30px;
}

.cta-button:hover {
    background-color: #6a003f !important;
    /* Tono más oscuro de Deep Ruby */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(136, 14, 79, 0.6);
}

.menu-toggle {
    display: none;
}

/* ========================================= */
/* 3. HERO Y CARRUSEL */
/* ========================================= */
.hero {
    height: 85vh;
    min-height: 600px;
    position: relative;
    overflow: hidden;
}

.carousel-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-slide {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    /* La animación debe ser controlada por JavaScript */
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    filter: brightness(0.7);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.slide-image:first-child {
    opacity: 1;
}

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-light);
    z-index: 10;
}

/* ESTILO DEL TÍTULO MARQUESINA/ROTATORIO */
.hero-content .pe-marquee {
    /* Estilos base del H1 de la sección Hero */
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 25px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
    text-transform: uppercase;
    color: var(--primary-color:);

    /* Para centrar el separador y aplicar el efecto marquee */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 90%;
    /* Limita el ancho para que el desplazamiento sea visible */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    /* **CRUCIAL**: Oculta el contenido fuera del ancho */
}

/* Contenedor del texto de la marquesina */
.hero-content .pe-marquee .marquee-inner {
    display: flex;
    /* Los dos <span> se alinean horizontalmente */
    white-space: nowrap;
    /* Evita saltos de línea */
    animation: marquee-scroll 15s linear infinite;
    /* **CRUCIAL**: Aplica la animación de desplazamiento */
    color: var(--primary-color);
}

/* Desplazamiento del texto */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0%);
    }

    /* Mueve un 50% para que la segunda copia del texto reemplace a la primera */
    100% {
        transform: translateX(-50%);
    }
}

/* Cada bloque de texto dentro de la marquesina */
.hero-content .pe-marquee .marquee-text {
    flex-shrink: 0;
    /* Asegura que el texto no se comprima */
}

/* Contenedor del SVG (el separador) */
.hero-content .pe-marquee .seperator {
    margin: 0 30px;
    /* Espaciado entre el texto y el SVG */
    height: 1.2em;
    /* Altura basada en el tamaño de la fuente */
    width: 1.2em;
    /* Ancho basado en el tamaño de la fuente */
    flex-shrink: 0;
    /* Evita que el SVG se comprima */

}

/* Definición de la animación de rotación */
@keyframes rotate-counter-clockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* Asegura que el SVG tome el tamaño de su contenedor */
.hero-content .pe-marquee .seperator svg {
    display: block;
    height: 100%;
    width: 100%;
}

/* Aplica el color blanco a los elementos del SVG */
.hero-content .pe-marquee .seperator svg .cls-1 {
    fill: var(--text-light);
}

/* Estilos de botones generales */
.btn {
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    border: 2px solid transparent;
    margin: 10px 10px;
}

.primary-btn {
    background-color: var(--secondary-color);
    /* Deep Ruby */
    color: var(--text-light);
    border-color: var(--secondary-color);
}

.primary-btn:hover {
    background-color: #6a003f;
    /* Tono más oscuro de Deep Ruby */
    transform: translateY(-2px);
}

.secondary-btn {
    background-color: transparent;
    color: var(--text-light);
    border-color: var(--text-light);
}

.secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.tertiary-btn {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 10px 25px;
    border-radius: 5px;
    margin-top: 30px;
    transition: background-color 0.3s ease;
}

.tertiary-btn:hover {
    background-color: #151a5c;
}

/* ========================================= */
/* 4. SECCIONES GENERALES (Títulos Impresionantes) */
/* ========================================= */
.section {
    padding: 80px 5%;
    text-align: center;
}

/* ESTILOS DE TÍTULOS IMPRESIONANTES */
.section {
    padding: 80px 5% 60px;
    /* ✅ AÑADIDO: Centra los elementos de bloque hijos como el h2 (inline-block) */
    text-align: center;
}

.section h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    /* Necesita que el padre (.section) tenga text-align: center para centrarse */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Subrayado de impacto */
.section h2:after {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background: var(--accent-color);
    /* Antique Gold */
    margin: 10px auto 0;
    border-radius: 5px;
    transform: scaleX(0.8);
    transition: transform 0.3s ease;
}

.section h2:hover:after {
    transform: scaleX(1);
    background: var(--secondary-color);
    /* Deep Ruby en hover */
}

.section-description {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Estilo para los títulos de las tarjetas */
.event-card h3,
.cta-item h3,
.point-item h4 {
    color: var(--secondary-color);
    /* Utiliza Deep Ruby para mayor impacto */
    font-weight: 600;
    /* ✅ CORRECCIÓN DE SINTAXIS: Separamos las propiedades */
    text-align: center;
    display: block;
    margin: 0 auto 10px auto;
}

.point-item {
    text-align: center;
}

.cta-item {
    text-align: center;
}

.event-card {
    text-align: center;
}

/* ========================================= */
/* 5. MENSAJES (Nuevo estilo: Imagen de Fondo Fija) */
/* ========================================= */
#mensajes {
    background-image: url('1abb07da-9d54-4471-a15a-35e5d9e4fd82.jfif');
    background-size: cover;
    /* Asegura que la imagen cubra toda la sección */
    background-position: center center;
    /* Centra la imagen */
    background-attachment: fixed;
    /* ¡Esto hace que la imagen sea fija al hacer scroll! */
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5);
    /* Capa de color negro con 50% de opacidad para mejorar contraste */
    padding: 80px 20px;
    text-align: center;
    /* Hacemos que el texto sea blanco para que se vea sobre el fondo oscuro */
    color: white;
}

.video-container {
    max-width: 800px;
    /* margin: 0 auto 40px; */
    margin: 40px auto;
    /* Centra el contenedor del video y le da margen */
    border-radius: 12px;
    overflow: hidden;
    /* Ajustamos la sombra para que se vea bien sobre un fondo oscuro si es necesario */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    background-color: #000;
    /* Fondo negro para evitar un borde blanco si la imagen no se carga rápido */
}

.video-container iframe {
    width: 100%;
    /* Ajusta la altura del iframe si es necesario, 450px puede ser mucho en móviles */
    /* Considera usar un aspect ratio más flexible con padding-bottom si es crítico */
    height: 450px;
}


/* 6. EVENTOS*/
/* ========================================= */
.events-section {
    background-color: var(--bg-light);
}

/* --- ESTILOS ESPECÍFICOS DEL CARRUSEL DE EVENTOS (3 Recuadros Visibles - Desktop) --- */

.events-section .events-carousel {
    position: relative;
    /* Ancho máximo ajustado para el escritorio */
    max-width: 1500px;
    margin: 40px auto;
    width: 100%;
}

.events-section .events-carousel .carousel-frame {
    overflow: hidden;
    width: 100%;
    /* 💥 CAMBIO CLAVE: Aumenta el padding del marco para compensar el del ítem */
    padding: 0 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.events-section .events-carousel .carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

/* 💥 CADA ITEM OCUPA UN TERCIO DEL ESPACIO VISIBLE (Desktop) */
.events-section .events-carousel .carousel-item {
    flex-shrink: 0;
    width: 33.333%;
    /* 💥 CAMBIO CLAVE: Aumenta el padding lateral a 15px para más separación */
    padding: 0 15px;
    box-sizing: border-box;
}

.events-section .events-carousel .carousel-item img {
    width: 100%;
    /* Altura aumentada a 450px */
    height: 450px;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}

/* Estilos de botones específicos para eventos (Mantener) */
.events-section .events-carousel .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.2s;
}

.events-section .events-carousel .carousel-btn:hover {
    background: var(--secondary-color);
}

.events-section .events-carousel .carousel-btn.prev {
    left: 15px;
}

.events-section .events-carousel .carousel-btn.next {
    right: 15px;
}

/* ========================================= */
/* 6.5. CALENDARIO RESPONSIVO */
/* ========================================= */
.calendar-container {
    /* Establece un ancho máximo si es necesario, ya lo tienes en el padre */
    max-width: 900px;
    margin: 0 auto;

    /* CRÍTICO: Técnica para mantener la relación de aspecto (16:9) */
    position: relative;
    padding-bottom: 56.25%;
    /* 9 / 16 = 0.5625 = 56.25% (Relación 16:9) */
    height: 0;
    overflow: hidden;
}

.calendar-container iframe {
    /* CRÍTICO: El iframe toma la altura y el ancho del contenedor responsivo */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Remueve la altura fija del HTML */
}

/* Ajuste específico para móvil si el 16:9 es demasiado ancho */
@media (max-width: 600px) {
    .calendar-container {
        /* Usa una relación más cuadrada para pantallas muy pequeñas (Ej: 4:3) */
        padding-bottom: 75%;
        /* 3 / 4 = 0.75 = 75% */
    }
}


/* ========================================= */
/* 7. SECCIÓN CONECTA CON NOSOTROS (HORIZONTAL) */
/* ========================================= */
.events-grid {
    display: grid;
    /* Divide el espacio en 3 columnas de igual ancho */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    /* Espacio entre las columnas */
    max-width: 1100px;
    margin: 40px auto;
    /* Centra el contenedor y le da espacio vertical */
    padding: 0 20px;
}

.event-card {
    /* Usamos flexbox para asegurar que el botón se alinee al fondo */
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    height: 100%;
    /* Permite que el grid ocupe el espacio completo */

    /* Estilos visuales de la tarjeta */
    background-color: var(--bg-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Regla clave para empujar el botón al fondo si el texto es de diferente longitud */
.event-card p {
    flex-grow: 1;
    /* Permite que el párrafo ocupe el espacio restante */
    margin-bottom: 20px;
    color: var(--text-dark);
}

/* Ajuste de botones dentro de la tarjeta */
.event-card .btn {
    margin-top: auto;
    /* Empuja el botón al final de la tarjeta */
    display: inline-block;
    width: auto;
}

/* ========================================= */
/* 7. MISIÓN (Profesional) */
/* ========================================= */
.mission-section {
    background-image: url('WhatsApp\ Image\ 2025-11-15\ at\ 11.29.19\ \(2\).jpeg');
    background-size: cover;
    /* Cubre toda la sección */
    background-position: center center;
    /* Centra la imagen */
    background-attachment: fixed;
    /* ¡El efecto Parallax/Fijo! */

    /* Overlay oscuro para la legibilidad del texto claro */
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5);
    /* Capa de color negro con 50% de opacidad */

    /* Texto principal y títulos claros sobre la imagen oscura */
    color: var(--primary-color);

    /* Mantenemos el padding original */
    padding: 80px 5%;
    text-align: center;
}

.mission-content {
    max-width: 1000px;
    margin: 0 auto;
}

.mission-content p {
    font-size: 1.3rem;
    margin-bottom: 50px;
    color: var(--primary-color);
    /* Aseguramos que el texto del párrafo sea claro */
    font-weight: 600;
    padding: 80px 5%;
    text-align: center;
}

.mission-content {
    max-width: 1000px;
    margin: 0 auto;
}

.mission-content p {
    font-size: 1.3rem;
    margin-bottom: 50px;
    color: var(--primary-color);
    font-weight: 600;
}

.mission-points {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.point-item {
    flex: 1;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.point-item:hover {
    background-color: var(--bg-light);
    transform: translateY(-3px);
}

.point-item i {
    font-size: 3rem;
    color: var(--secondary-color);
    /* Deep Ruby */
    margin-bottom: 15px;

}

.point-item h4 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-weight: 700;
}

/* ========================================= */
/* 8. ARREGLO DE LAYOUT PARA GALERÍA (SLIDER) */
/* ========================================= */

.slider-grid {
    /* Define un layout de 2 columnas para los 2 sliders */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
}

/* 1. El Marco Visible */
.gallery-slider-frame {
    position: relative;
    overflow: hidden;
    /* CRUCIAL: Oculta las diapositivas que están fuera de este marco */
    border-radius: 10px;
    box-shadow: var(--shadow-medium);
    /* Puedes ajustar esta altura según el tamaño deseado */
    height: 350px;
}

/* 2. El Contenedor de Todas las Diapositivas (el "Track") */
.slider-track {
    display: flex;
    /* CRUCIAL: Coloca todos los slides en una fila horizontal */
    width: 100%;
    /* La anchura base es 100% */
    height: 100%;
    /* La transición CSS hace que el movimiento se vea suave, ya que el JS solo cambia el valor del 'transform' */
    transition: transform 0.6s ease-in-out;
}

/* 3. Cada Diapositiva Individual */
.slider-slide {
    flex-shrink: 0;
    /* CRUCIAL: Evita que la imagen se encoja para caber */
    width: 100%;
    /* Cada slide ocupa el 100% del ancho del marco (.gallery-slider-frame) */
    height: 100%;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Asegura que la imagen se ajuste bien sin distorsionarse */
}

/* 4. Estilo de los Botones (Asegurando que sean visibles y clicables) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color 0.3s;
}

.slider-btn.prev {
    left: 10px;
}

.slider-btn.next {
    right: 10px;
}

.slider-btn:hover {
    background-color: var(--secondary-color);
}

/* ----------------------------------------- */
/* 8.5. GALERÍA DE FOTOS (Sliders) - NUEVO */
/* ----------------------------------------- */
.slider-container-wrapper {
    background-color: var(--bg-light);
    text-align: center;
}

/* Diseño de cuadrícula para los 3 carruseles */
.slider-grid {
    display: grid;
    /* 3 columnas en escritorio, mín. 300px cada una */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 40px auto;
    max-width: 1200px;
}

/* Marco Blanco y contenedor del slider */
.gallery-slider-frame {
    position: relative;
    overflow: hidden;
    /* CRÍTICO: Oculta las imágenes que no están en vista */
    border: 15px solid white;
    /* El marco blanco */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    height: 350px;
    /* Altura fija */
}

/* Contenedor de las imágenes (el que se desliza) */
.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* Animación de deslizamiento */
    height: 100%;
}

/* Cada imagen dentro del slider */
.slider-slide {
    min-width: 100%;
    /* CRÍTICO: Cada imagen ocupa el 100% del contenedor */
    height: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Evita que las imágenes se compriman */
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Asegura que la imagen llene el espacio */
    display: block;
}

/* Botones de navegación (flechas) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5em;
    line-height: 1;
    border-radius: 5px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.slider-btn:hover {
    opacity: 1;
}

.slider-btn.prev {
    left: 10px;
}

.slider-btn.next {
    right: 10px;
}

/* ========================================= */
/* 9. FOOTER Y MODALES (¡CORREGIDO PARA FONDO OSCURO!) */
/* ========================================= */
.footer {
    background-color: var(--bg-dark) !important;
    /* ¡Fondo oscuro asegurado! */
    color: var(--text-dark) !important;
    /* Texto claro asegurado */
    padding: 40px 5%;
    text-align: center;
    width: 100%;
    margin-top: 0;
}

/* Enlaces Sociales (Iconos) - Asegurar color blanco */
.social-links {
    margin: 20px 0;
}

.social-links a i {
    font-size: 2.8rem;
    color: var(--text-dark) !important;
    /* ¡Color de íconos asegurado! */
    margin: 0 12px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover i {
    color: var(--text-dark);
    /* Deep Ruby en hover */
    transform: scale(1.15);
}

/* Enlaces del Footer (Términos, Privacidad, Contacto) - Asegurar color blanco */
.footer-links {
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--text-dark) !important;
    /* ¡Color de enlaces asegurado! */
    text-decoration: none;
    margin: 0 15px;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 1;
}

/* Texto de Copyright */
.footer p {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #aaa;
    /* Gris claro para el copyright */
}

/* Estilo para el contenido de los modales */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background-color: #ffffff;
    margin: 10% auto;
    padding: 40px;
    border: none;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    box-shadow: var(--shadow-medium);
    animation: fadeIn 0.3s;
}

.modal-content h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
    /* Antique Gold */
    padding-bottom: 10px;
}

.modal-content ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: left;
}

.modal-content ul li {
    margin-bottom: 10px;
    color: var(--text-dark);
}

.modal-content ul li i {
    color: var(--secondary-color);
    /* Deep Ruby */
    margin-right: 10px;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: color 0.3s;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--secondary-color);
    /* Deep Ruby */
    text-decoration: none;
    cursor: pointer;
}

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

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

/* ========================================= */
/* 9.5. BOTÓN FLOTANTE DE WHATSAPP */
/* ========================================= */
.whatsapp-float {
    /* Posicionamiento y diseño */
    position: fixed;
    width: auto;
    min-width: 170px;
    height: 55px;
    bottom: 40px;
    right: 40px;

    /* Estilos */
    background-color: #25d366;
    color: var(--text-light);
    border-radius: 50px;

    /* Contenido y Centrado */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;

    /* Sombra y Transición */
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.6);
    transition: all 0.3s ease;
    z-index: 10000;
}

/* Estilo para el ícono de WhatsApp (i) dentro del botón */
.whatsapp-float i {
    font-size: 1.4rem;
    /* Tamaño del ícono en escritorio */
    margin-right: 10px;
    line-height: 1;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(18, 140, 126, 0.8);
}


/* ========================================= */
/* 10. RESPONSIVE (Móviles y Tabletas) */
/* ========================================= */
@media (max-width: 992px) {

    /* 1. Muestra el botón de hamburguesa y oculta el menú de escritorio */
    .menu-toggle {
        display: block;
    }

    /* 2. Oculta el menú por defecto, forzando la anulación de estilos de escritorio */
    .nav {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--text-light, white);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 999;
        height: auto;
        overflow-y: auto;
    }

    /* 3. Muestra el menú cuando el JS añade la clase 'active' */
    .nav.active {
        display: flex !important;
        animation: slideDown 0.3s ease-out;
    }

    /* 4. Estilos de los enlaces del menú móvil */
    .nav a {
        margin-left: 0;
        padding: 15px 5%;
        text-align: left;
        border-bottom: 1px solid var(--bg-light, #f0f0f0);
        width: 100%;
        color: var(--primary-color, #2c3e50);
    }

    /* 5. Ajuste para los botones CTA */
    .nav a.cta-button {
        margin: 15px 5% 5px;
        width: 90%;
        text-align: center;
        border-bottom: none;
    }

    /* ========================================= */
    /* Dentro de @media (max-width: 992px) { ... } */
    /* ========================================= */

    .events-grid {
        /* 1fr significa "una fracción", lo que resulta en una sola columna */
        grid-template-columns: 1fr;
        gap: 20px;
        /* Reduce un poco el espacio vertical entre las tarjetas */
        margin: 20px auto;
    }

    /* ========================================= */
    /* DROPDOWN EN MÓVIL (Activación por JS) - NUEVO */
    /* ========================================= */
    .dropdown {
        display: block;
        /* Ocupa todo el ancho en móvil */
    }

    /* El submenú por defecto sigue oculto */
    .dropdown-menu {
        position: relative;
        /* Ya no es absoluto; se mueve dentro del flujo */
        top: 0;
        width: 100%;
        box-shadow: none;
        /* Remueve la sombra en móvil */
        border-radius: 0;
        background-color: var(--bg-light);
        /* Un tono para diferenciar */
        padding: 0;
    }

    /* Estilos de los enlaces dentro del submenú móvil */
    .dropdown-menu a {
        padding-left: 10%;
        /* Sangría para indicar que es un sub-enlace */
        font-size: 0.9em;
        border-bottom: 1px solid #e0e0e0;
    }

    /* El JS añade la clase 'active' al contenedor .dropdown para mostrar .dropdown-menu */
    .dropdown.active .dropdown-menu {
        display: block;
        /* Muestra el submenú cuando el JS lo activa en móvil */
        animation: slideDown 0.3s ease-out;
    }

    /* Rota la flecha para indicar que está abierto en móvil */
    .dropdown.active .dropdown-toggle::after {
        transform: rotate(180deg);
    }

    /* El .dropdown-toggle no debe tener un margen inferior grande */
    .nav a.dropdown-toggle {
        margin-bottom: 0;
    }

    /* Fin Dropdown Responsive */
    /* ========================================= */


    /* Definición de la animación (opcional, pero agradable) */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

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

    /* ========================================= */
    /* AJUSTES ESPECÍFICOS DE LA SECCIÓN HERO ✅ */
    /* ========================================= */

    /* 6. Altura y centrado del Hero */
    .hero {
        height: 70vh;
        /* Reduce la altura para que ocupe menos de la pantalla */
        min-height: 450px;
        /* Mínimo pero más pequeño */
    }

    .hero-content {
        /* Asegura el centrado vertical y horizontal */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        /* Limita el ancho del contenido para que no se desborde */
    }

    /* 7. Ajuste de imágenes para evitar desajustes */
    .slide-image {
        object-fit: cover;
        /* Asegura que la imagen cubra el contenedor sin distorsión */
    }

    /* 8. Ajuste de Botones (CTA) en el Hero (más pequeños y apilados) */
    .btn {
        padding: 10px 20px;
        /* Reduce el padding para botones más pequeños */
        font-size: 0.9rem;
        /* Reduce el tamaño de la fuente del botón */
        margin: 8px auto;
        /* Margen reducido y centrado */
        display: block;
        /* Hace que los botones se apilen para una mejor experiencia táctil */
        width: 90%;
        /* Ocupa casi todo el ancho disponible */
    }

    /* 9. Estilos para la marquesina */
    .hero-content .pe-marquee {
        font-size: 2.5rem;
    }

    .hero-content .pe-marquee .seperator {
        margin: 0 15px;
        height: 1em;
        width: 1em;
    }

    /* Ajuste para que la animación de la marquesina sea más rápida en móvil */
    .hero-content .pe-marquee .marquee-inner {
        animation-duration: 10s;
    }

    /* Otros ajustes responsive de secciones... */

    .mission-points {
        flex-direction: column;
    }

    /* ========================================= */
    /* AJUSTE ESPECÍFICO DEL BOTÓN SECUNDARIO EN HERO */
    /* ========================================= */

    .hero-content .secondary-btn {
        /* Fondo Claro (Usando el color principal del tema) */
        background-color: var(--primary-color);

        /* Texto Oscuro para contraste */
        color: var(--text-light);

        /* Asegurar que no tenga un borde que no se vea bien */
        border: none;
    }

    .hero-content .secondary-btn:hover {
        /* Usamos el color de acento (gris medio) al pasar el ratón */
        background-color: var(--secondary-color);

        /* Mantiene el texto oscuro */
        color: var(--text-light);

        /* Mantiene el efecto de elevación si lo tienes definido en el .btn global */
        transform: translateY(-2px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

    /* ----------------------------------------- */
    /* RESPONSIVIDAD ESPECÍFICA PARA LA GALERÍA */
    /* ----------------------------------------- */
    .slider-grid {
        grid-template-columns: 1fr;
        /* Una sola columna en móvil */
    }

    /* ---------------------------------------------------- */
    /* AJUSTE WHATSAPP FLOTANTE EN MÓVIL (Bajo 992px) */
    /* ---------------------------------------------------- */
    .whatsapp-float {
        min-width: 130px;
        /* Ancho mínimo ajustado */
        height: 45px;
        /* Altura más pequeña en móvil */
        bottom: 20px;
        right: 20px;
        font-size: 0.8rem;
        padding: 0 15px;
        /* Relleno ajustado */
    }

    .whatsapp-float i {
        font-size: 20px;
        margin-right: 8px;
    }

    /* ---------------------------------------------------- */
    /* AJUSTE ESPECÍFICO CARRUSEL DE EVENTOS EN MÓVIL/TABLET */
    /* ---------------------------------------------------- */
    .events-section .events-carousel {
        /* Ajusta el ancho máximo del contenedor para móviles si es necesario */
        max-width: 450px;
    }

    /* En pantallas pequeñas, mostramos solo 1 recuadro por deslizamiento */
    .events-section .events-carousel .carousel-item {
        width: 100%;
        /* Ocupa el ancho total para mostrar 1 a la vez */
        padding: 0 5px;
    }

    .events-section .events-carousel .carousel-item img {
        height: 450px;
        /* Altura más pequeña en móvil */
    }
}