/* ============================================================
   LAYOUT — Container, Grid, Secciones, Utilidades
   ============================================================ */

/* ── Contenedor principal ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.container--narrow {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.container--wide {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* ── Ritmo de secciones ── */
.section {
  padding-block: var(--sp-12);
  position: relative;
}

.section--lg {
  padding-block: var(--sp-16);
}

/* Secciones alternas SIN líneas (regla "No-Line" MOCAP):
   el contraste de fondo genera la separación visual */
.section--alt {
  background-color: var(--clr-surface-low);
}

/* ── Cabecera de sección ── */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

.section-header .label-tag {
  color: var(--clr-primary);
  display: block;
  margin-bottom: var(--sp-2);
}

.section-header p {
  color: var(--clr-text-muted);
  font-size: clamp(var(--fs-base), 1.2vw, var(--fs-lg));
  margin-top: var(--sp-2);
  line-height: 1.7;
}

/* ── Grid hero 2 columnas ── */
.grid-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

/* ── Grid 2 columnas ── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

/* ── Grid 3 columnas ── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* ── Grid 4 columnas ── */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

/* ── Flex helpers ── */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { flex-direction: column; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* ── Utilidades de texto ── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-muted   { color: var(--clr-text-muted); }
.text-primary { color: var(--clr-primary); }
.text-dim     { color: var(--clr-text-dim); }

/* ── Margin helpers ── */
.mt-auto { margin-top: auto; }
.mb-1    { margin-bottom: var(--sp-1); }
.mb-2    { margin-bottom: var(--sp-2); }
.mb-3    { margin-bottom: var(--sp-3); }
.mb-4    { margin-bottom: var(--sp-4); }
.mb-6    { margin-bottom: var(--sp-6); }

/* ── Visibilidad ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ── Blob decorativo de fondo (del skill: ambient glow) ── */
.blob {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  will-change: transform;
}

.blob--1 {
  background: var(--gradient-blob-1);
  filter: blur(90px);
  opacity: 0.7;
  animation: pulse-glow 8s ease-in-out infinite;
}

.blob--2 {
  background: var(--gradient-blob-2);
  filter: blur(120px);
  opacity: 0.5;
  animation: pulse-glow 11s ease-in-out infinite 2s;
}