/* ============================================================
   FONDO ANIMADO — capa fija detrás de todo el contenido
   ============================================================ */
html { background: var(--cream); }
body { background: transparent; }

#bgNetwork {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 640px at 10% -8%, rgba(255,198,41,.30), transparent 60%),
    radial-gradient(900px 720px at 106% 10%, rgba(242,118,46,.24), transparent 58%),
    radial-gradient(1300px 900px at 46% 116%, rgba(31,122,77,.26), transparent 60%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream) 55%, var(--cream-200) 100%);
}

#bgNetwork canvas {
  position: absolute;
  inset: 0;
  display: block;
  mix-blend-mode: normal;
}

.hero, .about, .governance, .simulator {
  background: rgba(255,249,236,.55);
}

@media (prefers-reduced-motion: reduce) {
  #bgNetwork canvas { opacity: .7; }
}

@media (max-width: 640px) {
  .hero, .about, .governance, .simulator { background: rgba(255,249,236,.72); }
}