/* Importar al CSS algunas fuentes del repositorio de Google
   Fonts (Poppins, Space Grotesk) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* Enlazar el CSS con la librería de iconos de font-awesome 6.7.2 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');


/* PALETA DE COLORES PARA SITIO WEB RESTAURANTE */
:root {
  /* Colores principales */
  --color1: #F4F1EA;
  /* Fondo principal (Tiza) */
  --color2: #EB0029;
  /* Barra superior - Rojo */
  --color3: #010F1C;
  /* Barra superior - Negro */
  --color4: #FFFFFF;
  /* Barra superior - Blanco */
  --color: #E9E2D7;
  --color5: #555555;
  --color6: #F0E4B2;
  /* Tipografía */
  --text1: #FC791A;
  /* Títulos y destacados - Naranja */
  --text2: #3A3A3B;
  /* Texto general - Gris oscuro */

  /* Botones y elementos interactivos */
  --boton: #EB0029;
  /* Botones principales - Rojo */
  --text-boton: #FFFFFF;
  /* Texto en botones - Blanco */

  /* Componentes */
  --targeta: #3A3A3B;
  /* Fondo de tarjetas - Gris oscuro */
  --fondo: #010F1C;
  /* Fondo sección pre-footer - Azul oscuro */

  /* Variables para tipografías */
  --fuente1: "Poppins", sans-serif;
  /* Fuente principal */
  --fuente2: "Space Grotesk", sans-serif;
  /* Fuente para títulos */
}

/* Selector universal de elementos */
* {
  /* Elimina los espacios predeterminados del navegador */
  margin: 0;
  padding: 0;

  /* Evitar que se modifique el tamaño de la caja cuando agregas padding o border */
  box-sizing: border-box;
}

/* Selectores de tipo HTML */
html {
  /* Suavizar la velocidad de desplazamiento del botón de scroll */
  scroll-behavior: smooth;
}

body {
  background-color: var(--color);
}



/*Estilo barra superior*/
#barra-superior {
  background-color: var(--color2);
  color: var(--color);
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 1.0em;
}

.contenedor {
  max-width: 70%;
  margin: auto;
}

.fila {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.bs-space-beetween {
  justify-content: space-between;
}

.bs-link {
  margin-right: 10px;
  text-decoration: none;
  /* sin subrayado */
  color: var(--color);
  /* blanco */
}


/* cabecera */

.espaciado {
  padding: 10px;
}

.fijar-cabecera {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color3);
}


.nav-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  width: 120px;
}

.nav-menu {
  list-style-type: none;
  /* Quita las viñetas*/
  display: flex;
  flex-direction: row;
}

.nav-menu-item {
  margin-left: 10px;
}

.nav-menu-link {
  font-family: var(--fuente1);
  font-size: 1.1rem;
  color: var(--color);
  text-decoration: none;
  /* Quitar el subrayado */
  padding: 10px;
  transition: all 0.4s ease-in-out;
}

.nav-menu-link:hover {
  background-color: var(--color2);
  color: var(--color);
}

.bs-space-beetween {
  justify-content: space-between;
}

/* Estilo del banner */

.banner-imagen img {
  width: 100%;
  height: 100%;
  position: relative;
}

/* contenido de banner */
.bienvenida {
  color: var(--text1);
  font-family: var(--fuente1);
  font-size: 1.5rem;
}

.banner-leyenda {
  /* Para que las cajas "hijo" ocupen una posición específica
    dentro de la caja padre */
  position: absolute;

  /* Coordenadas de posicionamiento: left, right, bottom, top */
  bottom: 300px;
  left: calc(20% - 300px);

  /* Tamaño y formatos */
  width: 1000px;

  /* Evita que cambie el tamaño de la caja cuando le agregas
    padding y border */
  box-sizing: border-box;


  color: var(--color1);
  padding: 20px;
  line-height: 1.2;
  text-align: left;
  font-size: 3.5rem;
  font-family: var(--fuente1);
}

