/* ui-v4-ob.css — ONBOARDING (tela cheia). Folha ESCRITA À MÃO, não sai do portar-v2.py:
   o onboarding não tem mockup de origem, ele é montado a partir dos tokens da v2.

   Escopo `.v2-obw` (o host `#ob2` leva `class="v2root v2-obw"`), então os tokens
   --lime/--purple/--sign/--ink vêm do .v2root e nada aqui vaza pro app.

   CONCEITO (pedido em 07/08/2026, referência: onboarding do Genna): a pessoa informa só
   o @ do Instagram; a Scalyze lê o perfil e infere tudo. Os ~50s da síntese viram AULA —
   faixa com a etapa REAL do servidor e um carrossel numerado ensinando o método. No fim,
   a tela de revisão devolve tudo escrito, pra corrigir. */

.v2root.v2-obw{position:fixed;inset:0;z-index:300;height:100%;display:flex;flex-direction:column;overflow:hidden}

/* ---------- topo: logo + trilha das etapas ---------- */
.v2-obw .v2-ob-top{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:18px;
  padding:18px 26px}
.v2-obw .v2-ob-logo{font-family:var(--head);font-weight:700;font-size:20px;letter-spacing:-.045em;color:var(--ink)}
.v2-obw .v2-ob-logo b{background:var(--sign);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2-obw .v2-ob-trilha{display:flex;align-items:center;gap:9px;margin:0 auto}
.v2-obw .v2-ob-tr{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-4);
  font-weight:500;transition:color .3s var(--ease)}
.v2-obw .v2-ob-trn{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);font-size:10.5px;font-weight:700;font-family:var(--head);
  color:var(--ink-4);transition:.3s var(--ease)}
.v2-obw .v2-ob-tr.v2-ob-feito{color:var(--ink-3)}
.v2-obw .v2-ob-tr.v2-ob-feito .v2-ob-trn{border-color:rgba(198,255,0,.35);color:var(--lime);
  background:rgba(198,255,0,.10)}
.v2-obw .v2-ob-tr.v2-ob-agora{color:var(--ink)}
.v2-obw .v2-ob-tr.v2-ob-agora .v2-ob-trn{border-color:transparent;background:var(--sign);color:#07080C;
  box-shadow:0 6px 18px -8px rgba(168,85,247,.9)}
.v2-obw .v2-ob-trsep{width:22px;height:1px;background:var(--line-2);flex:none}
/* sem botão de pular: quem pula chega no app com o Cérebro vazio, e todo post sai
   genérico. A trilha mostra que é curto; a saída é terminar. */

/* ---------- palco ---------- */
.v2-obw .v2-ob-palco{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow:auto;
  display:flex;align-items:safe center;justify-content:center;padding:20px 26px 40px}
.v2-obw .v2-ob-palco::-webkit-scrollbar{width:9px}
.v2-obw .v2-ob-palco::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:5px;
  border:2px solid transparent;background-clip:content-box}
.v2-obw .v2-ob-col{width:100%;max-width:660px;margin:0 auto}
.v2-obw .v2-ob-col.v2-ob-larga{max-width:940px}
.v2-obw .v2-ob-col>*{opacity:0;animation:v2obUp .55s cubic-bezier(.2,.85,.25,1) forwards}
.v2-obw .v2-ob-col>*:nth-child(1){animation-delay:.04s}
.v2-obw .v2-ob-col>*:nth-child(2){animation-delay:.10s}
.v2-obw .v2-ob-col>*:nth-child(3){animation-delay:.16s}
.v2-obw .v2-ob-col>*:nth-child(4){animation-delay:.22s}
/* até o 8º: a revisão tem muitos filhos e, sem delay, os últimos apareciam ANTES dos
   primeiros — parecia bug de carregamento. */
.v2-obw .v2-ob-col>*:nth-child(5){animation-delay:.28s}
.v2-obw .v2-ob-col>*:nth-child(6){animation-delay:.34s}
.v2-obw .v2-ob-col>*:nth-child(7){animation-delay:.40s}
.v2-obw .v2-ob-col>*:nth-child(n+8){animation-delay:.46s}
@keyframes v2obUp{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}

