feat: integrar fotos reales en hero, cards, nosotros y process steps

- Hero: Maldonado aerial como background sutil (opacity 0.12)
- DifferenceCards: fotos en cards Soporte (manos) e Infraestructura (monitor)
- nosotros + en/about: bento grid de 5 fotos con captions honestos
- ProcessSteps: background sutil de manos escribiendo (opacity 0.05)
- Imágenes en public/images/photos/ (JPG + WebP + mobile resizes)

src/components/Hero.astro

@@ -20,6 +20,25 @@ const { t, whatsappUrl } = Astro.props;
     aria-hidden="true"
   ></div>
 
+  <!-- Background photo: Maldonado coastline (subtle) -->
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+    <picture>
+      <source type="image/webp" srcset="/images/photos/Bahía-aérea-atardecer-mar_1920x800.webp 1920w, /images/photos/Bahía-aérea-atardecer-mar_750.webp 750w" sizes="100vw" />
+      <img
+        src="/images/photos/Bahía-aérea-atardecer-mar_1920x800.jpg"
+        alt=""
+        width="1920" height="800"
+        class="w-full h-full object-cover"
+        style="opacity: 0.12;"
+        loading="eager"
+        fetchpriority="high"
+        decoding="async"
+      />
+    </picture>
+    <!-- Gradient overlay for text readability -->
+    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 30%, transparent 60%, var(--hds-bg) 100%);"></div>
+  </div>
+
   <!-- Floating decorative shapes (parallax) -->
   <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
     <div id="hero-float-top" class="absolute opacity-30" style="top: 15%; right: 12%;">