/* Estilos específicos para la página de reservas */
.reservas-section {
    background-image: url('FondoReservas2.PNG');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 5%;
    box-sizing: border-box;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.reservas-section h1 {
    font-size: 4em;
    margin-bottom: 20px; /* Reducido un poco para dar espacio a los idiomas */
    color: white;
    line-height: 1.1;
    font-weight: 700;
    text-align: left;
    width: 100%;
    max-width: 900px;
}

/* Estilos para el selector de idioma */
.language-selector {
    display: flex;
    gap: 15px; /* Espacio entre los idiomas */
    margin-bottom: 30px; /* Espacio debajo de los idiomas y antes del iframe */
    font-size: 1.2em;
    width: 100%;
    max-width: 900px; /* Alineado con el h1 */
    justify-content: flex-start; /* Alineado a la izquierda */
}

.language-selector a {
    color: rgba(255, 255, 255, 0.7); /* Color por defecto, un poco transparente */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.language-selector a:hover {
    color: white; /* Blanco sólido al pasar el mouse */
}

.language-selector a.active {
    color: white; /* Blanco sólido para el idioma activo */
    text-decoration: underline; /* Subrayado para el idioma activo */
    pointer-events: none; /* No permite clic si ya está activo */
}

.reservas-iframe-wrapper { /* Contenedor para el centrado del iframe */
    width: 100%; /* Ocupa todo el ancho disponible */
    display: flex;
    justify-content: center; /* Centra el iframe horizontalmente */
    align-items: center; /* Centra verticalmente si el wrapper tiene una altura definida */
}

.reservas-iframe-container {
    width: 90%;
    max-width: 1000px;
    height: 60vh; /* **MODIFICADO: Altura reducida de 70vh a 60vh** */
    border: none;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.7); /* Fondo negro oscuro semi-transparente */
    padding: 20px; /* Añade un padding interno para el iframe */
    box-sizing: border-box; /* Incluye el padding en el ancho/alto total */
}

.reservas-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent; /* Asegura que el iframe en sí no tenga un fondo blanco */
}

/* NUEVOS ESTILOS para el separador con imagen */
.reservas-image-separator {
    width: 100%;
    height: 150px; /* Define la altura de la separación que ocupará la imagen */
    background-image: url('reserva-separator.jpg'); /* Ruta de tu imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -10px; /* Ajusta este valor si necesitas que se superponga o se separe un poco más del iframe */
    margin-bottom: -10px; /* Ajusta este valor si necesitas que se superponga o se separe un poco más del footer */
}


/* Estilos para el logo y el div al final de la página de reservas */
.reservas-footer-logo {
    background-color: #f7f2ea; /* Color de fondo de la sección 6 de index.html */
    padding: 60px 20px; /* Aumentado el padding para hacer el div más grande */
    display: flex;
    flex-direction: column; /* Cambiado a columna para apilar el logo y los enlaces */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */
    text-align: center; /* Asegura que el texto dentro del div se centre si no es flex */
}

.sagardi-footer-large-logo { /* Nueva clase para el logo más grande */
    width: 250px; /* Tamaño del logo, ajustado para ser más grande */
    height: auto;
    display: block; /* Asegura que la imagen se comporte como un bloque para el centrado */
    margin-bottom: 30px; /* Espacio entre el logo y los enlaces */
}

/* Estilos para los enlaces dinámicos del footer */
.dynamic-footer-links {
    color: #333; /* Color de texto base para el contenedor */
    font-size: 1.1em;
    font-weight: bold;
    display: flex; /* Para controlar el espaciado y centrado de los enlaces internos */
    gap: 0; /* Reinicia el gap para controlar el espaciado con padding en los 'a' */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: center; /* Centra los enlaces horizontalmente */
    align-items: center; /* Alinea los ítems verticalmente */
}

.dynamic-footer-links a {
    color: #333; /* Color de texto para los enlaces */
    text-decoration: none; /* Elimina el subrayado por defecto */
    padding: 0 7px; /* Espacio alrededor de cada enlace */
    transition: color 0.3s ease; /* Suaviza el cambio de color */
}

.dynamic-footer-links a:hover {
    color: #666; /* Un color ligeramente más claro al pasar el ratón */
}

.dynamic-footer-links span {
    color: #333; /* Asegura que los separadores también sean del color del texto */
    white-space: nowrap; /* Evita que los "|" se separen de las palabras */
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .reservas-section {
        padding: 20px 3%;
    }
    .reservas-section h1 {
        font-size: 3em;
    }
    .language-selector {
        font-size: 1.1em;
        margin-bottom: 20px;
    }
    .reservas-iframe-container {
        width: 95%;
        height: 55vh; /* **MODIFICADO: Altura reducida para tabletas** */
        padding: 15px;
    }
    .reservas-image-separator {
        height: 100px;
    }
    .reservas-footer-logo {
        padding: 40px 15px;
    }
    .sagardi-footer-large-logo {
        width: 200px;
        margin-bottom: 20px;
    }
    .dynamic-footer-links {
        font-size: 1em;
    }
    .dynamic-footer-links a {
        padding: 0 5px;
    }
}

@media (max-width: 480px) {
    .reservas-section {
        padding: 15px 2%;
    }
    .reservas-section h1 {
        font-size: 2.5em;
        margin-bottom: 15px;
    }
    .language-selector {
        font-size: 1em;
        gap: 10px;
        margin-bottom: 15px;
    }
    .reservas-iframe-container {
        width: 98%;
        height: 45vh; /* **MODIFICADO: Altura reducida para móviles pequeños** */
        padding: 10px;
    }
    .reservas-image-separator {
        height: 70px;
    }
    .reservas-footer-logo {
        padding: 30px 10px;
    }
    .sagardi-footer-large-logo {
        width: 150px;
        margin-bottom: 15px;
    }
    .dynamic-footer-links {
        font-size: 0.9em;
    }
    .dynamic-footer-links a {
        padding: 0 4px;
    }
}

.header-logo {
    max-width: 250px; /* Ajusta este valor para hacer el logo más pequeño o más grande */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Para centrar la imagen si es necesario y evitar espacio extra */
    margin: 20px auto 10px auto; /* Ajusta el margen si es necesario (arriba, derecha, abajo, izquierda) */
}

.logo-link {
    text-align: center; /* Centra el enlace que contiene la imagen */
    display: block; /* Hace que el enlace ocupe todo el ancho para que el text-align funcione */
}