/* =========================================================================
   AKROS — OS 5 PASSOS (#passos) · 19/10
   Pedido do dono: um infográfico «altamente intuitivo e profissional» do
   caminho para ter um agente. Depois, com a primeira versão na tela:
   «deixe mais clean» e «destaque que é extremamente fácil ter o agente
   funcionando». Tudo aqui é preso a #passos.

   O desenho é um trilho: cinco estações ligadas por uma linha, e um ponto
   azul que corre por ela e acende cada estação quando chega
   (js/passos.js) e, no computador, recomeça devagar enquanto a seção está
   na tela. Cada passo termina num «feito» (Conta criada, WhatsApp
   conectado…); o da SOFIA termina nos quatro ramos, e o último no «No ar».
   Nada de painel, brilho ou vidro: papel, fio e um acento só, o azul.

   É uma faixa clara (`.claro`, claro.css), e as tintas (--ink, --body,
   --faint) são as que o claro.css devolve. Ela mora entre a tela de Leads
   (#dossie, papel #F4F8FA) e o comparativo (escuro), a pedido do dono: o
   chão é o BRANCO de #perdas, porque dois papéis iguais seguidos viravam
   uma seção só. Pílulas e ramos ganham o papel por dentro, para não sumir
   no branco.

   Larguras:
     ≥1181      horizontal; a 4ª coluna vale 1,5 das outras, e o subgrid
                põe o nó, o texto e o «feito» de todas na mesma linha
     ≤1180      vertical: o nó à esquerda, texto e «feito» ao lado

   Sem JS e com movimento reduzido, tudo nasce no estado FINAL: os estados
   de partida moram sob `.is-armado … :not(.is-on)`, e quem põe o
   `.is-armado` é o próprio js/passos.js quando assume. Só anima transform
   e opacity.
   ========================================================================= */

#top #passos.claro{background:#FFFFFF}
#passos{
  justify-content:center;
  --pas-no:56px;
  --pas-chao:#FFFFFF;
  --pas-cartao:#F7FAFC;
  --pas-azul:#0A80E2;
  --pas-fundo:#0A56C8;     /* o azul de texto: 6,3:1 no papel */
  --pas-fio:#DCE5EC;
}
@media (min-width:1181px){ #passos{height:auto;min-height:100svh} }

/* ---------------- o cabeçalho: a facilidade em primeiro ---------------- */
#passos .sechead{max-width:min(1120px,100%);margin-bottom:clamp(44px,7vh,88px)}
#passos .sechead__title{color:var(--ink)}
#passos .sechead__title em{color:var(--pas-fundo)}
#passos .sechead__sub{color:var(--body)}
#passos .sechead__sub b{color:var(--ink)}

#passos .pas__faceis{
  list-style:none;margin:clamp(20px,3vh,30px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 12px;
}
#passos .pas__faceis li{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 17px 0 12px;
  border-radius:calc(999px * var(--r));
  background:var(--pas-cartao);box-shadow:inset 0 0 0 1px var(--pas-fio);
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
}
#passos .pas__faceis svg{width:18px;height:18px;flex:none;color:var(--pas-azul)}

/* ---------------- o trilho ----------------
   O js mede o centro do primeiro e do último nó e põe o trilho entre eles;
   `.is-v` quando a trilha está em pé. O enche e o ponto andam por
   transform, escritos pelo js a cada quadro. */
#passos .pas{position:relative}
#passos .pas__trilho{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:0}
#passos .pas__base,#passos .pas__enche{position:absolute;left:0;top:-1px;width:100%;height:2px}
#passos .pas__base{background:var(--pas-fio)}
#passos .pas__enche{background:linear-gradient(90deg,#8CC6F2,var(--pas-azul));transform-origin:0 0}
#passos .pas__trilho.is-v .pas__base,
#passos .pas__trilho.is-v .pas__enche{left:-1px;top:0;width:2px;height:100%}
#passos .pas__trilho.is-v .pas__enche{background:linear-gradient(180deg,#8CC6F2,var(--pas-azul))}
#passos .is-armado .pas__enche{transform:scaleX(0)}
#passos .is-armado .pas__trilho.is-v .pas__enche{transform:scaleY(0)}

#passos .pas__cometa{
  position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;
  background:var(--pas-azul);border:3px solid #FFFFFF;opacity:0;
  box-shadow:0 0 0 1px rgba(10,128,226,.25),0 4px 14px rgba(10,128,226,.45);
  transition:opacity .45s var(--ease);
}
#passos .pas.is-tocando .pas__cometa{opacity:1}
#passos .pas.is-feito .pas__cometa{opacity:0}

/* ---------------- as estações ---------------- */
#passos .pas__trilha{list-style:none;margin:0;padding:0;position:relative;z-index:1}
#passos .pas__est{position:relative;min-width:0}

/* o nó: azul cheio quando aceso; apagado, um círculo branco de fio.
   O anel da cor do chão corta o trilho em volta dele. */
#passos .pas__no{
  position:relative;display:grid;place-items:center;
  width:var(--pas-no);height:var(--pas-no);border-radius:50%;
  color:#FFFFFF;
  background:linear-gradient(140deg,var(--pas-azul) 0%,var(--pas-fundo) 100%);
  box-shadow:0 0 0 8px var(--pas-chao),0 12px 24px -12px rgba(10,86,200,.65);
  transition:color 1.1s var(--ease),box-shadow 1.1s var(--ease);
}
#passos .pas__no::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--pas-fio);
  opacity:0;transition:opacity 1.1s var(--ease);
}
#passos .pas__no svg{position:relative;width:23px;height:23px}
#passos .pas__no::after{    /* o anel que sai do nó quando ele acende */
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--pas-azul);opacity:0;pointer-events:none;
}
#passos .is-armado .pas__est:not(.is-on) .pas__no{color:rgba(10,31,69,.36);box-shadow:0 0 0 8px var(--pas-chao)}
#passos .is-armado .pas__est:not(.is-on) .pas__no::before{opacity:1}
#passos .is-armado .pas__est.is-on .pas__no::after{animation:pas-anel 2s var(--ease) 1}
@keyframes pas-anel{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}

