diff --git a/build.py b/build.py
index 72fdf59..15ce39d 100644
--- a/build.py
+++ b/build.py
@@ -65,7 +65,7 @@ pop_videos = sorted(pop_videos, key=lambda v: -v['views'])[:POP_VIDEOS_SHOWN]
 pop_shorts = sorted(pop_shorts, key=lambda v: -v['views'])[:POP_SHORTS_SHOWN]
 
 
-KEEP = {'avatar.jpg', 'banner.jpg'}
+KEEP = {'avatar.jpg', 'banner.jpg', 'fondo.jpg'}
 # (nombre en YouTube, ancho máx. al guardar) por orden de preferencia
 SOURCES = {
     'video': [('maxresdefault', 1280), ('sddefault', 960), ('hqdefault', 960)],
diff --git a/public/img/fondo.jpg b/public/img/fondo.jpg
new file mode 100644
index 0000000..35a464a
Binary files /dev/null and b/public/img/fondo.jpg differ
diff --git a/public/styles.css b/public/styles.css
index 05614b7..05836b2 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -50,14 +50,22 @@ a { color: inherit; text-decoration: none; }
 .hero-bg {
   position: absolute; inset: 0;
   background:
-    radial-gradient(60% 50% at 50% 38%, rgba(46, 230, 255, .16), transparent 70%),
-    linear-gradient(180deg, rgba(6, 8, 13, .78) 0%, rgba(6, 8, 13, .92) 65%, var(--bg) 100%),
-    url("img/banner.jpg") center / cover no-repeat;
-  filter: blur(2px) saturate(.9);
-  transform: scale(1.04);
+    radial-gradient(52% 46% at 50% 52%, rgba(6, 8, 13, .72), rgba(6, 8, 13, .35) 70%, transparent 100%),
+    linear-gradient(180deg, rgba(6, 8, 13, .45) 0%, rgba(6, 8, 13, .25) 40%, rgba(6, 8, 13, .7) 82%, var(--bg) 100%),
+    url("img/fondo.jpg") center 40% / cover no-repeat;
+  transform: scale(1.03);
   animation: drift 18s ease-in-out infinite alternate;
 }
-@keyframes drift { to { transform: scale(1.1) translateY(-1.5%); } }
+@media (max-width: 760px) {
+  /* en vertical la foto se muestra entera (ancho completo, arriba) y se funde con el fondo por abajo */
+  .hero-bg {
+    background:
+      radial-gradient(70% 38% at 50% 58%, rgba(6, 8, 13, .6), transparent 100%),
+      linear-gradient(180deg, rgba(6, 8, 13, .5) 0%, rgba(6, 8, 13, .12) 22%, rgba(6, 8, 13, .6) 42%, var(--bg) 55%),
+      url("img/fondo.jpg") top center / 100% auto no-repeat var(--bg);
+  }
+}
+@keyframes drift { to { transform: scale(1.08) translateY(-1%); } }
 .hero-inner { position: relative; max-width: 760px; }
 .neon {
   width: clamp(130px, 22vw, 190px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto 18px; border-radius: 50%;