/* ── Widget: Timeline ──────────────────────────────────────────────────── */

/* ── Desktop (base) ──────────────────────────────────────────────── */

.beps-tl-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

/* Cada ítem: 3 columnas simétricas — [texto] [punto] [texto] */
.beps-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 20px;
    align-items: start;
}

/*
 * Línea entre puntos: ::after en cada ítem excepto el último.
 * Se extiende desde el centro del punto actual hasta el centro del punto siguiente.
 *
 * top  = node_padding(3px) + dot_half(5px) = 8px
 * bottom = -(gap(40px) + node_padding(3px) + dot_half(5px)) = -48px
 */
.beps-tl-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    bottom: -48px;
    width: 1px;
    background-color: #ffffff;
    z-index: 0;
    pointer-events: none;
}

/* ── Nodo ─────────────────────────────────────────────────────────── */
.beps-tl-node {
    position: relative;
    z-index: 1; /* encima de la línea */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
}

.beps-tl-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 0px solid #ffffff;
    flex-shrink: 0;
}

/* ── Posicionamiento en grid ── */

/* Ítems derecha: col1=vacío / col2=punto / col3=contenido */
.beps-tl-item--right .beps-tl-node    { grid-column: 2; grid-row: 1; }
.beps-tl-item--right .beps-tl-content { grid-column: 3; grid-row: 1; text-align: left; }

/* Ítems izquierda: col1=contenido / col2=punto / col3=vacío */
.beps-tl-item--left .beps-tl-node    { grid-column: 2; grid-row: 1; }
.beps-tl-item--left .beps-tl-content { grid-column: 1; grid-row: 1; text-align: right; }

/* ── Texto ─────────────────────────────────────────────────────────── */
.beps-tl-content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.beps-tl-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    line-height: 1.2;
}

.beps-tl-desc {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* ── Tablet ──────────────────────────────────────────────────────────
 * gap(32px) + node_padding(3px) + dot_half(5px) = 40px
 */
@media (max-width: 1024px) {
    .beps-tl-wrap {
        row-gap: 32px;
    }

    .beps-tl-item:not(:last-child)::after {
        bottom: -40px;
    }
}

/* ── Móvil: todo a la izquierda ───────────────────────────────────────
 * dot = 8px → dot_half = 4px
 * top  = node_padding(3px) + dot_half(4px) = 7px
 * bottom = -(gap(24px) + node_padding(3px) + dot_half(4px)) = -31px
 */
@media (max-width: 767px) {
    .beps-tl-wrap {
        row-gap: 24px;
    }

    /* Todos los ítems: [punto] [contenido] */
    .beps-tl-item {
        grid-template-columns: auto 1fr;
    }

    .beps-tl-item--right .beps-tl-node,
    .beps-tl-item--left  .beps-tl-node  { grid-column: 1; grid-row: 1; }

    .beps-tl-item--right .beps-tl-content,
    .beps-tl-item--left  .beps-tl-content {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
    }

    /* Línea a la izquierda, centrada sobre el punto */
    .beps-tl-item:not(:last-child)::after {
        left: 4px;
        transform: none;
        top: 7px;
        bottom: -31px;
    }
}