.dta-timeline {
  position: relative;
  margin: 40px auto;
}

/* ---- Verticale ---- */
.dta-vertical {
  padding-left: 40px;
  border-left: 3px solid #e6e6e6;
}
.dta-vertical .dta-item {
  position: relative;
  margin-bottom: 34px;
  opacity: 0;
  transform: translateY(24px);
  transition: all .6s ease-out;
}
.dta-vertical .dta-item.visible { opacity: 1; transform: none; }
.dta-vertical .dta-dot {
  position: absolute;
  left: -12px;
  top: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #fff; line-height: 22px; text-align:center; font-size:13px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.dta-vertical .dta-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.dta-title {
  margin: 0 0 6px;
  font-size: 1.15rem; font-weight: 600; color: #023194;
}
.dta-desc { color:#555; line-height:1.6; }

/* ---- Orizzontale ---- */
.dta-horizontal {
  border-top: 3px solid #e6e6e6;
  padding-top: 40px;
  display: flex; gap: 36px; overflow-x: auto;
  scroll-snap-type: x proximity;
}
.dta-horizontal .dta-item {
  position: relative;
  flex: 0 0 280px;
  scroll-snap-align: start;
  opacity: 0; transform: translateY(24px);
  transition: all .6s ease-out;
}
.dta-horizontal .dta-item.visible { opacity: 1; transform: none; }
.dta-horizontal .dta-dot {
  position: absolute;
  top: -32px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  color:#fff; text-align:center; line-height:22px; font-size:13px;
  border:3px solid #fff; box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.dta-horizontal .dta-card {
  background:#fff; border-radius:12px; padding:16px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.dta-timeline { position: relative; margin: 40px auto; }
.dta-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; color: #939393; }
.dta-desc { color: #555; line-height: 1.6; }
.dta-date { display:inline-block; background:#939393; color:#fff; padding:3px 8px; border-radius:6px; font-size:.8rem; margin-bottom:6px; }

/* ---- verticale ---- */
.dta-vertical { padding-left: 40px; border-left: 3px solid #e6e6e6; }
.dta-vertical .dta-item { position:relative; margin-bottom:32px; opacity:0; transform:translateY(24px); transition:all .6s ease; }
.dta-vertical .dta-item.visible { opacity:1; transform:none; }
.dta-vertical .dta-dot {
  position:absolute; left:-12px; top:10px;
  width:22px; height:22px; border-radius:50%;
  color:#fff; text-align:center; line-height:22px; font-size:13px;
  border:3px solid #fff; box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.dta-vertical .dta-card {
  background:#fff; border-radius:12px; padding:11px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* alternato */
.dta-alt .dta-item:nth-child(even) .dta-card { margin-left:40px; }
.dta-alt .dta-item:nth-child(odd) .dta-card { margin-right:40px; }

/* ---- orizzontale ---- */
.dta-horizontal {
  border-top:3px solid #e6e6e6; padding-top:40px;
  display:flex; gap:36px; overflow-x:auto; scroll-snap-type:x proximity;
}
.dta-horizontal .dta-item { position:relative; flex:0 0 280px; scroll-snap-align:start; opacity:0; transform:translateY(24px); transition:all .6s ease; }
.dta-horizontal .dta-item.visible { opacity:1; transform:none; }
.dta-horizontal .dta-dot { position:absolute; top:-32px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; color:#fff; text-align:center; line-height:22px; font-size:13px; border:3px solid #fff; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.dta-horizontal .dta-card { background:#fff; border-radius:12px; padding:16px 18px; box-shadow:0 6px 18px rgba(0,0,0,.08); }

/* animazioni */
.dta-anim-fade .dta-item.visible { opacity:1; transform:none; }
.dta-anim-slide-left .dta-item { transform:translateX(-40px); }
.dta-anim-slide-right .dta-item { transform:translateX(40px); }
.dta-anim-slide-left .dta-item.visible,
.dta-anim-slide-right .dta-item.visible { transform:none; opacity:1; }