/* ==========================================================================
   Desenvolvimento de software (/desenvolvimento-de-software/) · componentes C-45 a C-49
   Usa os tokens de base.css e as classes de secoes.css e componentes-ia.css
   (.ia-hero, .classe-topo, .selo, .guia, .faixa, .quando-col, .prova, .raios).
   Estado sem JavaScript = estado final de cada cena. O JS da página
   (desenvolvimento-de-software.js) liga as classes de animação só no desktop,
   com movimento e sem pausa. Cores com significado: aço para sistemas e software,
   azul para integração e CTA, vermelho para espera e problema, areia para pessoa,
   âmbar para a aprovação.
   ========================================================================== */

/* Cores dos caminhos próprios da DEV-04 (sistemas que já existem, em aço) */
[data-mec="pronto"], [data-mec="configurar"] { --c: var(--aco); --c-claro: #b9c2d0; }

/* Ícones próprios (inseridos pelo JS da página em [data-icd]) */
[data-icd] .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- DEV-01 · H1 ---------- */
.dev-h1 { max-width: 15ch; font-size: clamp(2.4rem, 1.2rem + 3vw, 4rem); }
/* "sob medida" em aço claro, com o traço de cota da planta técnica embaixo */
.dev-h1-sob {
  color: #c6cedb;
  background-image: linear-gradient(90deg, rgba(255, 122, 51, .75) 55%, transparent 55%);
  background-size: 12px 2px; background-repeat: repeat-x; background-position: 0 94%;
  padding-bottom: .04em;
}

/* ==========================================================================
   C-45 · Sistema montado por módulos (DEV-01)
   ========================================================================== */

.mods {
  position: relative; margin: 64px 0 0;
  border: 1px solid var(--linha-2); border-radius: 18px; padding: 20px 24px 16px;
  background:
    linear-gradient(rgba(232, 80, 2, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(232, 80, 2, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    #070b10;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.mods-palco {
  --mods-cols: minmax(0, .82fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  position: relative; display: grid; row-gap: 76px; padding: 22px 0 10px;
}
.mods-linhas { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.mods-linha {
  fill: none; stroke: rgba(232, 80, 2, .6); stroke-width: 1.5; stroke-dasharray: 1;
  transition: stroke calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion));
}
.mods-linha.par { stroke: var(--azul-claro); stroke-width: 2; stroke-dashoffset: 0 !important; }
.mods-porta { fill: #070b10; stroke: rgba(255, 122, 51, .75); stroke-width: 1.4; }
.mods-pacote { fill: var(--azul-claro); filter: drop-shadow(0 0 5px rgba(255, 122, 51, .95)); }
.mods-rot { font: 500 8px var(--f-mono); fill: rgba(255, 122, 51, .85); letter-spacing: .08em; }

/* Janela do portal */
.mods-tela {
  position: relative; z-index: 1; border-radius: 14px;
  border: 1px solid rgba(142, 153, 171, .45); background: rgba(10, 12, 16, .94);
  transition: border-color calc(var(--dur-base) * var(--motion));
}
.mods-barra { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--linha-2); }
.mods-pontos { display: inline-flex; gap: 6px; }
.mods-pontos i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-3); }
.mods-endereco { flex: 1; color: var(--txt-3); font-size: .58rem; }
.mods-estado {
  display: inline-flex; align-items: center; gap: 8px; color: var(--azul-claro); font-size: .58rem;
  transition: opacity calc(var(--dur-base) * var(--motion));
}
.mods-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 4px rgba(232, 80, 2, .18); }

.mods-grade { list-style: none; display: grid; grid-template-columns: var(--mods-cols); gap: 12px; padding: 14px; }
.mod {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 168px;
  padding: 12px 12px 10px; border-radius: 10px; outline-offset: 3px;
  border: 1px solid rgba(142, 153, 171, .45); background: rgba(142, 153, 171, .05);
  transition: border-color calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion));
}
.mod-cab { display: flex; flex-direction: column; gap: 4px; }
.mod-num { color: var(--txt-3); font-size: .52rem; }
.mod-nome { font-size: .96rem; letter-spacing: -.012em; transition: color calc(var(--dur-base) * var(--motion)); }
.mod-corpo { list-style: none; display: grid; gap: 6px; }
.mod-l { position: relative; font-size: .78rem; line-height: 1.35; color: var(--txt-2); }
.mod-l > * { transition: opacity calc(.32s * var(--motion)) var(--ease-out); }
.mod-tab .mod-l { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 6px; background: rgba(236, 238, 241, .03); }
.mod-cod { font-size: .54rem; color: var(--txt); white-space: nowrap; }
.mod-st { color: var(--txt-2); }
.mod-st--ok { color: var(--azul-claro); }
.mod-l--espera .mod-st { color: var(--sinal); }
.mod-l--espera .mod-st::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--sinal); vertical-align: 1px; }
/* origem do dado, no hover de uma linha */
.mod-orig {
  position: absolute; right: 6px; top: -9px; padding: 2px 6px; border-radius: 4px;
  font-size: .48rem; color: var(--azul-claro); background: var(--ink-2); border: 1px solid rgba(232, 80, 2, .45);
  opacity: 0 !important; transform: translateY(3px); pointer-events: none;
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.mod-l:hover .mod-orig { opacity: 1 !important; transform: none; }
.mod-usuario { display: flex; align-items: center; gap: 10px; }
.mod-usuario b { display: block; font-size: .8rem; color: var(--txt); font-weight: 600; }
.mod-sub { display: block; font-size: .68rem; color: var(--txt-3); }
.mod-av {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(232, 220, 194, .1); border: 1px solid rgba(232, 220, 194, .55); color: var(--areia);
  font: 600 .6rem/1 var(--f-txt); letter-spacing: .02em;
}
.mod-menu { list-style: none; display: grid; gap: 4px; margin-top: 4px; }
.mod-menu .mod-l { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--linha); font-size: .74rem; }
.mod-liga { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .5rem; color: var(--azul-claro); transition: opacity calc(var(--dur-base) * var(--motion)); }
.mod-liga::before { content: ""; width: 14px; height: 1.5px; background: currentColor; }

