body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #fff;
}



/* Menú invisible */
.navbar {
    display: flex;
    justify-content: center;
    background-color: transparent;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
    align-items: center;
}


.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    margin: 0 10px;
    background-color: transparent;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.navbar a:hover {
    background-color: #3d1e76;
    color: white;
}

/* Menú hamburguesa */
.navbar .menu {
    display: flex;
}

.navbar .menu a {
    display: block;
}

.navbar .menu-icon {
    display: none;
    font-size: 30px;
    cursor: pointer;
    margin-left: auto;
}

#slider .slider-btn {
    display: none; /* Oculta las flechas */
}




.gallery img:hover {
    transform: scale(1.05);
    /* Pequeño efecto de zoom */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}

/* Slider para pantallas pequeñas */
.slider-container {
    display: none;
    /* Ocultar en pantallas grandes */
    position: relative;
    width: 100%;
    /* Ajusta el ancho para centrar el slider */
    margin: 0 auto;

    border-radius: 10px;
}



.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.slide.active {
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;
}

.slide img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Botones del slider */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    padding: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    border-radius: 50%;
    z-index: 10;
}

.prev {
    left: 15px;
}

.next {
    right: 15px;
}

/* Estilo para pantallas grandes */
/* Estilo para el slider */
/* Estilo para el slider */
 .section-title {
    text-align: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;

}

.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: #ff6600;
    margin: 10px auto 0;
    border-radius: 2px;
} 

/* Estilo para el slider */
#slider2 {
    top: auto;
    position: relative; /* Para posicionar los slides */
    overflow: hidden; /* Ocultar el desbordamiento */
    width: 100%; /* Asegurarse de que el slider ocupe todo el ancho */
}

/* Estilo para cada slide */
.slide {
    display: none; /* Ocultar todos los slides por defecto */
    width: 100%; /* Cada slide ocupa el 100% del contenedor */
}

/* Mostrar el slide activo */
.slide.active {
    display: block; /* Solo mostrar el slide activo */
}

/* Estilo para pantallas grandes */
@media (min-width: 769px) {
    .slide {
        display: none; /* Asegurarse de que no se muestren en fila */
    }

    .slide.active {
        display: block; /* Solo mostrar el slide activo */
    }
}



/* Estilos Responsivos */
@media (max-width: 768px) {
    .gallery-container {
        display: none;
        /* Ocultar galería en pantallas pequeñas */
    }

    .slider-container {
        display: block;
        /* Mostrar slider en pantallas pequeñas */
    }
}



/* Estilo del menú en pantallas pequeñas */
@media (max-width: 768px) {
    .navbar .menu {
        display: none;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        z-index: 999;
    }


    .navbar .menu a {
        padding: 15px;
        font-size: 20px;
    }

    .navbar .menu.active {
        display: flex;
    }

    .navbar .menu-icon {
        display: block;
    }

    #slider .section {
        min-height: 300px;
        /* Ajustamos el alto del slider para pantallas pequeñas */
    }

    #upcoming-events .slider {
        flex-direction: column;
    }

    .slider .slide {
        width: 100%;
    }

    #video-section h2 {
        font-size: 1.5em;
        /* Reducimos el tamaño del título */
    }

    #reservation-section h2 {
        font-size: 1.8em;
        /* Reducimos el tamaño del título */
    }

    .form-group input,
    .form-group textarea {
        font-size: 0.9em;
        /* Reducimos el tamaño de los inputs */
    }

    button {
        font-size: 1em;
        /* Reducimos el tamaño del botón */
    }

    .gallery {
        grid-template-columns: repeat(2,
                1fr);
        /* Para pantallas pequeñas, mostramos 2 imágenes por fila */
    }

    iframe {
        width: 100%;
        /* Hacemos el iframe completamente responsivo */
        height: auto;
        /* Ajustamos la altura del mapa */
    }

    .form-container {
        padding: 10px;
        /* Reduce el padding en pantallas pequeñas */
    }

    input,
    textarea,
    button {
        font-size: 14px;
        /* Ajusta tamaño de texto para pantallas pequeñas */
    }

    h2 {
        font-size: 18px;
        /* Ajusta el título para pantallas pequeñas */
    }
}

/* Resto de los estilos */
.section {
    justify-content: center;
    align-items: center;
    height: 110vh;
    /* Cada sección ocupa la altura de la ventana */
    margin: 0;
    /* Elimina márgenes por defecto */
    padding: 0;
    /* Elimina padding por defecto */
    text-align: center;
    padding: 20px;
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

h2 {
    margin-bottom: 10px;
}

.map-container {
    margin: 50px;
    text-align: center;
}

iframe {
    border: 0;
    border-radius: 8px;
    width: 100%;
    max-width: 800px;
    height: 400px;
}

.featured-event {
    position: relative;
}

.featured-event img,
.featured-event video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(61, 30, 118, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: #5c3383;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4,
            1fr);
    /* 4 imágenes por fila en pantallas grandes */
    gap: 10px;
    padding: 0 40px;
}

.gallery img {
    width: 100%;
    height: auto;
    /* Mantiene la relación de aspecto */
    border-radius: 10px;
    object-fit: cover;
    /* Asegura que la imagen cubra el área sin distorsionarse */
}


#slider {
    position: relative;
    background-image: url("../src/images/1.png");
    background-size: cover;
    /* Asegura que la imagen cubra todo el contenedor */
    background-position: center;
    /* Centra la imagen */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    min-height: 500px;
    /* Altura mínima para pantallas más grandes */
    height: 50vh;
    /* Altura relativa para que se ajuste en pantallas más pequeñas */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin-bottom: -100px;
    /* Superposición */
}

