Hero cloud + Punta del Este photo, remove DifferenceCards photos, ServicesSection bg photo, ProcessSteps contrast, remove Nosotros bento, WorldMap real mapamundi, Instructivos Luciano datacenter photo

src/components/DifferenceCards.astro

@@ -12,12 +12,12 @@ interface Props {
 const { t } = Astro.props;
 
 const items = [
-  { Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey, photo: '/images/photos/hands-typing-coffee-1200x800' },
+  { 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, photo: null },
+  { 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, photo: '/images/photos/monitor-grafana-1920x1280' },
+  { Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey },
 ];
 ---
-<section class="py-24 md:py-32" style="background: var(--hds-bg-soft);" id="por-que-elegirnos">
+<section class="py-24 md:py-32" style="background: var(--hds-bg);" id="por-que-elegirnos">
   <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('diff.eyebrow')} />
@@ -31,20 +31,8 @@ const items = [
 
     <div class="diff-grid">
       {items.map((item, i) => (
-        <article class="glass-card diff-card p-8 flex flex-col relative overflow-hidden" data-diff-index={i}>
+        <article class="glass-card diff-card p-8 flex flex-col" data-diff-index={i}>
-          {item.photo && (
+          <div class="flex flex-col flex-grow">
-            <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.40;">
-              <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>
@@ -106,7 +94,7 @@ const items = [
     .diff-grid {
       grid-template-columns: repeat(3, 1fr);
       gap: 1.5rem;
-      align-items: start;
+      align-items: stretch;
     }
   }
 

src/components/Hero.astro

@@ -20,14 +20,14 @@ const { t, whatsappUrl } = Astro.props;
     aria-hidden="true"
   ></div>
 
-  <!-- Background photo: Maldonado coastline (subtle) -->
+  <!-- Background photo: Punta del Este coastline -->
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
     <picture>
-      <source type="image/webp" srcset="/images/photos/maldonado-aerial-1920x800.webp 1920w, /images/photos/maldonado-aerial-750.webp 750w" sizes="100vw" />
+      <source type="image/webp" srcset="/images/photos/punta-del-este-1920x1080.webp 1920w, /images/photos/punta-del-este-750.webp 750w" sizes="100vw" />
       <img
-        src="/images/photos/maldonado-aerial-1920x800.jpg"
+        src="/images/photos/punta-del-este-1920x1080.jpg"
         alt=""
-        width="1920" height="800"
+        width="1920" height="1080"
         class="w-full h-full object-cover"
         style="opacity: 0.55;"
         loading="eager"
@@ -74,18 +74,24 @@ const { t, whatsappUrl } = Astro.props;
     </div>
   </div>
 
-  <!-- Decorative glass ring (subtle) -->
+  <!-- Decorative cloud (subtle) -->
   <div
     id="hero-glass-ring"
-    class="absolute pointer-events-none rounded-full opacity-0"
+    class="absolute pointer-events-none opacity-0"
-    style="width: min(600px, 80vw); height: min(600px, 80vw);
+    style="width: min(520px, 75vw); top: 12%; right: 5%; filter: blur(1px);"
-           top: 50%; left: 70%; transform: translate(-50%, -50%);
-           border: 1px solid var(--glass-border);
-           background: var(--glass-bg);
-           backdrop-filter: blur(40px);
-           -webkit-backdrop-filter: blur(40px);"
     aria-hidden="true"
-  ></div>
+  >
+    <svg viewBox="0 0 240 140" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: auto;">
+      <path
+        d="M 55,110 C 30,110 18,92 25,72 C 12,60 18,40 38,38 C 44,18 68,16 80,30 C 92,12 118,16 125,34 C 140,22 165,28 170,46 C 190,44 205,62 198,78 C 215,82 210,110 190,110 Z"
+        fill="white" opacity="0.18"
+      />
+      <path
+        d="M 70,115 C 50,115 40,100 45,85 C 35,76 40,62 55,60 C 60,45 78,44 87,55 C 97,42 117,45 122,58 C 135,50 152,55 156,68 C 170,67 178,80 173,92 C 185,95 182,115 168,115 Z"
+        fill="white" opacity="0.12"
+      />
+    </svg>
+  </div>
 
   <!-- Content -->
   <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 md:py-40">

src/components/ProcessSteps.astro

@@ -46,26 +46,27 @@ const steps = [
           d="M 12.5 35 C 22 35, 28 58, 37.5 58 C 47 58, 53 28, 62.5 28 C 72 28, 78 50, 87.5 50"
           fill="none"
           stroke="var(--color-hds-naranja)"
-          stroke-width="2"
+          stroke-width="4"
           stroke-linecap="round"
           vector-effect="non-scaling-stroke"
           stroke-dasharray="200"
           stroke-dashoffset="200"
-          opacity="0.5"
+          opacity="0.85"
+          filter="drop-shadow(0 2px 4px rgba(238,118,35,0.4))"
         />
       </svg>
 
       <div class="process-circles-row">
         {steps.map((step, i) => (
           <div class="process-circle-col" style={`top: ${step.yPct}%;`}>
-            <div class="process-circle glass-card" data-step-index={i}>
+            <div class="process-circle" data-step-index={i}>
               <span class="font-display process-circle-num">{step.num}</span>
             </div>
             <div class="process-circle-text">
-              <h3 class="text-lg font-semibold mb-1.5" style="color: var(--hds-fg);">
+              <h3 class="text-lg font-bold mb-1.5" style="color: var(--hds-fg);">
                 {t(step.titleKey)}
               </h3>
-              <p class="text-sm leading-relaxed" style="color: var(--hds-fg-soft);">
+              <p class="text-sm leading-relaxed font-medium" style="color: var(--hds-fg-soft);">
                 {t(step.bodyKey)}
               </p>
             </div>
@@ -82,14 +83,14 @@ const steps = [
       <div class="process-mobile-steps">
         {steps.map((step, i) => (
           <div class="process-mobile-row" data-step-index={i}>
-            <div class="process-circle process-circle-mobile glass-card">
+            <div class="process-circle process-circle-mobile">
               <span class="font-display process-circle-num">{step.num}</span>
             </div>
             <div class="flex-1">
-              <h3 class="text-base font-semibold mb-1" style="color: var(--hds-fg);">
+              <h3 class="text-base font-bold mb-1" style="color: var(--hds-fg);">
                 {t(step.titleKey)}
               </h3>
-              <p class="text-sm leading-relaxed" style="color: var(--hds-fg-soft);">
+              <p class="text-sm leading-relaxed font-medium" style="color: var(--hds-fg-soft);">
                 {t(step.bodyKey)}
               </p>
             </div>
@@ -226,11 +227,14 @@ const steps = [
     height: 76px;
     border-radius: 50%;
     flex-shrink: 0;
+    background: #ffffff;
+    border: 3px solid var(--color-hds-naranja);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(238,118,35,0.15);
   }
 
   .process-circle-num {
     font-size: 1.6rem;
-    font-weight: 500;
+    font-weight: 700;
     color: var(--color-hds-naranja);
     line-height: 1;
   }
@@ -249,10 +253,10 @@ const steps = [
 
   .process-mobile-track {
     position: absolute;
-    left: 37px;
+    left: 66px;
-    top: 38px;
+    top: 28px;
-    bottom: 38px;
+    bottom: 28px;
-    width: 2px;
+    width: 3px;
     background: var(--hds-line);
     border-radius: 2px;
     overflow: hidden;

src/components/ServicesSection.astro

@@ -74,8 +74,12 @@ const services = [
   },
 ];
 ---
-<section id="servicios" class="py-20 md:py-28" style="background: var(--hds-bg);">
+<section id="servicios" class="py-20 md:py-28 relative overflow-hidden" style="background: var(--hds-bg);">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+    <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.12;" loading="lazy" decoding="async" />
+    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 30%, transparent 70%, var(--hds-bg) 100%);"></div>
+  </div>
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="max-w-3xl mb-14 md:mb-20 reveal">
       <SectionEyebrow text={t('services.eyebrow')} />
       <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">

src/components/icons/WorldMap.astro

@@ -6,64 +6,73 @@ const { class: className = '' } = Astro.props;
 ---
 <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" class={className} aria-hidden="true">
   <defs>
-    <linearGradient id="mapGrad" x1="0" x2="0" y1="0" y2="1">
+    <style>
-      <stop offset="0" stop-color="#EE7623" stop-opacity="0.05"/>
+      .mapland { fill: rgba(238,118,35,0.06); stroke: rgba(238,118,35,0.35); stroke-width: 1; }
-      <stop offset="1" stop-color="#EE7623" stop-opacity="0.12"/>
+      .maplabel { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700; fill: var(--hds-fg); }
-    </linearGradient>
+      .mapsub { font-family: system-ui, sans-serif; font-size: 10px; fill: var(--hds-fg-muted); }
+      .dot-pulse { animation: dotPulse 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
+      .dot-pulse-2 { animation-delay: 0.5s; }
+      .dot-pulse-3 { animation-delay: 1s; }
+      .dot-pulse-4 { animation-delay: 1.5s; }
+      @keyframes dotPulse {
+        0%, 100% { opacity: 0.3; r: 8; }
+        50% { opacity: 0; r: 18; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .dot-pulse { animation: none; }
+      }
+    </style>
   </defs>
 
-  <path
+  <!-- Simplified world map continents (equirectangular projection) -->
-    d="M 130,140 Q 90,180 110,230 Q 90,290 140,330 Q 180,360 230,340 Q 280,330 290,290 Q 320,250 300,210 Q 280,160 230,140 Q 180,120 130,140 Z"
+  <!-- North America -->
-    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
+  <path class="mapland" d="M 120,80 L 180,75 L 240,80 L 280,95 L 295,120 L 285,150 L 270,170 L 240,185 L 210,190 L 180,185 L 155,170 L 135,150 L 125,125 L 120,100 Z M 180,195 L 210,200 L 225,215 L 215,230 L 195,235 L 180,225 Z M 250,175 L 270,180 L 275,195 L 260,200 L 250,190 Z"/>
-  />
+  <!-- Greenland -->
-  <path
+  <path class="mapland" d="M 310,60 L 345,55 L 365,70 L 360,95 L 340,105 L 320,95 L 310,80 Z"/>
-    d="M 280,180 Q 320,150 380,160 Q 440,150 470,180 Q 480,210 460,240 Q 420,270 380,260 Q 330,250 300,230 Q 270,210 280,180 Z"
+  <!-- South America -->
-    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
+  <path class="mapland" d="M 240,230 L 270,225 L 290,240 L 295,270 L 290,300 L 280,330 L 265,360 L 250,375 L 235,370 L 225,340 L 220,310 L 225,280 L 230,255 Z M 255,220 L 275,215 L 285,225 L 275,230 L 260,228 Z"/>
-  />
+  <!-- Europe -->
-  <path
+  <path class="mapland" d="M 460,90 L 500,85 L 530,90 L 545,105 L 540,125 L 520,135 L 495,135 L 475,130 L 460,115 Z M 475,80 L 490,75 L 500,82 L 490,88 L 478,85 Z M 500,75 L 515,70 L 525,78 L 515,82 L 502,80 Z"/>
-    d="M 470,200 Q 510,180 560,190 Q 610,200 620,240 Q 600,280 550,290 Q 500,290 470,260 Q 450,230 470,200 Z"
+  <!-- Africa -->
-    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
+  <path class="mapland" d="M 470,150 L 510,145 L 545,150 L 560,170 L 565,200 L 555,230 L 535,260 L 510,280 L 485,285 L 465,275 L 450,250 L 445,220 L 450,190 L 460,165 Z M 460,140 L 480,135 L 490,145 L 475,150 Z"/>
-  />
+  <!-- Asia -->
-  <path
+  <path class="mapland" d="M 550,80 L 620,75 L 700,80 L 760,90 L 800,105 L 820,125 L 815,150 L 790,165 L 750,170 L 710,165 L 670,160 L 630,155 L 595,150 L 570,140 L 555,120 L 550,100 Z M 680,170 L 710,175 L 720,190 L 710,205 L 690,210 L 675,200 L 670,185 Z M 750,180 L 780,185 L 795,200 L 785,215 L 765,220 L 745,210 Z M 800,170 L 830,175 L 840,190 L 825,200 L 805,195 Z"/>
-    d="M 620,290 Q 670,300 720,330 Q 770,360 800,400 Q 820,440 780,460 Q 730,470 680,440 Q 640,410 620,370 Q 600,330 620,290 Z"
+  <!-- Australia -->
-    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
+  <path class="mapland" d="M 770,290 L 820,285 L 855,290 L 875,305 L 870,325 L 845,340 L 810,345 L 780,340 L 765,325 L 760,305 Z"/>
-  />
+  <!-- UK / Ireland -->
+  <path class="mapland" d="M 455,95 L 465,90 L 470,100 L 463,108 L 455,103 Z M 448,102 L 455,98 L 457,106 L 450,108 Z"/>
 
+  <!-- Data points: Canada, USA, Germany, Uruguay -->
+  <!-- Canada -->
   <g>
-    <circle cx="170" cy="240" r="8" fill="var(--color-hds-naranja)">
+    <circle class="dot-pulse" cx="195" cy="115" r="8" fill="var(--color-hds-naranja)" opacity="0.3"/>
-      <animate attributeName="r" values="6;10;6" dur="2.5s" repeatCount="indefinite"/>
+    <circle cx="195" cy="115" r="6" fill="var(--color-hds-naranja)"/>
-      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" repeatCount="indefinite"/>
+    <circle cx="195" cy="115" r="2.5" fill="white"/>
-    </circle>
+    <text class="maplabel" x="195" y="98" text-anchor="middle">Canadá</text>
-    <circle cx="170" cy="240" r="5" fill="var(--color-hds-naranja)"/>
-    <text x="170" y="220" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Canadá</text>
   </g>
 
+  <!-- USA -->
   <g>
-    <circle cx="370" cy="210" r="8" fill="var(--color-hds-naranja)">
+    <circle class="dot-pulse dot-pulse-2" cx="210" cy="155" r="8" fill="var(--color-hds-naranja)" opacity="0.3"/>
-      <animate attributeName="r" values="6;10;6" dur="2.5s" begin="0.4s" repeatCount="indefinite"/>
+    <circle cx="210" cy="155" r="6" fill="var(--color-hds-naranja)"/>
-      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="0.4s" repeatCount="indefinite"/>
+    <circle cx="210" cy="155" r="2.5" fill="white"/>
-    </circle>
+    <text class="maplabel" x="210" y="178" text-anchor="middle">USA</text>
-    <circle cx="370" cy="210" r="5" fill="var(--color-hds-naranja)"/>
-    <text x="370" y="190" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">USA</text>
   </g>
 
+  <!-- Germany -->
   <g>
-    <circle cx="540" cy="230" r="8" fill="var(--color-hds-naranja)">
+    <circle class="dot-pulse dot-pulse-3" cx="505" cy="110" r="8" fill="var(--color-hds-naranja)" opacity="0.3"/>
-      <animate attributeName="r" values="6;10;6" dur="2.5s" begin="0.8s" repeatCount="indefinite"/>
+    <circle cx="505" cy="110" r="6" fill="var(--color-hds-naranja)"/>
-      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="0.8s" repeatCount="indefinite"/>
+    <circle cx="505" cy="110" r="2.5" fill="white"/>
-    </circle>
+    <text class="maplabel" x="505" y="93" text-anchor="middle">Alemania</text>
-    <circle cx="540" cy="230" r="5" fill="var(--color-hds-naranja)"/>
-    <text x="540" y="210" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Alemania</text>
   </g>
 
+  <!-- Uruguay (HQ — larger dot) -->
   <g>
-    <circle cx="720" cy="390" r="10" fill="var(--color-hds-naranja)">
+    <circle class="dot-pulse dot-pulse-4" cx="268" cy="335" r="10" fill="var(--color-hds-naranja)" opacity="0.3"/>
-      <animate attributeName="r" values="8;14;8" dur="2.5s" begin="1.2s" repeatCount="indefinite"/>
+    <circle cx="268" cy="335" r="7" fill="var(--color-hds-naranja)"/>
-      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="1.2s" repeatCount="indefinite"/>
+    <circle cx="268" cy="335" r="3" fill="white"/>
-    </circle>
+    <text class="maplabel" x="268" y="318" text-anchor="middle">Uruguay</text>
-    <circle cx="720" cy="390" r="6" fill="var(--color-hds-naranja)"/>
+    <text class="mapsub" x="268" y="355" text-anchor="middle">Sede operativa</text>
-    <circle cx="720" cy="390" r="2.5" fill="white"/>
-    <text x="720" y="370" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Uruguay</text>
-    <text x="720" y="425" text-anchor="middle" font-size="10" fill="var(--hds-fg-muted)">Sede operativa</text>
   </g>
 </svg>

src/pages/en/about.astro

@@ -62,58 +62,6 @@ const whatsappUrl = 'https://wa.me/59899812487';
     </div>
   </section>
 
-  <!-- Photo bento grid -->
-  <section class="py-16 md:py-20" style="background: var(--hds-bg);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="max-w-3xl mb-10 reveal">
-        <SectionEyebrow text="Behind the scenes" />
-        <h2 class="font-display leading-tight mt-5" style="font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--hds-fg);">
-          The people and the place
-        </h2>
-      </div>
-
-      <div class="photo-bento reveal">
-        <figure class="photo-bento-item photo-bento-lg">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/team-desk-mate-1920x1080.webp" />
-            <img src="/images/photos/team-desk-mate-1920x1080.jpg" alt="Team member working at desk with mate" width="1920" height="1080" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-          <figcaption>Our desk, Maldonado</figcaption>
-        </figure>
-
-        <figure class="photo-bento-item">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/hands-typing-coffee-1200x800.webp" />
-            <img src="/images/photos/hands-typing-coffee-1200x800.jpg" alt="Hands typing on keyboard with coffee" width="1200" height="800" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-        </figure>
-
-        <figure class="photo-bento-item">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/monitor-grafana-1920x1280.webp" />
-            <img src="/images/photos/monitor-grafana-1920x1280.jpg" alt="Monitoring dashboard closeup" width="1920" height="1280" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-        </figure>
-
-        <figure class="photo-bento-item photo-bento-wide">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/maldonado-aerial-1920x800.webp" />
-            <img src="/images/photos/maldonado-aerial-1920x800.jpg" alt="Maldonado coastline at sunset" width="1920" height="800" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-          <figcaption>Maldonado, Uruguay — our home</figcaption>
-        </figure>
-
-        <figure class="photo-bento-item">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/datacenter-racks-1920x960.webp" />
-            <img src="/images/photos/datacenter-racks-1920x960.jpg" alt="Datacenter racks (provider infrastructure)" width="1920" height="960" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-          <figcaption>Provider infrastructure (CA, USA, DE)</figcaption>
-        </figure>
-      </div>
-    </div>
-  </section>
-
   <section class="py-20 md:py-24" style="background: var(--hds-bg-soft);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
@@ -151,89 +99,3 @@ const whatsappUrl = 'https://wa.me/59899812487';
 
   <CtaFinal t={t} whatsappUrl={whatsappUrl} />
 </BaseLayout>
-
-<style>
-  .photo-bento {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  @media (min-width: 640px) {
-    .photo-bento {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1.25rem;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .photo-bento {
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: 240px 240px;
-      gap: 1.5rem;
-    }
-    .photo-bento-lg {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-    .photo-bento-wide {
-      grid-column: span 2;
-    }
-  }
-
-  .photo-bento-item {
-    position: relative;
-    overflow: hidden;
-    border-radius: var(--radius-glass, 24px);
-    border: 1px solid var(--glass-border);
-    aspect-ratio: 3 / 2;
-  }
-
-  .photo-bento-lg {
-    aspect-ratio: 16 / 10;
-  }
-
-  .photo-bento-wide {
-    aspect-ratio: 24 / 10;
-  }
-
-  @media (min-width: 1024px) {
-    .photo-bento-item {
-      aspect-ratio: unset;
-    }
-  }
-
-  .photo-bento-item img {
-    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .photo-bento-item:hover img {
-    transform: scale(1.05);
-  }
-
-  .photo-bento-item figcaption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0.75rem 1rem;
-    font-size: 0.8rem;
-    color: var(--hds-bg);
-    background: linear-gradient(transparent, rgba(0,0,0,0.6));
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  .photo-bento-item:hover figcaption {
-    opacity: 1;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .photo-bento-item img {
-      transition: none;
-    }
-    .photo-bento-item:hover img {
-      transform: none;
-    }
-  }
-</style>

src/pages/en/tutorials/index.astro

@@ -26,7 +26,7 @@ const categories = [
 >
   <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
     <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
-      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <img src="/images/photos/luciano-datacenter-1344x768.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
       <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
     </div>
     <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

src/pages/instructivos/index.astro

@@ -26,7 +26,7 @@ const categories = [
 >
   <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
     <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
-      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <img src="/images/photos/luciano-datacenter-1344x768.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
       <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
     </div>
     <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

src/pages/nosotros.astro

@@ -62,58 +62,6 @@ const whatsappUrl = 'https://wa.me/59899812487';
     </div>
   </section>
 
-  <!-- Photo bento grid -->
-  <section class="py-16 md:py-20" style="background: var(--hds-bg);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="max-w-3xl mb-10 reveal">
-        <SectionEyebrow text={lang === 'en' ? 'Behind the scenes' : 'Detrás de pantalla'} />
-        <h2 class="font-display leading-tight mt-5" style="font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--hds-fg);">
-          {lang === 'en' ? 'The people and the place' : 'La gente y el lugar'}
-        </h2>
-      </div>
-
-      <div class="photo-bento reveal">
-        <figure class="photo-bento-item photo-bento-lg">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/team-desk-mate-1920x1080.webp" />
-            <img src="/images/photos/team-desk-mate-1920x1080.jpg" alt={lang === 'en' ? 'Team member working at desk with mate' : 'Equipo trabajando en el escritorio con mate'} width="1920" height="1080" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-          <figcaption>{lang === 'en' ? 'Our desk, Maldonado' : 'Nuestro escritorio, Maldonado'}</figcaption>
-        </figure>
-
-        <figure class="photo-bento-item">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/hands-typing-coffee-1200x800.webp" />
-            <img src="/images/photos/hands-typing-coffee-1200x800.jpg" alt={lang === 'en' ? 'Hands typing on keyboard with coffee' : 'Manos escribiendo en teclado con café'} width="1200" height="800" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-        </figure>
-
-        <figure class="photo-bento-item">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/monitor-grafana-1920x1280.webp" />
-            <img src="/images/photos/monitor-grafana-1920x1280.jpg" alt={lang === 'en' ? 'Monitoring dashboard closeup' : 'Dashboard de monitoreo'} width="1920" height="1280" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-        </figure>
-
-        <figure class="photo-bento-item photo-bento-wide">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/maldonado-aerial-1920x800.webp" />
-            <img src="/images/photos/maldonado-aerial-1920x800.jpg" alt={lang === 'en' ? 'Maldonado coastline at sunset' : 'Bahía de Maldonado al atardecer'} width="1920" height="800" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-          <figcaption>{lang === 'en' ? 'Maldonado, Uruguay — our home' : 'Maldonado, Uruguay — nuestra casa'}</figcaption>
-        </figure>
-
-        <figure class="photo-bento-item">
-          <picture>
-            <source type="image/webp" srcset="/images/photos/datacenter-racks-1920x960.webp" />
-            <img src="/images/photos/datacenter-racks-1920x960.jpg" alt={lang === 'en' ? 'Datacenter racks (provider infrastructure)' : 'Racks de datacenter (infraestructura de proveedores)'} width="1920" height="960" class="w-full h-full object-cover" loading="lazy" decoding="async" />
-          </picture>
-          <figcaption>{lang === 'en' ? 'Provider infrastructure (CA, USA, DE)' : 'Infraestructura de proveedores (CA, USA, DE)'}</figcaption>
-        </figure>
-      </div>
-    </div>
-  </section>
-
   <section class="py-20 md:py-24" style="background: var(--hds-bg-soft);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
@@ -151,89 +99,3 @@ const whatsappUrl = 'https://wa.me/59899812487';
 
   <CtaFinal t={t} whatsappUrl={whatsappUrl} />
 </BaseLayout>
-
-<style>
-  .photo-bento {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  @media (min-width: 640px) {
-    .photo-bento {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1.25rem;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .photo-bento {
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: 240px 240px;
-      gap: 1.5rem;
-    }
-    .photo-bento-lg {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-    .photo-bento-wide {
-      grid-column: span 2;
-    }
-  }
-
-  .photo-bento-item {
-    position: relative;
-    overflow: hidden;
-    border-radius: var(--radius-glass, 24px);
-    border: 1px solid var(--glass-border);
-    aspect-ratio: 3 / 2;
-  }
-
-  .photo-bento-lg {
-    aspect-ratio: 16 / 10;
-  }
-
-  .photo-bento-wide {
-    aspect-ratio: 24 / 10;
-  }
-
-  @media (min-width: 1024px) {
-    .photo-bento-item {
-      aspect-ratio: unset;
-    }
-  }
-
-  .photo-bento-item img {
-    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .photo-bento-item:hover img {
-    transform: scale(1.05);
-  }
-
-  .photo-bento-item figcaption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0.75rem 1rem;
-    font-size: 0.8rem;
-    color: var(--hds-bg);
-    background: linear-gradient(transparent, rgba(0,0,0,0.6));
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  .photo-bento-item:hover figcaption {
-    opacity: 1;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .photo-bento-item img {
-      transition: none;
-    }
-    .photo-bento-item:hover img {
-      transform: none;
-    }
-  }
-</style>