/* ================================================================
   HIGHLIGHT & BORDER EFFECTS  —  effects.css  v3.1
   Prefix: hbe-   Variables: --hbe-*   (sin colisiones)
   ─────────────────────────────────────────────────────────────────
   SISTEMA DE COLOR
     --hbe-rgb: R G B   ← cambia esto para colorear todos los efectos
     O usa una clase: .hbe-primary  .hbe-secondary  .hbe-success
                       .hbe-warning  .hbe-danger  .hbe-info
                       .hbe-rose  .hbe-gold

     Override manual de un efecto específico (opcional):
       --hbe-snake-c1 / c2 / c3 / c4 / glow1 / glow2
       --hbe-neon-c1 / c2
       --hbe-pulse-c1 / c2 / c3
       --hbe-scan-color
       --hbe-load-c1 / c2 / c3


================================================================ */


/* ── @property ─────────────────────────────────────────────────── */

@property --hbe-snake-angle  { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hbe-aurora-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hbe-load-angle   { syntax: '<angle>'; inherits: false; initial-value: 0deg; }


/* ── Variables (solo timing y sizing — NO derivadas de color) ──── */
/* Los colores se resuelven directamente en cada regla via          */
/* var(--hbe-xxx, rgb(var(--hbe-rgb) / alpha)) para que            */
/* --hbe-rgb se evalúe en el ELEMENTO, no en :root                 */

:root {
  --hbe-rgb: 0 120 255;

  /* ── Variables maestras — las clases las sobreescriben en el elemento ── */
  --hbe-border-width: 2px;    /* .hbe-w1..w5              */
  --hbe-glow-px:      8px;    /* .hbe-aura-0..4           */
  --hbe-speed-mult:   1;      /* .hbe-speed-1..10         */

  /* ── Por efecto — heredan del maestro, pueden sobreescribirse ── */
  --hbe-snake-width:    var(--hbe-border-width);
  --hbe-snake-duration: 2.5s;
  --hbe-snake-glow:     var(--hbe-glow-px);

  --hbe-aurora-width:    var(--hbe-border-width);
  --hbe-aurora-duration: 3s;

  --hbe-pulse-width:    var(--hbe-border-width);
  --hbe-pulse-duration: 2s;

  --hbe-neon-width:    var(--hbe-border-width);
  --hbe-neon-duration: 4s;

  --hbe-scan-duration: 3s;

  --hbe-load-width:    var(--hbe-border-width);
  --hbe-load-duration: 1s;
  --hbe-load-glow:     var(--hbe-glow-px);

  --hbe-attract-duration:  3.5s;
  --hbe-shimmer-duration:  2.8s;
  --hbe-glow-duration:     2.5s;

  /* ── Shimmer: dirección (color vía --hbe-rgb o --hbe-shimmer-c1/c2) ── */
  --hbe-shimmer-transform: translateX(-140%);
  --hbe-shimmer-direction: 105deg;
}


/* ── Keyframes ─────────────────────────────────────────────────── */

@keyframes hbe-snake-run  { to { --hbe-snake-angle:  360deg; } }
@keyframes hbe-aurora-run { to { --hbe-aurora-angle: 360deg; } }
@keyframes hbe-load-spin  { to { --hbe-load-angle:   360deg; } }

@keyframes hbe-pulse-breathe {
  0%, 100% { opacity: .3; filter: drop-shadow(0 0 3px rgb(var(--hbe-rgb) / .67)); }
  50%       { opacity:  1; filter: drop-shadow(0 0 8px rgb(var(--hbe-rgb) / .87)) drop-shadow(0 0 20px rgb(var(--hbe-rgb) / .47)); }
}

@keyframes hbe-neon-flicker {
  0%,  87%  { opacity: 1;  filter: drop-shadow(0 0 4px rgb(var(--hbe-rgb))) drop-shadow(0 0 14px rgb(var(--hbe-rgb) / .70)); }
  88%       { opacity: .2; filter: none; }
  89%       { opacity: 1;  filter: drop-shadow(0 0 4px rgb(var(--hbe-rgb))); }
  91%       { opacity: .1; filter: none; }
  92%, 100% { opacity: 1;  filter: drop-shadow(0 0 4px rgb(var(--hbe-rgb))) drop-shadow(0 0 14px rgb(var(--hbe-rgb) / .70)); }
}

@keyframes hbe-shimmer-sweep {
  0%   { transform: translateX(-140%); }
  55%  { transform: translateX(140%); }
  100% { transform: translateX(140%); }
}

@keyframes hbe-shimmer-reverse {
  0%   { transform: translateX(140%); }
  55%  { transform: translateX(-140%); }
  100% { transform: translateX(-140%); }
}

@keyframes hbe-shimmer-down {
  0%   { transform: translateY(-200%); }
  40%  { transform: translateY(200%); }
  100% { transform: translateY(200%); }
}

@keyframes hbe-shimmer-up {
  0%   { transform: translateY(200%); }
  40%  { transform: translateY(-200%); }
  100% { transform: translateY(-200%); }
}

@keyframes hbe-radiant-expand {
  0%        { transform: scale(0);   opacity: 1; }
  55%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes hbe-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0  8px 0   rgb(var(--hbe-rgb) / .20),
      0 4px 20px   rgb(var(--hbe-rgb) / .15);
  }
  50% {
    box-shadow:
      0 0  22px 4px rgb(var(--hbe-rgb) / .42),
      0 8px 40px   rgb(var(--hbe-rgb) / .30),
      0 0  60px 8px rgb(var(--hbe-rgb) / .15);
  }
}

