diff --git a/public/styles.css b/public/styles.css
index 05836b2..29d09ab 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -50,18 +50,19 @@ a { color: inherit; text-decoration: none; }
 .hero-bg {
   position: absolute; inset: 0;
   background:
-    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%),
+    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/fondo.jpg") center 40% / cover no-repeat;
-  transform: scale(1.03);
+  filter: blur(2px) saturate(.9);
+  transform: scale(1.04);
   animation: drift 18s ease-in-out infinite alternate;
 }
 @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%),
+      radial-gradient(70% 38% at 50% 40%, rgba(46, 230, 255, .14), transparent 70%),
+      linear-gradient(180deg, rgba(6, 8, 13, .78) 0%, rgba(6, 8, 13, .85) 40%, var(--bg) 55%),
       url("img/fondo.jpg") top center / 100% auto no-repeat var(--bg);
   }
 }