@layer atoms {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: var(--tap-min);
    padding: 1rem 2rem;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.2s;

    &:active { transform: translateY(1px); }
  }

  .btn--primary {
    background: var(--ink);
    color: #fff;

    &:hover { background: #2c2840; color: #fff; }
  }

  .btn--accent {
    background: var(--accent);
    color: #fff;

    &:hover { background: var(--accent-strong); color: #fff; }
  }

  .btn--sm {
    padding: 0.625rem 1.375rem;
    font-size: 0.84375rem;
  }

  .btn--lg { padding: 1.125rem 2.25rem; }

  .btn--block { width: 100%; }
}

@layer atoms {
  /* Opción compacta con borde: "Google Maps", "Waze", "Apple Maps" */
  .chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: 1.125rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;

    &:hover { border-color: var(--accent); color: var(--accent); }
  }
}