/* Sistema de Grid e Flexbox */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

/* Helpers de Seções */
.section {
  padding: var(--spacing-xxl) 0;
  position: relative;
}
.section-light { background-color: var(--color-surface); }
.section-gray { background-color: var(--color-background); }
.section-dark {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }

/* Utility de Visibilidade */
.hidden { display: none; }

/* Previne overflow de qualquer filho */
img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Engine Responsiva Mobile First */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
  .btn {
    width: 100%;
    min-width: unset;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
  }
  .hero-btn-group {
    width: 100%;
  }
  .hero-btn-group .btn {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:flex-row { flex-direction: row; }
  .section { padding: 10rem 0; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:flex-row { flex-direction: row; }
}