---
interface Props {
  icon: string;
  title: string;
  description: string;
  href?: string;
}
const { icon, title, description, href = '#contacto' } = Astro.props;
---

<div class="fade-in group bg-gris border border-magenta/15 hover:border-magenta/50 rounded-2xl p-8 transition-all duration-300 flex flex-col">
  <div class="text-4xl mb-5">{icon}</div>
  <h3 class="font-display font-semibold text-xl text-hueso mb-3">{title}</h3>
  <p class="font-body text-hueso/65 text-sm leading-relaxed flex-1">{description}</p>
  <a
    href={href}
    class="mt-6 inline-flex items-center gap-1.5 text-magenta text-sm font-display font-medium hover:gap-3 transition-all duration-200"
  >
    Saber más <span aria-hidden="true">→</span>
  </a>
</div>