/* /financeiro-honorarios — hero com foto, seções r2 (texto | motion), faixa e fechamento. */
.fh-num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------- Hero ---------- */
.fh-hero{padding-block:clamp(48px,6vw,104px) var(--space-section)}
.fh-hero-text{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;max-width:980px;margin-inline:auto}
.fh-h1{font-size:clamp(2.2rem,1.2rem + 3vw,4.1rem);line-height:1.05;max-width:21ch}
.fh-hero-lead{max-width:60ch}
.fh-hero-cta{justify-content:center;margin-top:4px}
.fh-hero-visual{margin-top:clamp(48px,6vw,88px)}
.photo.fh-hero-photo{aspect-ratio:21/9}
.fh-hero-photo figcaption{max-width:440px}
.fh-hero-keys{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0}
.fh-hero-keys li{display:flex;align-items:center;font-size:var(--fs-small);color:var(--ink-2);letter-spacing:-.005em;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fh-hero-keys li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--neutral);margin-inline:16px}
.is-armed .fh-hero-keys li{opacity:0;transform:translateY(6px)}
.fh-hero-keys li.in{opacity:1;transform:none}
@media (max-width:760px){.photo.fh-hero-photo{aspect-ratio:4/3}}
@media (max-width:560px){
  .fh-hero-text{align-items:flex-start;text-align:left}
  .fh-hero-cta{justify-content:flex-start}
  .photo.fh-hero-photo{aspect-ratio:4/5}
  .fh-hero-keys{justify-content:flex-start;gap:6px 18px}
  .fh-hero-keys li + li::before{display:none}
}
/* ---------- Fechamento ---------- */
.fh-close-t{max-width:22ch}
.fh-close-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-top:clamp(36px,4vw,56px);padding-top:28px;border-top:1px solid var(--line-2)}
.fh-close-row .body{max-width:44ch}
@media (max-width:720px){.photo.fh-hero-photo{aspect-ratio:1/1}.fh-hero-visual{margin-top:40px}}
@media (min-width:981px){
  .fh-hero > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(48px,6vw,104px);align-items:center}
  .fh-hero-text{align-items:flex-start;text-align:left;max-width:none;margin:0}
  .fh-h1{font-size:clamp(2.2rem,1.2rem + 2.6rem,3.6rem);max-width:15ch}
  .fh-hero-lead{max-width:44ch}
  .fh-hero-visual{margin-top:0}
  .photo.fh-hero-photo{aspect-ratio:4/3}
  .fh-hero-keys{justify-content:flex-start}
  .fh-hero-text > .x-pill{align-self:flex-start;margin-inline:0}
}
.fh-close-row .r2-body{max-width:44ch;margin:0 !important}

/* =====================================================================
   Motions da página (padrão mv/r2). Peças sx e mv vêm de src/styles/sysmock.css.
   Estados ocultos só com .sx.is-armed; sem JS ou com movimento reduzido, estado final.
   ===================================================================== */

/* 1 · dois financeiros: lançamentos se separam */
.fh-sep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fh-sep-c{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--sx-line);min-width:0}
.fh-sep-c.is-cli{background:var(--paper);border-style:dashed;border-color:var(--sx-line2)}
.fh-sep-k{display:flex;flex-direction:column;gap:2px;transition:opacity .4s}
.fh-sep-k b{font-family:var(--f-brand);font-weight:500;font-size:15px}
.fh-sep-k span{font-size:12.5px;color:var(--sx-ink3)}
.sx.is-armed .fh-sep:not(.is-done) .fh-sep-k{opacity:.45}
.fh-sep ul{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.fh-sep li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--sx-line);border-radius:12px;transition:transform .6s var(--sx-ease),box-shadow .4s}
.sx.is-armed .fh-sep li:not(.in){transform:translateX(var(--x)) rotate(var(--r));box-shadow:0 12px 24px -16px rgba(10,20,60,.4);z-index:1}
@container (max-width:520px){
  .fh-sep{gap:8px}
  .fh-sep-c{padding:12px 10px}
  .fh-sep li{grid-template-columns:minmax(0,1fr);padding:10px}
  .fh-sep li .sx-ic{display:none}
  .fh-sep .mv-tt b,.fh-sep .mv-tt span{white-space:normal}
}

