:root{
  --tl-gray:#3a3a3a;
  --tl-red:#d62828;
  --tl-gap:24px;
  --tl-card-w:320px;
  --tl-radius:14px;
}

/* casca com espaço para botões */
.timeline-shell{
  position:relative;
  isolation:isolate;
  padding-inline:2.25rem;
}

.timeline-scroll{
  display:flex;
  gap:var(--tl-gap);
  overflow-x:auto;
  padding:18px 4px 28px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  position:relative;
  border-radius:var(--tl-radius);
  background:
    linear-gradient(to right, var(--tl-gray) 0%, #d65c5c 50%, var(--tl-gray) 100%) 0 46px/100% 3px no-repeat;
  outline:none;
}

/* scrollbar (webkit) */
.timeline-scroll::-webkit-scrollbar{ height:8px; }
.timeline-scroll::-webkit-scrollbar-track{ background:#e9ecef; border-radius:4px; }
.timeline-scroll::-webkit-scrollbar-thumb{ background:#b6bcc4; border-radius:4px; }
.timeline-scroll::-webkit-scrollbar-thumb:hover{ background:#9aa3ad; }

.timeline-item{
  flex:0 0 var(--tl-card-w);
  scroll-snap-align:start;
  position:relative;
  padding-top:10px;
}
.timeline-item::after{
  content:"";
  position:absolute;
  left:28px;
  top:44px;
  width:2px;
  height:28px;
  background:linear-gradient(var(--tl-red), var(--tl-gray));
  opacity:.75;
}

.timeline-icon{
  position:absolute;
  left:16px;
  top:-6px;
  background:#fff;
  color:var(--tl-red);
  border:2px solid var(--tl-red);
  font-weight:700;
  padding:.15rem .5rem;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform:translateY(-4px);
}

.timeline-content{
  background:#fff;
  border-radius:var(--tl-radius);
  padding:1rem 1rem 1.1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border:1px solid #eee;
  transition:transform .18s ease, box-shadow .18s ease;
}
.timeline-content:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.timeline-content h5{ margin:0 0 .35rem; color:#212529; font-size:1.05rem; }
.timeline-content p{ margin:0; color:#6c757d; line-height:1.45; font-size:.95rem; }

/* Botões */
.tl-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  display:grid;place-items:center;
  font-size:22px;line-height:1;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  z-index:2;
}
.tl-prev{ left:0; }
.tl-next{ right:0; }
.tl-btn:hover{ transform:translateY(-50%) scale(1.04); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.tl-btn:active{ transform:translateY(-50%) scale(.98); }
.tl-btn:focus-visible{ outline:3px solid rgba(214,40,40,.35); }

/* Responsivo */
@media (max-width:576px){
  :root{ --tl-card-w:84vw; --tl-gap:16px; }
  .timeline-icon{ left:12px; }
  .timeline-item::after{ left:24px; }
  .timeline-shell{ padding-inline:1.25rem; }
}

/* Acessibilidade & preferências */
@media (prefers-reduced-motion: reduce){
  .timeline-content, .tl-btn{ transition:none; }
}