/* lawang-cabecera.css — la cabecera de las páginas del menú: The Land y Projects (/projects,
   servido por thecollection.php), The Villas (/thevillas) y The Soul (/thesoul).                                       19-oct-2026
   FUENTE ÚNICA, como assets/lawang-pie.js para el pie. Owner: «la cabecera y el footer tienen que ser
   EXACTAMENTE IGUALES» al pasar de una sección a otra; cada página llevaba su copia del CSS y The Soul
   se había quedado con la de la home (menú a 300 y .13em, botón en otro verde, otra hamburguesa), así
   que el menú cambiaba de grosor y de color al entrar en ella.
   Se enlaza ANTES del <style> de la página: lo que la página necesite de verdad distinto (la ficha
   fantasma #topbar.pdp de /thecollection, el position:fixed de /thesoul por su scroll-snap) gana por
   orden o por especificidad. Ningún aspecto de la barra se vuelve a escribir en la página.
   Valores literales en vez de las variables de cada página: --gut, --va o --sans no valen lo mismo en
   las tres y la barra tiene que medir igual en todas. La home (index.html) conserva su barra propia. */

@font-face{font-family:'Neue Kabel';src:url('/assets/fonts/NeueKabel-Book.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Kabel';src:url('/assets/fonts/NeueKabel-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}

#topbar{position:sticky;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(.5rem,1.2vh,.8rem) clamp(1.4rem,4vw,3.4rem);background:rgba(247,244,239,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(190,179,165,.3)}
#topbar > *{pointer-events:auto}

/* Logo verde (máscara del PNG). La versión blanca solo la usa la ficha fantasma de /thecollection. */
#topbar #logo{flex:none;min-width:0}
#topbar #logo-inner{display:flex;align-items:center;padding:6px 0;text-decoration:none}
#topbar #logo-inner img{height:23px;width:auto;display:block}
#topbar #logo-inner .ll-white{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
#topbar #logo-inner .ll-dark{display:none;height:23px;width:165px;background-color:#587040;
  -webkit-mask:url('/assets/img/lawang-logo-v3-dark.webp') left center/contain no-repeat;
          mask:url('/assets/img/lawang-logo-v3-dark.webp') left center/contain no-repeat}
#topbar:not(.pdp) #logo-inner .ll-white,#topbar #logo.dark .ll-white{display:none}
#topbar:not(.pdp) #logo-inner .ll-dark,#topbar #logo.dark .ll-dark{display:block}

/* Menú en píldora, centrado */
#topbar #nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem);
  height:auto;background:rgba(255,255,255,.5);border:1px solid rgba(72,91,55,.28);border-radius:40px;padding:.6rem 1.7rem;
  -webkit-backdrop-filter:none;backdrop-filter:none}
#topbar .nav-link{position:relative;font-family:'Neue Kabel','Jost',sans-serif;font-weight:400;font-size:.64rem;letter-spacing:.22em;
  color:rgba(26,22,18,.72);text-transform:uppercase;text-decoration:none;text-shadow:none;cursor:pointer;white-space:nowrap;
  transition:color .3s,letter-spacing .3s}
#topbar .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:#485B37;box-shadow:none;
  transform:scaleX(0);transform-origin:center;transition:transform .32s cubic-bezier(.16,1,.3,1)}
#topbar .nav-link:hover{color:#485B37;letter-spacing:.25em}
#topbar .nav-link:hover::after,#topbar .nav-link.active::after{transform:scaleX(1)}
#topbar .nav-link.active{color:#485B37;font-weight:500}

#topbar #nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:clamp(.7rem,1.5vw,1.2rem);flex:none;min-width:0}

