/* barra-reactiva — la barra de navegación se encoge y se vuelve sólida al bajar,
   y se esconde si bajas rápido. Portado del `resizable-navbar` / `floating-navbar`.

   Detalle de web cara: arriba del todo la barra es transparente y grande, sobre
   el hero; en cuanto bajas se compacta y se pone opaca para que el contenido se
   lea por debajo. */
[data-lui~="barra"]{
  --lui-alto:5rem;
  --lui-alto-min:3.5rem;
  --lui-fondo:rgba(20,18,15,.82);
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--lui-alto);
  display:flex;align-items:center;gap:2rem;
  padding:0 1.5rem;
  background:transparent;
  transition:height .3s ease,background .3s ease,transform .35s cubic-bezier(.16,1,.3,1),
             box-shadow .3s ease;
}

/* Bajando: compacta y sólida. */
[data-lui~="barra"][data-lui-fija="1"]{
  height:var(--lui-alto-min);
  background:var(--lui-fondo);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

/* Escondida: sólo cuando se baja rápido y ya estamos lejos del principio. */
[data-lui~="barra"][data-lui-oculta="1"]{transform:translateY(-100%)}

/* El logo también encoge un poco: si sólo encoge la barra, el logo queda
   descentrado y se nota. */
[data-lui~="barra"] .lui-logo{
  transition:transform .3s ease;
  transform-origin:left center;
}
[data-lui~="barra"][data-lui-fija="1"] .lui-logo{transform:scale(.9)}

@media (prefers-reduced-motion:reduce){
  [data-lui~="barra"]{transition:background .2s}
  [data-lui~="barra"][data-lui-oculta="1"]{transform:none}
}