html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Arial, sans-serif; background: #06130d; color: white; } #camera { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } #overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; background: radial-gradient(circle at center, #123b27 0%, #071b12 55%, #020a06 100%); } .brand { font-size: 13px; letter-spacing: 3px; color: #87efa1; margin-bottom: 22px; } h1 { margin: 0 0 16px; font-size: 32px; color: #ffffff; } p { max-width: 430px; line-height: 1.5; color: #d3ded7; margin-bottom: 28px; } button { border: 0; border-radius: 999px; padding: 16px 28px; font-size: 17px; font-weight: bold; background: #79e894; color: #06210f; cursor: pointer; } #arUI { position: fixed; inset: 0; display: none; pointer-events: none; } #guide { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); width: 88%; max-width: 440px; padding: 14px 18px; border-radius: 18px; background: rgba(0,0,0,.58); backdrop-filter: blur(7px); text-align: center; font-size: 15px; } #reticle { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 74px; height: 74px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; } #reticle::before, #reticle::after { content: ""; position: absolute; background: rgba(255,255,255,.85); } #reticle::before { width: 22px; height: 2px; left: 25px; top: 35px; } #reticle::after { width: 2px; height: 22px; left: 35px; top: 25px; } #status { margin-top: 18px; min-height: 22px; color: #a8f1b9; font-size: 14px; }
Apunta tu celular hacia la mesa y muévelo lentamente. Prepararemos el espacio donde aparecerá nuestro colibrí.