@keyframes hbe-scan-sweep {
  from { top: -4px; }
  to   { top: calc(100% + 4px); }
}

@keyframes hbe-attract-ping {
  0%, 70%, 100% { transform: scale(1);     box-shadow: none; }
  76%           { transform: scale(1.05);  box-shadow: 0 0 22px 5px rgb(var(--hbe-rgb) / .45); }
  82%           { transform: scale(.98);   box-shadow: 0 0 10px 2px rgb(var(--hbe-rgb) / .20); }
  88%           { transform: scale(1.025); box-shadow: 0 0 16px 3px rgb(var(--hbe-rgb) / .32); }
}



/* ════════════════════════════════════════════════════════════════
   1 · SNAKE BORDER
   Los var() de color usan fallback rgb(var(--hbe-rgb)/alpha)
   evaluado EN el elemento — así los presets de color funcionan
════════════════════════════════════════════════════════════════ */

.hbe-snake-border,
.hbe-snake-border-hover {
  position:  relative !important;
  isolation: isolate  !important;
}

.hbe-snake-border::before,
.hbe-snake-border-hover::before {
  content: '';
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  padding: var(--hbe-snake-width);
  background: conic-gradient(
    from var(--hbe-snake-angle),
    transparent                                       0%,
    transparent                                      52%,
    var(--hbe-snake-c1, rgb(var(--hbe-rgb) / .12))  64%,
    var(--hbe-snake-c2, rgb(var(--hbe-rgb) / .55))  80%,
    var(--hbe-snake-c3, rgb(var(--hbe-rgb) / .90))  92%,
    var(--hbe-snake-c4, rgb(var(--hbe-rgb)))         97%,
    transparent                                     100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter:
    drop-shadow(0 0 calc(var(--hbe-snake-glow) * .5) var(--hbe-snake-glow1, rgb(var(--hbe-rgb) / .73)))
    drop-shadow(0 0 var(--hbe-snake-glow)            var(--hbe-snake-glow2, rgb(var(--hbe-rgb) / .33)));
  animation: hbe-snake-run calc(var(--hbe-snake-duration) * var(--hbe-speed-mult, 1)) linear infinite;
  pointer-events: none;
  z-index: 0;
}

.hbe-snake-border-hover::before {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity .4s ease;
}
.hbe-snake-border-hover:hover::before,
.hbe-snake-border-hover:focus-within::before { opacity: 1; animation-play-state: running; }


/* ════════════════════════════════════════════════════════════════
   2 · AURORA BORDER  (arcoíris fijo, no usa --hbe-rgb)
════════════════════════════════════════════════════════════════ */

.hbe-aurora-border,
.hbe-aurora-border-hover {
  position:  relative !important;
  isolation: isolate  !important;
}

.hbe-aurora-border::before,
.hbe-aurora-border-hover::before {
  content: '';
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  padding: var(--hbe-aurora-width);
  background: conic-gradient(
    from var(--hbe-aurora-angle),
    #ff0055, #ff6600, #ffcc00, #00ff88,
    #00ccff, #6644ff, #cc00ff, #ff0055
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter:
    drop-shadow(0 0 5px rgba(200,200,255,.50))
    drop-shadow(0 0 12px rgba(150,100,255,.30));
  animation: hbe-aurora-run calc(var(--hbe-aurora-duration) * var(--hbe-speed-mult, 1)) linear infinite;
  pointer-events: none;
  z-index: 0;
}

.hbe-aurora-border-hover::before {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity .4s ease;
}
.hbe-aurora-border-hover:hover::before,
.hbe-aurora-border-hover:focus-within::before { opacity: 1; animation-play-state: running; }


/* ════════════════════════════════════════════════════════════════
   3 · PULSE BORDER
════════════════════════════════════════════════════════════════ */

.hbe-pulse-border,
.hbe-pulse-border-hover {
  position:  relative !important;
  isolation: isolate  !important;
}

.hbe-pulse-border::before,
.hbe-pulse-border-hover::before {
  content: '';
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  padding: var(--hbe-pulse-width);
  background: conic-gradient(
    var(--hbe-pulse-c1, rgb(var(--hbe-rgb) / .35))   0%,
    var(--hbe-pulse-c2, rgb(var(--hbe-rgb)))          25%,
    var(--hbe-pulse-c3, rgb(var(--hbe-rgb) / .65))   50%,
    var(--hbe-pulse-c2, rgb(var(--hbe-rgb)))          75%,
    var(--hbe-pulse-c1, rgb(var(--hbe-rgb) / .35))  100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: hbe-pulse-breathe calc(var(--hbe-pulse-duration) * var(--hbe-speed-mult, 1)) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hbe-pulse-border-hover::before {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity .4s ease;
}
.hbe-pulse-border-hover:hover::before,
.hbe-pulse-border-hover:focus-within::before { opacity: 1; animation-play-state: running; }


/* ════════════════════════════════════════════════════════════════
   4 · NEON BORDER
════════════════════════════════════════════════════════════════ */

.hbe-neon-border,
.hbe-neon-border-hover {
  position:  relative !important;
  isolation: isolate  !important;
}

.hbe-neon-border::before,
.hbe-neon-border-hover::before {
  content: '';
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  padding: var(--hbe-neon-width);
  background: conic-gradient(
    var(--hbe-neon-c1, rgb(var(--hbe-rgb)))        0%,
    var(--hbe-neon-c2, rgb(var(--hbe-rgb) / .55)) 30%,
    white                                           50%,
    var(--hbe-neon-c2, rgb(var(--hbe-rgb) / .55)) 70%,
    var(--hbe-neon-c1, rgb(var(--hbe-rgb)))       100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: hbe-neon-flicker calc(var(--hbe-neon-duration) * var(--hbe-speed-mult, 1)) linear infinite;
  pointer-events: none;
  z-index: 0;
}

.hbe-neon-border-hover::before {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity .4s ease;
}
.hbe-neon-border-hover:hover::before,
.hbe-neon-border-hover:focus-within::before { opacity: 1; animation-play-state: running; }


/* ════════════════════════════════════════════════════════════════
   5 · SHIMMER   *overflow:hidden
════════════════════════════════════════════════════════════════ */

.hbe-shimmer,
.hbe-shimmer-hover {
  position: relative !important;
  overflow: hidden   !important;
}

.hbe-shimmer::before,
.hbe-shimmer-hover::before {
  content: '';
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    var(--hbe-shimmer-direction, 105deg),
    transparent                                        30%,
    var(--hbe-shimmer-c1, rgb(var(--hbe-rgb) / .12))  44%,
    var(--hbe-shimmer-c2, rgb(var(--hbe-rgb) / .26))  50%,
    var(--hbe-shimmer-c1, rgb(var(--hbe-rgb) / .12))  56%,
    transparent                                        70%
  );
  transform: var(--hbe-shimmer-transform, translateX(-140%));
  animation: hbe-shimmer-sweep calc(var(--hbe-shimmer-duration) * var(--hbe-speed-mult, 1)) ease infinite;
  z-index: 1;
}

.hbe-shimmer-hover::before { animation-play-state: paused; }
.hbe-shimmer-hover:hover::before,
.hbe-shimmer-hover:focus-within::before { animation-play-state: running; }


/* ════════════════════════════════════════════════════════════════
   5B · RADIANT      (spot que nace del centro y se expande)
   5C · RADIANT INV  (anillo que nace del centro y se expande)
════════════════════════════════════════════════════════════════ */

.hbe-radiant,
.hbe-radiant-hover,
.hbe-radiant-inv,
.hbe-radiant-inv-hover {
  position: relative !important;
  overflow: hidden   !important;
}

.hbe-radiant::before,
.hbe-radiant-hover::before {
  content: '';
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    var(--hbe-shimmer-c2, rgb(var(--hbe-rgb) / .26))  0%,
    var(--hbe-shimmer-c1, rgb(var(--hbe-rgb) / .12)) 45%,
    transparent                                        70%
  );
  animation: hbe-radiant-expand calc(var(--hbe-shimmer-duration) * var(--hbe-speed-mult, 1)) ease-out infinite;
  z-index: 1;
}

.hbe-radiant-hover::before { animation-play-state: paused; }
.hbe-radiant-hover:hover::before,
.hbe-radiant-hover:focus-within::before { animation-play-state: running; }

.hbe-radiant-inv::before,
.hbe-radiant-inv-hover::before {
  content: '';
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    transparent                                        0%,
    var(--hbe-shimmer-c1, rgb(var(--hbe-rgb) / .12)) 35%,
    var(--hbe-shimmer-c2, rgb(var(--hbe-rgb) / .26)) 50%,
    var(--hbe-shimmer-c1, rgb(var(--hbe-rgb) / .12)) 65%,
    transparent                                       100%
  );
  animation: hbe-radiant-expand calc(var(--hbe-shimmer-duration) * var(--hbe-speed-mult, 1)) ease-out infinite;
  z-index: 1;
}

.hbe-radiant-inv-hover::before { animation-play-state: paused; }
.hbe-radiant-inv-hover:hover::before,
.hbe-radiant-inv-hover:focus-within::before { animation-play-state: running; }


/* ════════════════════════════════════════════════════════════════
   6 · GLOW
════════════════════════════════════════════════════════════════ */

.hbe-glow {
  animation: hbe-glow-pulse calc(var(--hbe-glow-duration) * var(--hbe-speed-mult, 1)) ease-in-out infinite !important;
}

.hbe-glow-hover { transition: box-shadow .35s ease !important; }

.hbe-glow-hover:hover,
.hbe-glow-hover:focus-visible {
  box-shadow:
    0 0  20px 2px rgb(var(--hbe-rgb) / .35),
    0 8px 40px 0   rgb(var(--hbe-rgb) / .25),
    0 0  60px 6px  rgb(var(--hbe-rgb) / .12) !important;
}


/* ════════════════════════════════════════════════════════════════
   7 · SCAN   *overflow:hidden
════════════════════════════════════════════════════════════════ */

.hbe-scan,
.hbe-scan-hover {
  position:  relative !important;
  overflow:  hidden   !important;
  isolation: isolate  !important;
}

.hbe-scan::after,
.hbe-scan-hover::after {
  content: '';
  position: absolute !important;
  left: 0; right: 0; top: -4px;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hbe-scan-color, rgb(var(--hbe-rgb))) 30%,
    white                                       50%,
    var(--hbe-scan-color, rgb(var(--hbe-rgb))) 70%,
    transparent
  );
  filter:
    drop-shadow(0 0 5px var(--hbe-scan-color, rgb(var(--hbe-rgb))))
    drop-shadow(0 0 10px rgb(var(--hbe-rgb) / .50));
  animation: hbe-scan-sweep calc(var(--hbe-scan-duration) * var(--hbe-speed-mult, 1)) linear infinite;
  z-index: 1;
}

