/* Importación de fuentes desde Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Cardo:ital,wght@0,400;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap");

/* Definición de variables CSS en el :root */
:root {
  --primary-color: #dabd7b; /* Color primario */
  --secondary-color: #c4a484; /* Color secundario */
  --text-color: #333; /* Color del texto */
  --background-color: #fff; /* Color de fondo */
  --primary-dark: #1a1a1a; /* Color oscuro primario */
  --secondary-dark: #333333; /* Color oscuro secundario */
  --accent-gold: #c8a97e; /* Color dorado de acento */
  --text-dark: #242424; /* Color de texto oscuro */
  --text-light: #ffffff; /* Color de texto claro */
  --bg-light: #f8f8f8; /* Color de fondo claro */
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
  --color-text: #292828; /* Color del texto */
  --color-bg: #ddd; /* Color de fondo */
  --color-link: #000; /* Color de enlace */
  --color-link-hover: #000; /* Color de enlace al pasar el ratón */
  --page-padding: 1rem; /* Relleno de la página */
  --angle: -15deg; /* Ángulo para transformaciones */
  --trans-content: -30vh; /* Transformación de contenido */
  --font-titles: "Poiret One", serif; /* Fuente para títulos */
  --font-subtitles: "Sweet Sans Pro"; /* Fuente para subtítulos */
  --font-paragraphs: "Cardo", serif; /* Fuente para párrafos */
}

/* Definición de una fuente personalizada */
@font-face {
  font-family: "Sweet Sans Pro"; /* Nombre de la fuente */
  src: local("Sweet Sans Pro Medium"), local("Sweet-Sans-Pro-Medium"), url("View/Layout/fonts/SweetSansPro-Medium.woff2") format("woff2"),
    url("View/Layout/fonts/SweetSansPro-Medium.woff") format("woff"), url("View/Layout/fonts/SweetSansPro-Medium.ttf") format("truetype"); /* Fuentes locales y URLs */
  font-weight: 500; /* Peso de la fuente */
  font-style: normal; /* Estilo de la fuente */
}

/* Estilos generales para todos los elementos */
* {
  margin: 0; /* Eliminar margen */
  padding: 0; /* Eliminar relleno */
  box-sizing: border-box; /* Incluir el relleno y el borde en el tamaño total */
  font-family: "Poppins", sans-serif; /* Fuente por defecto */
}

/* Estilos para el cuerpo del documento */
body {
  line-height: 1.6; /* Altura de línea */
  color: var(--text-color); /* Color del texto */
  opacity: 0; /* Opacidad inicial */
  font-size: 16px; /* Tamaño de fuente */
}

/* Estilos para el cuerpo cuando está cargado */
body.loaded {
  opacity: 1; /* Opacidad completa */
  transition: 1s opacity; /* Transición de opacidad */
}

/* Estilos para la barra de navegación del restaurante */
.breadcrumb-restaurant {
  font-size: 1rem; /* Tamaño de fuente */
  background-color: transparent; /* Fondo transparente */
  margin-top: 1.25rem; /* Margen superior */
  display: block; /* Mostrar como bloque */
}

