.bb-load{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;
  background:radial-gradient(70% 62% at 50% 44%,#232120 0%,#141312 58%,#0B0B0B 100%);color:#fff;
  font-family:"Sora","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
html:not(.no-intro) .bb-load.solo-sin-intro{display:none}
.bbl-in{display:grid;justify-items:center;text-align:center}

.bbl-marca{position:relative;display:grid;place-items:center;width:148px;height:148px}
.bbl-marca::before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(215,40,47,.22),transparent 72%);opacity:0;animation:bbl-luz 2.6s ease-in-out .9s infinite}
.bbl-logo{position:relative;width:112px;height:112px;border-radius:50%;object-fit:cover;opacity:0;filter:blur(10px);transform:scale(.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -20px rgba(0,0,0,.8);animation:bbl-logo 1s cubic-bezier(.2,.7,.2,1) .1s forwards}
.bbl-aro{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.bbl-aro circle{fill:none;stroke-width:1.6}
.bbl-aro-f{stroke:rgba(255,255,255,.1)}
.bbl-aro-a{stroke:#D7282F;stroke-linecap:round;stroke-dasharray:70 345;stroke-dashoffset:0;transform-origin:70px 70px;opacity:0;
  animation:bbl-aparece .5s ease .5s forwards,bbl-gira 1.5s linear .5s infinite,bbl-largo 3s ease-in-out .5s infinite}

.bbl-nombre{margin-top:28px;font-family:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;font-size:clamp(2.3rem,9vw,3rem);line-height:.9;letter-spacing:.14em;padding-left:.14em;opacity:0;transform:translateY(8px);animation:bbl-sube .8s cubic-bezier(.2,.7,.2,1) .45s forwards}
.bbl-tag{margin-top:10px;font-size:.66rem;font-weight:600;letter-spacing:.55em;padding-left:.55em;color:rgba(255,255,255,.5);opacity:0;animation:bbl-sube .8s cubic-bezier(.2,.7,.2,1) .6s forwards}

@keyframes bbl-logo{to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes bbl-aparece{to{opacity:1}}
@keyframes bbl-gira{to{transform:rotate(360deg)}}
@keyframes bbl-largo{0%,100%{stroke-dasharray:50 365}50%{stroke-dasharray:150 265}}
@keyframes bbl-sube{to{opacity:1;transform:none}}
@keyframes bbl-luz{0%,100%{opacity:0;transform:scale(.92)}50%{opacity:1;transform:scale(1.04)}}

@media (prefers-reduced-motion:reduce){
  .bbl-logo,.bbl-nombre,.bbl-tag{animation:none;opacity:1;filter:none;transform:none}
  .bbl-marca::before{animation:none}
  .bbl-aro-a{animation:bbl-aparece .3s ease forwards,bbl-gira 4s linear infinite}
}