/*
  Complemento del CSS de Webflow para el recetario. El export traía las siete
  recetas de ejemplo con la foto cableada en una clase, así que aquí vive lo
  que hace falta para servir fotos reales, los filtros de tiempo y dificultad,
  y la liga de un ingrediente a su producto.
*/

.bg-section.con-foto {
  background-image: none;
}

.bg-section .imagen-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.filtros-receta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.filtro-receta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.filtro-titulo {
  color: #5e4e74;
  font-size: 14px;
}

.section-receta .barra-orden {
  margin-bottom: 32px;
}

/* El conejito solo aparece si el ingrediente está ligado al catálogo, así que
   conviene que se note que es un enlace y no un adorno. */
.link-item-receta {
  transition: transform .2s;
}

.link-item-receta:hover {
  transform: translateX(3px);
}

.wrap-tags a.tag-receta {
  text-decoration: none;
}