/* Visual montado: formatos escolhidos trecho a trecho, com as peças do kit (kit.css). Sincronia por frase (modo D). */
.trilha-corpo[data-vista="montado"] { padding: 12px; }

.montado.k-tela { display: flex; flex-direction: column; gap: 40px; padding: 28px 20px; }
.m-trecho { position: relative; display: flex; flex-direction: column; gap: 20px; }
.m-grupo { border-radius: var(--k-raio-lg); padding: 10px; }
.js .m-grupo.k-ativo { outline: 4px solid var(--k-marrom); outline-offset: 2px; }   /* grupo da frase em leitura */
.js .k-entra.k-visivel.k-ativo { outline-color: var(--k-marrom); }
.m-trecho .k-rotulo { text-align: center; }

/* modo ?depurar: mostra o formato escolhido por trecho */
.montado.depurar .m-trecho::before {
  content: attr(data-formato); align-self: flex-start;
  font: 700 11px/1.2 ui-monospace, Consolas, monospace; background: #d00; color: #fff; padding: 2px 6px; border-radius: 3px;
}

/* roteiro (linear-progression) */
.m-roteiro .k-placa { margin-bottom: 20px; }
.m-roteiro .l-etapas .etapa .k-cartao { padding: 36px 14px 16px; }
.m-necessarias { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.m-necessarias .pilulas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.m-necessarias .k-rotulo { background: var(--k-terracota); color: var(--k-texto-claro); }

/* causa e efeito (G3) */
.m-causa .cabeca { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
.m-causa .k-rotulo.m-sujeito { font-size: 1.1rem; padding: 8px 20px; }
.m-causa .k-rotulo.m-apoio { background: var(--k-verde); color: var(--k-texto-claro); }
.m-causa .l-prog .caixa { max-width: none; }
.m-causa .l-prog .caixa:first-child { flex: 1.5 1 0; }   /* causa (ilustração) mais larga que o efeito */
.m-causa .l-prog .caixa.alvo { flex: 1 1 0; }
.m-causa .l-prog .k-seta { width: 72px; flex: none; }

/* pares A x B */
.m-pares { display: flex; flex-direction: column; gap: 18px; }
.m-pares .k-par { align-items: stretch; }
.m-pares .k-vs { align-self: center; }
.m-pares .k-cartao { padding: 18px 12px; justify-content: center; }
.m-par-balao { display: flex; justify-content: center; }
.m-par-balao .k-balao { max-width: 36ch; text-align: center; }
.m-par-balao .k-balao::after { left: calc(50% - 10px); }

/* lista de tópicos (L7) */
.m-seguida { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-seguida .k-seta { transform: rotate(90deg); margin: 14px 0 6px; }
.m-seguida .k-rotulo { background: var(--k-creme-rotulo); }
.l-lista .cabeca .k-faixa { max-width: 100%; }

/* etapas curtas (atividade prática) */
.m-etapas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.m-etapas .l-etapas .etapa .k-cartao { padding: 36px 14px 16px; }

/* imagem protagonista (acervo) + rótulo curto */
.m-img { display: block; object-fit: contain; flex: none; filter: drop-shadow(0 6px 6px rgba(60, 25, 15, .20)); }
.m-img-md { width: 72px; height: 72px; }
/* imagem do tamanho do cartão (ilustração; no par, também o emoji do lado oposto), sem cortar a cena */
.m-img.m-img-par { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.m-img.m-img-ilustra { border-radius: 18px; filter: none; box-shadow: var(--k-sombra-suave); }
.m-img-sm { width: 52px; height: 52px; }
.m-trecho .k-cartao { gap: 6px; }
.m-pilula { display: inline-flex; align-items: center; gap: 8px; background: var(--k-terracota); border-radius: var(--k-raio-pilula); padding: 4px 14px; box-shadow: var(--k-sombra-suave); }
.m-pilula.tem-img { padding: 4px 14px 4px 6px; }
.m-pilula .k-rotulo { background: none; box-shadow: none; color: var(--k-texto-claro); padding: 6px 2px; }
.m-pilula .m-img-sm { width: 46px; height: 46px; }
.m-causa .m-sujeito { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-causa .m-sujeito .k-rotulo { font-size: 1.1rem; padding: 6px 18px; }
.m-causa .caixa.alvo { position: relative; flex-direction: column; }
.m-causa .caixa.alvo .k-ponto { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; }
.l-lista .item.tem-img { padding: 10px 16px; }
.l-lista .item.tem-img::before { display: none; }
.l-lista .item .k-rotulo { background: none; box-shadow: none; padding: 0; text-align: left; font: inherit; color: inherit; }

/* ?depurar: marca os que aguardam ilustração e as imagens provisórias */
.montado.depurar [data-aguardando]::after { content: "aguardando: " attr(data-aguardando); font: 700 10px/1.2 ui-monospace, Consolas, monospace; color: #fff; background: #d00; padding: 1px 5px; border-radius: 3px; align-self: center; }
.montado.depurar [data-provisoria]::after { content: "provisória: " attr(data-provisoria); font: 700 10px/1.2 ui-monospace, Consolas, monospace; color: #fff; background: #b8860b; padding: 1px 5px; border-radius: 3px; align-self: center; }

/* painel estreito em tela larga: as 3 etapas do roteiro ficam numa linha só (sem seta solta) */
@media (min-width: 641px) {
  .m-roteiro .l-etapas { flex-wrap: nowrap; gap: 8px; }
  .m-roteiro .l-etapas .etapa { flex: 1 1 0; min-width: 0; max-width: none; }
  .m-roteiro .l-etapas .k-seta { width: 34px; flex: none; }
  .m-roteiro .k-rotulo { font-size: .85rem; padding: 6px 10px; }
}

@media (max-width: 640px) {
  .montado.k-tela { padding: 20px 12px; gap: 32px; }
  .m-causa .l-prog .k-seta { transform: rotate(90deg); }
  .m-causa .l-prog .caixa { max-width: 260px; }
}

/* ---- seção 2 (03/10/2026): fatores, faixa, tabela recolhível, cartão ---- */
.m-duo { display: flex; gap: 6px; justify-content: center; }
.m-img-duo { width: 60px; height: 60px; }
.k-legenda.m-legenda-c { max-width: none; text-align: center; margin: -6px auto 0; }
.m-cartao-g { display: flex; justify-content: center; }
.m-cartao-g .k-cartao { padding: 18px 28px; max-width: 280px; }

/* todo e partes (fatores) */
.m-fatores .centro { display: flex; justify-content: center; }
.m-fatores .centro .k-placa { padding: 16px 28px; font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
.m-fatores > div > .k-seta { display: block; transform: rotate(90deg); margin: 4px auto; }
.m-fatores .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: start; }
.m-fatores .k-cartao.fator { padding: 14px 10px 12px; align-items: stretch; gap: 10px; }
.m-fatores .fator .cab { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-fatores .fator .cab .k-rotulo { background: var(--k-terracota); color: var(--k-texto-claro); }
.m-fatores .exemplos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.m-fatores .exemplo { display: flex; align-items: center; gap: 8px; background: var(--k-fundo); border-radius: var(--k-raio-sm); padding: 4px 8px; text-align: left; }
.m-fatores .exemplo .m-img-sm { width: 36px; height: 36px; }
.m-fatores .exemplo .k-rotulo { background: none; box-shadow: none; padding: 0; text-align: left; font: 600 .85rem/1.2 var(--k-fonte); color: var(--k-marrom); }

/* quadro recolhível */
.m-quadro { background: var(--k-creme); border-radius: var(--k-raio); box-shadow: var(--k-sombra-suave); padding: 6px 12px 12px; }
.m-quadro-resumo { cursor: pointer; font: 800 1.05rem/1.3 var(--k-fonte-titulo); color: var(--k-marrom); padding: 10px 6px; list-style-position: inside; }
.m-quadro-resumo:focus-visible { outline: 3px solid var(--k-marrom); outline-offset: 2px; border-radius: var(--k-raio-sm); }
.m-quadro-rolagem { overflow-x: auto; }
.m-quadro .l-tabela { font-size: .9rem; min-width: 320px; }
.m-quadro .l-tabela caption { font-size: .85rem; letter-spacing: .02em; padding: 4px 0 6px; }
.m-quadro .l-tabela th, .m-quadro .l-tabela td { padding: 8px 10px; vertical-align: top; }
.m-quadro .l-tabela tbody tr th:first-child { display: table-cell; font-weight: 700; width: 34%; background: var(--k-creme-rotulo); }
.m-quadro-fonte { max-width: none; margin-top: 4px; }

/* acertos da 1ª volta (03/10/2026): parafusos da placa fora do texto; rótulo de várias linhas sem forma de pílula; fatores em 1 coluna no celular */
.m-fatores .centro .k-placa::before, .m-fatores .centro .k-placa::after { display: none; }
.m-causa .caixa .k-rotulo { border-radius: var(--k-raio-sm); }
@media (max-width: 640px) { .m-fatores .cards { grid-template-columns: 1fr; } }

/* ilustração (quando chegar) no exemplo do fator: ~88 px, quadrada */
.m-fatores .exemplo .m-img.m-img-par { width: 88px; height: 88px; flex: none; }

/* refino 1 (03/10/2026): emoji só como marcador AO LADO do rótulo; ilustração segue grande, acima do rótulo */
.m-linha { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.m-linha .m-img-emoji { width: 38px; height: 38px; }
.m-linha .m-img-emoji + .m-img-emoji { margin-left: -6px; }
.m-pilula .m-linha .m-img-emoji { width: 34px; height: 34px; }
.m-fatores .exemplo .m-linha { justify-content: flex-start; flex-wrap: nowrap; }
.m-fatores .exemplo .m-img-emoji { width: 30px; height: 30px; }
.m-fatores .fator .cab { gap: 4px; }
.m-fatores .fator .cab .m-linha { justify-content: center; }
.l-lista .item .m-linha { justify-content: flex-start; flex-wrap: nowrap; }
.l-lista .item.tem-img { padding: 12px 16px; }
.k-cartao .m-linha .k-rotulo { text-align: left; }
.m-linha { flex-wrap: nowrap; }
.m-linha .k-rotulo { min-width: 0; }
.m-roteiro .m-linha .m-img-emoji, .m-etapas .m-linha .m-img-emoji { width: 30px; height: 30px; }
.m-pares .m-linha .m-img-emoji + .m-img-emoji { margin-left: -10px; }
.m-linha .k-rotulo { border-radius: 18px; }
.m-roteiro .m-linha .k-rotulo, .m-etapas .m-linha .k-rotulo { padding: 6px 10px; text-align: left; }
.m-fatores .fator .cab .k-rotulo { font-size: .9rem; padding: 6px 12px; }
.m-causa .m-sujeito .m-img.m-img-par { width: 200px; max-width: 70%; }

/* objeto recortado (PNG transparente): sem moldura arredondada, só sombra suave (decisão de 03/10/2026) */
.m-img.m-img-ilustra.m-img-recorte { border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 8px rgba(60, 25, 15, .22)); }
.l-lista .item .m-img.m-img-par { width: 96px; height: 96px; flex: none; }
.m-causa .l-prog .caixa.alvo .m-img.m-img-par { width: 100%; max-width: 210px; }

/* corte na borda de BAIXO é aceitável (régua, item 25): o degradê dissolve a base da imagem no fundo do cartão */
.m-img.m-img-fade { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }

/* fechamento (04/10/2026): diagramação */
/* (a) pílula nunca mais estreita que a palavra mais longa do rótulo */
.montado .k-rotulo { min-width: min-content; overflow-wrap: normal; word-break: normal; hyphens: none; }
.m-linha .k-rotulo { min-width: min-content; }
/* (b) em cartão pequeno o emoji fica ACIMA do rótulo (roteiro, causa e efeito, pares, etapas e cabeça dos fatores); em linha larga (lista, exemplos, pílulas) fica ao lado */
.m-roteiro .m-linha, .m-etapas .m-linha, .m-causa .m-linha, .m-pares .m-linha, .m-fatores .fator .cab .m-linha { flex-direction: column; gap: 6px; }
.m-roteiro .m-linha .m-img-emoji, .m-etapas .m-linha .m-img-emoji, .m-causa .m-linha .m-img-emoji, .m-pares .m-linha .m-img-emoji, .m-fatores .fator .cab .m-linha .m-img-emoji { width: 40px; height: 40px; }
.m-pares .m-linha .m-img-emoji + .m-img-emoji { margin-left: 0; }
.m-pares .m-duo, .m-pares .m-linha { flex-wrap: nowrap; }
.m-roteiro .m-linha .k-rotulo, .m-etapas .m-linha .k-rotulo, .m-causa .m-linha .k-rotulo, .m-pares .m-linha .k-rotulo { text-align: center; font-size: .85rem; padding: 6px 12px; }
.m-roteiro .l-etapas .etapa .k-cartao { padding: 36px 8px 14px; }
/* ilustração dentro do exemplo: imagem acima, rótulo abaixo (não vaza o cartão) */
.m-fatores .exemplo.tem-ilu { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.m-fatores .exemplo.tem-ilu .k-rotulo { text-align: center; }
/* (c) grupo sutil: fundo levemente tingido, cantos arredondados, sem borda escura (os "futuros" seguem esmaecidos, sem contorno) */
.js .montado .k-entra { outline: none; }
.m-pares .k-par { background: rgba(154, 86, 64, .07); border-radius: 32px; padding: 10px; }
/* pílulas (faixa de pontos) seguem com o emoji ao lado: são linhas, não cartões pequenos */
.m-roteiro .m-pilula .m-linha, .m-faixa .m-pilula .m-linha { flex-direction: row; gap: 8px; }
.m-roteiro .m-pilula .m-linha .m-img-emoji, .m-faixa .m-pilula .m-linha .m-img-emoji { width: 34px; height: 34px; }
.m-roteiro .m-pilula .m-linha .k-rotulo, .m-faixa .m-pilula .m-linha .k-rotulo { text-align: left; font-size: .85rem; padding: 6px 2px; }
.m-duo { display: flex; gap: 4px; justify-content: center; }
.m-duo .m-img-emoji { width: 40px; height: 40px; }

/* ---- camada interpretativa e regras de 04/10/2026 ---- */
/* "Em outras palavras": campo próprio, visualmente distinto dos termos do livro (verde-argila suave, texto em itálico com serifa) */
.m-explica { display: flex; flex-direction: column; gap: 6px; background: rgba(63, 107, 105, .09); border-radius: 26px; padding: 12px 14px 14px; }
.m-explica-rotulo { align-self: flex-start; font: 800 .7rem/1 var(--k-fonte); letter-spacing: .08em; text-transform: uppercase; color: #2F5250; background: rgba(63, 107, 105, .16); padding: 5px 10px; border-radius: 999px; }
.m-explica-linha { margin: 0; font: italic 500 1rem/1.42 Georgia, "Times New Roman", serif; color: #27403f; }
.m-explica-linha.m-grupo { padding: 4px 8px; border-radius: 16px; }
.js .m-explica-linha.m-grupo.k-ativo { outline: 3px solid var(--k-verde); outline-offset: 0; background: rgba(63, 107, 105, .14); }
/* título menor (hierarquia): a figura é o protagonista */
.m-roteiro .k-placa { font-size: clamp(1.05rem, 2.2vw, 1.3rem); padding: 14px 26px; }
.m-roteiro .k-placa::before, .m-roteiro .k-placa::after { display: none; }
.m-fatores .centro .k-placa { font-size: 1.05rem; padding: 10px 22px; }
.l-lista .cabeca .k-faixa { font-size: 1.1rem; padding: 10px 28px; }
/* figura única: "Muitas variáveis" -> "Extremamente complexo" */
.m-figura-unica { max-width: 340px; margin: 0 auto; padding: 16px 14px 14px; gap: 8px; }
.m-figura-unica .m-img.m-img-par { max-width: 250px; }
.m-rotulos-juntos { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.m-rotulos-juntos .k-seta { width: 42px; height: 24px; }
.m-efeito .k-ponto { position: static; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: middle; }
/* grupos uniformes: itens de lista com a mesma altura e figuras do mesmo tamanho; cartões dos fatores com a mesma altura */
.l-lista .itens { grid-auto-rows: 1fr; }
.l-lista .item { min-height: 66px; }
.l-lista .item .m-linha .m-img-emoji, .l-lista .item .m-img.m-img-par { width: 44px; height: 44px; flex: none; }
.m-fatores .cards { align-items: stretch; }
.m-fatores .exemplos { flex: 1; }
.m-fatores .exemplo { min-height: 58px; flex: 1 0 auto; }
.m-fatores .exemplo .m-img-emoji, .m-fatores .exemplo .m-img.m-img-par { width: 48px; height: 48px; flex: none; }
.m-fatores .exemplo.tem-ilu { flex-direction: row; text-align: left; }
.m-fatores .exemplo.tem-ilu .k-rotulo { text-align: left; }
/* figura única: cabeça em linha para o bloco caber na área da trilha (a imagem e os rótulos têm prioridade) */
.m-causa-unica .cabeca { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 14px; }
.m-causa-unica .m-sujeito .m-img.m-img-par { width: 104px; max-width: none; }
.m-causa-unica .m-figura-unica .m-img.m-img-par { max-width: 190px; }
.m-causa-unica .m-figura-unica { padding: 12px 12px 12px; gap: 6px; }

/* close/busto (régua, item 25): o corte lateral é aceitável e a vinheta suave dissolve TODAS as bordas no fundo do cartão */
.m-img.m-img-vinheta { -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 46%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 50% 46%, #000 55%, transparent 100%); }

/* lista com 3 itens: 3 colunas (sem célula vazia); legenda do item abaixo do rótulo */
.l-lista .itens.itens-3 { grid-template-columns: repeat(3, 1fr); }
.l-lista .item .k-legenda { flex-basis: 100%; margin: -4px 0 0; padding-left: 56px; max-width: none; text-align: left; }
.l-lista .item:has(.k-legenda) { flex-wrap: wrap; }
@media (max-width: 640px) { .l-lista .itens.itens-3 { grid-template-columns: 1fr; } }

/* item de lista com vários emojis lado a lado (ex.: as 3 vias de entrada): emojis em fila acima do rótulo, do mesmo tamanho dos demais */
.l-lista .item .m-linha:has(.m-duo) { flex-direction: column; align-items: flex-start; gap: 4px; }
.l-lista .item .m-duo { justify-content: flex-start; gap: 2px; }
.l-lista .item .m-duo .m-img-emoji { width: 34px; height: 34px; }
.l-lista .item:has(.m-duo) .k-legenda { padding-left: 2px; }

/* regra 41: figura única no topo da lista; itens só com rótulo (sem bolinha) */
.m-figura-topo { display: flex; justify-content: center; }
.m-figura-topo .m-img.m-img-par { width: 100%; max-width: 250px; }
.l-lista .item.sem-marcador::before { display: none; }
.l-lista .item.sem-marcador { justify-content: center; text-align: center; }
.l-lista .item.sem-marcador .k-rotulo { text-align: center; }

/* escala objetivo -> subjetivo */
.m-escala-g { display: flex; flex-direction: column; gap: 12px; }
.m-escala-extremos { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-escala-extremos .k-seta { flex: 1; max-width: none; height: 26px; }
.m-escala-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.m-escala-item { display: flex; align-items: center; gap: 8px; border-radius: 18px; padding: 8px 12px; color: var(--k-texto-claro); font: 700 .9rem/1.2 var(--k-fonte);
  background: color-mix(in srgb, var(--k-terracota) calc((1 - var(--t)) * 100%), var(--k-verde)); box-shadow: var(--k-sombra-suave); }
.m-escala-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 246, 236, .25); font-size: .8rem; }
/* perguntas (algoritmo) */
.m-perguntas-g { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.m-perguntas-g > .k-seta { align-self: center; transform: rotate(90deg); width: 40px; height: 22px; }
.m-pergunta { align-items: stretch; text-align: left; padding: 14px 16px; gap: 8px; }
.m-pergunta-texto { margin: 0; font: 700 .95rem/1.3 var(--k-fonte); }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chip { background: var(--k-creme-rotulo); border-radius: 999px; padding: 4px 12px; font: 600 .82rem/1.2 var(--k-fonte); }
.m-chip.-destino { background: var(--k-verde); color: var(--k-texto-claro); }
/* figura original do livro (recolhível) */
.m-figura-livro { margin: 0; text-align: center; }
.m-figura-livro img { max-width: 100%; height: auto; border-radius: 12px; background: #fff; }

/* hub com 2 colunas (4 cartões em 2×2; dois grupos lado a lado) e marcas + / − */
.m-fatores .cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .m-fatores .cards.cols-2 { grid-template-columns: 1fr; } }
.m-marca { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem/1 var(--k-fonte); color: var(--k-texto-claro); }
.m-marca.-mais { background: var(--k-verde); }
.m-marca.-menos { background: var(--k-terracota); }
.m-fatores .exemplo .k-legenda { margin: 0; max-width: none; font-size: .75rem; }
.m-fatores .exemplo { flex-wrap: nowrap; align-items: center; }
.m-fatores .exemplo:has(.k-legenda) { flex-direction: column; align-items: flex-start; gap: 2px; }
.m-fatores .exemplo .k-rotulo { min-width: 0; overflow-wrap: break-word; }
/* etapas (2 a 3) em linha única no painel largo, sem seta solta */
@media (min-width: 641px) {
  .m-etapas .l-etapas { flex-wrap: nowrap; gap: 8px; }
  .m-etapas .l-etapas .etapa { flex: 1 1 0; min-width: 0; max-width: none; }
  .m-etapas .l-etapas .k-seta { width: 34px; flex: none; }
  .m-etapas .l-etapas .k-rotulo { font-size: .85rem; padding: 6px 10px; }
}

/* escada de estágios */
.m-escada-g { display: flex; flex-direction: column; gap: 12px; }
.m-escada-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-degrau { display: flex; align-items: center; gap: 12px; margin-left: calc(var(--i) * 22px); background: var(--k-creme); border-radius: var(--k-raio); padding: 8px 16px 8px 8px; box-shadow: var(--k-sombra-suave); }
.m-degrau .k-selo { width: 40px; height: 40px; font-size: 1.1rem; }
.m-degrau-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.m-degrau-tx .k-legenda { max-width: none; margin: 0; }
.m-vazio { display: none; }
.montado.depurar .m-vazio { display: block; min-height: 40px; border: 2px dashed #d00; }
@media (max-width: 640px) { .m-degrau { margin-left: calc(var(--i) * 10px); } }
/* ficha (hub de 1 cartão) */
.m-fatores .cards.cols-1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
/* Tabela 1: cabeçalho girado e células centralizadas */
.m-cab-gir { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .8rem; padding: 8px 4px; text-align: left; }
.m-cel-c { text-align: center; }
.m-quadro .l-tabela thead th[colspan] { text-align: center; }