/* ==========================================================================
   Metrika — Header (blindado e consistente em todas as páginas)
   ========================================================================== */

.header{
  /* Isolamento visual/empilhamento */
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  backdrop-filter: saturate(1.1) blur(10px) !important;
  background: rgba(10,2,22,.6) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: clip; /* evita qualquer overflow lateral/visual */

  /* Congela variáveis usadas no header (impede override por páginas) */
  --header-link: #e9e1ff;
  --text: #F2F3F5;
  --neon: #C084FC;

  /* Controle de largura e altura do header */
  --container-max: 1150px;  /* mantenha igual ao .container global */
  --header-min-h: 60px;     /* altura mínima (antes 72px) */
  --item-h: 30px;           /* altura dos links/CTA (antes 40px) */
}

/* O header tem seu próprio container (não herda .container global) */
.header > .container{
  max-width: var(--container-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  overflow: hidden;         /* evita qualquer elemento “passar” do container */
  box-sizing: border-box !important;
}

/* Barra de navegação */
.header .nav{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: var(--header-min-h) !important; /* afinado */
  width: 100% !important;
}

/* Neutralização local (sem alterar visual) */
.header, .header *{
  box-sizing: border-box !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Zera listas dentro do header para evitar estilos globais */
.header ul, .header ol{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   Marca (idêntica ao footer)
   ========================= */
.header .brand{ display:flex; align-items:center; gap:10px; transform:translate(0,0) }
.header .brand-logo{ width:32px; height:32px; border-radius:8px; object-fit:cover; transform:translateZ(0) }
.header .brand-title{ display:flex; gap:8px; align-items:baseline }
.header .brand-title .name{ font-size:20px !important; letter-spacing:.2px; font-weight:800 !important }
.header .brand-title .name .tm{
  all: unset !important;
  font-size: .5em !important;
  font-weight: 300 !important;
  margin-left: 2px !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.8em !important; /* levanta o TM */
  opacity: .85 !important;
}
.header .brand-title .by{ font-size:12px !important; opacity:.9 !important }

/* =========================
   Menu desktop
   ========================= */
.header .nav-links{ display:flex; align-items:center; min-width:0 } /* min-width previne empurrão lateral */
.header .nav-links .menu{ display:flex; gap:18px; margin:0; padding:0; flex-wrap:nowrap }
.header .nav-links .menu li{ list-style:none }

/* Links do menu (cores/hover fixos e imunes a páginas) */
.header .nav-links a,
.header .menu-fallback a{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px;
  padding:10px 2px !important;
  font-weight:600 !important;
  font-size:15px !important;
  height: var(--item-h) !important; /* afinado (antes 40px) */
  opacity:.95;
  color: var(--header-link) !important;
  background:linear-gradient(var(--neon) 0 0) bottom left/0 2px no-repeat;
  transition:background-size .22s ease, opacity .15s ease, text-shadow .2s ease, color .2s ease;
  white-space:nowrap; /* evita quebra estranha que aumenta altura */
}

.header .nav-links a:hover,
.header .nav-links .current-menu-item > a,
.header .menu-fallback a:hover{
  background-size:100% 2px;
  opacity:1;
  color: color-mix(in oklab, var(--text) 90%, var(--neon) 10%) !important;
  text-shadow: 0 0 10px color-mix(in oklab, var(--neon) 35%, transparent);
}

/* =========================
   CTA Entrar/Conta
   ========================= */
.header .pill-nome{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:2px solid #7C3AED !important;
  color:#ffffff !important;
  font-weight:800 !important;
  font-size:15px !important;
  line-height:1 !important;
  height: var(--item-h) !important; /* afinado (antes 40px) */
  min-width:80px !important;
  background:transparent !important;
  text-decoration:none !important;
  transition: background .2s ease, box-shadow .2s ease, opacity .2s ease, transform .06s ease !important;
}
.header .pill-nome:hover{ background: rgba(124,58,237,0.12) !important; }
.header .pill-nome:active{ transform: translateY(1px) !important; }

/* =========================
   Mobile
   ========================= */
.header .menu-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;      /* levemente menor para acompanhar o afinamento */
  border-radius:10px;
  background:transparent;
  color:#fff;
  font-size:18px;
}

/* Menu mobile e CTAs (neutraliza classes .btn de páginas) */
.header .mobile-menu{
  display:none !important;
  flex-direction:column;
  gap:8px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:10px;
}
.header .mobile-menu.open{ display:flex !important; animation:fadeSlide .18s ease }
.header .mobile-cta{ display:flex; gap:10px; margin-top:6px }
.header .mobile-menu a{
  padding:10px 0 !important;
  font-size:16px !important;
  color: var(--header-link) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Evita que estilos globais por atributo/classe afetem os links do header */
body[class*="elementor-kit-"] .header a,
.metria .header a{
  color: var(--header-link) !important;
}

/* Animação e responsivo */
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } }
@media (max-width:960px){
  .header .nav-links{ display:none }
  .header .menu-toggle{ display:inline-flex }
}