/* =============================================================
   ENTRAR E CRIAR CONTA
   -------------------------------------------------------------
   Tela cheia, em duas metades: à esquerda o Ramboo (o logo) fala e
   reage; à direita o cartão de entrada. Atrás de tudo, uma
   constelação de conversas que segue o dedo e explode em ondas.

   Só usa os tokens do tema (--accent-rgb etc.): muda de cor junto
   com a cor escolhida em Ajustes. A vida está em js/auth-tela.js.
============================================================= */

#loginModal.au-tela {
  --au-x: 50%;
  --au-y: 40%;
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: block;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(var(--accent-rgb), .16), transparent 60%),
    radial-gradient(900px 620px at 92% 96%, rgba(var(--accent-rgb), .10), transparent 62%),
    #05050a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--text);
  animation: auEntra .5s ease both;
  isolation: isolate;
}
#loginModal.au-tela.hidden { display: none !important; }
@keyframes auEntra { from { opacity: 0; } to { opacity: 1; } }

/* saída: some com um leve zoom, como quem atravessa uma porta */
#loginModal.au-tela.au-saindo { animation: auSai .55s cubic-bezier(.5,0,.75,0) forwards; pointer-events: none; }
@keyframes auSai { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }

/* ---------- fundo ---------- */
/* As camadas do fundo moram DENTRO da tela de entrada (z 200000), que já
   é um contexto próprio: o z-index 0/1 aqui é local. Escritas com
   top/right/bottom/left para não se confundirem com folhas soltas. */
#auFundo {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; display: block; touch-action: none;
}

.au-aurora { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.au-aurora i {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
  background: rgba(var(--accent-rgb), .55);
  will-change: transform;
}
.au-aurora i:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax; animation: auFlutua 22s ease-in-out infinite; }
.au-aurora i:nth-child(2) { width: 38vmax; height: 38vmax; right: -12vmax; bottom: -16vmax; opacity: .34; animation: auFlutua 28s ease-in-out -9s infinite reverse; }
.au-aurora i:nth-child(3) { width: 22vmax; height: 22vmax; left: 46%; top: 30%; opacity: .16; animation: auFlutua 34s ease-in-out -4s infinite; }
@keyframes auFlutua {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
  66%      { transform: translate3d(-4vmax, 7vmax, 0) scale(.94); }
}

/* holofote que acompanha o toque */
.au-foco {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(360px circle at var(--au-x) var(--au-y), rgba(var(--accent-rgb), .13), transparent 70%);
  transition: opacity .3s;
}
.au-grao {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- palco: duas metades ---------- */
.au-palco {
  position: relative; z-index: 2;
  min-height: 100%;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 440px);
  align-items: center;
  gap: clamp(28px, 6vw, 88px);
}

/* ---------- herói (esquerda) ---------- */
.au-heroi { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }

.au-logo-caixa {
  position: relative;
  width: clamp(112px, 15vw, 168px);
  aspect-ratio: 1;
  perspective: 700px;
  flex: none;
}
.au-anel {
  position: absolute; inset: -14%; border-radius: 34%;
  border: 1.5px solid rgba(var(--accent-rgb), .45);
  opacity: 0; pointer-events: none;
  animation: auOnda 3.6s ease-out infinite;
}
.au-anel.a2 { animation-delay: 1.8s; }
@keyframes auOnda {
  0%   { transform: scale(.82); opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.au-logo {
  position: relative; width: 100%; height: 100%;
  border-radius: 24%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--fy, 0px)) scale(var(--sc, 1)) rotate(var(--rz, 0deg));
  transition: transform .18s ease-out, filter .35s, box-shadow .35s;
  box-shadow: 0 24px 60px -18px rgba(var(--accent-rgb), .55), 0 0 0 1px rgba(255,255,255,.08);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  animation: auRespira 5s ease-in-out infinite;
}
@keyframes auRespira { 0%,100% { --fy: 0px; } 50% { --fy: -6px; } }
@property --fy { syntax: '<length>'; inherits: true; initial-value: 0px; }
.au-logo:focus-visible { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .7); }
/* As três poses do mascote empilhadas no mesmo lugar, uma por cima da
   outra, trocando por crossfade — "normal" é o repouso, "senha" entra
   quando o campo de senha está em foco, "sucesso" quando o login dá
   certo. Nada de fundo/moldura: a arte já vem recortada. */
