:root{
  --bg-0:#0d1220;
  --bg-1:#171f3a;
  --dot:#33406b;
  --violet:#8b6fee;
  --mint:#5fe3b3;
  --amber:#ffb454;
  --text-body:#a9b3d1;
  --white:#eef1fb;
}

/* ---------- CAPA DE FONDO ANIMADO (fija, detrás de todo el contenido) ---------- */
.bg-fixed{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 55%, #06081450 100%);
}

/* ---------- TEXTURA DE PUNTOS ---------- */
.dot-grid{
  position:absolute; inset:-40px;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:0.35;
  animation:dotDrift 70s linear infinite;
}
@keyframes dotDrift{ from{transform:translate(0,0);} to{transform:translate(-28px,-28px);} }

/* ---------- BARRIDO HORIZONTAL (escaneo) ---------- */
.scanline{
  position:absolute; left:0; right:0; height:22vh;
  background:linear-gradient(to bottom, transparent 0%, rgba(139,111,238,0.12) 45%, rgba(139,111,238,0.18) 50%, rgba(139,111,238,0.12) 55%, transparent 100%);
  top:-22vh;
  animation:scan 7s linear infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes scan{ from{ top:-22vh; } to{ top:100vh; } }

/* ---------- LÍNEA DE CRECIMIENTO (elemento firma) ---------- */
.growth-wrap{ position:absolute; left:0; right:0; top:46%; width:100%; height:32vh; opacity:0.95; }
.growth-svg{ width:100%; height:100%; }
.growth-fill{ fill:url(#fillGrad); opacity:0; animation:fillIn 9s ease-in-out infinite; }
.growth-line{
  fill:none; stroke:var(--violet); stroke-width:3;
  stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; pathLength:1;
  filter:drop-shadow(0 0 6px rgba(139,111,238,0.7));
  animation:drawGrowth 9s ease-in-out infinite;
}
@keyframes drawGrowth{
  0%{ stroke-dashoffset:1; opacity:1; }
  55%{ stroke-dashoffset:0; opacity:1; }
  78%{ stroke-dashoffset:0; opacity:1; }
  92%{ opacity:0; }
  100%{ stroke-dashoffset:1; opacity:0; }
}
@keyframes fillIn{
  0%{ opacity:0; } 55%{ opacity:0.16; } 78%{ opacity:0.16; } 92%{ opacity:0; } 100%{ opacity:0; }
}
.growth-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 10px 3px rgba(95,227,179,0.8);
  position:absolute; top:0; left:0;
  offset-path:path("M0,210 C90,190 140,230 210,180 C280,130 330,165 400,115 C460,85 515,125 590,75 C660,35 715,85 790,45 C860,10 915,50 990,20 C1050,0 1100,20 1150,5");
  offset-rotate:0deg;
  animation:travelGrowth 9s ease-in-out infinite;
}
@keyframes travelGrowth{
  0%{ offset-distance:0%; opacity:0; }
  4%{ opacity:1; }
  55%{ offset-distance:100%; opacity:1; }
  60%{ opacity:0; }
  100%{ offset-distance:100%; opacity:0; }
}

/* ---------- ECUALIZADOR / PROCESOS EN EJECUCIÓN ---------- */
.eq-row{
  position:absolute; left:0; right:0; bottom:0;
  height:14vh; display:flex; align-items:flex-end;
  gap:6px; padding:0 3%;
  opacity:0.5;
}
.eq-bar{
  flex:1 1 auto; max-width:6px; min-width:2px;
  background:var(--violet); border-radius:2px 2px 0 0;
  transform-origin:bottom;
  animation-name:eqPulse; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.eq-bar:nth-child(3n){ background:var(--mint); }
.eq-bar:nth-child(5n){ background:var(--amber); }
@keyframes eqPulse{
  0%,100%{ transform:scaleY(var(--min,0.15)); }
  50%{ transform:scaleY(var(--max,0.9)); }
}

/* ---------- NOTIFICACIONES DE AUTOMATIZACIÓN EN VIVO ---------- */
.toast{
  position:absolute;
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:rgba(23,31,58,0.75);
  border:1px solid rgba(139,111,238,0.35);
  border-radius:999px;
  backdrop-filter:blur(4px);
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--text-body);
  opacity:0;
  animation-name:toastCycle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  white-space:nowrap;
}
.toast .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.toast.t1{ top:12%; left:6%; animation-duration:11s; animation-delay:0s; }
.toast.t2{ top:18%; right:7%; animation-duration:13s; animation-delay:3.2s; }
.toast.t3{ top:66%; left:4%; animation-duration:12s; animation-delay:6.1s; }
.toast.t4{ top:60%; right:5%; animation-duration:14s; animation-delay:1.6s; }
.toast.t5{ top:38%; left:50%; transform:translateX(-50%); animation-duration:15s; animation-delay:8.4s; }
@keyframes toastCycle{
  0%{ opacity:0; transform:translateY(6px); }
  8%{ opacity:1; transform:translateY(0); }
  22%{ opacity:1; }
  30%{ opacity:0; transform:translateY(-6px); }
  100%{ opacity:0; }
}

/* ---------- VIÑETA ---------- */
.vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(6,8,20,0.75) 0%, rgba(6,8,20,0.1) 30%, transparent 55%),
    linear-gradient(to bottom, rgba(6,8,20,0.55) 0%, transparent 22%);
  pointer-events:none;
}

@media (max-width:640px){
  .toast{ font-size:10.5px; padding:6px 10px; }
  .toast.t5{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .dot-grid, .scanline, .growth-line, .growth-fill, .growth-dot, .eq-bar, .toast{
    animation:none !important;
  }
  .growth-line{ stroke-dashoffset:0; opacity:1; }
  .toast{ opacity:0; }
}