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

  .section { padding-block: var(--section-pad); }
  .section--muted { background: var(--surface-muted); }
  .section--dark { background: var(--ink); color: var(--on-dark); }
  .section--dark :is(h2, h3) { color: #fff; }

  .section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
    margin-block-end: var(--space-xl);
  }

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

  .stack--m { --stack-gap: var(--space-m); }

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

  /* Rejilla que se adapta sola: tantas columnas como quepan de --grid-min. */
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
    gap: var(--grid-gap, var(--space-l));
  }

  .prose { max-width: 62ch; }
  .prose > * + * { margin-block-start: var(--space-s); }
  .prose p { color: var(--text-muted); }
}