/* =========================================================
   Pantalla de carga: nado → bici → carrera dentro del anillo
   ========================================================= */
.loader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:radial-gradient(circle at 50% 45%,var(--navy-800),var(--navy-900) 70%);color:var(--cream);
  transition:opacity .6s ease,visibility .6s}
.loader.is-done{opacity:0;visibility:hidden}
body.is-loading{overflow:hidden}

/* Anillo */
.loader-ring{position:relative;width:176px;height:176px}
.loader-ring svg.ring{position:absolute;inset:0;width:100%;height:100%}
.ring .track{stroke:var(--navy-700)}
.ring .arc{stroke:var(--coral);stroke-dasharray:120 400}
.loader-ring svg.ring{animation:ringSpin 1.4s linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* Muñequitos que se van turnando */
.loader-figs{position:absolute;inset:34px}
.loader-figs .fig{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:figCycle 3.6s infinite}
.loader-figs .fig:nth-child(2){animation-delay:1.2s}
.loader-figs .fig:nth-child(3){animation-delay:2.4s}
@keyframes figCycle{
  0%{opacity:0;transform:translateX(12px) scale(.92)}
  6%,29%{opacity:1;transform:none}
  35%,100%{opacity:0;transform:translateX(-12px) scale(.92)}
}

/* Etiquetas */
.loader-steps{display:flex;gap:18px;font-family:var(--font-display);font-weight:600;font-size:.75rem;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-on-dark)}
.loader-steps span{animation:stepOn 3.6s infinite}
.loader-steps span:nth-child(2){animation-delay:1.2s}
.loader-steps span:nth-child(3){animation-delay:2.4s}
@keyframes stepOn{0%,33%{color:var(--coral)}34%,100%{color:var(--muted-on-dark)}}

/* Colores de las figuras (se heredan dentro de <use>) */
.fig{color:var(--cream);--fig-accent:var(--coral)}

@media (prefers-reduced-motion:reduce){
  .loader-figs .fig:first-child{opacity:1}
}