/* Fluxo de assinatura: palco vetorial animado, sem dependências externas. */
.flow {
    --flow-accent: var(--purple, #5932c1);
    --flow-ring: var(--purple-dark, #27115f);
    --flow-bg: #e8dffa;
    --flow-ink: #161327;
    --flow-body: #5d5a72;
    --flow-line: #ece8fa;
    --flow-paper: #fff;
    position: relative;
    background: var(--flow-bg);
}

.flow__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Se o JavaScript não inicializar, permanece uma versão estática e legível. */
.flow__viewport { display: none; }
.flow--ready .flow__viewport { display: block; }
.flow--ready .flow__fallback { display: none; }

.flow__fallback {
    max-width: 1320px;
    margin: 0 auto;
    padding: 96px 24px;
}
.flow__fallback-kicker {
    margin: 0 0 34px;
    font: 500 clamp(34px, 4vw, 62px)/1.08 "Plus Jakarta Sans", sans-serif;
    letter-spacing: -.045em;
    text-align: center;
    color: var(--flow-ink);
}
.flow__fallback ol {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.flow__fallback li {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(89, 50, 193, .1);
    border-radius: 24px;
    background: #fff;
}
.flow__fallback strong,
.flow__fallback span { display: block; }
.flow__fallback strong { margin-bottom: 10px; font-size: 20px; color: var(--flow-ink); }
.flow__fallback span { font-size: 14px; line-height: 1.5; color: var(--flow-body); }

.flow__viewport {
    --flow-visible: 1920;
    --flow-focus: .95;
    --flow-stage-h: 900;
    --flow-fade: 0;
    container-type: inline-size;
    position: relative;
    height: calc(100cqw * var(--flow-stage-h) / var(--flow-visible));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--flow-fade) * 18%), #000 calc(100% - var(--flow-fade) * 18%), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--flow-fade) * 18%), #000 calc(100% - var(--flow-fade) * 18%), transparent 100%);
}

.flow__stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    height: calc(var(--flow-stage-h) * 1px);
    margin-left: -960px;
    transform: scale(var(--flow-scale, 1));
    transform-origin: 50% 0;
    background: var(--flow-bg);
    color: var(--flow-ink);
    font-family: "Plus Jakarta Sans", Nunito, system-ui, sans-serif;
}

@media (max-width: 1023px) {
    .flow__viewport { --flow-visible: 1360; --flow-focus: 1.2; }
}
@media (max-width: 639px) {
    .flow__viewport { --flow-visible: 980; --flow-focus: 1.5; --flow-stage-h: 1100; }
}

.flow__glow {
    position: absolute;
    /* Começa transparente na emenda superior. Assim o halo continua
       atrás dos cards sem alterar a cor do entalhe da seção anterior. */
    top: 0;
    left: 50%;
    width: 1500px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .48), transparent);
    transform: translateX(-50%);
}

.flow__world {
    position: absolute;
    inset: 0 auto auto 0;
    width: 2460px;
    height: calc(var(--flow-stage-h) * 1px);
    transform: translate(86.7px, 158.9px) scale(.71);
    transform-origin: 0 0;
    will-change: transform;
}

.flow-rail { position: absolute; top: 310px; width: 115px; height: 2px; }
.flow-rail__fill { display: block; width: 100%; height: 1.5px; background: var(--flow-line); transform-origin: left; }
.flow-rail__dot {
    position: absolute;
    top: -3px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--flow-accent);
    box-shadow: 0 0 0 6px rgba(89, 50, 193, .12);
    opacity: 0;
}

