/* Infobite Acolhe · cartão de códigos (Código A + Código B) estilo vidro */
.otp-card{position:relative;border-radius:28px;padding:26px 22px 20px;margin-top:16px;color:#f4f3f1;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,rgba(46,44,48,.94),rgba(19,19,21,.97) 60%);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  animation:otpEntra .7s var(--ease) both}
.otp-card::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(40% 35% at 75% 10%,rgba(var(--glow),.28),transparent 70%);transition:background .9s var(--ease)}
@keyframes otpEntra{from{opacity:0;transform:translateY(18px) scale(.98)}}
.otp-alca{width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);margin:-10px auto 18px}
.otp-txt{text-align:center;margin-bottom:22px}
.otp-txt b{display:block;font:600 20px var(--head);letter-spacing:-.01em;transition:color .5s}
.otp-txt small{display:block;font-size:13.5px;color:#a29d97;margin-top:4px;line-height:1.45}
.otp-palco{position:relative}
.otp-linha{display:flex;align-items:flex-end;justify-content:center;gap:14px}
.otp-grupo{display:grid;gap:8px;justify-items:center}
.otp-rot{font:700 10.5px var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:#8f8b86;transition:opacity .35s}
.otp-caixas{display:flex;gap:7px}
.otp-c{width:42px;height:54px;padding:0;border-radius:13px;text-align:center;font:600 22px var(--head);color:#fff;caret-color:var(--acc);
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);outline:none;
  transition:transform .55s var(--ease),opacity .35s,border-color .3s,box-shadow .3s,background .3s}
.otp-c:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--glow),.18),0 0 22px rgba(var(--glow),.45);background:rgba(var(--glow),.06)}
.otp-c.cheio{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08)}
.otp-c.pop{animation:otpPop .25s var(--ease)}
@keyframes otpPop{50%{transform:scale(1.12)}}
.otp-mais{font:300 26px var(--head);color:#5c5854;padding-bottom:12px;transition:opacity .35s,transform .45s var(--ease)}
.otp-fusao{position:absolute;left:50%;top:calc(50% + 10px);width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:18px;display:grid;place-items:center;
  border:2px solid var(--acc);background:rgba(var(--glow),.14);box-shadow:0 0 30px rgba(var(--glow),.55);opacity:0;transform:scale(.5);pointer-events:none;
  transition:opacity .35s,transform .5s var(--ease),border-color .4s,background .4s,box-shadow .4s}
.otp-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.2);border-top-color:#fff;animation:girar .8s linear infinite;grid-area:1/1}
.otp-check{grid-area:1/1;opacity:0;transform:scale(.3) rotate(-20deg);transition:.5s var(--ease)}
.otp-check svg{width:28px;height:28px;color:#fff}
.otp-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);transition:opacity .4s}
.otp-olho{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--sans);color:#d5d1cc;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06)}
.otp-olho svg{width:17px;height:17px}.otp-olho[aria-pressed=true]{color:#fff;background:rgba(var(--glow),.22)}
.otp-lembrar{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#a29d97;cursor:pointer}
.otp-lembrar input{width:18px;height:18px;accent-color:var(--acc)}
.otp-msg{min-height:20px;margin:10px 0 0;text-align:center;font-size:13.5px;color:#ff9a9d}
/* sequência: juntar → fundir → liberar */
.otp-card.juntando .otp-c{transform:translate(var(--dx,0),var(--dy,0)) scale(.82);border-color:var(--acc);box-shadow:0 0 18px rgba(var(--glow),.5)}
.otp-card.juntando .otp-rot,.otp-card.juntando .otp-mais{opacity:0}
.otp-card.juntando .otp-mais{transform:scale(.4)}
.otp-card.fundido .otp-c{opacity:0}
.otp-card.fundido .otp-fusao{opacity:1;transform:scale(1)}
.otp-card.liberado::before{background:radial-gradient(60% 60% at 50% 45%,rgba(34,224,122,.35),transparent 72%)}
.otp-card.liberado{border-color:rgba(34,224,122,.35)}
.otp-card.liberado .otp-fusao{border-color:var(--ok);background:rgba(34,224,122,.22);box-shadow:0 0 44px rgba(34,224,122,.6);transform:scale(1.06)}
.otp-card.liberado .otp-spin{display:none}
.otp-card.liberado .otp-check{opacity:1;transform:none}
.otp-card.liberado .otp-pe{opacity:.25}
.otp-card.erro .otp-fusao{border-color:var(--alert);background:rgba(var(--alertRGB),.2);box-shadow:0 0 30px rgba(var(--alertRGB),.6);animation:tremor .45s}
@keyframes tremor{20%,60%{translate:-8px 0}40%,80%{translate:8px 0}}
.otp-card.tremer{animation:tremor .45s}
/* em telas estreitas, Código A e B ficam em linhas */
.otp-card.coluna .otp-linha{flex-direction:column;align-items:center;gap:6px}
.otp-card.coluna .otp-mais{padding:0;line-height:1}
@media(max-width:400px){.otp-c{width:38px;height:50px;font-size:20px}.otp-caixas{gap:6px}}
/* Código A simples (cadastro) */
.otp-simples{display:flex;gap:7px;flex-wrap:wrap}
.otp-simples .otp-c{color:var(--ink);background:var(--field);border-color:var(--line2)}
.otp-simples .otp-c.cheio{border-color:var(--acc);background:rgba(var(--glow),.06)}
/* olho da senha */
.senha-wrap{position:relative;display:block}
.senha-wrap input{padding-right:50px!important}
.olho-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--mute)}
.olho-senha:hover{background:var(--chip)}.olho-senha svg{width:19px;height:19px}.olho-senha.on{color:var(--accText)}
.seg button{font-size:13px}
@media (prefers-reduced-motion:reduce){.otp-c,.otp-fusao{transition:none}}