/* Estilos compartilhados por todas as páginas. O CSS específico de cada
   página fica em assets/css/<página>.css e é carregado depois deste. */

:root {
  --accent: #5A3FD6;
  --accent-hover: #4530A8;
}

* { box-sizing: border-box; }
body { margin: 0; background: #FAFAF9; font-family: 'IBM Plex Sans', sans-serif; color: #18181B; }
a { text-decoration: none; }

.display { font-family: 'Fraunces', serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* Navegação */
.brand { color: #18181B; }
.nav-link { color: #52525B; font-size: 15px; font-weight: 500; }
.nav-link:hover { color: #18181B; }

/* Botões */
.btn-primary,
.btn-secondary {
  font-weight: 600; font-size: 15px; padding: 12px 24px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #FFFFFF; border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: #FFFFFF; color: #18181B; border: 1px solid #E4E4E7; }
.btn-secondary:hover { border-color: #A1A1AA; }

/* Seções */
.section { padding: 72px 64px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

/* Rodapé */
.footer-link { color: #A1A1AA; font-size: 14px; }
.footer-link:hover { color: #FFFFFF; }
.footer-heading { color: #71717A; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 900px) {
  .section { padding: 48px 24px; }
  .nav-links { display: none !important; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}