/* Web pública okusbot: capa fina sobre ../okus-sistema.css (no redefine el sistema) */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#000;overflow-x:hidden}
body{margin:0;font-size:16px;line-height:1.45;min-height:100dvh;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@keyframes flt{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}

/* Barra superior */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) var(--gutter) 10px;
  background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;min-height:44px;font-size:22px;line-height:1;letter-spacing:-.045em;text-decoration:none}
.brand .sym{height:24px;width:auto;margin-right:1px;transform:translateY(1px)}
.brand b{font-weight:700}.brand i{font-style:normal;font-weight:300}
.bar .sp{margin-left:auto}
.link-btn{min-height:44px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;text-decoration:none;font-weight:500}
.link-btn.solid{background:var(--ok-acc);color:var(--ok-acc-ink)}
.back{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;text-decoration:none}

/* Formularios */
.form{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;color:var(--ok-mute);padding-left:18px}
.input{height:56px;border-radius:999px;padding:0 22px;outline:none;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.input:focus{border-color:var(--ok-acc);box-shadow:0 0 0 4px rgba(200,192,255,.15)}
.btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.google{min-height:56px;border-radius:999px;background:#f2f2f2;color:#111;font-weight:600}
.or{display:flex;align-items:center;gap:12px;color:var(--ok-dim);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.fine{font-size:13px;color:var(--ok-mute);text-align:center}
.fine a{color:var(--ok-acc);display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.err{display:none;color:#ffb3b3;font-size:14px;padding-left:18px}
.demo{font-size:12px;text-align:center;color:var(--ok-mute);padding:6px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.demo b{color:var(--ok-acc);font-weight:500}

/* Código de 6 dígitos */
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code input{height:60px;text-align:center;font-size:24px;border-radius:18px;padding:0;min-width:0}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,20px);opacity:0;transition:.35s var(--ease-out);
  background:#1c1c25;border:1px solid rgba(255,255,255,.14);padding:12px 18px;border-radius:999px;font-size:14px;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.view{display:none;animation:in .35s var(--ease-out)}.view.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.head .okus{width:min(52vw,220px)!important;height:auto!important;margin:0 auto 14px}