/* ============================================================
   Cult UI — Border Beam Button (vanilla CSS, @property approach)
   Uso: <a class="btn-beam [variante]" href="#"><span class="btn-beam-inner">Texto</span></a>
   ============================================================ */

@property --_b {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes cult-beam-spin {
  to { --_b: 360deg; }
}

/* ---- Base wrapper ---- */
/* El gradiente cónico gira sobre el propio elemento; padding=2px = grosor del "borde" */
.btn-beam {
  --_b: 0deg;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  padding: 2px;
  border: none;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  /* default beam: púrpura-azul */
  background: conic-gradient(
    from var(--_b) at 50% 50%,
    transparent   0deg,
    transparent 145deg,
    #7c3aed     180deg,
    #818cf8     200deg,
    #38bdf8     220deg,
    transparent 260deg,
    transparent 360deg
  );
  animation: cult-beam-spin 3s linear infinite;
}

/* ---- Inner: el botón visible encima del beam ---- */
.btn-beam-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.375rem;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
  width: 100%;
}

.btn-beam:hover .btn-beam-inner {
  background: #1e293b;
  color: #fff;
}

/* ---- Ghost ---- */
.btn-beam-ghost .btn-beam-inner {
  background: transparent;
  color: #e2e8f0;
}

.btn-beam-ghost:hover .btn-beam-inner {
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* ---- Tamaños ---- */
.btn-beam-lg .btn-beam-inner {
  padding: 0.75rem 1.875rem;
  font-size: 1rem;
  border-radius: 7px;
}

.btn-beam-sm .btn-beam-inner {
  padding: 0.3125rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: 5px;
}

/* ---- Variantes de color ---- */

/* Green (WhatsApp) */
.btn-beam-green {
  background: conic-gradient(
    from var(--_b) at 50% 50%,
    transparent 0deg,
    transparent 145deg,
    #10b981     180deg,
    #22c55e     210deg,
    #84cc16     240deg,
    transparent 280deg,
    transparent 360deg
  );
}

.btn-beam-green .btn-beam-inner {
  background: #25D366;
  color: #fff;
}

.btn-beam-green:hover .btn-beam-inner {
  background: #1ebe5d;
  color: #fff;
}

/* Accent (naranja) */
.btn-beam-accent {
  background: conic-gradient(
    from var(--_b) at 50% 50%,
    transparent 0deg,
    transparent 145deg,
    #FF8C00     180deg,
    #FFA726     205deg,
    #ffffff     220deg,
    #FFA726     240deg,
    transparent 280deg,
    transparent 360deg
  );
}

.btn-beam-accent .btn-beam-inner {
  background: var(--accent, #FF8C00);
  color: #fff;
}

.btn-beam-accent:hover .btn-beam-inner {
  background: var(--accent-dark, #E65100);
  color: #fff;
}

/* Sunset */
.btn-beam-sunset {
  background: conic-gradient(
    from var(--_b) at 50% 50%,
    transparent 0deg,
    transparent 145deg,
    #f97316     180deg,
    #ec4899     210deg,
    #a855f7     240deg,
    transparent 280deg,
    transparent 360deg
  );
}

/* Ocean */
.btn-beam-ocean {
  background: conic-gradient(
    from var(--_b) at 50% 50%,
    transparent 0deg,
    transparent 145deg,
    #06b6d4     180deg,
    #3b82f6     210deg,
    #6366f1     240deg,
    transparent 280deg,
    transparent 360deg
  );
}

/* White/mono — sobre fondos oscuros */
.btn-beam-white {
  background: conic-gradient(
    from var(--_b) at 50% 50%,
    transparent           0deg,
    transparent         145deg,
    rgba(255,255,255,.9) 185deg,
    rgba(255,255,255,.5) 205deg,
    transparent          245deg,
    transparent          360deg
  );
}

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  .btn-beam { animation: none; }
}