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

@@ -12,9 +12,9 @@ interface Props {
 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 },
+  { Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey, photo: '/images/photos/Manos-escribiendo-teclado-café_1200x800' },
+  { Icon: SovereigntyIcon, titleKey: 'diff.sovereignty.title' as TranslationKey, bodyKey: 'diff.sovereignty.body' as TranslationKey, photo: null },
+  { Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey, photo: '/images/photos/Monitor-closeup-grafana-office_1920x1280' },
 ];
 ---
 <section class="py-24 md:py-32" style="background: var(--hds-bg-soft);" id="por-que-elegirnos">
@@ -31,16 +31,30 @@ const items = [
 
     <div class="diff-grid">
       {items.map((item, i) => (
-        <article class="glass-card diff-card p-8 flex flex-col" data-diff-index={i}>
-          <div class="icon-circle mb-6">
-            <item.Icon class="w-7 h-7" />
+        <article class="glass-card diff-card p-8 flex flex-col relative overflow-hidden" data-diff-index={i}>
+          {item.photo && (
+            <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.06;">
+              <img
+                src={`${item.photo}.webp`}
+                alt=""
+                class="w-full h-full object-cover"
+                loading="lazy"
+                decoding="async"
+                onerror="this.style.display='none'"
+              />
+            </div>
+          )}
+          <div class="relative z-10 flex flex-col flex-grow">
+            <div class="icon-circle mb-6">
+              <item.Icon class="w-7 h-7" />
+            </div>
+            <h3 class="text-xl md:text-2xl font-semibold mb-4" 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>
           </div>
-          <h3 class="text-xl md:text-2xl font-semibold mb-4" 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>