.flow-card {
    box-sizing: border-box;
    position: absolute;
    top: 140px;
    width: 400px;
    height: 540px;
    padding: 26px 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--flow-line);
    border-radius: 28px;
    background: var(--flow-paper);
    box-shadow: 0 20px 44px -26px rgba(58, 38, 138, .1);
    transform-origin: center;
}
.flow-card__num { font-size: 16px; letter-spacing: .22em; color: var(--flow-body); opacity: .75; }
.flow-card__chevbox { width: 58px; height: 58px; margin-top: 12px; display: grid; place-items: center; }
.flow-card__chev { position: relative; width: 40px; height: 28px; opacity: .35; }
.flow-card__chev i {
    position: absolute;
    top: 5px;
    width: 17px;
    height: 17px;
    border-top: 3.8px solid var(--flow-accent);
    border-right: 3.8px solid var(--flow-accent);
    border-radius: 2px;
    transform: rotate(45deg);
}
.flow-card__chev i:first-child { left: 1px; }
.flow-card__chev i:last-child { left: 14px; opacity: .55; }
.flow-card__name { margin: 16px 0 0; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--flow-ink); }
.flow-card__body { max-width: 300px; margin: 9px 0 0; font-size: 20px; line-height: 1.4; text-align: center; text-wrap: pretty; color: var(--flow-body); }
.flow-card__rule { width: 40px; height: 2px; margin-top: 16px; border-radius: 2px; background: var(--flow-line); }
.flow-card__visual { width: 100%; flex: 1; margin-top: 12px; opacity: .35; }
.flow-v { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.flow-bar { display: block; height: 7px; border-radius: 5px; background: var(--flow-line); }

/* 01 — Criar */
.flow-v--criar { position: relative; align-items: center; }
.flow-criar__sheet {
    box-sizing: border-box;
    width: 236px;
    height: 186px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--flow-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 30px -22px rgba(60, 40, 140, .35);
}
.flow-criar__sheet .flow-bar { width: 0; }
.flow-criar__sheet .flow-bar:first-child { height: 10px; background: #a68ce7; }
.flow-criar__plus {
    position: absolute;
    right: 44px;
    bottom: 8px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--flow-accent);
    box-shadow: 0 10px 22px -8px var(--flow-accent);
    transform: scale(0);
}
.flow-criar__plus i { position: absolute; border-radius: 2px; background: #fff; }
.flow-criar__plus i:first-child { width: 16px; height: 2.5px; }
.flow-criar__plus i:last-child { width: 2.5px; height: 16px; }

/* 02 — Configurar */
.flow-v--config { gap: 13px; }
.flow-sig {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border: 1px solid var(--flow-line);
    border-radius: 14px;
    background: #fff;
    opacity: 0;
}
.flow-sig__av { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #eee8fc; color: var(--flow-accent); font-size: 14px; font-weight: 700; }
.flow-sig__col { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.flow-sig__col .flow-bar:first-child { height: 8px; background: #ddd2f8; }
.flow-sig__col .flow-bar:last-child { width: 78px; height: 6px; }
.flow-sig__idx { width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid #c7b8ee; border-radius: 50%; color: var(--flow-accent); font-size: 13px; font-weight: 700; }

/* 03 — Enviar */
.flow-v--enviar { gap: 34px; }
.flow-chips { display: flex; justify-content: center; gap: 8px; }
.flow-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid var(--flow-line);
    border-radius: 999px;
    background: #fff;
    color: var(--flow-body);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    opacity: .35;
}
.flow-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--flow-line); }
.flow-track { position: relative; height: 56px; }
.flow-track__base, .flow-track__fill { position: absolute; top: 27px; left: 6px; height: 1.5px; }
.flow-track__base { right: 6px; background: var(--flow-line); }
.flow-track__fill { right: 6px; background: #a68ce7; transform: scaleX(0); transform-origin: left; }
.flow-track__doc {
    box-sizing: border-box;
    position: absolute;
    top: 6px;
    left: -4px;
    width: 46px;
    height: 42px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid #cbbdf0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 20px -12px var(--flow-accent);
    opacity: 0;
}
.flow-track__doc i { height: 4px; border-radius: 2px; background: var(--flow-line); }
.flow-track__doc i:first-child { width: 20px; background: #cbbcf1; }
.flow-track__doc i:nth-child(2) { width: 26px; }
.flow-track__doc i:last-child { width: 16px; }
.flow-track__check { position: absolute; top: 14px; right: -2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--flow-accent); transform: scale(0); }
.flow-track__check i { width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -2px); }

/* 04 — Assinar */
.flow-v--assinar { gap: 24px; }
.flow-sign { position: relative; height: 128px; border: 1px solid var(--flow-line); border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -24px rgba(60, 40, 140, .35); }
.flow-sign__svg { position: absolute; top: 14px; left: 22px; width: 236px; height: 84px; overflow: visible; }
.flow-sign__svg path { fill: none; stroke: var(--flow-accent); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.flow-sign__rule { position: absolute; right: 22px; bottom: 26px; left: 22px; height: 1.5px; background: var(--flow-line); }
.flow-sign__label { position: absolute; bottom: 8px; left: 22px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--flow-body); }
.flow-methods { display: flex; gap: 10px; }
.flow-method { flex: 1; padding: 10px 8px; border: 1px solid var(--flow-line); border-radius: 12px; background: #fff; color: var(--flow-body); font-size: 17px; font-weight: 600; text-align: center; opacity: .4; }

/* 05 — Acompanhar */
.flow-v--acompanhar { gap: 16px; }
.flow-prog__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.flow-prog__head span { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--flow-body); }
.flow-prog__pct { font-size: 19px; font-weight: 700; color: var(--flow-ink); font-variant-numeric: tabular-nums; }
.flow-prog__bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--flow-line); }
.flow-prog__fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--flow-accent); transform: scaleX(0); transform-origin: left; }
.flow-events { display: flex; flex-direction: column; gap: 9px; }
.flow-event { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--flow-body); opacity: 0; }
.flow-event__ico { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #eee8fc; }
.flow-event__ico i { width: 8px; height: 4.5px; border-left: 2px solid var(--flow-accent); border-bottom: 2px solid var(--flow-accent); transform: rotate(-45deg) translate(1px, -1px); }
.flow-badge { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--flow-accent); color: #fff; font-size: 14px; font-weight: 700; transform: scale(0); }

.flow__fundo { position: absolute; right: 0; bottom: 0; left: 0; height: 150px; background: linear-gradient(transparent, var(--flow-bg) 78%); pointer-events: none; }
.flow__title {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--flow-bg);
    opacity: 0;
}
.flow__title-rule { width: 46px; height: 3px; border-radius: 2px; background: var(--flow-accent); transform: scaleX(0); }
.flow__title-h { margin: 0; font-family: "Plus Jakarta Sans", "Space Grotesk", Nunito, sans-serif; font-size: 96px; font-weight: 500; letter-spacing: -.05em; line-height: 1.04; text-align: center; color: var(--flow-ink); }
.flow__title-h em { font-style: normal; color: var(--purple); }
.flow__title-sub { margin: 0; font-size: 24px; line-height: 1.7; color: var(--muted); }
.flow__close { position: absolute; right: 0; bottom: 118px; left: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; }
.flow__close-h { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -.03em; color: var(--flow-ink); }
.flow__close-sub { margin: 0; font-size: 19px; letter-spacing: .22em; text-transform: uppercase; color: var(--flow-body); }
.flow__veil { position: absolute; inset: 0; background: var(--flow-bg); opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
    .flow__fallback ol { grid-template-columns: 1fr; }
    .flow__fallback { padding: 72px 20px; }
}
@media (max-width: 639px) {
    .flow__title-h { font-size: 84px; }
    .flow__title-h em { display: block; }
    .flow__title-sub { font-size: 34px; }
}