* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Cinzel';
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

html {
    overflow-y: scroll;
}

body {
    display: flex;
    flex-direction: column;
}



main {
    flex: 1; /* Ocupa todo el espacio restante */
}

/* Estilos para el navbar */
header .logo img {
    max-height: 70px; 
    margin-left: 90px;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #C0CEDD;
    color: #000000;
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: 'Cinzel';
    width: 100%;
}

.nav-links {
    list-style: none;
    display: flex;
    margin-right: 250px;
    align-items: center;
    margin-top: 15px;
}

.nav-links li {
    margin-left: 100px;
}

.nav-links a {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #ddd;
}



/* Estilos del menú hamburguesa */
.menu-toggle {
    display: flex; /* Mostrar los elementos en columna */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 40px;
    display: none;
}


.menu-toggle .bar {
    background-color: #000;
    height: 4px;
    width: 25px;
    margin: 3px 0;
    transition: all 0.3s ease;
}
/* Estilo para el texto "Menú" */
.menu-toggle .menu-text {
    margin-top: 8px;
    font-size: 10px;
    color: #000;
    text-transform: uppercase; /* Convertir el texto a mayúsculas */
    font-family: 'Cinzel', serif;
}

/* Ocultar el botón de cerrar inicialmente */
.close-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.close-menu .close-icon {
    font-size: 24px;
    font-weight: bold;
    color: #000;
}

.close-menu .close-text {
    margin-top: 5px;
    font-size: 14px;
    color: #000;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
}


/* Ocultar el checkbox */
.menu-checkbox {
    display: none;
}

/* Estilo del botón de menú hamburguesa */
.menu-button {
    display: none; /* Oculto en pantallas grandes */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 30px;
    padding: 10px;
}





/* Contenido principal */
.contenido-main {
    margin-top: -25px; /* Para evitar que el contenido quede cubierto por la barra */
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px); /* Resta la altura de la barra */
    text-align: center;
    flex-direction: column;
}

.cabecera {
    margin-top: 50px;

    text-align: center;
}


/*---FORMULARIO CONTACTO----------*/
/*----PROPIEDADES DEL FORMULARIO----*/

.forum-container {
    max-width: 700px;
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    margin: 40px auto 80px auto; /* Centra el contenedor horizontalmente */
}

h1 {
    text-align: left;
    color: #2d3436;
}

.form-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

label {
    display: flex;
}

/*----PROPIEDADES DEL ÁREA DE TEXTO DEL FORM----*/

textarea { 
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #dfe6e9;
    resize: vertical;
    margin-bottom: 10px;
    font-size: 1em;
    height: 100px; /* Altura predeterminada */
    max-height: 200px; /* Altura máxima */
    min-height: 100px;
}

/*----BOTON ENVIAR----*/

button {
    padding: 10px;
    font-size: 1em;
    border: none;
    color: #ffffff;
    background-color: #0984e3;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.message-board {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message, .reply {
    border: 1px solid #dfe6e9;
    padding: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    margin-left: 0;
}

.message:hover, .reply:hover {
    transform: scale(1.02);
}

.reply {
    background-color: #dfe6e9;
    margin-top: 10px;
    width: 100%;
}

