body {
    background-color: #1f2018; /* anterior #2c3114 */
    color: rgb(255, 255, 255); /* Cambia el color del texto si lo necesitas */
}
/* Asegurarse de que el body ocupe al menos el 100% de la altura de la página */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* El contenido principal debe crecer para ocupar el espacio disponible */
#principal {
    flex: 1;
}

.language-menu {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.language-item {
    display: inline-block;
    margin-left: 5px; /* Ajusta el espacio entre íconos */
}


/* Contenedor del video */
.video-background {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

/* Estilos para el video */
.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Contenedor de texto flotante */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;
    z-index: 2;
}

/* Estilos adicionales para el texto */
.overlay-text h1 {
    font-size: 3em;
    margin: 0;
}

.overlay-text p {
    font-size: 1.5em;
    margin: 0.5em 0;
}

/* Imagen flotante */
.overlay-text .overlay-image {
    width: 150px; /* Ajusta el tamaño de la imagen según tus necesidades */
    margin-bottom: 1em; /* Espacio entre la imagen y el texto */
}



/* Cambiar el color del icono SVG */
a svg {
    fill: #32a836; /* Cambia este valor al color que quieras, aquí es el azul de Facebook */
}

/* O si prefieres cambiar el color cuando se pasa el mouse */
a:hover svg {
    fill: #196b19; /* Cambia a rojo cuando se pasa el mouse, por ejemplo */
}

/* Estilo general para todos los enlaces */
a {
    color: #ffffff; /* Cambia el color del enlace (en este caso un gris oscuro) */
    text-decoration: none; /* Elimina el subrayado predeterminado */
}

/* Estilo para los enlaces cuando pasas el mouse por encima */
a:hover {
    color: #0077b5; /* Cambia el color cuando el usuario pasa el mouse (azul en este ejemplo) */
    text-decoration: underline; /* Puedes agregar un subrayado cuando el mouse está sobre el enlace */
}

/* Opcional: estilo cuando se hace clic en el enlace */
a:active {
    color: #ff0000; /* Cambia el color cuando el enlace está activo (rojo en este ejemplo) */
}
/* Estilo básico del botón */
.btn {
    background-color: #0077b5; /* Color de fondo azul */
    color: white; /* Color del texto blanco */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Espaciado interno (padding) */
    font-size: 16px; /* Tamaño de fuente */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a un puntero cuando pasas el mouse */
    transition: background-color 0.3s ease; /* Transición suave del color de fondo */
}

/* Cambiar el estilo cuando pasas el mouse sobre el botón */
.btn:hover {
    background-color: #005f8d; /* Cambia el color de fondo al pasar el mouse (más oscuro) */
}

/* Cambiar el estilo cuando haces clic en el botón (botón activo) */
.btn:active {
    background-color: #004c73; /* Color aún más oscuro al hacer clic */
}


/* Estilos para el brochure */
.brochure {
   /* background-color: #2c3114;*/
    padding: 20px;
   /* color: #000000; /* Color de letra actualizado #c7cca1 */
    font-size: 20px;
    line-height: 1.6;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.brochure h2 {
    text-align: center;
  /*  color: #000000; /* Color de letra actualizado */
    font-size: 24px;
    margin-bottom: 10px;
}

.brochure h3 {
    text-align: center; /* Centrar los subtítulos */
    color: #ffffff; /* Color de letra actualizado */
    margin-top: 20px;
    font-size: 22px;
    text-transform: uppercase;
}

/*
.brochure p {
    color: #000000; /* Color de letra actualizado 
}*/

.brochure p strong {
    color: #b9a12a; /* Color para las horas */
    font-weight: bold;
}

.brochure .cost {
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
    color: #b9a12a;
}

.brochure .tiempo {
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
    color: #c3d252;
}



/* Estructura en dos columnas */
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.column {
    flex: 1;
    padding: 10px;
}

.column p {
    margin: 0;
}

.img-column {
    width: 100%;
    height: auto;
    max-width: 150px; /* Ajusta el tamaño máximo de la imagen según tus preferencias */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Estilos generales para el footer */
.footer h3 {
    font-size: 1.5em; /* Tamaño de fuente para títulos en pantallas grandes */
}

.footer p, .footer a {
    font-size: 1em; /* Tamaño de fuente para texto en pantallas grandes */
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .footer h3 {
        font-size: 1.2em; /* Tamaño de fuente reducido para títulos en pantallas pequeñas */
    }

    .footer p, .footer a {
        font-size: 0.9em; /* Tamaño de fuente reducido para texto en pantallas pequeñas */
    }
}


@media (max-width: 768px) {
    #reservasForm {
        margin-top: 20px; /* Ajusta el valor según lo necesites */
    }
}

.titu {
    text-align: center; /* Centrar el texto horizontalmente */
    color: #FBCA08; /* Color amarillo claro */
}

#advertisement {
    position: fixed;
    top: 60%; /* Ajusta este valor para cambiar la altura desde la parte superior */
    right: 20px; /* Ajusta este valor para la distancia del borde derecho */
    background-color: #1f2018; /* Fondo semitransparente opcional */
    padding: 5px;
    border-radius: 8px;
    border: 4px solid #1f2018;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Asegura que esté encima de otros elementos */
    max-width: 120px; /* Ajusta este valor según lo necesites */
}

#advertisement img {
    display: block;
    max-width: 120px; /* Ajusta el tamaño de la imagen */
    height: auto;
}

