From e021dd6ed5cc969ca6f07d0685b5231645ef266f Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Wed, 11 Mar 2026 12:02:23 -0500
Subject: [PATCH] feat: rediseno premium completo de la landing page con dark
 mode y arreglos en scroll de navbar

---
 frontend/src/views/LandingView.vue | 770 ++++++++++++++++-------------
 1 file changed, 440 insertions(+), 330 deletions(-)

diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue
index 26e5d49..3fc836e 100644
--- a/frontend/src/views/LandingView.vue
+++ b/frontend/src/views/LandingView.vue
@@ -1,129 +1,145 @@
 <template>
-  <div class="page">
+  <div class="page dark-theme">
 
-    <!-- NAV -->
+    <!-- PREMIUM NAV -->
     <nav class="nav" :class="{ 'nav--solid': scrolled, 'nav--hidden': !navVisible }">
       <div class="nav__wrap">
-        <img src="/titulosib.png" alt="SIB" class="nav__logo" />
+        <div class="nav__brand" @click="scrollToTop">
+          <img src="/titulosib.png" alt="SIB" class="nav__logo" />
+        </div>
         <div class="nav__actions">
-          <button class="btn-install" @click="scrollToInstall">¿Cómo instalar?</button>
-          <button class="btn-cta btn-cta--sm" @click="launchApp">Abrir app ↗</button>
+          <button class="nav__link hidden-mobile" @click="scrollToInstall">
+            ¿Cómo instalar?
+          </button>
+          <button class="btn-glow" @click="launchApp">
+            <span>Abrir app</span>
+            <span class="material-icons">arrow_forward</span>
+          </button>
         </div>
       </div>
     </nav>
 
-    <!-- HERO -->
+    <!-- PREMIUM HERO -->
     <header class="hero">
-      <img src="/landing-bg-bus.png" alt="" class="hero__img" />
+      <div class="hero__background">
+        <div class="hero__glow hero__glow--1"></div>
+        <div class="hero__glow hero__glow--2"></div>
+      </div>
+      <img src="/landing-bg-bus.png" alt="Bus in background" class="hero__img" />
       <div class="hero__overlay"></div>
 
       <div class="hero__content">
-        <div class="hero__live">
-          <span class="hero__live-dot"></span>
-          En tiempo real
+        <div class="badge-live fade-in-up" style="animation-delay: 0.1s;">
+          <span class="badge-live__dot"></span>
+          <span class="badge-live__text">GPS EN TIEMPO REAL</span>
         </div>
 
-        <h1 class="hero__title">
-          ¿Quieres saber donde<br>está tu bus?
+        <h1 class="hero__title fade-in-up" style="animation-delay: 0.2s;">
+          Tu transporte, <br />
+          <span class="text-gradient">bajo control.</span>
         </h1>
 
-        <p class="hero__desc">
-          Seguí las rutas en vivo, encontrá ofertas cerca de tu parada
-          y descargá la app sin pasar por la tienda.
+        <p class="hero__desc fade-in-up" style="animation-delay: 0.3s;">
+          Rastrea las rutas en vivo, descubre promociones exclusivas en tu zona y accede al instante sin descargas lentas.
         </p>
 
-        <div class="hero__btns">
-          <button class="btn-cta btn-cta--lg" @click="launchApp">Abrir aplicación ↗</button>
-          <button class="btn-outline" @click="scrollToInstall">¿Cómo instalarla?</button>
+        <div class="hero__btns fade-in-up" style="animation-delay: 0.4s;">
+          <button class="btn-primary" @click="launchApp">
+            <span class="material-icons">directions_bus</span>
+            Rastrear mi bus
+          </button>
+          <button class="btn-secondary" @click="scrollToInstall">
+            <span class="material-icons">help_outline</span>
+            Instalación
+          </button>
         </div>
       </div>
     </header>
 
-    <!-- FEATURES -->
+    <!-- PREMIUM FEATURES -->
     <section class="features">
       <div class="features__wrap">
-
-        <div class="feature">
-          <div class="feature__icon">
-            <span class="material-icons">gps_fixed</span>
-          </div>
-          <div class="feature__text">
-            <h3>GPS en tiempo real</h3>
-            <p>Ves exactamente dónde está cada bus y cuánto tarda en llegar a tu parada.</p>
+        
+        <div class="feature-card reveal">
+          <div class="feature-card__icon-wrap cyan-glow">
+            <span class="material-icons feature-card__icon">my_location</span>
           </div>
