/* =============================================================
   AGROVALOR · Layout & secciones
   ============================================================= */

/* === Container === */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter-mobile);
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }
.container-full { max-width: var(--container-full); }

@media (min-width: 768px) {
  .container,
  .container-wide,
  .container-narrow,
  .container-full {
    padding-inline: var(--gutter-tablet);
  }
}
@media (min-width: 1280px) {
  .container,
  .container-wide,
  .container-narrow,
  .container-full {
    padding-inline: var(--gutter-desktop);
  }
}

/* === Sections === */
.section {
  position: relative;
  padding-block: var(--space-24);
}
.section-tight { padding-block: var(--space-16); }
.section-loose { padding-block: var(--space-32); }

.section-light { background: var(--paper-100); color: var(--ink-900); }
.section-cream { background: var(--paper-200); color: var(--ink-900); }
.section-dark { background: var(--navy-700); color: var(--paper-100); }
.section-darker { background: var(--navy-900); color: var(--paper-100); }

.theme-dark { color: var(--paper-100); }

@media (max-width: 767px) {
  .section { padding-block: var(--space-16); }
  .section-loose { padding-block: var(--space-24); }
}

/* === Grid utilities === */
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }

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

/* === Flex utilities === */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-1 { flex: 1; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* === Spacers === */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }