feat: sitio hostingdelsur.net v2 con Astro 5, Tailwind v4, soporte light/dark, i18n es/en, Keystatic CMS, reCAPTCHA v3

- Arista Pro Alternate Regular self-hosted (font corporativa)
- Toggle theme con CSS variables y @custom-variant dark
- 6 servicios en 3 categorías (Hosting & Correo / Diseño & Contenido / Infraestructura)
- 3 planes destacados (Básico USD 59, Institucional USD 129, E-commerce USD 219)
- Datacenters en 4 países (Canadá, USA, Alemania, Uruguay) sin ciudades en el sitio
- Sede operativa en Maldonado, Uruguay
- i18n es/en con contenido duplicado en Keystatic
- Endpoint PHP para form de contacto con PHPMailer + reCAPTCHA v3 + honeypot + rate limit
- WorldMap con animación SVG de los 4 países
- 29 páginas generadas, 0 JS por default
- Sitemap auto + robots.txt
- JSON-LD Organization + ProfessionalService con areaServed

src/components/DifferenceCards.astro

@@ -0,0 +1,47 @@
+---
+import SectionEyebrow from './SectionEyebrow.astro';
+import type { TranslationKey } from '@/i18n/ui';
+import MateIcon from './icons/MateIcon.astro';
+import SovereigntyIcon from './icons/SovereigntyIcon.astro';
+import GlobeIcon from './icons/GlobeIcon.astro';
+
+interface Props {
+  t: (key: TranslationKey) => string;
+}
+const { t } = Astro.props;
+
+const items = [
+  { Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey },
+  { Icon: SovereigntyIcon, titleKey: 'diff.sovereignty.title' as TranslationKey, bodyKey: 'diff.sovereignty.body' as TranslationKey },
+  { Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey },
+];
+---
+<section class="py-20 md:py-28" style="background: var(--hds-bg-soft);">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="max-w-3xl mb-14 md:mb-20">
+      <SectionEyebrow text={t('diff.eyebrow')} />
+      <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
+        {t('diff.title')}
+      </h2>
+      <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
+        {t('diff.subtitle')}
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      {items.map((item) => (
+        <article class="service-card">
+          <div class="icon-circle mb-6">
+            <item.Icon class="w-7 h-7" />
+          </div>
+          <h3 class="text-xl md:text-2xl font-semibold mb-3" style="color: var(--hds-fg);">
+            {t(item.titleKey)}
+          </h3>
+          <p class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
+            {t(item.bodyKey)}
+          </p>
+        </article>
+      ))}
+    </div>
+  </div>
+</section>