/* General reset */
body, h1, h2, p, a, input, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configuración de rutas para fuentes */
@font-face {
  font-family: 'BankGothic Md BT';
  src: url('fonts/BankGothicMdBT-Regular.woff2') format('woff2'),
       url('fonts/BankGothicMdBT-Regular.woff') format('woff'),
       url('fonts/BankGothicMdBT-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tango BT';
  src: url('fonts/TangoBT.woff2') format('woff2'),
       url('fonts/TangoBT.woff') format('woff'),
       url('fonts/TangoBT.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandcastle JNL";
  src: url("/fonts/SandcastleJNL.woff2") format("woff2"),
       url("/fonts/SandcastleJNL.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Enzyme";
  src: url("/fonts/Enzyme-Regular.woff2") format("woff2"),
       url("/fonts/Enzyme-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


/* Clases para aplicar fuentes */
.bank-gothic {
  font-family: 'BankGothic Md BT', sans-serif;
}

.tango-bt {
  font-family: 'Tango BT', sans-serif;
}

.sandcastle {
  font-family: 'Sandcastle JNL', sans-serif;
}

.enzyme {
  font-family: 'Enzyme', sans-serif;
}


/* Estilo básico del body */
body {
    font-family: 'Sandcastle JNL', cursive;
    background-color: #FFBB5C;
    color: #F3CA52;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ESTILOS DE LA SECCIÓN HERO */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 2rem;
}

.animated-header {
  font-size: 2rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}



/* ENCABEZADO con título mejorado */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  height: auto;
  width: 120px;
  transition: width 0.3s ease; /* Para un cambio suave de tamaño */
}


/* BARRA DE NAVEGACIÓN */
.nav-section {
  font-family: 'Sandcastle JNL', cursive;
  display: flex;
  gap: 3rem; /* Espacio entre elementos */
  align-items: center;
  padding: 1rem 0; /* Espaciado interno opcional */
}

.nav-links {
  display: flex;
  gap: 3rem; /* Espacio entre enlaces */
}

.nav-links a {
  font-family: 'Sandcastle JNL', cursive;
  color: white;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s;
  padding: 0.5rem 1rem; /* Espacio interno */
}

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



/* Estilos para el SELECTOR DE IDIOMAS */
.language-selector {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.lang-btn {
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Sandcastle JNL', cursive;
  transition: background-color 0.3s ease;
}

.lang-btn.active {
  background-color: #DAA520; /* Color para el botón activo */
  color: #000;
}

.lang-btn:hover {
  background-color: #3B6790; /* Color al pasar el puntero */
  color: #fff;
}




/* IMAGEN PRINCIPAL */
.parallax-section {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 516px;
  margin: 0 auto;
  overflow: hidden;
}

.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.parallax img {
  width: 100%;
  height: calc(100% + 100px); /* Altura extra para el efecto parallax */
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
  animation: parallaxEffect 8s infinite linear;
}

@keyframes parallaxEffect {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 2;
  padding: 0 20px;
}

.restaurant-title {
  font-family: 'Tango BT';
  font-size: 4.5rem;
  color: #A94A4A;
  margin: 0;
  padding: 0;
  display: block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 0.9; /* Reducido de 1.2 a 0.9 para disminuir el espacio entre líneas */
  margin-bottom: 20px;
}

.restaurant-title .de {
  font-size: 0.6em;
  vertical-align: middle;
}

/* Animación de rebote suave para el subtítulo */
@keyframes reboteSuave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* Movimiento hacia arriba */
  }
}

.subtitle {
  font-family: 'Enzyme', sans-serif;
  font-size: 1.3em;
  text-align: center;
  margin-top: 10px;
  color: #ffffff;
  display: inline-block;
  position: relative;
  opacity: 0;
  animation: elegantReveal 0.8s ease-out forwards, subtleWave 2.5s ease-in-out infinite;
}

@keyframes elegantReveal {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtleWave {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-7px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Mantener la responsividad */
@media (max-width: 768px) {
  .parallax img {
    animation: none;
    height: 100%;
  }

  .restaurant-title {
    font-size: 3.5rem;
  }

  .subtitle {
    font-size: 1.5rem;
  }
}

/* Estilos para el cambio de idioma */
.language-content {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.language-content[lang] {
  display: none; /* Oculta el contenido que no coincide con el idioma activo */
}



/* BOTONES DE NAVEGACIÓN: GALERIA, QUIENES SOMOS,ETC */
.slider-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 15px 20px;
  cursor: pointer;
  font-size: 18px;
  z-index: 1000;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* Puntos indicadores */
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
}

.dot.active {
  background: white;
}

/* Responsive */
@media (max-width: 768px) {
  .slider {
      height: 300px;
  }
  
  .slider-nav button {
      padding: 10px 15px;
      font-size: 16px;
  }
}




/*Sección NUESTRO RESTAURANTE */
#quienes-somos {
  padding: 120px 0;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.decor-logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
}

.decor-logo img {
  width: 100%;
  height: auto;
}

.section-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  padding: 0 20px;
}

.left-content {
  flex: 0 0 45%;
}

.image-frame {
  position: relative;
  padding: 15px;
}

.frame-border {
  position: relative;
  border: 2px solid #9F5255;
  padding: 10px;
}

.frame-border:before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px solid #9F5255;
  z-index: 1;
}

.frame-border img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}

.right-content {
  flex: 0 0 45%;
  padding-top: 30px;
}

.section-title {
  color: #7C444F;
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: 40px;
  line-height: 1.2;
  letter-spacing: 3px;
}

.text-content {
  line-height: 1.8;
  margin-bottom: 40px;
}

.text-content p {
  font-size: 1.1rem;
}

.highlight {
  font-weight: 600;
}

.reserve-button {
  display: inline-block;
  background-color: #7C444F;
  color: #DAA520;
  padding: 15px 40px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border: none; /* Eliminado el borde */
  border-radius: 4px;
  font-family: 'Sandcastle JNL';
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(218, 165, 32, 0);
}

.reserve-button:hover {
  background-color: #C1BAA1;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 20px #C1BAA1;
  transform: translateY(-2px);
}

.reserve-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    #A59D84,
    transparent
  );
  transition: all 0.6s;
}