.au-fig {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  display: block; user-select: none; -webkit-user-drag: none;
  opacity: 0; transform: scale(.97); pointer-events: none;
  transition: opacity .35s var(--ease, ease), transform .35s var(--ease, ease);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.5));
}
.au-fig-normal { opacity: 1; transform: scale(1); }
.au-logo-caixa[data-humor="virado"] .au-fig-normal,
.au-logo-caixa[data-humor="sucesso"] .au-fig-normal { opacity: 0; transform: scale(.97); }
.au-logo-caixa[data-humor="virado"] .au-fig-senha { opacity: 1; transform: scale(1); }
.au-logo-caixa[data-humor="sucesso"] .au-fig-sucesso { opacity: 1; transform: scale(1); }
.au-brilho {
  position: absolute; inset: 0; border-radius: 24%; pointer-events: none; overflow: hidden;
}
.au-brilho::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: auBrilho 6s ease-in-out 1.2s infinite;
}
@keyframes auBrilho { 0%, 70% { left: -60%; } 100% { left: 150%; } }

/* estados do logo — a pose (au-fig-*) já mostra "virado"/"sucesso";
   aqui só o movimento físico por cima. */
.au-logo-caixa[data-humor="virado"] .au-logo { --rz: -3deg; --sc: .96; }
.au-logo-caixa[data-humor="feliz"] .au-logo   { --sc: 1.06; box-shadow: 0 24px 70px -10px rgba(var(--accent-rgb), .9), 0 0 0 1px rgba(255,255,255,.14); }
.au-logo-caixa[data-humor="erro"] .au-logo    { animation: auTreme .5s cubic-bezier(.36,.07,.19,.97) both; box-shadow: 0 24px 60px -18px rgba(248,113,113,.6), 0 0 0 1px rgba(248,113,113,.4); }
.au-logo-caixa[data-humor="carregando"] .au-logo { animation: auGira 1.1s linear infinite; }
.au-logo-caixa[data-humor="carregando"] .au-anel { animation-duration: 1.4s; }
.au-logo-caixa[data-humor="sucesso"] .au-logo { animation: auPula .7s cubic-bezier(.3,1.6,.5,1) both; }
.au-logo-caixa[data-humor="tonto"] .au-logo   { animation: auRodopio .9s cubic-bezier(.4,.1,.2,1) both; }
@keyframes auTreme {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); }
}
@keyframes auGira { to { transform: rotateY(360deg); } }
@keyframes auPula {
  0% { transform: scale(1); } 35% { transform: scale(1.22) translateY(-14px) rotate(-5deg); }
  65% { transform: scale(.96) translateY(0) rotate(3deg); } 100% { transform: scale(1.06); }
}
@keyframes auRodopio { to { transform: rotate(720deg) scale(1); } }
.au-logo-caixa.au-cutuca .au-logo { animation: auCutuca .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes auCutuca { 0% { transform: scale(1); } 40% { transform: scale(.86) rotate(-4deg); } 100% { transform: scale(1); } }

/* ---------- balão de fala ---------- */
.au-fala {
  position: relative;
  max-width: 30ch;
  min-height: 3.4em;
  padding: 16px 20px 16px;
  border-radius: 6px 22px 22px 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--text-strong, #fff);
  transition: border-color .3s, background .3s, transform .3s;
  transform-origin: 0 0;
}
.au-fala::before { /* rabinho do balão, apontando para o logo */
  content: ''; position: absolute; left: 22px; top: -8px; width: 16px; height: 16px;
  background: inherit; border: inherit; border-right: 0; border-bottom: 0;
  transform: rotate(45deg); border-radius: 4px 0 0 0;
  backdrop-filter: inherit;
}
.au-fala p { margin: 0; min-height: 1.28em; }
.au-fala p .au-cursor {
  display: inline-block; width: .09em; height: 1em; margin-left: 2px; vertical-align: -.12em;
  background: rgba(var(--accent-rgb), 1); animation: auPisca .8s steps(1) infinite;
}
@keyframes auPisca { 50% { opacity: 0; } }
.au-fala.au-nova { animation: auBalao .42s cubic-bezier(.3,1.5,.5,1); }
@keyframes auBalao { from { transform: scale(.86); opacity: .3; } to { transform: scale(1); opacity: 1; } }

.au-digitando { display: none; gap: 5px; padding: 8px 2px 4px; }
.au-digitando i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--accent-rgb), 1); animation: auPonto 1s ease-in-out infinite; }
.au-digitando i:nth-child(2) { animation-delay: .15s; }
.au-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes auPonto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }
.au-fala.au-pensando .au-digitando { display: flex; }
.au-fala.au-pensando p { display: none; }

