/* =====================================================================
   PortalImob — layout de AUTENTICAÇÃO (login, MFA, recuperação)
   Split-screen com painel de marca (blueprint) + cartão de acesso.
   Carregado apenas pelo layout templates/auth.php.
   ===================================================================== */

.auth { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }

/* ---- Painel de marca ---- */
.brand {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 100% at 15% 10%, var(--ink-3) 0%, var(--ink) 55%);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(2rem, 4vw, 4.5rem);
}
.brand__grid {
    position: absolute; inset: -2px;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(90% 80% at 30% 30%, #000 30%, transparent 80%);
}
.brand__glow { position: absolute; width: 60vw; height: 60vw; right: -18vw; bottom: -22vw; background: radial-gradient(circle, var(--brass-soft) 0%, transparent 62%); filter: blur(8px); }
.brand__lines { position: absolute; inset: 0; }
.brand__lines span { position: absolute; background: linear-gradient(90deg, transparent, var(--brass), transparent); height: 1px; opacity: 0.35; }
.brand__lines span:nth-child(1) { top: 22%; left: 0; right: 40%; }
.brand__lines span:nth-child(2) { top: 60%; left: 18%; right: 0; opacity: 0.18; }
.brand__lines span:nth-child(3) { top: 78%; left: 0; right: 62%; opacity: 0.22; }
.brand__lines span:nth-child(4) { top: 0; bottom: 0; left: 64%; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--line-2), transparent); }

.brand__content { position: relative; z-index: 2; margin-top: auto; }
.brand__mark { font-size: 2.2rem; color: var(--brass-2); line-height: 1; margin-bottom: 1.4rem; filter: drop-shadow(0 0 18px var(--brass-glow)); animation: rise 0.8s var(--ease) both; }
.brand__logo { max-width: 220px; max-height: 90px; margin-bottom: 1.3rem; object-fit: contain; }
.brand__word { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 0.92; letter-spacing: -0.02em; margin: 0; animation: rise 0.8s var(--ease) 0.06s both; }
.brand__word em { font-style: normal; color: var(--brass); }
.brand__tag { margin: 1.1rem 0 0; max-width: 26ch; color: var(--paper-dim); font-size: 1.05rem; animation: rise 0.8s var(--ease) 0.12s both; }
.brand__foot { position: relative; z-index: 2; margin: 0; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- Painel de acesso ---- */
.panel { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); background: var(--ink-2); border-left: 1px solid var(--line); }
.panel--solo { background: var(--ink); border: 0; }
.card { width: min(400px, 100%); animation: rise 0.7s var(--ease) 0.1s both; }
.card--center { text-align: center; }
.card__eyebrow { margin: 0 0 0.6rem; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.card__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.015em; margin: 0 0 0.5rem; } /* compacto (ex-theme.css) */
.card__sub { margin: 0 0 1.4rem; color: var(--muted); }
.card__legal { margin: 1.6rem 0 0; font-size: 0.78rem; color: var(--muted); }

.lf-forgot { align-self: center; margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.lf-forgot:hover { color: var(--brass-2); }

@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .brand { display: none; }
    .panel { border-left: 0; min-height: 100vh; }
}