/**
 * Widget Línea de tiempo — VIP Travel
 *
 * Timeline vertical: una línea a la izquierda con nodos (punto), y para cada
 * hito un año, un título y una descripción. Basado en la maqueta HTML aprobada.
 *
 * El color de cada nodo/año se puede personalizar por ítem con la variable --c
 * (inline). Si no se define, hereda el color de acento del widget.
 */

.vt-timeline {
  position: relative;
  padding-left: 40px;
  --vt-tl-accent: var(--vt-accent, #5694a9);
}

/* Línea vertical (el fondo lo controla Elementor: color sólido o gradiente). */
.vt-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--vt-tl-accent);
}

/* --- Ítem --- */
.vt-tl-item {
  position: relative;
  padding-bottom: 40px;
}

.vt-tl-item:last-child {
  padding-bottom: 0;
}

/* Nodo sobre la línea. --c = color del ítem (o el acento por defecto). */
.vt-tl-item__dot {
  position: absolute;
  left: -35px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c, var(--vt-tl-accent));
  border: 3px solid var(--vt-white, #fff);
  /* Halo suave del mismo color, calculado desde --c sin necesitar un valor extra. */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--vt-tl-accent)) 22%, transparent);
}

/* --- Textos --- */
.vt-tl-item__year {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c, var(--vt-tl-accent));
  margin-bottom: 4px;
}

.vt-tl-item__title {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--vt-black, #1a1a1a);
  margin: 0 0 8px;
}

.vt-tl-item__text {
  color: var(--vt-muted, #808080);
  font-size: .95rem;
  line-height: 1.65;
  margin: 0;
}

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */
@media (max-width: 767px) {
  .vt-timeline {
    padding-left: 34px;
  }

  .vt-timeline::before {
    left: 10px;
  }

  .vt-tl-item__dot {
    left: -31px;
  }

  .vt-tl-item__title {
    font-size: 1.05rem;
  }

  .vt-tl-item {
    padding-bottom: 32px;
  }
}