/* Peças didáticas das partes I a VI: figuras animadas e interações curtas.
   Usam as cores do site; a cor de destaque vem de --dd (padrão oliva). */

.dd{--dd:var(--olive);--dd-deep:var(--olive-deep);margin:26px 0;background:#fff;border:1px solid var(--rule);border-top:4px solid var(--dd)}
.dd-cab{padding:14px 16px 0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.dd-corpo{padding:12px 16px 16px}
.dd figcaption,.dd-leg{font-size:14.5px;line-height:1.5;color:var(--stone);padding:0 16px 14px}
.dd svg{display:block;width:100%;height:auto;max-width:440px;margin-left:auto;margin-right:auto}
.dd svg text{font-family:'IBM Plex Sans',sans-serif}
.dd .mono{font-family:'IBM Plex Mono',monospace}
.dd-btn{font:inherit;font-size:15px;font-weight:600;padding:11px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.dd-btn:hover{background:var(--ink);color:var(--paper)}
.dd-btn.prim{background:var(--dd);border-color:var(--dd);color:#fff}
.dd-btn.prim:hover{background:var(--dd-deep);border-color:var(--dd-deep)}
.dd-btn[disabled]{opacity:.4;cursor:default}
.dd-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* controles deslizantes e mensagens, comuns às peças */
.dd .ctrl{margin-top:8px}
.dd .ctrl .top{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.dd .ctrl .top b{font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.dd input[type=range]{width:100%;accent-color:var(--dd);height:28px}
.dd .msg-dd{font-size:15.5px;line-height:1.5;margin:12px 0 0}
.block-content .dd p.msg-dd{font-size:15.5px;line-height:1.5;margin:12px 0 0}

/* quadro de resultados, legenda e estado, comuns às peças */
.dd .res-dd{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.dd .res-dd div{padding:10px 12px;background:var(--paper-warm);font-size:14px;line-height:1.35;color:var(--ink-soft)}
.dd .res-dd b{display:block;font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--ink);margin-top:2px}
.dd .res-dd .real b{color:var(--dd-deep)}
.dd .res-dd .alerta{background:var(--critical-bg)}
.dd .leg-dd{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--ink-soft);margin-top:6px}
.dd .leg-dd span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--c)}
.dd .leg-dd span.ln::before{height:3px;vertical-align:3px}
.dd .leg-dd span.tr::before{height:0;border-top:3px dashed var(--c);background:none;vertical-align:3px}
.dd .estado-dd{margin-top:12px;padding:12px 14px;font-size:16px;line-height:1.5;background:var(--paper-warm);transition:background .3s}
.dd .estado-dd.ok{background:var(--success-bg)}
.dd .estado-dd.danger{background:var(--critical-bg)}

/* ===== Cascata: do caixa ao resultado econômico ===== */
.cascata .linha{display:grid;grid-template-columns:1fr;gap:4px;padding:8px 0;border-bottom:1px dashed var(--rule-soft);opacity:.18;transition:opacity .5s}
.cascata .linha.vis{opacity:1}
.cascata .rot{display:flex;justify-content:space-between;gap:10px;font-size:15.5px;color:var(--ink-soft)}
.cascata .rot b{font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap}
.cascata .trilho{position:relative;height:18px;background:var(--paper-warm)}
.cascata .zero{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.cascata .barra{position:absolute;top:0;bottom:0;width:0;transition:left .7s cubic-bezier(.2,.7,.2,1),width .7s cubic-bezier(.2,.7,.2,1)}
.cascata .total{margin-top:12px;padding:12px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--paper-warm);transition:background .4s}
.cascata .total span{font-size:15.5px}
.cascata .total b{font-family:'IBM Plex Mono',monospace;font-size:22px;white-space:nowrap}
.cascata .total.neg{background:var(--critical-bg)}
.cascata .total.neg b{color:var(--terra)}
.cascata .msg{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--ink-soft);min-height:24px}

/* ===== Ciclo ===== */
.ciclo-dd .roda{transform-origin:170px 150px}
.ciclo-dd.on .roda{animation:dd-gira 9s linear infinite}
@keyframes dd-gira{to{transform:rotate(360deg)}}
.ciclo-dd .no{opacity:.2;transition:opacity .5s}
.ciclo-dd.on .no{opacity:1}
.ciclo-dd.on .n2{transition-delay:.3s}.ciclo-dd.on .n3{transition-delay:.6s}.ciclo-dd.on .n4{transition-delay:.9s}

/* ===== Classificador (jogo de categorias) ===== */
.classif .placar{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--rule);font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--stone)}
.classif .placar b{color:var(--ink)}
.classif .item{padding:22px 16px 8px;text-align:center;font-family:'Fraunces',serif;font-size:22px;line-height:1.25;min-height:86px;transition:opacity .2s,transform .2s}
.classif .item.troca{opacity:0;transform:translateY(6px)}
.classif .opcoes{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.classif .opcoes button{font:inherit;font-size:15px;font-weight:600;line-height:1.3;padding:14px 8px;border:0;background:var(--paper);color:var(--ink);cursor:pointer;transition:background .2s}
.classif .opcoes button:hover:not([disabled]){background:var(--paper-warm)}
.classif .opcoes button[disabled]{cursor:default}
.classif .opcoes button.certa{background:var(--success-bg)}
.classif .opcoes button.errada{background:var(--critical-bg)}
.classif .resp{display:none;padding:14px 16px;font-size:15.5px;line-height:1.5;border-top:1px solid var(--rule)}
.classif .resp.on{display:block;animation:dd-surge .3s ease}
.classif .resp button{margin-top:10px}
.classif .fim{display:none;padding:20px 16px;text-align:center}
.classif .fim.on{display:block}
.classif .fim b{font-family:'Fraunces',serif;font-size:22px;display:block;margin-bottom:6px}
@keyframes dd-surge{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* SWOT que vai se preenchendo */
.swot-viva{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 16px 16px}
.swot-viva .q{min-height:70px;padding:8px;font-size:13.5px;line-height:1.35;border:1px solid var(--rule)}
.swot-viva .q h5{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.swot-viva .q span{display:block;padding:3px 0;color:var(--ink-soft);animation:dd-surge .4s ease}
.swot-viva .qf{background:#E4EAD2}.swot-viva .qf h5{color:var(--olive-deep)}
.swot-viva .qfr{background:#F5E4D8}.swot-viva .qfr h5{color:var(--terra)}
.swot-viva .qo{background:#EFE6CC}.swot-viva .qo h5{color:#7A6020}
.swot-viva .qa{background:#E8DAD2}.swot-viva .qa h5{color:#7A3A1F}

/* ===== Barra empilhada (proporções) ===== */
.empilhada .barra{display:flex;height:44px;overflow:hidden}
.empilhada .barra div{width:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.empilhada.on .barra div{width:var(--w)}
.empilhada.on .barra div:nth-child(2){transition-delay:.25s}.empilhada.on .barra div:nth-child(3){transition-delay:.5s}
.empilhada .chave{position:relative;height:34px;margin-top:6px}
.empilhada .chave .colch{position:absolute;top:0;height:10px;border:2px solid var(--olive);border-top:0;opacity:0;transition:opacity .5s 1.1s}
.empilhada.on .chave .colch{opacity:1}
.empilhada .chave .txt{position:absolute;top:14px;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--olive-deep);white-space:nowrap;opacity:0;transition:opacity .5s 1.2s}
.empilhada.on .chave .txt{opacity:1}
.empilhada .leg{display:grid;gap:4px;margin-top:8px;font-size:14.5px;color:var(--ink-soft)}
.empilhada .leg span::before{content:"";display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;background:var(--c)}

/* ===== Curva de resposta ===== */
.curva-dd .ctrl{margin-top:10px}
.curva-dd .ctrl .top{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin-bottom:2px}
.curva-dd .ctrl .top b{font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.curva-dd input[type=range]{width:100%;accent-color:var(--terra);height:28px}
.curva-dd .res{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.curva-dd .res div{padding:10px;background:var(--paper-warm);font-size:14px;line-height:1.35}
.curva-dd .res b{display:block;font-family:'IBM Plex Mono',monospace;font-size:18px;margin-top:2px}
.curva-dd .res .ot b{color:var(--terra)}
.curva-dd .marca{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

/* ===== Fluxo em etapas, com abas ===== */
.fluxo-dd .abas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fluxo-dd .abas button{font:inherit;font-size:14.5px;padding:8px 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.fluxo-dd .abas button.on{background:var(--dd);border-color:var(--dd);color:#fff;font-weight:600}
.fluxo-dd .etapas{list-style:none;display:grid;gap:0}
.fluxo-dd .etapa{position:relative;padding:12px 14px 12px 50px;border:1px solid var(--rule);background:var(--paper);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.fluxo-dd .etapa.vis{opacity:1;transform:none}
.fluxo-dd .etapa + .etapa{margin-top:22px}
.fluxo-dd .etapa + .etapa::before{content:"";position:absolute;left:24px;top:-22px;height:22px;width:2px;background:var(--dd)}
.fluxo-dd .etapa + .etapa::after{content:"";position:absolute;left:19px;top:-9px;border:6px solid transparent;border-top-color:var(--dd)}
.fluxo-dd .etapa .n{position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--dd);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.fluxo-dd .etapa small{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:3px}
.fluxo-dd .etapa span{font-size:16px;line-height:1.45;color:var(--ink)}
.fluxo-dd .etapa.final{background:var(--dd);border-color:var(--dd)}
.fluxo-dd .etapa.final small,.fluxo-dd .etapa.final span{color:#fff}
.fluxo-dd .etapa.final .n{background:#fff;color:var(--dd-deep)}

/* ===== Camadas de custo com a receita ===== */
.camadas-dd .trilho{position:relative;height:46px;margin:30px 0 8px;background:var(--paper-warm)}
.camadas-dd .seg{position:absolute;top:0;bottom:0;width:0;transition:width .8s cubic-bezier(.2,.7,.2,1);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.camadas-dd.on .seg{width:var(--w)}
.camadas-dd .rb{position:absolute;top:-26px;bottom:-6px;width:3px;margin-left:-1.5px;background:var(--ink);transition:left .4s}
.camadas-dd .rb span{position:absolute;top:0;transform:translateX(-50%);left:50%;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;background:var(--ink);color:#fff;padding:2px 6px;white-space:nowrap}
.camadas-dd .eixo{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--stone)}
.camadas-dd .ctrl{margin-top:12px}
.camadas-dd .ctrl .top{display:flex;justify-content:space-between;font-size:15px}
.camadas-dd .ctrl .top b{font-family:'IBM Plex Mono',monospace}
.camadas-dd input[type=range]{width:100%;accent-color:var(--ink);height:28px}
.camadas-dd .estado{margin-top:10px;padding:12px 14px;font-size:16px;line-height:1.5;transition:background .3s}
.hier-row{transition:box-shadow .3s,transform .3s}
.hier-row.aceso{box-shadow:inset 0 0 0 3px var(--ink);transform:scale(1.015)}

/* ===== Gráfico de linhas simples ===== */
.linhas-dd .ctrl .top{display:flex;justify-content:space-between;font-size:15px}
.linhas-dd .ctrl .top b{font-family:'IBM Plex Mono',monospace}
.linhas-dd input[type=range]{width:100%;accent-color:var(--dd);height:28px}
.linhas-dd .res{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.linhas-dd .res div{padding:10px;background:var(--paper-warm);font-size:14px;line-height:1.35}
.linhas-dd .res b{display:block;font-family:'IBM Plex Mono',monospace;font-size:18px;margin-top:2px}
.linhas-dd .leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-soft);margin-top:4px}
.linhas-dd .leg span::before{content:"";display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:4px;background:var(--c)}

/* ===== Mapa com camadas ===== */
.mapa-dd .abas{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mapa-dd .abas button{font:inherit;font-size:14.5px;padding:8px 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.mapa-dd .abas button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.mapa-dd .cam{transition:opacity .35s}
.mapa-dd.foco .cam{opacity:.18}
.mapa-dd.foco .cam.on{opacity:1}
.mapa-dd .info{margin-top:10px;padding:12px 14px;background:var(--paper-warm);font-size:16px;line-height:1.5;min-height:72px}
.mapa-dd .info b{font-family:'IBM Plex Mono',monospace}

/* ícones desenhados (no lugar de emoji) */
.ico-dd{display:inline-block;vertical-align:-3px;margin-right:6px}

@media (prefers-reduced-motion:reduce){
  .dd *,.dd *::before{animation:none!important;transition:none!important}
  .cascata .linha{opacity:1}
  .fluxo-dd .etapa{opacity:1;transform:none}
  .camadas-dd .seg{width:var(--w)}
}