.wb{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 38%, #0a2147 0%, #060d1f 48%, #04070f 100%);
  color:#F3F1EC; font-family:'Archivo', Arial, sans-serif; opacity:1; transition:opacity .6s ease;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
}
.wb.wb-fuera{ opacity:0; pointer-events:none; }
.wb-rejilla{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(70,205,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(70,205,255,.07) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at center, #000 0%, transparent 70%); mask-image:radial-gradient(circle at center, #000 0%, transparent 70%);
}
.wb-centro{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:520px; text-align:center; }

.wb-centro{ perspective:1100px; }
.wb-logo{ position:relative; flex:none; width:min(88vw, 460px, 50vh); height:min(88vw, 460px, 50vh); opacity:0; transform-style:preserve-3d; margin-bottom:-2%; }
.wb-logo.on{ animation:wb-camara 1.9s cubic-bezier(.16,.84,.26,1) forwards; }
.wb-esfera{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wb-marca{
  position:absolute; left:50%; top:43%; width:40%; height:auto; transform:translate(-50%,-50%) translateZ(60px);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(70,205,255,.35)); opacity:0;
}
.wb-logo.on .wb-marca{ animation:wb-marca-entra 1.1s .9s ease-out forwards, wb-flota 5s 2s ease-in-out infinite; }

.wb-lineas{ display:flex; flex-direction:column; gap:6px; width:100%; max-width:380px; min-height:62px; }
.wb-linea{ display:flex; align-items:baseline; gap:6px; font-family:'IBM Plex Mono', 'Courier New', monospace; font-size:11.5px; letter-spacing:.8px; color:#A19C93; opacity:0; animation:wb-aparece .35s forwards; }
.wb-linea .wb-pts{ flex:1; border-bottom:1px dotted rgba(243,241,236,.25); transform:translateY(-3px); }
.wb-linea .wb-ok{ color:#F6C21C; font-weight:600; }

.wb-saludo{ font-family:'Anton', 'Archivo Black', sans-serif; font-size:clamp(26px,6.4vw,38px); letter-spacing:1px; line-height:1.1; min-height:1.2em; color:#F6C21C; text-wrap:balance; }
.wb-saludo::after{ content:'▌'; margin-left:4px; color:#46CDFF; animation:wb-parpadeo 1s steps(2) infinite; }
.wb-saludo.listo::after{ content:''; }
.wb-sub{ font-family:'Archivo', Arial, sans-serif; font-weight:800; font-size:12.5px; letter-spacing:1.2px; background:#F6C21C; color:#111; padding:6px 14px; border-radius:3px; opacity:0; transition:opacity .6s; }
.wb-sub.on{ opacity:1; }

.wb-nombre{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:320px; }
.wb-nombre label{ font-size:14px; color:#F3F1EC; }
.wb-nombre input{
  width:100%; background:#14151a; border:1px solid rgba(243,241,236,.22); color:#F3F1EC; border-radius:10px;
  padding:13px 14px; font-size:16px; font-family:inherit; text-align:center;
}
.wb-nombre input:focus-visible, .wb-btn:focus-visible, .wb-saltar:focus-visible{ outline:2px solid #F6C21C; outline-offset:2px; }
.wb-btn{
  background:#F6C21C; color:#111; border:none; border-radius:10px; padding:12px 22px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
}
.wb-btn.sec{ background:transparent; color:#A19C93; border:1px solid rgba(243,241,236,.22); font-weight:500; }
.wb-activar{ letter-spacing:2px; font-family:'IBM Plex Mono', 'Courier New', monospace; }
.wb-saltar{
  position:absolute; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  background:none; border:1px solid rgba(243,241,236,.2); color:#A19C93; border-radius:20px; padding:7px 14px; font-size:12px; font-family:inherit; cursor:pointer;
}
.wb[hidden], .wb [hidden]{ display:none !important; }

@keyframes wb-camara{
  0%{ opacity:0; transform:perspective(1100px) translateZ(-420px) rotateX(24deg) scale(.7); }
  35%{ opacity:1; }
  100%{ opacity:1; transform:perspective(1100px) translateZ(0) rotateX(0) scale(1); }
}
@keyframes wb-marca-entra{ from{ opacity:0; transform:translate(-50%,-50%) translateZ(-80px) scale(.85); } to{ opacity:1; transform:translate(-50%,-50%) translateZ(60px) scale(1); } }
@keyframes wb-flota{ 0%,100%{ transform:translate(-50%,-50%) translateZ(60px); } 50%{ transform:translate(-50%,-53%) translateZ(80px); } }
@keyframes wb-parpadeo{ to{ visibility:hidden; } }

@media (prefers-reduced-motion: reduce){
  .wb-logo.on{ animation:none; opacity:1; }
  .wb-logo.on .wb-marca{ animation:none; opacity:1; }
  .wb-saludo::after{ animation:none; }
}