.hbe-scan-hover::after {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity .3s ease;
}
.hbe-scan-hover:hover::after,
.hbe-scan-hover:focus-within::after { opacity: 1; animation-play-state: running; }


/* ════════════════════════════════════════════════════════════════
   8 · LOADING
════════════════════════════════════════════════════════════════ */

.hbe-loading {
  position:  relative !important;
  isolation: isolate  !important;
}

.hbe-loading::before {
  content: '';
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  padding: var(--hbe-load-width);
  background: conic-gradient(
    from var(--hbe-load-angle),
    transparent                                      0%,
    transparent                                     72%,
    var(--hbe-load-c1, rgb(var(--hbe-rgb) / .25))  82%,
    var(--hbe-load-c2, rgb(var(--hbe-rgb)))          91%,
    var(--hbe-load-c3, rgb(var(--hbe-rgb) / .80))   96%,
    white                                            99%,
    transparent                                    100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter:
    drop-shadow(0 0 calc(var(--hbe-load-glow) * .5) rgb(var(--hbe-rgb) / .80))
    drop-shadow(0 0 var(--hbe-load-glow)            rgb(var(--hbe-rgb) / .40));
  animation: hbe-load-spin calc(var(--hbe-load-duration) * var(--hbe-speed-mult, 1)) linear infinite;
  pointer-events: none;
  z-index: 0;
}


/* ════════════════════════════════════════════════════════════════
   9 · ATTRACT
════════════════════════════════════════════════════════════════ */

.hbe-attract {
  animation: hbe-attract-ping calc(var(--hbe-attract-duration) * var(--hbe-speed-mult, 1)) ease-in-out infinite !important;
  cursor: pointer !important;
}

.hbe-attract:hover { animation-play-state: paused !important; }


/* ════════════════════════════════════════════════════════════════
   10 · EDGE LIGHT
════════════════════════════════════════════════════════════════ */

.hbe-edge-light { position: relative !important; }

.hbe-edge-light::after {
  content: '' !important;
  position: absolute !important;
  top: 1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.50) 30%,
    rgba(255,255,255,.80) 50%,
    rgba(255,255,255,.50) 70%,
    transparent
  );
  pointer-events: none;
  z-index: 1;
}


