/* ============================================================
   fondo-a.css — VARIANTE A: grilla de píxeles
   Retoma el logo de cuatro cuadrados: una malla fina de 32px con
   unos pocos píxeles encendidos en violeta, cian y coral.
   Capa fija: no se mueve al scrollear y no captura clics.
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    /* halo violeta arriba a la izquierda */
    radial-gradient(60rem 42rem at 10% -8%, rgba(108, 77, 246, 0.22), transparent 62%),
    /* halo cian a la derecha */
    radial-gradient(48rem 34rem at 95% 14%, rgba(34, 211, 238, 0.12), transparent 62%),
    /* la malla */
    linear-gradient(rgba(232, 233, 243, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 233, 243, 0.038) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
}

/* Los píxeles encendidos. Cada uno es un cuadrado de 32px puesto
   a mano: pocos y salteados, para que se lean como acento y no
   como textura. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(108, 77, 246, 0.55), rgba(108, 77, 246, 0.55)),
    linear-gradient(rgba(34, 211, 238, 0.40), rgba(34, 211, 238, 0.40)),
    linear-gradient(rgba(108, 77, 246, 0.30), rgba(108, 77, 246, 0.30)),
    linear-gradient(rgba(255, 122, 80, 0.35), rgba(255, 122, 80, 0.35)),
    linear-gradient(rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.22)),
    linear-gradient(rgba(108, 77, 246, 0.20), rgba(108, 77, 246, 0.20));
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position:
    calc(50% + 352px) 96px,
    calc(50% + 416px) 128px,
    calc(50% + 288px) 256px,
    calc(50% + 480px) 320px,
    calc(50% + 544px) 512px,
    calc(50% + 384px) 608px;
}

@media (max-width: 900px) {
  body::after {
    display: none;
  }
}