/* ============================================================
   LOGIN-V2.CSS — visual da tela "Acesso da Equipe"
   Todas as classes usam o prefixo .loginv2- para não conflitar
   com .wcr-btn / .wcr-input / .wcr-field já usados no resto do site.
   Usa só as variáveis --wcr-* do tema ativo, então acompanha o
   claro/escuro/contraste automaticamente sem regras próprias.
   ============================================================ */

.loginv2-tela {
    position: relative;
    min-height: 100vh;
    background: var(--wcr-papel-2);
    overflow-x: hidden; /* mantém o corte do slide lateral */
    overflow-y: auto; /* formulário + card de marca empilhados podem ficar
                          mais altos que a tela — deixa rolar em vez de cortar. */
}

.loginv2-shell {
    --loginv2-bg: var(--wcr-papel-2);
    --loginv2-surface: color-mix(in srgb, var(--wcr-card) 92%, var(--wcr-tinta) 8%);
    --loginv2-text: #fff;
    --loginv2-accent: var(--wcr-agua);
    --loginv2-accent-600: color-mix(in srgb, var(--wcr-agua) 85%, black);
    --loginv2-accent-700: color-mix(in srgb, var(--wcr-agua) 70%, black);
    --loginv2-line: var(--wcr-linha);
    --loginv2-muted: #A9BDC9;
    --loginv2-head-font: "Barlow Condensed", system-ui, sans-serif;
    --loginv2-body-font: "Barlow", system-ui, sans-serif;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    background: #05070b;
}
.loginv2-shell *, .loginv2-shell *::before, .loginv2-shell *::after { box-sizing: border-box; }
@keyframes loginv2-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Só fade, sem transform — usada no card de login pra não brigar com o
   transform que o tilt 3D seta via JS (ver .loginv2 mais abaixo). */
@keyframes loginv2-fade-entra { from { opacity: 0; } to { opacity: 1; } }

/* Seta pra trocar entre "Acesso da Equipe" e "Área do Cliente" — fica presa
   na borda vertical central da tela, aponta pro login do outro lado. Ao
   clicar, a tela inteira (.loginv2-shell) desliza pra fora nessa mesma
   direção antes de carregar a outra view (ver wcrTrocarLoginComSlide em
   Js/core/sessao.js). */
/* Agora é uma pilula com texto explicando pra onde ela leva, não só uma
   setinha sem contexto — quem nunca viu o site não tinha como adivinhar o
   que ela fazia. Dá um pulso sutil logo que a tela abre, pra chamar a
   atenção uma vez, e some sozinho (ver .loginv2-switch-seta--chama). */
/* De volta pro meio da lateral — mas só em telas espaçosas (≥1000px), onde
   sobra fundo dos dois lados do card e ela não esbarra em nada. Abaixo
   disso o card (620px + padding) chega perto o bastante da borda pra
   colar nela, então continua embaixo (mais seguro em qualquer largura). */
.loginv2-switch-seta {
    position: fixed;
    bottom: 22px;
    z-index: 20;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(10, 14, 20, .55);
    backdrop-filter: blur(6px);
    color: #fff;
    display: flex; align-items: center; gap: 9px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0,0,0,.28);
    transition: background .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.loginv2-switch-seta:hover { background: rgba(63, 214, 189, .28); border-color: rgba(63, 214, 189, .5); transform: scale(1.04); }
@media (min-width: 1000px) {
    .loginv2-switch-seta { top: 50%; bottom: auto; transform: translateY(-50%); }
    .loginv2-switch-seta:hover { transform: translateY(-50%) scale(1.04); }
}
.loginv2-switch-seta--dir { right: 18px; }
.loginv2-switch-seta--esq { left: 18px; }
.loginv2-switch-seta i { width: 18px; height: 18px; flex-shrink: 0; }
.loginv2-switch-texto { font-size: 12.5px; font-weight: 600; white-space: nowrap; letter-spacing: .01em; }