#upcoming-events {
    position: relative;
    background-image: url("../src/images/2.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px;
    display: flex;
    flex-direction: column; /* Apilar elementos verticalmente */
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 60px 20px;
    z-index: 2;
    margin-top: -100px;
}
.large-gallery {
    display: none; /* Ocultar por defecto */
}
.event-gallery { /* Cambiado de gallery a event-gallery */
    display: flex; /* Mostrar las imágenes en fila */
    justify-content: center; /* Centrar las imágenes */
    flex-wrap: wrap; /* Permitir que las imágenes se envuelvan */
    gap: 10px; /* Espacio entre las imágenes */
}

/* Estilo para las imágenes en la galería */
.event-gallery img {
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    max-width: 500px; /* Ancho máximo para las imágenes */
    height: auto; /* Mantiene la relación de aspecto */
    border-radius: 10px; /* Bordes redondeados para las imágenes */
}
@media (min-width: 769px) {
    .large-gallery {
        display: block; /* Mostrar la galería en pantallas grandes */
    }
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
    .slider {
        margin-top: 20px;
        /* Ajusta el margen superior del slider en pantallas pequeñas */
    }
}



.slider {
    display: flex;
    justify-content: center;
    /* Centra las imágenes en el slider */
    width: 80%;
    /* Ajusta el ancho del slider */
    overflow: hidden;
    /* Oculta las partes de las imágenes que sobresalen */
    margin: 0 auto;
    /* Centra el slider en la página */
    border-radius: 8px;
    /* Bordes redondeados */
    position: relative;
}

.slider .slide {
    flex: 0 0 100%;
    /* Cada slide ocupa el 100% del contenedor del slider */
    display: none;
    /* Oculta todas las slides por defecto */
    justify-content: space-between;
    /* Espacio entre las imágenes */
}

.slider .slide.active {
    display: flex;
    /* Muestra solo la slide activa */
}

.slider img {
    width: 30%;
    /* Asegura que cada imagen ocupe un tercio del slide */
    height: auto;
    /* Mantiene la relación de aspecto de la imagen */
    object-fit: cover;
    /* Cubre el área del slide sin distorsionar la imagen */
    border-radius: 20px;
    /* Bordes redondeados para las imágenes */
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
    .slider img {
        width: 100%;
        /* Cada imagen ocupa el 100% del slide */
    }

    .slider .slide {
        flex: 0 0 100%;
        /* Cada slide ocupa el 100% del contenedor */
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    font-size: 24px;
    transition: background-color 0.3s ease;
}

.prev {
    left: 15px;
}

.next {
    right: 15px;
}

.slider-btn:hover {
    background-color: transparent;
}

.slide {
    display: none;
    /* Oculta todas las slides por defecto */
}

.slide.active {
    display: block;
    /* Muestra solo la slide activa */
}

#video-section {
    height: 70%;
    background-image: url("../src/images/3.png");
    background-size: cover;
    /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-position: center;
    /* Centra la imagen */

    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 60px 20px;
    z-index: 2;
    margin-top: -100px;
    /* Superposición */
}



.featured-video video {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
    border: 3px solid #3d1e76;
}

.featured-video {
    display: flex;
    justify-content: center;
    align-items: center;
}

#reservation-section {
    background-color: #222;
    /* Fondo oscuro */
    color: #fff;
    /* Color del texto */
    padding: 60px 20px;
    text-align: center;
    border-radius: 8px;
    /* Bordes redondeados */
}

#reservation-section h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: #9b59b6;
    /* Color morado para el título */
}

.form-container {
    max-width: 600px;
    /* Ancho máximo del formulario */
    margin: 0 auto;
    /* Centra el formulario horizontalmente */
    background-color: #333;
    /* Fondo del contenedor del formulario */
    padding: 20px;
    /* Espaciado interno */
    border-radius: 8px;
    /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* Sombra para efecto de profundidad */
}

.form-group {
    margin-bottom: 30px;
    text-align: left;
}

.form-group label {
    font-size: 1.1em;
    display: block;
    margin-bottom: 5px;
    color: #9b59b6;
    /* Color morado para las etiquetas */
}

.form-group input,
.form-group textarea {
    width: 87%;
    /* Cada grupo ocupa todo el ancho */
    max-width: 500px;
    /* Ancho máximo para inputs y textarea */
    margin-bottom: 15px;
    padding: 10px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #9b59b6;
    /* Borde morado */
    background-color: #222;
    /* Fondo de los inputs */
    color: #fff;
    /* Color del texto en los inputs */
    display: flex;
    flex-direction: column;
    /* Asegura que label e input estén apilados */
}

button {
    background-color: #9b59b6;
    /* Fondo morado para el botón */
    color: white;
    padding: 15px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #8e44ad;
    /* Morado más oscuro al pasar el mouse */
}

footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

footer a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #3d1e76;
}

#gallery {
    display: flex;
    /* Usar flexbox para centrar el contenido */
    flex-direction: column;
    /* Asegura que los elementos se apilen verticalmente */
    align-items: center;
    /* Centra los elementos horizontalmente */
    justify-content: center;
    /* Centra los elementos verticalmente */
    margin: 20px 0;
    /* Añade margen arriba y abajo */
    padding: 20px;
    height: 50%;
    /* Añade padding interno si es necesario */
}