diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css
index 6138ffa3..2deeed57 100644
--- a/frontend/src/pages/LandingPage.css
+++ b/frontend/src/pages/LandingPage.css
@@ -418,8 +418,12 @@
   inset: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  /* The hero is an animated GIF of a running circuit — contain (not
+     cover) so the whole circuit stays visible; the background matches
+     the GIF's canvas color so the letterbox bands blend in. */
+  object-fit: contain;
   object-position: center;
+  background: #181618;
 }
 
 /* ── Sections ─────────────────────────────────────────── */
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index cc4c7e2f..c81ec5ca 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -710,17 +710,13 @@ export const LandingPage: React.FC = () => {
           <p className="hero-trust-line">{t('landing.hero.trustLine')}</p>
         </div>
         <div className="hero-right">
-          <picture>
-            <source srcSet="/marketing/hero-editor.webp" type="image/webp" />
-            <source srcSet="/marketing/hero-editor.png" type="image/png" />
-            <img
-              src="/marketing/hero-editor.png"
-              alt={t('landing.hero.imageAlt')}
-              className="hero-preview-img"
-              loading="eager"
-              fetchPriority="high"
-            />
-          </picture>
+          <img
+            src="/estacion-meteorologica-esp32.gif"
+            alt={t('landing.hero.imageAlt')}
+            className="hero-preview-img"
+            loading="eager"
+            fetchPriority="high"
+          />
         </div>
       </section>