/* Estilos generales para pantallas pequeñas */

/* Asegúrate de que el contenedor principal ocupe el 100% del ancho de la pantalla */
body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--white-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
}

/* Ajuste del encabezado para pantallas pequeñas */
.header-container {
    padding: 10px; /* Reducir el padding */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro más opaco */
    flex-direction: column; /* Cambia la dirección del flex para móviles */
    align-items: center; /* Alinea los elementos en el centro */
    height: auto; /* Ajustar la altura automáticamente */
}

.header-left {
    margin-bottom: 10px; /* Espacio debajo del logo */
}

.logo {
    width: px; /* Incrementar el tamaño del logo */
    max-width: 100%;
    height: auto;
}

/* Menú de navegación para pantallas pequeñas */
nav {
    flex-direction: column; /* Menú en columna */
    width: 100%; /* Ocupa todo el ancho */
}

nav a {
    display: block;
    padding: 10px;
    font-size: 1.5rem; /* Tamaño de fuente ajustado */
    text-align: center;
}

/* Ajuste del botón hamburguesa */
.hamburger {
    display: flex; /* Mostrar botón hamburguesa */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
}

.hamburger div {
    background-color: var(--primary-color);
    height: 3px;
}

/* Área de héroe */
.hero {
    padding: 80px 15px; /* Ajustar el padding */
    background-position: center;
    background-size: cover;
}

/* Ajuste de secciones generales */
section {
    padding: 30px 15px; /* Reducir el padding */
}

/* Ajuste de formularios */
form {
    max-width: 100%; /* Ocupa el 100% del ancho */
    padding: 15px; /* Reducir el padding */
}

label {
    font-size: 14px; /* Tamaño de fuente ajustado */
}

input, button {
    width: 100%; /* Ocupa el 100% del ancho del contenedor */
    padding: 12px;
}

button {
    font-size: 14px; /* Tamaño de fuente ajustado */
}

/* Estilo del modal */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo del modal más oscuro */
}

.modal {
    max-width: 90%; /* Reducir el tamaño máximo del modal */
    padding: 15px; /* Ajustar el padding */
}

/* Estilo del botón de reserva en la sección de Staff */
.staff-container {
    flex-direction: column; /* Apilar los elementos verticalmente */
}

.staff-member {
    width: 100%; /* Ocupa el 100% del ancho del contenedor */
    margin: 10px 0; /* Espacio vertical entre miembros */
}

.staff-photo {
    width: 70px; /* Reducir el tamaño de la foto */
}

/* Slider */
.slider {
    height: 100vh; /* Asegura que ocupe el alto de la pantalla en dispositivos móviles */
    position: relative;
    overflow: hidden; /* Asegúrate de que no haya desbordamiento */
    width: 100%; /* El slider debe ocupar todo el ancho */
}

.slide {
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    background-size: cover; /* Asegúrate de que las imágenes cubran todo el slider */
    background-position: center; /* Centra la imagen de fondo */
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.text-content {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    padding: 0 20px;
}

/* Imágenes dentro del slider */
.slider img {
    width: 100%; /* Las imágenes ocupan todo el ancho del slider */
    height: auto; /* Mantén la proporción de la imagen */
}

/* Estilo del footer */
footer {
    padding: 15px; /* Reducir el padding */
}

footer .footer-logo {
    width: 40px; /* Reducir el tamaño del logo */
}

footer p {
    font-size: 12px; /* Tamaño de fuente ajustado */
}

/* Botón de volver al inicio */
#back-to-top {
    bottom: 15px; /* Ajustar la posición vertical */
    right: 15px; /* Ajustar la posición horizontal */
    padding: 8px; /* Reducir el padding */
    border-radius: 50%;
    font-size: 18px; /* Tamaño de fuente ajustado */
}