body {
    font-family: Arial, Helvetica, sans-serif;
}
.header {/* Estilo para el header */
    position: fixed;/* Fijo en la parte superior de la página */
    top: 0;/* Posición en la parte superior */
    left: 0;/* Alineado a la izquierda */
    width: 100%;/* Ancho completo */
    z-index: 1000;/* Asegura que el header esté por encima de otros elementos */
    padding: 1% 0;/* Relleno vertical */
}
#menumovil {/* Estilo para el menú móvil */
    max-height: 0;
    overflow: hidden;
    position: absolute;/* Posición absoluta para colocarlo debajo del header */
    top: 100%;/* Justo debajo del header */
    left: 0;/* Alineado a la izquierda */
    width: 100%;/* Ancho completo */
    background-color: rgb(255, 255, 255) !important;/* Cambiado a un color sólido para mejor visibilidad */
    z-index: 999;/* Asegura que el menú esté por debajo del header pero por encima de otros elementos */
}


#menumovil a {/* Estilo para los enlaces del menú móvil */
    display: block;/* Cada enlace en una nueva línea */
    padding: 10px;/* Relleno para mejor apariencia */
    color: rgb(0, 0, 0) !important;/* Color de texto blanco */
    text-decoration: none;/* Sin subrayado */
      
}

#menumovil a:hover {/* Efecto hover para los enlaces del menú móvil */
    background-color: rgb(80, 75, 75) !important;/* Cambia el color de fondo al pasar el cursor */
    color: rgb(255, 255, 255) !important;/* Color de texto blanco al pasar el cursor */
}


#contenedorcabecera {/* Estilo para el contenedor de la cabecera */
    top: auto;/* Posición en la parte superior */
    height: 9% !important;/* Ajusta la altura según sea necesario */
    background: rgb(0, 0, 0);/* Color de fondo sólido */

}

#tituloubicacion {/* Estilo para el título de ubicación */
    font-size: small !important;/* Tamaño de fuente pequeño */
    font-weight: 100 !important;/* Peso de fuente ligero */
    font: message-box;/* Tipo de fuente legible */
    text-decoration: none !important;/* Sin subrayado */
}


header h1 {/* Estilo para el título principal en el header */
    color: black;   /* Color de texto */
    margin: 0;/* Sin margen */
    font-size: 10%;/* Tamaño de fuente */
    text-align: center;/* Centrado */
}


nav .navbar-nav #barra {/* Estilo para los elementos de la barra de navegación */
    font-size: 100%;/* Tamaño de fuente */
    color: white;/* Color de texto */
    margin-left: 7%;/* Espacio entre elementos */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;/* Transición suave para efectos */
    text-decoration: none;/* Sin subrayado */
}



.navbar-nav {/* Estilo para la barra de navegación */
    
    margin-right: 19cqmax;/* Espacio desde el borde derecho */
}

#logointro {/* Estilo para el logo de introducción */
    display: block; /* Asegura que el logo se muestre como bloque */
    width: 100% !important;/* Ancho automático para mantener proporciones */
    height: auto !important;/* Altura del logo */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;/* Transición suave para efectos */
    overflow: hidden;
}

#logointro:hover {/* Efecto hover para el logo */
    box-shadow: 1 5px 21px rgb(0, 0, 0);/* Sombra al pasar el cursor */
    transform: scale(1.2);/* Aumenta el tamaño al pasar el cursor */
    overflow: hidden;/* Evita desbordamiento */
}

nav .navbar-nav #barra:hover {/* Efecto hover para los elementos de la barra de navegación */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);/* Sombra al pasar el cursor */
    transform: translateY(-10px);/* Eleva el elemento al pasar el cursor */
    color: rgb(0, 132, 255) !important;/* Cambia el color al pasar el cursor */
    text-decoration: none;/* Sin subrayado */
    /*background: rgba(27, 27, 188, 0.303);*/
}

#reservar {/* Estilo para el botón de reservar */
    font-size: 18px;/* Tamaño de fuente */
    color: white;/* Color de texto */
    margin-left: 7%;/* Espacio desde el borde izquierdo */
    background-color: rgb(7, 173, 59) !important;/* Color de fondo verde */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;/* Transición suave para efectos */
    border-radius: 20px;/* Ajusta el radio a tu gusto */
    padding: 5px 15px;/* Añade relleno para mejor estética */
    border: none;/* Sin borde */

}

#reservar:hover {/* Efecto hover para el botón de reservar */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);/* Sombra al pasar el cursor */
    transform: scale(1.05);/* Aumenta ligeramente el tamaño al pasar el cursor */
    color: white !important;/* Color de texto blanco al pasar el cursor */
    background-color: rgb(54, 50, 50) !important;/* Cambia el color de fondo al pasar el cursor */
    border-radius: 20px solid white;/* Ajusta el radio a tu gusto */
    padding: 5px 15px;/* Añade relleno para mejor estética */
    border: 1px solid white;   /* Añade un borde blanco al pasar el cursor */

}

#info_bar {/* Estilo para la barra de información */
    position: fixed;/* Fijo en la parte superior de la página */
    width: 100%;/* Ancho completo */
    top: 0;/* Posición en la parte superior */
    z-index: 1001;/* Asegura que la barra esté por encima de otros elementos */
    display: flex;/* Usar flexbox para distribuir el contenido */
    justify-content: space-between;/* Espacio entre los elementos */
    align-items: center;/* Alinea los elementos verticalmente */
    height: 24px;/*Ajusta la altura al tamaño ingresado */
    overflow: hidden;/* Evita que el contenido se desborde */
    background-color: rgb(7, 121, 198) !important;/* Cambiado a un color sólido para mejor visibilidad */
}

