/* Preloader global: 4 esferas orbitales con los colores de marca.
   El div es HTML estatico (pinta antes que cualquier JS) y pq-preloader.js
   lo esconde al cargar. Sin estilos inline ni scripts inline (CSP). */
#pq-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  background: #0A0A0F;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#pq-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.pq-orbit { position: relative; width: 120px; height: 120px; animation: pq-spin 1.8s linear infinite; }
.pq-orbit i {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
}
.pq-orbit i:nth-child(1) { transform: rotate(0deg) translateX(46px); background: #1307E4; box-shadow: 0 0 18px #1307E4; }
.pq-orbit i:nth-child(2) { transform: rotate(90deg) translateX(46px); background: #3B31F0; box-shadow: 0 0 18px #3B31F0; }
.pq-orbit i:nth-child(3) { transform: rotate(180deg) translateX(46px); background: #0F7B4F; box-shadow: 0 0 18px #0F7B4F; }
.pq-orbit i:nth-child(4) { transform: rotate(270deg) translateX(46px); background: #fff; box-shadow: 0 0 18px rgba(255,255,255,0.8); }
@keyframes pq-spin { to { transform: rotate(360deg); } }
.pq-pre-word { color: #EDEDF2; font-weight: 800; letter-spacing: 0.18em; font-size: 0.85rem; margin: 0; }
.pq-pre-dot { color: #3B31F0; }
@media (prefers-reduced-motion: reduce) {
  .pq-orbit { animation-duration: 6s; }
}