/* ============================================================
   NexoFlow — Header & Navegação
   ============================================================ */

.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklab,var(--bg) 80%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s;
}
.site-header.scrolled{
  border-color:var(--line);
  background:color-mix(in oklab,var(--bg) 92%,transparent);
}
.nav{display:flex;align-items:center;gap:30px;height:72px}

.brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-head),sans-serif;font-weight:800;
  font-size:21px;letter-spacing:-.02em;color:var(--ink);
  flex-shrink:0; /* impede o brand de ser comprimido pelo flex do .nav */
}
.brand .logo{flex:none}
.brand b{color:var(--blue)}

/* Logo como imagem no header */
.site-header .brand img,
.demo-top .brand img {
  height: 36px;
  width: auto;
  max-width: none; /* cancela o max-width:100% do reset global */
  display: block;
}

.logo-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(150deg,var(--blue-500),var(--blue));
  display:grid;place-items:center;
  box-shadow:0 6px 16px -6px rgba(30,58,138,.6);
}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{
  font-family:var(--font-head),sans-serif;font-weight:600;font-size:15px;
  white-space:nowrap;color:var(--ink-soft);padding:9px 13px;
  border-radius:8px;transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--blue);background:var(--blue-50)}
.nav-links a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}
.nav-links a[aria-current="page"]{color:var(--blue)}

.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  padding:8px;color:var(--ink);border-radius:8px;
}
.nav-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- Seletor de idioma ---------- */
.lang-switch{
  display:flex;align-items:center;
  background:var(--line-soft);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:0;flex:none;
}
.ls-opt{
  font-family:var(--font-head),sans-serif;font-weight:700;
  font-size:12px;line-height:1;padding:5px 12px;
  border-radius:999px;color:var(--ink-soft); /* #475569 — contraste 4.8:1 (WCAG AA) */
  transition:color .15s,background .15s;white-space:nowrap;
}
.ls-opt.active{background:var(--blue);color:#fff}
.ls-opt:not(.active):hover{color:var(--ink)}
.ls-opt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}