/* footer.css
   Rodapé do site (components/footer.html). Carregado por todas as páginas que
   têm <div id="footer-root">; antes vivia em home.css, que as páginas de
   ferramenta não carregam. */

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: #101B41;
  color: rgba(255,255,255,.5);
  padding: var(--space-2xl) 0 var(--space-lg);
  border-top: 1px solid var(--color-border);
}

[data-theme="dark"] .site-footer {
  background: #080D1C;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand .logo { color: rgba(255,255,255,.8); margin-bottom: var(--space-sm); }
.footer-brand .logo span { color: #7DBBFB; }
.footer-brand p { font-size: 0.8rem; color: rgba(255,255,255,.4); max-width: 240px; }

.footer-col h4 {
  color: rgba(255,255,255,.7);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-md);
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col a  { font-size: 0.825rem; transition: color var(--duration-fast); }
.footer-col a:hover { color: rgba(255,255,255,.8); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; transition: color var(--duration-fast); }
.footer-bottom a:hover { color: rgba(255,255,255,.8); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}