.auth-body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    background:
        var(--paw-pattern),
        radial-gradient(46rem 26rem at 115% -15%, rgba(45, 125, 111, .18), transparent),
        radial-gradient(40rem 22rem at -15% 115%, rgba(199, 119, 47, .12), transparent),
        linear-gradient(160deg, #f6faf9 0%, #e4efeb 100%);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    width: min(880px, 100%);
    border-radius: var(--radius);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-2);
}

.auth-side {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 2rem;
    padding: 2.2rem 2rem 3.6rem;
    background:
        var(--paw-pattern),
        var(--grad-brand);
    color: #d9e8e6;
}
/* Duo asomandose por el borde inferior del panel de marca */
.auth-peek {
    position: absolute;
    bottom: -6px;
    right: 1.2rem;
    width: 130px;
    height: auto;
    opacity: .92;
    pointer-events: none;
}
.auth-side .brand { color: #ffffff; }
.auth-side .auth-slogan {
    color: #ffffff;
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin-bottom: 1.1rem;
    font-weight: 800;
}
.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: .95rem; }
.auth-perks li { padding-left: 1.5rem; position: relative; }
.auth-perks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 900;
}
.auth-side-note { color: #9fc0bb; font-size: .82rem; }

.auth-panel {
    padding: 2.2rem 2.1rem;
    display: grid;
    align-content: center;
}
.auth-panel h1 { margin: 0 0 .35rem; text-align: left; letter-spacing: -.02em; font-size: 1.6rem; }
.auth-intro { margin: 0 0 1.3rem; color: var(--muted); font-size: .97rem; }
.auth-panel .form-stack { gap: .95rem; }
.auth-panel .muted-links { margin-top: 1.2rem; }

@media (max-width: 760px) {
    .auth-body { padding: .8rem; align-items: start; padding-top: 1.4rem; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-side { gap: 1.1rem; padding: 1.5rem 1.4rem; }
    .auth-side .auth-slogan { font-size: 1.15rem; margin-bottom: .7rem; }
    .auth-perks { display: none; }
    .auth-side-note { display: none; }
    .auth-panel { padding: 1.6rem 1.3rem 1.8rem; }
}