/* auth.css — Pantalla de acceso (login / registro) y bienvenida */
.auth, .onboard {
  position: absolute; inset: 0; z-index: 100; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 20px 16px;
  background:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--lima) 55%, transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, color-mix(in srgb, var(--azul) 18%, transparent), transparent 60%),
    var(--bg);
}
.onboard { z-index: 110; }
.auth.hidden, .onboard.hidden { display: none; }

.ob-card {
  width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 34px 26px 24px; text-align: center; color: var(--txt);
  box-shadow: var(--sh-lg); animation: cardIn .4s var(--ease);
}
.ob-emoji {
  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 26px; display: grid; place-items: center;
  background: var(--marca-suave); color: var(--azul); font-size: 40px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azul) 18%, transparent);
}
.ob-emoji .ico { width: 40px; height: 40px; }
.ob-slide h2 { font-size: 24px; margin: 4px 0 10px; line-height: 1.15; }
.ob-slide p { font-size: 14.5px; color: var(--mut); line-height: 1.6; margin: 0 0 20px; }
.ob-dots { display: flex; gap: 7px; justify-content: center; margin: 4px 0 20px; }
.ob-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background .2s, width .2s; }
.ob-dots span.on { background: var(--azul); width: 24px; border-radius: 5px; }
.ob-card .btn + .btn { margin-top: 8px; }