.cf-tl-section { background:#F5F7FA; padding:60px 20px; font-family:'Poppins',sans-serif; }
.cf-tl { position:relative; max-width:1100px; margin:0 auto; padding-left:56px; }
.cf-tl-line { position:absolute; left:13.5px; width:3px; background:#D1D5DB; border-radius:3px; }
.cf-tl-progress { width:100%; height:0; background:#111; border-radius:3px; }
.cf-tl-item { position:relative; margin-bottom:24px; }
.cf-tl-item:last-child { margin-bottom:0; }
.cf-tl-dot {
  position:absolute; left:-56px; top:16px; width:30px; height:30px; border-radius:50%;
  background:#fff; border:1px solid #E5E7EB; box-shadow:0 2px 6px rgba(0,0,0,.12);
  box-sizing:border-box; z-index:2; transition:all .3s ease;
}
.cf-tl-dot::after {
  content:""; position:absolute; top:50%; left:50%; width:10px; height:10px;
  margin:-5px 0 0 -5px; border-radius:50%; background:#9CA3AF; transition:background .3s ease;
}
.cf-tl-item.active .cf-tl-dot { border-color:#111; }
.cf-tl-item.active .cf-tl-dot::after { background:#111; }
.cf-tl-card { background:#fff; border-radius:8px; padding:22px 28px; box-shadow:0 2px 12px rgba(0,0,0,.06); transition: all 0.3s ease;}
.cf-tl-item.active .cf-tl-card { border-color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.cf-tl-card h3 { margin:0 0 8px; font-size:18px; font-weight:700; color:#1F2937; }
.cf-tl-card p { margin:0 0 10px; font-size:13px; line-height:1.6; color:#6B7280; }
.cf-tl-card p:last-child { margin-bottom:0; }
.cf-tl-pager { display:none; }

/* ===== MOBILE: CARROSSEL ===== */
@media (max-width:768px) {
  .cf-tl-section { padding:40px 0; }
  .cf-tl {
    display:flex; gap:16px; padding:4px 20px 12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    scroll-padding-left:20px;
  }
  .cf-tl::-webkit-scrollbar { display:none; }
  .cf-tl-line, .cf-tl-dot { display:none; }
  .cf-tl-item {
    flex:0 0 85%; margin:0; scroll-snap-align:start; display:flex;
  }
  .cf-tl-card { width:100%; padding:22px 20px; }
  .cf-tl-card h3 { font-size:17px; }
  .cf-tl-pager { display:flex; justify-content:center; gap:8px; margin-top:16px; }
  .cf-tl-pager button {
    width:8px; height:8px; padding:0; border:0; border-radius:8px;
    background:#D1D5DB; cursor:pointer; transition:all .3s ease;
  }
  .cf-tl-pager button.on { width:24px; background:#111; }
}