/** START ZEM TIMELINE **/

.zem-timeline {
    --zem-tl-line: rgba(255, 255, 255, 0.5);
    --zem-tl-line-width: 1px;
    --zem-tl-dot: #9baa9b;
    --zem-tl-dot-size: 16px;
    --zem-tl-gap-dot: 32px;
    --zem-tl-gap-text: 12px;
    --zem-tl-gap-items: 32px;
    --zem-tl-duration: 2s;
    width: 100%;
}

.zem-timeline__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--zem-tl-count, 5), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Línea horizontal: del centro del primer círculo al centro del último */
.zem-timeline__list::before {
    content: "";
    position: absolute;
    top: calc(var(--zem-tl-dot-size) / 2 - var(--zem-tl-line-width) / 2);
    left: calc(50% / var(--zem-tl-count, 5));
    right: calc(50% / var(--zem-tl-count, 5));
    height: var(--zem-tl-line-width);
    background: var(--zem-tl-line);
    transform-origin: left center;
    pointer-events: none;
}

.zem-timeline__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0 12px;
}

.zem-timeline__dot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: var(--zem-tl-dot-size);
    height: var(--zem-tl-dot-size);
    margin-bottom: var(--zem-tl-gap-dot);
    border-radius: 50%;
    /* Tres círculos concéntricos (radios 4/6/8 de 8), como el SVG del diseño */
    background: radial-gradient(
        circle closest-side,
        var(--zem-tl-dot) 0 50%,
        color-mix(in srgb, var(--zem-tl-dot) 62.5%, transparent) 50% 75%,
        color-mix(in srgb, var(--zem-tl-dot) 25%, transparent) 75% 100%
    );
}

.zem-timeline__title {
    margin: 0 0 var(--zem-tl-gap-text);
    font-weight: 300;
    line-height: 1.3;
    text-transform: uppercase;
}

.zem-timeline__description {
    margin: 0;
    max-width: 22ch;
    font-weight: 300;
    line-height: 1.5;
}

/* Móvil: línea vertical a la izquierda */
@media (max-width: 767px) {
    .zem-timeline__list {
        display: flex;
        flex-direction: column;
        gap: var(--zem-tl-gap-items);
    }

    /* La línea se dibuja por tramos: del centro de un círculo al del siguiente */
    .zem-timeline__list::before {
        content: none;
    }

    .zem-timeline__item:not(:last-child)::before {
        content: "";
        position: absolute;
        top: calc(0.3em + var(--zem-tl-dot-size) / 2);
        left: calc(var(--zem-tl-dot-size) / 2 - var(--zem-tl-line-width) / 2);
        width: var(--zem-tl-line-width);
        height: calc(100% + var(--zem-tl-gap-items));
        background: var(--zem-tl-line);
        transform-origin: center top;
        pointer-events: none;
    }

    .zem-timeline__item {
        display: block;
        padding: 0 0 0 calc(var(--zem-tl-dot-size) + var(--zem-tl-gap-dot));
        text-align: left;
    }

    .zem-timeline__dot {
        position: absolute;
        top: 0.3em;
        left: 0;
        margin: 0;
    }

    .zem-timeline__description {
        max-width: none;
    }
}

/* ── Animación de entrada ──────────────────────────────────────────────
   Solo si el JS marca .is-ready: sin JS (o en el editor) todo se ve. */
.zem-timeline.is-ready .zem-timeline__list::before {
    transform: scaleX(0);
    transition: transform var(--zem-tl-duration) linear;
}

.zem-timeline.is-ready .zem-timeline__dot,
.zem-timeline.is-ready .zem-timeline__title,
.zem-timeline.is-ready .zem-timeline__description {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--zem-tl-delay, 0s);
}

.zem-timeline.is-ready .zem-timeline__title { transition-delay: calc(var(--zem-tl-delay, 0s) + 0.15s); }
.zem-timeline.is-ready .zem-timeline__description { transition-delay: calc(var(--zem-tl-delay, 0s) + 0.3s); }

.zem-timeline.is-ready.is-animated .zem-timeline__list::before { transform: scaleX(1); }

.zem-timeline.is-ready.is-animated .zem-timeline__dot,
.zem-timeline.is-ready.is-animated .zem-timeline__title,
.zem-timeline.is-ready.is-animated .zem-timeline__description {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .zem-timeline.is-ready .zem-timeline__item::before {
        transform: scaleY(0);
        transition: transform 0.7s linear;
        transition-delay: var(--zem-tl-delay, 0s);
    }
    .zem-timeline.is-ready.is-animated .zem-timeline__item::before { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .zem-timeline * {
        transition: none !important;
    }
}

/** END ZEM TIMELINE **/