/* Pantalla de carga original (puntos que van del caos al orden + logo), para la portada nueva.
   Mismas reglas que components.css, con las variables que la portada nueva no define. */
html.scroll-locked, html.scroll-locked body { overflow: hidden !important; height: 100vh; }

.loading-bg { position: fixed; inset: 0; z-index: 100; background: #0A0A0A; pointer-events: none; }
.loading-bg.is-hidden { display: none; }

.dots-layer { position: fixed; inset: 0; z-index: 110; pointer-events: none; overflow: hidden; }
.dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF; top: 0; left: 0; will-change: transform, background-color, opacity; }
.dot--accent { background: linear-gradient(135deg, #FF00B8, #FF2E6E 55%, #FF3B00); }

.loading-logo { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.loading-logo.is-hidden { display: none; }
.loading-logo__inner { text-align: center; font-family: 'roc-grotesk', 'Roc Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; transform: translateY(40px); opacity: 0; }
.loading-logo__text { display: inline-flex; font-size: clamp(2.4rem, 7vw, 3.2rem); font-weight: 700; line-height: 1; }
.loading__maldito { color: #FFFFFF; }
.loading__caos { display: inline-flex; }
/* «caos» con el degradado de la marca, cada letra con su tramo (se animan sueltas) */
.loading__caos > span { display: inline-block; background-image: linear-gradient(90deg, #FF00B8 0%, #FF2E6E 55%, #FF3B00 100%); background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.loading__caos > span:nth-child(1) { background-position: 0% 0; }
.loading__caos > span:nth-child(2) { background-position: 33.33% 0; }
.loading__caos > span:nth-child(3) { background-position: 66.66% 0; }
.loading__caos > span:nth-child(4) { background-position: 100% 0; }
.loading-logo__tagline { display: block; font-family: 'Geist', system-ui, sans-serif; font-size: 0.875rem; letter-spacing: 0.08em; color: rgba(255,255,255,.6); margin-top: 10px; }
@media (max-width: 767px) {
  .loading-logo__text { font-size: 2.4rem; }
  .loading-logo__tagline { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) { .dots-layer { display: none; } }