/* ═══════════════════════════════════════════
   HEADER
   light → darker brand blue
   dark  → brighter brand blue
═══════════════════════════════════════════ */
header {
  position: relative;
  z-index: 200;
  padding: 10px 22px;
  width: 100%;
  background: transparent;
}
.hdr {
  max-width: 1160px; margin: 0 auto;
  background: transparent;
  padding: 0 20px 0 16px; height: 60px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position: relative;
  z-index: 250;
}
/* Logo */
.logo-btn { display:flex; align-items:center; cursor:pointer; background:none; border:none; padding:0 0 0 4px; margin-left:10px; flex-shrink:0; height:100%; }
.logo-img  { height:32px; width:auto; display:block; transform: translateY(1px); }
/* Logo: blend mode causes header gradient bug — use brightness instead */
.logo-img { mix-blend-mode:screen; }
/* Nav */
nav { display:flex; align-items:center; gap:0; margin-left:auto; }
nav a, nav button { font-size:13.5px; font-weight:500; letter-spacing:0.2px; color:#fff; background:none; border:none; cursor:pointer; padding:6px 14px; border-radius:var(--rp); transition:color var(--t),background var(--t),box-shadow var(--t); white-space:nowrap; font-family:var(--font-secondary); text-decoration:none; }
nav a:hover, nav button:hover { color:#fff; background:var(--grad-brand); box-shadow:0 4px 18px rgba(10,82,204,0.32); }
nav a.act, nav button.act { color:#fff; background:var(--grad-brand); box-shadow:0 4px 18px rgba(10,82,204,0.32); }

/* Dark mode override removido — nav já é branca pura nos dois temas */
[data-theme="dark"] nav a, [data-theme="dark"] nav button { color: #fff; }
[data-theme="dark"] nav a:hover, [data-theme="dark"] nav button:hover { color: #fff; background: var(--grad-brand); }
[data-theme="dark"] .mob-nav a, [data-theme="dark"] .mob-nav button { color: rgba(220,235,255,0.92); }
[data-theme="dark"] .mob-nav a:hover, [data-theme="dark"] .mob-nav button:hover { color: #fff; }

/* Toggle */
.hdr-r { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tgl   { width:50px; height:26px; background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.24); border-radius:var(--rp); cursor:pointer; position:relative; flex-shrink:0; display:flex; align-items:center; padding:0 3px; justify-content:space-between; transition:all var(--t); }
.tgl-k {
  position:absolute; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(110deg, #0a52cc 0%, #0a7ed8 50%, #00aaee 100%);
  background-size: 130% auto;
  animation: gaPulse 1.17s ease-in-out infinite;
  animation-delay: 0s;
  top:2px; left:2px;
  transition: transform var(--t);
  box-shadow: 0 2px 8px rgba(10,82,204,0.40);
  z-index:1;
}
[data-theme="dark"] .tgl-k { transform:translateX(24px); }
.tgl-ic { width:13px; height:13px; display:flex; align-items:center; justify-content:center; z-index:0; flex-shrink:0; }
/* Header bg is dark-blue in light mode → icons LIGHT for contrast */
[data-theme="light"] .ic-sun svg circle,
[data-theme="light"] .ic-sun svg path { stroke:#9ed4ff; }
[data-theme="light"] .ic-moon svg path { stroke:#ffffff; }
/* Header bg is light-blue in dark mode → icons DARK for contrast */
[data-theme="dark"] .ic-sun svg circle,
[data-theme="dark"] .ic-sun svg path { stroke:#0a3a90; }
[data-theme="dark"] .ic-moon svg path { stroke:#0a52cc; }
/* Hamburger */
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:5px; }
.burger span { display:block; width:20px; height:2px; border-radius:2px; background:#9ed4ff; }

/* Mobile nav — drawer on-brand */
.mob-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 80px 20px 20px;
  background: rgba(4,12,28,0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1.5px solid var(--br);
  box-shadow: 0 18px 40px rgba(0,60,160,0.22);
  /* esconde sem remover do DOM — assim ::before anima sempre no mesmo timeline
     global e os 4 items ficam sincronizados, em vez de cada um re-iniciar
     ao abrir o drawer */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
}
[data-theme="light"] .mob-nav { background: rgba(8,46,130,0.94); }
.mob-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Items do menu — snake border definida no glass.css */
.mob-nav a, .mob-nav button {
  position: relative;
  --snake-w: 1.5px;
  display: block;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.1px;
  color: rgba(220,235,255,0.92);
  text-align: left;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(7,22,52,0.96);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif; text-decoration: none;
  transition: color var(--t);
}
.mob-nav a:hover, .mob-nav button:hover { color: #fff; }
.mob-nav a.act, .mob-nav button.act { color: #fff; }