.reply-btn {
    margin-top: 10px;
    padding: 5px;
    font-size: 0.8em;
    color: #0984e3;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.form-container label,
.reply label {
    font-weight: bold;
}

.form-container input[type="text"],
.reply input[type="text"] {
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid #dfe6e9;
    border-radius: 5px;
}

/* ------RESERVAS ------------------- */
section {
    display: flex;
    justify-content: space-between; /* Coloca los elementos a los extremos */
    margin: 190px auto 382px auto; /* Centra horizontalmente el section */
    gap: 90px; /* Espacio entre los contenedores */
    margin-bottom: 100px;
}

.container1, .container2 {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    text-align: center;
}


.container1 {
    margin-right: auto; /* Alinea a la izquierda */
}

.container2 {
    margin-left: auto; /* Alinea a la derecha */
}

.cabecera1 {
    position: absolute;
    top: 0; /* Coloca la cabecera en la parte superior */
    left: 47%; /* Coloca la cabecera en el centro horizontal */
    transform: translateX(-50%); /* Ajusta para que esté centrado correctamente */
    z-index: 10; /* Asegura que esté por encima de los demás elementos */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 145px;
    margin-left: -200px;
    width: 400px;
}

.cabecera2 {
    position: absolute;
    top: 0; /* Coloca la cabecera en la parte superior */
    left: 50%; /* Coloca la cabecera en el centro horizontal */
    transform: translateX(-50%); /* Ajusta para que esté centrado correctamente */
    z-index: 10; /* Asegura que esté por encima de los demás elementos */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 145px;
    margin-left: 330px;
    width: 450px;
}



form {
    display: flex; /* Flex layout para organizar los elementos dentro del formulario */
    flex-direction: column; /* Coloca los elementos en una columna */
    text-align: left; /* Alinea el texto a la izquierda */
}

.form-group, .checkbox-group, .result {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    text-align: left; /* Alinea el texto a la izquierda */
}

textarea {
    width: 100%; /* Hace que ocupe todo el ancho disponible del contenedor */
    max-width: 800px; /* Máximo ancho que puede alcanzar */
    height: 100px; /* Altura predeterminada */
    max-height: 200px; /* Altura máxima */
    min-height: 100px; /* Altura mínima */
    resize: vertical; /* Permite al usuario ajustar la altura, pero no el ancho */
    box-sizing: border-box; /* Asegura que padding y border no excedan el tamaño del contenedor */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px; /* Redondea las esquinas del borde */
    resize: none; /* Desactiva la opción de redimensionar */

}

.checkbox-group label {
    display: flex; /* Flex layout para alinear el texto y el checkbox */
    justify-content: space-between; /* Espacia el texto a la izquierda y el checkbox a la derecha */
    align-items: center; /* Alinea verticalmente los elementos al centro */
    margin-bottom: 10px; /* Espacio inferior entre cada opción */
    width: 100%; /* Ocupa todo el ancho del contenedor */
}

input[type="text"], input[type="email"], input[type="date"], input[type="time"], textarea {
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 10px; /* Espacio interno alrededor del contenido */
    margin: 10px 0; /* Espacio superior e inferior entre elementos */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 4px; /* Redondea las esquinas */
    box-sizing: border-box; /* Asegura que padding y border no excedan el tamaño del contenedor */
}

button {
    padding: 10px 20px; /* Espacio interno alrededor del botón */
    margin-top: 15px; /* Espacio superior para separar el botón de otros elementos */
    background-color: #007bff; /* Color de fondo azul */
    color: #fff; /* Color de texto blanco */
    border: none; /* Sin borde */
    border-radius: 4px; /* Redondea las esquinas */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
}


button:hover {
    background-color: #0056b3; /* Cambia el color de fondo cuando se pasa el ratón por encima */
}

#result h2 {
    margin-top: 20px; /* Espacio superior para separar el encabezado de otros elementos */
}

.hidden {
    display: none; /* Oculta el elemento */
}


/*CALCULADORA*/

.section2 {
    margin-left: 700px;
    margin-top: -1032px;
    margin-bottom: 100px;
}




