/* ==========================================================================
   LAYOUT — contenedor, secciones y utilidades de composición.
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

.section--soft {
  background: var(--c-bg-soft);
}

.section--dark {
  background: var(--c-bg-dark);
  color: var(--c-text-inv);
}

.section--deep {
  background: var(--c-bg-deep);
  color: var(--c-text-inv);
}

/* Separación vertical automática entre hijos */
.flow>*+* {
  margin-top: var(--flow-space, var(--sp-4));
}

/* Rejilla que se adapta sola: --grid-min = ancho mínimo de cada columna */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--sp-4));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 18rem), 100%), 1fr));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--sp-3));
  align-items: center;
}

/* Rejilla de columnas explícita (misma que dibuja .debug-grid).
   <div class="cols"><div class="col-8">…</div><div class="col-4">…</div></div> */
.cols {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
}

.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}

@media (max-width: 60rem) {
  .cols>[class*="col-"] {
    grid-column: 1 / -1;
  }

  /* en móvil, todo a una columna salvo que se diga lo contrario */
  .cols>.col-sm-6 {
    grid-column: span 6;
  }
}

/* Máscara para el reveal por líneas */
.reveal-mask {
  display: block;
  overflow: clip;
}

.section--sky {
  background:
    color-mix(in srgb, #cadfef 22%, #cadfef);
}

/* banda azul clara (Conexiones en El Parque) */

.container-full {
  width: 100%;
  padding-inline: var(--gutter);
}

/* Capas de efectos (modules/fluid.js, modules/node-wave.js): canvas absoluto bajo el contenido de la sección */
.fluid-canvas,
.node-wave {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.node-wave {
  inset: auto 0 0;
  height: var(--node-wave-h, 40vh);
}