@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

.altl-root{
  --altl-accent:#A8CE3E; --altl-accent-2:#BCDD55; --altl-teal:#4B8199; --altl-teal-2:#5A97AE;
  --altl-rail:rgba(255,255,255,.14); --altl-dotbg:#0E1020; --altl-ink:#EAF0F6; --altl-muted:#93A2B8;
  --altl-fill-dur:1.2s;
  font-family:'Sora',system-ui,-apple-system,sans-serif;
}

/* cabeçalho opcional */
.altl-head{max-width:760px; margin:0 0 48px}
.altl-eyebrow{display:inline-flex; align-items:center; gap:.6rem; margin:0 0 12px;
  font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--altl-accent)}
.altl-eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--altl-accent)}
.altl-htitle{font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--altl-ink); font-size:clamp(1.7rem,3.6vw,2.6rem); margin:0 0 12px}
.altl-lead{color:var(--altl-muted); font-size:1.05rem; line-height:1.6; margin:0}

/* trilha */
.altl-track{position:relative; display:grid; grid-template-columns:repeat(var(--n,4),1fr); gap:24px}
.altl-rail,.altl-fill{position:absolute; top:7px; left:8px; right:8px; height:2px; border-radius:2px}
.altl-rail{background:var(--altl-rail)}
.altl-fill{background:linear-gradient(90deg,var(--altl-teal),var(--altl-accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--altl-fill-dur) cubic-bezier(.16,.84,.34,1)}
.altl-track.is-in .altl-fill{transform:scaleX(1)}

/* item */
.altl-item{position:relative; padding-top:34px;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease var(--d,0s), transform .6s cubic-bezier(.16,.84,.34,1) var(--d,0s)}
.altl-track.is-in .altl-item{opacity:1; transform:none}

/* marco (dot) */
.altl-dot{position:absolute; top:0; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--altl-dotbg); border:2px solid var(--altl-teal);
  transition:border-color .35s ease var(--d,0s), box-shadow .35s ease var(--d,0s), background .35s ease var(--d,0s)}
.altl-track.is-in .altl-dot{border-color:var(--altl-accent); box-shadow:0 0 0 5px rgba(168,206,62,.14)}

/* card */
.altl-toprow{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.altl-ico{display:grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:rgba(75,129,153,.16); flex:0 0 auto}
.altl-ico svg{width:15px; height:15px; fill:none; stroke:var(--altl-teal-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.altl-step{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--altl-teal-2); font-weight:600}
.altl-title{font-size:1.2rem; color:var(--altl-ink); font-weight:700; margin:0 0 8px; line-height:1.2}
.altl-desc{font-size:.92rem; color:var(--altl-muted); line-height:1.55; margin:0}

/* -------- mobile: linha vertical -------- */
@media (max-width:768px){
  .altl-track{grid-template-columns:1fr; gap:0}
  .altl-rail,.altl-fill{top:8px; bottom:8px; left:7px; right:auto; width:2px; height:auto}
  .altl-fill{transform:scaleY(0); transform-origin:top}
  .altl-track.is-in .altl-fill{transform:scaleY(1)}
  .altl-item{padding-top:0; padding-left:34px; padding-bottom:30px}
  .altl-item:last-child{padding-bottom:0}
  .altl-dot{top:2px; left:0}
}

/* -------- movimento reduzido -------- */
@media (prefers-reduced-motion:reduce){
  .altl-fill{transition:none; transform:scaleX(1)}
  .altl-item{transition:none; opacity:1; transform:none}
  .altl-dot{transition:none; border-color:var(--altl-accent)}
}
@media (prefers-reduced-motion:reduce) and (max-width:768px){
  .altl-fill{transform:scaleY(1)}
}