@keyframes loginv2-switch-chama {
    0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,.28), 0 0 0 0 rgba(63,214,189,.5); }
    50% { box-shadow: 0 6px 22px rgba(0,0,0,.28), 0 0 0 8px rgba(63,214,189,0); }
}
.loginv2-switch-seta { animation: loginv2-switch-chama 1.6s ease-out 2; }

@media (max-width: 560px) {
    .loginv2-switch-texto { display: none; }
    .loginv2-switch-seta { width: 44px; height: 44px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .loginv2-switch-seta { animation: none; }
}

.loginv2-shell {
    transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
    will-change: transform, opacity;
}
/* Sai: a tela atual desliza pra fora, com um fade leve, na direção de quem
   foi clicado. Entra: a tela nova (ver script no fim de login.html/
   cliente-login.html) começa fora do lado oposto e desliza até o lugar.
   Sem zoom nem desfoque — só um deslocamento suave, mais parecido com como
   um app de verdade troca de tela, sem cansar a vista. */
.loginv2-shell.loginv2-shell--sai-dir { transform: translateX(-6%); opacity: 0; }
.loginv2-shell.loginv2-shell--sai-esq { transform: translateX(6%); opacity: 0; }
.loginv2-shell.loginv2-shell--entra-dir { transform: translateX(6%); opacity: 0; }
.loginv2-shell.loginv2-shell--entra-esq { transform: translateX(-6%); opacity: 0; }

/* Card do formulário aparece com um leve atraso e sobe um pouquinho — dá
   uma sensação sutil de camada, sem exagerar. */
.loginv2 { animation: loginv2-card-entra .4s ease-out both; animation-delay: .1s; }
@keyframes loginv2-card-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .loginv2-shell { transition: none !important; }
    .loginv2 { animation: none !important; }
}

/* Fotos em tela cheia, atrás de tudo — trocam sozinhas com crossfade,
   como um vídeo em loop. A primeira fica visível (is-ativa); as
   outras ficam empilhadas por baixo, prontas pra entrar suavemente. */
.loginv2-bg-slides { position: absolute; inset: 0; z-index: 0; }
.loginv2-bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.05);
    opacity: 0;
    transition: opacity 1.8s ease;
}
.loginv2-bg-img.is-ativa { opacity: 1; }
/* Véu escuro em tinta (quase-preto azulado) por cima da foto inteira +
   um leve brilho ciano vindo das telas da própria foto — combina com o
   conteúdo dela (um centro de controle) em vez de forçar o verde da marca. */
.loginv2-bg-veu {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg, rgba(3,6,11,.72) 0%, rgba(3,6,11,.4) 40%, rgba(3,6,11,.22) 62%, rgba(3,6,11,.55) 100%),
        linear-gradient(0deg, rgba(3,6,11,.32) 0%, transparent 42%),
        radial-gradient(620px 460px at 82% 30%, color-mix(in srgb, var(--wcr-agua) 20%, transparent), transparent 70%);
}