.boton-banner {
  display: inline-block;
  margin-top: 30px;
  padding: 20px 40px;
  background-color: var(--boton);
  /* rojo */
  color: var(--text-boton);
  /* blanco */
  text-decoration: none;
  transition: 0.3s ease;
  font-size: 1.3rem;
}

.boton-banner:hover {
  background-color: var(--color2);
}


/* animacion 1 (Genera una transición de aparición)*/
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* animacion 2 (Imita el movimiento de lado a lado)*/
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes shake {

  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {

  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

/* Estilo de la sección de platos */
.contenedor-platos {
  max-width: 70%;
  margin: auto;

}

.titulo {
  text-align: center;
  font-family: var(--fuente2);
  font-size: 1.5rem;
  color: var(--text1);
  margin-top: 60px;
  /* espacio superior */
}

.titulo2 {
  text-align: center;
  font-family: var(--fuente2);
  font-size: 2.5rem;
  color: var(--text2);
  margin-top: 10px;
  /* espacio superior */
  margin-bottom: 50px;
  /* espacio inferior */
}

#eventos {
  margin-top: 50px;
  background-color: var(--color4);
  border-radius: 60px;
  margin: auto;
  margin-top: 50px;
  max-width: 60%;

}


.descripcion {

  font-family: var(--fuente1);
  font-size: 0.9rem;
  color: #555555;
  padding-top: 20px;
  /* separación arriba y abajo */
}

.precio {
  font-family: var(--fuente1);
  font-size: 1.8rem;
  color: var(--text1);
}

.contenedor-platillo {
  position: relative;
  width: 200px;
  /*Ajuste de imgagen Horizontal*/
  height: 200px;
  /*Ajuste de imgagen Vertical*/
  margin: 0 auto;
}

/* Imagenes de platillos */

.galeria {
  display: flex;
  /* activa flexbox */
  gap: 20px;
  /* espacio entre platillos */
  justify-content: space-between;
  /* centra la fila horizontalmente */
  flex-wrap: wrap;
  /* permite que los platillos se ajusten a varias filas */
  padding-left: 110px;
  /* Agrega pixeles a la izquierda */
  padding-right: 110px;
  /* Agrega pixeles a la derecha */
}

.comida {
  flex: 0 0 auto;
  /* que cada platillo tenga tamaño fijo */
  text-align: center;
  /* centra título e imagen dentro */

}

.comida h3 {
  padding-bottom: 30px;
  font-family: var(--fuente1);
  font-size: 1.5rem;
}


.contenedor-platillo img.ajustar-img {
  position: relative;
  z-index: 2;
  /* Indica la jerarquia de capas entre las imagenes en la misma posicion */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Animación de rotación */
.circulo {
  position: absolute;
  top: 0;             /* Reposición del elemento hacia arriba */
  left: 0;            /* Reposición del elemento hacia la izquierda */
  width: 100%;
  height: 100%;
  z-index: 1;         /* Indica la jerarquia de capas entre las imagenes en la misma posicion */
  display: flex;
  justify-content: center;
  align-items: center;
}

.circuloshape {
  width: 110%;
  height: 110%;
  animation: girar 10s linear infinite; /* Llamo a la animación "girar", indica la duración del giro, "Linear" hace se menga a una valocidad constante y infinite es la cantidad de veces que se hara la animacion. */
}

/* Hace girar la imagen seleccionada de manera horaria */
@keyframes girar {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Seccion de reservas*/
.evento {
  text-align: center;
  font-weight: bold;
  font-family: var(--fuente1);
  font-size: 2.5rem;
  color: var(--text2);
  padding-top: 20px;
}

/* Tabla Reservas */
table {
  border: 3px solid var(--color1);
  border-collapse: collapse;
  /* Quita el espacio entre bordes */
  width: 100%;
}

th,td {
  border: 1px solid var(--color1);
  text-align: center;
  padding: 12px;
}

caption {
  color: var(--color5);
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.2em;
  font-family: var(--fuente1);
}

thead,
tfoot {
  background-color: var(--color);
}

.contenedor-tarifas {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 20px;
  flex-wrap: wrap;
  max-width: 1100px;
  /* Ancho máximo del bloque */
  margin: 0 auto;
  /* Centrado horizontal */
  padding: 40px 20px;
  /* Espacio arriba/abajo y a los lados */
}

.descripcion {
  flex: 1;
  min-width: 250px;
  font-family: var(--fuente1);
  color: #333;
  font-size: 1.2rem;
  text-align: center;
}

.contenedor-tarifas table {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}


/* Descripción */
.description {
  max-width: 1200px;
  margin: 6rem auto;
  padding: 0 1rem;
  text-align: center;
}

.description h2 {
  font-size: 2.5rem;
  color: var(--text2);
  margin-bottom: 2rem;
  font-family: var(--fuente1);
}

.description p {
  color: var(--color5);
  font-size: 1.2rem;
  font-family: var(--fuente1);
}

.ajustar-video {
  width: 70%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  display: block;
  box-shadow: 0px 0px 15px var(--color3);
  /* Sombra sutil */
}

/* Estilo de la sección de ubicacion */
#ubicacion {
  padding: 40px 20px;
  padding-top: 100px;
  padding-left: 200px;
  padding-right: 200px;
  background-color: var(--color1);
  margin: auto;
  /* Centrar la sección */
  max-width: 1500px;
  border-radius: 20px;
  /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* Sombra sutil */
  margin-top: 50px;
  /* Espacio superior */
}

.contenedor-ubicacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 1200px;
  margin: 0 auto;
}

.direccion {
  flex: 1;
  font-family: var(--fuente1);
  text-align: center;
  padding-right: 100px;
}

.direccion h2 {
  margin-bottom: 10px;
  color: var(--text1);
}

.direccion p {
  margin: 5px 0;
  font-size: 16px;
  color: #555;
}

.mapa {
  flex: 1;
  min-width: 280px;
  border-radius: 25px;
  border-color: var(--color3);
}


/* Estilo para otros platillos*/

.platillos-variados {
  margin: 20px;
}

.platillos-variados h1 {
  text-align: center;
  padding-top: 50px;
  font-weight: 900;
  /* Negrita  o grosor de la letra*/
  font-family: var(--fuente1);
  font-size: 2.5rem;
  color: var(--text1);
  margin-top: 20px;
  /* espacio superior */
}

.contenedor-platillos-variados {
  max-width: 1500px;
  margin: auto;
  /* Centrar la sección */
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;

}



.cuadro {
  display: flex;
  align-items: center;
  width: 30%;
  padding-top: 20px;
  padding-left: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  background-color: var(--fondo);


}

.cuadro img {
  width: 200px;
  height: auto;
}

.texto h3 {
  margin-top: -30px;
  font-family: var(--fuente1);
  color: var(--boton);
  font-size: 1.5rem;
}

.texto p {
  font-weight: bold;
  font-family: var(--fuente1);
  color: var(--text-boton);
}

.cuadro a {

  display: inline-block;

  padding: 20px 40px;

  background-color: var(--boton);
  /* rojo */
  color: var(--text-boton);
  /* blanco */
  text-decoration: none;
  transition: 0.3s ease;
  font-size: 0.9rem;
}

.cuadro a:hover {
  background-color: var(--text1);
  color: var(--color);
}

/* Estilo de la sección cocineros */

.cocineros h1 {
  text-align: center;
  font-weight: 900;
  font-family: var(--fuente1);
  color: var(--text1);
  padding-top: 100px;
}

.cocineros h2 {
  font-weight: 900;
  text-align: center;
  font-family: var(--fuente1);
  font-size: 2.5rem;
  padding-bottom: 50px;
}


.cocinero-contenedor {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.cocineros-targeta {
  background-color: var(--color1);
  border-radius: 40px;
  width: 400px;
  box-shadow: 0 5px 20px var(--fondo);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.chef {
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 0 0;
}

.chef img {
  width: 100%;
  height: auto;
  border-bottom: 5px solid var(--color2);
  border-bottom-right-radius: 60px;
}



.cocineros-targeta h3 {
  text-align: center;
  margin-top: 30px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--fondo);
  transition: color 0.3s ease;
  font-family: var(--fuente1);
}

.cocineros-targeta p {
  text-align: center;
  margin: 5px 0 30px;
  color: var(--color5);
  font-family: var(--fuente1);
}

.cocineros-targeta:hover h3 {
  color: var(--color2);
  /* Cambia a rojo al pasar el mouse */
}






/* Estilo de la sección de formulario*/

/* Formulario */
.container-gnl {
  max-width: 80%;
  margin: auto;
  padding-top: 150px;
  font-family: var(--fuente1);
  font-weight: 900;
  padding-bottom: 100px;

}

/* Filas y Columnas */
.container-gnl .fila {
  display: flex;
  /* Activa FlexBox */
  flex-wrap: wrap;
  /* Cambia de fila cuando se ha completado el ancho del contenedor */

  /* Anula el padding-left y padding-right de la primera y
    última columna respectivamente*/
  margin-top: -3rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.container-gnl .columna {
  /* Define que las columnas tengan el mismo ancho */
  flex-basis: 0;
  flex-grow: 1;

  /* Espacio entre columnas */
  padding-left: 15px;
  padding-right: 15px;
}

.container-form-img {
  display: flex;
}

.container-form {
  max-width: 700px;
  width: 100%;
  background: var(--color4);
  padding: 25px 30px;
  border-radius: 20px;
}

.container-form .titulo-form {
  font-size: 25px;
  font-weight: 500;
  position: relative;
  padding-bottom: 15px;

  font-family: var(--fuente1);
  font-weight: 900;

}

.container-form form .user-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px o 12px 0;
}

form .user-details .input-box {
  margin-bottom: 15px;
  width: calc(100% / 2 - 20px);
}

.user-details .input-box .details {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}

.user-details .input-box input,
select {
  height: 45px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1.5px solid var(--color2);
  padding-left: 15px;
  font-size: 16px;
  border-bottom-width: 1px;
  transition: all 0 3s ease;
}

.user-details .input-box input:focus,
.user-details .input-box input:valid {
  border-color: var(--color3);
}

form .comentario .titulo-comentario {
  font-size: 20px;
  font-weight: 500;
}

form .comentario .txtarea {
  display: flex;
  width: 100%;
  margin: 14px 0;
  justify-content: space-between;
}

.comentario .txtarea textarea {
  height: 45px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1.5px solid var(--color3);
  padding-left: 15px;
  font-size: 16px;
  border-bottom-width: 1px;
  transition: all 0 3s ease;
}

.enlace-privacidad {
  color: var(--color2);
  text-decoration: none;
  /* Quita el subrayado */
}

form .button {
  height: 45px;
  margin: 45px 0;
}

form .button input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 5px;
  color: var(--color);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  background: var(--color2);
  transition: all 0.4s ease-in-out;

}

.button input:hover {
  background-color: var(--text1);
  color: var(--color);
}


/* Estilo de la sección de pie de página */
.pie {
  background-color: var(--targeta);

}

.titulo-pie {
  text-align: center;
  font-weight: 900;
  /* Negrita o grosor de la letra*/
  font-family: var(--fuente1);
  font-size: 1.5rem;
  color: var(--text1);
  background-color: var(--color5);
}

.pie h1 {
  text-align: center;
  font-weight: 900;
  /* Negrita o grosor de la letra*/
  font-family: var(--fuente1);
  font-size: 2.5rem;
  color: var(--color1);
  padding-top: 25px;
  /* espacio superior */
}

.pie h2 {
  text-align: center;
  font-size: 1.0rem;
  font-family: var(--fuente1);
  color: var(--color4);
  padding-bottom: 25px;
  /* espacio inferior */
  padding-top: 25px;
  /* espacio superior */
}



.tabla-pie {
  color: var(--color1);
  font-family: var(--fuente1);
  width: 75%;
  margin: auto;
  border-collapse: collapse;
}

/* Boton de Scroll */
.scroll-up {
    position: fixed;
    bottom: 45px; 
    right: 45px;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    background-color: var(--color5);
    color: var(--color3);
    border: 1px solid var(--color3);
    border-radius: 50%;
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s ease;
}

.scroll-up:hover {
    background-color: var(--text1);
}