.reserve-button:hover::before {
  left: 100%;
}

/* Responsive */
@media (max-width: 992px) {
  .section-content {
    flex-direction: column;
    gap: 40px;
  }

  .left-content,
  .right-content {
    flex: 0 0 100%;
  }

  .section-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  
  .text-content p {
    font-size: 1rem;
  }
}

/* SECCION GALERIA DE IMAGENES */
/* Estilos para la sección Galería */
.galeria-section {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  background-color: #1a1a1a; /* Fondo oscuro para contraste */
}

.galeria-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('andino.jpg'); /* Cambia por la ruta de tu imagen */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Efecto parallax */
  z-index: 1;
  opacity: 0.4; /* Transparencia oscura */
}

.galeria-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.galeria-title {
  font-size: 36px;
  color: #FFF4EA;
  margin-bottom: 20px;
}

/* Estilos para el carrusel */
.carousel {
  position: relative;
  max-width: 800px; /* Ancho máximo del carrusel */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease; /* Transición suave */
}

.carousel-item {
  min-width: 100%;
  position: relative;
}

.carousel-item img {
  width: 100%;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Overlay oscuro */
}

/* Frase rebotante */
.galeria-bounce-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Times New Roman', serif;
  font-size: 24px;
  font-style: italic;
  color: #fff;
  animation: bounce 2s infinite; /* Animación de rebote */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, -50%);
  }
  40% {
    transform: translate(-50%, -60%);
  }
  60% {
    transform: translate(-50%, -55%);
  }
}

/* Botones de control */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3); /* Más transparente */
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 2;
  transition: background-color 0.3s ease;
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}

.carousel-control:hover {
  background-color: rgba(0, 0, 0, 0.5); /* Efecto hover */
}

/* SECCION MENU */
.menu-container {
  background-color: #1a1a1a;
  background-image: url('negro.jpg'); /* Textura sutil similar a la imagen */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6rem;
  padding: 6rem 10%;
  position: relative;
  overflow: hidden;
}

.menu-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}

