/* ---------- 7. O PROCESSO NÃO PARA ---------- */
.fu { position: relative; padding-top: var(--s-9); }
.fu .sec-head { margin-bottom: var(--s-7); }
.fu-lead { margin: var(--s-6) auto 0; max-width: 40rem; font-size: var(--t-lg); color: var(--ink-2); text-wrap: pretty; }
.fu-lead b { color: var(--ink); }
.fu-stage { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.fu-text { display: grid; gap: var(--s-5); font-size: var(--t-lg); color: var(--ink-2); max-width: 30rem; }
.fu-text b { color: var(--ink); } .fu-text .g { color: var(--accent); }

/* diagrama de duas faixas: cliente à esquerda, sistema à direita */
.seq-wrap { display: grid; gap: var(--s-4); }
.lanes { display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); }
.lanes span:last-child { color: var(--accent); }
.seq { position: relative; display: grid; gap: .9rem; --fill: 1; }
.seq::before, .seq::after { content: ""; position: absolute; left: calc(50% - 1px); top: .6rem; bottom: .6rem; width: 2px; border-radius: 2px; }
.seq::before { background: var(--line-strong); }
.seq::after { background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--fill)); }
.ev { --lit: 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 2.6rem; }
.ev::before { content: ""; position: absolute; left: calc(50% - .45rem); top: 50%; translate: 0 -50%; width: .9rem; height: .9rem; border-radius: 50%; z-index: 1; box-sizing: border-box;
  background: color-mix(in oklab, var(--bg) calc((1 - var(--lit)) * 100%), var(--accent) calc(var(--lit) * 100%));
  border: 2px solid color-mix(in oklab, var(--line-strong) calc((1 - var(--lit)) * 100%), var(--accent) calc(var(--lit) * 100%)); }
.ev-t { padding: .55rem 1rem; border-radius: var(--radius-m); font-weight: 560; font-size: var(--t-base); line-height: 1.2; border: 1px solid var(--line-strong); background: var(--bg-raised);
  color: color-mix(in oklab, var(--ink-3) calc((1 - var(--lit)) * 100%), var(--ink) calc(var(--lit) * 100%)); transform: translateY(calc((1 - var(--lit)) * 8px)); opacity: calc(.45 + var(--lit) * .55); }
.ev.cli .ev-t { grid-column: 1; justify-self: end; margin-right: 1.5rem; }
.ev.sys .ev-t { grid-column: 2; justify-self: start; margin-left: 1.5rem; border-color: var(--accent-soft); background: var(--accent-soft); }
.ev.end .ev-t { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
.ev.end { --pop: 1; }
.fu.is-pinned .fu-pin { height: calc(100svh - var(--nav-h)); display: grid; align-items: center; }
.fu-close-wrap { padding: var(--s-9) 0 var(--s-10); }
@media (max-width: 56rem) { .fu-stage { grid-template-columns: 1fr; } }

/* pagamentos */
.pay { position: relative; padding-top: var(--s-8); }
.pay .sec-head { margin-bottom: var(--s-8); }
.pay-callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; }
.callout { display: grid; gap: var(--s-4); align-content: start; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--radius-l); background: var(--bg-raised); border: 1px solid var(--line); border-top-width: 2px; }
.callout.pain { border-top-color: var(--danger); }
.callout.good { border-top-color: var(--accent); }
.callout .tag.pain { color: var(--danger); border-color: var(--danger); justify-self: start; }
.callout .tag.good { justify-self: start; }
.callout .accent { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -.02em; font-size: var(--t-h3); line-height: 1.15; color: var(--ink); }
.callout p { color: var(--ink-2); text-wrap: pretty; }
.callout p b { color: var(--ink); } .callout .g { color: var(--accent); }
.callout .punch { color: var(--ink); font-weight: 560; font-size: var(--t-lg); padding-top: var(--s-2); }
.chipline { display: flex; }
.arrow-down { color: var(--accent); }
@media (max-width: 56rem) { .pay-callouts { grid-template-columns: 1fr; } }

/* cenários em abas */
.scen { margin-top: var(--s-9); }
.tabs { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--bg-raised); margin: 0 auto var(--s-8); display: grid; width: min(100%, 44rem); }
.tabs button { position: relative; z-index: 1; min-height: 3.4rem; padding: .5rem .8rem; border-radius: calc(var(--radius-m) - 3px); color: var(--ink-3); font-weight: 600; font-size: var(--t-sm); line-height: 1.2; transition: color var(--d-base) ease; display: grid; align-content: center; gap: .1rem; }
.tabs button small { font-size: .6875rem; font-weight: 500; opacity: .8; }
.tabs button[aria-selected="true"] { color: var(--accent-ink); }
.tab-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: calc(var(--radius-m) - 3px); background: var(--accent); transition: transform var(--d-slow) var(--ease-out), width var(--d-slow) var(--ease-out); }
.scen:not(.is-tabs) .tab-ind { display: none; }
.scen:not(.is-tabs) .tabs { display: none; }
.scen:not(.is-tabs) .panel + .panel { margin-top: var(--s-9); }
.panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.panel[hidden] { display: none; }
.panel-text { display: grid; gap: var(--s-4); align-content: center; }
.panel-text h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--t-h3); line-height: 1.1; }
.panel-text p { color: var(--ink-2); text-wrap: pretty; max-width: 32rem; }
.panel-text p b { color: var(--ink); } .panel-text .g { color: var(--accent); } .panel-text .k { color: var(--ink); font-weight: 560; }
.panel-text .kicker { color: var(--ink); font-weight: 560; }
.panel-scene { display: flex; gap: var(--s-6); justify-content: center; align-items: center; flex-wrap: wrap; }
.panel-scene .phone-s { height: 25rem; flex: none; }
.order { width: min(16rem, 100%); padding: var(--s-5); border-radius: var(--radius-m); background: var(--bg-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel); display: grid; gap: var(--s-3); }
.order-h { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.order-h svg { width: 1rem; height: 1rem; color: var(--accent); }
.order-t { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.15rem; line-height: 1.2; }
.order ul { display: grid; gap: .45rem; }
.order li { display: grid; gap: .05rem; font-size: var(--t-xs); color: var(--ink-3); }
.order li b { font-weight: 560; color: var(--ink); font-size: var(--t-sm); }
.order-s { font-size: var(--t-xs); font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: .5rem; padding: .35rem .6rem; }
.pay-close-wrap { padding: var(--s-9) 0 var(--s-10); }
@media (max-width: 56rem) { .panel { grid-template-columns: 1fr; } .tabs button { font-size: .8125rem; padding: .4rem .3rem; } }

/* dica acima das abas */
.scen-hint { margin: 0 auto var(--s-4); text-align: center; text-wrap: balance; font-size: var(--t-lg); font-weight: 600; color: var(--accent); }