#info_ubicacion {/* Estilo para la ubicación en la barra */
    color: azure;/* Cambiado a un color sólido para mejor visibilidad */
    margin-left: 10%;/* Espacio desde el borde izquierdo */
    font-size: small !important;/* Tamaño de fuente pequeño */
    font-weight: 100 !important;/* Peso de fuente ligero */
    font: message-box;/* Tipo de fuente legible */
    text-decoration: none !important;/* Sin subrayado */

}

#info {/* Estilo para la información en la barra */
    color: azure;/* Cambiado a un color sólido para mejor visibilidad */
    margin-right: 30px;/* Espacio desde el borde derecho */
    font-size: small !important;/* Tamaño de fuente pequeño */
    font-weight: 100 !important;/* Peso de fuente ligero */
    text-decoration: none !important;/* Sin subrayado */
}

#iconomenu {/* Estilo para el icono del menú */
    display: none;/* Oculto por defecto */
}



@media screen and (max-width: 770px) { /* Ajustes para pantallas pequeñas */
    #contenedorinfo {/* Oculta el contenedor de información en pantallas pequeñas */
        display: none !important;/* Oculta el contenedor de información */
    }

    body {
        margin-top: 21cqmax !important;/* Ajuste del margin-top para pantallas pequeñas */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif; /* Fuente legible para todo el sitio */
        flex: auto;
    }

    main {/* Ajuste del padding-top para pantallas pequeñas */
        background-color: rgb(255, 255, 255);/* Color de fondo para pruebas */
        
    }

    #info_bar {/* Ajustes para la barra de información en pantallas pequeñas */
        top: 0%;/* Posición en la parte superior */
        display: flex;/* Usar flexbox para centrar el contenido */
        justify-content: center;/* Centrado horizontal */
        align-items: center;/* Centrado vertical */
        height: 24px;/*Ajusta la altura automáticamente */
        padding: 2px 0 ; /* Añade algo de padding para mejor apariencia */
    }


}
@media (min-width: 770px) and (max-width: 950px){

    body{
        margin-top: 25cqmax !important;/* Ajuste del margin-top para pantallas medianas */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif; /* Fuente legible para todo el sitio */
        flex: auto;
    }
    #menumovil {
        display: none !important;/* Asegura que el menú móvil esté oculto en pantallas medianas */
    }
}

@media (min-width: 1000px) and (max-width: 1100px){
    body{
        margin-top: 8cqmax !important;/* Ajuste del margin-top para pantallas medianas */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif; /* Fuente legible para todo el sitio */
        flex: auto;
    }
    #menumovil {
        display: none !important;/* Asegura que el menú móvil esté oculto en pantallas medianas */
    }
}

@media (min-width: 1100px) and (max-width: 1300px){
    body{
        margin-top: 7cqmax !important;/* Ajuste del margin-top para pantallas medianas */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif; /* Fuente legible para todo el sitio */
        flex: auto;
    }
}

@media (min-width: 1300px) and (max-width: 1600px){
    body{
        margin-top: 6cqmax !important;/* Ajuste del margin-top para pantallas medianas */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif; /* Fuente legible para todo el sitio */
        flex: auto;
    }
    #menumovil {
        display: none !important;/* Asegura que el menú móvil esté oculto en pantallas medianas */
    }
}

@media (min-width: 1600px) and (max-width: 1905px){
    body{
        margin-top: 5cqmax !important;/* Ajuste del margin-top para pantallas medianas */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif; /* Fuente legible para todo el sitio */
        flex: auto;
    }
    #menumovil {
        display: none !important;/* Asegura que el menú móvil esté oculto en pantallas medianas */
    }
}

@media (min-width: 1905px){
    body{
        margin-top: 5.5cqmax !important;/* Ajuste del margin-top para pantallas medianas */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif; /* Fuente legible para todo el sitio */
        flex: auto;
    }
    #menumovil {
        display: none !important;/* Asegura que el menú móvil esté oculto en pantallas medianas */
    }
}



@media screen and (max-width: 1000px) {/* Ajustes para pantallas pequeñas */
    .navbar-nav #barra:not(:first-child) {/* Oculta todos los elementos de la barra excepto el primero */
        display: none;/* Oculta los elementos de la barra */

    }

    #contenedorcabecera {/* Ajustes para el contenedor de la cabecera en pantallas pequeñas */
        height: auto !important;/* Ajusta la altura para pantallas pequeñas */
        background: rgb(0, 0, 0);/* Color de fondo sólido */

    }

    #iconomenu {/* Muestra el icono del menú en pantallas pequeñas */
        display: block;/* Muestra el icono del menú */
        margin-right: 10%;/* Espacio desde el borde derecho */
        font-size: 24px;/* Tamaño de fuente grande */
        color: white;/* Color blanco para visibilidad */
    }

    /*desplegar menu bajo la cabecera al hacer click en el icono del menu sobre los demas elementos de la barra de navegacion
    #menumovil {/* Estilo para el icono del menú 
        display: block;/* Muestra el menú móvil 
         }   

    #menumovil #barra.nav-link {/* Estilo para los enlaces del menú móvil 
        display: block;/* Cada enlace en una nueva línea 
        padding: 10px;/* Relleno para mejor apariencia 
        color: white;/* Color de texto blanco 
        text-decoration: none;/* Sin subrayado 
    }    */


}
footer {
    background-color: rgba(7, 121, 198, 0) !important;/* Cambiado a un color sólido para mejor visibilidad */
    color: rgb(0, 0, 0);/* Color de texto blanco */
    text-align: center;/* Centrado del texto */
    padding: 10px 0;/* Relleno vertical */
    position: relative;/* Posición relativa para asegurar que el footer se posicione correctamente */
    bottom: 0;/* Posición en la parte inferior */
    width: 100%;/* Ancho completo */
}