/* ============================================================
   FEBRES 360° · BOTONES NEON
   Tres variantes en el verde neon de la marca sobre navy:
   1. .btn-neon          → halo pulsante (el clásico del sitio)
   2. .btn-neon-orbita   → luz que recorre el borde 360°
   3. .btn-neon-lleno    → se enciende y llena al interactuar
   Requiere tokens.css. Funcionan con <a> o <button>.
   ============================================================ */

.btn-neon, .btn-neon-orbita, .btn-neon-lleno{
  font-family:var(--f360-font-body);
  font-size:15px;font-weight:600;letter-spacing:.02em;
  display:inline-block;text-align:center;text-decoration:none;
  padding:14px 32px;border-radius:999px;cursor:pointer;
  color:var(--f360-neon);
  background:rgba(62,240,138,.06);
  border:1.5px solid var(--f360-neon);
  transition:all .3s ease;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 1. Halo pulsante ---------- */
.btn-neon{
  text-shadow:0 0 10px var(--f360-neon-soft);
  animation:neonPulso 2.6s ease-in-out infinite;
}
@keyframes neonPulso{
  0%,100%{box-shadow:0 0 8px  var(--f360-neon-soft),
                     inset 0 0 8px  rgba(62,240,138,.12)}
  50%    {box-shadow:0 0 24px var(--f360-neon-soft),
                     0 0 56px rgba(62,240,138,.22),
                     inset 0 0 14px rgba(62,240,138,.20)}
}
.btn-neon:hover{
  background:rgba(62,240,138,.14);transform:translateY(-2px);
  animation-duration:1.1s;
}

/* ---------- 2. Órbita 360° (luz recorre el borde) ---------- */
.btn-neon-orbita{position:relative;border-color:rgba(62,240,138,.35);overflow:visible}
.btn-neon-orbita::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  padding:2px;pointer-events:none;
  background:conic-gradient(from var(--orb,0deg),
    transparent 0 78%, var(--f360-neon) 92%, #BFFFD9 97%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:orbGiro 3.2s linear infinite;
  filter:drop-shadow(0 0 6px var(--f360-neon-soft));
}
@property --orb{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes orbGiro{ to{ --orb:360deg } }
/* Fallback sin @property: giro del pseudo-elemento completo */
@supports not (background: conic-gradient(from var(--orb,0deg), red, blue)){
  .btn-neon-orbita::before{animation:none}
}
.btn-neon-orbita:hover{
  background:rgba(62,240,138,.12);
  box-shadow:0 0 26px rgba(62,240,138,.25);
}

/* ---------- 3. Encendido + llenado ---------- */
.btn-neon-lleno{position:relative;overflow:hidden;z-index:0}
.btn-neon-lleno::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,var(--f360-neon),#27D9A5);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.btn-neon-lleno:hover,.btn-neon-lleno:focus-visible{
  color:var(--f360-bg-deep);
  box-shadow:0 0 30px var(--f360-neon-soft),0 8px 24px -8px var(--f360-neon-soft);
}
.btn-neon-lleno:hover::before,.btn-neon-lleno:focus-visible::before{transform:scaleX(1)}
.btn-neon-lleno:active{transform:scale(.97)}

/* ---------- Accesibilidad ---------- */
.btn-neon:focus-visible,.btn-neon-orbita:focus-visible,.btn-neon-lleno:focus-visible{
  outline:2px solid var(--f360-neon);outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  .btn-neon,.btn-neon-orbita::before{animation:none}
  .btn-neon{box-shadow:0 0 14px var(--f360-neon-soft)}
}