@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
:root{--fondo:#080808;--texto:#f2f2f2;--apagado:#8a8a8a;--linea:rgba(255,255,255,.05)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--fondo);color:var(--texto);font-family:Poppins,sans-serif}
body{overflow:hidden}
.rejilla{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(380px circle at var(--x,50%) var(--y,40%),#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(380px circle at var(--x,50%) var(--y,40%),#000 0%,transparent 70%)}
.raiz{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.12);margin-bottom:18px}
.marca{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:#9a9a9a;margin-bottom:10px}
h1{font-size:clamp(28px,5vw,44px);letter-spacing:-.04em;font-weight:650}
.sub{margin-top:8px;color:var(--apagado)}
.barra{width:160px;height:2px;background:rgba(255,255,255,.08);border-radius:99px;margin:22px 0 18px;overflow:hidden}
.barra span{display:block;height:100%;width:0;background:#f1f1f1;animation:carga 1.7s ease forwards}
.enlace{font-size:13px;color:#9a9a9a;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:2px}
.enlace:hover{color:#fff}
@keyframes carga{to{width:100%}}