/* Sistemas da empresa, embaixo, alinhados aos módulos que alimentam */
.mods-sis { list-style: none; position: relative; z-index: 1; display: grid; grid-template-columns: var(--mods-cols); column-gap: 12px; padding: 0 15px; }
.sis {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; outline-offset: 3px;
  border: 1px solid rgba(142, 153, 171, .55); background: var(--ink-2);
  transition: opacity calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.sis[data-sis="usuarios"] { grid-column: 1; }
.sis--erp { grid-column: 2 / span 2; }
.sis[data-sis="crm"] { grid-column: 4; }
.sis-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--aco); border: 1px solid rgba(142, 153, 171, .45); }
.sis-ic .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sis-txt b { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.sis-txt > span { display: block; font-size: .74rem; line-height: 1.4; color: var(--txt-3); }
.sis-txt > .sis-reg { margin-top: 6px; font-size: .5rem; line-height: 1.4; color: var(--azul-claro); transition: opacity calc(var(--dur-base) * var(--motion)); }

/* Estado da animação (só com .mods--anima, ligado pelo JS) */
.mods--anima .mod:not(.pronto):not(.ativo):not(.par) { border-style: dashed; border-color: rgba(255, 122, 51, .4); background: transparent; }
.mods--anima .mod:not(.pronto):not(.ativo):not(.par) .mod-nome { color: var(--txt-3); }
.mods--anima .mod:not(.pronto):not(.ativo):not(.par) .mod-l > * { opacity: 0; }
.mods--anima .mod:not(.pronto):not(.ativo):not(.par) .mod-tab .mod-l,
.mods--anima .mod:not(.pronto):not(.ativo):not(.par) .mod-menu .mod-l { background: rgba(142, 153, 171, .07); border-color: transparent; }
.mods--anima .mod:not(.pronto):not(.ativo):not(.par) .mod-liga { opacity: .3; }
/* esboço: linhas cinzas no lugar do conteúdo */
.mod-l::after {
  content: ""; position: absolute; left: 8px; top: 50%; width: 58%; height: 5px; margin-top: -2.5px; border-radius: 3px;
  background: rgba(142, 153, 171, .28); opacity: 0; pointer-events: none;
  transition: opacity calc(.2s * var(--motion));
}
.mod-usuario::after { left: 40px; width: 50%; }
.mods--anima .mod:not(.pronto):not(.ativo):not(.par) .mod-l::after { opacity: 1; }
/* o conteúdo entra uma linha por vez */
.mod.pronto .mod-corpo > :nth-child(2) > *, .mod.pronto .mod-menu > :nth-child(1) > * { transition-delay: calc(90ms * var(--motion)); }
.mod.pronto .mod-corpo > :nth-child(3) > *, .mod.pronto .mod-menu > :nth-child(2) > * { transition-delay: calc(180ms * var(--motion)); }
.mod.pronto .mod-menu > :nth-child(3) > * { transition-delay: calc(270ms * var(--motion)); }
.mod.ligando { border-color: var(--azul) !important; box-shadow: 0 0 0 5px rgba(232, 80, 2, .14), 0 0 28px -8px rgba(232, 80, 2, .6); }
.mods--anima .sis:not(.aceso):not(.ativo):not(.par) { opacity: .42; }
.mods--anima .sis:not(.registrou) .sis-reg { opacity: 0; }
.mods--anima .mods-tela:not(.no-ar) .mods-estado { opacity: 0; }

/* Hover e foco (pares): módulo ↔ ligação ↔ sistema */
.mod.ativo, .mod.par { border-color: var(--azul-claro); box-shadow: 0 0 0 4px rgba(232, 80, 2, .14); }
.mod.ativo .mod-nome, .mod.par .mod-nome { color: #fff; }
.sis.ativo, .sis.par { opacity: 1 !important; border-color: var(--azul-claro); box-shadow: 0 0 0 4px rgba(232, 80, 2, .14); }
.sis.ativo .sis-ic, .sis.par .sis-ic { color: var(--azul-claro); border-color: rgba(232, 80, 2, .55); }
.mods.com-foco .mod:not(.ativo):not(.par), .mods.com-foco .sis:not(.ativo):not(.par) { opacity: .42; }
.mods.com-foco .mods-linha:not(.par) { opacity: .28; }

@media (max-width: 1023px) {
  .mods { margin-top: 40px; padding: 16px 16px 14px; }
  .mods-palco { row-gap: 14px; padding: 14px 0 6px; }
  .mods-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .mod { min-height: 0; }
  .mods-sis { grid-template-columns: 1fr; row-gap: 8px; padding: 0; }
  .sis { grid-column: auto !important; }
  .mods-linhas { display: none !important; }
}
@media (max-width: 560px) {
  .mods-grade { grid-template-columns: 1fr; }
  .mods-endereco { display: none; }
}

/* ==========================================================================
   C-46 · Cartões com planta (DEV-03)
   ========================================================================== */

.dev-cartoes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dev-cartoes > li { display: flex; }
.dev-cartao {
  flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 22px;
  border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1); outline-offset: 3px;
  transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.dev-cartao:hover, .dev-cartao.ativo { transform: translateY(calc(-4px * var(--motion))); border-color: rgba(232, 80, 2, .5); background: color-mix(in srgb, var(--azul) 4%, var(--ink-1)); }
.dev-cartao > :not(.dev-planta) { margin-left: 8px; margin-right: 8px; }
.dev-planta {
  position: relative; padding: 12px 12px 28px; border-radius: 10px; border: 1px solid rgba(232, 80, 2, .2);
  background:
    linear-gradient(rgba(232, 80, 2, .06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(232, 80, 2, .06) 1px, transparent 1px) 0 0 / 16px 16px,
    #070b10;
}
.dev-planta svg { width: 100%; height: auto; overflow: visible; }
.dp-tr { fill: none; stroke: rgba(255, 122, 51, .78); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dp-tr--fundo { stroke: rgba(255, 122, 51, .28); }
.dp-tr--destaque { stroke: var(--azul-claro); fill: rgba(232, 80, 2, .14); }
.dp-tr--botao { stroke: var(--azul); fill: rgba(232, 80, 2, .2); }
.dp-tr--seta { stroke: var(--azul-claro); }
.dev-planta-cota {
  position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; align-items: center; gap: 8px;
  font-size: .5rem; color: rgba(255, 122, 51, .85); opacity: .5; transition: opacity calc(var(--dur-micro) * var(--motion));
}
.dev-planta-cota::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 122, 51, .55), rgba(255, 122, 51, 0)); }
.dev-cartao:hover .dev-planta-cota, .dev-cartao.ativo .dev-planta-cota { opacity: 1; }
/* entrada: a planta se desenha uma vez; hover e foco desenham de novo */
.dev-cartoes--anima .dp-tr { stroke-dashoffset: 1; }
.dev-cartoes--anima .desenhada .dp-tr { stroke-dashoffset: 0; transition: stroke-dashoffset calc(1.1s * var(--motion)) var(--ease-out); }
.dev-cartao:hover .dp-tr, .dev-cartao.ativo .dp-tr { animation: dev-traca calc(.9s * var(--motion)) var(--ease-out) both; }
@keyframes dev-traca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.dev-cartao h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -.016em; }
.dev-cartao > p { color: var(--txt-2); font-size: .9rem; line-height: 1.55; }
.dev-exs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.dev-exs li { font: 500 .54rem/1.35 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); border: 1px solid var(--linha-2); border-radius: 999px; padding: 6px 9px; }
.dev-cartao .ia-mini-link { margin-top: auto; align-self: flex-start; }
.dev-cartao .dev-exs { margin-bottom: 4px; }
@media (max-width: 1180px) { .dev-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dev-cartoes { grid-template-columns: 1fr; } }

