/* Apresentação do croqui: prancheta noturna (planta baixa), laranja THB para dinheiro e holding,
   coral para o que se perde, menta para o que se salva.
   Cada folha é composta num quadro FIXO de 1600×900 (medidas em px de desenho) e o quadro inteiro escala
   para caber na janela, com tarja (letterbox). Nada rola: o que não couber é redesenhado. */
.palco, .impressao {
  --bp: #0a1622; --bp-2: #0f2133; --bp-3: #13283d; --traco: #8cc8ff; --traco-2: hsl(206 90% 77% / .35);
  --grade: hsl(206 90% 77% / .07); --grade-2: hsl(206 90% 77% / .035);
  --txt: #eef2f7; --mudo: #93a6ba; --laranja: #ff6e1a; --ouro: #ffb15c; --perda: #ff6b5a; --ganho: #5fe0a8; --veic: #c9a8ff;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --fundo:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, hsl(210 60% 3% / .75) 100%),
    linear-gradient(var(--grade) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, var(--grade) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(var(--grade-2) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grade-2) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bp);
}
.palco { position: fixed; inset: 0; z-index: 10; color: var(--txt); display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #04080c; }
.palco[hidden] { display: none; }
body.apresentando { overflow: hidden; }
.palco-vista { position: relative; overflow: hidden; }
.quadro { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform: translate(-50%, -50%) scale(var(--k, 1)); background: var(--fundo); display: grid; grid-template-rows: 64px 836px; overflow: hidden; box-shadow: 0 0 0 1px hsl(206 90% 77% / .12); }
.palco-tela { position: relative; overflow: hidden; outline: none; view-transition-name: folha; }
.palco-barra { display: flex; gap: 8px; align-items: center; padding: 8px 16px; background: hsl(210 50% 5% / .92); border-top: 1px solid var(--traco-2); }
.palco-barra button { background: transparent; color: var(--txt); border: 1px solid var(--traco-2); border-radius: 999px; min-height: 40px; min-width: 44px; padding: 0 14px; cursor: pointer; font: 500 .85rem var(--mono); }
.palco-barra button:hover { border-color: var(--laranja); }
.palco-dica { font: .74rem var(--mono); color: var(--ouro); letter-spacing: .06em; white-space: nowrap; }
.palco-progresso { flex: 1; display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; }
.palco-progresso i { width: 14px; height: 3px; border-radius: 3px; background: var(--traco-2); }
.palco-progresso i.visto { background: var(--traco); }
.palco-progresso i.atual { background: var(--laranja); width: 28px; }
.palco-progresso span { font: .78rem var(--mono); color: var(--mudo); margin-left: 8px; }
.palco-notas { position: absolute; right: 16px; bottom: 72px; z-index: 3; width: min(28rem, calc(100% - 32px)); background: #fff8e8; color: #1c1714; border-radius: 10px; padding: 14px; white-space: pre-wrap; box-shadow: 0 20px 50px -20px #000; }
@media (max-width: 640px) { .palco-barra [data-palco="tela"], .palco-barra [data-palco="notas"], .palco-dica, .palco-progresso i { display: none; } }

/* HUD: o fio narrativo, o que chega aos herdeiros */
.hud { display: grid; grid-template-columns: auto 260px minmax(0, 1fr) auto auto; align-items: center; gap: 24px; padding: 0 48px; background: hsl(210 55% 5% / .85); border-bottom: 1px solid var(--traco-2); position: relative; z-index: 2; }
.hud:empty { display: block; }
.hud-rot { font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); }
.hud-v { font: 600 36px/1 var(--serifa); font-variant-numeric: tabular-nums; color: var(--txt); transition: color .6s; white-space: nowrap; }
.hud-trilho { height: 12px; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg, hsl(5 100% 68% / .6) 0 6px, hsl(5 100% 68% / .18) 6px 12px); box-shadow: inset 0 0 0 1px hsl(206 90% 77% / .2); }
.hud-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3d6a92, var(--traco)); transition: width 1s var(--ease), background .6s; }
.hud-nota { font: 14px var(--mono); color: var(--txt); white-space: nowrap; }
.hud-pat { font: 13px var(--mono); color: var(--mudo); white-space: nowrap; }
.hud[data-tom="perda"] .hud-v { color: var(--perda); }
.hud[data-tom="perda"] .hud-fill { background: linear-gradient(90deg, #6e2416, var(--perda)); }
.hud[data-tom="modelo"] .hud-v { color: var(--ouro); }
.hud[data-tom="modelo"] .hud-fill { background: linear-gradient(90deg, #8a3c0c, var(--ouro)); }
.hud[data-tom="ganho"] .hud-v { color: var(--ganho); }
.hud[data-tom="ganho"] .hud-fill { background: linear-gradient(90deg, #1d6b4b, var(--ganho)); }

/* transição de cena entre folhas (View Transitions); sem ela, a folha entra com fade */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(folha) { animation: vt-sai .45s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(folha) { animation: vt-entra .7s cubic-bezier(.2, .7, .2, 1) both; }
html[data-dir="tras"]::view-transition-old(folha) { animation-name: vt-sai-t; }
html[data-dir="tras"]::view-transition-new(folha) { animation-name: vt-entra-t; }
@keyframes vt-sai { to { opacity: 0; transform: translateX(-80px) scale(.98); filter: blur(6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateX(110px) scale(1.01); filter: blur(8px); } }
@keyframes vt-sai-t { to { opacity: 0; transform: translateX(80px) scale(.98); filter: blur(6px); } }
@keyframes vt-entra-t { from { opacity: 0; transform: translateX(-110px) scale(1.01); filter: blur(8px); } }

/* passos */
[data-p], [data-ate] { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.oculto { opacity: 0; transform: translateY(12px); pointer-events: none; }
.sumido, [data-fora] { display: none !important; }

/* folha: 1600×836 (abaixo do HUD) */
.s { position: relative; height: 836px; padding: 36px 96px 60px; margin: 0; animation: entra .6s var(--ease); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
html.vt .s { animation: none; }
.s h1, .s h2 { text-wrap: balance; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }
.s-cab { margin-bottom: 28px; }
.kicker { font: 600 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ouro); margin: 0 0 8px; }
.s h2 { font: 600 52px/1.06 var(--serifa); margin: 0; letter-spacing: -.015em; }
.s-sub { color: var(--mudo); margin: 8px 0 0; font-size: 20px; }
.mono { font-family: var(--mono); }
.mudo { color: var(--mudo); }
.nota { color: var(--mudo); max-width: 1000px; margin: 20px 0 0; font-size: 16px; }
.rotulo-sec { font: 600 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--traco); margin: 28px 0 12px; }
.duas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
.destaque { border: 1px solid var(--traco-2); border-radius: 16px; padding: 26px 28px; background: hsl(210 50% 8% / .78); }
.destaque p { margin: 6px 0; font-size: 18px; }
.destaque .valor { font: 600 60px/1 var(--serifa); margin: 10px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.destaque.ruim { border-color: var(--perda); box-shadow: 0 0 60px -20px var(--perda); }
.destaque.ruim .valor { color: var(--perda); }
.destaque.bom { border-color: var(--ganho); box-shadow: 0 0 60px -24px var(--ganho); margin-top: 16px; }
.destaque.bom .valor { color: var(--ganho); }
.destaque .mono { font-size: 14px; color: var(--mudo); }
.ganho { color: var(--ganho); } .perda { color: var(--perda); }

/* carimbo de prancha técnica */
.carimbo { position: absolute; right: 40px; bottom: 14px; display: grid; grid-template-columns: auto auto; border: 1px solid var(--traco-2); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mudo); z-index: 1; }
.carimbo > * { padding: 3px 8px; border: 1px solid hsl(206 90% 77% / .12); }
.carimbo b { grid-column: 1 / -1; color: var(--traco); font-weight: 600; }

/* capa e encerramento: vídeo de fundo (o pôster é a foto) */
.s-capa { justify-content: center; padding: 0 120px; }
.foto-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: zoom 18s ease-out both; }
.veu { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bp) 0%, hsl(210 55% 8% / .86) 36%, hsl(210 55% 8% / .1) 74%), linear-gradient(0deg, var(--bp) 0%, transparent 34%); }
.capa-txt { position: relative; max-width: 760px; }
.s-capa h1 { font: 600 92px/1.02 var(--serifa); margin: 12px 0 16px; letter-spacing: -.02em; }
.s-capa h1 em { color: var(--laranja); font-style: italic; display: block; }
.s-capa .s-sub { font-size: 22px; }
@keyframes zoom { from { transform: scale(1.08); } }
blockquote { font: italic 400 30px/1.35 var(--serifa); color: #dfe6ee; margin: 0; max-width: 34ch; }
.ficha-tec { position: absolute; left: 120px; bottom: 64px; margin: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 0; border-top: 1px solid var(--traco-2); }
.ficha-tec div { padding: 12px 40px 0 0; }
.ficha-tec dt { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); }
.ficha-tec dd { margin: 4px 0 0; font: 500 17px var(--serifa); max-width: 420px; }

/* quem detém o controle */
.arvore { display: grid; justify-items: center; }
.arv-tit, .arv-her { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pessoa { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; border: 1px solid var(--traco); border-radius: 999px; background: var(--bp-2); }
.pessoa b { font: 600 19px var(--serifa); }
.ini { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--laranja); color: #1c1714; font: 700 19px var(--serifa); }
.pessoa-her { border-style: dashed; border-color: var(--ganho); }
.pessoa-her .ini { background: var(--ganho); }
.regime { font: 12px var(--mono); color: var(--mudo); text-transform: uppercase; letter-spacing: .1em; padding: 0 6px; border-top: 1px dashed var(--traco-2); }
.arv-chave { color: var(--ouro); margin: 14px 0 0; display: flex; gap: 8px; align-items: center; font-size: 18px; }
.arv-desce { width: 2px; height: 44px; background: linear-gradient(var(--traco), var(--ganho)); margin: 12px 0; }
.selos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.selos li { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--traco-2); border-radius: 14px; background: hsl(210 50% 8% / .6); font-size: 18px; }
.selos li span:last-child { color: var(--mudo); font-size: 15px; }
.selo { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #1c1714; font-size: 24px; background: radial-gradient(circle at 35% 30%, #ffc98f, var(--laranja) 60%, #b84400); box-shadow: inset 0 -3px 6px hsl(20 90% 20% / .6), 0 6px 18px -6px var(--laranja); }
.selos li:nth-child(2) { transition-delay: .08s; } .selos li:nth-child(3) { transition-delay: .16s; } .selos li:nth-child(4) { transition-delay: .24s; }

/* diagnóstico */
.legenda { display: flex; gap: 24px; font: 13px var(--mono); color: var(--mudo); margin-bottom: 14px; }
.legenda i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.lg-dec, .bem-barra .dec { background: linear-gradient(90deg, #4f6f8f, var(--traco)); }
.lg-val, .bem-barra .val { background: repeating-linear-gradient(135deg, var(--laranja) 0 6px, hsl(22 100% 55% / .45) 6px 12px); }
.bens-g { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 6px; max-height: 420px; }
.bens-g li { display: grid; grid-template-columns: 340px 1fr 230px; gap: 20px; align-items: center; }
.bem-nome { display: flex; gap: 10px; align-items: center; color: var(--traco); }
.bem-nome span { color: var(--txt); font-size: 17px; line-height: 1.2; }
.bem-nome small, .bem-v small { display: block; white-space: nowrap; color: var(--mudo); font: 12px var(--mono); }
.bens-g.muitos .bem-nome small, .bens-g.muitos .bem-v small { display: none; }
.bens-g.muitos .bem-nome span { font-size: 15px; }
.bem-barra { position: relative; height: 20px; }
.bem-barra i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.bem-barra .dec { left: 0; width: var(--c); }
.bem-barra .val { left: var(--c); width: calc(var(--m) - var(--c)); transition: width 1s var(--ease); }
.bem-barra .val.oculto { width: 0; opacity: 1; transform: none; }
.bem-v { text-align: right; font: 600 19px var(--serifa); }
.cota { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 30px; font: 15px var(--mono); }
.cota-l { color: var(--traco); } .cota-r { color: var(--laranja); }
.cota-seta { position: relative; height: 2px; background: var(--ouro); }
.cota-seta::before, .cota-seta::after { content: ""; position: absolute; top: -6px; width: 2px; height: 14px; background: var(--ouro); }
.cota-seta::before { left: 0; } .cota-seta::after { right: 0; }
.cota-seta span { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); background: var(--bp); padding: 0 10px; color: var(--ouro); font-weight: 700; font-size: 18px; white-space: nowrap; }

/* prejuízo: 100 blocos */
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: 440px; aspect-ratio: 1; }
.waffle-box .mono { font-size: 13px; }
.q { border-radius: 3px; background: linear-gradient(180deg, #1d3a57, #16304a); border: 1px solid hsl(206 90% 77% / .14); transition: background .5s var(--ease) var(--d, 0ms), box-shadow .5s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms); }
.q.perda.oculto { opacity: 1; transform: none; }
.q.perda:not(.oculto) { transform: scale(.92); }
.q-itcmd:not(.oculto), i.q-itcmd { background: var(--perda); box-shadow: 0 0 12px -2px var(--perda); }
.q-hon:not(.oculto), i.q-hon { background: #ff9a4d; box-shadow: 0 0 12px -2px #ff9a4d; }
.q-cart:not(.oculto), i.q-cart { background: #ffd28a; }
.q.perda.oculto { background: linear-gradient(180deg, #1d3a57, #16304a); box-shadow: none; }
i.q-ok { background: var(--ouro); }
.custos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.custos li { display: grid; grid-template-columns: 18px 1fr auto; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed var(--traco-2); font-size: 20px; }
.custos li i { width: 18px; height: 18px; border-radius: 4px; }
.custos small { display: block; color: var(--mudo); font: 13px var(--mono); }
.custos b { font: 600 24px var(--serifa); font-variant-numeric: tabular-nums; }
.custos .tot { grid-template-columns: 1fr auto; border: 0; color: var(--perda); }
.custos .tot b { font-size: 46px; }

/* quem paga o inventário: pilhas de dinheiro × a conta */
.duas-liq { grid-template-columns: 700px 1fr; gap: 48px; }
.pilhas { width: 700px; height: 540px; overflow: visible; }
.p-chao { stroke: var(--traco-2); stroke-width: 2; }
.maco { transition: opacity .4s var(--ease) calc(var(--i) * 45ms), transform .5s var(--ease) calc(var(--i) * 45ms); }
.oculto .maco { opacity: 0; transform: translateY(-30px); }
.m-frente { stroke-width: 1; }
.m-caixa .m-frente { fill: #2c8a63; stroke: #7cf0bd; } .m-caixa .m-topo { fill: #49b887; } .m-caixa .m-lado { fill: #1d5f44; } .m-caixa .m-cinta { fill: #e8f7ef; opacity: .85; }
.m-conta .m-frente { fill: #b8402c; stroke: #ff9b8c; } .m-conta .m-topo { fill: #e0604a; } .m-conta .m-lado { fill: #7a2618; } .m-conta .m-cinta { fill: #ffe3dc; opacity: .85; }
.m-falta path, .m-falta rect { fill: none; stroke: var(--perda); stroke-width: 1.5; stroke-dasharray: 5 5; }
.m-falta .m-cinta { display: none; }
.p-cota { stroke: var(--perda); stroke-width: 2; fill: none; }
.p-rot { font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--mudo); }
.p-val { font: 600 30px var(--serifa); }
.p-val.ganho { fill: var(--ganho); } .p-val.perda { fill: var(--perda); }
.p-falta { font: 700 26px var(--serifa); fill: var(--perda); text-anchor: middle; }
.p-unid { font: 13px var(--mono); fill: var(--mudo); text-anchor: end; }
.conta-papel { background: #f4efe6; color: #1c1714; border-radius: 6px; padding: 26px 28px 22px; box-shadow: 0 30px 60px -30px #000; transform: rotate(.8deg); position: relative; }
.conta-papel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 8px 0, transparent 7px, #f4efe6 7.5px) 0 0 / 16px 10px repeat-x; }
.conta-papel .kicker { color: #8b7565; }
.conta-papel ul { list-style: none; padding: 0; margin: 0; display: grid; }
.conta-papel li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #d8cbbd; font-size: 17px; }
.conta-papel li b { font-variant-numeric: tabular-nums; }
.conta-papel .tot { font-weight: 700; border-bottom: 2px solid #1c1714; }
.conta-papel .liq { color: #1f6b4a; }
.falta { margin-top: 16px; }
.falta .kicker { color: #a5381d; margin: 0; }
.falta .valor { font: 700 58px/1 var(--serifa); color: #c0261b; margin: 6px 0; white-space: nowrap; }
.falta p:last-child { margin: 0; font-size: 17px; }

/* quebra: a casa à venda */
.quebra { display: grid; grid-template-columns: 860px 1fr; gap: 40px; align-items: center; }
.foto-venda { position: relative; margin: 0; width: 860px; aspect-ratio: 1280 / 714; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -40px #000, 0 0 0 1px hsl(206 90% 77% / .2); }
.foto-venda img { display: block; width: 100%; height: auto; }
.foto-venda figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 20px; background: linear-gradient(0deg, hsl(210 60% 5% / .92), transparent); }
.foto-venda figcaption .kicker { margin: 0 0 4px; }
.foto-venda figcaption b { font: 600 28px var(--serifa); }
.placa { position: absolute; left: 71.4%; top: 51.2%; width: 11.8%; height: 13.8%; display: grid; place-content: center; text-align: center; color: #141414; transform-origin: 50% 0; }
.placa b { font: 800 14px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #b3261e; }
.placa span { font: 700 13px/1.2 var(--mono); margin-top: 4px; }
.placa:not(.oculto) { animation: prega .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes prega { from { transform: rotate(-9deg) scale(.6); opacity: 0; } 60% { transform: rotate(3deg); } }
.carimbo-venda { position: absolute; left: 36px; top: 30px; padding: 8px 18px; border: 4px solid #ff4a3d; color: #ff4a3d; font: 800 30px var(--mono); text-transform: uppercase; letter-spacing: .12em; transform: rotate(-9deg); border-radius: 6px; background: hsl(5 80% 10% / .35); }
.carimbo-venda:not(.oculto) { animation: carimba .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes carimba { from { transform: rotate(-9deg) scale(2.2); opacity: 0; } }
.quebra-dir { display: grid; gap: 22px; }
.anuncio { padding: 22px 24px; border-radius: 10px; background: #f4efe6; color: #1c1714; box-shadow: 0 30px 60px -30px #000; }
.anuncio .kicker { color: #8b7565; }
.preco { display: flex; gap: 14px; align-items: baseline; margin: 6px 0 12px; }
.preco s { color: #8b7565; font-size: 18px; }
.preco span { font: 700 34px var(--serifa); color: #a5381d; }
.anuncio ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 16px; }
.anuncio li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed #d8cbbd; padding-top: 6px; }
.quebra-dir .destaque .valor { font-size: 54px; }
.tempo { color: var(--mudo); display: flex; gap: 8px; align-items: center; }

/* o tempo do inventário: duas raias */
.s-tempo .s-cab, .s-tempo .raia { position: relative; max-width: 1000px; }
.foto-lado { position: absolute; top: 0; right: 0; bottom: 0; width: 820px; background: center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); opacity: .55; }
.raia { border: 1px solid var(--traco-2); border-radius: 14px; padding: 18px 24px 16px; background: hsl(210 50% 7% / .82); margin-bottom: 16px; }
.raia-nome { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; font: 700 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.raia-inv .raia-nome { color: var(--perda); } .raia-hold .raia-nome { color: var(--ganho); }
.raia-trilho { position: relative; height: 40px; border-radius: 8px; background: var(--bp-2); border: 1px solid var(--traco-2); }
.raia-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #6e2416, var(--perda)); animation: cresce-x 2.2s var(--ease) both; transform-origin: left; }
.raia-talvez { position: absolute; left: 50%; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(135deg, hsl(5 100% 68% / .55) 0 8px, transparent 8px 16px); animation: aparece 1s 2s both; }
@keyframes cresce-x { from { transform: scaleX(0); } }
@keyframes aparece { from { opacity: 0; } }
.marcos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.marcos li { position: absolute; left: var(--x); top: 50%; transform: translateY(-50%); font: 600 13px var(--mono); color: #fff; white-space: nowrap; padding-left: 14px; }
.marcos li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; }
.raia-eixo { position: relative; height: 26px; font: 12px var(--mono); color: var(--mudo); margin-top: 4px; }
.raia-eixo span { position: absolute; left: var(--x); transform: translateX(-50%); top: 6px; }
.raia-eixo span:first-child { transform: none; }
.raia-eixo span:nth-last-child(2) { transform: translateX(-100%); }
.raia-eixo em { position: absolute; right: 0; top: -2px; font-style: normal; display: none; }
.bens-chip { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bens-chip li { display: flex; gap: 6px; align-items: center; font-size: 14px; padding: 5px 12px; border-radius: 999px; }
.trancados li { border: 1px solid hsl(5 100% 68% / .55); background: hsl(5 60% 14% / .8); color: #ffd7d1; }
.trancados .ico { color: var(--perda); }
.livres li { border: 1px solid hsl(155 70% 60% / .5); background: hsl(155 50% 12% / .8); color: #d5fbe9; }
.livres .ico { color: var(--ganho); }
.briga { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 17px; color: #ffd7d1; }
.briga .ico { color: var(--perda); width: 1.4em; height: 1.4em; }
.raia-gatilho { position: absolute; left: 0; top: -6px; bottom: -6px; width: 6px; border-radius: 3px; background: var(--ganho); box-shadow: 0 0 22px var(--ganho); }
.gatilho-txt { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-size: 17px; color: #d5fbe9; white-space: nowrap; }

/* qual o melhor caminho: colunas (os modelos são botões) */
.colunas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; align-items: end; height: 460px; border-bottom: 2px solid var(--traco-2); padding-top: 50px; margin-bottom: 40px; }
.coluna { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; text-align: center; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button.coluna { cursor: pointer; }
button.coluna:hover i { filter: brightness(1.25); }
button.coluna:focus-visible { outline: 3px solid var(--laranja); outline-offset: 6px; }
.coluna i { display: block; height: var(--h); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #2e5577, #1b3550); border: 1px solid var(--traco-2); border-bottom: 0; animation: sobe 1s var(--ease) both; transform-origin: bottom; transition: filter .2s; }
@keyframes sobe { from { transform: scaleY(0); } }
.coluna b { font: 600 26px var(--serifa); margin-bottom: 10px; }
.coluna span { position: absolute; bottom: -36px; left: 0; right: 0; font: 14px var(--mono); color: var(--mudo); text-transform: uppercase; letter-spacing: .08em; }
.coluna.c-inv i { background: linear-gradient(180deg, var(--perda), #8c2a14); }
.coluna.c-inv b { color: var(--perda); }
.coluna.c-esc i { background: linear-gradient(180deg, var(--ouro), var(--laranja)); box-shadow: 0 0 40px -6px var(--laranja); }
.coluna.c-esc b { color: var(--ouro); }
.coluna em { position: absolute; left: 50%; bottom: calc(var(--h, 10%) + 56px); transform: translateX(-50%); white-space: nowrap; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .12em; background: var(--laranja); color: #1c1714; padding: 7px 12px; border-radius: 6px; font-style: normal; }
.coluna em.oculto { transform: translate(-50%, 10px); }

/* modelos: a planta traçada ao vivo e a narração */
.s-modelo { display: grid; grid-template-columns: 960px 1fr; gap: 36px; align-items: center; padding: 18px 64px 56px 48px; }
.prancheta { position: relative; padding: 8px; }
.prancheta::before, .prancheta::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--traco); }
.prancheta::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.prancheta::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.planta-svg { display: block; width: 940px; height: 680px; overflow: visible; }
.lado-dir .s-cab { margin-bottom: 36px; }
.lado-dir h2 { font-size: 46px; }
.legenda-bens { list-style: none; padding: 0; margin: 4px 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: var(--mudo); }
.legenda-bens b { font: 700 12px var(--mono); color: var(--ouro); margin-right: 6px; }
/* traçado: cada linha nasce do zero (stroke-dashoffset), depois o preenchimento acende */
.tr [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease), fill-opacity .6s .8s, opacity .6s .6s; }
.tr.oculto { opacity: 1; transform: none; }
.tr.oculto [pathLength] { stroke-dashoffset: 1; fill-opacity: 0; }
.tr.oculto [marker-end] { marker-end: none; }
.tr .pilar, .tr .gatilho, .tr .ch-trac [pathLength] { stroke-dasharray: .02 .025; }
.tr.oculto .pilar, .tr.oculto .gatilho, .tr.oculto .ch-trac [pathLength] { opacity: 0; }
.tr text, .tr .ch-ponto { transition: opacity .5s .9s; }
.tr.oculto text, .tr.oculto .ch-ponto { opacity: 0; }
.ch-tag, .ch-cota, .seta-t, .vol-n { font-family: var(--mono); }
.seta-t, .ch-cota, .ch-tag, .ch-tit, .ch-nomes { paint-order: stroke; stroke: var(--bp); stroke-width: 5px; stroke-linejoin: round; }
.chao-f { fill: hsl(206 90% 77% / .025); stroke: var(--traco-2); stroke-dasharray: .006 .01; }
.laje, .parede { stroke: var(--laranja); stroke-width: 1.6; stroke-linejoin: round; }
.laje.f-topo { fill: hsl(22 80% 30% / .45); } .laje.f-esq { fill: hsl(22 80% 22% / .7); } .laje.f-dir { fill: hsl(22 80% 16% / .7); }
.parede { fill: hsl(22 80% 40% / .14); }
.parede.vidro { fill: hsl(22 90% 55% / .07); stroke-width: 1.2; }
.c-veic .laje { stroke: var(--veic); } .c-veic .laje.f-topo { fill: hsl(265 60% 45% / .3); } .c-veic .laje.f-esq, .c-veic .laje.f-dir { fill: hsl(265 50% 20% / .6); }
.c-dest .laje { stroke: var(--ganho); } .c-dest .laje.f-topo { fill: hsl(155 60% 40% / .28); } .c-dest .laje.f-esq, .c-dest .laje.f-dir { fill: hsl(155 50% 16% / .6); }
.pilar { stroke: var(--traco-2); stroke-width: 1.2; fill: none; }
.c-veic .pilar { stroke: hsl(265 90% 80% / .45); } .c-dest .pilar { stroke: hsl(155 70% 65% / .45); }
.seta-l { stroke: var(--laranja); stroke-width: 2.4; fill: none; }
.ponta { fill: var(--laranja); }
.seta-t { font-size: 13px; fill: var(--ouro); letter-spacing: .08em; text-transform: uppercase; }
/* volumes (bens): na pessoa física flutuam soltos; dentro do Cofre assentam e acendem */
.vol { transform: translateY(-16px); transition: transform .9s var(--ease); }
.vol .v { stroke: #9fb4c8; stroke-width: 1.2; transition: fill .8s var(--ease), stroke .8s var(--ease); }
.vol .v.f-topo { fill: hsl(206 40% 40% / .35); } .vol .v.f-esq { fill: hsl(206 40% 25% / .5); } .vol .v.f-dir { fill: hsl(206 40% 18% / .5); }
.vol-n { font-size: 13px; font-weight: 700; fill: var(--txt); text-anchor: middle; }
.bens3d.ativo .vol, .folha .bens3d .vol { transform: none; }
.bens3d.ativo .v, .folha .bens3d .v { stroke: var(--ouro); }
.bens3d.ativo .v.f-topo, .folha .bens3d .v.f-topo { fill: hsl(36 100% 68% / .75); }
.bens3d.ativo .v.f-esq, .folha .bens3d .v.f-esq { fill: hsl(26 95% 48% / .75); }
.bens3d.ativo .v.f-dir, .folha .bens3d .v.f-dir { fill: hsl(22 90% 32% / .8); }
.bens3d.ativo .vol-n, .folha .bens3d .vol-n { fill: #1c1714; }
.bens3d .vol:nth-child(2) { transition-delay: .07s; } .bens3d .vol:nth-child(3) { transition-delay: .14s; } .bens3d .vol:nth-child(4) { transition-delay: .21s; } .bens3d .vol:nth-child(5) { transition-delay: .28s; } .bens3d .vol:nth-child(n+6) { transition-delay: .35s; }
.pessoa3d circle, .pessoa3d path { stroke: var(--txt); stroke-width: 1.8; fill: var(--bp-2); }
.p-herd circle, .p-herd path { stroke: var(--ganho); fill: hsl(155 40% 12%); }
.chave3d circle, .chave3d path { fill: none; stroke-width: 3; stroke-linecap: round; }
.ch-ouro circle, .ch-ouro path { stroke: var(--ouro); }
.ch-trac circle, .ch-trac path { stroke: var(--ganho); stroke-width: 2.2; }
.gatilho { stroke: var(--ganho); stroke-width: 2; fill: none; }
.ch-linha { stroke: var(--traco-2); stroke-width: 1.2; fill: none; }
.ch-ponto { fill: var(--traco); }
.ch-tag { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--traco); }
.ch-tit { font: 600 23px var(--serifa); fill: var(--txt); }
.ch-cota { font-size: 14px; fill: var(--mudo); }
.ch-nomes { font: 600 19px var(--serifa); fill: var(--txt); }
.ch-cota.ouro { fill: var(--ouro); } .ch-tag.verde, .ch-cota.verde { fill: var(--ganho); }
.ch-pf .ch-tag, .ch-pf .ch-cota { fill: var(--perda); } .ch-pf .ch-linha { stroke: hsl(5 100% 68% / .5); }
.ch-cofre .ch-tag { fill: var(--ouro); } .c-veic .ch-tag { fill: var(--veic); } .c-dest .ch-tag { fill: var(--ganho); }
.narra { position: relative; display: grid; align-items: start; }
.narra .fala { grid-area: 1 / 1; } /* os passos ocupam a mesma célula: o futuro (opaco 0) não empurra o layout */
.narra .passos-mini { grid-area: 2 / 1; }
.fala { border-left: 3px solid var(--laranja); padding: 4px 0 4px 20px; }
.fala .mono { font-size: 13px; color: var(--mudo); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.fala b { display: block; font: 600 36px/1.1 var(--serifa); margin: 10px 0; }
.fala p:last-child { color: #d6dee8; font-size: 20px; line-height: 1.45; margin: 0; }
.passos-mini { list-style: none; padding: 0; margin: 28px 0 0 23px; display: flex; gap: 6px; }
.passos-mini li { width: 28px; height: 4px; border-radius: 2px; background: var(--traco-2); transition: background .4s; }
.passos-mini li.ativo { background: var(--laranja); }

/* balança */
.duas-bal { align-items: start; }
.bal { width: 100%; max-height: 540px; overflow: visible; }
.bal .pe { stroke: var(--traco); stroke-width: 3; fill: none; }
.bal .eixo { fill: var(--ouro); }
.bal .viga path { stroke: var(--txt); stroke-width: 5; stroke-linecap: round; }
.bal .viga { transform: rotate(var(--a)); transition: transform 1.4s cubic-bezier(.3, 1.4, .5, 1); }
.bal .prato { transform: translate(var(--ex), var(--ey)); transition: transform 1.4s cubic-bezier(.3, 1.4, .5, 1); }
.bal.oculto { opacity: 1; transform: none; pointer-events: auto; }
.bal.oculto .viga { transform: rotate(0deg); }
.bal.oculto .prato { transform: translate(var(--l), 0px); }
.bal .fio { stroke: var(--traco-2); stroke-width: 1.5; fill: none; }
.bal .bacia { fill: var(--bp-3); stroke: var(--traco); stroke-width: 2; }
.bal .moedas rect { fill: var(--ouro); stroke: #b84400; stroke-width: 1; }
.bal .p-inv .moedas rect { fill: var(--perda); stroke: #8c2a14; }
.bal text { text-anchor: middle; fill: var(--txt); }
.bal .b-nome { font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .1em; fill: var(--mudo); }
.bal .b-valor { font: 600 20px var(--serifa); }
.bal .p-inv .b-valor { fill: var(--perda); }
.bal .p-mod .b-valor { fill: var(--ouro); }
.razao { width: 100%; border-collapse: collapse; font-size: 18px; }
.razao th, .razao td { padding: 8px 0; border-bottom: 1px dashed var(--traco-2); text-align: left; font-weight: 400; }
.razao td { text-align: right; font-variant-numeric: tabular-nums; }
.razao .tot th, .razao .tot td { color: var(--ouro); font-weight: 700; border-bottom: 0; font-size: 21px; }

/* payback: a régua do tempo */
.s .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.s .kpis > div { border: 1px solid var(--traco-2); border-radius: 14px; padding: 22px; background: hsl(210 50% 8% / .6); display: grid; gap: 4px; }
.s .kpis b { font: 600 42px var(--serifa); }
.s .kpis small { color: var(--mudo); font-size: 15px; }
.regua { position: relative; margin: 96px 0 28px; }
.regua-trilho { position: relative; height: 26px; border-radius: 13px; background: var(--bp-2); border: 1px solid var(--traco-2); overflow: hidden; }
.regua-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pb); background: repeating-linear-gradient(135deg, var(--laranja) 0 8px, var(--ouro) 8px 16px); transition: width 1.6s var(--ease); }
.regua-lucro { position: absolute; left: var(--pb); right: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--ganho), hsl(155 70% 40% / .4)); transition: opacity 1s var(--ease); }
.regua-fill.oculto { width: 0; opacity: 1; transform: none; }
.regua-lucro.oculto { transform: none; }
.regua-marcas { position: relative; height: 26px; font: 13px var(--mono); color: var(--mudo); }
.regua-marcas span { position: absolute; left: var(--x); transform: translateX(-50%); top: 8px; }
.regua-marcas span::before { content: ""; position: absolute; left: 50%; top: -10px; height: 8px; border-left: 1px solid var(--traco-2); }
.regua-alvo { position: absolute; left: var(--pb); bottom: 60px; transform: translateX(-50%); text-align: center; font: 14px var(--mono); color: var(--mudo); white-space: nowrap; }
.regua-alvo b { display: block; font: 600 32px var(--serifa); color: var(--ouro); }
.regua-alvo::after { content: ""; display: block; margin: 4px auto 0; width: 2px; height: 14px; background: var(--ouro); }
.destaque-linha { font-size: 26px; margin: 0; }
.destaque-linha b { color: var(--ganho); font-family: var(--serifa); }

/* comparativos: a tecla I alterna sem/com ITBI na mesma tabela */
.s-comp:not(.com-itbi) .v-com, .s-comp.com-itbi .v-sem { display: none; }
.comp { width: 100%; border-collapse: collapse; font-size: 20px; table-layout: fixed; }
.comp th, .comp td { height: 66px; vertical-align: middle; padding: 0 12px; border-bottom: 1px solid var(--traco-2); text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comp th:first-child { text-align: left; }
.comp thead th { height: 40px; font: 600 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.comp .comp-barra i { display: block; height: 16px; border-radius: 4px; width: var(--w); background: #2e5577; animation: cresce 1s var(--ease) both; transform-origin: left; transition: width .8s var(--ease); }
.s-comp.com-itbi .comp-barra i { width: var(--w2); }
@keyframes cresce { from { transform: scaleX(0); } }
.comp .c-inv th, .comp .c-inv td { color: var(--perda); }
.comp .c-inv .comp-barra i { background: var(--perda); }
.comp .c-esc th, .comp .c-esc td { color: var(--ouro); font-weight: 700; }
.comp .c-esc .comp-barra i { background: var(--laranja); box-shadow: 0 0 20px -4px var(--laranja); }
.comp tbody tr:not(.c-inv) td:last-child { color: var(--ganho); font-weight: 700; }

/* jornada */
.trilha { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.trilha::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; border-top: 2px dashed var(--traco-2); }
.trilha li { position: relative; display: grid; gap: 12px; justify-items: start; align-content: start; }
.trilha li span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bp-2); border: 2px solid var(--traco-2); font: 600 22px var(--serifa); position: relative; }
.trilha li b { font-weight: 500; font-size: 20px; line-height: 1.3; }
.trilha li.feito span { background: var(--laranja); border-color: var(--laranja); color: #1c1714; }
.trilha li.aqui span { box-shadow: 0 0 0 6px hsl(22 100% 55% / .25), 0 0 30px var(--laranja); }
.trilha li em { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ouro); font-style: normal; }

/* tabelas de preço */
.tab { width: 100%; border-collapse: collapse; font-size: 19px; }
.tab th, .tab td { padding: 12px 14px; border-bottom: 1px solid var(--traco-2); text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.tab th:first-child { text-align: left; }
.tab thead th { font: 600 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.tab .esc { background: hsl(22 100% 55% / .1); }
.tab thead .esc { color: var(--ouro); }
.tab .tot th, .tab .tot td { color: var(--ouro); font-weight: 700; font-size: 1.1em; border-bottom: 0; }
.tab .sub th, .tab .sub td { color: var(--mudo); }
.tab-horas { font-size: 15px; }
.tab-horas th, .tab-horas td { padding: 3px 12px; line-height: 1.3; text-align: center; }
.tab-horas tbody th { text-align: left; }
.tab-horas tfoot th, .tab-horas tfoot td { color: var(--ouro); font-weight: 700; font-size: 17px; padding-top: 6px; }
.tab-parc th, .tab-parc td { padding: 8px 14px; }
.tab-parc.parc-muitas { font-size: 14px; }
.tab-parc.parc-muitas th, .tab-parc.parc-muitas td { padding: 1px 14px; }
.avista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 22px; }
.avista > div { border: 1px solid var(--traco-2); border-radius: 14px; padding: 18px 22px; display: grid; gap: 4px; background: hsl(210 50% 8% / .6); }
.avista > div > span { font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--mudo); }
.avista b { font: 600 38px var(--serifa); }
.avista small { color: var(--mudo); }
.avista .esc { border-color: var(--laranja); box-shadow: 0 0 50px -20px var(--laranja); }
.avista .esc b { color: var(--ouro); }

/* membership */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.plano { border: 1px solid var(--traco-2); border-radius: 16px; padding: 26px; display: grid; gap: 10px; align-content: start; background: hsl(210 50% 8% / .6); }
.plano > b { font: 600 34px var(--serifa); color: var(--ouro); }
.plano > p { color: #d6dee8; margin: 0; font-size: 17px; }
.plano ul { margin: 6px 0; padding-left: 18px; color: var(--mudo); display: grid; gap: 6px; font-size: 16px; }
.plano-v { font: 600 30px var(--serifa) !important; color: var(--txt) !important; }
.plano-v small { font: 14px var(--mono); color: var(--mudo); margin-left: 4px; }

/* o legado, antes e depois */
.s-legado .s-cab { position: relative; }
.foto-maos { width: 100%; opacity: .16; -webkit-mask-image: linear-gradient(0deg, #000, transparent 70%); mask-image: linear-gradient(0deg, #000, transparent 70%); }
.antes-depois { position: relative; display: grid; grid-template-columns: 1fr 270px 1fr; gap: 28px; align-items: center; }
.lado-ad { border: 1px solid var(--traco-2); border-radius: 16px; padding: 22px 24px; background: hsl(210 50% 7% / .85); display: grid; grid-template-columns: 170px 1fr; gap: 6px 24px; align-items: center; }
.lado-ad .kicker { grid-column: 1 / -1; margin-bottom: 10px; }
.ad-antes { border-color: hsl(5 100% 68% / .6); } .ad-antes .kicker { color: var(--perda); }
.ad-depois { border-color: hsl(155 70% 60% / .6); box-shadow: 0 0 60px -26px var(--ganho); } .ad-depois .kicker { color: var(--ganho); }
.waffle-p { width: 170px; gap: 3px; grid-row: span 2; }
.waffle-p .q { border-radius: 2px; }
.lado-ad .valor { font: 600 33px/1 var(--serifa); margin: 0; white-space: nowrap; align-self: end; }
.lado-ad ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 16px; color: #d6dee8; align-self: start; }
.lado-ad li { display: flex; gap: 8px; align-items: center; }
.ad-antes .ico { color: var(--perda); } .ad-depois .ico { color: var(--ganho); }
.ad-meio { text-align: center; display: grid; gap: 2px; }
.ad-meio > span { font: 600 40px var(--serifa); color: var(--ganho); }
.ad-meio b { font: 600 30px var(--serifa); color: var(--ganho); white-space: nowrap; }
.ad-meio small { color: var(--mudo); font-size: 15px; }

html.estatico .palco *, html.estatico .palco *::before, html.estatico .palco *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .palco *, .palco *::before, .palco *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(folha), ::view-transition-new(folha) { animation: none !important; }
}

/* impressão: uma folha por página, o quadro 1600×836 reduzido para A4 deitado, tudo revelado */
.impressao { display: none; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.imprimindo > :not(.impressao) { display: none !important; }
  body.imprimindo .impressao { display: block; }
  .impressao { color: var(--txt); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .folha { break-after: page; position: relative; width: 297mm; height: 210mm; overflow: hidden; background: var(--fundo); }
  .folha-q { position: absolute; left: 0; top: 18mm; width: 1600px; height: 836px; transform: scale(.7015); transform-origin: 0 0; }
  .folha .s { animation: none; }
  .folha .sumido { display: initial !important; }
  .folha .fala, .folha .ch-pf { display: none !important; }
  .folha .fala:last-of-type { display: block !important; }
}