/* ════════════════════════════════════════════════════════════════
   COLORES  —  solo cambian --hbe-rgb
   Todos los efectos lo leen directamente en el elemento
════════════════════════════════════════════════════════════════ */

.hbe-primary   { --hbe-rgb: 0   120 255; }
.hbe-secondary { --hbe-rgb: 120  55 240; }
.hbe-success   { --hbe-rgb: 0   190  90; }
.hbe-warning   { --hbe-rgb: 220 135   0; }
.hbe-danger    { --hbe-rgb: 220  40  60; }
.hbe-info      { --hbe-rgb: 0   200 220; }
.hbe-rose      { --hbe-rgb: 240  40 160; }
.hbe-gold      { --hbe-rgb: 200 155  20; }

/* ── Corporativos ───────────────────────────────────────────────
   .hbe-silver   → platinum en oscuro / grafito en claro (adaptivo)
   .hbe-platinum → siempre platinum   (solo fondos oscuros)
   .hbe-slate    → siempre grafito    (solo fondos claros)
──────────────────────────────────────────────────────────────── */
.hbe-platinum { --hbe-rgb: 222 225 235; }  /* platino — brillo fino sobre negro   */
.hbe-slate    { --hbe-rgb: 108 114 128; }  /* grafito — sobrio sobre blanco        */