#passos .pas__txt{display:flex;flex-direction:column;gap:7px;transition:opacity 1.2s var(--ease)}
#passos .pas__num{
  font-size:12px;font-weight:600;line-height:1;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--pas-fundo);
}
#passos .pas__t{
  margin:0;font-size:clamp(1.08rem,1.12vw,1.36rem);font-weight:600;line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);
}
#passos .pas__d{margin:0;max-width:30ch;font-size:clamp(.88rem,.86vw,1rem);line-height:1.55;color:var(--body)}
#passos .is-armado .pas__est:not(.is-on) .pas__txt{opacity:.35}

/* o recomeço (js/passos.js): tudo apaga junto e devagar, e a linha some
   em vez de voltar correndo; 1,4 s, o APAGAR do js */
#passos .pas.is-apagando .pas__txt,
#passos .pas.is-apagando .pas__feito,
#passos .pas.is-apagando .pas__ramo,
#passos .pas.is-apagando .pas__no,
#passos .pas.is-apagando .pas__no::before{transition-duration:2s;transition-delay:0s}
#passos .pas.is-apagando .pas__enche{opacity:0;transition:opacity 2s var(--ease)}

/* ---------------- o «feito» de cada passo ---------------- */
#passos .pas__feito{
  display:inline-flex;align-items:center;gap:7px;align-self:start;justify-self:start;
  margin:0;height:32px;padding:0 14px 0 10px;border-radius:calc(999px * var(--r));
  font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  color:var(--pas-fundo);background:#E3EEF9;
  transition:opacity 1s var(--ease) .8s,transform 1s var(--ease) .8s;
}
#passos .pas__feito svg{width:16px;height:16px;flex:none}
#passos .is-armado .pas__est:not(.is-on) .pas__feito{opacity:0;transform:translateY(6px);transition-delay:0s}

/* o último é o fim do caminho: cheio, com o ponto que pulsa três vezes */
#passos .pas__feito--vivo{color:#FFFFFF;background:var(--pas-fundo);padding-left:13px}
#passos .pas__vivo{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#FFFFFF}
#passos .pas__vivo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #FFFFFF;opacity:0}
#passos .is-armado .pas__est.is-on .pas__vivo::after{animation:pas-vivo 2s var(--ease) 1s 3}
@keyframes pas-vivo{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}

/* ---------------- 04 · os quatro ramos da SOFIA ---------------- */
#passos .pas__ramos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
#passos .pas__ramo{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:9px;row-gap:1px;
  padding:9px 12px 10px 10px;min-width:0;border-radius:calc(12px * var(--r));
  background:var(--pas-cartao);box-shadow:inset 0 0 0 1px var(--pas-fio);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
#passos .pas__ri{grid-row:span 2;width:18px;height:18px;color:var(--pas-azul)}
#passos .pas__tag{font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
#passos .pas__rt{font-size:12px;line-height:1.3;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#passos .pas__ramo:nth-child(1){transition-delay:.4s}
#passos .pas__ramo:nth-child(2){transition-delay:.9s}
#passos .pas__ramo:nth-child(3){transition-delay:1.4s}
#passos .pas__ramo:nth-child(4){transition-delay:1.9s}
#passos .is-armado .pas__est:not(.is-on) .pas__ramo{opacity:0;transform:translateY(6px);transition-delay:0s}

/* =========================================================================
   LARGURAS
   ========================================================================= */

/* ---- horizontal: o subgrid alinha nó, texto e «feito» das cinco ---- */
@media (min-width:1181px){
  #passos .pas__trilha{
    display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr 1fr;grid-template-rows:auto auto auto;
    column-gap:clamp(20px,2.2vw,40px);
  }
  #passos .pas__est{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  #passos .pas__no{margin-bottom:clamp(22px,3.2vh,34px)}
  #passos .pas__txt{margin-bottom:clamp(16px,2.2vh,22px)}
}

/* ---- em pé: o nó à esquerda, o resto ao lado ---- */
@media (max-width:1180px){
  /* 19/10: sem o pé (o dono tirou «Começar agora»), o fim da trilha encostava
     no fundo do .bloco (26–62 px); o mesmo respiro do topo */
  #passos{padding-bottom:clamp(64px,9vh,112px)}
  #passos .pas__trilha{display:flex;flex-direction:column;gap:clamp(32px,4.6vh,46px)}
  #passos .pas__est{
    display:grid;grid-template-columns:var(--pas-no) minmax(0,1fr);
    column-gap:clamp(16px,3vw,28px);row-gap:14px;align-items:start;
  }
  #passos .pas__no{grid-column:1;grid-row:1 / span 2}
  #passos .pas__txt{grid-column:2;grid-row:1;padding-top:4px}
  #passos .pas__feito,#passos .pas__ramos{grid-column:2;grid-row:2}
  #passos .pas__d{max-width:52ch}
  #passos .pas__ramos{max-width:440px}
}
@media (max-width:759px){
  #passos{--pas-no:46px}
  #passos .pas__no svg{width:20px;height:20px}
  #passos .pas__faceis li{height:36px;font-size:13.5px}
}

/* ---- movimento reduzido: o js já acende tudo; aqui some o que só anda ---- */
@media (prefers-reduced-motion:reduce){
  #passos .pas__cometa{display:none}
}