CTA — Gradient Banner

---
/**
 * cta-01 — Banner CTA a ancho completo con fondo degradado.
 * Bloque Astro puro: cero JS, cero dependencias.
 */
interface Props {
  title: string;
  description: string;
  primaryCta: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  class?: string;
}
const { title, description, primaryCta, secondaryCta, class: className } = Astro.props;

const btn =
  'inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent px-2.5 text-base font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px';
const btnSecondary = 'bg-secondary text-secondary-foreground hover:bg-secondary/80';
const btnGhostOnGradient = 'border border-white/30 text-white hover:bg-white/10 hover:text-white';
---

<section class:list={['relative w-full overflow-hidden px-6 py-24 md:py-32', className]}>
  <div class="absolute inset-0 bg-gradient-to-r from-primary to-violet-600"></div>
  <div class="relative mx-auto max-w-3xl text-center">
    <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">{title}</h2>
    <p class="mt-4 text-lg text-white/80">{description}</p>
    <div class="mt-10 flex items-center justify-center gap-4">
      <a href={primaryCta.href} class:list={[btn, btnSecondary]}>{primaryCta.label}</a>
      {secondaryCta && (
        <a href={secondaryCta.href} class:list={[btn, btnGhostOnGradient]}>{secondaryCta.label}</a>
      )}
    </div>
  </div>
</section>