.v2-obw .v2-ob-kick{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--raised);box-shadow:var(--glow-in);
  font-size:12px;font-weight:600;color:var(--ink-2);margin:0 0 16px}
.v2-obw .v2-ob-kick svg{width:14px;height:14px;color:var(--lime)}
/* `text-align:left` explícito: `.v2root h1` centraliza (é a regra do hero do mockup) e
   deixava o título centralizado com o subtítulo à esquerda, na mesma coluna. */
.v2-obw .v2-ob-h1{font-family:var(--head);font-size:clamp(27px,3.4vw,38px);font-weight:700;
  letter-spacing:-.038em;line-height:1.08;color:var(--ink);margin:0 0 11px;
  text-align:left;text-wrap:balance}
.v2-obw .v2-ob-h1 em{font-style:normal;background:var(--sign);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.v2-obw .v2-ob-sub{color:var(--ink-2);font-size:15px;line-height:1.55;margin:0 0 28px;max-width:540px}

.v2-obw .v2-ob-acoes{display:flex;align-items:center;gap:10px;margin-top:30px}
.v2-obw .v2-ob-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:12px;
  background:var(--sign);color:#07080C;font-family:var(--head);font-weight:700;font-size:14.5px;
  letter-spacing:-.012em;box-shadow:0 12px 30px -12px rgba(168,85,247,.95);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s}
.v2-obw .v2-ob-cta:hover{transform:translateY(-1px);box-shadow:0 16px 38px -12px rgba(168,85,247,1)}
.v2-obw .v2-ob-cta:active{transform:translateY(0) scale(.985)}
.v2-obw .v2-ob-cta[disabled]{opacity:.35;box-shadow:none;transform:none;cursor:not-allowed}
.v2-obw .v2-ob-cta svg{width:16px;height:16px;stroke-width:2.4}
.v2-obw .v2-ob-ghost{padding:13px 14px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-4);
  transition:.18s}
.v2-obw .v2-ob-ghost:hover{color:var(--ink-2);background:rgba(255,255,255,.05)}

/* ---------- campos (o @, e os da revisão) ---------- */
.v2-obw .v2-ob-campos{display:grid;gap:14px;max-width:520px}
.v2-obw .v2-ob-campo{display:block}
.v2-obw .v2-ob-clab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 7px}
.v2-obw .v2-ob-cnome{font-size:12.5px;color:var(--ink-2);font-weight:600}
.v2-obw .v2-ob-inp{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--sunken);color:var(--ink);font:inherit;font-size:14.5px;outline:0;transition:.18s}
.v2-obw .v2-ob-inp::placeholder{color:var(--ink-4)}
.v2-obw .v2-ob-inp:focus{border-color:rgba(168,85,247,.5);box-shadow:0 0 0 4px rgba(168,85,247,.10)}
.v2-obw .v2-ob-inp:disabled{opacity:.4;cursor:not-allowed}
.v2-obw .v2-ob-ta{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--sunken);color:var(--ink);font:inherit;font-size:15px;line-height:1.6;
  outline:0;resize:vertical;transition:.18s}
.v2-obw .v2-ob-ta::placeholder{color:var(--ink-4)}
.v2-obw .v2-ob-ta:focus{border-color:rgba(168,85,247,.5);box-shadow:0 0 0 4px rgba(168,85,247,.10)}

/* ================= etapa 2: A ESPERA QUE ENSINA =================
   Faixa fixa (etapa REAL vinda do servidor) + carrossel numerado embaixo. */
.v2-obw .v2-ob-anal{width:100%;max-width:900px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:40px}
.v2-obw .v2-ob-faixa{width:min(560px,100%);border-radius:15px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%),var(--surface);
  box-shadow:var(--glow-in),0 22px 54px -30px rgba(0,0,0,.9);overflow:hidden;flex:none}
