.timeline {
    position: relative;
    margin: 2rem 0;
    padding-left: 30px;
    border-left: 3px solid #0d6efd; /* línea vertical azul */
  }
  
  .timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 10px;
  }
  
  .timeline-date {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
  }
  
  .timeline-content {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
  }
  
  /* circulito decorativo en la línea */
  .timeline-item::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 10px;
    width: 14px;
    height: 14px;
    background-color: #0d6efd;
    border-radius: 50%;
    border: 3px solid #fff;
  }
  
  /* Fade-in animation */
  .fade-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
  }
  
  @keyframes fadeInUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Estilo para la primera publicación si querés destacarla */
  .highlight .timeline-content {
    background-color: #e7f1ff;
    border-left: 4px solid #0d6efd;
  }