/* otp.css — as 6 caixinhas do código (par do otp.js). Usa a paleta da página. */
.otp{display:flex;gap:10px;justify-content:center}
.otp-caixa{width:48px;height:58px;padding:0;margin:0;text-align:center;
  font-family:var(--display,'Archivo',sans-serif);font-size:24px;font-weight:700;
  color:var(--tinta,#1B211C);background:var(--papel-2,#F7F5F0);
  border:1.5px solid var(--linha,rgba(27,33,28,.15));border-radius:10px;outline:none;caret-color:transparent;
  transition:border-color .18s,background-color .18s,color .18s,box-shadow .18s,transform .18s}
.otp-caixa:focus{border-color:var(--verde,#2A5741);box-shadow:0 0 0 4px rgba(42,87,65,.14);transform:translateY(-2px)}
.otp-caixa:disabled{opacity:.7}
.otp-caixa.pop{animation:otp-pop .18s ease-out}
.otp.errado .otp-caixa{border-color:var(--erro,#A4402B);color:var(--erro,#A4402B);background:rgba(164,64,43,.06)}
.otp.tremer{animation:otp-tremer .42s ease-in-out}
.otp-caixa.certo{background:var(--verde,#2A5741);border-color:var(--verde,#2A5741);color:#F7F5F0;
  opacity:1;animation:otp-virar .26s ease-out}
@keyframes otp-pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes otp-tremer{0%,100%{transform:translateX(0)}15%{transform:translateX(-10px)}30%{transform:translateX(10px)}
  45%{transform:translateX(-6px)}60%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes otp-virar{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@media (max-width:380px){.otp{gap:7px}.otp-caixa{width:42px;height:52px;font-size:21px}}
@media (prefers-reduced-motion:reduce){
  .otp-caixa,.otp-caixa:focus{transition:none;transform:none}
  .otp-caixa.pop,.otp.tremer,.otp-caixa.certo{animation:none}}