/* Idioma (y la moneda de /thecollection, que reutiliza .nav-lang/.lang-menu) */
#topbar .nav-lang-wrap{position:relative}
#topbar .nav-lang{display:inline-flex;align-items:center;gap:.5rem;font-family:'Neue Kabel','Jost',sans-serif;font-weight:400;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(26,22,18,.62);text-shadow:none;background:none;border:none;cursor:pointer;white-space:nowrap;transition:color .3s}
#topbar .nav-lang .lang-abbr{display:none}
#topbar .nav-lang .caret{font-size:.62rem;opacity:.7;transition:transform .28s}
#topbar .nav-lang[aria-expanded="true"] .caret{transform:rotate(180deg)}
#topbar .nav-lang:hover{color:#485B37}
#topbar .lang-menu{position:absolute;top:calc(100% + 14px);right:0;min-width:158px;list-style:none;margin:0;padding:6px;border-radius:14px;
  background:rgba(255,255,255,.98);border:1px solid rgba(72,91,55,.2);box-shadow:0 20px 44px -18px rgba(72,91,55,.28);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .24s ease,transform .24s,visibility .24s;z-index:160}
#topbar .lang-menu.open{opacity:1;visibility:visible;transform:none}
#topbar .lang-menu li{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:'Neue Kabel','Jost',sans-serif;font-weight:400;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(26,22,18,.72);padding:10px 13px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s}
#topbar .lang-menu li:hover{background:rgba(72,91,55,.1);color:#485B37}
#topbar .lang-menu li.active{color:#485B37}
#topbar .lang-menu li.active::after{content:'✓';font-size:.78rem;color:#485B37}
#topbar .lang-opt{display:inline-flex;align-items:center;gap:.6rem}

/* Botón de WhatsApp: píldora verde con el círculo de WhatsApp */
#topbar .nav-cta{display:inline-flex;align-items:center;gap:.55rem;height:auto;text-decoration:none;border:1px solid #485B37;padding:8px 20px 8px 9px;border-radius:30px;
  font-family:'Neue Kabel','Jost',sans-serif;font-weight:400;font-size:.6rem;letter-spacing:.22em;color:#F5F0E6;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;background:#485B37;transition:all .35s}
#topbar .nav-cta .wa{width:20px;height:20px;border-radius:50%;background:#25D366;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;line-height:1}
#topbar .nav-cta .wa svg{width:13px;height:13px;display:block}
#topbar .nav-cta:hover{background:#3a4a2c;color:#F5F0E6;border-color:#3a4a2c}

/* Hamburguesa (≤1000 px) */
#topbar .nav-burger{display:none;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(72,91,55,.28);background:rgba(255,255,255,.5);cursor:pointer;
  flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#topbar .nav-burger span{display:block;width:16px;height:1.5px;background:#2E3437;box-shadow:none;transition:transform .3s,opacity .3s}
#topbar.nav-open .nav-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
#topbar.nav-open .nav-burger span:nth-child(2){opacity:0}
#topbar.nav-open .nav-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:1000px){
  #topbar .nav-burger{display:inline-flex}
  #topbar #nav{display:none;position:absolute;top:100%;left:0;right:0;transform:none;flex-direction:column;align-items:stretch;gap:0;
    border-radius:0;border:0;border-top:1px solid rgba(190,179,165,.4);background:rgba(247,244,239,.98);box-shadow:none;padding:.5rem clamp(20px,5vw,72px) 1rem}
  #topbar.nav-open #nav{display:flex}
  #topbar .nav-link{width:auto;padding:14px 0;font-size:.72rem}
  #topbar .nav-link::after{display:block;bottom:8px;right:auto;width:28px}
}
/* Móvil: botón solo con el icono e idioma abreviado (EN/ES/ID) donde el botón trae la abreviatura
   (/thecollection); /thesoul copia el marcado de la home, sin .lang-abbr, y deja el nombre entero. */
@media(max-width:700px){
  #topbar{padding-inline:1rem}
  #topbar #nav-actions{gap:.6rem}
  #topbar .nav-cta{padding:8px 9px}
  #topbar .nav-cta span:not(.wa){display:none}
  #topbar .nav-lang:has(.lang-abbr) > span:not(.caret):not(.lang-abbr){display:none}
  #topbar .nav-lang > span.lang-abbr{display:inline}
}
@media(max-width:560px){
  #topbar #logo-inner img{height:20px}
  #topbar #logo-inner .ll-dark{height:20px;width:144px}
}