/* Mascote do Portal (ver mascote.js): movimentos sóbrios. */
.mascote { position: relative; width: 96px; pointer-events: none; z-index: 5; }
.mascote-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mascote .mq-todo { transform-box: view-box; transform-origin: 60px 130px; transform: rotate(var(--inclina, 0deg));
                    transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.mascote .mq-corpo { transform-box: view-box; transform-origin: 60px 96px; animation: mq-respira 3.6s ease-in-out infinite; }
@keyframes mq-respira { 50% { transform: translateY(-1.5px); } }
.mascote .mq-braco, .mascote .mq-perna { transform-box: view-box; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.mascote .mq-braco-e { transform-origin: 23px 60px; }
.mascote .mq-braco-d { transform-origin: 97px 60px; }
.mascote .mq-perna-e { transform-origin: 49px 96px; }
.mascote .mq-perna-d { transform-origin: 71px 96px; }
.mascote .mq-curva { stroke-dasharray: 90; animation: mq-curva 1.2s .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mq-curva { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }

/* chega andando: alguns passos da esquerda */
.mascote.chegando .mq-todo { animation: mq-chega 1.4s cubic-bezier(.3,.7,.3,1) both; }
@keyframes mq-chega { from { transform: translateX(-70px); opacity: 0; } 20% { opacity: 1; } to { transform: none; } }
.mascote.chegando .mq-perna-e { animation: mq-passo 0.35s ease-in-out 4 alternate; }
.mascote.chegando .mq-perna-d { animation: mq-passo 0.35s ease-in-out 4 alternate-reverse; }
.mascote.chegando .mq-braco-e { animation: mq-balanca 0.35s ease-in-out 4 alternate-reverse; }
.mascote.chegando .mq-braco-d { animation: mq-balanca 0.35s ease-in-out 4 alternate; }
@keyframes mq-passo { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes mq-balanca { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* acenar */
.mascote.acenando .mq-braco-d { animation: mq-acena 1.8s ease-in-out; }
@keyframes mq-acena { 0%, 100% { transform: none; } 18%, 50%, 82% { transform: rotate(-143deg); } 34%, 66% { transform: rotate(-118deg); } }
/* apontar para o formulário (à direita) */
.mascote.apontando .mq-braco-d { transform: rotate(-78deg); }
/* discreto: tapa os "olhos" com as duas mãos enquanto a pessoa digita a senha (as luvas param no alto do corpo) */
.mascote.discreto .mq-corpo { animation: none; }
.mascote.discreto .mq-braco-e { transform: rotate(-162deg); }
.mascote.discreto .mq-braco-d { transform: rotate(162deg); }
/* comemorar: um pulinho com os braços para cima */
.mascote.comemorando .mq-todo { animation: mq-pulo .6s cubic-bezier(.3,1.4,.5,1); }
.mascote.comemorando .mq-braco-e { transform: rotate(143deg); }
.mascote.comemorando .mq-braco-d { transform: rotate(-143deg); }
@keyframes mq-pulo { 45% { transform: translateY(-12px); } }
/* pensando: mão no lado, leve inclinação */
.mascote.pensando .mq-todo { transform: rotate(-5deg); }
.mascote.pensando .mq-braco-d { transform: rotate(-112deg); }

/* balão de fala */
.mascote-balao { position: absolute; bottom: 52%; right: 100%; margin-right: 6px; min-width: 150px; max-width: 220px; padding: 9px 13px; border-radius: 16px 16px 4px 16px;
                 background: #fff; color: #0F2A40; font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; white-space: normal;
                 border: 1px solid rgba(0,117,189,.2); box-shadow: 0 12px 30px rgba(18,51,74,.14); opacity: 0; transform: translateY(6px) scale(.95);
                 transform-origin: bottom right; transition: opacity .3s, transform .35s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.mascote.falando .mascote-balao { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mascote * { animation: none !important; transition: none !important; } }

/* o mascote fica sempre na frente de textos e imagens de fundo */
.mascote.mascote-rodape, .mascote.mascote-canto { z-index: 40; }