/* SatiFlow — apresentação do escopo. Tema claro, laranja e preto. */

@font-face { font-family: "Archivo"; font-weight: 400; font-display: block; src: url("../vendor/fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: block; src: url("../vendor/fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: block; src: url("../vendor/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: block; src: url("../vendor/fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: block; src: url("../vendor/fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: block; src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: block; src: url("../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: block; src: url("../vendor/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --branco: #FFFFFF;
  --sup-1: #FAFAF9;
  --sup-2: #F4F3F1;
  --preto: #0A0A0A;
  --preto-2: #2B2926;
  --suave: #55534F;
  --fraco: #8B8883;
  --borda: #E6E5E3;
  --laranja: #FF4A00;
  --laranja-esc: #C23500;
  --laranja-cl: #FFF1EA;
  --laranja-bd: #FFD2BD;
  --ok: #0F6B3F;
  --alerta: #C01C0C;
  --aviso: #8A4200;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 560ms;
  --raio: 18px;
  --sombra: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.04);
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #ECEBE8; color: var(--preto); font-family: "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

/* ---------- palco 1920×1080 ---------- */
#palco-janela { position: fixed; inset: 0; display: grid; place-items: center; }
#palco { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; }
.slide { position: absolute; inset: 0; background: var(--branco); overflow: hidden; display: none; border-radius: 4px; }
.slide.ativo { display: block; }
.slide > .conteudo { position: absolute; inset: 0; padding: 72px 96px 0; }

/* view transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur); animation-timing-function: var(--ease); }
html[data-dir="fwd"]::view-transition-old(root) { animation-name: sai-esq; }
html[data-dir="fwd"]::view-transition-new(root) { animation-name: entra-dir; }
html[data-dir="back"]::view-transition-old(root) { animation-name: sai-dir; }
html[data-dir="back"]::view-transition-new(root) { animation-name: entra-esq; }
::view-transition-group(*) { animation-duration: var(--dur); animation-timing-function: var(--ease); }
@keyframes sai-esq { to { opacity: 0; transform: translateX(-60px); } }
@keyframes entra-dir { from { opacity: 0; transform: translateX(60px); } }
@keyframes sai-dir { to { opacity: 0; transform: translateX(60px); } }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-60px); } }
.vt-logo { view-transition-name: logo; }
.vt-barra { view-transition-name: barra; }
.vt-titulo { view-transition-name: titulo; }

/* ---------- moldura comum ---------- */
.logo-canto { position: absolute; top: 40px; right: 72px; height: 44px; width: auto; opacity: .9; }
.rodape { position: absolute; left: 96px; right: 96px; bottom: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 17px; color: var(--fraco); }
.rodape .fonte b { color: var(--suave); font-weight: 600; }
.rodape .num { font-family: var(--mono); color: var(--suave); }
.olho { font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-esc); margin: 0 0 14px; display: flex; gap: 14px; align-items: center; }
.olho .modulo { display: inline-flex; align-items: center; gap: 10px; background: var(--preto); color: #fff; padding: 8px 16px 8px 12px; border-radius: 999px; letter-spacing: .06em; font-size: 18px; }
.olho .modulo svg { width: 22px; height: 22px; stroke: var(--laranja); }
h1, h2 { margin: 0; letter-spacing: -.025em; line-height: 1.02; font-weight: 800; }
h2.titulo { font-size: 60px; max-width: 1480px; }
h2.titulo em { font-style: normal; color: var(--laranja); }
.lead { font-size: 26px; line-height: 1.38; color: var(--suave); max-width: 1180px; margin: 18px 0 0; }
.lead b { color: var(--preto); font-weight: 600; }

/* ---------- selos ---------- */
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.2; vertical-align: middle; border: 1px solid transparent; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo.existe { color: var(--ok); background: #EAF4EE; border-color: #CFE5D8; }
.selo.parte { color: var(--aviso); background: #FBF1E6; border-color: #EED9BF; }
.selo.novo { color: var(--laranja-esc); background: var(--laranja-cl); border-color: var(--laranja-bd); }
.selo.decidido { color: #fff; background: var(--preto-2); }
.selo.confirmar { color: var(--alerta); background: #FCEDEB; border-color: #F4CDC8; }
.selo.grande { font-size: 17px; padding: 6px 14px; }

/* ---------- fragmentos ---------- */
.frag { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.frag.on { opacity: 1; transform: none; }

/* ---------- cartões ---------- */
.cartao { background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.escuro { background: var(--preto-2); color: #fff; border-color: var(--preto-2); }

/* ---------- capa ---------- */
.capa .conteudo { padding: 0; }
.capa .faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--laranja); }
.capa .logo-grande { position: absolute; left: 120px; top: 120px; width: 900px; height: auto; }
.capa .textos { position: absolute; left: 132px; top: 520px; width: 1100px; }
.capa h1 { font-size: 92px; line-height: .98; }
.capa h1 span { color: var(--laranja); }
.capa .sub { font-size: 32px; color: var(--suave); margin-top: 28px; }
.capa .data { position: absolute; left: 132px; bottom: 70px; font-size: 22px; color: var(--suave); display: flex; gap: 28px; }
.capa .data b { color: var(--preto); }
.capa .tela-unica { position: absolute; right: 120px; top: 170px; width: 560px; }
.capa .linha-dourada { position: absolute; right: 0; top: 0; }
.capa .mensagem { position: absolute; right: 120px; bottom: 120px; width: 560px; font-size: 22px; line-height: 1.5; color: var(--suave); border-left: 4px solid var(--laranja); padding-left: 22px; }
.capa .mensagem b { color: var(--preto); }

/* mini janela do app (capa e slide 2) */
.app { border-radius: 16px; border: 1px solid var(--borda); background: #fff; box-shadow: 0 30px 60px -30px rgba(10,10,10,.25), var(--sombra); overflow: hidden; }
.app .topo { height: 46px; background: var(--preto-2); display: flex; align-items: center; gap: 10px; padding: 0 18px; color: #fff; font-weight: 700; font-size: 17px; }
.app .topo i { width: 10px; height: 10px; border-radius: 50%; background: #55534F; display: inline-block; }
.app .topo i:first-child { background: var(--laranja); }
.app .topo span { margin-left: 8px; }
.app .corpo { display: grid; grid-template-columns: 170px 1fr; min-height: 300px; }
.app .menu { background: var(--sup-2); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.app .menu div { padding: 8px 10px; border-radius: 8px; color: var(--suave); display: flex; gap: 8px; align-items: center; }
.app .menu div.sel { background: #fff; color: var(--preto); font-weight: 700; box-shadow: inset 3px 0 0 var(--laranja); }
.app .area { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.busca { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--borda); border-radius: 12px; padding: 10px 14px; font-size: 17px; color: var(--fraco); background: #fff; }
.busca svg { width: 20px; height: 20px; stroke: var(--preto); flex: none; }
.busca kbd { margin-left: auto; font-family: var(--mono); font-size: 13px; border: 1px solid var(--borda); border-radius: 6px; padding: 2px 6px; color: var(--suave); background: var(--sup-1); }
.pend { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--sup-1); border: 1px solid var(--borda); font-size: 16px; }
.pend b { font-family: var(--mono); font-size: 18px; min-width: 32px; color: var(--laranja-esc); }

/* ---------- slide 2: hoje × amanhã ---------- */
.s2 .lado { position: absolute; top: 330px; height: 640px; }
.s2 .hoje { left: 96px; width: 980px; }
.s2 .amanha { left: 1180px; width: 644px; }
.s2 .rotulo { font-size: 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fraco); display: flex; align-items: baseline; gap: 18px; }
.s2 .contador { font-family: var(--mono); font-size: 72px; font-weight: 600; color: var(--preto); letter-spacing: -.04em; line-height: 1; }
.s2 .contador.lar { color: var(--laranja); }
.s2 .janelas { position: absolute; left: 0; top: 96px; width: 980px; height: 560px; }
.s2 .jan { position: absolute; width: 214px; border-radius: 10px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 10px 24px -14px rgba(10,10,10,.35); font-size: 16px; transition: transform 700ms var(--ease), opacity 700ms var(--ease); transform-origin: center; }
.s2 .jan .bar { height: 26px; background: var(--sup-2); border-bottom: 1px solid var(--borda); border-radius: 10px 10px 0 0; display: flex; align-items: center; gap: 5px; padding: 0 9px; }
.s2 .jan .bar i { width: 7px; height: 7px; border-radius: 50%; background: #D3D1CD; }
.s2 .jan .nome { padding: 10px 12px 2px; font-weight: 700; font-size: 18px; }
.s2 .jan .oq { padding: 0 12px 12px; color: var(--fraco); font-size: 15px; line-height: 1.3; }
.s2 .jan.erp .bar { background: var(--preto-2); }
.s2 .jan.erp .bar i { background: #6b6862; }
.s2 .jan.ret { border-color: var(--laranja-bd); }
.s2 .jan.ret .nome::after { content: " ↻"; color: var(--laranja); }
.s2.recolhido .jan { opacity: 0; }
.s2 .amanha .app { position: absolute; top: 96px; left: 0; width: 644px; transition: transform 700ms var(--ease), box-shadow 700ms var(--ease); }
.s2.recolhido .amanha .app { transform: scale(1.02); }
.s2 .legenda-ret { position: absolute; left: 96px; bottom: 74px; font-size: 18px; color: var(--suave); }
.s2 .legenda-ret b { color: var(--laranja); }

/* ---------- slide 3: regras ---------- */
.s3 .grade { position: absolute; left: 96px; right: 96px; top: 250px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.s3 .regra { padding: 22px 24px 20px; min-height: 340px; display: flex; flex-direction: column; gap: 12px; }
.s3 .regra .ic { width: 58px; height: 58px; border-radius: 14px; background: var(--laranja); display: grid; place-items: center; }
.s3 .regra .ic svg { width: 32px; height: 32px; stroke: #fff; }
.s3 .regra .p { font-family: var(--mono); font-size: 16px; color: var(--fraco); font-weight: 600; }
.s3 .regra h3 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -.015em; }
.s3 .regra p { margin: 0; font-size: 19px; line-height: 1.4; color: var(--suave); }
.s3 .regra .ex { margin-top: auto; font-size: 17px; line-height: 1.38; color: var(--preto); background: #fff; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--borda); }
.s3 .regra .ex b { color: var(--laranja-esc); }
.s3 .regra.escuro .p { color: #B9B6B0; }
.s3 .regra.escuro p { color: #D8D5CF; }
.s3 .regra.escuro .ex { background: #3A3733; border-color: #4A4741; color: #fff; }
.s3 .regra.escuro .ex b { color: #FF8A57; }
.s3 .menores { position: absolute; left: 96px; top: 640px; width: 840px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.s3 .menor { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.32; color: var(--suave); padding: 12px 14px; border-radius: 12px; background: var(--sup-1); border: 1px solid var(--borda); }
.s3 .menor b { color: var(--preto); display: block; font-size: 19px; }
.s3 .menor .p { font-family: var(--mono); font-weight: 600; color: var(--laranja-esc); font-size: 15px; padding-top: 3px; }
.s3 .mora { position: absolute; left: 980px; right: 96px; top: 676px; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; }
.s3 .mora .col { border-radius: 16px; padding: 18px 20px; }
.s3 .mora .col h4 { margin: 0 0 10px; font-size: 21px; display: flex; gap: 10px; align-items: center; }
.s3 .mora .col ul { margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 1.5; }
.s3 .mora .col li::before { content: "— "; color: var(--fraco); }
.s3 .mora .erp { background: var(--preto-2); color: #fff; }
.s3 .mora .erp li::before { color: #8B8883; }
.s3 .mora .appc { background: var(--laranja-cl); border: 1px solid var(--laranja-bd); }
.s3 .mora .meio { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.s3 .mora .meio svg { width: 64px; }
.s3 .mora .titulo-mora { position: absolute; top: -34px; left: 0; font-size: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fraco); }

/* ---------- diagramas (genérico) ---------- */
.diagrama { position: absolute; }
.diagrama svg.base { position: absolute; left: 0; top: 0; overflow: visible; }
.diagrama .no { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px; background: #fff; border: 1.5px solid #CFCDC9; border-radius: 12px; font-size: 17px; line-height: 1.22; font-weight: 600; color: var(--preto); box-shadow: var(--sombra); }
.diagrama .no small { font-weight: 400; color: var(--suave); font-size: 14.5px; line-height: 1.25; }
.diagrama .no .mono { font-size: 15px; }
.diagrama .no.quente { background: var(--laranja); color: #fff; border-color: var(--laranja); }
.diagrama .no.quente small { color: #FFE6DA; }
.diagrama .no.erp { background: var(--preto-2); color: #fff; border-color: var(--preto-2); }
.diagrama .no.erp small { color: #CFCBC4; }
.diagrama .no.pend { background: #fff; border: 1.5px dashed var(--alerta); }
.diagrama .no.ok { border-color: var(--ok); }
.diagrama .no.decisao { border-radius: 26px; border-color: var(--preto); }
.diagrama .no > .selo { position: absolute; bottom: -11px; right: 10px; font-size: 12px; padding: 2px 8px; }
.diagrama .no .ret { position: absolute; top: -14px; left: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--preto); color: var(--laranja); display: grid; place-items: center; font-size: 16px; font-weight: 800; }
.diagrama .raia-rotulo { position: absolute; left: 0; display: flex; align-items: center; padding-left: 16px; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.diagrama .rot-aresta { position: absolute; transform: translate(-50%, -50%); font-size: 13.5px; font-weight: 600; background: #fff; padding: 1px 6px; border-radius: 6px; white-space: nowrap; color: var(--suave); }
.diagrama .rot-aresta.escrita { color: var(--laranja-esc); }
.diagrama .rot-aresta.banco { color: var(--preto); }
.diagrama .rot-aresta.confirma { color: var(--laranja-esc); }
.diagrama [data-step] { transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.diagrama .no[data-step]:not(.on) { opacity: 0; transform: translateY(10px) scale(.97); }
.diagrama .rot-aresta[data-step]:not(.on) { opacity: 0; }
.diagrama path.trilho { fill: none; }
.diagrama .mascara path { transition: stroke-dashoffset 650ms var(--ease); }
.diagrama .aresta:not(.on) .mascara path { stroke-dashoffset: 1; }
.diagrama .aresta.on .mascara path { stroke-dashoffset: 0; }

/* ---------- legenda de setas ---------- */
.legenda { display: flex; gap: 26px; align-items: center; font-size: 16px; color: var(--suave); flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.legenda svg { width: 46px; height: 12px; overflow: visible; }
.legenda b { color: var(--preto); font-weight: 600; }

/* ---------- slide 4: mapa ---------- */
.s4 .mapa { left: 96px; top: 200px; width: 1728px; height: 760px; }
.mapa .ramo { position: absolute; width: 318px; padding: 16px 18px 14px; border-radius: 18px; background: #fff; border: 1.5px solid var(--borda); box-shadow: 0 16px 40px -28px rgba(10,10,10,.35); }
.mapa .ramo h4 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.mapa .ramo h4 svg { width: 26px; height: 26px; stroke: var(--laranja); flex: none; }
.mapa .ramo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mapa .ramo li { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 15.5px; color: var(--suave); }
.mapa .ramo li .selo { font-size: 11.5px; padding: 1px 7px; }
.mapa .centro { position: absolute; width: 300px; height: 150px; border-radius: 28px; background: var(--preto); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; box-shadow: 0 30px 60px -30px rgba(10,10,10,.6); }
.mapa .centro b { font-size: 40px; letter-spacing: -.02em; }
.mapa .centro b span { color: var(--laranja); }
.mapa .centro small { font-size: 16px; color: #CFCBC4; }
.mapa .integ { position: absolute; padding: 8px 14px; border-radius: 10px; background: var(--sup-2); border: 1px solid var(--borda); font-size: 16px; font-weight: 700; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.mapa .integ small { font-weight: 400; font-size: 13px; color: var(--fraco); }
.mapa .integ.erp { background: var(--preto-2); color: #fff; border-color: var(--preto-2); }
.mapa .integ.erp small { color: #BDB9B2; }
.s4 .legenda { position: absolute; left: 96px; bottom: 76px; }

/* ---------- mocks de tela ---------- */
.tela { position: absolute; border-radius: 16px; border: 1px solid var(--borda); background: #fff; box-shadow: 0 24px 50px -34px rgba(10,10,10,.4), var(--sombra); overflow: hidden; }
.tela .cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--borda); background: var(--sup-1); font-size: 17px; font-weight: 700; }
.tela .cab .mono { font-weight: 500; color: var(--suave); font-size: 15px; }
.tela .cab .dir { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tabela th { text-align: left; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 8px 12px; border-bottom: 1px solid #F0EFED; }
.tabela td.v { font-family: var(--mono); text-align: right; white-space: nowrap; }
.tabela th.v { text-align: right; }
.tabela tr.div td { background: var(--laranja-cl); }
.tabela tr.div td:first-child { box-shadow: inset 4px 0 0 var(--laranja); font-weight: 700; }
.tabela tr.sel td { background: #FFF6F1; }
.st { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; }
.st.ok { color: var(--ok); background: #EAF4EE; }
.st.dv { color: var(--alerta); background: #FCEDEB; }
.ck { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #BDBAB5; vertical-align: middle; }
.ck.on { background: var(--laranja); border-color: var(--laranja); }
.ck.on::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.tick { color: var(--ok); font-weight: 800; }

.painel-acoes { position: absolute; border-radius: 16px; background: var(--preto-2); color: #fff; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 50px -30px rgba(10,10,10,.6); }
.painel-acoes h4 { margin: 0 0 4px; font-size: 19px; display: flex; justify-content: space-between; align-items: center; }
.painel-acoes h4 .mono { color: #FF8A57; font-size: 16px; }
.acao { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #3A3733; font-size: 16.5px; line-height: 1.25; }
.acao small { display: block; color: #BDB9B2; font-size: 14px; }
.acao .n { width: 34px; height: 34px; border-radius: 10px; background: #4A4741; display: grid; place-items: center; }
.acao .n svg { width: 20px; height: 20px; stroke: #fff; }
.acao.prim { background: var(--laranja); }
.acao.prim .n { background: rgba(0,0,0,.18); }
.acao.prim small { color: #FFE6DA; }
.acao .btn { font-size: 13.5px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: #fff; color: var(--preto); white-space: nowrap; }

/* ---------- slide 6/7 estados e receber ---------- */
.estados { position: absolute; display: flex; align-items: stretch; gap: 0; }
.estado { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px 10px 26px; background: var(--sup-2); font-size: 16.5px; font-weight: 700; line-height: 1.15; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); margin-right: -10px; min-height: 70px; }
.estado:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 16px; border-radius: 10px 0 0 10px; }
.estado small { font-weight: 500; color: var(--suave); font-size: 13.5px; margin-top: 3px; }
.estado.lar { background: var(--laranja); color: #fff; }
.estado.lar small { color: #FFE6DA; }
.estado.esc { background: var(--preto-2); color: #fff; }
.estado.esc small { color: #CFCBC4; }
.estado .tri { display: flex; gap: 6px; margin-top: 4px; }
.estado .tri span { font-size: 12.5px; padding: 1px 6px; border-radius: 5px; background: #fff; color: var(--preto); font-weight: 700; }
.estado .tri span.r { color: var(--alerta); }

.portas { position: absolute; display: grid; grid-template-columns: 1fr 1fr 1fr 70px 1.25fr; gap: 14px; align-items: center; }
.porta { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--borda); font-size: 17px; font-weight: 700; line-height: 1.2; }
.porta small { display: block; font-weight: 400; font-size: 14.5px; color: var(--suave); margin-top: 4px; }
.porta.fim { background: var(--laranja); color: #fff; border-color: var(--laranja); }
.porta.fim small { color: #FFE6DA; }
.portas .seta { justify-self: center; }

/* ---------- slide 8 ---------- */
.barra-lote { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--preto); color: #fff; box-shadow: 0 20px 40px -20px rgba(10,10,10,.6); font-size: 15.5px; }
.barra-lote .resumo { font-family: var(--mono); font-size: 15px; padding-right: 12px; margin-right: 2px; border-right: 1px solid #4A4741; white-space: nowrap; }
.barra-lote .resumo b { color: #FF8A57; font-weight: 600; }
.barra-lote .b { padding: 6px 10px; border-radius: 8px; background: #2F2C29; white-space: nowrap; font-weight: 600; }
.barra-lote .b.p { background: var(--laranja); }
.ficha { position: absolute; border-radius: 16px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 24px 50px -34px rgba(10,10,10,.4), var(--sombra); padding: 16px 18px; }
.ficha .doc { display: flex; justify-content: space-between; align-items: baseline; }
.ficha .doc b { font-size: 26px; letter-spacing: -.01em; }
.ficha .doc .mono { font-size: 20px; }
.ficha .lig { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ficha .lig div { font-size: 14.5px; padding: 8px 10px; border-radius: 10px; background: var(--sup-1); border: 1px solid var(--borda); line-height: 1.25; }
.ficha .lig div b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.ficha .editar { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--laranja-cl); border: 1px solid var(--laranja-bd); font-size: 15.5px; }
.ficha .editar .mono { font-weight: 600; }
.ficha .editar .gr { margin-left: auto; font-weight: 700; color: var(--laranja-esc); white-space: nowrap; }

/* ---------- slide 9 ---------- */
.s9 .cols { position: absolute; left: 96px; right: 96px; top: 250px; bottom: 80px; display: grid; grid-template-columns: 1fr 1.08fr 1.12fr; gap: 24px; }
.s9 .col { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.s9 .col h3 { margin: 0; font-size: 28px; display: flex; gap: 12px; align-items: center; letter-spacing: -.01em; }
.s9 .col h3 .modulo { display: inline-flex; align-items: center; gap: 8px; background: var(--preto); color: #fff; border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 22px; }
.s9 .col h3 .modulo svg { width: 22px; height: 22px; stroke: var(--laranja); }
.s9 .col > p { margin: 0; font-size: 18px; color: var(--suave); line-height: 1.38; }
.trilha { display: flex; gap: 6px; }
.trilha span { flex: 1; text-align: center; font-size: 14.5px; font-weight: 700; padding: 8px 4px; background: var(--sup-2); border-radius: 8px; position: relative; }
.trilha span.lar { background: var(--laranja); color: #fff; }
.lista-sel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lista-sel li { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 16.5px; line-height: 1.25; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--borda); }
.caixa-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.caixa-grid .c { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; }
.caixa-grid .c .q { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.caixa-grid .c .l { display: flex; justify-content: space-between; font-size: 14px; color: var(--suave); margin-top: 4px; }
.caixa-grid .c .l .mono { color: var(--preto); font-size: 15px; }
.caixa-grid .c .l .mono.r { color: var(--laranja-esc); }
.saldo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.saldo .c { border-radius: 12px; padding: 10px 12px; }
.saldo .c .q { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.saldo .c .v { font-family: var(--mono); font-size: 26px; font-weight: 600; margin-top: 2px; }
.saldo .c small { font-size: 13.5px; }
.linhagem { display: flex; flex-direction: column; gap: 5px; font-size: 14.5px; color: var(--suave); }
.linhagem div { display: grid; grid-template-columns: 112px 22px 1fr; align-items: center; }
.linhagem b { color: var(--preto); }
.linhagem i { font-style: normal; color: var(--laranja); font-weight: 800; }
.matriz { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.matriz th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--fraco); font-weight: 700; padding: 4px 3px; text-align: center; }
.matriz th:first-child { text-align: left; }
.matriz td { padding: 6px 3px; border-top: 1px solid var(--borda); text-align: center; }
.matriz td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.matriz tr.fil td { background: var(--laranja-cl); }
.d { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: middle; }
.d.op { background: var(--preto); }
.d.ve { border: 2px solid var(--preto); }
.d.ap { background: var(--laranja); }
.d.no { background: transparent; width: 10px; height: 2px; border-radius: 0; background: #CFCDC9; }
.chave-matriz { display: flex; gap: 14px; font-size: 13.5px; color: var(--suave); flex-wrap: wrap; }
.chave-matriz span { display: inline-flex; gap: 6px; align-items: center; }
.filial-nota { font-size: 15.5px; line-height: 1.35; padding: 10px 12px; border-radius: 12px; background: var(--preto-2); color: #fff; }
.filial-nota b { color: #FF8A57; }
.miniatura { display: block; width: 100%; height: 92px; object-fit: cover; object-position: top left; border-radius: 10px; border: 1px solid var(--borda); cursor: zoom-in; }

/* ---------- slide 10 ---------- */
.fases { position: absolute; left: 96px; right: 96px; top: 262px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fase { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 430px; position: relative; }
.fase .n { font-family: var(--mono); font-size: 56px; font-weight: 600; color: var(--laranja); line-height: 1; letter-spacing: -.04em; }
.fase h3 { margin: 0; font-size: 27px; letter-spacing: -.01em; }
.fase ul { margin: 0; padding: 0 0 0 18px; font-size: 16.5px; line-height: 1.36; color: var(--suave); }
.fase .pronta { margin-top: auto; font-size: 16.5px; line-height: 1.35; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1.5px solid var(--preto); }
.fase .pronta b { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja-esc); margin-bottom: 4px; }
.fase.escuro ul { color: #D8D5CF; }
.fase.escuro .pronta { background: #3A3733; border-color: #FF8A57; color: #fff; }
.fase.escuro .pronta b { color: #FF8A57; }
.fases::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 4px; background: linear-gradient(90deg, var(--laranja), var(--laranja) 75%, var(--preto) 75%); border-radius: 4px; }
.terceiros { position: absolute; left: 96px; width: 1020px; top: 726px; }
.terceiros h4 { margin: 0 0 10px; font-size: 19px; display: flex; gap: 10px; align-items: center; }
.terceiros ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; font-size: 16.5px; color: var(--suave); line-height: 1.3; }
.terceiros li::before { content: "◦ "; color: var(--alerta); font-weight: 800; }
.frase-final { position: absolute; left: 1170px; right: 96px; top: 716px; font-size: 44px; font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
.frase-final span { color: var(--laranja); }

/* ---------- interface ---------- */
#progresso { position: fixed; left: 0; top: 0; height: 4px; background: var(--laranja); width: 0; transition: width var(--dur) var(--ease); z-index: 50; }
body.ocioso #ui-num, body.ocioso #ui-ajuda { opacity: 0; pointer-events: none; }
#ui-num, #ui-ajuda { transition: opacity 400ms; }
#ui-num { position: fixed; right: 18px; bottom: 14px; z-index: 50; font-family: var(--mono); font-size: 13px; color: var(--suave); background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borda); display: flex; gap: 10px; align-items: center; }
#ui-num button { border: 0; background: none; cursor: pointer; padding: 0 4px; font-size: 15px; color: var(--preto); }
#ui-ajuda { position: fixed; left: 18px; bottom: 14px; z-index: 50; font-size: 12.5px; color: var(--fraco); background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borda); }
#ui-ajuda kbd { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--borda); border-radius: 4px; padding: 0 4px; background: #fff; color: var(--preto); }

/* camada de detalhe (dentro do palco) */
.detalhe { position: absolute; top: 0; right: 0; bottom: 0; width: 820px; background: #fff; border-left: 1px solid var(--borda); box-shadow: -30px 0 80px -40px rgba(10,10,10,.35); transform: translateX(104%); transition: transform var(--dur) var(--ease); z-index: 20; display: flex; flex-direction: column; }
.slide.com-detalhe .detalhe { transform: none; }
.slide .veu { position: absolute; inset: 0; background: rgba(10,10,10,.18); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); z-index: 19; }
.slide.com-detalhe .veu { opacity: 1; pointer-events: auto; }
.detalhe .dcab { padding: 34px 40px 18px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.detalhe .dcab h3 { margin: 0; font-size: 32px; letter-spacing: -.02em; line-height: 1.08; }
.detalhe .dcab .k { font-family: var(--mono); font-size: 14px; color: var(--fraco); white-space: nowrap; padding-top: 8px; }
.detalhe .dcorpo { padding: 22px 40px 40px; overflow-y: auto; flex: 1; font-size: 18px; line-height: 1.45; color: var(--suave); }
.detalhe .dcorpo::-webkit-scrollbar { width: 10px; }
.detalhe .dcorpo::-webkit-scrollbar-thumb { background: #D9D7D3; border-radius: 10px; }
.detalhe h4 { margin: 24px 0 10px; font-size: 21px; color: var(--preto); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; letter-spacing: -.005em; }
.detalhe h4:first-child { margin-top: 0; }
.detalhe p { margin: 0 0 10px; }
.detalhe ul, .detalhe ol { margin: 0 0 10px; padding-left: 22px; }
.detalhe li { margin-bottom: 4px; }
.detalhe b { color: var(--preto); font-weight: 600; }
.detalhe table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 4px 0 12px; }
.detalhe th { text-align: left; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); padding: 6px 8px; border-bottom: 1.5px solid var(--borda); }
.detalhe td { padding: 7px 8px; border-bottom: 1px solid #F0EFED; vertical-align: top; color: var(--preto); }
.detalhe .aceite { border-left: 4px solid var(--laranja); background: var(--laranja-cl); padding: 10px 14px; border-radius: 0 10px 10px 0; color: var(--preto); margin: 8px 0 12px; }
.detalhe .aceite b { color: var(--laranja-esc); }
.detalhe .fonte { font-size: 14px; color: var(--fraco); font-family: var(--mono); }
.detalhe .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 12px; }
.detalhe .caps figure { margin: 0; }
.detalhe .caps img { width: 100%; height: 120px; object-fit: cover; object-position: top left; border-radius: 10px; border: 1px solid var(--borda); cursor: zoom-in; display: block; }
.detalhe .caps figcaption { font-size: 13px; color: var(--fraco); margin-top: 4px; line-height: 1.3; }
.detalhe .mini { position: relative; margin: 6px 0 14px; }
.detalhe code { font-family: var(--mono); font-size: .88em; background: var(--sup-2); padding: 1px 5px; border-radius: 5px; color: var(--preto); }
.fechar-d { border: 1px solid var(--borda); background: #fff; border-radius: 10px; padding: 6px 12px; cursor: pointer; font-size: 15px; }
.abrir-d { position: absolute; right: 96px; bottom: 64px; z-index: 5; border: 1.5px solid var(--preto); background: #fff; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: 16px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.abrir-d kbd { font-family: var(--mono); font-size: 13px; border: 1px solid var(--borda); border-radius: 5px; padding: 0 5px; background: var(--sup-1); }

/* notas */
.notas { display: none; }
#notas-caixa { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(900px, 92vw); background: var(--preto-2); color: #fff; border-radius: 14px; padding: 16px 20px; font-size: 16px; line-height: 1.5; z-index: 60; display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
#notas-caixa.aberto { display: block; }
#notas-caixa b { color: #FF8A57; }

/* índice */
#indice { position: fixed; top: 0; left: 0; bottom: 0; width: 380px; background: #fff; z-index: 70; transform: translateX(-102%); transition: transform 480ms var(--ease); box-shadow: 30px 0 60px -40px rgba(0,0,0,.4); display: flex; flex-direction: column; }
#indice.aberto { transform: none; }
#indice h3 { margin: 0; padding: 26px 26px 12px; font-size: 22px; display: flex; justify-content: space-between; align-items: center; }
#indice img { height: 26px; }
#indice ol { list-style: none; margin: 0; padding: 6px 12px 20px; overflow-y: auto; }
#indice li a { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 10px 12px; border-radius: 10px; color: var(--preto); text-decoration: none; font-size: 15.5px; line-height: 1.3; }
#indice li a span { font-family: var(--mono); color: var(--fraco); }
#indice li a:hover { background: var(--sup-2); }
#indice li a.atual { background: var(--laranja-cl); box-shadow: inset 3px 0 0 var(--laranja); }
#indice li a.atual span { color: var(--laranja-esc); }
#fundo-sobre { position: fixed; inset: 0; background: rgba(10,10,10,.25); z-index: 65; opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease); }
#fundo-sobre.aberto { opacity: 1; pointer-events: auto; }

/* lightbox */
#lightbox { position: fixed; inset: 0; background: rgba(10,10,10,.82); z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 3vh 3vw; opacity: 0; pointer-events: none; transition: opacity 360ms var(--ease); }
#lightbox.aberto { opacity: 1; pointer-events: auto; }
#lightbox img { max-width: 94vw; max-height: 84vh; border-radius: 10px; background: #fff; transform: scale(.97); transition: transform 360ms var(--ease); }
#lightbox.aberto img { transform: none; }
#lightbox p { margin: 0; color: #fff; font-size: 16px; text-align: center; max-width: 1000px; }
#lightbox p span { color: #BDB9B2; }
[data-zoom] { cursor: zoom-in; }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  .frag, .diagrama [data-step], .s2 .jan, .detalhe { transition-duration: 1ms !important; }
  .diagrama .mascara path { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- tela estreita: rolagem vertical ---------- */
html.estreito body { overflow: auto; }
html.estreito #palco-janela { position: static; display: block; }
html.estreito #palco { position: relative; left: 0; top: 0; width: 1920px; height: auto; }
html.estreito .slide { display: block; position: relative; margin-bottom: 40px; height: 1080px; }
html.estreito .frag, html.estreito .diagrama [data-step] { opacity: 1 !important; transform: none !important; }
html.estreito .diagrama .mascara path { stroke-dashoffset: 0 !important; }
html.estreito .abrir-d, html.estreito #ui-ajuda { display: none; }
html.estreito .s2 .jan { opacity: 1 !important; }

/* ---------- impressão: um slide por página, A4 paisagem ---------- */
@page { size: A4 landscape; margin: 0; }
@media print {
  html, body { background: #fff; overflow: visible; height: auto; }
  #palco-janela { position: static; display: block; }
  #palco { position: static; transform: none !important; zoom: .5845; width: 1920px; height: auto; }
  .slide { display: block !important; position: relative; width: 1920px; height: 1080px; page-break-after: always; break-after: page; border-radius: 0; margin: 0; }
  .slide:last-child { page-break-after: auto; break-after: auto; }
  .frag, .diagrama [data-step] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .diagrama .mascara path { stroke-dashoffset: 0 !important; transition: none !important; }
  .s2 .jan { opacity: 1 !important; }
  #progresso, #ui-num, #ui-ajuda, #indice, #fundo-sobre, #lightbox, #notas-caixa, .abrir-d, .detalhe, .veu { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* o slide que entra já nasce no passo certo, sem animar */
.slide.sem-anim, .slide.sem-anim * { transition: none !important; }
.diagrama.compacto .no { font-size: 15.5px; padding: 6px 10px; }
.diagrama.compacto .no small { font-size: 13.5px; }
.secao-rot { position: absolute; font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fraco); display: flex; gap: 12px; align-items: center; }
.secao-rot b { color: var(--preto); letter-spacing: 0; text-transform: none; font-size: 21px; }
.arvore { display: grid; grid-template-columns: 200px 1fr; gap: 0 18px; align-items: center; margin: 6px 0 14px; }
.arvore .raiz { background: var(--alerta); color: #fff; border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 16px; line-height: 1.25; }
.arvore .ramos { display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--borda); padding-left: 16px; }
.arvore .ramos div { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 8px; align-items: center; font-size: 15px; color: var(--preto); position: relative; }
.arvore .ramos div::before { content: ""; position: absolute; left: -16px; top: 50%; width: 12px; border-top: 2px solid var(--borda); }
.arvore .ramos span { background: var(--sup-2); border-radius: 8px; padding: 6px 10px; }
.arvore .ramos strong { background: var(--laranja-cl); border: 1px solid var(--laranja-bd); border-radius: 8px; padding: 6px 10px; font-weight: 600; }
.arvore .ramos i { font-style: normal; color: var(--laranja); font-weight: 800; text-align: center; }
.linha-tempo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0 14px; }
.linha-tempo div { border-top: 4px solid var(--preto); padding-top: 8px; font-size: 14.5px; line-height: 1.3; color: var(--preto); }
.linha-tempo div.lar { border-color: var(--laranja); }
.linha-tempo b { display: block; font-family: var(--mono); font-size: 13px; color: var(--laranja-esc); }
.cartoes-rnf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 14px; }
.cartoes-rnf div { background: var(--sup-1); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: 15px; line-height: 1.3; color: var(--suave); }
.cartoes-rnf b { display: block; color: var(--preto); font-size: 16px; }

.modulos-capa { position: absolute; right: 120px; top: 150px; width: 520px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.modulos-capa div { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--sup-1); border: 1px solid var(--borda); font-size: 24px; font-weight: 700; }
.modulos-capa div svg { width: 28px; height: 28px; stroke: var(--laranja); }
.modulos-capa div:first-child { background: var(--preto-2); color: #fff; border-color: var(--preto-2); }
.modulos-capa p { margin: 6px 0 0; font-size: 18px; color: var(--fraco); }
.capa .mensagem { bottom: 150px; }
.detalhe .diagrama .no { font-size: 14px; padding: 4px 8px; }
.detalhe .diagrama .no small { font-size: 12px; }
.detalhe .diagrama .raia-rotulo { font-size: 13px; padding-left: 10px; }
.s3 .mora .col { padding: 14px 18px; }
.s3 .mora .col ul { font-size: 17px; line-height: 1.4; }

/* esteira da fatura a pagar (slide 6) */
.esteira { position: absolute; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.etapa { position: relative; background: var(--sup-1); border: 1px solid var(--borda); border-radius: 16px; padding: 14px 16px 16px; min-height: 274px; }
.etapa .en { font-family: var(--mono); font-size: 34px; font-weight: 600; color: var(--laranja); line-height: 1; }
.etapa h4 { margin: 6px 0 8px; font-size: 21px; display: flex; gap: 8px; align-items: center; letter-spacing: -.01em; }
.etapa h4 svg { width: 22px; height: 22px; stroke: var(--laranja); flex: none; }
.etapa ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.3; color: var(--suave); }
.etapa li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.etapa > .selo { margin-top: 10px; }
.etapa.quente { background: var(--laranja); border-color: var(--laranja); color: #fff; box-shadow: 0 20px 40px -24px rgba(255,74,0,.7); }
.etapa.quente .en { color: #fff; }
.etapa.quente h4 svg { stroke: #fff; }
.etapa.quente ul { color: #fff; }
.etapa.quente li::before { color: #fff; }
.etapa.escuro .en, .etapa.escuro h4 svg { color: #FF8A57; stroke: #FF8A57; }
.etapa.escuro ul { color: #D8D5CF; }
.etapa.escuro li::before { color: #FF8A57; }
.etapa:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 18px; font-weight: 800; color: var(--preto); background: #fff; border-radius: 50%; width: 14px; text-align: center; font-size: 16px; z-index: 2; }
.falha { position: absolute; font-size: 17px; color: var(--alerta); padding: 8px 14px; border: 1.5px dashed var(--alerta); border-radius: 12px; background: #FFF8F7; }
.falha b { color: var(--preto); }
/* slide 10: cinco fases e dado sempre atual */
.fases.cinco { grid-template-columns: repeat(5, 1fr); gap: 16px; top: 250px; }
.fases.cinco .fase { min-height: 390px; padding: 18px 18px 16px; gap: 10px; }
.fases.cinco .fase .n { font-size: 46px; }
.fases.cinco .fase h3 { font-size: 24px; }
.fases.cinco .fase ul { font-size: 15.5px; }
.fases.cinco .fase .pronta { font-size: 15px; }
.fases.cinco::before { background: linear-gradient(90deg, var(--preto) 20%, var(--laranja) 20%, var(--laranja) 80%, var(--preto) 80%); }
.atual { position: absolute; left: 96px; right: 96px; top: 700px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.atual > div { border-radius: 16px; padding: 16px 18px; background: var(--preto-2); color: #D8D5CF; font-size: 17px; line-height: 1.38; }
.atual > div b { display: block; color: #fff; font-size: 22px; margin: 6px 0 4px; letter-spacing: -.01em; }
.atual > div svg { width: 28px; height: 28px; stroke: #FF8A57; }
.atual > div.lar { background: var(--laranja); color: #FFF1EA; }
.atual > div.lar svg { stroke: #fff; }
.s10 .frase-final { left: 96px; right: 380px; top: 930px; font-size: 38px; }
.s6 .abrir-d { bottom: auto; top: 204px; }
.etapa.escuro { background: var(--preto-2); border-color: var(--preto-2); color: #fff; }

.modulos-capa div small { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--laranja); letter-spacing: .04em; }
.caixa-mini { border-radius: 12px; background: var(--preto-2); color: #D8D5CF; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.caixa-mini .cx-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.caixa-mini .cx-top span { display: flex; flex-direction: column; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #FF8A57; font-weight: 700; }
.caixa-mini .cx-top b { font-size: 20px; color: #fff; letter-spacing: 0; text-transform: none; }
.caixa-mini .cx-top .prev b { color: #FF8A57; }
.caixa-mini .cx-lin { display: grid; grid-template-columns: 70px 1fr 1fr; border-top: 1px solid #4A4741; padding-top: 5px; }
.caixa-mini .cx-lin b { color: #fff; font-weight: 500; }
.caixa-mini .cx-lin b.r { color: #FF8A57; }
.caixa-mini .cx-pe { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #BDB9B2; }
.caixa-mini .cx-pe svg { width: 14px; height: 14px; stroke: #FF8A57; }
.acesso-cx { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--laranja-esc); font-weight: 600; margin-top: -4px; }
.acesso-cx svg { width: 18px; height: 18px; stroke: var(--laranja-esc); }
.matriz { font-size: 13.5px; }

.acoes-perm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.acoes-perm span { font-size: 13.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--laranja-cl); border: 1px solid var(--laranja-bd); color: var(--laranja-esc); }

.pedidos { position: absolute; display: flex; flex-wrap: wrap; gap: 6px; }
.pedidos .pt { width: 100%; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--laranja-esc); margin-bottom: 2px; }
.pedidos span { font-size: 14.5px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1.5px solid var(--preto); font-weight: 600; }
.pedidos span:last-child { border-style: dashed; color: var(--suave); }
.s8 .ficha .lig div { padding: 5px 9px; }