* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;

}
.mandarin {
  /*background-image:url("/img/mainPage/Hotel-Mandarin-Carton-Mexico-City-Exterior.jpeg");*/
  --s: 109px; /* control the size*/
  --c1: #ef613f;
  --c2: #ff986c;

  --_g: #0000 24%,
    var(--c2) 26% 34%,var(--c1) 36% 44%,
    var(--c2) 46% 54%,var(--c1) 56% 64%,
    var(--c2) 66% 74%,#0000 76%;
  background:
    radial-gradient(100% 100% at 100% 0,var(--_g)),
    radial-gradient(100% 100% at 0 100%,var(--_g)),
    radial-gradient(var(--c2) 14%,var(--c1) 16%)
     calc(var(--s)/2) calc(var(--s)/2);
  background-size: var(--s) var(--s);
}

.villas{
    --s: 91px; /* control the size*/
    --c1: #ede1aa;
    --c2: #7ec696;

    --_g: #0000 24%,
    var(--c2) 26% 34%,var(--c1) 36% 44%,
    var(--c2) 46% 54%,var(--c1) 56% 64%,
    var(--c2) 66% 74%,#0000 76%;
    background:
            radial-gradient(100% 100% at 100% 0,var(--_g)),
            radial-gradient(100% 100% at 0 100%,var(--_g)),
            radial-gradient(var(--c2) 14%,var(--c1) 16%)
            calc(var(--s)/2) calc(var(--s)/2);
    background-size: var(--s) var(--s);
}
.fantasy {
  --s: 91px; /* control the size*/
  --c1: #ceab5f;
  --c2: #872b44;

  --_g: #0000 24%,
  var(--c2) 26% 34%,var(--c1) 36% 44%,
  var(--c2) 46% 54%,var(--c1) 56% 64%,
  var(--c2) 66% 74%,#0000 76%;
  background:
          radial-gradient(100% 100% at 100% 0,var(--_g)),
          radial-gradient(100% 100% at 0 100%,var(--_g)),
          radial-gradient(var(--c2) 14%,var(--c1) 16%)
          calc(var(--s)/2) calc(var(--s)/2);
  background-size: var(--s) var(--s);
}

body {
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  overflow-x: hidden;
  font-family: 'Georgia', serif;
  line-height: 1.6;
  /*background-image: linear-gradient(to right bottom, #df2a12, #e84e28, #f0693d, #f88154, #ff986c);*/
  color: #333;
}

header h1 {
  margin-top: 20px;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #f2f4f6;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.platillo {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  width: 200px;
  text-align: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.platillo h2 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 10px;
}

.platillo p {
  margin-bottom: 8px;
  color: #555;
}

footer {
  margin-top: 20px;
  font-size: 0.9rem;
  color: #666;
}

.categoria {
  margin: 20px auto;
  max-width: 800px;
  padding: 10px;
  border-bottom: 2px solid #333;
}

.categoria h2 {
  font-size: 1.8em;
  color: #ecdddd;
  margin-bottom: 10px;
}

