/* ============================================================
   TECLEA · Fondo vivo: malla de gradientes + blobs orgánicos
   ============================================================ */

.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.fondo__malla {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at 15% 20%, var(--malla-1), transparent 70%),
    radial-gradient(38% 38% at 85% 15%, var(--malla-2), transparent 70%),
    radial-gradient(45% 45% at 80% 85%, var(--malla-3), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, var(--malla-4), transparent 70%);
  animation: malla-deriva 28s ease-in-out infinite alternate;
}

.blob {
  position: absolute; display: block;
  width: min(46vw, 520px); aspect-ratio: 1;
  background: var(--c);
  opacity: var(--blob-opacidad);
  filter: blur(8px);
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  animation: blob-flota 26s ease-in-out infinite alternate;
}
.blob--1 { --c: var(--blob-1); top: -12%; left: -10%; }
.blob--2 { --c: var(--blob-2); bottom: -18%; right: -8%; animation-delay: -6s; width: min(40vw, 460px); }
.blob--3 { --c: var(--blob-3); top: 38%; left: 52%; width: min(26vw, 300px); animation-delay: -11s; opacity: calc(var(--blob-opacidad) * .8); }

/* ── Pantalla de carga ── */
.splash {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: var(--fondo); color: var(--texto-suave); font-weight: 700;
  transition: opacity .45s var(--suave), visibility .45s;
}
.splash--fuera { opacity: 0; visibility: hidden; }
.splash__tecla {
  width: 76px; height: 72px; display: grid; place-items: center;
  font: 700 2.4rem var(--fuente-titulo); color: #fff;
  background: linear-gradient(145deg, var(--violeta-400), var(--violeta-700));
  border-radius: 24px; box-shadow: 0 6px 0 var(--violeta-800), 0 16px 30px rgba(108, 76, 245, .4);
  animation: tecla-late 1.1s ease-in-out infinite;
}