/* ═══════════════════════════════════════
   Layout — contenedores y primitivas
   Grupo DYT
   ═══════════════════════════════════════ */

/* ── Container ── */

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

.container--sm  { max-width: 720px;  }
.container--md  { max-width: 960px;  }
.container--lg  { max-width: 1200px; }
.container--xl  { max-width: 1400px; }

/* ── Section ── */

.section {
  padding-block: clamp(4rem, 8vw, 6rem);
}

.section--sm { padding-block: clamp(2rem, 4vw, 3rem); }
.section--lg { padding-block: clamp(6rem, 10vw, 9rem); }

/* ── Stack (flujo vertical) ── */

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }

.stack--2  { --stack-gap: var(--space-2);  }
.stack--3  { --stack-gap: var(--space-3);  }
.stack--4  { --stack-gap: var(--space-4);  }
.stack--6  { --stack-gap: var(--space-6);  }
.stack--8  { --stack-gap: var(--space-8);  }
.stack--12 { --stack-gap: var(--space-12); }
.stack--16 { --stack-gap: var(--space-16); }

/* ── Cluster (flex horizontal) ── */

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

.cluster--2  { --cluster-gap: var(--space-2);  }
.cluster--3  { --cluster-gap: var(--space-3);  }
.cluster--6  { --cluster-gap: var(--space-6);  }
.cluster--8  { --cluster-gap: var(--space-8);  }

.cluster--start  { justify-content: flex-start; }
.cluster--center { justify-content: center; }
.cluster--end    { justify-content: flex-end; }
.cluster--between{ justify-content: space-between; }

/* ── Grid ── */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--gutter));
  grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
}

@media (min-width: 480px) {
  .grid--2  { --grid-cols: 2; }
}

@media (min-width: 768px) {
  .grid--2  { --grid-cols: 2; }
  .grid--3  { --grid-cols: 3; }
  .grid--4  { --grid-cols: 2; }
}

@media (min-width: 1024px) {
  .grid--4  { --grid-cols: 4; }
}

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 280px), 1fr));
}

/* ── Split (dos columnas con ratio) ── */

.split {
  display: grid;
  gap: var(--gutter);
  align-items: center;
}

@media (min-width: 768px) {
  .split        { grid-template-columns: 1fr 1fr; }
  .split--60-40 { grid-template-columns: 60fr 40fr; }
  .split--40-60 { grid-template-columns: 40fr 60fr; }
}

/* ── Hero layout ── */

.hero {
  min-height: 90vh;
  display: grid;
  place-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
}

/* ── Full bleed ── */

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ── Visually hidden (accesibilidad) ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}