barra de navegación: logo 150px y animación inteligente al scroll

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);