/* ============================================================
   nav.css — global navigation bar + responsive hamburger menu
   ============================================================ */

header.nav{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklch,var(--bg) 84%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);transition:height .32s cubic-bezier(.2,.7,.2,1)}

/* shrinks + lifts off once you start scrolling */
header.nav.scrolled{box-shadow:0 12px 34px -26px rgba(20,16,8,.55)}
header.nav.scrolled .nav-in{height:60px}
header.nav.scrolled .brand .mono{width:32px;height:32px;font-size:15px}
header.nav.scrolled .brand .bname{font-size:17px}

/* brand / monogram */
.brand{display:inline-flex;align-items:center;gap:14px}
.brand .mono{
  font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.04em;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line2);border-radius:50%;color:var(--accent);
  transition:border-color .25s,color .25s;
}
.brand:hover .mono{border-color:var(--accent)}
.brand .bname{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}

/* desktop links */
.nav-links{display:flex;gap:38px}
.nav-links a{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:var(--accent);transition:right .3s ease}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-links a.active{color:var(--fg)}

/* tools */
.nav-tools{display:flex;gap:10px;align-items:center}
.tool{
  height:36px;min-width:36px;padding:0 12px;
  border:1px solid var(--line2);border-radius:99px;background:none;
  color:var(--fg2);cursor:pointer;font-family:var(--sans);
  font-size:12px;letter-spacing:.06em;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:border-color .2s,color .2s;
}
.tool:hover{border-color:var(--accent);color:var(--fg)}
.tool.theme{font-size:15px}
.tool .on{color:var(--fg);font-weight:600}

/* color-palette swatches */
.tool-swatches{display:inline-flex;gap:6px;align-items:center;margin-right:4px}
.swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;padding:0;transition:transform .2s,box-shadow .2s}
.swatch:hover{transform:scale(1.14)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--fg)}
.swatch-arena{background:oklch(0.6 0.1 60)}
.swatch-niebla{background:oklch(0.55 0.13 256)}
.swatch-salvia{background:oklch(0.52 0.1 150)}
/* accessible palettes: split swatch (bg / accent) signals high contrast */
.swatch-contraste{background:linear-gradient(135deg,#ffffff 0 50%,oklch(0.46 0.15 245) 50% 100%);border-color:#6b747c}
.swatch-foco{background:linear-gradient(135deg,#100c06 0 50%,oklch(0.7 0.17 50) 50% 100%);border-color:#8a8069}
.mm-tools{align-items:center}

/* hamburger */
.burger{display:none;flex-direction:column;gap:5px;width:40px;height:36px;border-radius:10px}
.burger span{display:block;width:17px;height:1.5px;background:var(--fg);transition:transform .3s,opacity .3s}
body.menu-open .burger span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* mobile menu — full-screen + fully opaque (no see-through) */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:calc(var(--nav-h) + 12px) 32px 60px;
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
body.menu-open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
/* keep the top bar opaque while the menu is open */
body.menu-open header.nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.mobile-menu a{
  font-family:var(--serif);font-size:clamp(34px,11vw,52px);font-weight:300;
  letter-spacing:-.01em;color:var(--fg);padding:14px 0;
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
}
.mobile-menu a .n{font-family:var(--sans);font-size:13px;color:var(--fg3);letter-spacing:.1em}
.mobile-menu a.active{color:var(--accent)}
.mobile-menu .mm-tools{display:flex;gap:12px;margin-top:38px}

@media(max-width:860px){
  .nav-links{display:none}
  .nav-tools .lang{display:none}
  .nav-tools .theme{display:none}
  .nav-tools .tool-swatches{display:none}
  .burger{display:flex}
  .brand .bname{font-size:16px}
}
@media(min-width:861px){
  .mobile-menu{display:none}
}