:root {
  /* inicializamos la variable global y la de icono (aunque cada icono la sobreescribirá) */
  --progress: 0%;
  --icon-progress: 0%;
}

.timeline {
  position: relative;
  padding: 32px 0;
}

.timeline__line {
  position: absolute;
  top: 0; left: 50%;
  width: 4px; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    #719d25 0%,
    #719d25 var(--progress),
    #002546 var(--progress),
    #002546 100%
  );
}

.timeline__item {
  width: 45%;
  margin: 48px 0;
  display: flex;
  align-items: center;
}

/* margen auto para flotar a izquierda/derecha */
.timeline__item:nth-child(odd)  { margin-left: auto;  margin-right: calc(53% + 16px); text-align: right;}
.timeline__item:nth-child(even) { margin-right: auto; margin-left: calc(53% + 16px); }

.timeline__content {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex: 1;
}

.timeline__icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    #719d25 0%,
    #719d25 var(--icon-progress, 0%),
    #002546 var(--icon-progress, 0%),
    #002546 100%
  );
}

@media (max-width: 768px) {
  .timeline__line {
    left: 18.4px; /* alineación al lado izquierdo */
    transform: none;
  }

  .timeline__item {
    width: 100%;
    flex-direction: row;
    margin: 32px 0;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    padding-left: 64px; /* espacio para la línea e ícono */
  }

  .timeline__item:nth-child(odd),
  .timeline__item:nth-child(even) {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .timeline__icon {
    left: 0; /* alineación al lado izquierdo */
    transform: translateY(-50%);
  }

  .timeline__content {
    padding: 19.2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
}

.img-der,
.img-izq {
  position: absolute;
  width: auto;
  height: 210px;
}

.img-der {
  left: calc(53% + 16px);
}

.img-izq {
  right: calc(53% + 16px);
}

.img-der img,
.img-izq img {
  width: auto;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.timeline__item:has(.img-der),
.timeline__item:has(.img-izq) {
  min-height: 250px;
}

@media (max-width: 768px) {
  .img-der,
  .img-izq {
    display: none;
  }
  
  .timeline__item:has(.img-der),
  .timeline__item:has(.img-izq) {
    min-height: auto; 
  }
}