.v2-obw .v2-ob-fl{display:flex;align-items:center;gap:11px;padding:14px 16px}
.v2-obw .v2-ob-fdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--lime);
  box-shadow:0 0 10px rgba(198,255,0,.9);animation:v2obPulse 1.6s ease-in-out infinite}
@keyframes v2obPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.v2-obw .v2-ob-fet{font-size:13.5px;font-weight:600;color:var(--ink);flex:none;max-width:52%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-obw .v2-ob-fbar{flex:1;min-width:40px;height:4px;border-radius:3px;background:rgba(255,255,255,.09);
  overflow:hidden}
/* transição curta e linear: a barra é redesenhada a cada 140ms, e .6s com ease faria
   ela ficar sempre atrasada em relação ao número do lado. */
.v2-obw .v2-ob-fbar i{display:block;height:100%;border-radius:3px;background:var(--sign);
  width:0;transition:width .18s linear}
.v2-obw .v2-ob-fpct{font-size:12.5px;font-weight:700;color:var(--ink-2);flex:none;min-width:34px;
  text-align:right;font-variant-numeric:tabular-nums}
.v2-obw .v2-ob-fsub{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02);font-size:12.5px;color:var(--ink-3)}
.v2-obw .v2-ob-fspin{width:13px;height:13px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.14);border-top-color:var(--purple);
  animation:v2obSpin .8s linear infinite}
@keyframes v2obSpin{to{transform:rotate(360deg)}}
/* estourou o previsto: assume, em vez de fingir que está quase */
.v2-obw .v2-ob-faixa.v2-ob-lento .v2-ob-fdot{background:var(--amber);box-shadow:0 0 10px rgba(255,176,32,.9)}
.v2-obw .v2-ob-faixa.v2-ob-lento .v2-ob-fet{color:#f0c46a;max-width:70%}

/* ---- o carrossel-aula ---- */
.v2-obw .v2-ob-aula{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;
  min-height:320px}
.v2-obw .v2-ob-aulah{display:flex;align-items:baseline;gap:16px;justify-content:center;max-width:660px}
.v2-obw .v2-ob-aulan{font-family:var(--head);font-size:52px;font-weight:700;line-height:1;
  letter-spacing:-.05em;flex:none;background:var(--sign);-webkit-background-clip:text;
  background-clip:text;color:transparent;opacity:.5}
.v2-obw .v2-ob-aulat{font-family:var(--head);font-size:clamp(20px,2.4vw,27px);font-weight:700;
  letter-spacing:-.03em;line-height:1.18;color:var(--ink);margin:0;text-wrap:balance}
.v2-obw .v2-ob-aulat u{text-decoration:none;background:var(--sign);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.v2-obw .v2-ob-quadro{display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:v2obEntra .5s var(--ease) both}
.v2-obw .v2-ob-auladesc{margin:0;max-width:520px;text-align:center;font-size:14.5px;
  line-height:1.55;color:var(--ink-3)}
@keyframes v2obEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.v2-obw .v2-ob-pontos{display:flex;gap:7px;justify-content:center}
.v2-obw .v2-ob-ponto{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);
  transition:.3s var(--ease)}
.v2-obw .v2-ob-ponto.v2-ob-on{background:var(--sign);width:34px}

/* ---- ilustrações (HTML puro; nada de imagem externa) ---- */
.v2-obw .v2-ob-fig{width:min(560px,100%);height:210px;position:relative;display:flex;
  align-items:center;justify-content:center;gap:16px}
.v2-obw .v2-ob-mini{border-radius:13px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--glow-in),0 18px 40px -24px rgba(0,0,0,.9);padding:12px 13px}
.v2-obw .v2-ob-mtit{font-family:var(--head);font-size:12px;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;margin:0 0 9px;display:flex;align-items:center;gap:6px}
.v2-obw .v2-ob-mtit i{width:5px;height:5px;border-radius:50%;background:var(--lime);flex:none}
.v2-obw .v2-ob-linha{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.v2-obw .v2-ob-linha:last-child{margin:0}
.v2-obw .v2-ob-lnome{font-size:10.5px;color:var(--ink-3);width:74px;flex:none}
.v2-obw .v2-ob-lbar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.v2-obw .v2-ob-lbar i{display:block;height:100%;width:0;border-radius:3px;background:var(--sign)}
.v2-obw .v2-ob-lok{width:13px;height:13px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(198,255,0,.14);color:var(--lime);opacity:0}
.v2-obw .v2-ob-lok svg{width:8px;height:8px;stroke-width:3.4}
/* cena 1 — o Cérebro se preenchendo */
.v2-obw .v2-ob-f1 .v2-ob-mini{width:min(330px,86%)}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(2) .v2-ob-lbar i{animation:v2obEnche 1s var(--ease) .2s forwards}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(3) .v2-ob-lbar i{animation:v2obEnche 1s var(--ease) .9s forwards}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(4) .v2-ob-lbar i{animation:v2obEnche 1s var(--ease) 1.6s forwards}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(5) .v2-ob-lbar i{animation:v2obEnche 1s var(--ease) 2.3s forwards}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(2) .v2-ob-lok{animation:v2obAparece .3s .95s forwards}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(3) .v2-ob-lok{animation:v2obAparece .3s 1.65s forwards}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(4) .v2-ob-lok{animation:v2obAparece .3s 2.35s forwards}
.v2-obw .v2-ob-f1 .v2-ob-linha:nth-child(5) .v2-ob-lok{animation:v2obAparece .3s 3.05s forwards}
@keyframes v2obEnche{to{width:100%}}
@keyframes v2obAparece{to{opacity:1}}
/* cena 2 — o mercado chegando todo dia */
.v2-obw .v2-ob-f2{flex-direction:column;gap:9px}
.v2-obw .v2-ob-nota{width:min(444px,94%);display:flex;align-items:center;gap:12px;padding:11px 13px;
  border-radius:12px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--glow-in);
  opacity:0;animation:v2obCai .5s var(--ease) forwards}