.au-fala[data-tom="erro"]  { border-color: rgba(248,113,113,.55); background: linear-gradient(160deg, rgba(248,113,113,.18), rgba(248,113,113,.06)); }
.au-fala[data-tom="aviso"] { border-color: rgba(245,158,11,.5);  background: linear-gradient(160deg, rgba(245,158,11,.16), rgba(245,158,11,.05)); }
.au-fala[data-tom="ok"]    { border-color: rgba(52,211,153,.5);  background: linear-gradient(160deg, rgba(52,211,153,.16), rgba(52,211,153,.05)); }

.au-sugestao {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0;
  color: var(--text-strong, #fff);
  background: rgba(var(--accent-rgb), .28); border: 1px solid rgba(var(--accent-rgb), .6);
  cursor: pointer; transition: transform .15s, background .15s;
}
.au-sugestao:hover { background: rgba(var(--accent-rgb), .42); transform: translateY(-1px); }

.au-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- vantagens ---------- */
.au-vantagens { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.au-vantagens li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; font-size: 14.5px; color: var(--text-faint);
  transition: color .5s, transform .5s, opacity .5s;
  opacity: .55;
}
.au-vantagens li i {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: var(--text-dim); font-size: 14px; transition: all .5s;
}
.au-vantagens li.on { color: var(--text); opacity: 1; transform: translateX(6px); }
.au-vantagens li.on i { background: rgba(var(--accent-rgb), .2); border-color: rgba(var(--accent-rgb), .55); color: var(--accent-hi); box-shadow: 0 0 22px -4px rgba(var(--accent-rgb), .7); }

/* ---------- cartão ---------- */
.au-cartao {
  --tx: 0deg; --ty: 0deg;
  position: relative; overflow: hidden;
  padding: 30px 30px 24px;
  border-radius: 28px;
  background: linear-gradient(170deg, rgba(28,28,40,.72), rgba(12,12,18,.78));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--accent-rgb), .08), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform .25s ease-out, box-shadow .3s;
  animation: auCartaoEntra .8s cubic-bezier(.2,.9,.2,1) .15s backwards;
}
@keyframes auCartaoEntra { from { opacity: 0; transform: translateY(34px) scale(.96); } }
.au-cartao.au-treme { animation: auTreme .5s cubic-bezier(.36,.07,.19,.97); }
.au-cartao.au-sucesso { box-shadow: 0 40px 100px -20px rgba(52,211,153,.5), 0 0 0 1px rgba(52,211,153,.4), inset 0 1px 0 rgba(255,255,255,.12); }

