/* Etapas animadas "Como funciona" (cs-): linha do tempo de 3 passos. Extraído de cursos-ao-vivo.html
   (que mantém a própria cópia). Usa .step / .step-icon de desco-site.css. */
/* ---------- cs: etapas ---------- */
.cs-steps{ gap:14px; position:relative; }
.cs-steps .step{
  position:relative; padding:14px 16px; border:1px solid transparent; border-radius:16px;
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.cs-s1{ --cs-c:var(--blue); --cs-c2:var(--green); --cs-soft:#E4EDFF; --cs-tint:#F3F7FF; --cs-glow:rgba(47,111,237,.34); --cs-ink:var(--blue); }
.cs-s2{ --cs-c:var(--green); --cs-c2:#E9A92D; --cs-soft:#E5F4E0; --cs-tint:#F4FAF1; --cs-glow:rgba(95,179,71,.38); --cs-ink:var(--green-dark); }
.cs-s3{ --cs-c:#E9A92D; --cs-c2:#E9A92D; --cs-soft:#FCEFD3; --cs-tint:#FFF9EB; --cs-glow:rgba(233,169,45,.42); --cs-ink:#B9791F; }
.cs-steps .step-icon{
  position:relative; z-index:2; background:var(--cs-soft); color:var(--cs-ink);
  transition:background .45s ease, color .45s ease, transform .45s ease;
}
.cs-num{ position:absolute; font:800 18px/1 "Poppins", Arial, sans-serif; transition:opacity .3s ease, transform .4s ease; }
.cs-check{ position:absolute; width:22px; height:22px; opacity:0; transform:scale(.4); transition:opacity .3s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
.cs-check path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .5s ease .15s; }
.cs-steps .step p{ color:var(--text-soft); transition:color .4s ease; }
.cs-steps .step p strong{ color:var(--cs-ink); }
/* trilho + preenchimento entre os ícones */
.cs-steps .step:not(:last-child)::before,
.cs-steps .step:not(:last-child)::after{
  content:""; position:absolute; z-index:1; left:37px; top:60px; bottom:-26px; width:3px; margin-left:-1.5px; border-radius:3px;
}
.cs-steps .step:not(:last-child)::before{ background:#DCE3F3; }
.cs-steps .step:not(:last-child)::after{
  background:linear-gradient(var(--cs-c), var(--cs-c2)); transform:scaleY(0); transform-origin:top; transition:transform .8s ease;
}
.cs-steps .step.is-done::after{ transform:scaleY(1); }
/* estados */
.cs-steps .step.is-active{ background:var(--cs-tint); border-color:var(--cs-glow); box-shadow:0 14px 30px -18px var(--cs-glow); transition-delay:.45s; }
.cs-steps .step.is-active p{ color:var(--ink); transition-delay:.45s; }
.cs-steps .step.is-active .step-icon,
.cs-steps .step.is-done .step-icon{ background:var(--cs-c); color:#fff; }
.cs-steps .step.is-active .step-icon{ transform:scale(1.07); transition-delay:.45s; animation:cs-pulse 1.7s ease-out .5s infinite; }
.cs-steps .step.is-done .cs-num{ opacity:0; transform:scale(.4) rotate(-45deg); }
.cs-steps .step.is-done .cs-check{ opacity:1; transform:none; }
.cs-steps .step.is-done .cs-check path{ stroke-dashoffset:0; }
.cs-steps.is-complete .step{ background:var(--cs-tint); border-color:var(--cs-glow); }
.cs-steps:not(.is-live) .step-icon{ animation-play-state:paused; }
@keyframes cs-pulse{ 0%{ box-shadow:0 0 0 0 var(--cs-glow); } 75%,100%{ box-shadow:0 0 0 13px transparent; } }


/* erro inline dos formulários de lead */
.cs-ferr{ margin-top:10px; padding:10px 12px; border-radius:10px; background:#FDECEA; border:1px solid #F3B7B1; color:#B23A2F; font-size:13px; line-height:1.45; font-weight:700; }
.cs-ferr a{ color:inherit; text-decoration:underline; }
.cs-ferr[hidden]{ display:none; }
button[disabled]{ opacity:.75; cursor:progress; }

/* ---------- responsivo ---------- */
@media (max-width:560px){
  .cs-steps .step{ padding:12px 10px; gap:12px; }
  .cs-steps .step-icon{ width:36px; height:36px; border-radius:11px; }
  .cs-num{ font-size:16px; }
  .cs-steps .step:not(:last-child)::before,
  .cs-steps .step:not(:last-child)::after{ left:28px; top:52px; bottom:-22px; }
  .cs-steps .step p{ font-size:15.5px; }
}

/* ---------- movimento reduzido: tudo estático e destacado ---------- */
@media (prefers-reduced-motion: reduce){
  .cs-steps .step{ background:var(--cs-tint); border-color:var(--cs-glow); }
  .cs-steps .step .step-icon{ background:var(--cs-c); color:#fff; }
  .cs-steps .step:not(:last-child)::after{ transform:none; }
  .cs-steps .step p{ color:var(--ink); }
  .cs-steps *, .cs-steps *::before, .cs-steps *::after{ animation:none !important; transition:none !important; }
}