.v2-obw .v2-ob-nota:nth-child(1){animation-delay:.15s}
.v2-obw .v2-ob-nota:nth-child(2){animation-delay:.5s}
.v2-obw .v2-ob-nota:nth-child(3){animation-delay:.85s}
@keyframes v2obCai{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* largura fixa pra as três linhas alinharem, mas larga o bastante pra "CONCORRENTE":
   com 52px o rótulo transbordava e encavalava no texto ao lado. */
.v2-obw .v2-ob-nfonte{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-4);flex:none;width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-obw .v2-ob-ntxt{flex:1;min-width:0;font-size:12px;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.v2-obw .v2-ob-nalta{flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  border-radius:999px;font-size:10px;font-weight:700;background:rgba(198,255,0,.11);
  border:1px solid rgba(198,255,0,.28);color:var(--lime)}
.v2-obw .v2-ob-nalta svg{width:10px;height:10px;stroke-width:3}
/* cena 3 — vira carrossel */
.v2-obw .v2-ob-f3{gap:20px}
.v2-obw .v2-ob-tema{padding:9px 14px;border-radius:11px;border:1px dashed var(--line-2);
  background:var(--sunken);color:var(--ink-2);font-size:12.5px;max-width:150px;line-height:1.4}
.v2-obw .v2-ob-seta{color:var(--ink-4);flex:none}
.v2-obw .v2-ob-seta svg{width:26px;height:26px}
.v2-obw .v2-ob-slides{display:flex;gap:9px}
.v2-obw .v2-ob-sl{width:74px;height:92px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--glow-in),0 16px 34px -22px rgba(0,0,0,.9);
  padding:9px 8px;display:flex;flex-direction:column;gap:5px;opacity:0;
  animation:v2obSobe .5s var(--ease) forwards}
.v2-obw .v2-ob-sl:nth-child(1){animation-delay:.35s}
.v2-obw .v2-ob-sl:nth-child(2){animation-delay:.6s}
.v2-obw .v2-ob-sl:nth-child(3){animation-delay:.85s}
@keyframes v2obSobe{from{opacity:0;transform:translateY(12px) rotate(-2deg)}to{opacity:1;transform:none}}
.v2-obw .v2-ob-sl.v2-ob-capa{background:var(--sign)}
.v2-obw .v2-ob-slt{height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.v2-obw .v2-ob-sl.v2-ob-capa .v2-ob-slt{background:rgba(7,8,12,.55)}
.v2-obw .v2-ob-slt.v2-ob-curta{width:58%}
/* cena 4 — você aprova, a Scalyze publica */
.v2-obw .v2-ob-f4{flex-direction:column;gap:16px}
.v2-obw .v2-ob-post{width:min(300px,80%);border-radius:14px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--glow-in),0 20px 44px -26px rgba(0,0,0,.9);overflow:hidden}
.v2-obw .v2-ob-pimg{height:74px;background:var(--sign);opacity:.9}
.v2-obw .v2-ob-pbody{padding:11px 12px;display:flex;flex-direction:column;gap:9px}
.v2-obw .v2-ob-pbot{display:flex;gap:7px}
.v2-obw .v2-ob-pb{flex:1;text-align:center;padding:7px 0;border-radius:9px;font-size:11px;font-weight:700;
  border:1px solid var(--line);color:var(--ink-3)}
.v2-obw .v2-ob-pb.v2-ob-sim{border-color:transparent;background:var(--lime);color:#07080C;
  animation:v2obClica 2.4s var(--ease) infinite}
@keyframes v2obClica{0%,55%,100%{transform:none}62%{transform:scale(.93)}70%{transform:scale(1)}}
.v2-obw .v2-ob-selo{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(198,255,0,.3);background:rgba(198,255,0,.10);color:var(--lime);
  font-size:12px;font-weight:700;opacity:0;animation:v2obAparece .4s 1.9s forwards}
.v2-obw .v2-ob-selo svg{width:14px;height:14px}
.v2-obw .v2-ob-aviso{display:flex;gap:11px;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(255,176,32,.28);background:rgba(255,176,32,.08);color:#f0c46a;
  font-size:13px;line-height:1.55;margin:0 0 14px}
.v2-obw .v2-ob-aviso svg{width:17px;height:17px;flex:none;margin-top:1px}
.v2-obw .v2-ob-ia{font-size:11.5px;color:var(--ink-4);line-height:1.5;margin:16px 0 0}

/* ---------- erro ---------- */
.v2-obw .v2-ob-erroc{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  border:1px solid rgba(255,176,32,.3);background:rgba(255,176,32,.09);color:var(--amber);margin:0 0 18px}
.v2-obw .v2-ob-erroc svg{width:25px;height:25px}

/* ---------- erro do campo do @ ---------- */
.v2-obw .v2-ob-erro{min-height:18px;font-size:13px;color:#f08a8a;line-height:1.45}

/* ---------- etapa 1b: o perfil encontrado ---------- */
/* `align-items:start`: a foto ocupa as duas linhas e, centralizada, ficava mais baixa que o
   nome que ela deveria acompanhar. */
.v2-obw .v2-ob-perfil{display:grid;grid-template-columns:auto 1fr;gap:16px 18px;align-items:start;
  padding:20px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 62%),var(--surface);
  box-shadow:var(--glow-in),0 26px 60px -34px rgba(0,0,0,.9);margin:0 0 14px}
.v2-obw .v2-ob-pfoto{width:76px;height:76px;border-radius:50%;object-fit:cover;grid-row:span 2;
  border:2px solid rgba(198,255,0,.35)}
.v2-obw .v2-ob-pini{width:76px;height:76px;border-radius:50%;grid-row:span 2;display:grid;place-items:center;
  background:var(--sign);color:#07080C;font-family:var(--head);font-weight:700;font-size:30px}
.v2-obw .v2-ob-pinfo{min-width:0;display:flex;flex-direction:column;gap:2px}
.v2-obw .v2-ob-pnome{font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:-.025em;
  color:var(--ink);display:flex;align-items:center;gap:6px;line-height:1.25}
.v2-obw .v2-ob-pver{color:var(--sky);display:inline-flex}
.v2-obw .v2-ob-pver svg{width:15px;height:15px}
.v2-obw .v2-ob-parroba{font-size:13px;color:var(--ink-4)}
.v2-obw .v2-ob-pbio{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:5px;white-space:pre-line}
.v2-obw .v2-ob-pnums{grid-column:2;display:flex;gap:26px;flex-wrap:wrap;padding-top:4px;
  border-top:1px solid var(--line);margin-top:2px}
.v2-obw .v2-ob-pnum{display:flex;flex-direction:column;font-size:11.5px;color:var(--ink-4);padding-top:10px}
.v2-obw .v2-ob-pnum b{font-family:var(--head);font-size:17px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.v2-obw .v2-ob-min1{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-4);margin:0}
.v2-obw .v2-ob-min1 svg{width:14px;height:14px}

/* ---------- etapa 3: revisão ---------- */
.v2-obw .v2-ob-bloco{border-radius:16px;border:1px solid var(--line);padding:18px 20px 20px;margin:0 0 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 60%),var(--surface);
  box-shadow:var(--glow-in)}
.v2-obw .v2-ob-bh{display:flex;align-items:center;gap:9px;margin:0 0 4px;color:var(--lime)}
.v2-obw .v2-ob-bh svg{width:17px;height:17px}
.v2-obw .v2-ob-bh b{font-family:var(--head);font-size:16px;font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.v2-obw .v2-ob-bd{font-size:13px;line-height:1.5;color:var(--ink-3);margin:0 0 14px}
/* margem embaixo da GRADE: os campos dentro dela têm margin:0 (senão o gap dobraria), e sem
   isto o campo seguinte colava no de cima — 0px de respiro, medido. */
.v2-obw .v2-ob-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 14px}
.v2-obw .v2-ob-g2:last-child{margin:0}
.v2-obw .v2-ob-bloco .v2-ob-campo{margin:0 0 14px}
.v2-obw .v2-ob-bloco .v2-ob-campo:last-child{margin:0}
.v2-obw .v2-ob-g2 .v2-ob-campo{margin:0}
.v2-obw .v2-ob-cdica{font-size:11.5px;color:var(--ink-4);font-weight:500}
/* tom de voz */
.v2-obw .v2-ob-tons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.v2-obw .v2-ob-tom{padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--raised);color:var(--ink-3);font-size:12.5px;font-weight:500;transition:.18s var(--ease)}
.v2-obw .v2-ob-tom:hover{color:var(--ink);border-color:var(--line-2)}
.v2-obw .v2-ob-tom.v2-ob-sel{border-color:rgba(198,255,0,.5);background:rgba(198,255,0,.10);
  color:var(--lime);font-weight:600}
