/* The loader has no minimum duration and never delays content. */
.obras-site [hidden] { display: none !important; }
.obras-site .obras-map-frame { position: relative; }
.obras-map-loading { position: absolute; inset: 0; z-index: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #071a2b; background: #f4f4eb; border: 1px solid rgba(7,26,43,.12); }
.obras-status[data-state="loading"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.obras-map-loading > strong, .obras-page-loading__card > strong { font-size: clamp(1.18rem, 3vw, 1.55rem); line-height: 1.2; letter-spacing: -.035em; }
.obras-map-loading > span, .obras-page-loading__card > span:last-of-type { font-size: .88rem; line-height: 1.5; color: #566675; }
.obras-loading-art { position: relative; width: 220px; max-width: 100%; height: 138px; flex: 0 0 138px; }
.obras-loading-route { display: block; width: 100%; height: 100%; overflow: visible; }
.obras-loading-grid { stroke: currentColor; stroke-opacity: .08; stroke-width: 1; }
.obras-loading-road { stroke: #af91ff; stroke-opacity: .3; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.obras-loading-trace { stroke: #8d69e1; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70 370; animation: obras-route 2.4s linear infinite; }
.obras-loading-point { fill: #8d69e1; transform-box: fill-box; transform-origin: center; animation: obras-point 2.4s ease-in-out infinite; }
.obras-loading-point--end { animation-delay: 1.2s; }
.obras-loading-helmet { position: absolute; inset: 35px 76px 35px 76px; display: grid; place-items: center; background: #071a2b; border-radius: 16px; transform: rotate(-6deg); animation: obras-helmet 2.4s ease-in-out infinite; }
.obras-loading-helmet img { display: block; width: 52px; height: auto; }
.obras-page-loading { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; color: #071a2b; background: #f4f4eb; }
.obras-page-loading:not([hidden]) { animation: obras-loading-appear .18s step-end both; }
.obras-page-loading::before { position: absolute; inset: 0; content: ""; background: url('/static/obras/brand/pattern-helmets.svg') center/440px; opacity: .06; pointer-events: none; }
.obras-page-loading__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(100%, 400px); padding: 34px 22px; text-align: center; }
.obras-loading-eyebrow { color: #6f52c8; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.obras-loading-progress { width: 128px; height: 3px; overflow: hidden; margin-top: 14px; background: rgba(7,26,43,.1); border-radius: 4px; }
.obras-loading-progress i { display: block; width: 42%; height: 100%; background: #6f52c8; animation: obras-progress 1.4s ease-in-out infinite; }
.obras-ranking-loading { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; min-height: 156px; padding-block: 20px !important; }
.obras-ranking-loading span { width: 88%; height: 12px; background: rgba(175,145,255,.23); border-radius: 3px; animation: obras-skeleton 1.8s ease-in-out infinite; }
.obras-ranking-loading span:nth-child(2) { width: 65%; animation-delay: .12s; }
.obras-ranking-loading span:nth-child(3) { width: 76%; animation-delay: .24s; }
@keyframes obras-route { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -370; } }
@keyframes obras-point { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.18); } }
@keyframes obras-helmet { 0%, 100% { transform: translateY(2px) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes obras-progress { from { transform: translateX(-110%); } to { transform: translateX(350%); } }
@keyframes obras-skeleton { 0%,100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes obras-loading-appear { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .obras-loading-trace, .obras-loading-point, .obras-loading-helmet, .obras-loading-progress i, .obras-ranking-loading span { animation: none; }
  .obras-loading-trace { stroke-dasharray: none; }
  .obras-loading-progress i { width: 100%; }
}