/* ================================================================
   JOURNEY — indicador de progresso da experiência (6 estados).
   Desktop: vertical, discreto, à direita. Mobile: horizontal, topo.
   Camada isolada. Reutiliza os tokens de cor/tipografia existentes.
   Prioridade visual MÍNIMA — quase "gravado" na interface.
   ================================================================ */
.journey {
    position: fixed;
    right: clamp(18px, 2.2vw, 38px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;                 /* abaixo do header (100); acima do conteúdo */
    pointer-events: none;        /* só os dots capturam clique */
    opacity: 1;
    transition: opacity 0.6s ease;
}
.journey.is-hero { opacity: 0.85; }   /* levemente mais sutil na Hero (estado 00) */

.journey__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    height: clamp(228px, 33vh, 330px);
    width: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Linha de fundo (jornada inteira) + linha de progresso (dourada) */
.journey__track,
.journey__fill {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 1px;
    transform: translateX(-50%);
    pointer-events: none;
}
.journey__track {
    bottom: 3px;
    background: rgba(232, 200, 110, 0.22);   /* tom quente do champanhe, mais visível */
}
.journey__fill {
    height: calc(var(--jp, 0) * (100% - 6px));
    background: var(--color-gold-light);      /* #E8C86E em cheio */
    opacity: 1;
    transition: height 0.25s linear;
}

.journey__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journey__dot {
    pointer-events: auto;
    width: 7px;
    height: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(232, 200, 110, 0.42);   /* inativo: champanhe, claramente visível */
    cursor: pointer;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.4s ease,
                box-shadow 0.4s ease;
}
.journey__dot:hover { background: rgba(232, 200, 110, 0.75); }
.journey__dot:focus-visible {
    outline: 1px solid var(--color-gold);
    outline-offset: 3px;
}
.journey__dot.is-done { background: rgba(232, 200, 110, 0.78); }  /* concluído: dourado forte */
.journey__dot.is-active {
    /* núcleo luminoso (creme) com anel champanhe — destaca sem virar neon */
    background: var(--color-cream);
    transform: scale(1.45);
    box-shadow: 0 0 8px rgba(232, 200, 110, 0.55),
                0 0 0 3px rgba(232, 200, 110, 0.16);
}

/* Rótulo — só do estado ativo, à esquerda do dot (desktop) */
.journey__label {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-cream);
    opacity: 0;
    transform: translateY(-50%) translateX(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}
/* Rótulos revelados no hover/foco (não automáticos) — evita qualquer
   sobreposição com as copies das fases (a Fase 02 é alinhada à direita).
   O dot ativo, maior e dourado, é o indicador permanente. */
.journey__dot:hover .journey__label,
.journey__dot:focus-visible .journey__label {
    opacity: 0.92;
    transform: translateY(-50%) translateX(0);
}

/* ============================================================
   MOBILE (≤768): horizontal, no topo, sem rótulos longos.
   Fica abaixo do header e longe da barra fixa de compra (rodapé).
   ============================================================ */
@media (max-width: 768px) {
    /* Mobile: vertical na lateral direita (como no desktop), porém reduzida. */
    .journey {
        right: clamp(9px, 2.6vw, 15px);
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
    }
    .journey.is-hero { opacity: 0.8; }

    .journey__list {
        flex-direction: column;
        height: clamp(150px, 32vh, 226px);
        width: 7px;
    }
    .journey__track,
    .journey__fill {
        left: 50%;
        right: auto;
        top: 3px;
        width: 1px;
        height: auto;
        transform: translateX(-50%);
        border-radius: 0;
    }
    .journey__track { bottom: 3px; }
    .journey__fill {
        width: 1px;
        height: calc(var(--jp, 0) * (100% - 6px));
        transition: height 0.25s linear;
    }
    .journey__dot { width: 6px; height: 6px; }
    .journey__dot.is-active { transform: scale(1.45); }
    .journey__label { display: none; }
}

/* Acessibilidade: sem transições/pulsação */
@media (prefers-reduced-motion: reduce) {
    .journey__dot,
    .journey__fill,
    .journey__label { transition: none; }
}