.loginv2-topo {
    position: absolute; top: 28px; left: 28px; right: 76px; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
}
.loginv2-marca-selo { font-family: var(--loginv2-head-font); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: rgba(255,255,255,.85); }
.loginv2-topo .loginv2-logo { box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.loginv2-topo-logo { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 10px; transition: transform .15s ease; }
.loginv2-topo-logo:hover { transform: scale(1.05); }

/* O card de info (título/frase/fatos) agora vive DENTRO do mesmo
   div do card de login (.loginv2) — não é mais um elemento separado que
   precisa ficar em sincronia via JS. É só mais uma seção dentro do
   mesmo card, separada por uma linha fina, então tilt/hover/animação já
   são os mesmos automaticamente, sem nenhum código especial.
   Fica entre o cabeçalho do login (kicker/título/aviso, que continuam no
   topo) e o formulário em si (que desce pra baixo dela) — ver "order"
   nela e no formulário/rodapé logo abaixo, sem precisar mexer no HTML. */
.loginv2-marca-conteudo {
    display: flex; flex-direction: column; gap: 9px;
    text-align: center;
    order: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(255,255,255,.16);
}
.loginv2-form, .loginv2-foot, .loginv2 > .login-ajuda { order: 2; }
.loginv2:hover {
    box-shadow: 0 18px 45px rgba(0,0,0,.4);
}
.loginv2-marca-conteudo .loginv2-marca-titulo {
    margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
    font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* align-self (não margin:auto) pra centralizar — dentro do flex column
   do .loginv2-marca-conteudo, margin:0 auto não centralizava de verdade
   (ficava grudado na esquerda, mesma aresta do título). */
.loginv2-marca-frase { align-self: center; margin: 0; font-size: 13px; line-height: 1.4; max-width: 34ch; color: #D7E2EA; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

.loginv2-marca-fatos {
    display: flex; justify-content: center; gap: 18px; margin-top: 0; padding-top: 12px;
}
.loginv2-fato { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.loginv2-fato strong { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.loginv2-fato span { font-size: 10.5px; color: #A9BDC9; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

.loginv2-form-col {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 0;
}
@media (min-width: 640px) {
    .loginv2-form-col { justify-content: flex-start; padding-left: 56px; }
    .loginv2-shell--inv .loginv2-form-col { justify-content: flex-end; padding-left: 24px; padding-right: 56px; }
}
/* Vidro escuro com blur — o card de login e o de info (ver
   .loginv2-marca-conteudo, agora dentro deste mesmo card) são a mesma
   peça, uma div só. */
.loginv2 {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 620px;
    padding: 40px 44px 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--loginv2-body-font);
    font-size: 15px;
    line-height: 1.55;
    color: #fff;
    background: rgba(4,9,15,.80);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    overflow: hidden;
    /* Sem animação de entrada aqui de propósito — ela usava "transform"
       (translateY) pra deslizar ao aparecer, e isso brigava com o
       transform que o tilt seta via JS ao passar o mouse (a animação
       sempre ganhava, travando o card sem inclinar — só o card de info,
       que nunca teve essa entrada, inclinava). A entrada em fade some
       (ver .loginv2-fade-entra) sem tocar em transform. */
    animation: loginv2-fade-entra .5s ease both;
    box-shadow: 0 30px 70px -18px rgba(0,0,0,.55), 0 8px 22px -8px rgba(0,0,0,.35);
}
.loginv2::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--loginv2-accent), var(--wcr-agua, var(--loginv2-accent)));
}
@media (prefers-reduced-motion: reduce) { .loginv2 { animation: none; } }

.loginv2 a { color: var(--loginv2-accent-700); text-decoration: none; text-underline-offset: 3px; }
.loginv2 a:hover { color: var(--loginv2-text); text-decoration: underline; }
.loginv2 :focus { outline: none; }
.loginv2 :focus-visible { outline: 2px solid var(--loginv2-accent); outline-offset: 2px; }
.loginv2 ::selection { background: color-mix(in srgb, var(--loginv2-accent) 30%, transparent); }
.loginv2 .login-ajuda { margin-top: 5px; font-size: 11.5px; line-height: 1.4; }

.loginv2-logo {
    width: 36px; height: 36px; font-size: 13px; margin-bottom: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--loginv2-accent) 14%, transparent);
}
.loginv2-head {
    display: flex; flex-direction: column; gap: 5px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.16);
}
.loginv2-kicker {
    font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--loginv2-accent-700);
}
.loginv2 h2.loginv2-title {
    margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
    font-size: 27px; line-height: 1.08; letter-spacing: -0.01em;
    color: var(--loginv2-text);
}
.loginv2-demo {
    font-size: 12px; color: var(--wcr-barro);
    background: color-mix(in srgb, var(--wcr-barro) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--wcr-barro) 30%, transparent);
    border-radius: 7px; padding: 8px 11px;
    display: flex; align-items: center; gap: 6px;
}
.loginv2-demo i { width: 13px; height: 13px; flex-shrink: 0; }

/* Card mais baixo e largo (retangular, não uma coluna alta) — usuário e
   senha ficam lado a lado em vez de empilhados, o que corta boa parte da
   altura em qualquer tamanho de tela, não só no celular. */
