/* Barra a pillola con testo e pulsante ("Diventa parte del Distretto 525 · Scopri come"): tutta la barra è un link. */
@layer components {
  .cta-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 8px 8px 8px 28px; border-radius: var(--radius-pill);
    background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-ink);
    &:hover { box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-ink); }
  }
  .cta-bar__text { font-weight: 700; font-size: 20px; letter-spacing: -0.03em; }
  .cta-bar .button { pointer-events: none; }

  @media (max-width: 767px) {
    .cta-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px; border-radius: var(--radius-xl); text-align: center; }
  }
}