/*
   ==========================================================================
   COMPONENTE: Categorías (mobile-first)
   Tarjeta plana: foto arriba, texto abajo — sin overlays ni degradados.
   ========================================================================== */
.category-row {
  display: grid;
  /* minmax(0, 1fr): con 1fr a secas cada columna se estira al ancho mínimo
     de su texto ("Huerta & aromáticas" + "N especies") y a 320px la fila
     se pasaba del ancho de la pantalla. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.category-card { display: block; transition: transform 0.22s ease; }
.category-card:hover { transform: translateY(-3px); }

/* La tarjeta también usa [data-reveal] (ver base.css) para la aparición al
   scroll, que anima el mismo `transform` que el hover pero mucho más lento
   — se pisarían. Acá se le da su propia transición completa (más lenta) en
   reposo, y se vuelve a la de 0.22s en hover para que ese efecto siga ágil.
   Además, cada tarjeta se retrasa un poco más que la anterior para que la
   fila entre de a una, no toda junta. */
.category-card[data-reveal] { transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease; }
.category-card[data-reveal]:hover { transition-duration: 0.22s; }

.category-row [data-reveal]:nth-child(1) { transition-delay: 0s; }
.category-row [data-reveal]:nth-child(2) { transition-delay: 0.12s; }
.category-row [data-reveal]:nth-child(3) { transition-delay: 0.24s; }
.category-row [data-reveal]:nth-child(4) { transition-delay: 0.36s; }

.category-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s ease;
}
.category-card:hover .category-photo { box-shadow: var(--shadow-md); }

.category-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease, opacity 0.18s ease;
}
.category-card:hover .category-photo img { opacity: 0.9; transform: scale(1.04); }

.category-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.category-info strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text-main);
  transition: color 0.18s ease;
}
.category-card:hover .category-info strong { color: var(--color-accent); }

.category-info span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}

/* --------------------------------------------------------------------------
   Desde tablet
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .category-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}