+          <h3 class="feature-card__title">Monitoreo Exacto</h3>
+          <p class="feature-card__desc">Conoce la ubicación exacta de cada unidad y el tiempo real que tardará en llegar a tu parada. Se acabaron las esperas a ciegas.</p>
         </div>
 
-        <div class="feature">
-          <div class="feature__icon">
-            <span class="material-icons">local_offer</span>
-          </div>
-          <div class="feature__text">
-            <h3>Ofertas locales</h3>
-            <p>Descubrí descuentos y promociones de negocios cerca de las paradas.</p>
+        <div class="feature-card reveal" style="transition-delay: 0.1s;">
+          <div class="feature-card__icon-wrap yellow-glow">
+            <span class="material-icons feature-card__icon">local_offer</span>
           </div>
+          <h3 class="feature-card__title">Ofertas Locales</h3>
+          <p class="feature-card__desc">Descubre negocios cerca de tu ruta y accede a descuentos exclusivos mientras esperas o viajas.</p>
         </div>
 
-        <div class="feature">
-          <div class="feature__icon">
-            <span class="material-icons">download_done</span>
-          </div>
-          <div class="feature__text">
-            <h3>Sin descargar nada</h3>
-            <p>Se instala directo desde el navegador como una app normal, sin Play Store ni App Store.</p>
+        <div class="feature-card reveal" style="transition-delay: 0.2s;">
+          <div class="feature-card__icon-wrap pink-glow">
+            <span class="material-icons feature-card__icon">bolt</span>
           </div>
+          <h3 class="feature-card__title">Acceso Instantáneo</h3>
+          <p class="feature-card__desc">Nuestra tecnología PWA la instala directo en tu pantalla de inicio en segundos, sin pasar por los molestos registros de la App Store.</p>
         </div>
 
       </div>
     </section>
 
-    <!-- INSTALL -->
+    <!-- PREMIUM INSTALL GUIDE -->
     <section id="install-guide" class="install">
+      <div class="install__gradient-bg"></div>
       <div class="install__wrap">
-
-        <div class="install__header">
-          <p class="install__eyebrow">Instalación rápida</p>
-          <h2 class="install__title">Listo en 30 segundos</h2>
-          <p class="install__sub">
-            Seguí estos pasos según tu celular para agregar SIB a tu pantalla de inicio.
-          </p>
+        
+        <div class="install__header reveal">
+          <p class="install__eyebrow">Sin descargas pesadas</p>
+          <h2 class="install__title">Añade SIB a tu inicio</h2>
+          <p class="install__sub">Disfruta de la experiencia completa como una aplicación nativa. Ligera, rápida y siempre a mano.</p>
         </div>
 
-        <div class="install__cards">
-
-          <div class="icard">
-            <div class="icard__head">
-              <span class="material-icons">apple</span>
-              <div>
-                <strong>iPhone</strong>
-                <span>Safari</span>
+        <div class="install__grid">
+          
+          <div class="glass-card reveal">
+            <div class="glass-card__head">
+              <div class="glass-card__icon apple-bg">
+                <span class="material-icons">apple</span>
+              </div>
+              <div class="glass-card__title-group">
+                <h3>iPhone / iPad</h3>
+                <span>Requiere Safari</span>
               </div>
             </div>
-            <ol class="icard__steps">
-              <li>Abrí esta página en <strong>Safari</strong></li>
-              <li>Tocá el botón <strong>Compartir</strong> (cuadro con flecha ↑)</li>
-              <li>Elegí <strong>"Agregar a inicio"</strong></li>
-            </ol>
+            <ul class="glass-card__steps">
+              <li>Abre esta página web en <strong>Safari</strong>.</li>
+              <li>Toca el botón central de <strong>Compartir</strong> <span class="material-icons inline-icon">ios_share</span>.</li>
+              <li>Desliza hacia abajo y selecciona <strong>Agregar a inicio</strong> <span class="material-icons inline-icon">add_box</span>.</li>
+            </ul>
           </div>
 
