/* ============================================================
   Elementor Horizontal Timeline — v1.0.2
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.eht-wrapper {
    width: 100%;
    padding: 32px 0;
}

.eht-wrapper.eht-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent;
}

.eht-wrapper.eht-scrollable::-webkit-scrollbar { height: 4px; }
.eht-wrapper.eht-scrollable::-webkit-scrollbar-track { background: transparent; }
.eht-wrapper.eht-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 2px;
}

/* ── Track (trilho) ──────────────────────────────────────── */
/*
 * CHAVE DA CORREÇÃO:
 * align-items: flex-start garante que cada .eht-item cresce
 * para baixo a partir do topo compartilhado. Sem isso o flexbox
 * estica os itens e o conector "desaparece" puxando o box para cima.
 */
.eht-track {
    display: flex;
    align-items: flex-start;   /* ← era "center", isso causava o bug */
    position: relative;
    min-width: max-content;
    padding: 0 32px;
}

/* ── Linha central ───────────────────────────────────────── */
/*
 * A linha precisa ser posicionada no centro dos pontos, não no
 * centro do track. Os pontos ficam após label + gap, então
 * calculamos: padding-top do item (0) + altura do label (~20px)
 * + gap (8px) + metade do dot (22px) = ~50px do topo do track.
 * Usamos uma variável CSS que o JS pode ajustar se necessário,
 * mas o valor fixo já funciona bem com as proporções padrão.
 */
.eht-line {
    position: absolute;
    top: var(--eht-line-top, 50px);   /* distância do topo até o centro dos dots */
    left: 0;
    right: 0;
    border-top: 2px solid #CBD5E0;
    z-index: 0;
    pointer-events: none;
}

/* ── Item ────────────────────────────────────────────────── */
.eht-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 0 24px;
    flex-shrink: 0;
}

/* ── Label (rótulo de data/etapa) ────────────────────────── */
.eht-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #718096;
    margin-bottom: 8px;
    white-space: nowrap;
    text-align: center;
    height: 20px;          /* altura fixa evita que o dot flutue */
    line-height: 20px;
    flex-shrink: 0;
}

/* ── Dot (ponto do marcador) ─────────────────────────────── */
.eht-dot-wrapper {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;        /* nunca encolhe */
}

.eht-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #4F46E5;
    border: 3px solid #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
    flex-shrink: 0;
}

.eht-dot:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(79,70,229,.15);
}

.eht-dot i,
.eht-dot svg {
    color: #fff;
    fill: #fff;
    font-size: 16px;
    width: 16px;
    height: 16px;
    display: block;
}

/* ── Conector vertical (dot → box) ──────────────────────── */
/*
 * CORREÇÃO PRINCIPAL:
 * O conector tem altura mínima fixa. Mesmo que o box cresça
 * em altura por conta de texto longo, o conector não encolhe —
 * ele mantém sempre o espaço entre a linha trilha e o box.
 * flex-shrink: 0 impede que o flexbox comprima esse elemento.
 */
.eht-connector {
    width: 2px;
    min-height: 24px;      /* altura mínima garantida */
    height: 24px;          /* valor padrão */
    background-color: #CBD5E0;
    flex-shrink: 0;        /* nunca encolhe */
    flex-grow: 0;          /* nunca cresce */
}

/* ── Box de informação ───────────────────────────────────── */
.eht-box {
    min-width: 200px;
    background-color: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    text-align: left;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    /* Box nunca sobe — o conector acima é quem segura o espaço */
    align-self: flex-start;
}

.eht-box:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

.eht-box-title {
    font-size: 14px;
    font-weight: 700;
    color: #1A202C;
    margin: 0 0 8px;
    line-height: 1.4;
}

.eht-box-desc {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.6;
    margin: 0;
}

/* ── Variante: box ACIMA ─────────────────────────────────── */
.eht-item--above {
    flex-direction: column-reverse;
}

.eht-item--above .eht-label {
    margin-bottom: 0;
    margin-top: 8px;
}

.eht-item--above .eht-connector {
    transform: scaleY(-1);
}

.eht-item--above .eht-box {
    align-self: flex-start;
}

/* ── Animação de entrada ─────────────────────────────────── */
.eht-animated .eht-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.eht-animated .eht-item--above {
    transform: translateY(-20px);
}

.eht-animated .eht-item.eht-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsivo ──────────────────────────────────────────── */
/* Mobile: scroll horizontal sempre forçado, layout nunca vira vertical */
@media (max-width: 768px) {
    .eht-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,.15) transparent;
    }

    .eht-wrapper::-webkit-scrollbar { height: 4px; }
    .eht-wrapper::-webkit-scrollbar-track { background: transparent; }
    .eht-wrapper::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 2px;
    }

    /* Track sempre em linha horizontal */
    .eht-track {
        flex-direction: row !important;
        align-items: flex-start !important;
        min-width: max-content;
        padding: 0 16px;
    }

    /* Box um pouco mais estreito em telas pequenas */
    .eht-box {
        min-width: 160px;
    }
}

/* ── Outer (envolve wrapper + botões laterais) ───────────── */
.eht-outer {
    position: relative;
    width: 100%;
}

.eht-outer--sides {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eht-outer--sides .eht-wrapper {
    flex: 1;
    min-width: 0;
}

/* ── Botões de navegação ─────────────────────────────────── */
.eht-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #4F46E5;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
    user-select: none;
    padding: 0;
}

.eht-nav-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.08);
}

.eht-nav-btn:active {
    transform: scale(0.95);
}

.eht-nav-btn:disabled,
.eht-nav-btn.eht-nav-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Botões abaixo */
.eht-nav-bottom {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

/* ── Dica de deslizar ────────────────────────────────────── */
.eht-swipe-hint {
    text-align: center;
    font-size: 12px;
    color: #718096;
    margin: 8px 0 0;
    animation: eht-hint-pulse 2s ease-in-out 0.8s 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* some ao primeiro toque/scroll */
.eht-swipe-hint.eht-hint-hidden {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

@keyframes eht-hint-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}