/* ============================================================
   Pill CTA button/link. Two variants: primary (filled) and ghost
   (outlined), used together wherever a page offers two paths
   (e.g. "buy a screen" / "advertise").
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.875rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--green);
  color: var(--black);
}
.btn--primary:hover {
  background: var(--white);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
.btn::after {
  content: '\2192';
  transition: transform 0.25s var(--ease);
}
.btn:hover::after {
  transform: translateX(4px);
}

/* Light variants (empresa page, light "paper" backgrounds): blue primary,
   dark-bordered ghost — the source redefines .btn--primary/.btn--ghost
   with these colors in empresa.css, which would collide with the
   default (green/dark-page) variants above since every component's CSS
   loads on every page. Named differently instead of overriding. */
.btn--primary-light {
  background: var(--blue);
  color: var(--white);
}
.btn--primary-light:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
}
.btn--ghost-light {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
}
.btn--ghost-light:hover {
  background: var(--black);
  color: var(--green);
}

@media (max-width: 640px) {
  .btn {
    padding: 0.9375rem 1.5rem;
    font-size: 0.875rem;
  }
}