/* Onboarding do escritório e tutorial. Mobile first; uma decisão por tela. */
.ob { max-width: 760px; margin: 0 auto; }
.ob-progresso { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 4px 0 22px; }
.ob-progresso i { height: 6px; border-radius: 99px; background: var(--linha); }
.ob-progresso i.on { background: var(--degrade); }
.ob-titulo { font-size: 1.7rem; margin: 0 0 6px; }
.ob-hero { padding: 28px 24px; border-radius: 22px; background: linear-gradient(135deg, var(--marinho), #12384a); color: #fff; margin-bottom: 18px; }
.ob-hero small { color: var(--verde-claro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }
.ob-hero h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; margin: 8px 0 10px; }
.ob-hero p { color: rgba(255, 255, 255, 0.75); margin: 0; max-width: 52ch; }
.ob-lista { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.ob-lista li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--linha); font-weight: 600; }
.ob-lista b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fundo); color: var(--verde); font: 700 0.85rem Sora, sans-serif; }
.ob-acoes { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.ob-acoes .grande { min-height: 52px; padding: 0 26px; font-size: 1rem; }
@media (max-width: 640px) { .ob-acoes > * { flex: 1 1 100%; justify-content: center; } }
.ob-form { display: grid; gap: 12px; }
.ob-form fieldset { border: 1px solid var(--linha); border-radius: 16px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; }
.ob-form legend { padding: 0 6px; font-weight: 700; font-size: 0.85rem; color: var(--texto-2); }
.ob-duas { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ob-duas { grid-template-columns: 1fr 1fr; } }
.ob-marca { display: grid; gap: 22px; align-items: start; }
@media (min-width: 760px) { .ob-marca { grid-template-columns: 1fr 280px; } }
.ob-marca-form { display: grid; gap: 16px; }
.ob-logo { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px; border: 1.5px dashed var(--linha); border-radius: 18px; cursor: pointer; background: var(--cartao); }
.ob-logo:hover { border-color: var(--verde); }
.ob-logo img, .ob-logo > span { grid-row: span 2; width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: var(--fundo); display: grid; place-items: center; font: 700 1.4rem Sora, sans-serif; color: var(--texto-3); }
.ob-logo small { color: var(--texto-3); }
.ob-cores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ob-cores button { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--cartao); background: var(--c); box-shadow: 0 0 0 1px var(--linha); }
.ob-cores button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--c); }
.ob-cor-livre { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--linha); background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); cursor: pointer; }
.ob-cor-livre input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ob-celular { width: 100%; max-width: 280px; justify-self: center; padding: 18px 14px 12px; border-radius: 34px; background: #f6f7f5; border: 8px solid var(--marinho); box-shadow: 0 24px 50px rgba(11, 31, 42, 0.22); color: #0b1f2a; display: grid; gap: 10px; }
.ob-cel-topo { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.ob-cel-topo img, .ob-cel-topo span { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 0.7rem Sora, sans-serif; }
.ob-cel-topo img { background: #fff; }
.ob-cel-ola { font: 700 1.25rem Sora, sans-serif; margin: 4px 0 0; }
.ob-cel-card { border-radius: 18px; padding: 12px; background: var(--c); color: #fff; display: grid; gap: 4px; }
.ob-cel-card small { opacity: 0.8; font-size: 0.7rem; }
.ob-cel-card i { font-style: normal; background: #fff; color: var(--c); border-radius: 10px; padding: 6px; text-align: center; font-weight: 700; font-size: 0.78rem; margin-top: 6px; }
.ob-cel-botao { border-radius: 14px; padding: 10px; text-align: center; background: #0b1f2a; color: #fff; font-weight: 700; font-size: 0.82rem; }
.ob-cel-rodape { text-align: center; color: #7b8a92; font-size: 0.65rem; }
.ob-bloco { padding: 14px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); margin-bottom: 12px; display: grid; gap: 8px; }
.ob-bloco > small { color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chips span { padding: 4px 10px; border-radius: 99px; background: var(--ok-fundo); color: var(--verde); font-weight: 600; font-size: 0.85rem; }
.ob-pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-pessoas li { display: flex; align-items: center; gap: 10px; }
.ob-pessoas small { margin-left: auto; color: var(--texto-3); }
.ob-opcoes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ob-opcoes { grid-template-columns: 1fr 1fr; } }
.ob-opcao { text-align: left; display: grid; gap: 6px; padding: 18px; border-radius: 18px; border: 1px solid var(--linha); background: var(--cartao); min-height: 110px; }
.ob-opcao b { font: 700 1.05rem Sora, sans-serif; }
.ob-opcao small { color: var(--texto-2); }
.ob-opcao:hover { border-color: var(--verde); box-shadow: 0 8px 22px rgba(22, 155, 82, 0.12); }
.ob-contagem { color: var(--texto-2); margin: 14px 0 0; }
.ob-check, .ob-cartao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-check li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--linha); }
.ob-check li span { display: grid; }
.ob-check small { color: var(--texto-3); }
.ob-check i, .ob-cartao li i { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--linha); }
.ob-check li.feito i, .ob-cartao li.feito i { border: 0; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ob-cartao { display: grid; gap: 12px; border-color: rgba(22, 155, 82, 0.35) !important; }
.ob-cartao-topo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ob-cartao-topo small { color: var(--verde); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; }
.ob-cartao-topo h2 { margin: 2px 0 0; }
.ob-cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-cartao-barra { height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.ob-cartao-barra i { display: block; height: 100%; background: var(--degrade); }
.ob-cartao ul { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ob-cartao li { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.ob-cartao li a { color: inherit; text-decoration: none; }
.ob-cartao li.feito a { color: var(--texto-3); text-decoration: line-through; }

/* Passo do ecossistema */
.ob-eco { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .ob-eco { grid-template-columns: 1fr 1fr; } }
.ob-eco-item { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.ob-eco-item b { font: 700 1.02rem Sora, Inter, sans-serif; }
.ob-eco-item p { margin: 4px 0 10px; color: var(--texto-2); font-size: 0.92rem; }
.ob-eco-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--ok-fundo); color: var(--verde); }
.ob-fazer { display: inline-flex; align-items: baseline; gap: 8px; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.ob-fazer small { color: var(--verde); font-weight: 700; font-size: 0.78rem; }
.ob-fazer:hover small { text-decoration: underline; }
.ob-check li .botao { margin-left: auto; }