/* 01 · A consulta (co-) — a constelação do roteiro desce pela página, onze nós */
.co-consulta{--co-calha:clamp(84px,9vw,132px)}
/* malha: começa na noite azul (em cima) e chega à luz do consultório (embaixo, atrás do Plano) */
.co-m3{left:-12%;top:-6%;width:52vw;height:52vw;max-width:720px}
.co-m2{left:-22%;top:34%;width:60vw;height:44%;max-width:820px}
.co-m1{right:-14%;bottom:-6%;width:66vw;height:38%;max-width:900px;max-height:900px}

.co-grade{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.co-cabeca{position:sticky;top:2.5rem}
.co-cabeca .wf-t1{max-width:13ch;margin-bottom:1.4rem}
.co-abre{max-width:44ch}
.co-cit{margin-top:1.8rem}

/* indicador: em que etapa a rolagem está */
.co-agora{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:1rem;row-gap:1rem;margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--wf-marfim-14);max-width:26rem;font-family:var(--wf-fonte-mono)}
.co-agora__n{font-size:clamp(3.2rem,2rem + 3vw,4.6rem);line-height:.82;letter-spacing:-.04em;color:var(--wf-marfim);font-variant-numeric:tabular-nums}
.co-agora__lado{display:flex;flex-direction:column;gap:.2rem;padding-bottom:.1rem}
.co-agora__de{font-size:var(--wf-mono-xs);letter-spacing:.06em;color:var(--wf-marfim-60);text-transform:uppercase}
.co-agora__nome{font-size:var(--wf-apoio);letter-spacing:.02em;color:var(--wf-marfim)}
.co-agora__pontos{grid-column:1 / -1;display:flex;gap:.7rem;align-items:center}
.co-agora__pontos i{width:5px;height:5px;border-radius:50%;background:var(--wf-marfim-35);transition:background-color .5s var(--wf-curva),transform .5s var(--wf-curva)}
.co-agora__pontos i.co-on{background:var(--wf-marfim)}
.co-agora__pontos i.co-on:last-child{background:var(--wf-luz)}

/* a trilha: calha com a constelação à esquerda, texto alinhado à direita dela */
.co-trilha{position:relative}
.co-ceu{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.co-ceu__base{fill:none;stroke:var(--wf-marfim);stroke-opacity:.35;stroke-width:1}
.co-ceu__aceso{fill:none;stroke:var(--wf-marfim);stroke-opacity:.95;stroke-width:1;transition:stroke-dashoffset .6s var(--wf-curva)}
.co-etapa{position:relative;padding:0 0 3.4rem calc(var(--co-calha) + 3rem)}
.co-etapa--fim{padding-bottom:0}
.co-no{position:absolute;left:calc(var(--co-x,0) * var(--co-calha));top:.5rem;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--wf-marfim);transition:background-color .6s var(--wf-curva),transform .6s var(--wf-curva)}
.co-no::after{content:"";position:absolute;inset:-11px;border-radius:50%;background:radial-gradient(closest-side,var(--wf-marfim-35),transparent);opacity:0;transition:opacity .7s var(--wf-curva)}
.co-rotulo{font-family:var(--wf-fonte-titulo);font-weight:600;font-size:var(--wf-t2);line-height:1.15;letter-spacing:-.012em;color:var(--wf-marfim)}
/* o número anda colado ao nó, na calha, como os rótulos do hero */
.co-rotulo__n{position:absolute;left:calc(var(--co-x,0) * var(--co-calha) + 13px);top:.5rem;line-height:7px;font-family:var(--wf-fonte-mono);font-weight:400;font-size:var(--wf-mono-xs);letter-spacing:.06em;color:var(--wf-marfim-60);transition:color .6s var(--wf-curva)}
.co-frase{margin-top:.5rem;font-size:1.05rem;line-height:1.5;color:var(--wf-marfim-80);max-width:38ch}
.co-prova{margin-top:1.1rem}