/* Estilos de la lista de platillos */
.platillos-lista {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Estilos de cada platillo */
.platillo-item {
  background: linear-gradient(0deg, #96745d, #ad8460, #c39463, #d7a766, #e9ba6c, #f7cf7c, #fde6a5, #fffbe9); /* made at https://learnui.design/tools/gradient-generator.html */
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.platillo-item h3 {
  margin-top: 0;
  font-size: 1.4em;
  color: #333;
}

.platillo-item p {
  margin: 5px 0;
  color: #666;
}

/* Estilo para el precio */
.platillo-item p:last-of-type {
  font-weight: bold;
  color: #444;
}

/* Estilo del carrusel */
.carrusel {
  display: flex; /* Diseño en fila */
  overflow-x: auto; /* Permite desplazamiento horizontal */
  scroll-snap-type: x mandatory; /* Suaviza el desplazamiento */
  width: 100%; /* Adapta el ancho al de la pantalla */
  box-sizing: border-box; /* Incluye el padding y border en el tamaño */
  padding: 10px 0;
}

.carrusel-items {
  display: flex; /* Alinea los botones en fila */
  gap: 10px; /* Espacio entre los botones */
  width: 100%; /* Usa todo el ancho disponible */
}

.categoria-boton {
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  flex-shrink: 0; /* Evita que el botón se reduzca más allá del contenido */
  padding: 10px 15px; /* Agrega un relleno cómodo */
  text-align: center;
  background-color: #FFF;
  color: Black;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/*.categoria-boton:hover {
  background-color: #0056b3;
}*/

/* Ocultar las barras de desplazamiento en el carrusel */
.carrusel {
  scrollbar-width: none; /* Firefox */
}

.carrusel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.boton-flotante {
  position: fixed;
  bottom: 100px;
  margin-bottom: 15%;
  right: 20px;
  z-index: 1000;
  background-color: #476074;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none; /* Ocultarlo inicialmente */
}

.boton-flotante:hover {
  background-color: #476074;
}

/* Media Queries */
@media (max-width: 768px) {
  .carrusel-items {
    display: flex; /* Mantén los botones en línea */
    gap: 10px; /* Espacio entre botones */
    width: 100%; /* Usa todo el ancho disponible */
    overflow-x: auto; /* Habilita desplazamiento horizontal si es necesario */
    .bottom-menu {
      display: none;
    }
  }

  .categoria-boton {
    font-size: 1.4em;/* Ajusta tamaño de texto */
    padding: 8px; /* Reduce padding */
    font-weight: bold;
  }
  nav {
    width: 100%;
    overflow: hidden;
  }
}
---------------------

/* Contenedor del header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}

/* Logo e ícono */
.logo {
  margin-left: 50px;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.logo img {
  width: 30px;
  margin-right: 5px;
}

/* Menú de navegación */
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #444;
  font-size: 14px;
  font-weight: bold;
  transition: color 0.3s;

}

nav ul li a:hover {
  color: black;
}

/* Botón Reserve */
.btn-reserve {
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 5px 15px;
  background-color: white;
  color: #444;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-reserve:hover {
  border-color: black;
  color: black;
}




.promoted-product-carnes {
  background-image:url("/img/categorias/carnes.webp");
  height: 50vh; /* Ocupa toda la pantalla */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  position: relative;
  background-repeat:no-repeat ;
  background-size: cover;
}

.promoted-product-bebidas {
  background-image:url("/img/categorias/bebidas.webp");
  height: 50vh; /* Ocupa toda la pantalla */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  position: relative;
  background-repeat:no-repeat ;
  background-size: cover;
}

.promoted-product-snacks {
  background-image:url("/img/categorias/snacks.webp");
  height: 50vh; /* Ocupa toda la pantalla */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  position: relative;
  background-repeat:no-repeat ;
  background-size: cover;
}

.promoted-product-pasteles {
  background-image:url("/img/categorias/postres.webp");
  height: 50vh; /* Ocupa toda la pantalla */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  position: relative;
  background-repeat:no-repeat ;
  background-size: cover;
}

.promoted-product::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Oscurece ligeramente la imagen */
  z-index: 1;
}

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

.product-title {
  font-size: 4rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.product-description {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.order-button {
  display: inline-block;
  background-color: #FF6347; /* Color rojo similar al botón */
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.order-button:hover {
  background-color: #e5533d;
}


.weekly-dishes {
  padding: 3rem 1rem;
  text-align: center;
}

.section-header {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #4d4d4d;
}

.section-subtitle {
  font-size: 1rem;
  color: #7a7a7a;
  font-weight: bold;
}

.dish-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.dish-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  transition: transform 0.3s ease;
}

.dish-item:hover {
  transform: translateY(-10px);
}

.dish-image {
  width: 100%;
  height: auto;
}

.dish-title {
  margin: 1rem 0 0.5rem;
  font-size: 1.5rem;
  color: #4d4d4d;
}

.dish-description {
  font-size: 1rem;
  color: #7a7a7a;
  margin-bottom: 1.5rem;
}

.content {
  flex: 1;
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #000;
  padding: 10px 0;
  z-index: 1000;
}

.bottom-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: white;
  font-size: 12px;
}

.bottom-menu a img {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.hidden {
  display: none;
}

nav {
  width: 100%; /* Asegura que el nav ocupe todo el ancho de la página */
}

nav ul {
  list-style: none; /* Elimina los puntos de la lista */
  display: flex; /* Utiliza flexbox para alinear los elementos en fila */
  justify-content: space-around; /* Espacia los elementos uniformemente */
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margin por defecto */
}

nav ul li {
  flex: 1; /* Permite que los elementos ocupen el mismo espacio */
  text-align: center; /* Centra el texto dentro de cada elemento */
}

nav ul li a {
  display: block; /* Hace que el enlace ocupe todo el espacio del li */
  padding: 10px; /* Espaciado interno para los enlaces */
  color: white; /* Color del texto */
  text-decoration: none; /* Elimina el subrayado */
}

.btn-reserve {
  background-color: #007bff; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  border: none; /* Sin borde */
  padding: 10px 15px; /* Espaciado interno del botón */
  cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
  border-radius: 5px; /* Bordes redondeados */
  display: block; /* Hacer que el botón ocupe todo el ancho */
}

.categoria-imagen {
  width: 100%; /* Ajusta el tamaño según sea necesario */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 8px; /* Bordes redondeados */
  margin-bottom: 10px; /* Espacio debajo de la imagen */
}

.menu-container {
  border: 1px solid #fff; /* Bordes blancos */
  padding: 20px;
  width: 90%;
  text-align: left;
  margin: 5%;
  background: black;
}

.menu-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #fff; /* Línea blanca debajo del título */
  color: white;
  padding-bottom: 5px;
}

.menu-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  color: white;
}

.menu-list li {
  margin-left: 10%;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}
.menu-list li:hover {
  animation: backwards;
}


/* styles.css */

#carrito {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
  background-color: #000;
  color: wheat;
}

#lista-carrito {
  list-style-type: none;
  padding: 0;
}

#lista-carrito li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/*menu flotante carrito*/
.boton-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background-color: #476074;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none; /* Oculto por defecto */
}

.boton-flotante:hover {
  background-color: #476074;
}

.hidden {
  display: none;
}