-          <div class="icard">
-            <div class="icard__head">
-              <span class="material-icons">android</span>
-              <div>
-                <strong>Android</strong>
-                <span>Chrome</span>
+          <div class="glass-card reveal" style="transition-delay: 0.1s;">
+            <div class="glass-card__head">
+              <div class="glass-card__icon android-bg">
+                <span class="material-icons">android</span>
+              </div>
+              <div class="glass-card__title-group">
+                <h3>Android</h3>
+                <span>Chrome browser</span>
               </div>
             </div>
-            <ol class="icard__steps">
-              <li>Abrí esta página en <strong>Chrome</strong></li>
-              <li>Tocá el menú <strong>⋮</strong> arriba a la derecha</li>
-              <li>Elegí <strong>"Instalar aplicación"</strong></li>
-            </ol>
+            <ul class="glass-card__steps">
+              <li>Abre esta página web en <strong>Google Chrome</strong>.</li>
+              <li>Toca el menú <strong>⋮</strong> en la parte superior derecha.</li>
+              <li>Selecciona <strong>Instalar Aplicación</strong> o <strong>Agregar a la pantalla principal</strong>.</li>
+            </ul>
           </div>
 
         </div>
 
-        <div class="install__action">
-          <button class="btn-cta btn-cta--lg" @click="launchApp">Abrir aplicación ↗</button>
+        <div class="install__footer reveal">
+          <button class="btn-primary btn-primary--large" @click="launchApp">
+            Continuar a la Aplicación ↗
+          </button>
         </div>
 
       </div>
@@ -131,8 +147,10 @@
 
     <!-- FOOTER -->
     <footer class="footer">
-      <img src="/titulosib.png" alt="SIB" class="footer__logo" />
-      <p class="footer__copy">© 2025 SIB · Todos los derechos reservados</p>
+      <div class="footer__wrap">
+        <img src="/titulosib.png" alt="SIB" class="footer__logo" />
+        <p class="footer__copy">© 2026 SIB. Redefiniendo la movilidad inteligente.</p>
+      </div>
     </footer>
 
   </div>
@@ -142,349 +160,441 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 
-const router   = useRouter()
+const router = useRouter()
 const scrolled = ref(false)
 const navVisible = ref(true)
 let lastScrollY = 0
 
+// Lógica mejorada del scroll con Hysteresis para evitar el "flickering" o jittering (Bug Fix de la Navbar)
 const onScroll = () => {
   const currentScrollY = window.scrollY
   
-  // Estilo sólido de la nav
-  scrolled.value = currentScrollY > 40
+  // Cambiar a diseño sólido muy rápido
+  scrolled.value = currentScrollY > 10
   
-  // Lógica de ocultar/mostrar según dirección
-  if (currentScrollY > lastScrollY && currentScrollY > 80) {
-    // Scroll hacia abajo y ya pasamos el hero: ocultar
+  // En el tope, siempre visible
+  if (currentScrollY < 80) {
+    navVisible.value = true
+  } 
+  // Scroll hacia abajo (Ocultar) - Threshold de 15px para evitar ocultar por saltitos
+  else if (currentScrollY > lastScrollY + 15) {
     navVisible.value = false
-  } else {
-    // Scroll hacia arriba o estamos al inicio: mostrar
+  } 
+  // Scroll hacia arriba (Mostrar) - Threshold rápido
+  else if (currentScrollY < lastScrollY - 10) {
     navVisible.value = true
   }
   
-  lastScrollY = currentScrollY
+  // Actualizar la última posición solo si se movió lo suficiente
+  if (Math.abs(currentScrollY - lastScrollY) > 10) {
+      lastScrollY = currentScrollY
+  }
+  
+  // Efectos de revelado
+  revealElements()
+}
+
+// Ejecutar animaciones al hacer scroll
+const revealElements = () => {
+  const reveals = document.querySelectorAll('.reveal')
+  for (let i = 0; i < reveals.length; i++) {
+    const windowHeight = window.innerHeight
+    const elementTop = reveals[i].getBoundingClientRect().top
+    const elementVisible = 100
+    if (elementTop < windowHeight - elementVisible) {
+      reveals[i].classList.add('active')
+    }
+  }
 }
 
 onMounted(() => {
   window.addEventListener('scroll', onScroll, { passive: true })
+  revealElements() // Chequeo inicial
+  
+  // Redirigir si ya está instalada / Standalone
   const isStandalone =
     window.matchMedia('(display-mode: standalone)').matches ||
     (window.navigator as any).standalone === true
-  if (isStandalone) router.replace('/splash')
+  
+  if (isStandalone) {
+    router.replace('/splash')
+  }
 })
+
 onUnmounted(() => window.removeEventListener('scroll', onScroll))
 
-const launchApp      = () => router.push('/splash')
-const scrollToInstall = () =>
-  document.getElementById('install-guide')?.scrollIntoView({ behavior: 'smooth' })
+const launchApp = () => router.push('/splash')
+const scrollToInstall = () => document.getElementById('install-guide')?.scrollIntoView({ behavior: 'smooth' })
+const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
 </script>
 
 <style scoped>
-/* ─── BASE ─────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* ─── BASE & THEME ─────────────────────────────────────────── */
+.dark-theme {
+  --bg-color: #050505;
+  --bg-elevated: #121212;
+  --text-main: #FFFFFF;
+  --text-muted: #A1A1AA;
+  --primary-color: #FEE715;
+  --primary-glow: rgba(254, 231, 21, 0.4);
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --glass-bg: rgba(18, 18, 18, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.1);
+}
 
 .page {
-  --y:      #FEE715;
-  --ydark:  #B8940A;
-  --ylight: #FFF8CC;
-  --ink:    #0A0A0A;
-  --white:  #FFFFFF;
-  --gray:   #888;
-  --muted:  #BBBBBBB;
-  --bg:     #F6F6F6;
-  --border: rgba(0,0,0,0.08);
-
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  background: var(--white);
-  color: var(--ink);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-main);
+  min-height: 100vh;
+  overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
 }
 
