body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
header {
  background-color: #772537;
  color: white;
  text-align: center;
  padding: 20px;
}
h1 {
  margin: 0;
}
h2 {
  text-align: center;
}
#searchBar {
  padding: 10px;
  width: 80%;
  margin-top: 10px;
}
#filters {
  background-color: #fff;
  padding: 20px;
  margin: 20px auto;
  width: 80%;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#filters select {
  margin: 10px 0;
  padding: 10px;
  width: 100%;
}
#restaurants {
  padding: 20px;
  margin: 20px auto;
  background-color: #fff;
  width: 90%;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(250px, 1fr)
  ); /* Ajusta automáticamente las columnas */
  gap: 20px; /* Espacio entre los elementos */
  min-height: 90vh; /* Altura mínima del contenedor, para evitar que se haga más grande de lo que necesitamos */
}
#restaurants h2 {
  margin: 0;
  padding-bottom: 10px;
}
.restaurant {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribuye el contenido */
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  max-height: 670px; /* Limita la altura máxima de las tarjetas */
  overflow: hidden; /* Evita el desbordamiento de contenido */
}
.restaurant p {
  flex-grow: 1; /* Hace que los párrafos ocupen el espacio disponible de manera equitativa */
  font-size: 14px; /* Ajusta el tamaño de la fuente */
  margin: 10px 0; /* Añade margen en la parte superior e inferior para separar los párrafos */
  line-height: 1.6; /* Aumenta el espacio entre las líneas del texto */
  overflow: hidden; /* Evita el desbordamiento de texto fuera de los contenedores */
  text-overflow: ellipsis; /* Muestra puntos suspensivos si el texto es demasiado largo */
  height: auto; /* Permite que el párrafo tenga la altura necesaria sin forzarlo */
}

.restaurant-img {
  width: 100%; /* La imagen tomará todo el ancho del contenedor */
  height: auto; /* La altura se ajustará proporcionalmente */
  max-width: 100%; /* Nunca será más ancha que su contenedor */
  max-height: 200px; /* Limitar la altura máxima, puedes ajustar el valor según tus necesidades */
  object-fit: cover; /* Mantiene la proporción sin deformar la imagen */
  margin-top: 10px;
  border-radius: 5px;
  object-fit: contain; /* Muestra la imagen completa sin recortes */
}
.restaurant-details {
  max-height: 200px; /* Ajusta la altura máxima según lo que necesites */
  overflow-y: auto; /* Muestra el scroll vertical si el contenido excede la altura */
  padding-right: 10px; /* Añadir algo de espacio para que el scroll no esté pegado al borde */
}

.restaurant-details p {
  margin-bottom: 10px; /* Espacio entre los <p> */
}

a {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  display: block; /* Hace que el enlace ocupe todo el ancho */
  width: 100%;
  margin-top: 10px;
}
a button {
  background-color: #772537;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%; /* Hace que el botón ocupe todo el ancho */
  display: flex;
  justify-content: center;
  align-items: center;
}
a button:hover {
  background-color: #9e2a47; /* Color de fondo al pasar el ratón */
}
.descuento {
  background-color: #772537; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Sin borde */
  padding: 10px 20px; /* Espaciado interno */
  font-size: 16px; /* Tamaño de la fuente */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
  transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
  margin: 5px;
  font-weight: bold;
}
.descuento:hover {
  background-color: #a23454; /* Color de fondo al pasar el ratón */
}
#Cerrar {
  display: inline-block;
  background-color: #a23454; /* Color rojo anaranjado */
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s ease-in-out;
  text-align: center; /* Centra el texto horizontalmente */
  line-height: 30px;
}
#Cerrar:hover {
  background-color: #a23454; /* Rojo más oscuro para el hover */
  transform: scale(1.05); /* Hace que crezca un poco cuando pasa el cursor */
}

#Cerrar:active {
  transform: scale(1); /* Restaura el tamaño cuando se hace clic */
}