/* 2 · honorário: a cobrança se monta */
.fh-fat{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px 22px;box-shadow:0 30px 60px -44px rgba(10,20,60,.4)}
.fh-fat-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px}
.fh-fat-h .mv-tt b{font-size:17px}
.fh-fat-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-top:1px dashed var(--sx-line2)}
.fh-src{font-size:12px;font-weight:500;color:var(--sx-ink2);background:var(--sx-wash);border-radius:999px;padding:3px 9px;white-space:nowrap}
.fh-src.blue{background:var(--sx-blue-b);color:var(--sx-blue-t)}
.fh-v{font-family:var(--f-brand);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fh-fat-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;border-top:1.5px solid var(--ink)}
.fh-fat-t span{font-size:13px;color:var(--sx-ink2)}
.fh-tot{font-family:var(--f-brand);font-weight:400;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fh-fat-f{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--sx-ink3)}
.fh-fat-f svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
@container (max-width:520px){
  .fh-fat{padding:16px}
  .fh-fat-l li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .fh-fat-l .fh-src{grid-column:1 / -1;justify-self:start}
  .fh-fat-l .mv-tt span{white-space:normal}
}

/* 3 · contas a receber: o mês num gráfico */
.fh-rc{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.fh-stk{position:relative;height:16px;margin:18px 0 14px;border-radius:8px;overflow:hidden;background:var(--sx-wash)}
.fh-stk i{position:absolute;inset:0;transform-origin:left;transition:transform 1s var(--sx-ease)}
.fh-stk .v{background:var(--sx-al);transform:scaleX(1)}
.fh-stk .a{background:#9CC9FF;transform:scaleX(.9545)}
.fh-stk .r{background:var(--sx-blue);transform:scaleX(var(--r,.5487))}
.sx.is-armed .fh-stk:not(.in) i{transform:scaleX(0)}
.fh-lg li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sx-ink2);padding:4px 0}
.fh-lg i{width:10px;height:10px;border-radius:3px;flex:none}
.fh-lg i.r{background:var(--sx-blue)}.fh-lg i.a{background:#9CC9FF}.fh-lg i.v{background:var(--sx-al)}
.fh-lg b{margin-left:auto;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.fh-pay{margin-top:14px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--paper)}
.fh-pay .mv-tt b,.fh-pay .mv-tt span{white-space:normal}

/* 4 · cobrança: conversa com contexto */
.fh-cb{background:#fff;border-radius:18px;padding:18px 20px}
.fh-cb-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--sx-line)}
.fh-cb-b{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.fh-day{font-size:12px;color:var(--sx-ink3)}
.fh-cb-b .fh-day:nth-child(1){align-self:flex-end}
.fh-cb-b .mv-bub{font-size:13.5px}
.fh-cb-b .mv-bub.out{align-self:flex-end}
.fh-in{align-self:flex-start;border-bottom-left-radius:6px;background:var(--paper)}
.fh-deal{display:flex;align-items:center;gap:12px;margin-top:4px;padding:12px 14px;border-radius:12px;background:var(--sx-blue-b)}
.fh-deal .mv-tt span{white-space:normal}
@container (max-width:520px){.fh-cb{padding:14px}.fh-cb-h{flex-wrap:wrap}}

/* 5 · lembrete: calendário até o vencimento */
.fh-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fh-d{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;background:#fff;border:1px solid var(--sx-line);border-radius:12px;text-align:center;transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease),background .3s,border-color .3s}
.sx.is-armed .fh-d:not(.in){opacity:0;transform:translateY(8px)}
.fh-d b{font-family:var(--f-brand);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.fh-d span{font-size:12px;color:var(--sx-ink3);min-height:17px}
.fh-d.due{border-color:rgba(255,59,48,.35)}.fh-d.due span{color:var(--sx-al-t)}
.fh-d.is-hi{background:var(--sx-blue-b);border-color:rgba(0,122,255,.45)}.fh-d.is-hi span{color:var(--sx-blue-t)}
.fh-rule{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:16px 0 12px;font-size:13px;color:var(--sx-ink2)}
.fh-draft{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:14px 16px;box-shadow:0 24px 48px -36px rgba(10,20,60,.45)}
.fh-draft-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fh-draft > p{margin:10px 0 0;font-size:13.5px;line-height:1.5}
.fh-draft-b{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* 6 · contas a pagar: lista com total */
.fh-apw{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.fh-ap-h{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
.fh-ap li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 8px;margin:0 -8px;border-top:1px solid var(--sx-line);border-radius:10px;transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease),background .3s}
.fh-ap li.is-hi{background:var(--sx-blue-b)}
.fh-ap li.is-done .mv-box{background:var(--sx-ok);border-color:var(--sx-ok);color:#fff}
.fh-ap-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.fh-ap-r b{font-family:var(--f-brand);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}
@container (max-width:520px){
  .fh-apw{padding:16px}
  .fh-ap li{grid-template-columns:auto minmax(0,1fr)}
  .fh-ap-r{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
}

/* 7 · bancos: extrato e honorário se encontram */
.fh-bk-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--sx-ink2)}
.fh-bk-top span{display:inline-flex;align-items:center;gap:8px}
.fh-bk-top svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.fh-bk-top b{font-weight:500;color:var(--ink)}
.fh-pair{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center;margin:16px 0}
.fh-pc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px;background:#fff;border:1px solid var(--sx-line);border-radius:16px;min-width:0;transition:transform .6s var(--sx-ease),border-color .3s}
.fh-pc-k{font-size:12px;color:var(--sx-ink3);margin-bottom:4px}
.fh-pc > b:not(.fh-v){font-family:var(--f-brand);font-weight:500;font-size:14.5px}
.fh-pc > span:not(.sx-badge){font-size:12.5px;color:var(--sx-ink3)}
.fh-pc .fh-v{font-size:22px;font-weight:400;letter-spacing:-.02em;margin:6px 0 8px}
.fh-link{display:flex;align-items:center;height:2px;margin:0 6px}
.fh-link i{flex:1;height:2px;background:var(--sx-blue);transform-origin:left;transform:scaleX(1);transition:transform .6s var(--sx-ease),background .3s}
.sx.is-armed .fh-pair:not(.is-near) .fh-link i{transform:scaleX(0)}
.sx.is-armed .fh-pair:not(.is-near) .fh-pc-a{transform:translateX(-14px)}
.sx.is-armed .fh-pair:not(.is-near) .fh-pc-b{transform:translateX(14px)}
.fh-pair.is-ok .fh-pc{border-color:rgba(52,199,89,.5)}
.fh-pair.is-ok .fh-link i{background:var(--sx-ok)}
.fh-sug{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--sx-line)}
.fh-sug .mv-k{padding-left:0}
.fh-sug-b{display:flex;gap:8px}
@container (max-width:520px){
  .fh-pair{grid-template-columns:minmax(0,1fr);gap:0}
  .fh-link{height:24px;width:2px;margin:0 0 0 28px}
  .fh-link i{width:2px;height:24px;flex:none;transform-origin:top}
  .sx.is-armed .fh-pair:not(.is-near) .fh-link i{transform:scaleY(0)}
  .sx.is-armed .fh-pair:not(.is-near) .fh-pc-a{transform:translateY(-8px)}
  .sx.is-armed .fh-pair:not(.is-near) .fh-pc-b{transform:translateY(8px)}
}
/* celular (24/10): textos curtos alinhados em grade, sem sobra torta à direita */
@media (max-width:720px){
  .fh-hero-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;justify-items:start}
  .fh-hero-keys li{gap:8px;white-space:nowrap}
  .fh-hero-keys li::before,.fh-hero-keys li + li::before{content:"";display:block;width:5px;height:5px;margin:0;border-radius:50%;background:var(--blue);flex:none}
  .fh-rule{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;justify-items:start;gap:8px 10px}
}
@media (max-width:360px){.fh-hero-keys{grid-template-columns:repeat(2,minmax(0,1fr))}}