/* auth.css — Pantalla de login / registro y onboarding */
    /* ---------- Login / registro ---------- */
    .auth {
      position: absolute; inset: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(1200px 600px at 70% -10%, #16305e 0%, #0a0e16 60%);
    }
    .auth.hidden { display: none; }

    /* Onboarding / bienvenida */
    .onboard {
      position: absolute; inset: 0; z-index: 110;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(1200px 600px at 50% -10%, #1b3a6e 0%, #0a0e16 65%);
    }
    .onboard.hidden { display: none; }
    .ob-card {
      width: 360px; max-width: 90vw; background: var(--panel); border: 1px solid var(--line);
      border-radius: 20px; padding: 34px 26px 24px; text-align: center; color: var(--txt);
      box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: cardIn .4s ease;
    }
    .ob-emoji { font-size: 64px; margin-bottom: 10px; animation: pulse 2.6s ease-in-out infinite; }
    .ob-slide h2 { font-size: 22px; margin: 6px 0 10px; }
    .ob-slide p { font-size: 14px; color: var(--mut); line-height: 1.55; margin: 0 0 18px; }
    .ob-dots { display: flex; gap: 7px; justify-content: center; margin: 6px 0 18px; }
    .ob-dots span { width: 8px; height: 8px; border-radius: 50%; background: #3a4252; transition: background .2s, width .2s; }
    .ob-dots span.on { background: var(--azul); width: 22px; border-radius: 5px; }