.hbe-silver   { --hbe-rgb: 222 225 235; }  /* default: platino (dark)             */
@media (prefers-color-scheme: light) {
  .hbe-silver { --hbe-rgb: 108 114 128; }  /* en SO claro: cambia a grafito       */
}

/* ── Velocidad / duración ───────────────────────────────────────
   Escala: speed-1 = más lento (2.0×) · speed-6 ≈ normal (1.0×) · speed-10 = más rápido (0.2×)
   Aplica en el elemento o en cualquier ancestro.
   Intervalos de 0.2 — afecta TODOS los efectos animados del elemento.
──────────────────────────────────────────────────────────────── */
.hbe-speed-1  { --hbe-speed-mult: 2.0; }
.hbe-speed-2  { --hbe-speed-mult: 1.8; }
.hbe-speed-3  { --hbe-speed-mult: 1.6; }
.hbe-speed-4  { --hbe-speed-mult: 1.4; }
.hbe-speed-5  { --hbe-speed-mult: 1.2; }
.hbe-speed-6  { --hbe-speed-mult: 1.0; }
.hbe-speed-7  { --hbe-speed-mult: 0.8; }
.hbe-speed-8  { --hbe-speed-mult: 0.6; }
.hbe-speed-9  { --hbe-speed-mult: 0.4; }
.hbe-speed-10 { --hbe-speed-mult: 0.2; }


