/*
  layout.css
  Containers, secciones y patrones estructurales reutilizables.
*/

.container,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-2xl,
.container-ultra {
  inline-size: min(calc(100% - var(--container-pad) - var(--container-pad)), var(--container-current));
  margin-inline: auto;
}

.container-xs { --container-current: var(--container-xs); }
.container-sm { --container-current: var(--container-sm); }
.container-md { --container-current: var(--container-md); }
.container-lg { --container-current: var(--container-lg); }
.container-xl { --container-current: var(--container-xl); }
.container-2xl { --container-current: var(--container-2xl); }
.container-ultra { --container-current: var(--container-ultra); }

.container-fluid {
  inline-size: 100%;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-space); }
.section-xs { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.section-sm { padding-block: clamp(2rem, 5vw, 4rem); }
.section-lg { padding-block: clamp(4rem, 8vw, 8rem); }

.breakout {
  margin-inline: calc(var(--container-pad) * -1);
}

.full-bleed {
  inline-size: 100vw;
  inline-size: 100dvw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-4));
}

.flow-sm { --flow-space: var(--space-2); }
.flow-lg { --flow-space: var(--space-5); }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

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

.flex {
  display: flex;
  gap: var(--flex-gap, var(--space-4));
}

.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.grow { flex: 1 1 auto; }
.shrink-0 { flex-shrink: 0; }

.split {
  display: flex;
  flex-direction: column;
  gap: var(--split-gap, var(--space-5));
}

.split > * {
  flex: 1 1 0;
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--gutter));
}

.switcher > * {
  flex: 1 1 var(--switcher-min, 20rem);
  min-inline-size: min(100%, var(--switcher-min, 20rem));
}

.grid,
.grid-fit {
  display: grid;
  gap: var(--grid-gap, var(--gutter));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

.grid-fill {
  display: grid;
  gap: var(--grid-gap, var(--gutter));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
  display: grid;
  gap: var(--grid-gap, var(--gutter));
  grid-template-columns: minmax(0, 1fr);
}

.span-full { grid-column: 1 / -1; }

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

.center {
  display: grid;
  place-items: center;
}

.commercial-band {
  display: grid;
  gap: var(--space-5);
}

.feature-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.product-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}