/**
 * LIMAF v2.0 — Layout
 * Contenedores, secciones, grillas y utilidades de composición
 */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.container--wide { max-width: 1600px; }

/* ── SECCIONES ────────────────────────────────────────── */

.section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
}

.section--flush { padding-block: 0; }

.section--paper {
  background: var(--paper);
  color: var(--paper-ink-mid);
}

/* Encabezado estándar de sección */
.section-head {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head .eyebrow { margin-bottom: var(--s-5); }

/* ── GRILLAS ──────────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }

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

/* ── FLEX UTILS ───────────────────────────────────────── */

.flex        { display: flex; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-8 { gap: var(--s-8); }

/* ── POSICIÓN ─────────────────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }
.pointer-none { pointer-events: none; }
.overflow-hidden { overflow: hidden; }

/* ── FONDOS TÉCNICOS ──────────────────────────────────── */

.bg-blueprint {
  background-image: var(--blueprint-grid);
  background-size: var(--blueprint-size);
}

.bg-dots {
  background-image: var(--dot-grid);
  background-size: 28px 28px;
}

/* Línea divisoria con punto caliente */
.divider {
  position: relative;
  height: 1px;
  background: var(--line);
}
.divider::after {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 80px; height: 3px;
  background: var(--g-fire);
  border-radius: 2px;
}

/* ── VISIBILIDAD RESPONSIVE ───────────────────────────── */

@media (max-width: 860px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 861px)  { .only-mobile  { display: none !important; } }