[data-component-id="usfq_theme:section_timeline_vertical"] {
  /* @todo Add your styles here. */

  @media (min-width: 1025px) {
    min-height: 100vh;
  }

  .section-align-usfq {
    display: flex;
    flex-direction: column;
    gap: 64px;
  }
  
  .timeline__item {
    display: flex;
    align-items: stretch;
    gap: 12px
  }
  
  .timeline__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

  .timeline__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .timeline__icon svg {
    fill: var(--primary);
    color: var(--primary);
    stroke: var(--primary);
    width: 28px;
    height: 28px;
  }

  .timeline__line {
    width: 2px;
    flex: 1;
    background-color: var(--primary);
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .timeline__content {
    flex: 1;
  }

  /* Mobile: todos los elementos en orden lineal, spacer oculto */
  .timeline__spacer {
    display: none;
  }

  .timeline__marker {
    order: 1;
  }

  .timeline__content {
    order: 2;
    flex: 1 1 0;
    padding-bottom: 32px;
  }

  .timeline__date{
    padding-top: 4px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 10px;
    background-color: var(--primary);
    opacity: 1;
    border-radius: 4px;
    color: var(--white);
    width: fit-content;
    margin-bottom: 12px;
  }

  /* Tablet y Desktop: disposición alternada */
  @media (min-width: 576px) {
    .timeline__item {
      gap: 2rem;
    }

    .timeline__spacer {
      display: block;
      flex: 1 1 0;
    }

    /* Items pares: spacer - marker - content */
    .timeline__item:nth-child(even) .timeline__spacer {
      order: 1;
    }

    .timeline__item:nth-child(even) .timeline__marker {
      order: 2;
    }

    .timeline__item:nth-child(even) .timeline__content {
      order: 3;
    }

    /* Items impares: content - marker - spacer */
    .timeline__item:nth-child(odd) .timeline__content {
      order: 1;
    }

    .timeline__item:nth-child(odd) .timeline__marker {
      order: 2;
    }

    .timeline__item:nth-child(odd) .timeline__spacer {
      order: 3;
    }
  }
}