/* /crm-atendimento — hero com o fio da conversa (lead → cliente) e seções no padrão r2 (texto | motion mv).
   Motions próprios (prefixo crm-): cartão do lead que se monta, trilho do pipeline, peças da operação,
   canais que convergem na Inbox, celular com chatbot, rascunho da Kyra com fontes. Roteiros em page.js. */

/* ---------- Hero ---------- */
.crm-hero{padding-block:clamp(40px,5vw,88px) var(--space-section)}
@media (max-width:980px){.crm-hero-top{grid-template-columns:minmax(0,1fr);align-items:start}.crm-hero-copy{padding-top:0}}
@media (min-width:901px){
}

/* O fio da conversa */
@media (max-width:1180px){
}
@media (max-width:760px){
}
@media (max-width:720px){
  .crm-hero .wrap{display:flex;flex-direction:column}
}

/* ---------- Fechamento ---------- */
.crm-close-grid{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.crm-close-grid .h2{max-width:22ch}
.crm-close-side{align-items:flex-start;max-width:62ch}

/* ===================== Motions (mv) ===================== */

/* 1 · lead do site: o formulário vira um cartão que se preenche */
.crm-lf{display:flex;flex-direction:column}
.crm-lf-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--sx-line);border-radius:14px}
.crm-lf-msg{grid-column:2 / -1;font-size:13px;line-height:1.45;color:var(--sx-ink2)}
.crm-lf-wire{position:relative;display:block;width:2px;height:30px;margin-left:31px;background:var(--sx-line2)}
.crm-lf-wire b{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--sx-blue);opacity:0}
.crm-lf-wire.go b{animation:mvTravel .55s var(--sx-ease) forwards}
.crm-lf-card{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:16px 18px 6px;box-shadow:0 30px 60px -44px rgba(10,20,60,.4)}
.crm-lf-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--sx-line)}
.crm-lf-rows li{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;min-height:46px}
.crm-lf-rows li + li{border-top:1px solid var(--sx-line)}
.crm-lf-rows span{font-size:12.5px;color:var(--sx-ink3)}
.crm-lf-rows b{font-size:13.5px;font-weight:500;transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease)}
.crm-lf-rows li::after{content:"";position:absolute;left:124px;top:50%;width:46%;height:8px;margin-top:-4px;border-radius:4px;background:var(--sx-wash);opacity:0;transition:opacity .3s}

/* 2 · pipeline: trilho de etapas, a oportunidade avança */
.crm-pp-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:24px}
.crm-pp-h b{font-family:var(--f-brand);font-size:15px;font-weight:500}
.crm-pp-h span{font-size:12.5px;color:var(--sx-ink3)}
.crm-pp-trk{position:relative;margin-bottom:26px}
.crm-pp-trk ol{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.crm-pp-trk ol::before{content:"";position:absolute;left:10%;right:10%;top:13px;height:2px;background:var(--sx-line2)}
.crm-pp-trk li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.crm-pp-trk li i{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--sx-line2);transition:background .3s,border-color .3s}
.crm-pp-trk li.done i{background:var(--sx-blue-b);border-color:rgba(0,122,255,.35)}
.crm-pp-trk li.on i{border-color:var(--sx-blue)}
.crm-pp-trk li b{font-size:12.5px;font-weight:500;color:var(--sx-ink2);white-space:nowrap}
.crm-pp-trk li.on b{color:var(--ink)}
.crm-pp-n{font-size:12px;color:var(--sx-ink3);font-variant-numeric:tabular-nums}
.crm-pp-mk{position:absolute;left:0;top:0;width:20%;display:flex;justify-content:center;transform:translateX(calc(var(--i) * 100%));transition:transform .7s var(--sx-ease)}
.crm-pp-mk em{width:28px;height:28px;border-radius:50%;background:var(--sx-blue);color:#fff;font-style:normal;font-size:12px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(0,122,255,.16)}
.crm-pp-card{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:16px 18px;box-shadow:0 30px 60px -44px rgba(10,20,60,.4)}
.crm-pp-card.bump{animation:crmBump .5s var(--sx-ease)}
@keyframes crmBump{40%{transform:translateY(-4px)}}
.crm-pp-ch{display:flex;justify-content:space-between;align-items:center;gap:12px}
.crm-pp-next{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:13px;color:var(--sx-ink2)}
.crm-pp-ft{display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--sx-line);font-size:12.5px;color:var(--sx-ink3)}
.crm-pp-card.is-won .crm-pp-next .sx-ic{background:var(--sx-ok-b);color:var(--sx-ok-t)}

