/* ============================================================
   plantas.css — estilos exclusivos de pages/plantas.html
   ============================================================ */

/* ── CARD PLANTA ── */
.card-planta {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--crema-oscura);
  transition: var(--transicion);
}
.card-planta:hover {
  box-shadow: var(--sombra-media);
  transform: translateY(-4px);
  border-color: var(--verde-menta);
}
.card-planta__img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.card-planta__body { padding: 16px; }
.card-planta__cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-claro);
  margin-bottom: 6px;
}
.card-planta__name {
  font-size: 1rem;
  color: var(--verde-oscuro);
  font-weight: 600;
}

.plantas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .plantas-grid { grid-template-columns: repeat(2, 1fr); }
}