/* ── Sigma brand ────────────────────────────────────────────── */
.hbe-sigma-primary      { --hbe-rgb:   0 120  83; }   /* #007853 */
.hbe-sigma-primary-lt   { --hbe-rgb:  77 162 143; }   /* #4DA28F */
.hbe-sigma-secondary    { --hbe-rgb: 246 138  48; }   /* #F68A30 */
.hbe-sigma-secondary-lt { --hbe-rgb: 250 170  95; }   /* #FAAA5F */
.hbe-sigma-navy         { --hbe-rgb:  24  60 112; }   /* #183C70 */
.hbe-sigma-enlinea      { --hbe-rgb:  12  94 104; }   /* #0C5E68 */


/* ════════════════════════════════════════════════════════════════
   11 · SPOTLIGHT
   body::before con position:fixed en el root stacking context
   via :has() — tapa TODOS los elementos, no solo los de z-index menor
════════════════════════════════════════════════════════════════ */

/* Backdrop estático */
body:has(.hbe-spotlight)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, .72);
  pointer-events: none;
  animation: hbe-backdrop-in .3s ease forwards;
}
body:has(.hbe-spotlight.hbe-spotlight-subtle)::before { background: rgba(0,0,0,.30); }
body:has(.hbe-spotlight.hbe-spotlight-soft)::before   { background: rgba(0,0,0,.50); }
body:has(.hbe-spotlight.hbe-spotlight-hard)::before   { background: rgba(0,0,0,.88); }