/* ==========================================================================
   DEV-04 · Faixas de caminho (C-30 com colunas próprias) e listas (C-24)
   ========================================================================== */

.dev-guia .guia-tab thead th[data-col="usamos"] { white-space: nowrap; }
.dev-quando { margin-top: 72px; }
.dev-def-links { margin-top: 22px; }

/* ==========================================================================
   C-47 · Do processo ao painel (DEV-05)
   ========================================================================== */

.pp-intro p { color: var(--txt-2); font-size: 1.05rem; line-height: 1.62; max-width: 56ch; }
.pp-intro p + p { margin-top: 14px; }
.pp {
  position: relative; margin: 0;
  border: 1px solid var(--linha-2); border-radius: 18px; background: linear-gradient(180deg, var(--ink-1), rgba(10, 12, 16, .7));
  padding: 20px 24px 16px; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.pp-palco { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: 18px 0 8px; }
.pp-etapas { list-style: none; }
.pp-etapa {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 9px 8px; border-bottom: 1px solid var(--linha); border-radius: 8px; outline-offset: -2px;
  transition: background-color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion));
}
.pp-num { color: var(--txt-3); font-size: .54rem; }
.pp-txt { font-size: .86rem; line-height: 1.4; color: var(--txt); transition: color calc(var(--dur-base) * var(--motion)); }
.pp-etapa .mec { transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) cubic-bezier(.34, 1.56, .64, 1), box-shadow calc(var(--dur-micro) * var(--motion)); }
.pp-etapa--cortada { opacity: .62; }
.pp-etapa--cortada s { color: var(--txt-3); text-decoration-thickness: 1px; transition: text-decoration-color calc(var(--dur-base) * var(--motion)); }
.pp-etapa--software { margin-top: 10px; border: 1px solid rgba(142, 153, 171, .45); background: rgba(142, 153, 171, .06); }
.pp-etapa.ativo, .pp-etapa.par { background: rgba(236, 238, 241, .045); opacity: 1 !important; }
.pp-etapa.ativo .mec, .pp-etapa.par .mec { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 26%, transparent); opacity: 1 !important; transform: none !important; }