#close-ad {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 16px;
    cursor: pointer;
    color: #333;
   /* background: #fff;*/
    border-radius: 50%;
    padding: 2px 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
}


.centroh {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
}

.cuadro3 {
    width: 90%;
    max-width: 800px;
    height: auto; /* Permite que la altura se adapte al contenido */
    background-color: rgb(255, 255, 255); 
    /*color: #2a2e1981 !important;*/
    clip-path: none;
    padding: 40px 40px 5px; 
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border: 4px solid rgb(0, 0, 0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row; /* Texto e imágenes lado a lado en pantallas grandes */
    text-align: center;
}

.cuadro {
    width: 95%;
    max-width: 800px;
    height: auto; /* Permite que la altura se adapte al contenido */
    background-color: #2a2e19; 
    color: #ffffff !important;
    clip-path: none;
    padding: 40px 10px 5px; 
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border: 4px solid rgb(255, 255, 255);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row; /* Texto e imágenes lado a lado en pantallas grandes */
    text-align: center;
}

.cuadrocoment {
    width: 90%;
    max-width: 800px;
    height: auto; /* Permite que la altura se adapte al contenido */
    /*background-color: #2a2e19; */
    /*color: #ffffff !important;*/
    clip-path: none;
    padding: 40px 40px 5px; 
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    /*border: 4px solid rgb(255, 255, 255);*/
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row; /* Texto e imágenes lado a lado en pantallas grandes */
    text-align: center;
}

.cuadroalerta {
    width: 45%;
    height: auto; /* Permite que la altura se adapte al contenido */
    background-color: rgba(247, 0, 0, 0.575); 
    clip-path: none;
    padding: 20px; 
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row; /* Texto e imágenes lado a lado en pantallas grandes */
    text-align: center;
}

.cuadropaypal {
    width: auto;
    max-width: 600px;
    height: auto; /* Permite que la altura se adapte al contenido */
    background-color: rgba(226, 230, 9, 0.89); 
    clip-path: none;
    padding: 20px; 
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
   flex-direction: row; /* Texto e imágenes lado a lado en pantallas grandes */
    text-align: center;
}

.coltxtleft {
    text-align: justify; /* Justificación del texto */
    hyphens: auto; /* Activa la guionización */
    word-break: break-word; /* Permite romper las palabras largas si es necesario */
    line-height: 1.4; /* Espaciado entre líneas */
    margin-bottom: 0; /* Elimina margen extra */
    padding-bottom: 0; /* Elimina relleno extra */
    padding: 10px
}


.colimg2 img {
    /*display: flex;
    justify-content: center; /* Centra horizontalmente */
    object-fit: cover; /* Ajusta la imagen sin distorsionar*/ 
    object-position: center; /* Centra la imagen horizontal y verticalmente*/ 
    height: 100%; /* Altura completa del contenedor */
    width: 100%; /* Ancho completo del contenedor */
    max-width: 180px;
    border-radius: 10px; /* Bordes redondeados */
    /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.281);*/
}