/* 3 · do comercial para a operação: os responsáveis se encaixam */
.crm-jn{padding-bottom:28px}
.crm-jn-co{position:relative;background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px;box-shadow:0 30px 60px -44px rgba(10,20,60,.4)}
.crm-jn-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.crm-jn-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:12px 0;border-block:1px solid var(--sx-line)}
.crm-jn-kv dt{font-size:12px;color:var(--sx-ink3)}
.crm-jn-kv dd{font-size:13px;font-weight:500;margin:0}
.crm-jn-sl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.crm-jn-sl li{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.crm-jn-k{font-size:12.5px;font-weight:500;color:var(--sx-ink3)}
.crm-jn-ph{height:48px;border:1.5px dashed var(--sx-line2);border-radius:12px;display:grid;place-items:center;font-size:12px;color:var(--sx-ink3)}
.crm-jn-pc{position:absolute;left:0;right:0;bottom:0;z-index:2;height:48px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;background:#fff;border:1px solid var(--sx-line);box-shadow:0 14px 26px -16px rgba(10,20,60,.45);transition:transform .6s var(--sx-ease),box-shadow .4s,border-color .3s}
.crm-jn-pc .sx-av{width:28px;height:28px;font-size:12px}
.crm-jn-pc b{font-family:var(--f-brand);font-size:14px;font-weight:500}
.crm-jn-pc.in{box-shadow:none;border-color:rgba(52,199,89,.4)}
.crm-jn-ob{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--sx-line);font-size:13px;color:var(--sx-ink2);transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.crm-jn-ob b{color:var(--ink);font-weight:500}

/* 4 · Inbox: três canais convergem numa caixa só (seção escura, cena clara) */
.crm-ib{display:grid;grid-template-columns:150px 56px minmax(0,1fr);align-items:center}
.crm-ib-ch{display:flex;flex-direction:column;justify-content:space-between;height:260px}
.crm-ib-ch li{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px 0 10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--paper);font-size:13.5px;white-space:nowrap;transition:border-color .3s,background .3s}
.crm-ib-ch li.on{border-color:rgba(0,122,255,.7);background:rgba(0,122,255,.16)}
.crm-ib-w{width:100%;height:260px;overflow:visible}
.crm-ib-w path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke .3s}
.crm-ib-w path.on{stroke:var(--sx-blue)}
.crm-ib-box{background:#fff;border-radius:18px;padding:16px 16px 6px;color:var(--ink);min-width:0}
.crm-ib-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.crm-ib-h > b{font-family:var(--f-brand);font-size:15px;font-weight:500}
.crm-ib-h span{font-size:12.5px;color:var(--sx-ink3)}
.crm-ib-h span b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.crm-ib-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 2px;border-top:1px solid var(--sx-line)}
.crm-ib-l .mv-tt span.crm-ib-m{font-size:13px;color:var(--sx-ink2);margin-top:2px}