.pp-painel {
  position: relative; border-radius: 14px; border: 1px solid rgba(142, 153, 171, .5); background: rgba(10, 12, 16, .94);
  transition: opacity calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.pp-painel.par { border-color: #b9c2d0; box-shadow: 0 0 0 4px rgba(142, 153, 171, .14); }
.pp-barra { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--linha-2); }
.pp-barra .mono { font-size: .58rem; color: var(--txt-3); }
.pp-barra .mono:nth-child(2) { flex: 1; color: #b9c2d0; }
.pp-tit { padding: 14px 14px 6px; font-weight: 600; font-size: 1rem; letter-spacing: -.012em; }
/* colunas fixas: a troca de "aguardando" para "aprovado" não desloca a tabela */
.pp-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pp-tab thead th:nth-child(1) { width: 15%; }
.pp-tab thead th:nth-child(2) { width: 37%; }
.pp-tab thead th:nth-child(3) { width: 33%; }
.pp-tab thead th:nth-child(4) { width: 15%; }
.pp-tab th, .pp-tab td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--linha); font-size: .8rem; line-height: 1.42; color: var(--txt-2); }
.pp-tab thead th { padding-top: 8px; padding-bottom: 8px; font: 500 .52rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }
.pp-tab tbody th { font-size: .6rem; color: var(--txt); white-space: nowrap; }
.pp-tab .pp-de { font-size: .58rem; color: var(--txt-3); white-space: nowrap; text-transform: none; }
.pp-linha { outline-offset: -2px; transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), background-color calc(var(--dur-micro) * var(--motion)); }
.pp-linha.ativo, .pp-linha.par { background: rgba(236, 238, 241, .045); opacity: 1 !important; transform: none !important; }
.pp-linha.ativo th, .pp-linha.par th { color: #fff; }
.pp-quem { display: inline-flex; align-items: baseline; gap: 8px; color: var(--c-claro); }
.pp-no { position: relative; flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); transform: translateY(1px); }
.pp-espera { display: none; }
.pp-linha--aprov.espera .pp-espera { display: inline; }
.pp-linha--aprov.espera .pp-feito { display: none; }
.pp-linha--aprov.espera .pp-no { box-shadow: 0 0 0 5px rgba(255, 181, 71, .14); animation: dois-pulsa calc(1.2s * var(--motion)) ease-in-out infinite; }
.pp-rodape { padding: 12px 14px 14px; border-top: 1px solid var(--linha); font-size: .78rem; line-height: 1.5; color: var(--txt-3); }
/* pedido que viaja da etapa ao painel (decorativo, criado pelo JS) */
.pp-ficha {
  position: absolute; left: 0; top: 0; z-index: 5; height: 24px; margin: -12px 0 0 0; padding: 0 9px; border-radius: 6px;
  display: inline-flex; align-items: center; pointer-events: none; white-space: nowrap;
  font: 500 .54rem/1 var(--f-mono); letter-spacing: .04em; background: var(--papel); color: var(--papel-txt);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .85); opacity: 0;
}
.pp-ficha::before { content: ""; width: 6px; height: 6px; margin-right: 7px; border-radius: 2px; background: var(--c, var(--aco)); }

