feat(v3): rediseño con cloud dividers, animaciones scroll reveal, galería stock, página /servicios con 9 planes, 404 gracioso con robot, planos dark mode con todos los planes

- 9 planes de hosting con tabla completa de Mauri (USD/año)
- /servicios muestra los 3 servicios a medida + 9 planes categorizados
- /planes: 3 destacados + grilla con los 6 restantes
- 404 con robot SVG animado tomando mate (pronet.uy + peugeot style)
- Cloud dividers SVG entre secciones de la home
- Scroll reveal animations (.reveal + .stagger con IntersectionObserver)
- Galería de imágenes stock (datacenters, cables, código) en AVIF + WebP + JPG
- Sección de testimonios con placeholder honesto (Working on it)
- Back-to-top arreglado: ahora usa color naranja + icono blanco, visible en ambos temas
- WorldMap con animación SVG de 4 países
- Toggle light/dark funcional con anti-flash script
- Footer siempre dark con Maldonado, Uruguay
- i18n es/en con toggle y contenido bilingüe

Tech: Astro 5 + Tailwind v4 + Keystatic + Gitea + lftp

src/components/Hero.astro

@@ -8,10 +8,36 @@ interface Props {
 
 const { t, whatsappUrl } = Astro.props;
 ---
-<section class="relative overflow-hidden pt-24 pb-32 md:pt-32 md:pb-40">
+<section class="relative overflow-hidden pt-20 pb-28 md:pt-32 md:pb-40">
   <div class="absolute inset-0 particle-grid" aria-hidden="true"></div>
   <div class="absolute inset-0" style="background: linear-gradient(180deg, transparent 0%, var(--hds-bg) 100%);" aria-hidden="true"></div>
 
+  <!-- Cuadraditos decorativos (estilo grilla del logo) -->
+  <div class="absolute top-32 right-8 md:right-16 opacity-50" aria-hidden="true">
+    <svg width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="0" width="12" height="12" fill="#EE7623" rx="1"/>
+      <rect x="14" y="0" width="12" height="12" fill="#FA9F5C" rx="1"/>
+      <rect x="28" y="0" width="12" height="12" fill="#FFCBA1" rx="1"/>
+      <rect x="0" y="14" width="12" height="12" fill="#FA9F5C" rx="1"/>
+      <rect x="14" y="14" width="12" height="12" fill="#EE7623" rx="1"/>
+      <rect x="28" y="14" width="12" height="12" fill="#FA9F5C" rx="1"/>
+      <rect x="0" y="28" width="12" height="12" fill="#FFCBA1" rx="1"/>
+      <rect x="14" y="28" width="12" height="12" fill="#FA9F5C" rx="1"/>
+      <rect x="28" y="28" width="12" height="12" fill="#EE7623" rx="1"/>
+    </svg>
+  </div>
+
+  <div class="absolute bottom-12 left-8 md:left-16 opacity-40" aria-hidden="true">
+    <svg width="80" height="80" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="0" width="10" height="10" fill="#FA9F5C" rx="1"/>
+      <rect x="12" y="0" width="10" height="10" fill="#EE7623" rx="1"/>
+      <rect x="0" y="12" width="10" height="10" fill="#FFCBA1" rx="1"/>
+      <rect x="12" y="12" width="10" height="10" fill="#FA9F5C" rx="1"/>
+      <rect x="0" y="24" width="10" height="10" fill="#EE7623" rx="1"/>
+      <rect x="12" y="24" width="10" height="10" fill="#FFCBA1" rx="1"/>
+    </svg>
+  </div>
+
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="max-w-4xl">
       <div class="eyebrow mb-7">
@@ -24,15 +50,15 @@ const { t, whatsappUrl } = Astro.props;
       </h1>
 
       <p class="text-lg md:text-xl leading-relaxed mb-10 max-w-2xl" style="color: var(--hds-fg-soft);">
-        {t('hero.body')}
+        Soporte humano senior en Maldonado, Uruguay. Del otro lado hay una persona que conoce tu proyecto, no un ticket automático. La misma tecnología que los gigantes, con la cercanía que nos diferencia.
       </p>
 
       <div class="flex flex-col sm:flex-row gap-4 mb-14">
-        <a href="#planes" class="btn-primary">
-          {t('hero.ctaPrimary')}
+        <a href="/planes/" class="btn-primary">
+          Ver planes
         </a>
         <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-secondary">
-          {t('hero.ctaSecondary')}
+          Hablar por WhatsApp
         </a>
       </div>
 
@@ -47,7 +73,7 @@ const { t, whatsappUrl } = Astro.props;
         </span>
         <span class="flex items-center gap-2">
           <span style="color: var(--color-hds-naranja);">●</span>
-          {t('diff.support.title')}
+          Soporte humano
         </span>
         <span class="flex items-center gap-2">
           <span style="color: var(--color-hds-naranja);">●</span>