/* ================================================================
   JORNADA GLOBAL — .bf-journey (fixed, base da viewport). 7 etapas:
   01–04 notas da S02 · 05 experiência · 06 produto · 07 comprar.
   Desktop: números + conectores 1px; micro-label só no ativo.
   Mobile: só números, ACIMA da .bf-sticky (~62px + safe-area).
   Camadas: conteúdo < jornada 60 < sticky 90 < header 100.
   DOM interno gerado por js/butterfly-journey.js.
   ================================================================ */
.bf-journey {
    position: fixed; left: 50%; bottom: clamp(18px, 3.2vh, 32px);
    transform: translateX(-50%); z-index: 60;
    pointer-events: none;               /* só os buttons capturam clique */
    transition: opacity 0.5s var(--bf-ease), transform 0.5s var(--bf-ease);
}
.bf-journey.is-hidden {
    opacity: 0; transform: translateX(-50%) translateY(8px);
}
.bf-journey.is-hidden .bf-journey__step { pointer-events: none; }

/* véu suave — legibilidade sobre nuvens/fotos, sem virar pill */
.bf-journey::before {
    content: ""; position: absolute; inset: -14px -42px; z-index: -1; pointer-events: none;
    background: radial-gradient(62% 130% at 50% 50%, rgba(255, 250, 252, 0.85) 0%, rgba(255, 250, 252, 0.38) 62%, rgba(255, 250, 252, 0) 84%);
}

.bf-journey__list {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: flex; align-items: flex-start;
    gap: calc(clamp(26px, 3.4vw, 60px) + 22px);
}
.bf-journey__item { position: relative; }

.bf-journey__step {
    pointer-events: auto; background: none; border: 0; padding: 0;
    cursor: pointer; position: relative; display: block; text-align: left;
}
.bf-journey__step i {
    display: inline-block; font-family: var(--bf-font-sans); font-style: normal;
    font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
    color: rgba(41, 35, 41, 0.45);                    /* futuros: ink atenuado */
    transition: color 0.3s var(--bf-ease);
}
/* conector 1px à direita do número (não no último) */
.bf-journey__item:not(:last-child) .bf-journey__step::after {
    content: ""; position: absolute; left: calc(100% + 11px); top: 0.55em;
    width: clamp(26px, 3.4vw, 60px); height: 1px;
    background: rgba(41, 35, 41, 0.14);
    transition: background 0.35s var(--bf-ease);
}
/* concluído: rosa atenuado + linha preenchida */
.bf-journey__step.is-done i { color: rgba(231, 46, 114, 0.55); }
.bf-journey__item:not(:last-child) .bf-journey__step.is-done::after { background: rgba(231, 46, 114, 0.4); }
/* ativo: rosa cheio + pulso curto (sem bounce) */
.bf-journey__step.is-active i {
    color: var(--bf-pink);
    animation: bfjPulse 0.32s var(--bf-ease);
}
@keyframes bfjPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* micro-label — só no ativo, absoluto (não desloca o layout) */
.bf-journey__step b {
    position: absolute; left: 0; top: calc(100% + 5px); white-space: nowrap;
    font-family: var(--bf-font-sans); font-weight: 600;
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--bf-pink); opacity: 0; transform: translateY(-3px);
    transition: opacity 0.3s var(--bf-ease), transform 0.3s var(--bf-ease);
    pointer-events: none;
}
.bf-journey__step.is-active b { opacity: 1; transform: none; }

.bf-journey__step:focus-visible i { outline: 1px solid var(--bf-pink); outline-offset: 4px; }

/* ============================================================
   MOBILE (≤768): compacta, só números, ACIMA da barra de compra
   (.bf-sticky ≈ 62px + safe-area; mesmos 74px do antigo .bfx-steps)
   ============================================================ */
@media (max-width: 768px) {
    .bf-journey { bottom: calc(env(safe-area-inset-bottom) + 74px); }
    .bf-journey::before { inset: -10px -24px; }
    .bf-journey__list { gap: calc(clamp(14px, 4.6vw, 24px) + 12px); }
    .bf-journey__step i { font-size: 10px; letter-spacing: 0.14em; }
    .bf-journey__item:not(:last-child) .bf-journey__step::after {
        left: calc(100% + 6px); top: 0.5em; width: clamp(14px, 4.6vw, 24px);
    }
    .bf-journey__step b { display: none; }
}

/* Acessibilidade: estado continua funcionando; sem interpolação */
@media (prefers-reduced-motion: reduce) {
    .bf-journey,
    .bf-journey__step i,
    .bf-journey__step b,
    .bf-journey__item .bf-journey__step::after { transition: none; }
    .bf-journey__step.is-active i { animation: none; }
}