.login {
    min-height: 100vh;
    display: grid; grid-template-columns: 1.1fr 1fr;
    background: var(--color-superficie);
}
.login__panel {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px;
    background: var(--color-primario); color: #fff;
}
.login__panel::after {
    content: ''; position: absolute; right: -120px; bottom: -120px;
    width: 420px; height: 420px; border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, .08);
}
.login__marca { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; color: #fff; }
.login__marca img { width: 42px; height: 42px; }
.login__marca span { font-weight: 400; opacity: .9; }
.login__frase { max-width: 440px; }
.login__frase h1 { color: #fff; font-size: 34px; font-weight: 600; line-height: 1.2; margin-bottom: 14px; }
.login__frase p { font-size: 15px; opacity: .88; }
.login__pie { font-size: 12.5px; opacity: .75; }

.login__formulario { display: grid; place-items: center; padding: 32px 20px; }
.login__caja { width: min(380px, 100%); }
.login__caja h2 { font-size: 24px; margin-bottom: 6px; }
.login__caja > p { color: var(--color-texto-suave); margin-bottom: 24px; }
.login__caja .campo { margin-bottom: 16px; }
.login__caja .boton { width: 100%; padding: 11px; font-size: 15px; }
.login__marca-movil { display: none; }

@media (max-width: 860px) {
    .login { grid-template-columns: 1fr; }
    .login__panel { display: none; }
    .login__marca-movil { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 21px; font-weight: 600; color: var(--color-tinta); }
    .login__marca-movil img { width: 36px; height: 36px; }
    .login__marca-movil span { color: var(--color-primario); font-weight: 500; }
}