/* ==========================================================================
   Lumi Vendas · ajustes locais sobre o molde (/lumi/_base/lumi.css)
   Tudo com prefixo vx-. Nada aqui muda o molde; o que deveria subir para ele
   está marcado com "→ molde".
   ========================================================================== */

/* ---------- Logo com o nome do produto ---------- */
.vx-logo__sub{margin-left:2px;font-size:.62em;font-weight:500;letter-spacing:-.02em;opacity:.72}
@media (max-width:420px){.vx-logo__sub{display:none}}

/* ---------- Topo com foto: o título não passa da metade, para não cobrir o vendedor ---------- */
@media (min-width:981px){.lx-hero .lx-hero__intro{max-width:540px}}
@media (min-width:981px){.lx-hero .lx-hero__titulo{max-width:560px}}
/* No celular o texto do topo é longo: o palco cresce para a faixa do laço (vendedor + conversa) ficar livre */
@media (max-width:760px){.lx-hero__palco{min-height:max(640px,calc(100svh + 164px))}}

/* Linha secundária do herói: "Ver a conversa de exemplo" */
.vx-link-claro{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-size:var(--lx-fs-sm);font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px}
.vx-link-claro .lx-ico{width:16px;height:16px;transform:rotate(135deg)}
.vx-link-claro--sobe .lx-ico{transform:rotate(-45deg)}
@media (hover:hover){.vx-link-claro:hover{text-decoration-color:currentColor}}
.lx-hero__nota a{color:#fff;text-underline-offset:4px}

/* Faixa de confiança */
.vx-faixa{display:grid;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:var(--lx-fs-min);line-height:1.45;color:rgba(255,255,255,.86)}
.vx-faixa li{display:flex;align-items:flex-start;gap:10px}
@media (min-width:981px){.vx-faixa{display:flex;flex-wrap:wrap;gap:8px 22px}}
.vx-faixa .lx-ico{width:16px;height:16px;margin-top:1px;color:var(--lx-peach-2)}

/* Passos: foto em cima e texto embaixo (variante .lx-passos--foto-topo do molde) */
.lx-passos--foto-topo .lx-passo__txt>span{color:#e6ddd2}

/* ---------- Janela: o rótulo "Conversa ilustrativa" fica visível no celular ---------- */
.vx-rotulo .lx-janela__nota{display:inline-flex;align-items:center;padding:2px 10px;border:1px solid var(--lx-tag-line);border-radius:var(--lx-r-pill);background:var(--lx-tag-bg);color:var(--lx-brand-ink);font-weight:500;white-space:nowrap}
@media (max-width:900px){
  .vx-rotulo .lx-janela__barra{grid-template-columns:auto minmax(0,1fr) auto}
  .vx-rotulo .lx-janela__nota{display:inline-flex}
}
@media (max-width:400px){.vx-rotulo .lx-janela__titulo{display:none}.vx-rotulo .lx-janela__barra{grid-template-columns:auto 1fr}}

/* ---------- Conversa vista pela caixa de entrada da loja (Chat da Lumi) ----------
   O molde mostra a conversa do lado do cliente. Aqui é a tela da loja:
   lead à esquerda, Lumi à direita, linhas de sistema e nota privada.
   → molde: aceitar "de": "sistema" e "tipo": "nota" no roteiro, e um modo "caixa de entrada". */
.vx-inbox .lx-msg--cliente{align-self:flex-start;background:#fff;box-shadow:0 0 0 1px var(--lx-line);transform-origin:0 100%}
.vx-inbox .lx-msg--cliente .lx-msg__meta{display:none}
.vx-inbox .lx-msg--lumi{align-self:flex-end;background:var(--lx-bubble-out);box-shadow:none;transform-origin:100% 100%}
.vx-inbox .lx-msg--digitando i{background:#b98d74}
.vx-inbox .lx-msg--audio{background:#fff}
.vx-chat__av{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--lx-cream);box-shadow:inset 0 0 0 1px var(--lx-wash-line);font-size:var(--lx-fs-min);font-weight:500;color:var(--lx-brand-ink)}
.vx-chat__canal{display:block;overflow:hidden;font-size:var(--lx-fs-min);line-height:1.3;color:var(--lx-ink-2);white-space:nowrap;text-overflow:ellipsis}
@media (max-width:760px){
  .vx-inbox{--lx-chat-h:600px}
  /* "Ver de novo" só com o ícone no celular (o texto continua como nome acessível) */
  .vx-inbox .lx-chat__repetir{width:40px;padding:0;justify-content:center;gap:0;font-size:0}
  .vx-inbox .lx-chat__repetir .lx-ico{width:16px;height:16px}
}
/* linha de sistema */
.vx-inbox .vx-sistema{align-self:center;max-width:94%;padding:6px 12px;border-radius:var(--lx-r-pill);background:var(--lx-pill-bg);box-shadow:none;font-size:var(--lx-fs-min);line-height:1.45;text-align:center;color:var(--lx-ink-2);transform-origin:50% 100%}
.vx-inbox .vx-sistema .lx-msg__meta{display:none}
/* nota privada: Resumo da IA */
.vx-inbox .vx-nota{align-self:stretch;max-width:none;padding:12px 14px;border:1px dashed #e9b896;border-radius:var(--lx-r-md);background:var(--lx-wash);box-shadow:none;font-size:var(--lx-fs-min);line-height:1.5;transform-origin:50% 100%}
.vx-inbox .vx-nota .lx-msg__titulo{gap:7px;margin-bottom:6px;color:var(--lx-brand-ink)}
.vx-inbox .vx-nota .lx-msg__titulo .lx-ico{width:14px;height:14px}
.vx-inbox .vx-nota .lx-msg__linhas li+li{margin-top:2px}
.vx-inbox .vx-nota b{font-weight:500;color:var(--lx-ink)}
.vx-inbox .vx-nota .lx-msg__meta{display:none}

/* ---------- Ficha do lead ao lado da conversa (preenche junto) ---------- */
.vx-lado{display:grid;gap:24px}
.vx-ficha{padding:20px 22px;border:1px solid var(--lx-line);border-radius:var(--lx-r-lg);background:#fff}
.vx-ficha__topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--lx-line)}
.vx-ficha__nome{display:flex;align-items:center;gap:10px;font-size:var(--lx-fs-sm);font-weight:500}
.vx-ficha__titulo{font-size:var(--lx-fs-min);color:var(--lx-ink-2)}
.vx-ficha dl{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:9px 16px;margin:14px 0 0;font-size:var(--lx-fs-min);line-height:1.45}
.vx-ficha dt{color:var(--lx-ink-2)}
.vx-ficha dd{margin:0;padding:0 6px;margin-left:-6px;border-radius:6px;color:var(--lx-ink);font-weight:500;transition:background-color var(--lx-t-slow) var(--lx-ease)}
.vx-ficha dd.is-vazio{font-weight:400;color:#a29a90}
.vx-ficha dd.is-novo{animation:vx-marca 1.6s var(--lx-ease)}
.vx-ficha__grupo{grid-column:1/-1;margin-top:8px;padding-top:12px;border-top:1px solid var(--lx-line);font-size:var(--lx-fs-min);font-weight:500;color:var(--lx-ink)}
.vx-etapa{display:inline-flex;align-items:center;gap:7px}
.vx-etapa::before{content:'';width:8px;height:8px;border-radius:50%;background:#d29a00}
.vx-etapa.is-vazio::before{background:#4b85ff}
@keyframes vx-marca{0%{background-color:#ffe3cf}100%{background-color:transparent}}
.vx-destaques{margin:0}
.vx-destaques li{padding:10px 0}
.vx-lado .lx-nota{margin-top:-8px}
.vx-lado .lx-btn{justify-self:start}
@media (max-width:900px){.vx-lado .lx-btn{justify-self:stretch}}

/* ---------- Kanban de vendas: 5 colunas ---------- */
.vx-kanban .lx-kanban__col{min-height:250px}
.vx-kanban .lx-kcard.is-feito span{color:var(--lx-ok)}
@media (max-width:1100px) and (min-width:901px){.vx-kanban{gap:8px}.vx-kanban .lx-kanban__col{padding:10px}.vx-kanban .lx-kcard{grid-template-columns:minmax(0,1fr);padding:10px}.vx-kanban .lx-kcard__av{display:none}}
@media (max-width:900px){.vx-kanban .lx-kanban__col{min-height:0}}
.vx-recursos-topo{margin-bottom:clamp(48px,6vw,80px)}
.vx-kanban-texto .lx-h3{margin-bottom:14px}
.vx-kanban-texto p{font-size:var(--lx-fs-sm);line-height:1.7;color:var(--lx-ink-2)}
.vx-recurso-lista{display:grid;gap:10px;margin-top:10px}
.vx-recurso-lista li{position:relative;padding-left:16px;font-size:var(--lx-fs-sm);line-height:1.7;color:var(--lx-ink-2)}
.vx-recurso-lista li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--lx-brand)}
.vx-recurso-lista b{font-weight:500;color:var(--lx-ink)}

/* ---------- Integrações: 3 colunas no computador ---------- */
.vx-integra{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.vx-integra .lx-integra__item{align-items:start;padding:20px}
.vx-integra .lx-integra__desc{font-size:var(--lx-fs-min);line-height:1.55}
.vx-integra .lx-status{margin-top:6px}
.vx-acoes-secao{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:36px}

/* ---------- Planos ---------- */
.vx-anual{margin-top:6px;font-size:var(--lx-fs-min);line-height:1.5;color:var(--lx-ink-2)}
.vx-plano__desc-fim{margin-bottom:30px}
.vx-planos-rodape{max-width:720px;margin:28px auto 0;text-align:center;font-size:var(--lx-fs-sm);color:var(--lx-ink-2)}

/* ---------- Dúvidas ---------- */
.vx-duvida-chamada{margin-top:32px;font-size:var(--lx-fs-sm);color:var(--lx-ink-2)}
.vx-duvida-chamada+.lx-btn{margin-top:12px}

/* ---------- Chamada final com foto: véu mais leve que o do molde, para as pessoas aparecerem ---------- */
.vx-final::before{background:linear-gradient(0deg,rgba(var(--lx-veil),.78) 0%,rgba(var(--lx-veil),.5) 55%,rgba(var(--lx-veil),.42) 100%)}
.vx-final{--lx-final-foco:50% 38%}