/* Estilos para los enlaces en la barra de navegación */
.breadcrumb-restaurant a {
  color: var(--primary-color); /* Color del enlace */
  text-decoration: none; /* Sin subrayado */
  font-weight: 600; /* Peso de la fuente */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Estilos para los elementos span en la barra de navegación */
.breadcrumb-restaurant span {
  margin-left: 0.3125rem; /* Margen izquierdo */
  font-weight: 600; /* Peso de la fuente */
  color: #ffffff; /* Color del texto */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Estilos para el banner del restaurante */
.banner-restaurant {
  position: relative; /* Posición relativa */
  width: 100%; /* Ancho completo */
  height: 50vh; /* Altura del 50% de la ventana */
  padding: 0 5%; /* Relleno horizontal */
  overflow: hidden; /* Ocultar desbordamiento */
  backface-visibility: hidden; /* Ocultar la parte posterior */
  display: flex; /* Usar flexbox */
  flex-direction: column; /* Dirección de los elementos flexibles */
  justify-content: center; /* Centrar verticalmente */
  align-items: center; /* Centrar horizontalmente */
  text-align: center; /* Alinear texto al centro */
  z-index: 1; /* Índice z para superposición */
}

/* Estilos para el fondo del banner del restaurante */
.banner-restaurant .background-restaurant {
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  position: absolute; /* Posición absoluta */
  left: 0; /* Alinear a la izquierda */
  top: 0; /* Alinear arriba */
  z-index: -1; /* Índice z detrás de otros elementos */
  transform: translate3d(0, 0, 0) scale(1.25); /* Transformación 3D y escala */
  background: black url("PImage/Banner-restaurante.avif") no-repeat center 55%; /* Fondo negro con imagen */
  background-size: cover; /* Cubrir el área */
}

/* Estilos para el fondo del banner cuando está cargado */
.loaded .banner-restaurant .background-restaurant {
  transform: scale(1); /* Escala normal */
  transition: 6.5s transform; /* Transición de transformación */
}

/* Estilos para la superposición del banner del restaurante */
.banner-restaurant .overlay-restaurant {
  position: absolute; /* Posición absoluta */
  top: 0; /* Alinear arriba */
  left: 0; /* Alinear a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  background: rgba(0, 0, 0, 0.5); /* Fondo negro con opacidad */
  z-index: 1; /* Índice z para superposición */
}

/* Estilos para el título del banner del restaurante */
.banner-restaurant h1 {
  color: #eee; /* Color del texto */
  margin: 0; /* Sin margen */
  line-height: 1.2; /* Altura de línea */
  text-transform: capitalize; /* Capitalizar texto */
  text-shadow: 0 0 0.3rem black; /* Sombra de texto */
  font-size: 2.5rem; /* Tamaño de fuente */
  text-align: center; /* Alinear texto al centro */
  position: relative; /* Posición relativa */
  z-index: 2; /* Índice z para superposición */
  margin-top: 6rem; /* Margen superior */
  font-family: var(--font-titles); /* Fuente para títulos */
}

/* Estilos para el contenedor del restaurante */
.container-restaurant {
  width: 100%; /* Ancho completo */
  max-width: 1400px; /* Ancho máximo */
  display: flex; /* Usar flexbox */
  justify-content: space-between; /* Espacio entre elementos */
  gap: 4rem; /* Espacio entre elementos */
  padding: 2rem 5%; /* Relleno */
  margin: 0 auto; /* Centrar horizontalmente */
}

/* Estilos para la galería del restaurante */
.gallery-restaurant {
  flex: 1; /* Crecer para ocupar espacio */
  position: relative; /* Posición relativa */
  height: 600px; /* Altura fija */
  overflow: hidden; /* Ocultar desbordamiento */
}

/* Estilos para el slider de la galería */
.gallery-slider {
  display: block; /* Mostrar como bloque */
  position: relative; /* Posición relativa */
  height: 100%; /* Altura completa */
  width: 100%; /* Ancho completo */
}

/* Estilos para las imágenes de la galería */
.gallery-img {
  position: absolute; /* Posición absoluta */
  background-size: cover; /* Cubrir el área */
  background-position: center; /* Centrar imagen */
  transition: all 0.3s ease; /* Transición suave */
}

/* Estilos para la primera imagen de la galería */
.img-1 {
  width: 250px; /* Ancho fijo */
  height: 280px; /* Altura fija */
  top: -60px; /* Posición superior */
  left: 20px; /* Posición izquierda */
  z-index: 3; /* Índice z para superposición */
  background-image: url("PImageRestaurante/restaurant-1.jpg"); /* Imagen de fondo */
  margin-top: 50px; /* Margen superior */
}

/* Estilos para la segunda imagen de la galería */
.img-2 {
  width: 400px; /* Ancho fijo */
  height: 500px; /* Altura fija */
  top: 50px; /* Posición superior */
  left: 150px; /* Posición izquierda */
  z-index: 2; /* Índice z para superposición */
  border: 2px solid var(--secondary-color); /* Borde */
  background-image: url("PImageRestaurante/restaurant-2.jpg"); /* Imagen de fondo */
}

/* Estilos para la tercera imagen de la galería */
.img-3 {
  width: 250px; /* Ancho fijo */
  height: 280px; /* Altura fija */
  bottom: -60px; /* Posición inferior */
  left: 20px; /* Posición izquierda */
  z-index: 1; /* Índice z para superposición */
  background-image: url("PImageRestaurante/restaurant-3.jpg"); /* Imagen de fondo */
  margin-bottom: 50px; /* Margen inferior */
}

/* Estilos para los puntos de la galería */
.gallery-dots {
  display: none; /* Ocultar por defecto */
  position: absolute; /* Posición absoluta */
  bottom: 20px; /* Posición inferior */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Centrar */
  gap: 10px; /* Espacio entre puntos */
  z-index: 10; /* Índice z para superposición */
}

/* Estilos para cada punto de la galería */
.dot {
  width: 30px; /* Ancho fijo */
  height: 30px; /* Altura fija */
  border-radius: 50%; /* Bordes redondeados */
  background-color: rgba(255, 255, 255, 0.5); /* Color de fondo con opacidad */
  cursor: pointer; /* Cambiar cursor al pasar el ratón */
  transition: background-color 0.3s ease; /* Transición suave */
}

/* Estilos para el punto activo de la galería */
.dot.active {
  background-color: white; /* Color de fondo blanco */
}

/* Estilos para el contenido del restaurante */
.content-restaurant {
  flex: 0 0 40%; /* Ocupación de espacio */
  padding-right: 2rem; /* Relleno derecho */
  display: flex; /* Usar flexbox */
  flex-direction: column; /* Dirección de los elementos flexibles */
  justify-content: center; /* Centrar verticalmente */
}

/* Estilos para la etiqueta de información del restaurante */
.about-label-restaurant {
  display: inline-block; /* Mostrar como bloque en línea */
  color: var(--primary-color); /* Color del texto */
  text-decoration: none; /* Sin subrayado */
  border: 1px solid var(--primary-color); /* Borde */
  padding: 0.5rem 1rem; /* Relleno */
  font-size: 0.875rem; /* Tamaño de fuente */
  text-transform: uppercase; /* Texto en mayúsculas */
  margin-bottom: 2rem; /* Margen inferior */
  width: fit-content; /* Ajustar al contenido */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Estilos para el contenido principal del restaurante */
.hero-content-restaurant {
  max-width: 600px; /* Ancho máximo */
}

/* Estilos para el título del contenido principal del restaurante */
.hero-content-restaurant h1 {
  font-size: 4rem; /* Tamaño de fuente */
  line-height: 1.2; /* Altura de línea */
  margin-bottom: 1.5rem; /* Margen inferior */
  font-weight: 600; /* Peso de la fuente */
  font-family: var(--font-titles); /* Fuente para títulos */
}

/* Estilos para el separador */
.separator {
  position: relative; /* Posición relativa */
  width: 100%; /* Ancho completo */
  height: 1px; /* Altura fija */
  background-color: var(--secondary-color); /* Color de fondo */
  margin: 2rem 0; /* Margen vertical */
}

/* Estilos para el pseudo-elemento del separador */
.separator::after {
  content: ""; /* Contenido vacío */
  position: absolute; /* Posición absoluta */
  width: 8px; /* Ancho fijo */
  height: 8px; /* Altura fija */
  background-color: var(--secondary-color); /* Color de fondo */
  transform: rotate(45deg); /* Rotar 45 grados */
  top: -4px; /* Posición superior */
  left: 0; /* Alinear a la izquierda */
}

/* Estilos para el párrafo del contenido principal del restaurante */
.hero-content-restaurant p {
  color: #999; /* Color del texto */
  line-height: 1.6; /* Altura de línea */
  margin-bottom: 2rem; /* Margen inferior */
  font-size: 1.1rem; /* Tamaño de fuente */
  font-family: var(--font-paragraphs); /* Fuente para párrafos */
}

/* Estilos para el fondo del menú */
.background-menu {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a); /* Gradiente de fondo */
  color: white; /* Color del texto */
  padding: 50px 0; /* Relleno vertical */
}

/* Estilos para el contenedor del menú */
.container-menu {
  max-width: 1200px; /* Ancho máximo */
  margin: 0 auto; /* Centrar horizontalmente */
  padding: 0 1rem; /* Relleno horizontal */
}

/* Estilos para el título del contenedor del menú */
.container-menu h2 {
  text-align: center; /* Alinear texto al centro */
  margin-bottom: 3rem; /* Margen inferior */
  font-family: var(--font-titles); /* Fuente para títulos */
}

/* Estilos para el contenedor de los elementos del menú */
.menu-container {
  display: flex; /* Usar flexbox */
  gap: 2rem; /* Espacio entre elementos */
  position: relative; /* Posición relativa */
}

/* Estilos para el encabezado de la sección del menú */
.section-header-menu {
  text-align: center; /* Alinear texto al centro */
  margin-bottom: 40px; /* Margen inferior */
}

/* Estilos para el título elegante del menú */
.elegant-title-menu {
  font-size: 2.8rem; /* Tamaño de fuente */
  font-weight: 300; /* Peso de la fuente */
  color: #fff; /* Color del texto */
  margin: 0; /* Sin margen */
}

/* Estilos para el título elegante del menú con fondo */
.elegant-title-menu {
  position: relative; /* Posición relativa */
  display: inline-block; /* Mostrar como bloque en línea */
  background: linear-gradient(90deg, #fff, #927c4c, #fff); /* Gradiente de fondo */
  background-size: 200% auto; /* Tamaño de fondo */
  font-weight: 500; /* Peso de la fuente */
  font-size: 3rem; /* Tamaño de fuente */
  -webkit-background-clip: text; /* Recortar fondo al texto */
  background-clip: text; /* Recortar fondo al texto */
  -webkit-text-fill-color: transparent; /* Color de texto transparente */
  animation: shine 3s linear infinite; /* Animación de brillo */
}

/* Estilos para el título elegante al pasar el ratón */
.elegant-title:hover {
  transform: scale(1.05); /* Escalar al pasar el ratón */
  transition: transform 0.3s ease; /* Transición suave */
}

/* Animación de brillo */
@keyframes shine {
  to {
    background-position: 200% center; /* Movimiento del fondo */
  }
}

/* Estilos para la decoración del título */
.title-decoration {
  display: flex; /* Usar flexbox */
  align-items: center; /* Alinear verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  gap: 15px; /* Espacio entre elementos */
  margin-top: 20px; /* Margen superior */
}

/* Estilos para la línea de decoración del título */
.line {
  width: 40px; /* Ancho fijo */
  height: 1px; /* Altura fija */
  background: #927c4c; /* Color de fondo */
}

/* Estilos para el punto de decoración del título */
.dot {
  width: 6px; /* Ancho fijo */
  height: 6px; /* Altura fija */
  background: #927c4c; /* Color de fondo */
  border-radius: 50%; /* Bordes redondeados */
}

/* Estilos para la línea de decoración del título */
.title-decoration .line {
  position: relative; /* Posición relativa */
  overflow: hidden; /* Ocultar desbordamiento */
}

/* Estilos para el pseudo-elemento de la línea de decoración */
.title-decoration .line::after {
  content: ""; /* Contenido vacío */
  position: absolute; /* Posición absoluta */
  top: 0; /* Alinear arriba */
  left: -100%; /* Alinear a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  background: linear-gradient(90deg, transparent, #fff, transparent); /* Gradiente de fondo */
  animation: lineSweep 3s infinite; /* Animación de barrido */
}

/* Estilos para el punto de decoración del título */
.title-decoration .dot {
  animation: dotPulse 2s infinite; /* Animación de pulso */
}

/* Estilos para la sección del menú */
.menu-section {
  flex: 1; /* Crecer para ocupar espacio */
}

/* Estilos para el divisor del menú */
.menu-divider {
  width: 2px; /* Ancho fijo */
  background-color: #786452; /* Color de fondo */
  position: absolute; /* Posición absoluta */
  left: 50%; /* Centrar horizontalmente */
  top: 0; /* Alinear arriba */
  bottom: 0; /* Alinear abajo */
  transform: translateX(-50%); /* Centrar */
}

/* Estilos para el título de la sección del menú */
.section-title-menu {
  font-size: 2.5rem; /* Tamaño de fuente */
  margin-bottom: 2rem; /* Margen inferior */
}

.menu-item {
  display: flex; 
  align-items: center; 
  gap: 1rem; 
  margin-bottom: 2rem; 
  opacity: 1; 
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.menu-item:hover {
  transform: scale(1.05);
}
/* Estilos para los elementos del menú ocultos */
.menu-item.hidden {
  display: none; /* Ocultar elemento */
  opacity: 0; /* Opacidad cero */
  transform: translateY(20px); /* Desplazar hacia abajo */
}

/* Estilos para los elementos del menú en transición */
.menu-item.showing {
  opacity: 0; /* Opacidad cero */
  transform: translateY(20px); /* Desplazar hacia abajo */
}

/* Estilos para los elementos del menú visibles */
.menu-item.visible {
  opacity: 1; /* Opacidad completa */
  transform: translateY(0); /* Sin desplazamiento */
}

/* Estilos para la imagen del menú */
.item-image-menu {
  width: 80px; /* Ancho fijo */
  height: 80px; /* Altura fija */
  border-radius: 50%; /* Bordes redondeados */
  object-fit: cover; /* Ajustar imagen */
}

/* Estilos para el contenido del menú */
.item-content-menu {
  flex: 1; /* Crecer para ocupar espacio */
}

/* Estilos para el encabezado del menú */
.item-header-menu {
  display: flex; /* Usar flexbox */
  justify-content: space-between; /* Espacio entre elementos */
  align-items: center; /* Alinear verticalmente */
  margin-bottom: 0.5rem; /* Margen inferior */
}

/* Estilos para el nombre del menú */
.item-name-menu {
  font-size: 1.1rem; /* Tamaño de fuente */
  font-weight: 500; /* Peso de la fuente */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Estilos para la descripción del menú */
.item-description-menu {
  color: #a0a0a0; /* Color del texto */
  font-size: 0.9rem; /* Tamaño de fuente */
  font-family: var(--font-paragraphs); /* Fuente para párrafos */
}

/* Estilos para el botón de ver menú */
.view-menu {
  display: block; /* Mostrar como bloque */
  margin: 3rem auto; /* Margen vertical y centrar horizontalmente */
  padding: 1rem 2.5rem; /* Relleno */
  font-size: 1.1rem; /* Tamaño de fuente */
  font-weight: 500; /* Peso de la fuente */
  color: var(--text-light); /* Color del texto */
  background-color: transparent; /* Fondo transparente */
  border: 2px solid var(--primary-color); /* Borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar cursor al pasar el ratón */
  transition: var(--transition); /* Transición suave */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Estilos para el botón de ver menú al pasar el ratón */
.view-menu:hover {
  background-color: var(--primary-color); /* Color de fondo */
  color: var(--primary-dark); /* Color del texto */
  transform: translateY(-3px); /* Desplazar hacia arriba */
  box-shadow: 0 5px 15px rgba(218, 189, 123, 0.3); /* Sombra */
}

/* Estilos para el efecto parallax */
.parallax {
  position: absolute; /* Posición absoluta */
  top: 0; /* Alinear arriba */
  left: 0; /* Alinear a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  background-image: url("/placeholder.svg?height=800&width=1200"); /* Imagen de fondo */
  background-size: cover; /* Cubrir el área */
  background-position: center; /* Centrar imagen */
  background-attachment: fixed; /* Fijar imagen */
  filter: brightness(0.3); /* Filtro de brillo */
}

/* Estilos para el contenedor de estadísticas */
.stats-container {
  position: relative; /* Posición relativa */
  z-index: 2; /* Índice z para superposición */
  width: 100%; /* Ancho completo */
  padding: 4rem 2rem; /* Relleno */
}

/* Estilos para la cuadrícula de estadísticas */
.stats-grid {
  display: grid; /* Usar grid */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
  gap: 2rem; /* Espacio entre elementos */
}

/* Estilos para la tarjeta de estadísticas */
.stat-card {
  background: rgba(255, 255, 255, 0.1); /* Fondo con opacidad */
  backdrop-filter: blur(10px); /* Desenfoque de fondo */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borde */
  border-radius: 20px; /* Bordes redondeados */
  padding: 2rem; /* Relleno */
  text-align: center; /* Alinear texto al centro */
  transition: all 0.3s ease; /* Transición suave */
  position: relative; /* Posición relativa */
  overflow: hidden; /* Ocultar desbordamiento */
}

/* Estilos para el pseudo-elemento de la tarjeta de estadísticas */
.stat-card::before {
  content: ""; /* Contenido vacío */
  position: absolute; /* Posición absoluta */
  top: 0; /* Alinear arriba */
  left: -100%; /* Alinear a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* Gradiente de fondo */
  transition: 0.5s; /* Transición suave */
}

/* Estilos para la tarjeta de estadísticas al pasar el ratón */
.stat-card:hover::before {
  left: 100%; /* Mover a la derecha */
}

/* Estilos para la tarjeta de estadísticas al pasar el ratón */
.stat-card:hover {
  transform: translateY(-10px); /* Desplazar hacia arriba */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Sombra */
  background: rgba(255, 255, 255, 0.15); /* Fondo con opacidad */
}

/* Estilos para el número de estadísticas */
.stat-number {
  font-size: 3.5rem; /* Tamaño de fuente */
  font-weight: 700; /* Peso de la fuente */
  margin-bottom: 0.5rem; /* Margen inferior */
  background: linear-gradient(45deg, #fff, #f0f0f0); /* Gradiente de fondo */
  -webkit-background-clip: text; /* Recortar fondo al texto */
  -webkit-text-fill-color: transparent; /* Color de texto transparente */
  opacity: 0; /* Opacidad inicial */
  transform: translateY(20px); /* Desplazar hacia abajo */
  animation: fadeInUp 0.5s ease forwards; /* Animación de aparición */
}

/* Estilos para la etiqueta de estadísticas */
.stat-label {
  font-size: 1.1rem; /* Tamaño de fuente */
  color: #f0f0f0; /* Color del texto */
  opacity: 0.9; /* Opacidad */
  position: relative; /* Posición relativa */
  padding-bottom: 1rem; /* Relleno inferior */
  opacity: 0; /* Opacidad inicial */
  transform: translateY(20px); /* Desplazar hacia abajo */
  animation: fadeInUp 0.5s ease forwards 0.2s; /* Animación de aparición */
}

/* Estilos para el pseudo-elemento de la etiqueta de estadísticas */
.stat-label::after {
  content: ""; /* Contenido vacío */
  position: absolute; /* Posición absoluta */
  bottom: 0; /* Alinear abajo */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Centrar */
  width: 50px; /* Ancho fijo */
  height: 2px; /* Altura fija */
  background: linear-gradient(90deg, transparent, #fff, transparent); /* Gradiente de fondo */
}

/* Estilos para la barra de desplazamiento */
::-webkit-scrollbar {
  width: 10px; /* Ancho de la barra de desplazamiento */
  height: 10px; /* Altura de la barra de desplazamiento */
}

/* Estilos para la pista de la barra de desplazamiento */
::-webkit-scrollbar-track {
  background: rgba(218, 189, 123, 0.1); /* Color de fondo */
  border-radius: 10px; /* Bordes redondeados */
}

/* Estilos para el pulgar de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
  background: var(--accent-gold); /* Color de fondo */
  border-radius: 10px; /* Bordes redondeados */
  border: 2px solid var(--bg-light); /* Borde */
  transition: var(--transition); /* Transición suave */
}

/* Estilos para el pulgar de la barra de desplazamiento al pasar el ratón */
::-webkit-scrollbar-thumb:hover {
  background: #b69660; /* Color de fondo al pasar el ratón */
}

/* Estilos para la barra de desplazamiento en navegadores que no son WebKit */
::-webkit-scrollbar {
  scrollbar-width: thin; /* Ancho delgado */
  scrollbar-color: var(--accent-gold) rgba(218, 189, 123, 0.1); /* Color del pulgar y pista */
}

/* Animación de aparición */
@keyframes fadeInUp {
  to {
    opacity: 1; /* Opacidad completa */
    transform: translateY(0); /* Sin desplazamiento */
  }
}

/* Animación de conteo */
@keyframes count {
  from {
    content: "0"; /* Contenido inicial */
  }
}

/* Media Queries */

/* Pantallas pequeñas (móviles) */
@media (max-width: 480px) {
  .banner-restaurant h1 {
    font-size: 1.5rem; /* Tamaño de fuente */
  }

  .hero-content-restaurant h1 {
    font-size: 2rem; /* Tamaño de fuente */
  }

  .about-label-restaurant {
    font-size: 0.75rem; /* Tamaño de fuente */
  }

  .hero-content-restaurant p {
    font-size: 1rem; /* Tamaño de fuente */
  }

  .img-1,
  .img-2,
  .img-3 {
    width: 100%; /* Ancho completo */
    height: 200px; /* Altura fija */
  }

  .stats-grid {
    grid-template-columns: 1fr; /* Una columna */
  }

  .stat-number {
    font-size: 2.5rem; /* Tamaño de fuente */
  }

  .stat-label {
    font-size: 1rem; /* Tamaño de fuente */
  }

  .menu-item {
    margin-bottom: 2rem; /* Margen inferior */
  }

  .item-image-menu {
    width: 60px; /* Ancho fijo */
    height: 60px; /* Altura fija */
  }

  .item-name-menu {
    font-size: 1rem; /* Tamaño de fuente */
  }

  .item-description-menu {
    font-size: 0.8rem; /* Tamaño de fuente */
  }

  .close-modal {
    width: 30px; /* Ancho fijo */
    height: 30px; /* Altura fija */
    font-size: 1.2rem; /* Tamaño de fuente */
  }

  .menu-container.show-all .menu-section.bebidas {
    display: block; /* Mostrar sección de bebidas */
  }
}

/* Pantallas medianas (tabletas) */
@media (min-width: 481px) and (max-width: 1024px) {
  .banner-restaurant h1 {
    font-size: 2rem; /* Tamaño de fuente */
  }

  .hero-content-restaurant h1 {
    font-size: 2.5rem; /* Tamaño de fuente */
  }

  .gallery-restaurant {
    height: 400px; /* Altura fija */
  }

  .img-1,
  .img-2,
  .img-3 {
    position: static; /* Posición estática */
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    margin: 0; /* Sin margen */
  }

  .slide-chef {
    flex: 0 0 calc(50% - 20px); /* Ocupación de espacio */
    width: calc(50% - 20px); /* Ancho */
  }

  .Productos {
    padding: 20px; /* Relleno */
    display: grid; /* Usar grid */
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    gap: 1rem; /* Espacio entre elementos */
  }

  .close-modal {
    margin-left: 50%; /* Margen izquierdo */
    width: 50px; /* Ancho fijo */
    height: 50px; /* Altura fija */
    font-size: 2.5rem; /* Tamaño de fuente */
  }
}

/* Pantallas grandes (escritorios) */
@media (min-width: 1025px) and (max-width: 1439px) {
  .img-1 {
    width: 250px; /* Ancho fijo */
    height: 280px; /* Altura fija */
    top: -60px; /* Posición superior */
    left: 20px; /* Posición izquierda */
    z-index: 3; /* Índice z para superposición */
    margin-top: 50px; /* Margen superior */
  }

  .img-2 {
    width: 400px; /* Ancho fijo */
    height: 500px; /* Altura fija */
    top: 50px; /* Posición superior */
    left: 150px; /* Posición izquierda */
    z-index: 2; /* Índice z para superposición */
  }

  .img-3 {
    width: 250px; /* Ancho fijo */
    height: 280px; /* Altura fija */
    bottom: -60px; /* Posición inferior */
    left: 20px; /* Posición izquierda */
    z-index: 1; /* Índice z para superposición */
    margin-bottom: 50px; /* Margen inferior */
  }

  .close-modal {
    margin-right: -19%; /* Margen derecho */
    width: 50px; /* Ancho fijo */
    height: 50px; /* Altura fija */
    font-size: 2.5rem; /* Tamaño de fuente */
  }
}

/* Pantallas extra grandes */
@media (min-width: 1440px) {
  .close-modal {
    margin-right: -11.2%; /* Margen derecho */
    width: 45px; /* Ancho fijo */
    height: 45px; /* Altura fija */
    font-size: 2.2rem; /* Tamaño de fuente */
  }
}

/* Pantallas 4K y más grandes */
@media (min-width: 1920px) {
  .close-modal {
    margin-right: 0; /* Sin margen derecho */
    width: 50px; /* Ancho fijo */
    height: 50px; /* Altura fija */
    font-size: 2.5rem; /* Tamaño de fuente */
  }
}

/* Ajustes específicos para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
  .container-restaurant {
    flex-direction: column; /* Dirección de los elementos flexibles */
    gap: 4rem; /* Espacio entre elementos */
  }

  .content-restaurant {
    padding-right: 0; /* Sin relleno derecho */
    order: -1; /* Cambiar el orden */
  }

  .gallery-restaurant {
    height: auto; /* Altura automática */
    display: flex; /* Usar flexbox */
    flex-wrap: wrap; /* Ajustar elementos */
    justify-content: center; /* Centrar horizontalmente */
    gap: 1rem; /* Espacio entre elementos */
  }

  .img-1,
  .img-2,
  .img-3 {
    position: static; /* Posición estática */
    width: calc(33.333% - 1rem); /* Ancho responsivo */
    height: 200px; /* Altura fija */
    margin: 0; /* Sin margen */
  }
}

/* Ajustes para pantallas de hasta 1024px */
@media (max-width: 1024px) {
  .gallery-restaurant {
    height: 200px; /* Altura fija */
    overflow: hidden; /* Ocultar desbordamiento */
    width: 100%; /* Ancho completo */
    margin-top: -80px; /* Margen superior negativo */
  }

  .gallery-slider {
    display: flex; /* Usar flexbox */
    transition: transform 0.5s ease; /* Transición suave */
    width: 100%; /* Ancho completo */
  }

  .gallery-img {
    position: static; /* Posición estática */
    flex: 0 0 100%; /* Ocupación de espacio */
    width: 100%; /* Ancho completo */
    height: 200px; /* Altura fija */
    margin: 0; /* Sin margen */
    background-position: center; /* Centrar imagen */
    background-size: cover; /* Cubrir el área */
  }

  .gallery-dots {
    display: flex; /* Mostrar como flex */
  }

  .menu-container {
    flex-direction: column; /* Dirección de los elementos flexibles */
  }

  .menu-divider {
    display: none; /* Ocultar divisor */
  }

  .menu-section {
    width: 100%; /* Ancho completo */
    overflow-x: hidden; /* Ocultar desbordamiento horizontal */
  }

  .menu-section:not(:last-child) {
    border-bottom: 2px solid #786452; /* Borde inferior */
    padding-bottom: 2rem; /* Relleno inferior */
    margin-bottom: 2rem; /* Margen inferior */
  }

  .menu-item {
    flex-direction: row; /* Dirección de los elementos flexibles */
  }

  .item-image-menu {
    margin-bottom: 1rem; /* Margen inferior */
  }

  .item-header-menu {
    flex-direction: column; /* Dirección de los elementos flexibles */
    align-items: flex-start; /* Alinear a la izquierda */
  }

  .item-name-menu {
    width: 100%; /* Ancho completo */
    text-align: left; /* Alinear a la izquierda */
    margin-bottom: 0.5rem; /* Margen inferior */
  }

  .item-description-menu {
    width: 100%; /* Ancho completo */
  }
}

/* Ajustes para pantallas muy altas */
@media screen and (max-height: 900px) {
  .modal-menu {
    padding-top: 80px; /* Relleno superior */
  }

  .modal-content-menu {
    margin-top: 50px; /* Margen superior */
  }
}

/* Estilos para impresión */
@media print {
  .banner-restaurant,
  .gallery-restaurant,
  .background-menu,
  .parallax {
    display: none; /* Ocultar elementos en impresión */
  }

  body {
    font-size: 12pt; /* Tamaño de fuente */
    line-height: 1.5; /* Altura de línea */
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid; /* Evitar salto de página */
  }

  img {
    max-width: 100% !important; /* Ancho máximo */
  }

  @page {
    margin: 2cm; /* Margen de página */
  }
}

/* Mejoras de accesibilidad y rendimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* Duración de animación */
    animation-iteration-count: 1 !important; /* Conteo de iteraciones */
    transition-duration: 0.01ms !important; /* Duración de transición */
    scroll-behavior: auto !important; /* Comportamiento de desplazamiento */
  }
}

/* Estilos para la modal */
.modal-menu {
  display: none; /* Ocultar por defecto */
  position: fixed; /* Posición fija */
  top: 0; /* Alinear arriba */
  left: 0; /* Alinear a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100vh; /* Altura de la ventana */
  background-color: rgba(26, 26, 26, 0.9); /* Fondo con opacidad */
  z-index: 1000; /* Índice z para superposición */
  display: none; /* Ocultar por defecto */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  padding-top: 30px; /* Relleno superior */
}

/* Estilos para el contenido de la modal */
.modal-content-menu {
  position: relative; /* Posición relativa */
  display: flex; /* Usar flexbox */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  margin-top: 20px; /* Margen superior */
  max-width: 90vw; /* Ancho máximo */
  max-height: 90vh; /* Altura máxima */
}

/* Estilos para el contenedor de la imagen del menú */
.menu-image-container {
  position: relative; /* Posición relativa */
  display: inline-block; /* Mostrar como bloque en línea */
}

/* Estilos para la imagen del menú */
.menu-image {
  max-height: 90vh; /* Altura máxima */
  max-width: 90vw; /* Ancho máximo */
  object-fit: contain; /* Ajustar imagen */
}

/* Estilos para mostrar la modal */
.modal-menu.show {
  display: flex; /* Mostrar como flex */
}

/* Estilos para el botón de cerrar la modal */
.close-modal {
  position: absolute; /* Posición absoluta */
  right: 0; /* Alinear a la derecha */
  top: 0; /* Alinear arriba */
  color: var(--primary-color); /* Color del texto */
  font-size: 2rem; /* Tamaño de fuente */
  font-weight: bold; /* Peso de la fuente */
  cursor: pointer; /* Cambiar cursor al pasar el ratón */
  background-color: rgba(26, 26, 26, 0.7); /* Fondo con opacidad */
  width: 40px; /* Ancho fijo */
  height: 40px; /* Altura fija */
  display: flex; /* Usar flexbox */
  align-items: center; /* Alinear verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  border-radius: 50%; /* Bordes redondeados */
  z-index: 1001; /* Índice z para superposición */
  margin: 10px; /* Margen */
}

/* Estilos para el botón de cerrar la modal al pasar el ratón */
.close-modal:hover {
  color: var(--secondary-color); /* Color del texto */
  transform: scale(1.1); /* Escalar al pasar el ratón */
}

/* Animación de aparición de la modal */
@keyframes modalFadeIn {
  from {
    opacity: 0; /* Opacidad inicial */
    transform: translateY(-20px); /* Desplazar hacia arriba */
  }
  to {
    opacity: 1; /* Opacidad completa */
    transform: translateY(0); /* Sin desplazamiento */
  }
}

/* Estilos para el contenido de la modal al mostrar */
.modal-menu.show .modal-content-menu {
  animation: modalFadeIn 0.3s ease-out; /* Animación de aparición */
}

/* Estilos para el cuerpo cuando la modal está abierta */
body.modal-open {
  overflow: hidden; /* Ocultar desplazamiento */
}

/* Mejoras de accesibilidad */
.visually-hidden {
  position: absolute; /* Posición absoluta */
  width: 1px; /* Ancho mínimo */
  height: 1px; /* Altura mínima */
  padding: 0; /* Sin relleno */
  margin: -1px; /* Margen negativo */
  overflow: hidden; /* Ocultar desbordamiento */
  clip: rect(0, 0, 0, 0); /* Recortar */
  white-space: nowrap; /* Sin espacio en blanco */
  border: 0; /* Sin borde */
}

.modal-preview {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-preview.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-preview-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 700px;
  position: relative;
  border-radius: 8px;
}

.close-preview {
  color: #aaa;
  float: right;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 2px;
  top: -22px;
}

.close-preview:hover,
.close-preview:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.preview-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.preview-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.preview-description {
  font-size: 16px;
  color: #666;
}