.colimg img {
    object-fit: cover; /* Ajusta la imagen sin distorsionar */
    object-position: center; /* Centra la imagen horizontal y verticalmente */
    height: auto;
    width: 100%; /* Ancho completo del contenedor */
    max-width: 200px; /* Ancho máximo */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    border: 6px solid white; /* Borde blanco para simular las fotos antiguas */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4); /* Sombra para el efecto 3D */
    transform: rotate(-5deg); /* Inclinación inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves */
}

.colimg img:hover {
    transform: rotate(0deg) scale(1.15); /* Se endereza y amplía ligeramente al pasar el ratón */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6); /* Sombra más pronunciada al hacer hover */
}


.colimgh img {
    object-fit: cover; /* Ajusta la imagen sin distorsionar */
    object-position: center; /* Centra la imagen horizontal y verticalmente */
    height: auto;
    width: 100%; /* Ancho completo del contenedor */
    max-width: 320px; /* Ancho máximo */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    border: 6px solid white; /* Borde blanco para simular las fotos antiguas */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4); /* Sombra para el efecto 3D */
    transform: rotate(-5deg); /* Inclinación inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves */
}

.colimgh img:hover {
    transform: rotate(0deg) scale(1.15); /* Se endereza y amplía ligeramente al pasar el ratón */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6); /* Sombra más pronunciada al hacer hover */
}


.modal-dialog {
    max-width: 500px;
}
.modal-body {
    text-align: center;
}


.card-body {
    color: #000000; /* Cambia a tu color deseado */
}

.card-footer{
    color: #000000;
}





    /* Estilo general para la galería */
    .galeria-card {
        /*background-color: #1f2018; /* Fondo claro para las tarjetas */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
       /* border: 1px solid #ddd; /* Borde gris claro */
        border-radius: 10px; /* Bordes redondeados */
        overflow: hidden; /* Evita que el contenido desborde los bordes */
       /* transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación suave al hacer hover */
        text-align: center;
        width: 100%; /* Asegura que las tarjetas ocupen el ancho permitido */
    }

    .galeria-card:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover */
    }

    .galeria-card-img {
        width: 100%; /* Asegura que la imagen ocupe todo el ancho del card */
        height: 200px; /* Altura fija para mantener un diseño uniforme */
        object-fit: contain; /* Mantiene las proporciones de la imagen sin recortarla */
       /* background-color: #fff; /* Fondo blanco para destacar la imagen si no ocupa todo el espacio */
        padding: 5px; /* Añade un pequeño relleno para separar la imagen de los bordes */
    }

    .galeria-card-body {
        padding: 15px; /* Espaciado interno */
    }

    .galeria-card-title {
        color: #b9a12a; /* Color oscuro para el título */
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 18px;
    }

    .galeria-card-text {
        color: #ffffff; 
        font-size: 14px;
        line-height: 1.5;
    }


   
    /* Botón flotante para cerrar el modal */
    .modal-content .btn-close {
        position: absolute;
        top: -35px; /* Ajusta la distancia desde la parte superior */
        right: -20px; /* Ajusta la distancia desde la parte derecha */
        z-index: 1050; /* Asegura que esté encima del contenido */
        background-color: white; /* Fondo blanco */
        border-radius: 50%; /* Hace que el fondo sea circular */
        width: 30px; /* Ancho del círculo */
        height: 30px; /* Alto del círculo */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave */
    }

    /* Cambiar el color del icono al pasar el mouse */
    .modal-content .btn-close:hover {
        background-color: #f0f0f0; /* Fondo gris claro al hacer hover */
        transform: scale(1.1); /* Agranda ligeramente el botón al pasar el mouse */
        transition: all 0.3s ease; /* Suaviza la animación */
    }

    .modal-content .btn-close svg {
        width: 16px; /* Ajusta el tamaño del icono "X" */
        height: 16px;
        fill: #333; /* Color oscuro para la "X" */
    }

/* ///////////////////////////////////////// */

#nosotros {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .nosotros-container {
    max-width: 300px;
    margin: auto;
  }
  
  .nosotros-title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: rgb(18, 74, 127);
  }
  
  .nosotros-foto-container {
    width: 150px;
    height: 150px;
    border: 4px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
  }
  
  .nosotros-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .nosotros-nombre {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0;
  }
  
  .nosotros-cargo {
    font-size: 1.2rem;
    color: gray;
    margin: 0;
  }