/* Pantalla «Cargando…» de Mambo Kings (negro + dorado de la corona), en la tienda y en el portal. Va primero en el
   <head> para pintarse desde el primer cuadro con el fondo negro (sin destello blanco). La quita /js/loader.js cuando la
   página está lista; sin JavaScript la quita <noscript> al instante y, si los scripts fallan, la animación ldr-safe a los 10 s. */
html:not(.ldr-done) { background: #0a0a0a; } /* mientras carga (sin destello blanco); loader.js pone .ldr-done al terminar */
.ldr {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,184,75,.14), transparent 60%), radial-gradient(ellipse 60% 45% at 50% 50%, rgba(232,184,75,.06), transparent 70%), #0a0a0a;
  color: #f5f5f5; font: 500 15px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: center;
  opacity: 1; animation: ldr-safe .4s ease 10s forwards;
}
.ldr.ldr-js { animation: none; }
.ldr.ldr-out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
@keyframes ldr-safe { to { opacity: 0; visibility: hidden; } }
.ldr-in { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ldr-logo { display: block; animation: ldr-glow 1.8s ease-in-out infinite; }
.ldr-logo img { display: block; width: 240px; max-width: 70vw; height: auto; }
.ldr-name { font-weight: 600; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: rgba(232,184,75,.8); padding-left: .42em; }
.ldr-bar { position: relative; display: block; width: 170px; height: 2px; background: rgba(232,184,75,.16); overflow: hidden; border-radius: 2px; }
.ldr-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, #f7d27a, #e8b84b, transparent); animation: ldr-slide 1.2s ease-in-out infinite; }
.ldr-txt { color: #a1a1a1; font-size: 13px; letter-spacing: .06em; }
@keyframes ldr-slide { from { transform: translateX(-100%); } to { transform: translateX(230%); } }
@keyframes ldr-glow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(232,184,75,.25)); transform: scale(1); } 50% { filter: drop-shadow(0 0 30px rgba(232,184,75,.55)); transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .ldr-logo, .ldr-bar i { animation: none; }
  .ldr-bar i { width: 100%; opacity: .6; }
}
/* La bienvenida (splash.js pone html.splash-on.ldr-wait) espera a que se quite esta pantalla para empezar su animación */
html.ldr-wait .splash, html.ldr-wait .splash * { animation-play-state: paused !important; }