/* === TIMELINE LATERAL — Pegado a la izquierda (30%) === */

.timeline-col{
  position: relative;
  width: clamp(160px, 20vw, 280px);
  min-height: 100%;
}

.timeline-rail{
  position: absolute;
  top: 0; bottom: 0;
  left: 30%; /* antes 50% */
  transform: translateX(-50%);
  width: 2px;
  background: #3fcdf8;
  opacity: .9;
  z-index: 0;
}

.timeline-anchors{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
}

.tl-segment{
  position: absolute;
  left: 0; right: 0;
}

.tl-segment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%; /* antes 50% */
  transform: translate(-50%, -50%);
  width: 16px;  /* antes 10px */
  height: 16px; /* antes 10px */
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px #eef2f7; /* borde un poco más ancho */
}


.tl-segment::after {
  content: "";
  position: absolute;
  top: 5px; /* empieza justo debajo del punto */
  left: 30%; /* alineado con el punto */
  transform: translateX(-50%);
  width: 2px; /* ahora es delgado porque es vertical */
  height: 9px; /* largo de la rayita hacia abajo */
  background: #2563eb; /* mismo azul del punto */
  border-radius: 1px;
}

.tl-label {
  position: absolute;
  top: 14px; /* antes 0 → lo baja debajo del punto */
  left: 30%; /* antes 50% */
  transform: translate(-50%, 0); /* ya no lo subimos con -50% */
  max-width: 90%;
  padding: 4px 8px;
  background: rgba(248,250,252,.95);
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  color: #1f2937;
  font-weight: 600;
  font-size: .85rem;
  text-align: center;
  white-space: normal;
  overflow: visible;
  line-height: 1.25;
}

#exodus-layout{ align-items: stretch !important; }

.content-group .card{ margin-top: .5rem; margin-bottom: .5rem; }
.content-group + .content-group{ margin-top: 1.25rem; }

@media (max-width: 575.98px){
  .timeline-col{ width: clamp(140px, 28vw, 220px); }
  .tl-label{ font-size: .8rem; max-width: 95%; }
}

/* Empuja la columna de contenido hacia el timeline (solo esta fila) */
#exodus-layout > .col{
  padding-left: 0 !important;  /* por si queda algún padding residual */
  margin-left: -80px;          /* ACERCA el grid al timeline */
}

/* Evita recortes si hay nudges negativos */
#exodus-layout{
  overflow-x: visible;
}

/* Ajuste fino por tamaños (tú decides cuán cerca en cada breakpoint) */
@media (max-width: 991.98px){   /* tablets */
  #exodus-layout > .col{ margin-left: -10px; }
}
@media (max-width: 575.98px){   /* móvil */
  #exodus-layout > .col{ margin-left: -6px; }
}

/* Bloques intermedios entre grupos (opcional) */
.inter-row { /* puedes ajustar el espacio vertical con my-* en el HTML */
  /* nada crítico aquí; el my-3 del HTML maneja el espacio */
}

.inter-box{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

/* Variante: si quieres que “abrace” un poco más el ancho del contenido */
@media (min-width: 768px){
  .inter-box{ padding: 1.25rem; }
}