/* ══════════════════════════════════════════════════════════════════════════
   CORRIENTE BATSÚ · sistema de fondo vivo, común a todo el sitio
   ──────────────────────────────────────────────────────────────────────────
   Idea: lo que vende BATSÚ es carga guardada que se mueve cuando hace falta.
   El fondo lo cuenta sin decirlo — masas de luz que derivan muy lento (verde
   sobre marino) y, cada tanto, un pulso eléctrico que cruza.

   Reglas que se respetan sí o sí:
     · verde + marino ≈ 80% · eléctrico #B8FF3D sólo como golpe, <5%
     · nada se mueve rápido: los ciclos son de 60 a 120 segundos
     · sólo se anima transform/opacity (compuesto en GPU, no repinta layout)
     · prefers-reduced-motion apaga TODO movimiento y deja el degradado quieto
     · el fondo nunca intercepta clics (pointer-events:none)
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bxc-green:#469C45;
  --bxc-navy:#002E55;
  --bxc-elec:#B8FF3D;
}

/* El padre marca su propio contexto de apilado: así el fondo queda por encima
   de su color de fondo pero SIEMPRE por debajo del texto, sin tener que envolver
   el contenido que ya existe. */
.bx-fondo{ isolation:isolate }
/* Sólo para contenedores que están en flujo normal: a los que ya son fixed o
   relative NO se les toca la posición (pisarla rompió el gate a pantalla completa). */
.bx-rel{ position:relative }

.bx-corriente{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  z-index:-1; border-radius:inherit;
}
.bx-corriente > *{ pointer-events:none; }

/* ── Capa 1 · masas de carga que derivan ─────────────────────────────────── */
.bx-corriente::before,
.bx-corriente::after{
  content:""; position:absolute; inset:-35%;
  will-change:transform; transform:translateZ(0);
}
.bx-corriente::before{
  background:
    radial-gradient(38% 42% at 26% 34%, rgba(70,156,69,.34), transparent 62%),
    radial-gradient(34% 38% at 74% 66%, rgba(0,102,178,.30), transparent 64%);
  animation:bxDeriva 78s ease-in-out infinite alternate;
}
.bx-corriente::after{
  background:
    radial-gradient(30% 34% at 62% 22%, rgba(70,156,69,.22), transparent 60%),
    radial-gradient(40% 30% at 20% 82%, rgba(0,60,110,.34), transparent 66%);
  animation:bxDeriva2 104s ease-in-out infinite alternate;
}

@keyframes bxDeriva{
  0%  { transform:translate3d(-4%,-2%,0) scale(1.04) rotate(0deg) }
  50% { transform:translate3d(3%,4%,0)   scale(1.16) rotate(5deg) }
  100%{ transform:translate3d(-2%,3%,0)  scale(1.08) rotate(-4deg) }
}
@keyframes bxDeriva2{
  0%  { transform:translate3d(3%,2%,0)   scale(1.10) rotate(2deg) }
  50% { transform:translate3d(-4%,-3%,0) scale(1.02) rotate(-6deg) }
  100%{ transform:translate3d(2%,-1%,0)  scale(1.14) rotate(3deg) }
}

/* ── Capa 2 · trama de circuito, casi invisible, para dar textura ────────── */
.bx-corriente .bx-trama{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  /* se desvanece hacia los bordes para que no se vea como una tabla */
  -webkit-mask-image:radial-gradient(72% 62% at 50% 45%, #000 30%, transparent 100%);
          mask-image:radial-gradient(72% 62% at 50% 45%, #000 30%, transparent 100%);
  animation:bxTrama 120s linear infinite;
}
@keyframes bxTrama{ to{ background-position:64px 64px, 64px 64px } }

/* ── Capa 3 · el pulso: un filo eléctrico que cruza cada tanto ───────────── */
.bx-corriente .bx-pulso{
  position:absolute; top:0; bottom:0; left:-20%; width:2px;
  background:linear-gradient(to bottom, transparent, var(--bxc-elec), transparent);
  box-shadow:0 0 18px 2px rgba(184,255,61,.45);
  opacity:0;
  animation:bxPulso 19s cubic-bezier(.4,0,.2,1) infinite;
}
.bx-corriente .bx-pulso.b{ animation-duration:27s; animation-delay:11s; opacity:0 }
@keyframes bxPulso{
  0%   { transform:translateX(0)     skewX(-9deg); opacity:0 }
  4%   { opacity:.85 }
  16%  { opacity:.55 }
  22%  { transform:translateX(140vw) skewX(-9deg); opacity:0 }
  100% { transform:translateX(140vw) skewX(-9deg); opacity:0 }
}

/* ── Variante clara: sobre crema, el mismo sistema pero susurrado ────────── */
.bx-corriente.clara::before{
  background:
    radial-gradient(40% 44% at 22% 30%, rgba(70,156,69,.16), transparent 64%),
    radial-gradient(36% 40% at 78% 70%, rgba(0,46,85,.10), transparent 66%);
}
.bx-corriente.clara::after{
  background:
    radial-gradient(32% 36% at 66% 18%, rgba(70,156,69,.10), transparent 62%),
    radial-gradient(42% 32% at 16% 86%, rgba(0,46,85,.08), transparent 68%);
}
.bx-corriente.clara .bx-trama{
  opacity:.55;
  background-image:
    linear-gradient(rgba(0,46,85,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,46,85,.055) 1px, transparent 1px);
}
.bx-corriente.clara .bx-pulso{ display:none }   /* el filo sólo brilla en oscuro */

/* ── El lienzo de partículas se apila sobre los degradados ──────────────── */
.bx-corriente .bx-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}

/* ── Que el contenido siempre quede por encima del fondo ────────────────── */
.bx-sobre{ position:relative; z-index:1 }

/* ── Accesibilidad y ahorro de batería ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .bx-corriente::before,
  .bx-corriente::after,
  .bx-corriente .bx-trama,
  .bx-corriente .bx-pulso{ animation:none !important }
  .bx-corriente .bx-pulso{ display:none }
  .bx-corriente .bx-canvas{ display:none }
}
/* En pantallas chicas el fondo pesa más de lo que aporta: se deja el degradado
   quieto y se apagan pulso y partículas. */
@media (max-width:700px){
  .bx-corriente .bx-pulso{ display:none }
  .bx-corriente::after{ animation-duration:150s }
}