/* 03–07: a varredura da vida em volta da queixa, em linhas compactas */
.co-etapa--breve{padding-bottom:1.5rem;display:grid;grid-template-columns:8.6rem minmax(0,1fr);column-gap:1rem;align-items:baseline}
.co-etapa--breve .co-rotulo{font-size:1.08rem;font-weight:600}
.co-etapa--breve .co-frase{margin-top:0;font-size:1rem}
.co-etapa--breve .co-prova{grid-column:2;margin-top:.8rem}
.co-etapa--breve + .co-etapa:not(.co-etapa--breve){margin-top:1.9rem}
.co-etapa:not(.co-etapa--breve) + .co-etapa--breve{margin-top:-.6rem}

/* o último nó é a luz do consultório */
.co-etapa--fim .co-rotulo__n{color:color-mix(in oklch,var(--wf-luz) 85%,var(--wf-marfim))}

/* fecho: dentro da trilha, depois do Plano, com o fio âmbar */
.co-fecho{margin-top:3.6rem;padding-left:calc(var(--co-calha) + 3rem)}
.co-fecho__cit{border-left-color:color-mix(in oklch,var(--wf-luz) 80%,var(--wf-marfim));padding-left:1.4rem}
.co-fecho__frase{font-size:var(--wf-t2);line-height:1.25;letter-spacing:-.01em;max-width:24ch}
.co-fecho__acao{margin-top:1.8rem;padding-left:1.4rem}
.co-fecho__acao .wf-link{display:inline-block;padding-top:.6rem;padding-bottom:.35rem}

/* pílula do celular: em que etapa a rolagem está */
.co-barra{display:none}

/* gesto: com o script, os nós acendem conforme a rolagem */
.co-js .co-rotulo,.co-js .co-prova .wf-cit__frase{transition:color .7s var(--wf-curva)}
.co-js .co-etapa:not(.co-passou):not(.co-ativa) .co-rotulo{color:var(--wf-marfim-80)}
.co-js .co-etapa:not(.co-passou):not(.co-ativa) .co-prova .wf-cit__frase{color:var(--wf-marfim-80)}
.co-js .co-etapa.co-ativa .co-no::after{opacity:1}
.co-js .co-etapa.co-ativa .co-no{transform:scale(1.25)}
.co-js .co-etapa.co-ativa .co-rotulo__n{color:var(--wf-marfim)}
.co-js .co-etapa--fim.co-ativa .co-no{background:color-mix(in oklch,var(--wf-luz) 70%,var(--wf-marfim))}
.co-js .co-etapa--fim.co-ativa .co-no::after{inset:-16px;background:radial-gradient(closest-side,color-mix(in oklch,var(--wf-luz) 70%,transparent),transparent)}

@media (max-width:899px){
  .co-consulta{--co-calha:0px}
  .co-grade{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .co-cabeca{position:static}
  .co-agora{display:none}
  .co-no{width:6px;height:6px;margin-left:0;left:0;top:.55rem}
  .co-etapa{padding-left:1.7rem;padding-bottom:2.4rem}
  .co-rotulo{display:flex;align-items:baseline;gap:.65rem}
  .co-rotulo__n{position:static;line-height:inherit;flex:none}
  .co-etapa--breve{display:block;padding-bottom:1.3rem}
  .co-etapa--breve .co-no{top:.5rem}
  .co-etapa--breve .co-frase{margin-top:.25rem}
  .co-etapa--breve + .co-etapa:not(.co-etapa--breve){margin-top:1.1rem}
  .co-etapa:not(.co-etapa--breve) + .co-etapa--breve{margin-top:-.3rem}
  .co-fecho{padding-left:1.7rem;margin-top:2.8rem}
  .co-fecho__cit,.co-fecho__acao{padding-left:1rem}
  .co-js .co-barra{
    display:flex;align-items:baseline;gap:.6rem;position:sticky;top:.6rem;z-index:3;
    width:fit-content;margin:0 0 1.6rem 1.7rem;padding:.42rem .85rem;border-radius:var(--wf-raio);
    border:1px solid var(--wf-marfim-14);
    background:color-mix(in oklab,var(--wf-noite-3) 84%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);letter-spacing:.02em;color:var(--wf-marfim);
  }
  .co-barra__n,.co-barra__de{font-size:var(--wf-mono-xs);color:var(--wf-marfim-60)}
}