.loginv2-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 11px; }
.loginv2-rec-painel, .loginv2-submit { grid-column: 1 / -1; }
/* Abaixo de 640px (mesmo corte do .loginv2-form-col logo abaixo) o card
   fica estreito demais pra caber e-mail e senha lado a lado — as duas
   colunas de 1fr espremiam os campos a ponto de sobrepor texto/inputs no
   celular. Empilha em 1 coluna só nesse tamanho. */
@media (max-width: 640px) {
    .loginv2-form { grid-template-columns: 1fr; }
}
.loginv2-field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.loginv2-field label { font-size: 12.5px; font-weight: 600; color: var(--loginv2-text); }
/* "Esqueci minha senha" fica embaixo da caixa de senha (não mais colado
   no rótulo lá em cima) — os dois campos (e-mail/senha) ficam com o
   mesmo rótulo de uma linha só, então alinham igual lado a lado. */
.loginv2-esqueci-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    margin-top: 2px; align-self: center; text-align: center;
    font-size: 11px; font-weight: 600; color: var(--wcr-agua, #3FD6BD);
}
.loginv2-esqueci-btn:hover { text-decoration: underline; }

/* ============================================================
   "ESQUECI MINHA SENHA" — painel de recuperação por pergunta de
   segurança (ver wcrIniciarRecuperacaoSenha em sessao.js).
   ============================================================ */
