/* components/buttons.css */

/* Botones tipo link
   ============================================================ */

.btn-link {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background: var(--cta-primary);
  border-radius: var(--radius-sm);
  color: var(--cta-primary-text);
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.btn-link:hover {
  background: var(--hover-primary);
  transform: translateY(-2px);
}

/* Variante luminosa reutilizable para los CTA principales. */
.btn-link--glow {
  background-color: var(--bg-primary);
  border: 1px solid var(--cta-primary);
  color: var(--cta-primary);
  box-shadow:
    inset 0 0 14px rgba(var(--cta-primary-rgb), 0.10),
    0 0 8px rgba(var(--cta-primary-rgb), 0.13);
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.btn-link--glow:hover {
  background-color: var(--bg-primary);
  color: var(--cta-primary);
  transform: none;
  box-shadow:
    inset 0 0 14px rgba(var(--cta-primary-rgb), 0.10),
    0 0 8px rgba(var(--cta-primary-rgb), 0.13);
}

@media (hover: hover) and (pointer: fine) {
  .btn-link--glow:hover {
    background-color: var(--cta-primary);
    color: var(--cta-primary-text);
    box-shadow:
      0 0 8px rgba(var(--cta-primary-rgb), 0.8),
      0 0 22px rgba(var(--cta-primary-rgb), 0.58),
      0 0 42px rgba(var(--cta-primary-rgb), 0.25),
      inset 0 1px 8px rgba(var(--divider-glow-rgb), 0.45);
  }
}

.btn-link--glow:focus-visible {
  background-color: var(--cta-primary);
  color: var(--cta-primary-text);
  transform: none;
  box-shadow:
    0 0 8px rgba(var(--cta-primary-rgb), 0.8),
    0 0 22px rgba(var(--cta-primary-rgb), 0.58),
    0 0 42px rgba(var(--cta-primary-rgb), 0.25),
    inset 0 1px 8px rgba(var(--divider-glow-rgb), 0.45);
  outline: 2px solid var(--divider-glow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-link--glow {
    transition: none;
  }
}

/* Botón secundario
   ============================================================ */

.btn-link-secondary {
  background: transparent;
  border: 1px solid var(--cta-secondary);
  color: var(--cta-secondary);
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

/* sin movimiento: se ilumina en blanco, como el glow amarillo. */
.btn-link-secondary:hover,
.btn-link-secondary:focus-visible {
  background: var(--hover-secondary);
  border-color: var(--hover-secondary);
  color: var(--cta-secondary-text);
  transform: none;
  box-shadow:
    0 0 6px rgba(var(--cta-secondary-rgb), 0.4),
    0 0 16px rgba(var(--cta-secondary-rgb), 0.18);
}