.au-cartao-luz { /* brilho que passa sob o dedo */
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--lx, 50%) var(--ly, 0%), rgba(var(--accent-rgb), .16), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
.au-cartao:hover .au-cartao-luz, .au-cartao:focus-within .au-cartao-luz { opacity: 1; }

.au-cabeca { text-align: center; margin: 0 0 20px; }
.au-cabeca h1 {
  margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff, rgba(var(--accent-rgb), 1) 180%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.au-cabeca p { margin: 4px 0 0; font-size: 14px; color: var(--text-dim); transition: opacity .2s; }

/* ---------- abas com pílula deslizante ---------- */
#loginModal .au-abas {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 4px; margin: 0 0 20px;
  border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
}
.au-slider {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .16));
  border: 1px solid rgba(var(--accent-rgb), .55);
  box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .42s cubic-bezier(.3,1.35,.5,1);
}
#loginModal .au-aba {
  position: relative; z-index: 1; padding: 11px 8px; font-size: 14px; font-weight: 700;
  background: none !important; box-shadow: none !important; border-radius: 10px;
  color: var(--text-faint); transition: color .25s;
}
#loginModal .au-aba.active { color: #fff; }
#loginModal .au-aba:hover { color: var(--text); }
#loginModal .au-aba.active:hover { color: #fff; }

.au-aviso { margin: 0 0 14px; }

/* ---------- formulário ---------- */
.au-form { display: flex; flex-direction: column; gap: 16px; }
.au-form.au-troca { animation: auForm .42s cubic-bezier(.2,.9,.3,1) both; }
@keyframes auForm { from { opacity: 0; transform: translateX(var(--dx, 24px)); } }

.au-campo { position: relative; }
.au-campo > label { display: block; margin: 0 0 7px 2px; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; color: var(--text-dim); transition: color .2s; }
.au-campo:focus-within > label { color: var(--accent-hi); }

.au-entrada { position: relative; }
.au-entrada input {
  width: 100%; height: 52px; box-sizing: border-box;
  padding: 0 46px 0 46px;
  font-size: 16px; /* 16px evita o zoom automático do iPhone */
  color: var(--text-strong, #fff);
  background: rgba(0,0,0,.34);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .25s, background .2s;
}
.au-entrada input::placeholder { color: var(--text-faint); }
.au-entrada input:hover { border-color: rgba(255,255,255,.2); }
.au-entrada input:focus {
  border-color: rgba(var(--accent-rgb), .9);
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18), 0 10px 30px -12px rgba(var(--accent-rgb), .6);
}
.au-icone {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--text-faint); pointer-events: none; transition: color .2s, transform .3s;
}
.au-campo:focus-within .au-icone { color: var(--accent-hi); transform: translateY(-50%) scale(1.15); }