/* 5 · chatbot no celular do cliente */
.crm-bt{display:flex;align-items:center;gap:28px}
.crm-bt .mv-phone{width:272px}
.crm-bt-scr{height:428px;gap:8px;padding-top:40px}
.crm-bt-chat{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.crm-bt-m{max-width:88%;padding:8px 11px;border-radius:14px;font-size:12.5px;line-height:1.42}
.crm-bt-m.bot{align-self:flex-start;background:#fff;border:1px solid var(--sx-line);border-bottom-left-radius:5px}
.crm-bt-m.me{align-self:flex-end;background:var(--sx-blue);color:#fff;border-bottom-right-radius:5px}
.crm-bt-f{display:flex;align-items:center;gap:6px;padding:6px 8px;margin-bottom:6px;border-radius:8px;background:var(--paper);font-size:12px;font-weight:500}
.crm-bt-f svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.crm-bt-sys{align-self:center;max-width:94%;text-align:center;font-size:12px;line-height:1.4;font-weight:500;color:var(--sx-ok-t);background:var(--sx-ok-b);border-radius:10px;padding:6px 10px}

/* 6 · Kyra no comercial: fontes → resumo → rascunho que espera confirmação */
.crm-ky{background:#fff;border-radius:18px;padding:20px;color:var(--ink)}
.crm-ky-k{font-size:12.5px;font-weight:500;color:var(--sx-ink3);margin-bottom:8px}
.crm-ky-src{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.crm-ky-src li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--sx-blue-b);color:var(--sx-blue-t);font-size:12.5px;font-weight:500}
.crm-ky-src em{display:grid;place-items:center}
.crm-ky-src em svg{width:12px;height:12px}
.crm-ky-sum{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.crm-ky-sum li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.45}
.crm-ky-sum li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--sx-blue)}
.crm-ky-dr{border-radius:14px;background:var(--paper);padding:14px 16px}
.crm-ky-tx{font-size:14px;line-height:1.5;min-height:63px}
.crm-ky-act{display:flex;align-items:center;gap:8px;margin-top:12px}
.crm-ky-w{flex:1;min-width:0;font-size:12.5px;color:var(--sx-ink3)}
.crm-ky-w.ok{color:var(--sx-ok-t);font-weight:500}

@media (max-width:720px){
  .crm-lf-rows li{grid-template-columns:96px minmax(0,1fr)}
  .crm-lf-rows li::after{left:108px}
  .crm-lf-rows b{line-height:1.35;padding-block:8px}
  .crm-lf-form .sx-ic{display:none}
  .crm-lf-form{grid-template-columns:minmax(0,1fr) auto}
  .crm-lf-msg{grid-column:1 / -1}
  .crm-lf-wire{margin-left:20px}
  .crm-pp-trk li b{font-size:12px;letter-spacing:-.01em}
  .crm-pp-ch{flex-wrap:wrap}
  .crm-jn-co{padding:16px}
  .crm-jn-h{grid-template-columns:auto minmax(0,1fr)}
  .crm-jn-h .sx-badge{grid-column:1 / -1;justify-self:start}
  .crm-jn-kv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .crm-jn-kv > div:last-child{grid-column:1 / -1}
  .crm-jn-pc{padding:0 8px;gap:6px}
  .crm-jn-pc .sx-av{display:none}
  .crm-ib{grid-template-columns:minmax(0,1fr);gap:12px}
  .crm-ib-ch{flex-direction:row;height:auto;gap:6px}
  .crm-ib-ch li{flex:1 1 0;min-width:0;justify-content:center;height:44px;padding:0 6px;font-size:12.5px}
  .crm-ib-ch .sx-ic{display:none}
  .crm-ib-w{display:none}
  .crm-ib-l li{grid-template-columns:auto minmax(0,1fr)}
  .crm-ib-l li .sx-badge{grid-column:2;justify-self:start}
  .crm-ib-l .mv-tt span{white-space:normal}
  .crm-bt{flex-direction:column;align-items:stretch;gap:16px}
  .crm-bt-keys{flex-direction:row;flex-wrap:wrap}
  .crm-bt-keys li{height:38px;flex:1 1 auto;padding:0 12px}
  .crm-bt .mv-phone{align-self:center}
  .crm-ky{padding:16px}
  .crm-ky-act{flex-wrap:wrap}
  .crm-ky-w{flex:1 1 100%}
}

/* ===== Hero: texto | motion (o contato nasce lead e vira cliente, a conversa segue a mesma) ===== */
.crm-hg{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.crm-hcopy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.crm-hcopy > *{margin:0}
.crm-hcopy .lead{max-width:40ch}
.crm-hg > .sx{max-width:600px;width:100%}
@media (min-width:1100px){
  .crm-hg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(56px,6vw,96px)}
  .crm-h1{font-size:clamp(2.4rem,1.3rem + 2vw,3.3rem);line-height:1.06;max-width:17ch}
  .crm-hg > .sx{justify-self:end}
}
@media (max-width:720px){.crm-hg{gap:36px}.crm-hcopy{gap:20px}.crm-h1{font-size:min(2.2rem,var(--fs-display))}}
.chx{display:flex;flex-direction:column}
.chx-card{background:#fff;border:1px solid rgba(29,29,31,.09);border-radius:18px;padding:16px 18px;box-shadow:0 24px 48px -36px rgba(10,20,60,.4)}
.chx-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.chx-id b{display:block;font-family:var(--f-brand);font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chx-sub{display:block;font-size:12.5px;color:var(--ink-3)}
.chx-st{position:relative;list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.chx-st::before{content:"";position:absolute;left:6px;right:calc(25% - 6px);top:5px;height:2px;background:rgba(29,29,31,.1);border-radius:2px}
.chx-bar{position:absolute;left:6px;right:calc(25% - 6px);top:5px;height:2px;background:#007AFF;border-radius:2px;transform-origin:left;transform:scaleX(calc(var(--p) / 3));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.chx-st li{position:relative;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-3);z-index:1}
.chx-st li i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgba(29,29,31,.2);transition:box-shadow .3s,background .3s}
.chx-st li.on{color:var(--ink,#1D1D1F)}
.chx-st li.on i{box-shadow:inset 0 0 0 4px #007AFF}
.chx-st li.won i{background:#34C759;box-shadow:none}
.chx-kv{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;border-top:1px solid rgba(29,29,31,.08)}
.chx-kv dt{font-size:12px;color:var(--ink-3)}
.chx-kv dd{margin:2px 0 0;font-size:13.5px;font-weight:500;transition:opacity .2s}
.chx-kv dd.sw{opacity:0}
.chx-lbl{font-size:12.5px;color:rgba(29,29,31,.55);margin:16px 0 8px 2px}
.chx-th{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.chx-m{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid rgba(29,29,31,.07)}
.chx-m.out{background:rgba(0,122,255,.06);border-color:rgba(0,122,255,.12)}
.chx-ch{width:24px;height:24px;border-radius:7px;background:#F5F5F7;display:grid;place-items:center;color:rgba(29,29,31,.6)}
.chx-ch svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}
.chx-meta{font-size:12px;color:var(--ink-3);margin:0}
.chx-t{font-size:13px;line-height:1.4;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chx-sign{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:#1F7A3A;padding:2px 0}
.chx-sign::before,.chx-sign::after{content:"";flex:1;border-top:1px dashed rgba(31,122,58,.35)}
@media (max-width:720px){.chx-t{white-space:normal}.chx-kv{grid-template-columns:1fr}}
@media (max-width:720px){.chx-h{grid-template-columns:auto minmax(0,1fr)}.chx-h .chx-kind{grid-column:2;justify-self:start}.chx-st li span{font-size:12px;letter-spacing:-.01em}}