/* Backdrop hover — siempre presente, invisible hasta hover */
body:has(.hbe-spotlight-hover)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, .72);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
body:has(.hbe-spotlight-hover:hover)::before                              { opacity: 1; }
body:has(.hbe-spotlight-hover.hbe-spotlight-subtle:hover)::before { background: rgba(0,0,0,.30); }
body:has(.hbe-spotlight-hover.hbe-spotlight-soft:hover)::before   { background: rgba(0,0,0,.50); }
body:has(.hbe-spotlight-hover.hbe-spotlight-hard:hover)::before   { background: rgba(0,0,0,.88); }

.hbe-spotlight {
  position: relative !important;
  z-index:  9999     !important;
  box-shadow: 0 0 40px 6px rgb(var(--hbe-rgb) / .25) !important;
}

.hbe-spotlight-hover {
  position: relative !important;
  z-index:  0        !important;
  transition: z-index 0s .4s !important;
}
.hbe-spotlight-hover:hover {
  z-index: 9999 !important;
  box-shadow: 0 0 40px 6px rgb(var(--hbe-rgb) / .25) !important;
  transition: box-shadow .4s ease, z-index 0s !important;
}

/* Intensidad */
.hbe-spotlight-subtle { --hbe-spotlight-opacity: .30; }
.hbe-spotlight-soft   { --hbe-spotlight-opacity: .50; }
.hbe-spotlight-hard   { --hbe-spotlight-opacity: .88; }


/* ── hbe-spotlight-ctx ──────────────────────────────────────────
   Alternativa cuando el elemento está atrapado dentro de un
   stacking context con z-index bajo (el backdrop body::before en
   z:9998 lo tapa). Coloca esta clase en el PADRE que crea el
   conflicto. Lo eleva a z:9999 para que emerja sobre el backdrop.
   ⚠ No funciona si ese padre tiene transform / filter / perspective.
──────────────────────────────────────────────────────────────── */

.hbe-spotlight-ctx { position: relative !important; }

.hbe-spotlight-ctx:has(.hbe-spotlight),
.hbe-spotlight-ctx:has(.hbe-spotlight-hover:hover) {
  z-index: 9999 !important;
}


/* ════════════════════════════════════════════════════════════════
   UTILIDADES DE CONTROL
   Aplican directamente en el elemento — combinables con cualquier efecto
════════════════════════════════════════════════════════════════ */

/* ── Ancho del borde animado ──────────────────────────────────── */
.hbe-w1 { --hbe-border-width: 1px; }
.hbe-w2 { --hbe-border-width: 2px; }   /* default */
.hbe-w3 { --hbe-border-width: 3px; }
.hbe-w4 { --hbe-border-width: 4px; }
.hbe-w5 { --hbe-border-width: 6px; }

/* ── Intensidad del halo (glow) ──────────────────────────────── */
.hbe-aura-0 { --hbe-glow-px:  0px; }
.hbe-aura-1 { --hbe-glow-px:  3px; }
.hbe-aura-2 { --hbe-glow-px:  8px; }   /* default */
.hbe-aura-3 { --hbe-glow-px: 16px; }
.hbe-aura-4 { --hbe-glow-px: 28px; }

/* ── Pausa / reanudar ────────────────────────────────────────── */
.hbe-paused,
.hbe-paused::before,
.hbe-paused::after { animation-play-state: paused !important; }

.hbe-running,
.hbe-running::before,
.hbe-running::after { animation-play-state: running !important; }

/* ── Dirección inversa ───────────────────────────────────────── */
/* snake / aurora / loading → giran al revés                     */
/* scan → sube de abajo a arriba                                 */
.hbe-reverse::before,
.hbe-reverse::after { animation-direction: reverse !important; }

/* ── Alias semántico para scan ascendente ────────────────────── */
.hbe-scan-up::after,
.hbe-scan-hover.hbe-scan-up:hover::after,
.hbe-scan-hover.hbe-scan-up:focus-within::after { animation-direction: reverse !important; }

