/* =============================================================================
   css/login.css — TELA index.html (login, criar conta, esqueci a senha, primeiro acesso)
   ============================================================================= */

.login-pagina { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); }

/* ---------- Lado da marca ---------- */
.login-marca {
    position: relative; overflow: hidden; display: flex; align-items: flex-end;
    background: radial-gradient(120% 90% at 20% 15%, #16263F 0%, var(--fundo) 60%);
    border-right: 1px solid var(--linha-suave);
}
.topografia { position: absolute; inset: 0; width: 100%; height: 100%; }
.topografia path { fill: none; stroke: rgba(126, 160, 210, 0.16); stroke-width: 1.1; }
.topografia path.forte { stroke: rgba(242, 165, 65, 0.34); stroke-width: 1.3; }
.topografia .pino { fill: var(--cor-marca); }
.topografia .pino-halo { fill: none; stroke: var(--cor-marca); stroke-width: 1.4; opacity: .55; }
.topografia .relevo { animation: deriva 40s ease-in-out infinite alternate; transform-origin: center; }
@keyframes deriva { from { transform: translate(0, 0) scale(1); } to { transform: translate(-18px, 10px) scale(1.04); } }

.login-marca-conteudo { position: relative; padding: 56px 64px; max-width: 560px; }
.login-logo { width: var(--logo-login-largura, 220px); max-height: var(--logo-login-altura, 64px); object-fit: contain; object-position: left; display: block; }
.login-frase { margin-top: 26px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--texto); }
.login-recursos { list-style: none; margin-top: 26px; display: grid; gap: 10px; color: var(--texto-2); font-size: 15px; font-weight: 500; }
.login-recursos li { display: flex; align-items: center; gap: 12px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.04); }
.ponto-ativo { background: var(--ativo); }
.ponto-inativo { background: var(--inativo); }
.ponto-potencial { background: var(--potencial); }

/* ---------- Lado do acesso ---------- */
.login-acesso { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; gap: 24px; background: var(--fundo); }
.login-cartao { width: 100%; max-width: 410px; display: flex; flex-direction: column; gap: 18px; }
.login-logo-movel { display: none; width: 200px; max-height: 56px; object-fit: contain; object-position: left; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-titulo { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.login-sub { font-size: 14px; color: var(--texto-fraco); margin-top: 4px; }
.btn-grande { min-height: 46px; font-size: 15px; border-radius: 11px; }
.linha-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.link { color: #8DB8FF; font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(141,184,255,.35); }
.link:hover { color: #B9D3FF; }
.login-troca { font-size: 13px; color: var(--texto-fraco); text-align: center; }
.campo-senha { position: relative; display: block; }
.campo-senha .campo { padding-right: 78px; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--texto-fraco); padding: 6px 8px; border-radius: 6px; }
.ver-senha:hover { color: var(--texto); background: rgba(255,255,255,.05); }
.login-rodape { text-align: center; }

@media (max-width: 900px) {
    .login-pagina { grid-template-columns: 1fr; }
    .login-marca { display: none; }
    .login-logo-movel { display: block; }
    .login-acesso { justify-content: flex-start; padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) { .topografia .relevo { animation: none; } }