@layer components {
  /* mattemotto: bordes filosos. el botón es un instrumento, no un caramelo. */

  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding-inline: clamp(1rem, 2vw, 1.5rem);
    padding-block: clamp(0.7rem, 1vw, 0.9rem);
    font-family: var(--font-sans);
    font-size: var(--fs-200);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: currentColor;
    background: transparent;
    border: 1px solid currentColor;
    cursor: pointer;
    transition:
      background-color var(--dur-quick) var(--ease-out-quint),
      color           var(--dur-quick) var(--ease-out-quint),
      border-color    var(--dur-quick) var(--ease-out-quint);
  }
  .btn::after {
    content: "→";
    margin-inline-start: 0.4em;
    font-family: var(--font-mono);
    font-weight: 500;
  }

  .btn--primary {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
  }
  /* mattemotto: el hover del primario es navy, no rojo. nadie quiere ver rojo antes de llamar. */
  .btn--primary:hover {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
  }

  .btn--ghost {
    background: transparent;
    color: currentColor;
    border-color: currentColor;
  }
  /* mattemotto: bone-on-bone era invisible. ahora rellena con tinta y se lee. */
  .btn--ghost:hover {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
  }
  .section--cyan .btn--ghost { border-color: var(--ink); color: var(--ink); }
  .section--cyan .btn--ghost:hover { background: var(--ink); color: var(--cyan-bright); border-color: var(--ink); }
  .section--ink  .btn--ghost { border-color: var(--bone); color: var(--bone); }
  .section--ink  .btn--ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

  .link-back {
    font-family: var(--font-sans);
    font-size: var(--fs-mono-200);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: currentColor;
    grid-column: 1 / -1;
    margin-block-end: var(--space-md);
  }
  .link-back::before { content: "←"; margin-inline-end: 0.5em; }
  .link-back:hover { text-decoration: underline; text-decoration-color: var(--orange); }
}