/* Estilo para la sección de menú */
.menu {
    text-align: center;
    padding: 50px 0;
  }
  
  .texto-platos {
    font-size: 2.5rem;
    margin-bottom: 30px;
  }
  
  .platos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -10px; /* Añade margen negativo para compensar el margen en los elementos */
  }
  
  .plato {
    width: calc(25% - 20px); /* Establece el ancho de cada plato y ajusta el margen */
    margin: 10px;
    text-align: center;
  }
  
  .plato img {
  width: 100%;
  height: 200px;
  object-fit: cover;       /* ÉSTA ES LA LÍNEA MÁGICA: evita que se deformen */
  object-position: center; /* Opcional: centra el plato en el recorte */
  margin-bottom: 15px; 
  border-radius: 8px;      /* Opcional: un toque estético para redondear esquinas */
}

  
  /* Media queries para hacerlo responsive */
  @media (max-width: 1024px) {
    .plato {
      width: calc(33.33% - 20px); /* Mostrar tres elementos por fila en pantallas más pequeñas */
    }
  }
  
  @media (max-width: 768px) {
    .plato {
      width: calc(50% - 20px); /* Mostrar dos elementos por fila en pantallas más pequeñas */
    }
  }
  
  @media (max-width: 480px) {
    .plato {
      width: 100%; /* Mostrar un elemento por fila en dispositivos muy pequeños */
    }
  }