.menu-text {
  flex: 1;
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.menu-title {
  font-family: 'Cinzel', serif; /* Fuente elegante similar a la imagen */
  color: #C1BAA1;
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;
  font-weight: 700;
  background: linear-gradient(45deg, #D4AF37, #FFE5A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2rem;
}

.menu-subtitle {
  font-family: 'Sandcastle JNL', sans-serif;
  color: #FFBB5C;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.4;
}

.menu-description {
  font-family: 'Enzyme', sans-serif;
  color: #e0e0e0;
  font-size: 1.1rem;
  line-height: 1.9;
  margin-bottom: 3rem;
  text-align: justify;
  font-weight: 300;
}

.menu-description strong {
  color: #D4AF37;
  font-weight: 600;
}

.menu-button {
  background: linear-gradient(45deg, #A59D84, #754E1A);
  color: #000;
  padding: 1.2rem 3rem;
  font-family: 'Sandcastle JNL', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px #C1BAA1;
}

.menu-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.menu-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
}

.menu-button:hover::before {
  left: 100%;
}

.menu-images {
  flex: 1;
  position: relative;
  max-width: 500px;
  z-index: 2;
}

.menu-main-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  margin-bottom: 2rem;
  transition: transform 0.3s ease;
}

.menu-small-image {
  width: 70%;
  height: auto;
  position: relative;
  left: -10%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.menu-wave {
  position: absolute;
  bottom: 25%;
  left: -80px;
  width: 120px;
  height: auto;
  opacity: 0.8;
}

/* Estilos base para los botones superpuestos */
.menu-overlay-button {
  background: linear-gradient(45deg, #7C444F, #5A2E37); /* Colores iniciales */
  color: #fff;
  padding: 1.2rem 3rem;
  font-family: 'Sandcastle JNL', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(124, 68, 79, 0.3); /* Sombra inicial */
  border-radius: 4px; /* Añadido para consistencia */
}

/* Botón Menú Mediodía */
.menu-overlay-button:nth-of-type(1) {
  background: linear-gradient(45deg, #D0DDD0, #C0C78C); /* Colores iniciales */
  box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3); /* Sombra inicial */
}

/* Botón Menú Velada */
.menu-overlay-button:nth-of-type(2) {
  background: linear-gradient(45deg, #3B6790, #2A4A6B); /* Colores iniciales */
  box-shadow: 0 4px 15px rgba(59, 103, 144, 0.3); /* Sombra inicial */
}

/* Efecto hover para todos los botones */
.menu-overlay-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* Efecto de brillo al pasar el puntero */
.menu-overlay-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.menu-overlay-button:hover::before {
  left: 100%;
}



/* SECCION NOTICIAS */
.noticias {
  position: relative;
  background-image: url('noticiass.jpg'); /* Imagen de fondo */
  background-size: cover;
  background-attachment: fixed;
  height: auto; /* Ajuste automático de altura */
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  overflow: hidden; /* Oculta el contenido desbordante */
  gap: 20px;
  text-align: center; /* Centra el texto dentro de la sección */
  color: #ffffff; /* Color de texto principal */
}

/* Overlay oscuro solo para la imagen de fondo */
.noticias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.441); /* Fondo oscuro semitransparente */
  z-index: 0; /* Asegura que esté detrás del contenido */
}

/* Asegúrate de que el contenido esté por encima del overlay */
.noticias h2,
.noticias p,
.cuadros,
.noticia {
  position: relative; /* Asegura que esté por encima del overlay */
  z-index: 1; /* Coloca el contenido por encima del overlay */
}

/* Estilos para los cuadros de noticias */
.noticia {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  text-align: left;
  color: #ffffff; /* Texto blanco dentro del cuadro */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px; /* Espacio entre cuadros */
}

.noticia img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.noticia p {
  color: #ffffff; /* Texto blanco */
  margin-bottom: 15px; /* Espacio entre el texto y el botón */
}

.boton {
  display: inline-block;
  background-color: #D8A25E;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 15px; /* Espacio entre el texto y el botón */
}

.boton:hover {
  background-color: #9A4444;
}

/* Ajustes para dispositivos pequeños */
@media (max-width: 768px) {
  .noticia {
    flex: 1 1 100%; /* Los cuadros ocupan toda la fila */
    max-width: 100%;
  }
}


 /*RESEÑAS DE CLIENTES*/
 .opiniones {
  position: relative;
  height: 690px;
  width: 100%;
  text-align: center;
  font-family: 'Sandcastle JNL';
  overflow: hidden; /* Para controlar el desbordamiento de la imagen */
}

.parallax {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('abstracto.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.contenedor-opiniones {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
  padding: 20px;
}

.contenedor-opiniones h2 {
  color: #ffffff;
  font-size: 2.5em;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.widget-pequeno {
  width: 60%;
  max-width: 800px;
  height: 500px;
  margin: 0 auto;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .widget-pequeno {
      width: 90%;
      height: 400px;
  }

  .contenedor-opiniones h2 {
      font-size: 2em;
  }
}

/* SECCIÓN MENU MEDIODIA - MENU VELADA */
#menu-cartas {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

#menu-cartas .parallax-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: blur(3px);
  z-index: 1;
}

#menu-cartas .menu-mediodia,
#menu-cartas .menu-velada {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  transition: transform 0.3s ease;
}

#menu-cartas .menu-title {
  font-family: 'Sandcastle JNL', sans-serif;
  color: #fff;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  margin-bottom: 3rem;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#menu-cartas .carousel-item img {
  max-width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

#menu-cartas .ver-menu-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: rgba(255,255,255,0.2);
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

#menu-cartas .ver-menu-btn:hover {
  background-color: rgba(255,255,255,0.4);
  transform: scale(1.05);
}

#menu-cartas .image-container {
width: 100%;
height: 350px; /* Tamaño fijo para ambas imágenes */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin-top: 1rem;
}

#menu-cartas .menu-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
filter: brightness(0.7); /* Oscurece la imagen */
transition: filter 0.3s ease;
}

