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/ProcessSteps.astro

@@ -18,6 +18,18 @@ const steps = [
 <section class="py-24 md:py-32 relative overflow-hidden" style="background: var(--hds-bg-soft);" id="como-trabajamos">
   <div class="absolute inset-0 pointer-events-none" style="background: var(--hds-gradient-section);" aria-hidden="true"></div>
 
+  <!-- Background photo: team working (very subtle, blurred) -->
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.05; backdrop-filter: blur(4px);">
+    <img
+      src="/images/photos/Manos-escribiendo-teclado-café_1200x800.webp"
+      alt=""
+      class="w-full h-full object-cover"
+      loading="lazy"
+      decoding="async"
+      onerror="this.style.display='none'"
+    />
+  </div>
+
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="max-w-3xl mb-16 md:mb-20 reveal">
       <SectionEyebrow text={t('process.eyebrow')} />