/* ═══════════════════════════════════════════
   layout.css — Grid, Container, Responsividade
   ═══════════════════════════════════════════ */

/* ─── Container ─── */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Seções ─── */
.section {
    padding: 100px 0;
}

.section--sm {
    padding: 64px 0;
}

.section--alt {
    background-color: var(--bg-surface);
}

.section--produtos-home {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

/* ─── Grids ─── */
.grid {
    display: grid;
    gap: 24px;
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .grid-2  { grid-template-columns: repeat(2, 1fr); }
    .grid-4  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .grid-3  { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 120px 0; }
}

@media (min-width: 1024px) {
    .grid-3  { grid-template-columns: repeat(3, 1fr); }
    .grid-4  { grid-template-columns: repeat(4, 1fr); }
    .grid-split { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
}

/* ─── Flex Utilities ─── */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-4          { gap: 1rem; }
.gap-8          { gap: 2rem; }
.flex-wrap      { flex-wrap: wrap; }

/* ─── Text Utilities ─── */
.text-center    { text-align: center; }
.text-left      { text-align: left; }

/* ─── Spacing ─── */
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }

/* ─── Section Header (padrão de títulos de seção) ─── */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

.section-title {
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 640px;
    line-height: 1.7;
}

.section-header { margin-bottom: 56px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-subtitle { margin: 0 auto; }