-/* ─── NAV ──────────────────────────────────────────── */
+/* ─── ANIMACIONES GLOBALES ────────────────────────────────── */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in-up {
+  opacity: 0;
+  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.reveal.active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ─── PREMIUM NAV ──────────────────────────────────────────── */
 .nav {
-  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
-  height: 90px; display: flex; align-items: center; padding: 0 24px;
-  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%);
-  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform, background, height, opacity;
+  position: fixed; 
+  top: 0; left: 0; right: 0; 
+  z-index: 1000;
+  height: 90px; 
+  display: flex; align-items: center; 
+  padding: 0 4%;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent;
 }
 .nav--hidden {
   transform: translateY(-100%);
   opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
 }
 .nav--solid {
-  background: rgba(255,255,255,.98);
-  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid var(--border);
-  height: 80px;
-  box-shadow: 0 4px 30px rgba(0,0,0,0.05);
+  height: 70px;
+  background: rgba(5, 5, 5, 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border-subtle);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
 }
+
 .nav__wrap {
-  max-width: 1100px; margin: 0 auto; width: 100%;
+  max-width: 1200px; margin: 0 auto; width: 100%;
   display: flex; justify-content: space-between; align-items: center;
 }
-.nav__logo { 
-  height: 80px; 
-  width: auto; 
-  object-fit: contain; 
-  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
-  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
+.nav__brand { cursor: pointer; display: flex; align-items: center; }
+.nav__logo {
+  height: 40px; /* Tamaño consistente, arregla el bug del salto */
+  width: auto;
+  transition: transform 0.3s ease;
 }
 .nav--solid .nav__logo {
-  height: 50px;
+  height: 36px;
 }
-.nav__logo:hover { transform: scale(1.08) rotate(-2deg); }
+.nav__brand:hover .nav__logo { transform: scale(1.05); }
 
-.nav__actions { display: flex; align-items: center; gap: 14px; }
-
-/* ─── NEW INSTALL BUTTON (NAV) ───────────────────── */
-.btn-install {
-  background: rgba(255,255,255, 0.15);
-  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-  border: 1.5px solid rgba(255,255,255, 0.3);
-  color: #fff;
-  font-family: inherit; font-size: .88rem; font-weight: 700;
-  padding: 10px 22px; border-radius: 12px; cursor: pointer;
-  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1); 
-  white-space: nowrap;
+.nav__actions { display: flex; align-items: center; gap: 24px; }
+.nav__link {
+  background: none; border: none; color: var(--text-muted);
+  font-family: inherit; font-size: 0.95rem; font-weight: 500;
+  cursor: pointer; transition: color 0.2s ease;
 }
-.btn-install:hover {
-  background: rgba(255,255,255, 0.25);
-  border-color: rgba(255,255,255, 0.5);
+.nav__link:hover { color: var(--text-main); }
+
+/* Botón Nav Brillante */
+.btn-glow {
+  display: flex; align-items: center; gap: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--glass-border);
+  color: var(--text-main);
+  padding: 10px 20px; border-radius: 999px;
+  font-weight: 600; font-size: 0.9rem;
+  cursor: pointer; transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+.btn-glow .material-icons { font-size: 18px; transition: transform 0.3s ease; }
+.btn-glow:hover {
+  background: var(--primary-color);
+  color: #000;
+  box-shadow: 0 0 20px var(--primary-glow);
   transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+  border-color: var(--primary-color);
 }
+.btn-glow:hover .material-icons { transform: translateX(4px); }
 
-.nav--solid .btn-install {
-  background: rgba(0,0,0, 0.05);
-  border: 1.5px solid rgba(0,0,0, 0.1);
-  color: var(--ink);
-}
-.nav--solid .btn-install:hover {
-  background: rgba(0,0,0, 0.08);
-  border-color: var(--ink);
-}
-
-/* ─── BUTTONS ──────────────────────────────────────── */
-.btn-cta {
-  display: inline-flex; align-items: center; justify-content: center;
-  gap: 6px; font-family: inherit; font-weight: 700;
-  background: var(--y); color: var(--ink);
-  border: none; border-radius: 10px; cursor: pointer;
-  transition: transform .18s, box-shadow .18s;
-  white-space: nowrap;
-}
-.btn-cta--sm { font-size: .88rem; padding: 9px 18px; }
-.btn-cta--lg { font-size: 1rem;   padding: 15px 34px; }
-.btn-cta:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(254,231,21,.4); }
-.btn-cta:active { transform: translateY(0);    box-shadow: none; }
-
-.btn-outline {
-  display: inline-flex; align-items: center; justify-content: center;
-  font-family: inherit; font-weight: 700; font-size: 1rem;
-  background: rgba(255,255,255, 0.1);
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
-  border: 1.5px solid rgba(255,255,255, 0.2);
-  color: #ffffff;
-  padding: 15px 34px; border-radius: 10px; cursor: pointer;
-  transition: all .2s; white-space: nowrap;
-}
-.btn-outline:hover { 
-  background: rgba(255,255,255, 0.2); 
-  border-color: rgba(255,255,255, 0.5);
-  transform: translateY(-2px);
-}
-
-/* ─── HERO ─────────────────────────────────────────── */
+/* ─── HERO SECCTION ─────────────────────────────────────────── */
 .hero {
-  position: relative; min-height: 100svh;
-  display: flex; align-items: center; /* Cambiado de flex-end para mejor balance */
-  padding: 120px 24px 80px;
+  position: relative; 
+  min-height: 100vh;
+  display: flex; align-items: center;
+  padding: 100px 4% 60px;
   overflow: hidden;
 }
 
+.hero__background {
+  position: absolute; inset: 0; z-index: 0;
+  background: var(--bg-color);
+}
+.hero__glow {
+  position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4;
+  animation: floatBlobs 10s ease-in-out infinite alternate;
+}
+.hero__glow--1 {
+  top: -10%; left: -10%; width: 50vw; height: 50vw;
+  background: rgba(43, 88, 118, 0.6); /* Azul oscuro lujoso */
+}
+.hero__glow--2 {
+  bottom: 0; right: -10%; width: 40vw; height: 40vw;
+  background: rgba(78, 67, 118, 0.5); /* Violeta profundo */
+  animation-delay: -5s;
+}
+@keyframes floatBlobs {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(5%, 10%) scale(1.1); }
+}
+
 .hero__img {
-  position: absolute; inset: 0;
-  width: 100%; height: 100%;
-  object-fit: cover; object-position: center 35%;
+  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
+  opacity: 0.35; mix-blend-mode: luminosity;
+  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
 }
 .hero__overlay {
   position: absolute; inset: 0;
-  background: linear-gradient(
-    to top,
-    rgba(10,10,10,.96) 0%,
-    rgba(10,10,10,.72) 45%,
-    rgba(10,10,10,.28) 100%
-  );
+  background: radial-gradient(circle at center, transparent 0%, var(--bg-color) 100%);
 }
 
 .hero__content {
-  position: relative; z-index: 1;
-  max-width: 640px; color: #fff;
+  position: relative; z-index: 10;
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+  display: flex; flex-direction: column; align-items: center;
 }
 
