@layer layout {
  .container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
  }

  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-7); }

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

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

  /* Mobile-first: 1 columna; se expande con min-width */
  @media (min-width: 40rem) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 52rem) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
  }

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

  .center { text-align: center; margin-inline: auto; }
  .measure { max-width: 56ch; }

  .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
  }
}