/*
 * Autenticação pública do Gestx.
 * O painel azul e o formulário claro seguem a mesma composição do projeto de referência.
 */
.corpo-autenticacao { min-height: 100vh; background: #fbfdfd; }
.painel-autenticacao { display: grid; min-height: 100vh; grid-template-columns: minmax(420px, 1fr) minmax(410px, .88fr); overflow: hidden; }

/* Apresentação da marca no lado esquerdo. */
.marca-autenticacao { position: relative; display: flex; min-height: 100vh; padding: 46px clamp(38px, 8vw, 118px); color: #fff; background: var(--cor-primaria-700); flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; }
.marca-autenticacao::before, .marca-autenticacao::after { position: absolute; z-index: -1; content: ""; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; animation: respirar-orbita 10s ease-in-out infinite; }
.marca-autenticacao::before { right: -20%; bottom: -39%; width: 74%; aspect-ratio: 1; }
.marca-autenticacao::after { top: 10%; right: -11%; width: min(46vw, 620px); aspect-ratio: 1; animation-delay: -4s; animation-direction: reverse; }
.marca-autenticacao > * { position: relative; z-index: 1; }
.marca-autenticacao .sobretitulo { color: rgba(255, 255, 255, .70); }
.marca-autenticacao h1 { max-width: 540px; margin: clamp(105px, 17vh, 178px) 0 0; color: #fff; font-size: clamp(38px, 4.5vw, 67px); line-height: .98; letter-spacing: -.065em; animation: subir-entrada 800ms .05s both; }
.marca-autenticacao div > p:last-child { max-width: 470px; margin: 26px 0 0; color: rgba(255, 255, 255, .76); font-size: 17px; line-height: 1.65; animation: subir-entrada 800ms .12s both; }
.rodape-marca { margin: 0; color: rgba(255, 255, 255, .64); font-size: 13px; }

/* Formulário sem cartão pesado, como na referência. */
.formulario-autenticacao { display: grid; min-height: 100vh; padding: 36px; background: #fbfdfd; place-items: center; }
.cartao-autenticacao { width: min(440px, 100%); padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; animation: subir-entrada 700ms .15s both; }
.cartao-autenticacao > header { margin-bottom: 28px; }
.cartao-autenticacao h2 { margin-bottom: 8px; font-size: 32px; letter-spacing: -.05em; }
.cartao-autenticacao header > p:last-child { margin-bottom: 0; color: var(--cor-texto-suave); }
.cartao-autenticacao .formulario { gap: 17px; }
.cartao-autenticacao .botao-largo { margin-top: 5px; }
.opcoes-autenticacao { display: flex; margin-top: 21px; align-items: center; justify-content: center; gap: 7px; color: var(--cor-texto-suave); font-size: 13px; }
.opcoes-autenticacao a { font-weight: 600; }
.separador-autenticacao { height: 1px; margin: 22px 0; background: var(--cor-linha); }
.requisitos-senha { display: grid; margin: 0; padding: 12px 12px 12px 30px; gap: 4px; color: var(--cor-texto-suave); background: #f7fafb; border: 1px solid #edf2f2; border-radius: 10px; font-size: 13px; }

/* Efeitos discretos da tela pública. */
@keyframes subir-entrada {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
}

@keyframes respirar-orbita {
    0%, 100% { opacity: .72; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 900px) {
    .painel-autenticacao { display: block; }
    .marca-autenticacao { min-height: auto; padding: 22px 24px; }
    .marca-autenticacao > div, .rodape-marca { display: none; }
    .marca-autenticacao::before, .marca-autenticacao::after { display: none; }
    .formulario-autenticacao { min-height: calc(100vh - 78px); padding: 30px 20px; }
}

@media (max-width: 520px) {
    .formulario-autenticacao { align-items: start; padding: 42px 18px 28px; }
    .cartao-autenticacao h2 { font-size: 28px; }
}