-.hero__live {
+/* Badge en vivo */
+.badge-live {
   display: inline-flex; align-items: center; gap: 8px;
-  font-size: .73rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
-  color: var(--y); margin-bottom: 20px;
+  padding: 8px 16px; border-radius: 999px;
+  background: rgba(254, 231, 21, 0.1);
+  border: 1px solid rgba(254, 231, 21, 0.2);
+  margin-bottom: 24px;
 }
-.hero__live-dot {
-  width: 7px; height: 7px; border-radius: 50%; background: var(--y);
-  animation: dot 2s ease-in-out infinite;
+.badge-live__dot {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color);
+  box-shadow: 0 0 10px var(--primary-color);
+  animation: pulsate 1.5s ease-out infinite;
+}
+@keyframes pulsate {
+  0% { transform: scale(0.8); opacity: 1; }
+  100% { transform: scale(2); opacity: 0; }
+}
+.badge-live__text {
+  color: var(--primary-color); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
 }
-@keyframes dot { 0%,100%{opacity:1} 50%{opacity:.25} }
 
 .hero__title {
-  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
-  font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
-  margin-bottom: 18px;
+  font-size: clamp(3rem, 7vw, 5.5rem);
+  font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
+  margin-bottom: 24px;
+}
+.text-gradient {
+  background: linear-gradient(to right, #ffffff, #a1a1aa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .hero__desc {
-  font-size: clamp(.92rem, 2vw, 1.05rem);
-  color: rgba(255,255,255,.58); line-height: 1.75;
-  margin-bottom: 36px;
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  color: var(--text-muted); line-height: 1.6;
+  max-width: 600px; margin: 0 auto 40px;
 }
 
-.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+.hero__btns {
+  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
+}
 
-/* ─── FEATURES ─────────────────────────────────────── */
-.features { padding: 72px 24px; border-bottom: 1px solid var(--border); }
+/* Botones principales */
+.btn-primary {
+  display: flex; align-items: center; gap: 10px;
+  background: var(--primary-color); color: #000;
+  border: none; border-radius: 12px;
+  padding: 16px 32px; font-size: 1.05rem; font-weight: 700;
+  cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 10px 30px rgba(254, 231, 21, 0.2);
+}
+.btn-primary:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 15px 40px rgba(254, 231, 21, 0.4);
+}
+
+.btn-secondary {
+  display: flex; align-items: center; gap: 10px;
+  background: rgba(255, 255, 255, 0.05); color: var(--text-main);
+  border: 1px solid var(--border-subtle); border-radius: 12px;
+  padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
+  cursor: pointer; transition: all 0.3s;
+  backdrop-filter: blur(10px);
+}
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-3px);
+}
+
+/* ─── FEATURES ─────────────────────────────────────────────── */
+.features {
+  padding: 100px 4%;
+  position: relative; z-index: 2;
+  background: var(--bg-color);
+}
 .features__wrap {
-  max-width: 1100px; margin: 0 auto;
-  display: grid; grid-template-columns: repeat(3,1fr);
+  max-width: 1200px; margin: 0 auto;
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
 }
 
