/* Como funciona: trilho verde ligando os passos. Estado final = trilho cheio e pontos verdes. */

.ns-process__titles { display: grid; gap: var(--ns-s-6); }

.ns-process__body { position: relative; --dot: 3.25rem; --row-gap: clamp(2rem, 4vw, 3rem); }
.ns-process__steps { display: grid; gap: var(--row-gap); position: relative; }
.ns-process__step { position: relative; display: grid; gap: var(--ns-s-6); }

.ns-process__dot {
  position: relative; z-index: 1;
  display: grid; place-items: center; inline-size: var(--dot); block-size: var(--dot); border-radius: 50%;
  background: var(--ns-green); color: var(--ns-night); border: 1px solid var(--ns-green);
  font-family: var(--ns-font-display); font-size: 1.25rem; font-weight: 600;
  box-shadow: 0 0 0 6px var(--ns-paper);
}
.ns-process__copy { display: grid; gap: var(--ns-s-3); }
.ns-process__copy .ns-h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; }
.ns-process__copy p { color: var(--ns-text-2); max-inline-size: 34ch; }

/* Trilho: base cinza + preenchimento verde (o JS anima o preenchimento, nunca o CSS esconde). */
.ns-process__track, .ns-process__seg { position: absolute; background: var(--ns-line); border-radius: 4px; overflow: hidden; }
.ns-process__fill { position: absolute; inset: 0; background: var(--ns-green); }

/* Celular/tablet: trilho vertical à esquerda */
@media (max-width: 899px) {
  .ns-process__step { grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
  .ns-process__copy { padding-block-start: 0.6rem; }
  /* Um segmento por passo: do ponto atual até o próximo ponto (atravessa o gap da lista). */
  .ns-process__track { display: none; }
  .ns-process__seg { inset-inline-start: calc(var(--dot) / 2 - 2px); inline-size: 4px; inset-block: var(--dot) calc(-1 * var(--row-gap)); border-radius: 0; }
  .ns-process__fill { transform-origin: top center; }
}

/* Desktop: trilho horizontal na altura dos pontos */
@media (min-width: 900px) {
  .ns-process__body { --gap: clamp(2rem, 4vw, 4rem); }
  .ns-process__steps { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: var(--gap); }
  /* Do centro do 1º ponto ao centro do último (N colunas). */
  .ns-process__track { inset-block-start: calc(var(--dot) / 2 - 2px); block-size: 4px; inset-inline: calc(var(--dot) / 2) calc((100% - (var(--n, 3) - 1) * var(--gap)) / var(--n, 3) - var(--dot) / 2); }
  .ns-process__seg { display: none; }
  .ns-process__fill { transform-origin: left center; }
}

/* Fecho: "Já tem contador?" + botão do pop-up. */
.ns-process__switch {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-block-start: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--ns-r-lg);
  background: var(--ns-white); border: 1px solid var(--ns-line);
}
.ns-process__switch p { margin: 0; max-inline-size: 52ch; font-family: var(--ns-font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; color: var(--ns-text); }
@media (max-width: 767px) { .ns-process__switch .ns-btn { inline-size: 100%; } }