/* "Do planejamento aos resultados": linha do tempo em cinco passos. Uma linha lilás pontilhada liga os
   marcadores; quando o tempo avança, um trecho roxo percorre até o próximo passo e o marcador pisca (anel).
   Sem JavaScript ou com movimento reduzido todos os passos aparecem já alcançados. Só transform e opacity. */
.how .how-steps{--dot:42px;--g:clamp(14px,2vw,30px);list-style:none;margin:clamp(46px,5vw,76px) 0 clamp(38px,4vw,60px);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);position:relative}
.how .how-step{position:relative;margin:0;min-width:0;transition:opacity .5s ease}
.how .how-step__dot{position:relative;z-index:2;display:grid;place-items:center;width:var(--dot);height:var(--dot);border-radius:50%;background:#d4f542;color:#1a1038;font-size:13px;font-weight:800;letter-spacing:.03em;box-shadow:0 0 0 7px #f8f7fb,0 0 0 8px #c3e232,0 8px 18px #7d9a0f40;transition:background .45s,color .45s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.how .how-step__dot b{font:inherit}
.how .how-step__dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #4c1d95;opacity:0;pointer-events:none}
.how .how-step.is-pulse .how-step__dot{transform:scale(1.14)}
.how .how-step.is-pulse .how-step__dot::after{animation:how-ping .6s ease-out 2}
@keyframes how-ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.5);opacity:0}}

/* Conector: tracejado lilás até o próximo marcador e, por cima, o trecho roxo que o percorre */
.how .how-step:not(:last-child)::before,.how .how-step:not(:last-child)::after{content:"";position:absolute;z-index:0;top:calc(var(--dot)/2 - 1px);left:calc(var(--dot)/2);width:calc(100% + var(--g));height:2px;border-radius:2px}
.how .how-step:not(:last-child)::before{background:repeating-linear-gradient(90deg,#cdbcf0 0 6px,transparent 6px 12px)}
.how .how-step:not(:last-child)::after{background:linear-gradient(90deg,#7c3aed,#a855f7);transform-origin:left center;transition:transform .4s cubic-bezier(.4,0,.2,1)}

.how .how-step__icon{display:grid;place-items:center;width:clamp(54px,4.6vw,66px);height:clamp(54px,4.6vw,66px);margin:clamp(20px,2.2vw,30px) 0 clamp(14px,1.5vw,20px);border-radius:20px;background:#ece5ff;color:#6d28d9;transition:background .45s,color .45s,transform .45s cubic-bezier(.3,1.4,.5,1),box-shadow .45s}
.how .how-step__icon svg{display:block;width:56%;height:56%;fill:none;stroke:none}
.how .how-step h3{margin:0 0 9px;font-size:clamp(18px,1.55vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#150f33;transition:color .4s}
.how .how-step p{margin:0;font-size:clamp(14.5px,1.15vw,17px);line-height:1.5;color:#5a5470}

/* Modo vivo (JS): passos ainda não alcançados ficam suaves; o ativo ganha destaque */
.how .how-steps--live .how-step:not(.is-reached){opacity:.4}
.how .how-steps--live .how-step:not(.is-reached) .how-step__dot{background:#e6dcfb;color:#5a22aa;box-shadow:0 0 0 7px #f8f7fb}
.how .how-steps--live .how-step:not(:last-child)::after{transform:scaleX(0)}
.how .how-steps--live .how-step.is-linked:not(:last-child)::after{transform:scaleX(1)}
.how .how-steps--live .how-step.is-active .how-step__icon{background:linear-gradient(135deg,#7c3aed,#4c1d95);color:#fff;transform:translateY(-4px);box-shadow:0 16px 30px #6d28d940}
.how .how-steps--live .how-step.is-active h3{color:#5b21b6}


/* Marcas de impacto no canto do marcador (estilo rabisco): aparecem com um pulo quando o passo é alcançado */
.how .how-step__burst{position:absolute;right:-17px;top:-17px;width:30px;height:30px;color:#4c1d95;fill:none;stroke:none;overflow:visible;pointer-events:none;transform-origin:20% 80%}
.how .how-steps--live .how-step:not(.is-reached) .how-step__burst{opacity:0;transform:scale(.3)}
.how .how-step.is-pulse .how-step__burst{animation:how-burst .3s cubic-bezier(.2,1.5,.4,1) both}
@keyframes how-burst{0%{opacity:0;transform:scale(.2) rotate(-14deg)}60%{opacity:1;transform:scale(1.18) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* Setinha no meio de cada trecho */
.how .how-step__chev{position:absolute;z-index:1;top:calc(var(--dot)/2 - 5px);left:calc(var(--dot)/2 + (100% + var(--g))/2 - 5px);width:10px;height:10px;border-top:2.5px solid #b9a2ee;border-right:2.5px solid #b9a2ee;transform:rotate(45deg);transition:border-color .5s;pointer-events:none}
.how .how-step.is-linked .how-step__chev{border-color:#fff;mix-blend-mode:normal}

/* Card final maior */
.how .how-note{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,28px);margin:0;padding:clamp(26px,3.4vw,46px) clamp(22px,3vw,50px);border:1px solid #d8c9f5;border-radius:26px;background:radial-gradient(ellipse 50% 160% at 0% 50%,#d4f54240,transparent 62%),linear-gradient(135deg,#f1eaff,#e4d9fb);box-shadow:0 20px 48px #5b21b61f;color:#2a1766;font-family:Caveat,cursive;font-size:clamp(28px,3.4vw,46px);font-weight:400;font-style:normal;letter-spacing:0;line-height:1.1;text-align:left}
.how .how-note__icon{display:grid;place-items:center;flex:none;width:clamp(48px,4.6vw,66px);height:clamp(48px,4.6vw,66px);border-radius:20px;background:#fff;color:#6d28d9;box-shadow:0 10px 22px #5b21b626}
.how .how-note__icon svg{display:block;width:58%;height:58%;fill:none;stroke:none}

@media(max-width:900px){
  .how .how-steps{grid-template-columns:1fr;gap:0}
  .how .how-step{padding:0 0 clamp(26px,5vw,36px) calc(var(--dot) + 26px);min-height:calc(var(--dot) + 50px)}
  .how .how-step__dot{position:absolute;left:0;top:0}
  .how .how-step:not(:last-child)::before,.how .how-step:not(:last-child)::after{top:calc(var(--dot)/2);left:calc(var(--dot)/2 - 1px);width:2px;height:100%}
  .how .how-step:not(:last-child)::before{background:repeating-linear-gradient(180deg,#cdbcf0 0 6px,transparent 6px 12px)}
  .how .how-step:not(:last-child)::after{background:linear-gradient(180deg,#7c3aed,#a855f7);transform-origin:center top}
  .how .how-steps--live .how-step:not(:last-child)::after{transform:scaleY(0)}
  .how .how-steps--live .how-step.is-linked:not(:last-child)::after{transform:scaleY(1)}
  .how .how-step__icon{width:52px;height:52px;margin:2px 0 12px;border-radius:16px}
  .how .how-step__chev{top:calc(var(--dot)/2 + 50% - 5px);left:calc(var(--dot)/2 - 5px);transform:rotate(135deg)}
}
@media(max-width:520px){.how .how-note{flex-direction:column;text-align:center;padding:26px 20px}}
@media(prefers-reduced-motion:reduce){.how .how-step,.how .how-step__dot,.how .how-step__icon,.how .how-step:not(:last-child)::after{transition:none}.how .how-step.is-pulse .how-step__dot::after{animation:none}}