/* ─── HEADER ────────────────────────────────────────────────────── */

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--fundo-dark);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  transition: box-shadow var(--transition);
}

#header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

.header-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--branco);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header-tag {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-clock {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.header-weather {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  padding: 4px 12px;
  border-radius: 50px;
}

.header-weather .weather-emoji { font-size: 1rem; }

@media (max-width: 600px) {
  .header-tag { display: none; }
  .header-brand { font-size: 1rem; }
  .header-clock { font-size: 0.8rem; }
}