/* Estado da animação (só com .pp--anima) */
.pp--anima .pp-etapa:not(.feito):not(.ativo):not(.par) .mec { opacity: 0; transform: scale(.6); }
.pp--anima .pp-etapa:not(.feito):not(.ativo):not(.par) .pp-txt { color: var(--txt-2); }
.pp--anima .pp-etapa--cortada:not(.feito):not(.ativo) s { text-decoration-color: transparent; color: var(--txt-2); }
.pp--anima .pp-etapa--cortada:not(.feito):not(.ativo) { opacity: 1; }
.pp--anima .pp-painel:not(.aceso):not(.par) { opacity: .4; }
.pp--anima .pp-linha:not(.chegou) { opacity: 0; transform: translateX(-8px); }
.pp.com-foco .pp-etapa:not(.ativo):not(.par) { opacity: .4; }
.pp.com-foco .pp-linha:not(.ativo):not(.par) { opacity: .38; }
.pp-links { margin-top: 26px; }
.pp-ponte { margin-top: 18px; color: var(--txt-2); font-size: 1.02rem; line-height: 1.6; max-width: 70ch; }
.pp-ponte a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }

@media (max-width: 1023px) {
  .pp { padding: 16px 16px 14px; }
  .pp-palco { grid-template-columns: 1fr; gap: 22px; padding: 14px 0 6px; }
  .pp-ficha { display: none !important; }
}
@media (max-width: 640px) {
  .pp-etapa { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; }
  .pp-etapa .mec { grid-column: 2; justify-self: start; }
  .pp-tab thead { display: none; }
  .pp-tab tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pv de" "motivo motivo" "quem quem"; gap: 4px 12px; padding: 12px 14px; border-top: 1px solid var(--linha); }
  .pp-tab th, .pp-tab td { padding: 0; border: 0; }
  .pp-tab tbody th { grid-area: pv; }
  .pp-tab td:nth-of-type(1) { grid-area: motivo; }
  .pp-tab td:nth-of-type(2) { grid-area: quem; }
  .pp-tab td:nth-of-type(3) { grid-area: de; }
}