/* personas */
.v2-obw .v2-ob-persona{border-radius:13px;border:1px solid var(--line);background:var(--sunken);
  margin:0 0 9px;overflow:hidden}
.v2-obw .v2-ob-ph{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;
  font-family:var(--head);font-size:14.5px;font-weight:700;letter-spacing:-.018em;color:var(--ink);
  transition:background .18s}
.v2-obw .v2-ob-ph:hover{background:rgba(255,255,255,.03)}
.v2-obw .v2-ob-pchev{display:inline-flex;color:var(--ink-4);transition:transform .22s var(--ease)}
.v2-obw .v2-ob-pchev svg{width:15px;height:15px}
.v2-obw .v2-ob-ph.v2-ob-aberta .v2-ob-pchev{transform:rotate(180deg);color:var(--lime)}
.v2-obw .v2-ob-pc{display:none;padding:4px 15px 15px}
.v2-obw .v2-ob-pc.v2-ob-aberta{display:block}
.v2-obw .v2-ob-excluir{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  border:1px solid rgba(240,120,120,.28);background:rgba(240,120,120,.09);color:#f08a8a;
  font-size:12.5px;font-weight:600;transition:.18s}
.v2-obw .v2-ob-excluir:hover{background:rgba(240,120,120,.16)}
.v2-obw .v2-ob-excluir svg{width:13px;height:13px}
.v2-obw .v2-ob-add{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:11px;
  border:1px dashed var(--line-2);color:var(--ink-3);font-size:13px;font-weight:600;transition:.18s}
