/* =========================================================================
   AKROS — O AGENTE VENDE E A EMPRESA RECEBE (#vendas) · 19/10
   Pedido do dono, com dois prints de referência: um bloco que «anuncia» um
   produto e outro, embaixo e espelhado, um serviço, mostrando que dá para
   comprar os dois pelo agente; e, na mesma seção, um quadro dizendo que
   todo o dinheiro vai para a conta da empresa via Cielo, com as vantagens.

   Faixa escura (as tintas --ink/--body/--faint vêm do escuro.css), entre os
   5 passos (branco) e o comparativo (escuro: o mosaico.js emenda os dois).
   Cantos retos como o resto do site (--r:0); só avatar e ícone são redondos.
   As conversas usam a fonte de interface (--ui, do fonte-teste.css), como
   numa tela de verdade; o texto ao lado usa a do site.

   Larguras:
     ≥ 961   duas colunas; a linha do serviço inverte os lados
     ≤ 960   uma coluna: o texto primeiro, a conversa embaixo
     ≤ 520   o quadro da Cielo e as vantagens em uma coluna estreita
   Sem JS próprio: a entrada é o [data-enter] do base.css (que já respeita o
   movimento reduzido).
   ========================================================================= */

#top #vendas{background:var(--gr-a)}
#vendas{
  height:auto;min-height:0;
  padding-top:max(var(--nav-h),clamp(76px,11vh,128px));
  padding-bottom:clamp(76px,11vh,128px);
  --vd-azul:#0A80E2;
  --vd-azul-ink:#6CB8FF;
  --vd-cartao:#11161E;
  --vd-fio:rgba(255,255,255,.14);
  --vd-ui:var(--ui,"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif);
}
#vendas .vd__pilha{max-width:1240px}

/* ---------------- cabeçalho: centrado, como o comparativo ---------------- */
#vendas .sechead{max-width:min(860px,100%);margin:0 auto;text-align:center}
#vendas .sechead__eyebrow i{display:none}
#vendas .sechead__sub{margin-left:auto;margin-right:auto;max-width:58ch}

/* ---------------- as duas linhas ---------------- */
#vendas .vd__linha{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  align-items:center;gap:clamp(40px,6vw,104px);
  margin-top:clamp(56px,9vh,104px);
}
#vendas .vd__linha--inv .vd__palco{order:2}
#vendas .vd__linha--inv .vd__texto{order:1}

/* a conversa de exemplo */
#vendas .vd__palco{
  display:flex;flex-direction:column;gap:14px;width:100%;max-width:470px;justify-self:center;
  font-family:var(--vd-ui);
}
#vendas .vd__msg{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:14px;
  padding:16px 18px;border-radius:calc(16px * var(--r));
  background:var(--vd-cartao);box-shadow:inset 0 0 0 1px var(--vd-fio);
}
#vendas .vd__msg--cli{
  grid-template-columns:minmax(0,1fr) auto;
  background:#F4F6F9;box-shadow:none;color:#1D2633;
  margin-left:clamp(0px,6%,32px);
}
#vendas .vd__av{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:17px;
}
#vendas .vd__av--marca{background:#FFFFFF;padding:9px 8px 10px;object-fit:contain}
#vendas .vd__av--cli{background:linear-gradient(140deg,#F2B38C,#D9775A);color:#FFFFFF}
#vendas .vd__corpo{min-width:0}
#vendas .vd__quem{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 5px;
  font-size:13.5px;line-height:1.3;
}
#vendas .vd__quem b{font-weight:700;color:var(--ink)}
#vendas .vd__msg--cli .vd__quem{justify-content:flex-end}
#vendas .vd__msg--cli .vd__quem b{color:#0F1722}
#vendas .vd__tag{
  display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:calc(999px * var(--r));
  background:#0A56C8;color:#FFFFFF;font-size:11.5px;font-weight:600;letter-spacing:.01em;
}
#vendas .vd__hora{margin-left:auto;font-size:12px;color:var(--faint)}
#vendas .vd__msg--cli .vd__hora{margin-left:0;margin-right:auto;color:#596270}
#vendas .vd__txt{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
#vendas .vd__msg--cli .vd__txt{color:#1D2633;text-align:right}

/* o item: produto ou serviço */
#vendas .vd__item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  border-radius:calc(16px * var(--r));overflow:hidden;
  background:var(--vd-cartao);box-shadow:inset 0 0 0 1px var(--vd-fio);
}
#vendas .vd__foto{
  grid-column:1 / -1;display:grid;place-items:center;aspect-ratio:2.3 / 1;
  background:
    radial-gradient(60% 90% at 78% 18%, rgba(108,184,255,.55) 0%, rgba(108,184,255,0) 60%),
    linear-gradient(135deg,#0A2E66 0%,#0A56C8 52%,#0A80E2 100%);
  color:#FFFFFF;
}
#vendas .vd__item--servico .vd__foto{
  background:
    radial-gradient(60% 90% at 22% 18%, rgba(108,184,255,.5) 0%, rgba(108,184,255,0) 60%),
    linear-gradient(225deg,#0A2E66 0%,#0A56C8 52%,#0A80E2 100%);
}
#vendas .vd__foto svg{width:clamp(64px,7vw,92px);height:auto;aspect-ratio:1;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
#vendas .vd__ficha{display:flex;flex-direction:column;gap:2px;padding:14px 18px 6px;min-width:0}
#vendas .vd__nome{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
#vendas .vd__quando{margin:0;font-size:13.5px;color:var(--body)}
#vendas .vd__preco{
  grid-column:2;grid-row:2;align-self:end;margin:0;padding:14px 18px 6px;
  font-size:clamp(20px,1.8vw,24px);font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;
}
#vendas .vd__ficha .vd__preco{padding:0;margin-top:2px}
#vendas .vd__selo{
  grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin:10px 18px 16px;
  font-size:13px;font-weight:600;color:var(--vd-azul-ink);
}
#vendas .vd__selo svg{width:16px;height:16px;flex:none}