/* Footer siempre en el fondo */
footer {
    font-family: 'Cinzel', serif;
    background-color: #C0CEDD;
    color: #000;
    padding: 20px;
    text-align: center;
    margin: 0;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-info {
    text-align: left;
    flex: 1;
    margin-left: -200px;
}

.footer-info p {
    margin: 5px 0;
}

.footer-info a {
    color: #007BFF;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer-info a:hover {
    color: #0056b3;
}

.footer-logo img {
    max-height: 80px;
    display: block;
    margin: 0 auto;
}

/* Footer responsivo */
@media (max-width: 768px) {
    .footer-container {
        display: flex;
        flex-direction: column; /* Colocar los elementos en columna */
        align-items: center; /* Centrar horizontalmente */
        gap: 20px; /* Espacio entre elementos */
        text-align: center; /* Alinear texto al centro */
        width: 90%;
    }

    .footer-info {
        text-align: center; /* Texto centrado */
        margin: 0; /* Eliminar márgenes adicionales */
        margin-bottom: 40px;
    }

    .footer-logo {
        margin-top: -50px;
    }
}





/* ---------MQ RESPONSIVE ELEMENTOS--------- */

/* Estilos responsivos para el header */
@media (max-width: 1342px) {
    .navbar {
        display: flex;
        flex-direction: row; /* Mantener el logo y el menú en una fila */
        justify-content: space-between; /* Logo a la izquierda y menú hamburguesa a la derecha */
        align-items: center; /* Centrar verticalmente */
        padding: 10px 20px;
        right: 0;
    }

    .logo {
        flex: 1; /* Ocupa el espacio necesario para alinear a la izquierda */
    }

    .menu-toggle {
        display: flex; /* Mostrar menú hamburguesa */
        justify-content: flex-end;
        flex-direction: column;
        cursor: pointer;
        text-align: left
    }

    .menu-toggle .bar {
        background-color: #000;
        height: 4px;
        width: 25px;
        margin: 3px 0;
        text-align: left
    }

    /* Texto debajo del menú hamburguesa */
    .menu-toggle .menu-text {
        margin-top: 5px;
        font-size: 14px;
        color: #000;
        text-transform: uppercase;
        font-family: 'Cinzel', serif;
    }

    /* Botón de cerrar: Oculto por defecto */
    .close-menu {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .close-menu .close-icon {
        font-size: 30px;
        font-weight: bold;
        color: #000;
        margin-right: 30px;
        margin-bottom: 0;

    }

    .close-menu .close-text {
        margin-top: 5px;
        font-size: 14px;
        color: #000;
        text-transform: uppercase;
        font-family: 'Cinzel', serif;
        margin-right: 30px;
    }

    .nav-links {
        display: none; /* Ocultar enlaces inicialmente */
        flex-direction: column;
        position: absolute;
        top: 60px; /* Justo debajo del navbar */
        left: 0;
        width: 100%;
        background-color: #C0CEDD;
        padding: 20px 0;
        z-index: 1000;
    }

    .nav-links.active {
        display: flex; /* Mostrar enlaces al activar el menú */
    }

    .nav-links.active ~ #close-menu {
        display: flex;
    }

    .nav-links.active ~ .menu-toggle {
        display: none;
    }

    .nav-links li {
        margin: 10px 0;
    }
    .nav-links a {
        padding: 10px; /* Añadir espacio interno para clics más cómodos */
        text-decoration: none;
        color: #000;
    }

    .nav-links a:hover {
        color: #eb0000; /* Cambiar color al pasar el mouse */
    }
}

@media (min-width: 1342px) {
    .menu-toggle {
        display: none !important; /* Forzar ocultar el menú hamburguesa */
    }

    .close-menu {
        display: none !important; /* Forzar ocultar el botón "Cerrar" */
    }

    .nav-links {
        display: flex !important; /* Forzar mostrar el menú horizontal */
        justify-content: flex-end;
        align-items: center;
        width: auto;
        background-color: transparent;
    }
}






/* ---- MQ RESPONSIVE --RESERVAS---- */
@media (max-width: 600px) {
    h1 {
        font-size: 1.2em;
        text-align: left;
        text-decoration: #000000;
    }
    
    .section2 {
        margin-left: 1px;
        width: 100%;
    }

    .section {
        margin-left: 110px;
        margin: 204px 1px 1100px;
        width: 100%;
    }
}




/*MAIN RESERVAS*/
@media (max-width: 768px) {
    section {
        display: flex;
        flex-direction: column; /* Apila los formularios */
        align-items: center; /* Centra los formularios horizontalmente */
        gap: 30px; /* Espacio entre formularios */
        margin: 20px auto; /* Centrado vertical y horizontal */
        padding: 10px; /* Espaciado interno */
    }

    .container1, .container2 {
        width: 90%; /* Ocupa casi todo el ancho de la pantalla */
        max-width: 500px; /* Limita el ancho máximo */
        margin: 0 auto; /* Centra los contenedores */
    }

    .cabecera1  {
        position: static; /* Elimina posicionamiento absoluto */
        margin-top: 30px;
        text-align: center; /* Centra el texto */
        margin-left: 330px;
    }
    .cabecera2{
        position: static; /* Elimina posicionamiento absoluto */
        margin-top: 0;
        text-align: center; /* Centra el texto */
        margin-left: 450px;
    }
    
    h2 {
        font-size: 1.5rem; /* Ajusta el tamaño del encabezado */
    }

    p {
        font-size: 1rem; /* Ajusta el tamaño del párrafo */
        margin: 0 0 10px 0; /* Espaciado inferior */
    }

    /* Ajuste para el botón de calcular */
    #calculateBtn, #submitButton {
        margin: 20px auto; /* Centra los botones */
        display: block; /* Asegura que los botones ocupen todo el ancho disponible */
    }

    #result {
        text-align: center; /* Centra el texto del resultado */
    }
}