.v2-obw .v2-ob-add:hover{color:var(--lime);border-color:rgba(198,255,0,.4);background:rgba(198,255,0,.05)}
.v2-obw .v2-ob-add svg{width:14px;height:14px}
/* produtos */
.v2-obw .v2-ob-addrow{display:flex;gap:9px;align-items:stretch}
.v2-obw .v2-ob-addb{width:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--sign);color:#07080C;transition:transform .18s var(--ease)}
.v2-obw .v2-ob-addb:hover{transform:translateY(-1px)}
.v2-obw .v2-ob-addb svg{width:17px;height:17px;stroke-width:3}
.v2-obw .v2-ob-prods{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.v2-obw .v2-ob-prods:empty{display:none}
.v2-obw .v2-ob-prod{display:inline-flex;align-items:center;gap:8px;padding:8px 9px 8px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--raised);font-size:13px;color:var(--ink-2)}
.v2-obw .v2-ob-prod button{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  color:var(--ink-4);transition:.16s}
.v2-obw .v2-ob-prod button:hover{background:rgba(240,120,120,.16);color:#f08a8a}
.v2-obw .v2-ob-prod svg{width:11px;height:11px;stroke-width:2.6}

/* ---------- celular ---------- */
@media (max-width:720px){
  .v2-obw .v2-ob-top{padding:14px 16px;gap:10px}
  .v2-obw .v2-ob-trilha{display:none}
  .v2-obw .v2-ob-sair{margin-left:auto}
  .v2-obw .v2-ob-palco{padding:14px 16px 32px}
  .v2-obw .v2-ob-picks{grid-template-columns:1fr}
  .v2-obw .v2-ob-rev{grid-template-columns:1fr}
  .v2-obw .v2-ob-acoes{flex-direction:row-reverse;justify-content:flex-end}
  .v2-obw .v2-ob-cta{flex:1;justify-content:center}
  .v2-obw .v2-ob-aulah{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .v2-obw .v2-ob-aulan{font-size:38px}
  /* altura livre: a cena 3 empilha no celular (tema + seta + slides) e não cabe em 180px */
  .v2-obw .v2-ob-fig{height:auto;min-height:180px}
  .v2-obw .v2-ob-f3{flex-direction:column;gap:12px}
  .v2-obw .v2-ob-f3 .v2-ob-seta{transform:rotate(90deg)}
  /* nome da etapa numa linha só pra ele: truncado em "Escrevendo o Céreb…" não informa nada */
  .v2-obw .v2-ob-fl{flex-wrap:wrap}
  .v2-obw .v2-ob-fet{max-width:none;flex:1 1 auto;white-space:normal}
  .v2-obw .v2-ob-fbar{flex:1 1 60%}
  .v2-obw .v2-ob-anal{gap:28px}
  .v2-obw .v2-ob-g2{grid-template-columns:1fr}
  .v2-obw .v2-ob-perfil{grid-template-columns:1fr;justify-items:center;text-align:center}
  .v2-obw .v2-ob-pfoto,.v2-obw .v2-ob-pini{grid-row:auto}
  .v2-obw .v2-ob-pnums{grid-column:auto;justify-content:center;gap:20px}
  .v2-obw .v2-ob-pnome{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .v2-obw *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .v2-obw .v2-ob-lbar i{width:100%}
  .v2-obw .v2-ob-lok,.v2-obw .v2-ob-selo,.v2-obw .v2-ob-nota,.v2-obw .v2-ob-sl{opacity:1}
}