/* ============================================
   COMPONENTES - HEADER E FOOTER
   Consciência Monetária
   ============================================ */

/* Header fixo com fundo sólido */
header {
  background-color: #0c1814;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  width: 100%;
}

/* Links do menu */
header nav a {
  position: relative;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

header nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #10b981;
  transition: width 0.2s ease;
}

header nav a:hover::after,
header nav a.text-accent::after {
  width: 100%;
}

header nav a.text-accent {
  color: #10b981;
  font-weight: 500;
}

/* Footer links em mobile */
@media (max-width: 640px) {
  footer .flex-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    text-align: center;
  }
  
  footer .flex-wrap span {
    display: none;
  }
  
  footer .flex-wrap a {
    padding: 0.5rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
  }
  
  footer .flex-wrap a:hover {
    background: rgba(16,185,129,0.1);
  }
}

/* Transições suaves */
header a, footer a {
  transition: all 0.2s ease;
}