.lmw-timeline-wrapper {
    width: 100%;
    box-sizing: border-box;
}
.lmw-timeline-wrapper *, .lmw-timeline-wrapper *::before, .lmw-timeline-wrapper *::after { box-sizing: border-box; }

.lmw-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    /* stretch (não flex-start): sem isso, cada passo só ocupa a altura do próprio conteúdo —
       títulos que quebram em 1 ou 2 linhas deixavam as descrições começando em alturas
       diferentes de passo pra passo. Esticando todos os passos pra altura do mais alto da
       linha, o bloco de baixo (descrição) sempre começa alinhado. O controle "Altura fixa da
       descrição" continua disponível pra ajuste fino do tamanho do próprio texto, mas o
       alinhamento entre os passos já vem certo por padrão, sem precisar configurar nada. */
    align-items: stretch;
    width: 100%;
}

/* ── Linha conectora ──
   top usa --lmw-tl-dot-size (definida pelo controle "Tamanho do ponto") pra sempre alinhar no
   centro vertical do ponto, não importa o tamanho — antes era um valor fixo (8px = metade do
   ponto padrão de 16px), então aumentar o ponto desalinhava a linha.
   left/width NÃO compensam --lmw-tl-side-padding (controle "Espaçamento lateral"): a % de
   left/width de um elemento position:absolute já é resolvida contra a padding-box do ancestral
   posicionado (.lmw-timeline), que JÁ inclui o padding lateral — left:0/width:100% sozinhos já
   colam a linha de ponta a ponta na borda de .lmw-timeline, ignorando o padding que só afasta os
   PONTOS. Uma versão anterior compensava com left:-padding/width:100%+2*padding pensando que a %
   excluía o padding do pai — na prática isso soma o padding DUAS vezes, vazando a linha
   `--lmw-tl-side-padding` px pra fora da própria caixa do widget em cada lado (com o slider no
   máximo de 150px, isso é o suficiente pra criar uma barra de scroll horizontal na página
   inteira quando o widget fica perto da borda). */
.lmw-timeline-track {
    position: absolute;
    top: calc(var(--lmw-tl-dot-size, 16px) / 2);
    left: 0;
    width: 100%;
    height: var(--lmw-tl-line-thickness, 4px);
    background: #e2e8f0;
    border-radius: 999px;
    z-index: 1;
    overflow: hidden;
}

.lmw-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--lmw-tl-active-1, #4f46e5), var(--lmw-tl-active-2, #818cf8));
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Passo ── */
.lmw-timeline-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    z-index: 2;
}

/* Modo horizontal: o ponto é posicionado absoluto (top ou bottom fixo), não flow-positioned —
   é isso que garante que ele fica sempre na MESMA altura Y em todos os passos (alinhado com a
   linha, que também é position:absolute com top fixo), independente da altura do título/
   descrição variar de passo pra passo. Antes o ponto ficava no fluxo normal do flex column (ou
   column-reverse no modo "conteúdo acima"), então a altura do texto empurrava o ponto pra uma
   posição Y diferente em cada passo — descolando ele da linha. O espaço reservado pro ponto vem
   do padding do PRÓPRIO passo (--lmw-tl-dot-gap = controle "Espaço entre ponto e texto"). */
.lmw-timeline--horizontal .lmw-timeline-step {
    padding-top: calc(var(--lmw-tl-dot-size, 16px) + var(--lmw-tl-dot-gap, 18px));
}

.lmw-timeline--horizontal.lmw-timeline--content-top .lmw-timeline-step {
    padding-top: 0;
    padding-bottom: calc(var(--lmw-tl-dot-size, 16px) + var(--lmw-tl-dot-gap, 18px));
}

.lmw-timeline--horizontal .lmw-timeline-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.lmw-timeline--horizontal.lmw-timeline--content-top .lmw-timeline-dot {
    top: auto;
    bottom: 0;
}

.lmw-timeline-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.lmw-timeline-dot svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* Passo atual "pisca" alternando a cor de fundo do próprio ponto (sem anel) — substituiu o
   anel de pulso (box-shadow expandindo) porque o usuário achou mais discreto/intuitivo. Cores e
   duração vêm de --lmw-tl-dot-blink-from/-to/--lmw-tl-pulse-duration (controles no painel). Só
   aparece quando a classe --pulse está no wrapper (controle "Piscar cor" no painel). */
.lmw-timeline--pulse .lmw-timeline-step.is-current .lmw-timeline-dot {
    animation: lmwTimelineColorBlink var(--lmw-tl-pulse-duration, 1.5s) ease-in-out infinite;
}

