/* Catalis · o onboarding (L2, 30/09/2026). Tela de passagem, com a cara do
   Catalis: fundo claro, um cartão no meio, a barra de passos da plataforma
   (.wf-steps) e as escolhas em cartões (.wf-pick) e em fichas. */
.cat-onb { --cat-tinta: #0C1C2E; --cat-verde: #2FF08A; --cat-azul: #0A9FF5;
  min-height: 100vh; background:
    radial-gradient(circle at 8% 0%, rgba(47,240,138,.12), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(63,181,255,.12), transparent 45%),
    #F2F7FA; }
.cat-onb__topo { display: flex; align-items: center; gap: 8px; padding: 18px 24px; max-width: 1100px; margin: 0 auto; }
.cat-onb__topo strong { font-size: 15px; color: var(--cat-tinta); }
.cat-onb__topo span { font-size: 13px; color: var(--muted); }
.cat-onb__topo .cat-onb__lang { margin-left: auto; }
.cat-onb__topo .cat-onb__lang span { color: inherit; font-size: 12px; }

.cat-onb__palco { display: flex; justify-content: center; padding: 8px 16px 48px; }
.cat-onb__carregando { padding: 60px; color: var(--muted); }
.cat-onb__cartao { width: 100%; max-width: 640px; background: #fff; border-radius: 20px; padding: 32px 36px 28px;
  box-shadow: 0 1px 0 rgba(12,28,46,.06), 0 30px 60px -40px rgba(12,28,46,.35); animation: cat-onb-entra .35s ease both; }
@keyframes cat-onb-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cat-onb__cartao .wf-steps { margin-bottom: 14px; }
.cat-onb__cartao .wf-step.is-done { background: var(--cat-verde); }
.cat-onb__cartao .wf-step.is-now { background: var(--cat-tinta); }
.cat-onb__passo { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.cat-onb__cartao h1 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 6px; color: var(--cat-tinta); outline: none; }
.cat-onb__cartao h2 { font-size: 13px; font-weight: 650; margin: 20px 0 8px; color: var(--ink-2); }
.cat-onb__sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; line-height: 1.5; }
.cat-onb__nota { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

.cat-onb__areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-onb__area.is-on { border-color: var(--cat-tinta); box-shadow: inset 0 0 0 1px var(--cat-tinta); background: rgba(47,240,138,.06); }
.cat-onb__area.is-on i { color: #067A42; }

.cat-onb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-onb__chip, .cat-onb__pais { border: 1px solid var(--line-3); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; color: var(--ink);
  transition: border-color .15s, background .15s; }
.cat-onb__chip:hover, .cat-onb__pais:hover { border-color: var(--muted); }
.cat-onb__chip.is-on, .cat-onb__pais.is-on { background: var(--cat-tinta); border-color: var(--cat-tinta); color: #fff; }
.cat-onb__paises + h2 { margin-top: 18px; }
.cat-onb__paises { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cat-onb__pais { display: flex; align-items: center; gap: 8px; border-radius: 12px; text-align: left; }

.cat-onb__emails { display: grid; gap: 8px; margin-bottom: 10px; }
.cat-onb__email { display: flex; align-items: center; gap: 10px; }
.cat-onb__res { font-size: 12px; color: var(--wf-danger, #c0392b); white-space: nowrap; }
.cat-onb__res.is-ok { color: #067A42; }

.cat-onb__pronto { text-align: center; }
.cat-onb__pronto .bi { font-size: 40px; color: #067A42; display: block; margin-bottom: 6px; }
.cat-onb__oport { display: grid; gap: 10px; }
.cat-onb__op { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.cat-onb__op > i { font-size: 20px; color: var(--cat-azul); }
.cat-onb__op b { display: block; font-weight: 600; color: var(--cat-tinta); }
.cat-onb__op span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

.cat-onb__erro { color: var(--wf-danger, #c0392b); font-size: 13px; margin: 12px 0 0; min-height: 0; }
.cat-onb__erro:empty { display: none; }
.cat-onb__acoes { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 10px; }
.cat-onb__voltar { color: var(--muted); padding-left: 0; text-decoration: none; }
.cat-onb__btn { background: var(--cat-verde); color: var(--cat-tinta); border: 0; font-weight: 600; padding-inline: 20px; }
.cat-onb__btn:hover, .cat-onb__btn:focus { background: #25D97A; color: var(--cat-tinta); }
.cat-onb__btn:disabled { background: #BFEFD6; color: rgba(12,28,46,.55); }

@media (max-width: 560px) {
  .cat-onb__cartao { padding: 24px 20px 20px; border-radius: 16px; }
  .cat-onb__areas { grid-template-columns: 1fr; }
  .cat-onb__acoes { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .cat-onb__cartao { animation: none; } }