#menu-cartas .menu-image:hover {
filter: brightness(0.8); /* Ligero aumento de brillo al pasar el mouse */
}

.image-section {
position: relative;
width: 50%;
padding: 0 15px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.image-container {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.menu-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
transition: filter 0.3s ease;
}

.menu-image:hover {
filter: brightness(0.8);
}

@media (max-width: 768px) {
.image-section {
    width: 100%;
    padding: 0;
}
}

@media (max-width: 768px) {
  #menu-cartas {
      flex-direction: column;
      height: auto;
  }

  #menu-cartas .menu-mediodia,
  #menu-cartas .menu-velada {
      width: 100%;
      margin: 1rem 0;
  }
}


/*REDES SOCIALES */
.social-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: flex; /* Use flexbox for better layout control */
  align-items: center;
}

.social-buttons a {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #eee3e3;
  border-radius: 50%;
  margin: 0 5px; /* Adjust spacing between icons */
  transition: all 0.3s ease;
  text-align: center;
  line-height: 40px;
  color: #9A4444; /* Icon color */
  font-size: 24px; /* Adjust icon size */
}

.social-buttons a:hover {
  background-color: #9A4444;
  color: #fff; /* Change icon color on hover */
}




/* Seccion ENCUENTRANOS */
/* Estilos para la sección Encuéntranos */
.encuentranos-section {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  background-color: #1a1a1a; /* Fondo oscuro para contraste */
}

.encuentranos-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('lago.jpg'); /* Cambia por la ruta de tu imagen */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Efecto parallax */
  z-index: 1;
  opacity: 0.4; /* Transparencia oscura */
}

.encuentranos-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.encuentranos-map-container {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.encuentranos-info {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo negro semi-transparente */
  padding: 20px;
  border-radius: 5px;
  width: 300px; /* Un poco más grande */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.encuentranos-info-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #fff; /* Texto blanco */
}

.encuentranos-info-address {
  font-size: 14px;
  color: #ddd; /* Texto gris claro */
  margin-bottom: 15px;
}

.encuentranos-info-actions {
  display: flex;
  gap: 10px;
}

.encuentranos-info-link {
  display: inline-block;
  padding: 8px 16px;
  background-color: #000; /* Color negro */
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease;
  border: none; /* Sin bordes redondos */
}

.encuentranos-info-link:hover {
  background-color: #F0BB78; /* Color naranja al pasar el mouse */
}




/* PIE DE PAGINA */
footer {
  background-color: #1a1a1a; /* Fondo oscuro */
  color: #ffffff; /* Texto blanco */
  padding: 20px 10px; /* Reducimos el padding */
  text-align: center;
  border-top: 2px solid #D8A25E; /* Línea decorativa en la parte superior */
}

/* Contenedor del contenido del footer */
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Reducimos el espacio entre elementos */
}

/* Secciones del footer */
.footer-section {
  margin-bottom: 10px; /* Reducimos el margen inferior */
}

/* Iconos */
.footer-section i {
  font-size: 1.2rem; /* Icono un poco más pequeño */
  color: #D8A25E; /* Color dorado para los iconos */
  margin-right: 8px; /* Reducimos el margen derecho */
}

/* Horario */
.horario {
  font-size: 1rem; /* Texto un poco más pequeño */
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
  }
}

/*PARA QUE SE VEA BIEN EN OTROS DISPOSITIVOS */

/* Base Responsive Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Responsive Typography */
html {
  font-size: 16px; /* Base font size */
}

body {
  line-height: 1.6;
  width: 100%;
  overflow-x: hidden;
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Fluid Typography */
h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

/* Responsive Layout */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Flexible Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Mobile-First Approach */
@media screen and (max-width: 480px) {
  /* Ultra Small Devices */
  body {
      font-size: 14px;
  }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
  /* Small Tablets and Large Phones */
  body {
      font-size: 15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Tablets */
  body {
      font-size: 16px;
  }
}

@media screen and (min-width: 1025px) {
  /* Desktop */
  body {
      font-size: 16px;
  }
}

/* Responsive Flexbox */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .flex-responsive {
      flex-direction: column;
  }
}

/* Adaptive Padding and Margins */
.section {
  padding: clamp(20px, 5vw, 60px);
}

/* Viewport Units for Responsiveness */
.full-height {
  min-height: 100vh;
}

/* Media Queries for Specific Components */
@media screen and (max-width: 768px) {
  /* Mobile Navigation */
  .nav-mobile {
      display: block;
  }
  .nav-desktop {
      display: none;
  }
}

@media screen and (min-width: 769px) {
  /* Desktop Navigation */
  .nav-mobile {
      display: none;
  }
  .nav-desktop {
      display: block;
  }
}