@keyframes lmwTimelineColorBlink {
    0%, 100% { background-color: var(--lmw-tl-dot-blink-from, #4f46e5); }
    50% { background-color: var(--lmw-tl-dot-blink-to, #818cf8); }
}

/* Combina com o translateX(-50%) do modo horizontal (posicionamento absoluto do ponto) — sem
   isso, o :hover substituiria o transform de centralização em vez de somar, descentralizando o
   ponto momentaneamente. Vertical/mobile-stack não usam translateX, então o scale sozinho já
   funciona certo pra eles (a regra mais específica abaixo não se aplica lá). */
.lmw-timeline--hover .lmw-timeline-step:hover .lmw-timeline-dot {
    transform: scale(1.15);
}
.lmw-timeline--horizontal.lmw-timeline--hover .lmw-timeline-step:hover .lmw-timeline-dot {
    transform: translateX(-50%) scale(1.15);
}

.lmw-timeline-content { transition: all 0.3s ease; }

/* "Descrição só aparece no hover" — some por padrão (opacity+max-height, não display:none, pra
   manter a transição suave) e revela ao passar o mouse no passo. */
.lmw-timeline--desc-hover .lmw-timeline-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}
.lmw-timeline--desc-hover .lmw-timeline-step:hover .lmw-timeline-desc {
    opacity: 1;
    max-height: 200px;
}

.lmw-timeline-title {
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 8px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.lmw-timeline-title strong { font-weight: 700; opacity: 0.85; }

.lmw-timeline-desc {
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.lmw-timeline-step.is-active .lmw-timeline-desc {
    opacity: 0.9;
    transform: translateY(0);
}

/* ── Modo vertical ── */
.lmw-timeline--vertical .lmw-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}
.lmw-timeline--vertical .lmw-timeline-track {
    top: 0;
    left: calc(var(--lmw-tl-dot-size, 16px) / 2);
    width: var(--lmw-tl-line-thickness, 4px);
    height: 100%;
}
.lmw-timeline--vertical .lmw-timeline-progress {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, var(--lmw-tl-active-1, #4f46e5), var(--lmw-tl-active-2, #818cf8));
    transition: height 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lmw-timeline--vertical .lmw-timeline-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    width: 100%;
}
.lmw-timeline--vertical .lmw-timeline-dot { margin-bottom: 0; margin-right: 18px; }

/* ── Mobile: força vertical se "mobile_stack" estiver ativo ── */
@media (max-width: 768px) {
    .lmw-timeline--mobile-stack .lmw-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .lmw-timeline--mobile-stack .lmw-timeline-track {
        top: 0;
        left: calc(var(--lmw-tl-dot-size, 16px) / 2);
        width: var(--lmw-tl-line-thickness, 4px);
        height: 100%;
    }
    .lmw-timeline--mobile-stack .lmw-timeline-progress {
        width: 100%;
        height: 0%;
        background: linear-gradient(180deg, var(--lmw-tl-active-1, #4f46e5), var(--lmw-tl-active-2, #818cf8));
        transition: height 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .lmw-timeline--mobile-stack .lmw-timeline-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        width: 100%;
        /* desfaz o padding-top/bottom reservado pro ponto absoluto do modo horizontal — em
           mobile-stack o ponto volta pro fluxo normal (linha), não precisa de espaço reservado */
        padding: 0;
    }
    /* desfaz o position:absolute do modo horizontal — em mobile-stack o ponto acompanha o
       fluxo normal da linha (flex-direction:row), igual ao modo vertical */
    .lmw-timeline--mobile-stack .lmw-timeline-dot {
        position: static;
        transform: none;
        margin-bottom: 0;
        margin-right: 18px;
    }
    .lmw-timeline--mobile-stack.lmw-timeline--hover .lmw-timeline-step:hover .lmw-timeline-dot {
        transform: scale(1.15);
    }
}

/* ── Mobile: carrossel (alternativa ao empilhamento vertical) ──
   Vira scroll horizontal com snap, cada passo um "card" auto-contido — sem JS (mesmo padrão do
   scroll mobile do Product Box). A linha conectora não faz sentido nesse modo (não tem como ela
   acompanhar o scroll de forma legível, já que a % de width dela é resolvida contra a largura
   VISÍVEL do container, não contra o conteúdo rolável inteiro) — por isso ela some e o ponto
   volta pro fluxo normal de cada card, com o texto sempre centralizado abaixo dele. */
@media (max-width: 768px) {
    /* !important nas propriedades de layout — mesma lição do BUG-007/008 (Tabela Comparativa/
       autofill): reset sem !important não é garantia contra CSS de tema/page builder externo em
       produção (ambientes de teste locais tendem a ter um tema mais "limpo" que não reproduz o
       conflito). Aqui o risco é um tema com seu próprio reset genérico de flex/display brigando
       com o carrossel — sem !important, o resultado depende de especificidade/ordem que a gente
       não controla, e o sintoma (todos os pontos numa fileira, todos os títulos em outra) é
       exatamente o que se vê se flex-direction:column do passo for sobrescrita de volta pra row. */
    .lmw-timeline--mobile-carousel .lmw-timeline {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px;
        padding-bottom: 4px;
    }
    .lmw-timeline--mobile-carousel .lmw-timeline::-webkit-scrollbar { display: none; }
    .lmw-timeline--mobile-carousel .lmw-timeline-track,
    .lmw-timeline--mobile-carousel .lmw-timeline-progress {
        display: none !important;
    }
    .lmw-timeline--mobile-carousel .lmw-timeline-step {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 80% !important;
        scroll-snap-align: center;
        padding: 0 !important;
    }
    .lmw-timeline--mobile-carousel .lmw-timeline-dot {
        position: static !important;
        transform: none !important;
        margin-bottom: var(--lmw-tl-dot-gap, 18px);
    }
}