.loginv2-rec-painel {
    margin-top: 14px; padding: 16px; border-radius: 12px;
    border: 1px solid rgba(63,214,189,.25);
    background: rgba(63,214,189,.06);
    display: flex; flex-direction: column; gap: 10px;
}
.loginv2-rec-titulo {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--wcr-agua, #3FD6BD); margin: 0;
}
.loginv2-rec-pergunta { font-size: 14px; font-weight: 600; color: var(--loginv2-text); margin: 0; }
.loginv2-rec-btns { display: flex; gap: 10px; margin-top: 2px; }
.loginv2-rec-btn-cancelar, .loginv2-rec-btn-confirmar {
    flex: 1; padding: 9px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: opacity .15s ease;
}
.loginv2-rec-btn-cancelar { background: transparent; border: 1px solid rgba(255,255,255,.16); color: var(--loginv2-text); }
.loginv2-rec-btn-confirmar { background: var(--wcr-verde); border: none; color: #fff; }
.loginv2-rec-btn-cancelar:hover, .loginv2-rec-btn-confirmar:hover { opacity: .85; }

.loginv2-inputwrap { position: relative; display: flex; align-items: center; }
.loginv2-inputicon {
    position: absolute; left: 12px; width: 16px; height: 16px;
    color: var(--loginv2-muted); pointer-events: none;
}
.loginv2-input {
    width: 100%; min-height: 42px; padding: 8px 14px 8px 36px;
    font: inherit; font-size: 13.5px; color: var(--loginv2-text);
    caret-color: var(--loginv2-accent);
    background: var(--loginv2-surface);
    border: 1.5px solid var(--loginv2-line); border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.loginv2-input::placeholder { color: var(--loginv2-muted); opacity: .8; }
.loginv2-input:hover { border-color: var(--loginv2-accent); }
.loginv2-input:focus-visible { border-color: var(--loginv2-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--loginv2-accent) 25%, transparent); }
.loginv2-inputwrap:focus-within .loginv2-inputicon { color: var(--loginv2-accent); }

.loginv2-pass .loginv2-input { padding-right: 74px; }
.loginv2-reveal {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    background: none; border: none;
    appearance: none; -webkit-appearance: none;
    color: var(--loginv2-accent-700); font-family: var(--loginv2-body-font);
    font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 6px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.loginv2-reveal:hover { background: var(--loginv2-surface); }
.loginv2-reveal:focus,
.loginv2-reveal:focus-visible,
.loginv2-reveal:active,
.loginv2-reveal:visited {
    outline: none; border: none; box-shadow: none;
}

.loginv2-caps { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--loginv2-accent-700); margin-top: 2px; }
.loginv2-caps svg { width: 13px; height: 13px; flex-shrink: 0; }

.loginv2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-decoration: none;
    font-family: var(--loginv2-body-font); font-weight: 700; font-size: 15px; line-height: 1.2;
    letter-spacing: .01em;
    color: var(--loginv2-text); background: transparent;
    border: 1px solid transparent; border-radius: 8px;
    padding: 7px 12px;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.loginv2-btn:disabled { opacity: .45; cursor: not-allowed; }
.loginv2-btn-primary {
    background: var(--loginv2-accent); color: #fff;
}
.loginv2-btn-primary:hover { background: var(--loginv2-accent-600); }
.loginv2-btn-primary:active { background: var(--loginv2-accent-700); transform: translateY(1px); }
.loginv2-btn-arrow { width: 17px; height: 17px; transition: transform .15s ease; }
.loginv2-btn-primary:hover .loginv2-btn-arrow { transform: translateX(3px); }
.loginv2-submit { width: 100%; margin-top: 2px; padding-block: 11px; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) {
    .loginv2-btn-primary:hover .loginv2-btn-arrow { transform: none; }
}

.loginv2-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 11px; border-top: 1px solid var(--loginv2-line);
    font-size: 11.5px; color: var(--loginv2-muted);
}
.loginv2-tag {
    display: inline-flex; align-items: center; padding: 2px 8px;
    font-size: 11px; letter-spacing: .06em;
    border: 1px solid var(--loginv2-accent); color: var(--loginv2-accent-700); border-radius: 4px;
}
.loginv2-tag-wrap { display: inline-flex; align-items: center; gap: 5px; }
.loginv2-tag-info {
    position: relative;
    width: 16px; height: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--loginv2-muted);
    background: none; color: var(--loginv2-muted);
    font-size: 10px; line-height: 1; cursor: help; padding: 0;
}
.loginv2-tag-info:hover, .loginv2-tag-info:focus-visible { border-color: var(--loginv2-accent); color: var(--loginv2-accent-700); }
.loginv2-tag-info::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 9px); right: -8px;
    width: 220px;
    background: var(--wcr-tinta); color: var(--wcr-papel);
    font-size: 11.5px; font-weight: 400; letter-spacing: normal; line-height: 1.45;
    text-align: left; white-space: normal;
    padding: 9px 11px; border-radius: 8px;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.4);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.loginv2-tag-info:hover::after, .loginv2-tag-info:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.loginv2-voltar {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--loginv2-muted);
    font-family: var(--loginv2-body-font); font-size: 12px; cursor: pointer; padding: 0;
}
.loginv2-voltar:hover { color: var(--loginv2-text); text-decoration: underline; }
.loginv2-voltar svg { width: 14px; height: 14px; }

.loginv2-acess-btn {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 500;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wcr-card);
    border: 1px solid var(--wcr-linha);
    color: var(--wcr-tinta);
    cursor: pointer;
    box-shadow: var(--wcr-sombra);
    transition: background .15s ease;
}
.loginv2-acess-btn:hover { background: var(--wcr-verde-soft); }
.loginv2-acess-btn svg { width: 19px; height: 19px; }

/* Casinha (Início) + engrenagem (Acessibilidade), centralizadas no topo das
   duas telas de login — substitui a logo pequena do canto esquerdo (que já
   fazia a mesma coisa de "voltar pro início", só que escondida ali) e a
   engrenagem que ficava isolada no canto direito. */
.loginv2-topo-central {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.loginv2-topo-central-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wcr-card);
    border: 1px solid var(--wcr-linha);
    color: var(--wcr-tinta);
    cursor: pointer;
    box-shadow: var(--wcr-sombra);
    transition: background .15s ease;
}
.loginv2-topo-central-btn:hover { background: var(--wcr-verde-soft); }
.loginv2-topo-central-btn svg { width: 19px; height: 19px; }

/* Em telas bem estreitas, mais um respiro apertado no topo pra não colar
   no logo fixo. */
@media (max-width: 480px) {
    .loginv2-form-col { padding: 50px 16px 10px; }
}