/* Incluir la tipografía desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); /* Aquí puedes elegir la tipografía que prefieras */

/* Estilos generales para el contenedor de los filtros */

/* Estilos para los contenedores de los filtros */

/* Estilos generales para los botones de categorías */
.category-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
  border: 2px solid #ddd; /* Borde suave */
  border-radius: 10px; /* Bordes redondeados */
  background: white; /* Fondo blanco */
  color: black; /* Color del texto negro */
  cursor: pointer;
  font-size: 16px;
  font-family: 'Roboto', sans-serif; /* Aplicando tipografía personalizada */
  font-weight: 700; /* Asegurando que esté en negrita */
  box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: box-shadow 500ms, font-size 500ms; /* Suaviza los cambios de sombra y tamaño de fuente */
  width: 500px;
  height: 50px;
  outline: none;
  flex: 1 1 auto

}

/* Estilo para el botón de categoría seleccionado */
.category-button.selected {
  background-color: #f4f4f4 !important; /* Fondo gris claro para el botón seleccionado */
  border: 2px solid rgb(155, 2, 2) !important; /* Borde rojo */
  color: black; /* Mantener texto negro */
  box-shadow: 0 0 8px rgba(255, 123, 123, 0.5); /* Sombra resaltada en selección */

}

/* Estilo para el hover de los botones de categorías */
.category-button:hover {
  background-color: #f4f4f4; /* Fondo gris claro al hacer hover */
  box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
  font-size: 15px; /* Reduce el tamaño del texto al hacer hover */
  transition: 500ms;
}



/* Ajuste para los productos */
/* Media Query para pantallas pequeñas */
@media (min-width: 768px) {
}

/* Media Query para pantallas grandes */
@media (min-width: 1024px) {

}