/* ============================================================================
   Direto ao Ponto · oferta para consultoria SAP
   Bloco 3: a esteira de seis estacoes. O elemento assinatura.

   Toda a ambicao de movimento da pagina mora aqui. O resto e disciplinado e
   quieto em volta, de proposito: se tudo se mexe, nada chama atencao.

   GEOMETRIA DO CONECTOR, que e a parte nao obvia:
   cada estacao desenha o proprio trecho de linha, o que vem ANTES dela. O
   trecho precisa ir do centro da estacao anterior ate o centro desta. Sendo W a
   largura da estacao e G o vao do grid, os centros distam W + G. Por isso
   left: calc(-50% - G/2) e width: calc(100% + G). Amarrar o conector a estacao
   em vez de desenhar um SVG unico por cima do trilho e o que faz o desenho
   continuar certo quando o grid recalcula as colunas sozinho.
   ========================================================================== */

.jornada { --vao: 14px; }

.trilho {
  list-style: none;
  margin: clamp(38px, 4.6vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--vao);
}

.estacao { position: relative; padding-top: 46px; }

/* --------------------------------------------------------------- conector */
.conector {
  position: absolute;
  top: 13px;
  left: calc(-50% - var(--vao) / 2);
  width: calc(100% + var(--vao));
  height: 2px;
  overflow: visible;
}

.conector line {
  stroke: var(--border-strong);
  stroke-width: 2;
  /* O traco tem o comprimento do proprio caminho e comeca deslocado por ele
     inteiro, entao nao aparece nada. Zerar o deslocamento desenha a linha. */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.55s ease;
}

.estacao.ativa .conector line { stroke-dashoffset: 0; stroke: var(--cyan); }

/* A etiqueta do artefato mora em cima da conexao: e o insumo que a estacao
   anterior entrega para esta. Sem ela a esteira vira so uma fila de caixas. */
.artefato {
  position: absolute;
  top: -6px;
  left: calc(-50% - var(--vao) / 2);
  width: calc(100% + var(--vao));
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  opacity: 0;
  transition: opacity 0.5s ease 0.25s;
  padding-inline: 4px;
  line-height: 1.35;
}

.estacao.ativa .artefato { opacity: 1; }

/* -------------------------------------------------------------------- no */
.no {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%) scale(0.4);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.estacao.ativa .no {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  border-color: var(--cyan);
  box-shadow: 0 0 14px var(--glow);
}

/* --------------------------------------------------------------- cartao */
.estacao .card {
  padding: 15px 14px 16px;
  height: 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s ease;
}

.estacao.ativa .card { opacity: 1; transform: none; }

.estacao .passo {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  display: block;
  margin-bottom: 9px;
}

.estacao h3 { font-size: 15px; margin-bottom: 7px; }

.estacao .motor {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  display: block;
  margin-bottom: 10px;
}

.estacao p { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* O unico vermelho desta tela: onde o custom aparece no fluxo. */
.estacao .zy { color: var(--ponto); font-weight: 700; }

/* ------------------------------------------- micro-loop do conflito (4) */
/* Duas caixas do fluxo acendendo juntas: e assim que a segregacao quebra. Uma
   pessoa que faz e aprova o mesmo pedido nao aparece em dois momentos, aparece
   no mesmo. Por isso os dois quadrados piscam em fase, e nao alternados. */
.conflito { display: flex; align-items: center; gap: 5px; margin-top: 11px; }

.conflito i {
  width: 26px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}

.conflito b {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  margin-left: 3px;
}

@keyframes conflitar {
  0%, 62%, 100% { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.03); }
  20%, 42% { border-color: var(--danger); background: rgba(255, 90, 122, 0.16); }
}

.estacao.ativa .conflito i { animation: conflitar 2.6s ease-in-out infinite; }

/* ----------------------------------------------------------- volta 6 -> 1 */
.volta {
  position: relative;
  margin-top: 20px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* A classe vai na SECAO, nao no trilho: a volta e irma do trilho, nao filha. */
.jornada.pronta .volta { opacity: 1; }

.volta svg { display: block; width: 100%; height: 46px; overflow: visible; }

.volta path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.volta span {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

/* ------------------------------------------------------------- respostas */
/* Abaixo de 1000px a esteira horizontal deixa de caber sem espremer o texto
   ate a ilegibilidade. Vira uma pilha: um cartao por estacao, o no vira marca
   de lista a esquerda e a linha animada sai de cena. */
@media (max-width: 1000px) {
  .trilho { grid-template-columns: 1fr; gap: 10px; }

  .estacao { padding-top: 0; padding-left: 30px; }

  .conector, .volta svg { display: none; }

  .no { top: 22px; left: 6px; transform: scale(0.4); }
  .estacao.ativa .no { transform: scale(1); }

  .artefato {
    position: static;
    width: auto;
    text-align: left;
    padding: 0 0 6px;
    opacity: 0;
  }

  .estacao.ativa .artefato { opacity: 1; }

  .volta { margin-top: 14px; padding-left: 30px; }
  .volta span { position: static; transform: none; display: inline-block; padding: 0; background: none; white-space: normal; }
}

@media (max-width: 640px) {
  .estacao p { font-size: 13px; }
  .estacao h3 { font-size: 16px; }
}