From 4c91083219e5a5dc0fe7dea0bf56e74015b303c1 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Tue, 10 Mar 2026 11:30:21 -0500
Subject: [PATCH] =?UTF-8?q?barra=20de=20navegaci=C3=B3n:=20logo=20150px=20?=
 =?UTF-8?q?y=20animaci=C3=B3n=20inteligente=20al=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/LandingView.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue
index e49ecf9..e7d6638 100644
--- a/frontend/src/views/LandingView.vue
+++ b/frontend/src/views/LandingView.vue
@@ -2,7 +2,7 @@
   <div class="page">
 
     <!-- NAV -->
-    <nav class="nav" :class="{ 'nav--solid': scrolled }">
+    <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__actions">
@@ -144,11 +144,29 @@ import { useRouter } from 'vue-router'
 
 const router   = useRouter()
 const scrolled = ref(false)
+const navVisible = ref(true)
+let lastScrollY = 0
 
-const onScroll = () => { scrolled.value = window.scrollY > 40 }
+const onScroll = () => {
+  const currentScrollY = window.scrollY
+  
+  // Estilo sólido de la nav
+  scrolled.value = currentScrollY > 40
+  
+  // Lógica de ocultar/mostrar según dirección
+  if (currentScrollY > lastScrollY && currentScrollY > 150) {
+    // Scroll hacia abajo y ya pasamos el hero: ocultar
+    navVisible.value = false
+  } else {
+    // Scroll hacia arriba o estamos al inicio: mostrar
+    navVisible.value = true
+  }
+  
+  lastScrollY = currentScrollY
+}
 
 onMounted(() => {
-  window.addEventListener('scroll', onScroll)
+  window.addEventListener('scroll', onScroll, { passive: true })
   const isStandalone =
     window.matchMedia('(display-mode: standalone)').matches ||
     (window.navigator as any).standalone === true
@@ -186,7 +204,11 @@ const scrollToInstall = () =>
 .nav {
   position: fixed; top: 0; left: 0; right: 0; z-index: 100;
   height: 160px; display: flex; align-items: center; padding: 0 24px;
-  transition: all .3s ease;
+  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, background, height;
+}
+.nav--hidden {
+  transform: translateY(-100%);
 }
 .nav--solid {
   background: rgba(255,255,255,.95);