.container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; }

.section-padding { padding: 4rem 0; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-subtitle { color: var(--color-text-light); font-size: 1.02rem; max-width: 640px; margin: 0 auto; }

.text-center { text-align: center; }

/* ───────── Regra das 2 cores de fundo ─────────
   Toda <section> do site usa OU .bg-white OU .bg-gold — nunca outra cor.
   O footer é uma barra de rodapé utilitária e fica fora dessa regra. */
.bg-white { background-color: var(--color-background); }
.bg-gold  { background-color: var(--color-accent); }

@media (min-width: 768px) {
  .section-padding { padding: 5.5rem 0; }
  .container, .container-narrow { padding: 0 2rem; }
}