/* ---------- Hero art · Fluxo (antes → depois), composição limpa em coluna ---------- */
.flow { --mx: 0; --my: 0; position: relative; max-width: 440px; margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1.4rem; }
.flow__bg { position: absolute; inset: -10% -14%; pointer-events: none; z-index: 0; }
.flow__bg i { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0; transition: opacity 1.2s ease .2s; }
.flow__bg i:nth-child(1) { width: 62%; height: 55%; left: -4%; top: 0; background: rgba(37,99,235,.12); }
.flow__bg i:nth-child(2) { width: 58%; height: 55%; right: -4%; bottom: 0; background: rgba(14,165,233,.14); }
.flow__bg i:nth-child(3) { display: none; }
.flow.is-on .flow__bg i { opacity: 1; }

.flow__card { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); padding: 1.15rem 1.35rem; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k k" "v l" "bar bar"; column-gap: 1rem; row-gap: .3rem; align-items: end; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.flow.is-on .flow__card { opacity: 1; transform: translate3d(calc(var(--mx) * var(--z) * -4px), calc(var(--my) * var(--z) * -4px), 0); }
.flow__card--before { transition-delay: .1s; }
.flow.is-on .flow__card--before { opacity: .78; }
.flow__card--after { transition-delay: 1.3s; border-color: #CFDDF3; box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-lg); grid-template-areas: "k k" "v l" "bar bar" "eco eco"; }
.flow__k { grid-area: k; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .2rem; white-space: nowrap; }
.flow__card--after .flow__k { color: var(--accent); }
.flow__k svg { width: 15px; height: 15px; }
.flow__v { grid-area: v; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4.4vw, 2.9rem); line-height: 1; letter-spacing: -.03em; color: var(--primary); font-variant-numeric: tabular-nums; }
.flow__v small { font-size: .45em; font-weight: 700; margin-left: 2px; color: var(--text-muted); }
.flow__card--after .flow__v small { color: var(--accent); }
.flow__l { grid-area: l; font-size: .84rem; color: var(--text-muted); text-align: right; padding-bottom: .25rem; }
.flow__bar { grid-area: bar; height: 8px; border-radius: 999px; background: var(--bg-softer); overflow: hidden; margin-top: .45rem; }
.flow__bar i { display: block; height: 100%; border-radius: 999px; background: var(--border-strong); transition: width 1.4s cubic-bezier(.22,.61,.36,1) 1.6s; }
.flow__bar--good i { background: linear-gradient(90deg, var(--accent), var(--sky)); }
.flow__eco { grid-area: eco; margin-top: .9rem; padding-top: .85rem; border-top: 1px dashed var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.flow__eco span { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.flow__eco strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.flow__eco strong small { font-size: .6em; font-weight: 600; color: var(--text-muted); margin-left: 2px; }

/* conector vertical entre os cartões */
.flow__link { position: relative; z-index: 2; height: 78px; display: flex; align-items: center; justify-content: center; gap: .8rem; opacity: 0; transition: opacity .5s ease .7s; }
.flow.is-on .flow__link { opacity: 1; }
.flow__path { position: absolute; left: 50%; top: 0; height: 100%; width: 3px; transform: translateX(-50%); overflow: visible; }
.flow__path path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 7; stroke-dashoffset: 120; opacity: .55; vector-effect: non-scaling-stroke; }
.flow.is-on .flow__path path { animation: flowDash .9s cubic-bezier(.4,0,.2,1) .75s forwards; }
@keyframes flowDash { to { stroke-dashoffset: 0; } }
.flow__pulse { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-accent); transform: scale(.6); transition: transform .55s cubic-bezier(.34,1.56,.64,1) .95s; }
.flow.is-on .flow__pulse { transform: scale(1); }
.flow__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.flow.is-on .flow__pulse::after { animation: flowPing 1.5s ease-out 1.15s 2; }
@keyframes flowPing { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.45); opacity: 1; } 100% { box-shadow: 0 0 0 20px rgba(37,99,235,0); opacity: 0; } }
.flow__pulse svg { width: 20px; height: 20px; }
.flow__linkt { position: relative; font-size: .82rem; font-weight: 700; color: var(--primary); display: flex; flex-direction: column; line-height: 1.25; opacity: 0; transition: opacity .5s ease 1.2s; background: rgba(255,255,255,.92); padding: 7px 12px; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.flow__linkt em { font-style: normal; font-weight: 500; font-size: .72rem; color: var(--text-muted); }
.flow.is-on .flow__linkt { opacity: 1; }

/* chip "respondido" — ancorado no canto do cartão final */
.flow__chip { position: absolute; z-index: 3; right: -10px; bottom: 2px; display: inline-flex; align-items: center; gap: .45rem; background: var(--bg-dark); color: var(--on-dark); font-size: .8rem; padding: 8px 13px; border-radius: 999px; box-shadow: var(--shadow-lg); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s ease 2.7s, transform .7s cubic-bezier(.22,.61,.36,1) 2.7s; }
.flow__chip b { color: #fff; }
.flow__chip svg { width: 15px; height: 15px; color: var(--sky); }
.flow.is-on .flow__chip { opacity: 1; transform: none; }
.flow__fine { position: absolute; left: 2px; bottom: -4px; font-size: .7rem; color: var(--text-faint); }

/* respiro sutil */
@keyframes flowFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.flow.is-on .flow__card--after { animation: flowFloat 6s ease-in-out 3.4s infinite; }

.flow--reforma .flow__card--before .flow__v { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
.flow--reforma .flow__card--before .flow__v small { font-size: .6em; margin: 0 .1em; }
.flow--reforma .flow__card--after .flow__v { font-size: clamp(1.9rem, 3.8vw, 2.5rem); }
.flow--reforma .flow__fine { position: static; display: block; margin-top: 1.1rem; max-width: 60%; line-height: 1.3; }
.flow--reforma { padding-bottom: .4rem; }
.flow--reforma .flow__chip { bottom: 30px; }

.hero--bold .flow__card { box-shadow: 0 30px 70px -28px rgba(0,0,0,.6); }
.hero--bold .flow__linkt { background: rgba(255,255,255,.95); }
.hero--bold .flow__fine { color: var(--on-dark-muted); }

@media (max-width: 980px) { .flow { max-width: 420px; } }
@media (max-width: 520px) {
  .flow__card { padding: 1rem 1.1rem; }
  .flow__link { height: 64px; }
  .flow__linkt { font-size: .76rem; }
  .flow__chip { right: 0; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__card, .flow__chip, .flow__link, .flow__bg i, .flow__pulse, .flow__linkt { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
  .flow__card--before { opacity: .78 !important; }
  .flow__bar i { transition: none; }
  .flow__path path { stroke-dashoffset: 0; animation: none; }
}