.au-selo { /* check verde que aparece quando o campo está certo */
  position: absolute; right: 16px; top: 50%; font-size: 17px; color: #34d399;
  transform: translateY(-50%) scale(0); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.3,1.8,.5,1), opacity .2s;
}
.au-campo.ok .au-selo { transform: translateY(-50%) scale(1); opacity: 1; }
.au-campo.ok .au-entrada input { border-color: rgba(52,211,153,.55); }
.au-campo.erro .au-entrada input { border-color: rgba(248,113,113,.85); box-shadow: 0 0 0 4px rgba(248,113,113,.16); }
.au-campo.erro .au-icone { color: #f87171; }
.au-campo.erro { animation: auTreme .45s cubic-bezier(.36,.07,.19,.97); }

.au-olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  color: var(--text-faint); font-size: 16px; background: none; border: 0; cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
}
.au-olho:hover { color: var(--text-strong, #fff); background: rgba(255,255,255,.08); }
.au-olho[aria-pressed="true"] { color: var(--accent-hi); }
.au-olho:active { transform: translateY(-50%) scale(.88); }

.au-caps { margin: 7px 0 0 2px; font-size: 12.5px; font-weight: 600; color: #f59e0b; display: flex; align-items: center; gap: 6px; }
.au-trocar { margin: 7px 0 0 2px; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--accent-hi); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* força da senha */
.au-forca { display: flex; align-items: center; gap: 5px; margin: 9px 2px 0; }
.au-forca i { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,.1); transition: background .3s, transform .3s; }
.au-forca span { margin-left: 8px; flex: none; min-width: 84px; font-size: 12px; font-weight: 650; color: var(--text-faint); transition: color .3s; }
.au-forca[data-nivel="1"] i:nth-child(-n+1) { background: #f87171; }
.au-forca[data-nivel="2"] i:nth-child(-n+2) { background: #f59e0b; }
.au-forca[data-nivel="3"] i:nth-child(-n+3) { background: #a3e635; }
.au-forca[data-nivel="4"] i:nth-child(-n+4) { background: #34d399; }
.au-forca[data-nivel="1"] span { color: #f87171; } .au-forca[data-nivel="2"] span { color: #f59e0b; }
.au-forca[data-nivel="3"] span { color: #a3e635; } .au-forca[data-nivel="4"] span { color: #34d399; }
.au-forca i.au-pop { animation: auPop .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes auPop { 50% { transform: scaleY(2.2); } }

/* ---------- botão ---------- */
.au-botao {
  position: relative; overflow: hidden; isolation: isolate;
  height: 54px; margin-top: 4px; border: 0; border-radius: 15px; cursor: pointer;
  font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), .68));
  box-shadow: 0 16px 34px -12px rgba(var(--accent-rgb), .85), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .25s, filter .2s;
}
.au-botao::before { /* reflexo que corre no hover */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s;
}
.au-botao:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -12px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255,255,255,.4); }
.au-botao:hover::before { transform: translateX(120%); }
.au-botao:active { transform: translateY(1px) scale(.975); }
.au-botao:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px; }
.au-botao-txt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .3s, opacity .2s; }
.au-botao-carrega { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: translateY(14px); transition: transform .3s, opacity .2s; }
.au-botao-carrega i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: auPonto .9s ease-in-out infinite; }
.au-botao-carrega i:nth-child(2) { animation-delay: .12s; } .au-botao-carrega i:nth-child(3) { animation-delay: .24s; }
.au-botao.carregando { pointer-events: none; filter: saturate(.85); }
.au-botao.carregando .au-botao-txt { opacity: 0; transform: translateY(-14px); }
.au-botao.carregando .au-botao-carrega { opacity: 1; transform: none; }
.au-botao.pronto { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 16px 34px -12px rgba(52,211,153,.9); }

.au-rodape { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--text-faint); }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .au-palco {
    grid-template-columns: minmax(0, 1fr);
    align-content: start; gap: 22px;
    padding-top: max(22px, env(safe-area-inset-top));
    width: min(480px, 100%);
  }
  /* no celular o herói vira um cabeçalho compacto: logo ao lado do balão */
  .au-heroi {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 0;
  }
  .au-logo-caixa { width: 84px; }
  .au-fala { font-size: 17px; max-width: none; padding: 13px 16px; min-height: 3.6em; border-radius: 6px 18px 18px 18px; }
  .au-fala::before { left: -8px; top: 22px; transform: rotate(-45deg); }
  .au-vantagens { display: none; }
  .au-cartao { padding: 22px 18px 18px; border-radius: 24px; }
  .au-cabeca { display: none; }
}
@media (max-width: 380px) {
  .au-logo-caixa { width: 68px; }
  .au-fala { font-size: 15.5px; }
}
@media (max-height: 640px) and (min-width: 861px) {
  .au-vantagens { display: none; }
}

/* ---------- quem prefere menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  #loginModal.au-tela *, #loginModal.au-tela *::before, #loginModal.au-tela *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
  .au-aurora i { animation: none !important; }
}