/* ── Una sola vez ────────────────────────────────────────────── */
.hbe-once::before,
.hbe-once::after {
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

/* ── Shimmer: colores ────────────────────────────────────────── */
.hbe-shimmer-light,
.hbe-shimmer-hover.hbe-shimmer-light {
  --hbe-shimmer-c1: rgba(0, 0, 0, .08);
  --hbe-shimmer-c2: rgba(0, 0, 0, .16);
}

.hbe-shimmer-dark,
.hbe-shimmer-hover.hbe-shimmer-dark {
  --hbe-shimmer-c1: rgba(255, 255, 255, .12);
  --hbe-shimmer-c2: rgba(255, 255, 255, .26);
}

.hbe-shimmer-rgb,
.hbe-shimmer-hover.hbe-shimmer-rgb {
  --hbe-shimmer-c1: rgb(var(--hbe-rgb) / .15);
  --hbe-shimmer-c2: rgb(var(--hbe-rgb) / .35);
}

.hbe-shimmer-custom,
.hbe-shimmer-hover.hbe-shimmer-custom {
  /* Redefine --hbe-shimmer-c1 y --hbe-shimmer-c2 en el elemento */
}

/* ── Shimmer: dirección ──────────────────────────────────────── */
.hbe-shimmer-ltr::before,
.hbe-shimmer-hover.hbe-shimmer-ltr:hover::before,
.hbe-shimmer-hover.hbe-shimmer-ltr:focus-within::before {
  animation-name: hbe-shimmer-sweep;
  --hbe-shimmer-transform: translateX(-140%);
  --hbe-shimmer-direction: 105deg;
}

.hbe-shimmer-rtl::before,
.hbe-shimmer-hover.hbe-shimmer-rtl:hover::before,
.hbe-shimmer-hover.hbe-shimmer-rtl:focus-within::before {
  animation-name: hbe-shimmer-reverse;
  --hbe-shimmer-transform: translateX(140%);
  --hbe-shimmer-direction: 105deg;
}

.hbe-shimmer-ttb::before,
.hbe-shimmer-hover.hbe-shimmer-ttb:hover::before,
.hbe-shimmer-hover.hbe-shimmer-ttb:focus-within::before {
  animation-name: hbe-shimmer-down;
  --hbe-shimmer-transform: translateY(-200%);
  --hbe-shimmer-direction: 0deg;
}

.hbe-shimmer-btt::before,
.hbe-shimmer-hover.hbe-shimmer-btt:hover::before,
.hbe-shimmer-hover.hbe-shimmer-btt:focus-within::before {
  animation-name: hbe-shimmer-up;
  --hbe-shimmer-transform: translateY(200%);
  --hbe-shimmer-direction: 0deg;
}


/* ── Accesibilidad ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hbe-snake-border::before,
  .hbe-snake-border-hover:hover::before,   .hbe-snake-border-hover:focus-within::before,
  .hbe-aurora-border::before,
  .hbe-aurora-border-hover:hover::before,  .hbe-aurora-border-hover:focus-within::before,
  .hbe-pulse-border::before,
  .hbe-pulse-border-hover:hover::before,   .hbe-pulse-border-hover:focus-within::before,
  .hbe-neon-border::before,
  .hbe-neon-border-hover:hover::before,    .hbe-neon-border-hover:focus-within::before,
  .hbe-loading::before {
    animation: none;
    opacity: .65;
  }

  .hbe-shimmer::before,
  .hbe-shimmer-hover:hover::before,    .hbe-shimmer-hover:focus-within::before,
  .hbe-radiant::before,
  .hbe-radiant-hover:hover::before,    .hbe-radiant-hover:focus-within::before,
  .hbe-radiant-inv::before,
  .hbe-radiant-inv-hover:hover::before,.hbe-radiant-inv-hover:focus-within::before,
  .hbe-scan::after,
  .hbe-scan-hover:hover::after,      .hbe-scan-hover:focus-within::after {
    animation: none;
    opacity: 0;
  }

  .hbe-attract { animation: none !important; }
}