/* ==========================================================================
   DEV-06 · Fases em faixas com portões de aceite (C-26 com raios nos portões)
   ========================================================================== */

.dev-anda-legenda .dev-losango { flex: none; width: 12px; height: 12px; margin: 0 4px; transform: rotate(45deg); border-radius: 3px; background: var(--ambar); box-shadow: 0 0 10px rgba(255, 181, 71, .45); }
/* os raios saem do losango do portão (a posição segue a .faixa-portao do C-26) */
.dev-portao-raios { left: 18px; top: auto; bottom: -1px; z-index: 3; }
.dev-anda .faixa-portao b { text-transform: none; letter-spacing: .02em; font: 600 .74rem/1.2 var(--f-txt); }
.dev-anda-cta { margin-top: 48px; }
@media (max-width: 1023px) { .dev-portao-raios { display: none; } }

/* ==========================================================================
   C-49 · Registro de versões (DEV-07)
   ========================================================================== */

[data-frente="corretiva"] { --c: var(--sinal); --c-claro: #ff8a7a; }
[data-frente="preventiva"] { --c: var(--aco); --c-claro: #b9c2d0; }
[data-frente="evolutiva"] { --c: var(--azul); --c-claro: var(--azul-claro); }
[data-frente="lancamento"] { --c: var(--txt-2); --c-claro: var(--txt-2); }

.reg-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.reg-in .h2 { max-width: 18ch; }
.reg-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); transition: box-shadow calc(var(--dur-micro) * var(--motion)); }
.reg-frentes { list-style: none; margin-top: 28px; border-bottom: 1px solid var(--linha); }
.reg-frentes li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 4px; border-top: 1px solid var(--linha);
  border-radius: 6px; outline-offset: -2px; transition: background-color calc(var(--dur-micro) * var(--motion));
}
.reg-frentes .reg-ponto { transform: translateY(-1px); }
.reg-frentes b { display: block; font-weight: 600; color: var(--txt); }
.reg-frentes li > span > span { display: block; color: var(--txt-2); font-size: .92rem; line-height: 1.5; }
.reg-frentes li.ativo, .reg-frentes li.par { background: rgba(236, 238, 241, .04); }
.reg-frentes li.ativo .reg-ponto, .reg-frentes li.par .reg-ponto { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }

.reg { margin: 0; padding: 20px 20px 16px; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); }
.reg-monitor { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; padding: 10px 0 12px; border-bottom: 1px solid var(--linha-2); color: var(--txt-3); font-size: .58rem; }
.reg-monitor i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--azul); animation: dev-pulso calc(2.2s * var(--motion)) ease-out infinite; }
.reg-monitor.parado i, html[data-pausa="1"] .reg-monitor i, html.movimento-reduzido .reg-monitor i { animation: none; box-shadow: 0 0 0 4px rgba(232, 80, 2, .18); }
@keyframes dev-pulso { 0% { box-shadow: 0 0 0 0 rgba(232, 80, 2, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(232, 80, 2, 0); } }
.reg-lista { list-style: none; }
.reg-e {
  display: grid; grid-template-columns: 12px 58px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
  padding: 11px 6px; border-bottom: 1px solid var(--linha); border-radius: 6px; outline-offset: -2px;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), background-color calc(var(--dur-micro) * var(--motion));
}
.reg-e .reg-ponto { transform: translateY(-1px); }
.reg-v { font-size: .54rem; color: var(--txt); }
.reg-txt { font-size: .86rem; line-height: 1.45; color: var(--txt-2); }
.reg-tipo { font-size: .5rem; color: var(--c-claro); }
.reg-leg { margin-top: 14px; }
.reg--anima .reg-e:not(.escrita):not(.par):not(.ativo) { opacity: 0; transform: translateY(6px); }
.reg-e.ativo, .reg-e.par { background: rgba(236, 238, 241, .045); opacity: 1 !important; transform: none !important; }
.reg-e.ativo .reg-txt, .reg-e.par .reg-txt { color: var(--txt); }
.reg-e.par .reg-ponto { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.reg.com-foco .reg-e:not(.par):not(.ativo) { opacity: .32; }
@media (max-width: 1023px) { .reg-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .reg-e { grid-template-columns: 12px minmax(0, 1fr); row-gap: 4px; }
  .reg-v { grid-column: 2; }
  .reg-txt { grid-column: 2; }
  .reg-tipo { grid-column: 2; }
}

/* ==========================================================================
   C-48 · Provas por capacidade (DEV-08)
   ========================================================================== */

.cap-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.cap-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 999px; cursor: default; outline-offset: 2px;
  border: 1px solid var(--linha-2); background: var(--ink-1); font-size: .82rem; font-weight: 500; color: var(--txt-2);
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion));
}
.cap-ic { display: inline-grid; color: var(--azul-claro); }
.cap-ic .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cap-item.ativo, .cap-item.par { border-color: rgba(232, 80, 2, .55); background: rgba(232, 80, 2, .08); color: var(--txt); }
.cap.tem-par .cap-item:not(.par):not(.ativo) { opacity: .42; }
.cap-cartoes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cap-cartoes > li { display: flex; }
.cap-cartao { flex: 1; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), border-color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)) var(--ease-state); }
.cap-cartao.par, .cap-cartao.ativo { border-color: rgba(232, 80, 2, .55); transform: translateY(calc(-3px * var(--motion))); }
.cap-cartao.par .prova-tipo::after, .cap-cartao.ativo .prova-tipo::after { transform: scaleX(1); }
.cap.com-foco .cap-cartao:not(.par) { opacity: .34; }
.cap-cartao .cap-setor { color: var(--txt-3); font-size: .56rem; line-height: 1.5; margin-top: -4px; }
.cap-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cap-tags li { font: 500 .52rem/1.35 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--txt-3); border: 1px dashed var(--linha-3); border-radius: 999px; padding: 5px 8px; transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)); }
.cap-tags li.acesa { color: var(--azul-claro); border-style: solid; border-color: rgba(232, 80, 2, .55); }
@media (max-width: 1180px) { .cap-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .cap-cartoes { grid-template-columns: 1fr; }
  .cap-legenda { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .cap-item { flex: none; }
}