/* o texto ao lado */
#vendas .vd__texto{max-width:540px}
#vendas .vd__linha--inv .vd__texto{justify-self:end}
#vendas .vd__rot{
  display:inline-block;margin-bottom:14px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vd-azul-ink);
  font-family:var(--vd-ui);
}
#vendas .vd__t{
  margin:0 0 16px;font-size:clamp(1.65rem,2.5vw,2.4rem);line-height:1.12;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);
}
#vendas .vd__p{margin:0;font-size:clamp(1rem,1.1vw,1.14rem);line-height:1.65;color:var(--body)}
#vendas .vd__lista{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
#vendas .vd__lista li{display:flex;align-items:flex-start;gap:11px;font-size:clamp(.96rem,1vw,1.05rem);line-height:1.45;color:var(--ink-soft)}
#vendas .vd__lista svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--vd-azul-ink)}

/* ---------------- o quadro da Cielo ---------------- */
#vendas .vd__cielo{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;
  gap:clamp(32px,5vw,88px);margin-top:clamp(64px,10vh,120px);
  padding:clamp(28px,4.4vw,72px);border-radius:calc(20px * var(--r));
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(10,128,226,.14) 0%, rgba(10,128,226,0) 62%),
    linear-gradient(180deg,#121B29 0%,#0E1520 100%);
  box-shadow:inset 0 0 0 1px var(--vd-fio);
}

/* o caminho do dinheiro: três nós ligados por um fio */
#vendas .vd__fluxo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px;position:relative}
#vendas .vd__fluxo::before{
  content:"";position:absolute;left:31px;top:32px;bottom:32px;width:2px;
  background:linear-gradient(180deg,rgba(108,184,255,.25),var(--vd-azul) 50%,rgba(108,184,255,.25));
}
#vendas .vd__no{display:flex;align-items:center;gap:18px;position:relative}
#vendas .vd__ic{
  width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#16263D;color:var(--vd-azul-ink);box-shadow:0 0 0 6px #111A27,inset 0 0 0 1px rgba(108,184,255,.28);
}
#vendas .vd__ic svg{width:28px;height:28px}
#vendas .vd__no--meio .vd__ic{
  background:linear-gradient(140deg,var(--vd-azul) 0%,#0A56C8 100%);color:#FFFFFF;
  box-shadow:0 0 0 6px #111A27,0 14px 30px -12px rgba(10,128,226,.8);
}
#vendas .vd__no--fim .vd__ic{background:#FFFFFF;color:#0A56C8;box-shadow:0 0 0 6px #111A27}
#vendas .vd__no-txt{display:flex;flex-direction:column;gap:2px;font-family:var(--vd-ui)}
#vendas .vd__no-txt b{font-size:17px;font-weight:700;color:var(--ink)}
#vendas .vd__no-txt small{font-size:13.5px;color:var(--body)}

#vendas .vd__cielo-txt .vd__t{font-size:clamp(1.55rem,2.3vw,2.2rem)}
#vendas .vd__vant{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(20px,2.6vw,40px);
}
#vendas .vd__vant li{
  display:flex;flex-direction:column;gap:4px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}
#vendas .vd__vant b{font-size:15.5px;font-weight:600;color:var(--ink);font-family:var(--vd-ui)}
#vendas .vd__vant span{font-size:14.5px;line-height:1.55;color:var(--body)}

/* =========================================================================
   LARGURAS
   ========================================================================= */
@media (max-width:960px){
  #vendas .vd__linha{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:clamp(56px,8vh,80px)}
  #vendas .vd__linha .vd__texto,#vendas .vd__linha--inv .vd__texto{order:1;justify-self:start;max-width:640px}
  #vendas .vd__linha .vd__palco,#vendas .vd__linha--inv .vd__palco{order:2;justify-self:start}
  #vendas .vd__cielo{grid-template-columns:minmax(0,1fr);gap:36px}
  #vendas .vd__fluxo{flex-direction:row;justify-content:space-between;gap:12px}
  #vendas .vd__fluxo::before{left:32px;right:32px;top:31px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,rgba(108,184,255,.25),var(--vd-azul) 50%,rgba(108,184,255,.25))}
  #vendas .vd__no{flex-direction:column;align-items:center;text-align:center;gap:12px;flex:1 1 0;min-width:0}
}
@media (max-width:520px){
  #vendas .vd__msg{padding:14px 14px;column-gap:11px}
  #vendas .vd__av{width:38px;height:38px;font-size:15px}
  #vendas .vd__av--marca{padding:8px 7px 9px}
  #vendas .vd__msg--cli{margin-left:0}
  #vendas .vd__vant{grid-template-columns:minmax(0,1fr);gap:16px}
  #vendas .vd__ic{width:54px;height:54px}
  #vendas .vd__ic svg{width:24px;height:24px}
  #vendas .vd__fluxo::before{top:26px;left:27px;right:27px}
  #vendas .vd__no-txt b{font-size:15px}
  #vendas .vd__no-txt small{font-size:12.5px}
}