/* Seção "Como funciona" (id como). O fio do hero vira o caminho: um ponto por passo, desenhado com a rolagem. */

.co-secao{
  --co-num-apagado:#737991;      /* número ainda não alcançado (3,5:1 sobre a parede; só em corpo grande) */
  --co-x:5.25rem;                /* onde passa o fio */
  --co-rec:7.75rem;              /* onde começa o texto do passo */
}
.co-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70vmax 50vmax at 0% 0% in oklab,rgb(246 246 243 / .9),rgb(246 246 243 / 0) 70%),
    radial-gradient(60vmax 50vmax at 100% 100% in oklab,rgb(201 204 217 / .75),rgb(201 204 217 / 0) 70%);
}

.co-grade{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);column-gap:clamp(2rem,6vw,6rem);align-items:start}
.co-cabeca{position:sticky;top:clamp(4rem,14vh,7.5rem)}
.co-abre{margin-top:1.5rem;max-width:22em}
.co-ecos{display:grid;gap:1.25rem;margin-top:clamp(2rem,4vw,3.25rem);padding-top:1.5rem;border-top:1px solid var(--fio);max-width:24rem}
.co-eco blockquote{font-family:var(--serifa);font-style:italic;font-size:1.125rem;line-height:1.3;color:var(--tinta)}
.co-eco figcaption{margin-top:.3rem;font-size:.875rem;color:var(--tinta-suave)}

/* a trilha */
.co-trilha{position:relative}
.co-linha{position:absolute;left:var(--co-x);top:1rem;bottom:1rem;width:1px;background:var(--fio)}
.co-linha::after{content:"";position:absolute;inset:0 -0.5px;background:var(--vinho);transform-origin:top;transform:scaleY(var(--co-p,1));transition:transform .35s linear}
.co-passos{display:grid;gap:clamp(3rem,5.5vw,4.75rem)}
.co-passo{position:relative;padding-left:var(--co-rec)}
.co-num{position:absolute;left:0;top:-.08em;width:3.6rem;text-align:right;font-family:var(--serifa);font-size:clamp(3rem,5vw,4.5rem);line-height:.8;color:var(--tinta);transition:color .8s var(--suave)}
.co-nome{position:relative;font-family:var(--serifa);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.008em}
.co-ponto{position:absolute;left:calc(var(--co-x) - var(--co-rec) - 4px);top:calc(.54em - 4.5px);width:9px;height:9px;border-radius:50%;background:var(--vinho);box-shadow:0 0 0 5px var(--parede-1);transition:background-color .5s var(--suave),transform .6s var(--suave)}
.co-passo .wf-texto{margin-top:.7rem;max-width:30rem}
/* as frases dele: serifa itálica em tinta calma, sem traço ao lado (o único fio é o do caminho); só a última, a chegada, vem em vinho */
.co-dele{margin-top:1rem;font-family:var(--serifa);font-style:italic;font-size:clamp(1.1875rem,1.5vw,1.3125rem);line-height:1.32;color:var(--tinta-suave);max-width:30rem;text-wrap:pretty}
.co-dele + .co-dele{margin-top:.8rem}
.co-chegada{margin-top:1.2rem;font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.14;letter-spacing:-.006em;color:var(--vinho);max-width:33rem;text-wrap:balance}
.co-ultimo .co-ponto{width:13px;height:13px;left:calc(var(--co-x) - var(--co-rec) - 6px);top:calc(.54em - 6.5px)}

/* o ponto acende uma vez quando o fio chega nele */
.co-ponto::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--vinho);opacity:0}
.co-viva .co-on .co-ponto::after{animation:co-acende 1.1s var(--suave) both}
@keyframes co-acende{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}

/* estado antes de o fio chegar (só com JS) */
.co-viva .co-passo:not(.co-on) .co-num{color:var(--co-num-apagado)}
.co-viva .co-passo:not(.co-on) .co-ponto{background:var(--parede-3);transform:scale(.66)}

/* nota à parte: um desvio tracejado do caminho, para o caso de haver liminar */
.co-ramo{display:none;position:absolute;left:var(--co-x);width:0;border-left:1px dashed var(--tinta-apagada);opacity:.55}
.co-viva .co-ramo{display:block}
.co-nota{position:relative;margin:clamp(3rem,5.5vw,4.75rem) 0 0 var(--co-rec);padding:1.3rem 1.5rem 1.45rem;border:1px solid var(--fio);border-radius:var(--raio);max-width:33rem;background:rgb(246 246 243 / .6)}
.co-nota::before{content:"";position:absolute;right:100%;top:1.95rem;width:calc(var(--co-rec) - var(--co-x) - 6px);border-top:1px dashed var(--tinta-apagada);opacity:.55}
.co-ponto-nota{position:absolute;left:calc(var(--co-x) - var(--co-rec) - 5px);top:calc(1.95rem - 4px);width:9px;height:9px;border-radius:50%;border:1px solid var(--tinta-apagada);background:var(--parede-1)}
.co-nota-nome{font-family:var(--sans);font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--tinta)}
.co-nota .co-dele{font-size:clamp(1.0625rem,1.3vw,1.1875rem);margin-top:.7rem}

/* o botão flutuante da base sai de cena enquanto o botão desta seção está na tela (dois iguais, um sobre o outro) */
.wf-zap.co-zap-fora{opacity:0;transform:translateY(1rem);pointer-events:none}

/* fecho */
.co-fim{margin:clamp(3rem,5.5vw,4.75rem) 0 0 var(--co-rec);padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--fio);max-width:38rem;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.4rem 1.75rem}
.co-chama{grid-column:1 / -1;font-family:var(--serifa);font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.008em;text-wrap:balance}
.co-bt{min-height:56px;padding:0 1.75rem;font-size:1.0625rem;font-weight:600}
.co-aviso{font-size:.875rem;line-height:1.5;color:var(--tinta-suave);max-width:21rem}

@media (max-width:900px){
  .co-secao{--co-x:3px;--co-rec:1.75rem}
  .co-grade{grid-template-columns:minmax(0,1fr)}
  .co-cabeca{position:static}
  .co-ecos{max-width:none}
  .co-corpo{margin-top:3rem}
  .co-num{position:static;display:block;width:auto;text-align:left;font-size:2.75rem;line-height:.9;margin-bottom:.3rem}
  .co-fim{margin-left:0;max-width:none}
  .co-nota{padding:1.1rem 1.15rem 1.25rem}
  .co-bt{width:100%}
  .co-fim{grid-template-columns:minmax(0,1fr)}
  .co-aviso{max-width:none}
}
@media (min-width:601px) and (max-width:900px){
  .co-ecos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}
  .co-bt{width:auto}
  .co-fim{grid-template-columns:auto minmax(0,1fr)}
}
@media (min-width:901px) and (max-width:1180px){
  .co-fim{grid-template-columns:minmax(0,1fr);justify-items:start}
  .co-aviso{max-width:24rem}
}