/* Fondo de las pantallas de acceso: siluetas del toro de TOROBOT, suaves
   y difuminadas, repartidas a los lados para no competir con la tarjeta. */
body { position: relative; overflow-x: hidden; }
body::before {
  content: '';
  position: fixed;
  inset: -60px;
  z-index: 0;
  pointer-events: none;
  background-image:
    url(/icons/silueta.png), url(/icons/silueta.png), url(/icons/silueta.png),
    url(/icons/silueta.png), url(/icons/silueta.png), url(/icons/silueta.png),
    url(/icons/silueta.png), url(/icons/silueta.png);
  background-repeat: no-repeat;
  background-size: 260px, 150px, 320px, 190px, 120px, 230px, 140px, 200px;
  background-position: 3% 6%, 24% 30%, 97% 4%, 80% 38%, 8% 58%, 93% 82%, 30% 94%, 4% 98%;
  opacity: .11;
  filter: blur(3px);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(/icons/silueta.png), url(/icons/silueta.png), url(/icons/silueta.png);
  background-repeat: no-repeat;
  background-size: 90px, 110px, 80px;
  background-position: 16% 16%, 72% 22%, 64% 70%;
  opacity: .07;
  filter: blur(1.5px);
}
body > * { position: relative; z-index: 1; }
@media (max-width: 640px) {
  body::before { background-size: 180px, 90px, 200px, 120px, 80px, 150px, 90px, 130px; opacity: .09; }
  body::after { display: none; }
}