-.feature {
-  display: flex; flex-direction: column; gap: 14px;
-  padding: 0 40px 0 0;
-  margin-right: 40px;
-  border-right: 1px solid var(--border);
+.feature-card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: 24px; padding: 40px 32px;
+  transition: transform 0.4s ease, border-color 0.4s ease;
+  position: relative; overflow: hidden;
 }
-.feature:last-child { border-right: none; padding-right: 0; margin-right: 0; }
+.feature-card::before {
+  content: ''; position: absolute; inset: 0;
+  background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, -20%), rgba(255,255,255,0.03), transparent 40%);
+  opacity: 0; transition: opacity 0.4s;
+}
+.feature-card:hover { 
+  transform: translateY(-10px); 
+  border-color: rgba(255,255,255, 0.15);
+}
+.feature-card:hover::before { opacity: 1; }
 
-.feature__icon {
-  width: 44px; height: 44px; border-radius: 11px;
-  background: var(--ylight);
+.feature-card__icon-wrap {
+  width: 64px; height: 64px; border-radius: 16px;
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 24px;
+}
+.cyan-glow { background: rgba(6, 182, 212, 0.1); color: #06b6d4; box-shadow: 0 0 30px rgba(6, 182, 212, 0.2); }
+.yellow-glow { background: rgba(250, 204, 21, 0.1); color: #facc15; box-shadow: 0 0 30px rgba(250, 204, 21, 0.2); }
+.pink-glow { background: rgba(236, 72, 153, 0.1); color: #ec4899; box-shadow: 0 0 30px rgba(236, 72, 153, 0.2); }
+
+.feature-card__icon { font-size: 32px; }
+.feature-card__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; }
+.feature-card__desc  { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }
+
+
+/* ─── INSTALL ──────────────────────────────────────────────── */
+.install {
+  padding: 120px 4%; position: relative;
+  border-top: 1px solid var(--border-subtle);
+  background: linear-gradient(180deg, var(--bg-color) 0%, #0a0a0a 100%);
+}
+.install__wrap { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
+
+.install__header { text-align: center; margin-bottom: 60px; }
+.install__eyebrow {
+  color: var(--primary-color); font-size: 0.85rem; font-weight: 700;
+  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px;
+}
+.install__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; }
+.install__sub { font-size: 1.1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto; line-height: 1.6; }
+
+.install__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 60px; }
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: 24px; padding: 40px 32px;
+  transition: all 0.3s ease;
+}
+.glass-card:hover {
+  transform: translateY(-5px);
+  background: rgba(30, 30, 30, 0.6);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+}
+
+.glass-card__head {
+  display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
+}
+.glass-card__icon {
+  width: 56px; height: 56px; border-radius: 16px;
   display: flex; align-items: center; justify-content: center;
 }
-.feature__icon .material-icons { font-size: 22px; color: var(--ydark); }
+.apple-bg { background: rgba(255, 255, 255, 0.1); color: #fff; }
+.android-bg { background: rgba(52, 168, 83, 0.15); color: #34A853; }
+.glass-card__icon .material-icons { font-size: 32px; }
 
-.feature__text h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; }
-.feature__text p  { font-size: .9rem; color: var(--gray); line-height: 1.65; }
+.glass-card__title-group h3 { font-size: 1.2rem; font-weight: 700; }
+.glass-card__title-group span { font-size: 0.85rem; color: var(--text-muted); }
 
-/* ─── INSTALL ──────────────────────────────────────── */
-.install { background: var(--bg); padding: 88px 24px; }
-.install__wrap { max-width: 840px; margin: 0 auto; }
-
-.install__header { text-align: center; margin-bottom: 52px; }
-.install__eyebrow {
-  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
-  text-transform: uppercase; color: var(--gray); margin-bottom: 10px;
+.glass-card__steps { list-style: none; display: flex; flex-direction: column; gap: 20px; counter-reset: step; }
+.glass-card__steps li {
+  position: relative; padding-left: 40px;
+  font-size: 0.95rem; color: #d4d4d8; line-height: 1.5;
 }
-.install__title {
-  font-size: clamp(1.7rem, 4vw, 2.6rem);
-  font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px;
+.glass-card__steps li::before {
+  counter-increment: step; content: counter(step);
+  position: absolute; left: 0; top: -2px;
+  width: 26px; height: 26px; border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.8rem; font-weight: 700; color: #fff;
 }
-.install__sub { font-size: .93rem; color: var(--gray); line-height: 1.65; max-width: 400px; margin: 0 auto; }
+.glass-card__steps li strong { color: #fff; font-weight: 600; }
+.inline-icon { font-size: 18px; vertical-align: middle; margin: 0 4px; color: var(--text-muted); }
 
-.install__cards {
-  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 44px;
-}
+.install__footer { text-align: center; }
+.btn-primary--large { font-size: 1.1rem; padding: 20px 48px; border-radius: 16px; display: inline-flex; }
 
-.icard {
-  background: var(--white); border: 1px solid var(--border);
-  border-radius: 16px; padding: 32px 28px;
-  transition: box-shadow .2s;
-}
-.icard:hover { box-shadow: 0 6px 28px rgba(0,0,0,.07); }
-
-.icard__head {
-  display: flex; align-items: center; gap: 12px;
-  padding-bottom: 20px; margin-bottom: 20px;
-  border-bottom: 1px solid var(--border);
-}
-.icard__head .material-icons { font-size: 26px; }
-.icard__head div { display: flex; flex-direction: column; gap: 1px; }
-.icard__head strong { font-size: .97rem; font-weight: 700; }
-.icard__head span   { font-size: .8rem; color: var(--gray); }
-
-.icard__steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 14px; }
-.icard__steps li {
-  counter-increment: s;
-  display: flex; align-items: flex-start; gap: 12px;
-  font-size: .9rem; color: #444; line-height: 1.5;
-}
-.icard__steps li::before {
-  content: counter(s);
-  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
-  background: var(--bg); border: 1px solid var(--border);
-  color: var(--ink); font-size: .75rem; font-weight: 700;
-  display: flex; align-items: center; justify-content: center; margin-top: 1px;
-}
-.icard__steps li strong { color: var(--ink); }
-
-.install__action { text-align: center; }
-
-/* ─── FOOTER ───────────────────────────────────────── */
+/* ─── FOOTER ───────────────────────────────────────────────── */
 .footer {
-  background: var(--white); border-top: 1px solid var(--border);
-  padding: 32px 24px;
-  display: flex; align-items: center; justify-content: space-between;
-  flex-wrap: wrap; gap: 12px;
+  border-top: 1px solid var(--border-subtle);
+  padding: 40px 4%; background: #000;
 }
-.footer__logo { height: 22px; opacity: .4; }
-.footer__copy { font-size: .8rem; color: #ccc; }
+.footer__wrap {
+  max-width: 1200px; margin: 0 auto;
+  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
+}
+.footer__logo { height: 28px; opacity: 0.5; filter: grayscale(1); transition: opacity 0.3s; }
+.footer__logo:hover { opacity: 1; filter: grayscale(0); }
+.footer__copy { color: var(--text-muted); font-size: 0.9rem; }
 
-/* ─── RESPONSIVE ───────────────────────────────────── */
-
-/* Tablet + */
-@media (min-width: 768px) {
-  .nav { padding: 0 40px; }
-  .hero { padding: 120px 48px 80px; }
-  .nav__link { display: block; }
+/* ─── RESPONSIVE ───────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .features__wrap { grid-template-columns: 1fr; }
+  .install__grid { grid-template-columns: 1fr; }
 }
 
-/* Mobile */
-@media (max-width: 767px) {
-  /* Nav */
-  .nav  { padding: 0 18px; height: 100px; }
-  .nav--solid { border-bottom: 1px solid var(--border); height: 70px; }
-  .nav__logo  { height: 85px; }
-  .nav--solid .nav__logo { height: 60px; }
-  .btn-install { display: none; }
-  .btn-cta--sm { font-size: .82rem; padding: 8px 14px; border-radius: 8px; }
-
-  /* Hero */
-  .hero { padding: 140px 20px 60px; }
-  .hero__title { font-size: clamp(2.1rem, 10.5vw, 3rem); }
-  .hero__desc  { font-size: .9rem; margin-bottom: 28px; }
-  .hero__btns  { flex-direction: column; }
-  .btn-cta--lg,
-  .btn-outline { width: 100%; font-size: .97rem; }
-  .btn-outline { border-color: rgba(255,255,255,.2); }
-
-  /* Features */
-  .features { padding: 52px 20px; }
-  .features__wrap { grid-template-columns: 1fr; gap: 0; }
-  .feature {
-    flex-direction: row; align-items: flex-start; gap: 16px;
-    padding: 24px 0; margin-right: 0;
-    border-right: none; border-bottom: 1px solid var(--border);
-  }
-  .feature:last-child { border-bottom: none; }
-  .feature__icon { margin-top: 2px; flex-shrink: 0; }
-
-  /* Install */
-  .install { padding: 56px 20px; }
-  .install__title { font-size: 1.75rem; }
-  .install__cards { grid-template-columns: 1fr; gap: 12px; }
-  .icard { padding: 24px 20px; border-radius: 12px; }
-  .install__action .btn-cta--lg { width: 100%; }
-
-  /* Footer */
-  .footer { flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; }
+@media (max-width: 768px) {
+  .hidden-mobile { display: none; }
+  .hero { align-items: center; padding-top: 140px; }
+  .hero__title { font-size: 3rem; }
+  .hero__btns { flex-direction: column; width: 100%; }
+  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
+  .footer__wrap { flex-direction: column; text-align: center; }
+  .install { padding: 80px 4%; }
+  .glass-card { padding: 32px 24px; }
 }
 </style>
\ No newline at end of file