/* ==========================================================================
   Páginas internas da frente de IA · componentes C-18 a C-24 e variações
   Usa os tokens de base.css (cores com significado, movimento, tipografia) e as
   classes compartilhadas de secoes.css (.secao, .selo, .faq-*, .final-*, .hero-sub).
   Estado sem JavaScript = estado final de cada cena. O JS (componentes-ia.js)
   liga as classes de animação só no desktop, com movimento e sem pausa.
   ========================================================================== */

.pagina-ia [id] { scroll-margin-top: calc(var(--topo-min) + 16px); }
.sem-quebra { white-space: nowrap; }

/* Cor de cada mecanismo (a mesma semântica das cenas da home) */
[data-mec="integracao"], [data-mec="automacao"] { --c: var(--azul); --c-claro: var(--azul-claro); }
[data-mec="ia"], [data-mec="agente"] { --c: var(--teal); --c-claro: #5fd9cd; }
[data-mec="aprovacao"] { --c: var(--ambar); --c-claro: #ffcb7d; }
[data-mec="pessoa"] { --c: var(--areia); --c-claro: #f3ead6; }
[data-mec="software"] { --c: var(--aco); --c-claro: #b9c2d0; }
[data-mec="eliminar"] { --c: var(--txt-3); --c-claro: var(--txt-2); }

/* Selo do mecanismo */
.mec {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 500 .6rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-claro, var(--txt-2)); padding: 6px 9px 6px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c, var(--linha-3)) 55%, transparent);
  background: color-mix(in srgb, var(--c, transparent) 10%, transparent);
}
.mec .ic { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mec--eliminar { border-style: dashed; background: none; }

/* Cabeçalho de seção em duas colunas (mesmo desenho da HOME-06 e da HOME-07) */
.ia-topo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.ia-topo p { color: var(--txt-2); font-size: 1.05rem; max-width: 50ch; }
@media (max-width: 1023px) { .ia-topo { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; } }

.ia-link { margin-top: 36px; }

/* ==========================================================================
   HUBIA-01 · Hero com a classificação ao vivo (C-18)
   ========================================================================== */

.ia-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--topo-h) + 56px) 0 88px;
}
.ia-hero-fundo {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 78% 50%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 75% at 78% 50%, #000 10%, transparent 72%);
  opacity: .5;
}
/* raio do hero (js/raio.js): fica sobre a grade do fundo e sob o conteúdo.
   O z-index no .wrap é o que garante isso: ele é estático por padrão, e sem
   contexto próprio o canvas, que é posicionado, pintaria por cima do texto. */
.ia-hero-raio { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ia-hero > .wrap { position: relative; z-index: 1; }

/* montagem (js/montagem.js): a cena ocupa a seção inteira, atrás do conteúdo.
   A altura mínima existe porque a esteira cruza em diagonal e o boneco precisa
   de curso de rolagem: numa seção de 520px ela fica espremida e não se lê. */
.secao--montagem { min-height: 86vh; display: flex; align-items: flex-start; }
.secao--montagem > .wrap { position: relative; z-index: 1; width: 100%; }
/* o conteúdo fica em cima e a esteira cruza embaixo, como na dobra de origem.
   Centralizado, o texto caía sobre a cabeça do boneco e ficava cinza sobre
   cinza. A máscara tira o resto do risco: a cena some onde o texto vive. */
.secao-montagem {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 26%, #000 46%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 26%, #000 46%);
}
@media (max-width: 860px) {
  .secao--montagem { min-height: 0; }
  .secao-montagem { -webkit-mask-image: none; mask-image: none; opacity: .5; }
}

.ia-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.ia-h1 { font: 600 clamp(2.4rem, 1.15rem + 3.5vw, 4.3rem)/1.02 var(--f-disp); letter-spacing: -.045em; text-wrap: balance; max-width: 13ch; }
.ia-h1 .ia-h1-ia { color: var(--teal); }
.ia-hero .hero-sub { max-width: 52ch; }

.migalha { margin-bottom: 26px; }
.migalha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: var(--txt-3); }
.migalha li + li::before { content: "›"; margin-right: 8px; color: var(--txt-3); }
.migalha a { color: var(--txt-2); text-decoration: none; }
.migalha a:hover { color: var(--txt); }

.classe {
  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 20px 16px; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.classe-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.classe-proc { color: var(--txt-3); }
.classe-cab {
  display: grid; grid-template-columns: 22px 16px minmax(0, 1fr) auto; column-gap: 14px;
  padding: 0 6px 10px; color: var(--txt-3); border-bottom: 1px solid var(--linha-2);
}
.classe-cab span:first-child { grid-column: 3; }
.classe-cab span:last-child { grid-column: 4; }

.classe-corpo { position: relative; }
/* trilho que liga os nós (posição calculada pelo JS; os valores abaixo são o fallback) */
.classe-corpo::before {
  content: ""; position: absolute; z-index: 0;
  left: var(--t-x, 49px); top: var(--t-top, 26px); height: var(--t-alt, calc(100% - 52px)); width: 1.5px;
  background: linear-gradient(var(--linha-3), var(--linha-2));
}
.classe-lista { list-style: none; }
.classe-item, .classe-painel {
  display: grid; grid-template-columns: 22px 16px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--linha); border-radius: 8px;
  transition: background-color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion));
}
.classe-item:focus-visible, .classe-painel:focus-visible { outline-offset: -2px; }
.classe-num { color: var(--txt-3); font-size: .58rem; }
.classe-no {
  position: relative; z-index: 1; justify-self: center;
  width: 12px; height: 12px; border-radius: 3px; background: var(--c); border: 1.5px solid var(--c);
  transition: background-color calc(var(--dur-base) * var(--motion)) var(--ease-state), border-color calc(var(--dur-base) * var(--motion)) var(--ease-state), box-shadow calc(var(--dur-base) * var(--motion));
}
.classe-txt { display: grid; gap: 2px; min-width: 0; }
.classe-l1 { display: flex; align-items: center; min-width: 0; }
.classe-hoje {
  font-size: .8rem; line-height: 1.35; color: var(--txt-3);
  text-decoration: line-through 1px; text-decoration-color: currentColor;
  transition: color calc(var(--dur-base) * var(--motion)) var(--ease-state), text-decoration-color calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.classe-depois {
  font-size: .92rem; line-height: 1.38; font-weight: 500; color: var(--txt);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.classe-mec { transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) cubic-bezier(.34, 1.56, .64, 1); }
.classe-espera {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font: 500 .5rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--sinal); border: 1px solid rgba(255, 107, 87, .5); border-radius: 4px; padding: 3px 5px;
  opacity: 0; transition: opacity calc(var(--dur-micro) * var(--motion));
}
.classe-item[data-mec="eliminar"] { opacity: .55; }
.classe-item[data-mec="eliminar"] .classe-no { background: var(--ink); border-style: dashed; }
.classe-item[data-mec="eliminar"] .classe-depois { color: var(--txt-3); font-weight: 400; }

.classe-painel { margin-top: 6px; border-bottom: 0; background: rgba(142, 153, 171, .05); }
.classe-painel .classe-depois { grid-column: 3; }

/* Estado "hoje" durante a animação (só com .classe--anima, ligado pelo JS) */
.classe--anima .classe-item:not(.feito) .classe-hoje { color: var(--txt); text-decoration-color: transparent; }
.classe--anima .classe-item:not(.feito) .classe-depois { opacity: 0; transform: translateY(6px); }
.classe--anima .classe-item:not(.feito) .classe-mec { opacity: 0; transform: scale(.6); }
.classe--anima .classe-item:not(.feito) .classe-no { background: var(--ink); border-color: var(--linha-3); }
.classe--anima .classe-item:not(.feito) .classe-espera { opacity: 1; }
.classe--anima .classe-item[data-mec="eliminar"]:not(.feito) { opacity: 1; }
.classe--anima .classe-painel:not(.feito) { opacity: .28; }
.classe--anima .classe-painel:not(.feito) .classe-no { background: var(--ink); border-color: var(--linha-3); }

/* Hover e foco ativam a etapa mesmo antes da classificação chegar nela */
.classe-item.ativo, .classe-painel.ativo { background: rgba(236, 238, 241, .035); opacity: 1 !important; }
.classe-item.ativo .classe-depois { opacity: 1 !important; transform: none !important; }
.classe-item.ativo .classe-mec { opacity: 1 !important; transform: none !important; }
.classe-item.ativo .classe-hoje { color: var(--txt-2) !important; }
.classe-item.ativo .classe-no, .classe-painel.ativo .classe-no { background: var(--c) !important; border-color: var(--c) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }

/* Linha de leitura e tarefa */
.classe-scan {
  position: absolute; left: -6px; right: -6px; top: 0; height: 2px; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--azul-claro) 18%, var(--azul-claro) 82%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 122, 51, .45);
}
.classe-tarefa {
  position: absolute; left: 0; top: 0; z-index: 4; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 2px; background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .7); opacity: 0; pointer-events: none;
}
.classe-item.aprova .classe-no { background: var(--ambar); border-color: var(--ambar); box-shadow: 0 0 0 6px rgba(255, 181, 71, .2), 0 0 26px rgba(255, 181, 71, .65); }
.classe-painel.feito .classe-no { box-shadow: 0 0 0 5px rgba(142, 153, 171, .16); }

.classe-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; min-height: 30px; }
.classe-leg { font-size: .8rem; line-height: 1.5; color: var(--txt-2); max-width: 54ch; }
.classe-repetir {
  flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 .6rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2);
  background: none; border: 1px solid var(--linha-2); border-radius: 999px; padding: 8px 12px;
}
.classe-repetir:hover { color: var(--txt); border-color: var(--linha-3); }
.classe-repetir[hidden] { display: none; }
.classe-repetir svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Raios de luz na aprovação (versão CSS da explosão do hero C) */
.raios { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.raios::before, .raios::after, .raios i {
  content: ""; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; opacity: 0;
}
.raios::before {
  background: repeating-conic-gradient(from 8deg, rgba(255, 181, 71, .95) 0deg 3.5deg, transparent 3.5deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 0 16%, #000 24%, rgba(0, 0, 0, .55) 46%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 16%, #000 24%, rgba(0, 0, 0, .55) 46%, transparent 70%);
}
.raios::after { border: 1.5px solid rgba(255, 181, 71, .9); }
.raios i { background: radial-gradient(circle, rgba(255, 196, 102, .55), transparent 60%); }
.raios.explode::before { animation: raios-sai calc(1.3s * var(--motion)) var(--ease-out) both; }
.raios.explode::after { animation: raios-anel calc(1.1s * var(--motion)) var(--ease-out) both; }
.raios.explode i { animation: raios-brilho calc(1.3s * var(--motion)) ease-out both; }
@keyframes raios-sai { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(12deg); } }
@keyframes raios-anel { 0% { opacity: .9; transform: scale(.12); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes raios-brilho { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }

@media (max-width: 1023px) {
  .ia-hero { padding-top: calc(var(--topo-min) + 40px); padding-bottom: 64px; }
  .ia-hero-in { grid-template-columns: 1fr; }
  .ia-h1 { font-size: clamp(2.2rem, 1.3rem + 4.2vw, 3.4rem); }
  .classe { padding: 16px 14px 14px; }
}
@media (max-width: 560px) {
  .classe-cab { display: none; }
  .classe-item, .classe-painel { grid-template-columns: 16px minmax(0, 1fr); row-gap: 8px; padding: 12px 4px; }
  .classe-num { display: none; }
  .classe-mec { grid-column: 2; justify-self: start; }
  .classe-corpo::before { left: var(--t-x, 12px); }
}

/* ==========================================================================
   HUBIA-02 · O que é
   ========================================================================== */

.ia-def-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.ia-def-in .h2 { position: sticky; top: calc(var(--topo-min) + 40px); max-width: 14ch; }
.ia-def-frase {
  font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); line-height: 1.5; font-weight: 500; letter-spacing: -.012em; color: var(--txt);
  padding-left: 24px; border-left: 2px solid var(--azul);
}
.ia-def-txt { margin-top: 26px; color: var(--txt-2); font-size: 1.02rem; line-height: 1.65; max-width: 62ch; }
.ia-pratica { list-style: none; margin-top: 40px; border-top: 1px solid var(--linha-2); }
.ia-pratica li {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 24px 0; border-bottom: 1px solid var(--linha-2);
}
.ia-pratica li::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--azul);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(var(--dur-slow) * var(--motion)) var(--ease-out);
}
.ia-pratica li:hover::before, .ia-pratica li:focus-within::before { transform: scaleX(1); }
.ia-pratica-num { color: var(--azul-claro); padding-top: 4px; }
.ia-pratica p { color: var(--txt-2); line-height: 1.62; max-width: 60ch; }
.ia-pratica b { color: var(--txt); font-weight: 600; }
.ia-mini-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: .86rem; font-weight: 600; color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--linha-3); padding-bottom: 2px;
}
.ia-mini-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy); }
.ia-mini-link:hover { border-color: var(--azul); }
.ia-pratica li:hover .ia-mini-link svg, .ia-mini-link:focus-visible svg { transform: translateX(3px); }
@media (max-width: 1023px) {
  .ia-def-in { grid-template-columns: 1fr; gap: 28px; }
  .ia-def-in .h2 { position: static; max-width: none; }
}

/* ==========================================================================
   HUBIA-03 · Processos em abas (C-20)
   ========================================================================== */

.proc-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.proc-abas { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--linha-2); border-radius: 999px; background: var(--ink-1); }
.proc-abas [role="tab"] {
  cursor: pointer; border: 0; background: none; color: var(--txt-2);
  font: 600 .9rem/1 var(--f-txt); padding: 11px 18px; border-radius: 999px;
  transition: background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.proc-abas [role="tab"]:hover { color: var(--txt); }
.proc-abas [role="tab"][aria-selected="true"] { background: var(--ink-3); color: var(--txt); box-shadow: inset 0 0 0 1px var(--linha-3); }

.proc-grade { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; margin-top: 30px; align-items: start; }
.proc-quem { color: var(--txt-3); margin-bottom: 14px; }
.proc-rot { color: var(--txt-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.proc-rot--hoje::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--sinal); }
.proc-hoje {
  border: 1px dashed rgba(255, 107, 87, .38); border-radius: 14px; padding: 16px 20px; margin-bottom: 26px;
  background: rgba(255, 107, 87, .03);
}
.proc-hoje p:last-child { color: var(--txt-2); line-height: 1.6; max-width: 72ch; }

.proc-etapas { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: etapa; }
.proc-etapa {
  counter-increment: etapa; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px;
  border: 1px solid var(--linha-2); border-radius: 14px; background: var(--ink-1);
  transition: border-color calc(var(--dur-base) * var(--motion)) var(--ease-state), background-color calc(var(--dur-base) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.proc-etapa::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c);
  transform-origin: 0 50%; transition: transform calc(var(--dur-slow) * var(--motion)) var(--ease-out);
}
.proc-etapa::after {
  content: counter(etapa, decimal-leading-zero); position: absolute; right: 16px; top: 18px;
  font: 500 .58rem/1 var(--f-mono); color: var(--txt-3);
}
.proc-etapa .mec { align-self: flex-start; transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) cubic-bezier(.34, 1.56, .64, 1); }
.proc-etapa p { font-size: .9rem; line-height: 1.52; color: var(--txt-2); }
.proc-etapa[data-mec="aprovacao"] { border-color: rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .035); }
.proc-pessoas {
  margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px;
  border: 1px solid rgba(232, 220, 194, .28); border-radius: 14px; padding: 15px 18px; background: rgba(232, 220, 194, .03);
  transition: opacity calc(var(--dur-base) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.proc-pessoas p { color: var(--txt-2); font-size: .92rem; line-height: 1.55; flex: 1 1 360px; }

/* carimbo das etapas (ligado pelo JS) */
.proc--anima .proc-etapa:not(.feito) { opacity: .22; transform: translateY(8px); }
.proc--anima .proc-etapa:not(.feito)::before { transform: scaleX(0); }
.proc--anima .proc-etapa:not(.feito) .mec { opacity: 0; transform: scale(.6); }
.proc--anima .proc-pessoas:not(.feito) { opacity: 0; transform: translateY(8px); }

/* pares: etapa ↔ legenda */
.proc-etapa.ativo { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 7%, var(--ink-1)) !important; opacity: 1 !important; transform: none !important; }
.proc-etapa.ativo::before { transform: none !important; }
.proc-etapa.ativo .mec { opacity: 1 !important; transform: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.proc-etapa.esmaece { opacity: .32 !important; }

.proc-legenda { position: sticky; top: calc(var(--topo-min) + 32px); border-left: 1px solid var(--linha-2); padding-left: 24px; }
.proc-legenda > p { color: var(--txt-3); margin-bottom: 6px; }
.proc-legenda ul { list-style: none; }
.proc-legenda li {
  display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--linha); cursor: default;
  transition: opacity calc(var(--dur-micro) * var(--motion));
}
.proc-legenda .leg-mecs { display: flex; flex-wrap: wrap; gap: 6px; }
.proc-legenda a { font-size: .88rem; font-weight: 600; color: var(--txt); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.proc-legenda a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy); }
.proc-legenda li:hover a svg, .proc-legenda li:focus-within a svg { transform: translateX(3px); }
.proc-legenda li.ativo .mec { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.proc-legenda.com-destaque li:not(.ativo) { opacity: .45; }

@media (max-width: 1180px) { .proc-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .proc-grade { grid-template-columns: 1fr; }
  .proc-legenda { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--linha-2); padding-top: 8px; }
  .proc-legenda ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .proc-abas { max-width: 100%; overflow-x: auto; }
  .proc-abas [role="tab"] { white-space: nowrap; }
}
@media (max-width: 640px) {
  .proc-etapas { grid-template-columns: 1fr; }
  .proc-legenda ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HUBIA-04 · Cartões de serviço (C-23)
   ========================================================================== */

.ia-cartoes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ia-cartao {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px 24px; border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1);
  text-decoration: none; color: inherit;
  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));
}
.ia-cartao:hover, .ia-cartao:focus-visible { transform: translateY(calc(-4px * var(--motion))); border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 5%, var(--ink-1)); }
.ia-cartao-ic { width: 40px; height: 40px; color: var(--c-claro); }
.ia-cartao-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ia-cartao-ic path { stroke-dasharray: 120; stroke-dashoffset: 0; }
.ia-cartao:hover .ia-cartao-ic path, .ia-cartao:focus-visible .ia-cartao-ic path { animation: ia-desenha calc(.9s * var(--motion)) var(--ease-out) both; }
@keyframes ia-desenha { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.ia-cartao h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -.016em; }
.ia-cartao p { color: var(--txt-2); font-size: .9rem; line-height: 1.55; }
.ia-cartao-seta { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--txt); }
.ia-cartao-seta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy); }
.ia-cartao:hover .ia-cartao-seta svg, .ia-cartao:focus-visible .ia-cartao-seta svg { transform: translateX(3px); }
@media (max-width: 1180px) { .ia-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ia-cartoes { grid-template-columns: 1fr; } }

/* ==========================================================================
   HUBIA-05 · Faz sentido, ainda não faz (C-24)
   ========================================================================== */

.quando-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.quando-col { padding: clamp(24px, 2.6vw, 38px); border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); }
.quando-col--nao { background: transparent; border-style: dashed; }
.quando-col h3 { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; letter-spacing: -.018em; margin-bottom: 14px; }
.quando-col h3 svg { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quando-col--sim h3 svg { stroke: var(--azul-claro); }
.quando-col--nao h3 svg { stroke: var(--txt-3); }
.quando-col ul { list-style: none; }
.quando-col li {
  position: relative; padding: 13px 0 13px 24px; border-top: 1px solid var(--linha); line-height: 1.55; color: var(--txt-2);
  transition: color calc(var(--dur-micro) * var(--motion));
}
.quando-col li::before {
  content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 1.5px; background: var(--azul);
  transition: width calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.quando-col--nao li { color: var(--txt-3); }
.quando-col--nao li::before { background: var(--txt-3); }
.quando-col li:hover, .quando-col li.ativo { color: var(--txt); }
.quando-col li:hover::before, .quando-col li.ativo::before { width: 16px; }
.quando-nota { margin-top: 18px; font-size: .86rem; line-height: 1.55; color: var(--txt-3); padding-left: 24px; }
.quando-fecho { margin-top: 30px; color: var(--txt-2); font-size: 1.02rem; max-width: 70ch; }
.quando-fecho a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 860px) { .quando-grade { grid-template-columns: 1fr; } }

/* ==========================================================================
   HUBIA-06 · Onde cada alternativa para (C-19, faixas com pílulas)
   Desenho da seção "Processos maduros para sites excepcionais" do site atual
   (/criacao-de-sites-bh/): faixas de largura total, nome grande à esquerda,
   divisória vertical e pílulas à direita. As cinco etapas ficam sempre na mesma
   coluna, para comparar as alternativas de cima a baixo.
   ========================================================================== */

.altf { position: relative; }
.altf-legenda {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px;
  margin-bottom: 30px; font-size: .84rem; color: var(--txt-2);
}
.altf-legenda li { display: inline-flex; align-items: center; gap: 10px; }
.altf-legenda .altf-pil { height: 30px; padding: 0 14px; font-size: .58rem; }
.altf-marca { display: inline-block; width: 3px; height: 22px; border-radius: 2px; background: var(--sinal); box-shadow: 0 0 10px rgba(255, 107, 87, .5); }

.altf-corpo { position: relative; }
.altf-tab { width: 100%; border-collapse: collapse; }
.altf-tab tbody { display: block; }
.altf-tab tr {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
  grid-template-areas: "nome cobre" "resolve para";
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
/* linhas de largura total entre as faixas, como na referência */
.altf-tab tr::before, .altf-tab tr:last-child::after {
  content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--linha-2); pointer-events: none;
}
.altf-tab tr::before { top: 0; }
.altf-tab tr:last-child::after { bottom: 0; }
.altf-tab th, .altf-tab td { display: block; text-align: left; }
.altf-tab th {
  grid-area: nome; align-self: end; text-align: right; padding: 36px 40px 0 64px;
  font: 600 clamp(1.25rem, .8rem + .95vw, 1.9rem)/1.08 var(--f-disp); letter-spacing: -.035em; color: var(--txt);
  text-wrap: balance;
}
.altf-resolve { grid-area: resolve; text-align: right !important; padding: 10px 40px 34px 64px; font-size: .9rem; line-height: 1.5; color: var(--txt-2); }
.altf-cobre { grid-area: cobre; align-self: stretch; display: flex !important; align-items: flex-end; padding: 36px 34px 0 40px; border-left: 1px solid var(--linha-2); }
.altf-para { grid-area: para; padding: 14px 34px 34px 40px; border-left: 1px solid var(--linha-2); font-size: .92rem; line-height: 1.55; color: var(--txt-2); }
.altf-para::before {
  content: "Onde para"; display: inline-block; margin-right: 12px; vertical-align: 1px;
  font: 500 .58rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sinal);
}
.altf-nos .altf-para::before { color: var(--azul-claro); }

/* pílulas das cinco etapas */
.altf-pilulas { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; width: 100%; }
.altf-pil {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  height: 48px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent;
  background: #111316; color: #565d69;
  font: 500 .7rem/1.1 var(--f-txt); letter-spacing: .05em; text-transform: uppercase;
  transition: background-color calc(var(--dur-base) * var(--motion)) var(--ease-state), color calc(var(--dur-base) * var(--motion)) var(--ease-state), border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion));
}
.altf-pil--cobre { background: #252526; color: #fff; }
/* etapa que fica de fora: riscada e quase apagada; o contorno fino mantém a coluna visível */
.altf-pil--fora {
  background: transparent; border-color: rgba(236, 238, 241, .07); color: #5d6470;
  text-decoration: line-through 1px; text-decoration-color: rgba(236, 238, 241, .5);
  opacity: .45;
}
.altf-pil--tracejado { background: transparent; border: 1px dashed rgba(236, 238, 241, .4); color: var(--txt-2); }
.altf-pil--hachura { background: repeating-linear-gradient(135deg, #2b2c2e 0 7px, #1a1b1d 7px 14px); color: #fff; }
.altf-nos .altf-pil--cobre { background: var(--azul); color: var(--azul-ink); font-weight: 600; box-shadow: 0 12px 30px -16px rgba(232, 80, 2, .95); }
.altf-nos .altf-pil--cobre:nth-child(2) { transition-delay: calc(80ms * var(--motion)); }
.altf-nos .altf-pil--cobre:nth-child(3) { transition-delay: calc(160ms * var(--motion)); }
.altf-nos .altf-pil--cobre:nth-child(4) { transition-delay: calc(240ms * var(--motion)); }
.altf-nos .altf-pil--cobre:nth-child(5) { transition-delay: calc(320ms * var(--motion)); }
.altf-marca-pil {
  position: absolute; top: -7px; bottom: -7px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: var(--sinal); box-shadow: 0 0 12px rgba(255, 107, 87, .55);
  transition: opacity calc(var(--dur-base) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.altf-laco { position: absolute; top: 50%; right: -32px; width: 22px; height: 22px; margin-top: -11px; color: var(--azul-claro); }
.altf-laco svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* linha lateral com o selo DP (sobe e desce com a rolagem) */
.altf-trilho { position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: var(--linha-2); z-index: 1; }
.altf-trilho-cheio { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--azul); transform-origin: 50% 0; transform: scaleY(1); }
.altf-dp {
  position: absolute; left: -12px; top: 0; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul); color: var(--acao-ink);
  font: 700 .5rem/1 var(--f-txt); letter-spacing: .02em; box-shadow: 0 0 0 5px rgba(232, 80, 2, .16);
}

/* durante a rolagem: faixa ainda não alcançada fica em tom baixo */
.altf--anima tr:not(.passou) { opacity: .34; }
.altf--anima .altf-nos:not(.passou) .altf-pil--cobre { background: #252526; color: #fff; box-shadow: none; transition-delay: 0s; }
.altf--anima tr:not(.passou) .altf-marca-pil { opacity: 0; transform: scaleY(.4); }

/* hover e foco: a faixa acende inteira; numa etapa, a coluna inteira */
.altf-tab tr.ativo { opacity: 1 !important; }
.altf-tab tr.ativo th { color: #fff; }
.altf-tab tr.ativo .altf-marca-pil { opacity: 1 !important; transform: none !important; }
.altf-tab tr.ativo .altf-pil--fora { opacity: .7; }
.altf.com-foco .altf-pil:not(.foco) { opacity: .28; }
.altf-pil.foco { box-shadow: 0 0 0 1px var(--azul-claro); }
.altf-pil--fora.foco { opacity: .8; }
.altf-fecho { margin-top: 28px; }
.alt-fecho { margin-top: 30px; color: var(--txt-2); max-width: 70ch; }

@media (max-width: 1023px) {
  .altf-trilho { display: none; }
  .altf-tab tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nome" "resolve" "cobre" "para"; padding: 22px 0 24px; }
  .altf-tab th { text-align: left; padding: 0; font-size: 1.3rem; }
  .altf-resolve { text-align: left !important; padding: 8px 0 0; }
  .altf-cobre { border-left: 0; padding: 16px 0 0; }
  .altf-para { border-left: 0; padding: 12px 0 0; }
  .altf-pilulas { gap: 4px; }
  /* em caixa normal o rótulo cabe na pílula estreita */
  .altf-pil { height: 36px; padding: 0 3px; font-size: .62rem; letter-spacing: 0; text-transform: none; }
  .altf-laco { display: none; }
}

/* ==========================================================================
   HUBIA-07 · Governança e escrita em dois passos (C-21)
   ========================================================================== */

.gov-ia-topo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.gov-ia-topo .h2 { max-width: 20ch; }
.gov-ia-txt { margin-top: 24px; color: var(--txt-2); font-size: 1.05rem; line-height: 1.62; max-width: 56ch; }
.gov-ia-txt b { color: var(--txt); font-weight: 600; }
.niveis { width: 100%; margin-top: 30px; }
.niveis th, .niveis td { padding: 15px 0; border-top: 1px solid var(--linha-2); text-align: left; vertical-align: top; }
.niveis th { width: 132px; padding-right: 18px; font: 500 .62rem/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt); }
.niveis th span { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.niveis tr:nth-child(1) th span { background: var(--aco); }
.niveis tr:nth-child(2) th span { background: var(--ambar); }
.niveis tr:nth-child(3) th span { background: var(--teal); }
.niveis td { color: var(--txt-2); line-height: 1.55; }
.niveis-nota { margin-top: 14px; font-size: .88rem; color: var(--txt-3); }

.dois {
  position: relative; margin: 0; padding: 20px 22px 16px;
  border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1);
  transition: border-color calc(var(--dur-base) * var(--motion));
}
.dois.espera { border-color: rgba(255, 181, 71, .45); }
.dois.ativo { border-color: rgba(255, 181, 71, .5); }
.dois-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dois-topo .mono:last-child { color: var(--txt-3); }
.dois-passos { list-style: none; }
.dois-passo {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--linha);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.dois-passo:first-child { border-top: 0; }
.dois-ic {
  position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--linha-2); color: var(--txt-2); background: var(--ink-2);
}
.dois-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dois-passo[data-passo="1"] .dois-ic { color: var(--teal); border-color: rgba(23, 191, 176, .4); }
.dois-passo[data-passo="2"] .dois-ic, .dois-passo[data-passo="3"] .dois-ic { color: var(--ambar); border-color: rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .06); }
.dois-passo[data-passo="4"] .dois-ic { color: var(--aco); }
.dois-rot { color: var(--txt-3); margin-bottom: 5px; }
.dois-passo[data-passo="2"] .dois-rot, .dois-passo[data-passo="3"] .dois-rot { color: var(--ambar); }
.dois-passo p:last-child { font-size: .9rem; line-height: 1.5; color: var(--txt-2); }
.dois-passo[data-passo="1"] p:last-child { color: var(--txt); }
.cad-alca { transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-snappy); transform-origin: 16px 10px; }
.dois.aprovado .dois-passo[data-passo="2"] .cad-alca, .dois:not(.dois--anima) .dois-passo[data-passo="2"] .cad-alca { transform: translateY(-2.5px) rotate(18deg); }
.dois--anima .dois-passo:not(.feito) { opacity: .22; transform: translateY(6px); }
.dois.espera .dois-passo[data-passo="2"] .dois-ic { box-shadow: 0 0 0 5px rgba(255, 181, 71, .14); animation: dois-pulsa calc(1.2s * var(--motion)) ease-in-out infinite; }
@keyframes dois-pulsa { 50% { box-shadow: 0 0 0 9px rgba(255, 181, 71, .05); } }
.dois.ativo .dois-passo { opacity: 1 !important; transform: none !important; }
.dois-passo.ativo { background: rgba(236, 238, 241, .03); }
.dois-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; min-height: 30px; }
.dois-base .classe-repetir[hidden] { display: none; }

.controles { list-style: none; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.controles li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid var(--linha-2);
  transition: border-color calc(var(--dur-micro) * var(--motion));
}
.controles li svg { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--txt-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke calc(var(--dur-micro) * var(--motion)); }
.controles b { display: block; font-weight: 600; color: var(--txt); margin-bottom: 4px; }
.controles span { display: block; color: var(--txt-2); font-size: .9rem; line-height: 1.52; }
.controles li:hover, .controles li.ativo, .controles li:focus-within { border-top-color: var(--azul); }
.controles li:hover svg, .controles li.ativo svg, .controles li:focus-within svg { stroke: var(--azul-claro); }
@media (max-width: 1023px) {
  .gov-ia-topo { grid-template-columns: 1fr; }
  .controles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .controles { grid-template-columns: 1fr; } .niveis th { width: 110px; } }

/* ==========================================================================
   HUBIA-08 · Acompanhamento contínuo e painel (C-22)
   ========================================================================== */

.acomp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.acomp-in .h2 { max-width: 18ch; }
.acomp-txt { margin-top: 24px; color: var(--txt-2); font-size: 1.05rem; line-height: 1.62; max-width: 54ch; }
.acomp-lista { list-style: none; margin-top: 28px; border-bottom: 1px solid var(--linha); }
.acomp-lista li {
  position: relative; padding: 11px 0 11px 24px; border-top: 1px solid var(--linha); color: var(--txt-2); line-height: 1.5;
  transition: color calc(var(--dur-micro) * var(--motion));
}
.acomp-lista li::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 2px; background: var(--linha-3);
  transition: background-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.acomp-lista li:hover, .acomp-lista li.ativo { color: var(--txt); }
.acomp-lista li:hover::before, .acomp-lista li.ativo::before { background: var(--teal); box-shadow: 0 0 0 4px rgba(23, 191, 176, .15); }
.acomp-ponte { margin-top: 26px; color: var(--txt-2); line-height: 1.6; max-width: 56ch; }
.acomp-ponte a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }

.painel { margin: 0; padding: 20px; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); position: sticky; top: calc(var(--topo-min) + 32px); }
.painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.painel-vivo { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-3); }
.painel-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(23, 191, 176, .5); animation: painel-pulso calc(2s * var(--motion)) ease-out infinite; }
html[data-pausa="1"] .painel-vivo i, html.movimento-reduzido .painel-vivo i { animation: none; }
@keyframes painel-pulso { 0% { box-shadow: 0 0 0 0 rgba(23, 191, 176, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(23, 191, 176, 0); } }
.painel-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kpi {
  position: relative; padding: 14px 16px 10px; border: 1px solid var(--linha-2); border-radius: 12px; background: var(--ink-2);
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-base) * var(--motion));
}
.kpi-rot { display: block; font: 500 .56rem/1.4 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); min-height: 2.8em; }
.kpi-val { display: block; margin-top: 6px; font: 600 1.85rem/1 var(--f-txt); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--txt); }
.kpi svg { display: block; width: 100%; height: 34px; margin-top: 10px; overflow: visible; }
.kpi polyline { fill: none; stroke: var(--c, var(--azul-claro)); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi[data-kpi="tarefas"] { --c: var(--azul-claro); }
.kpi[data-kpi="aguardando"] { --c: var(--ambar); }
.kpi[data-kpi="excecoes"] { --c: var(--areia); }
.kpi[data-kpi="custo"] { --c: #b9c2d0; }
.kpi.muda { background: color-mix(in srgb, var(--c) 7%, var(--ink-2)); }
.kpi.ativo { border-color: color-mix(in srgb, var(--c) 65%, transparent); }
.painel-evento {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--linha-2); font-size: .85rem; line-height: 1.5; color: var(--txt-2); border-radius: 6px;
  transition: background-color calc(var(--dur-micro) * var(--motion));
}
.painel-evento .mono { color: var(--teal); }
.painel-evento.ativo { background: rgba(23, 191, 176, .05); }
@media (max-width: 1023px) {
  .acomp-in { grid-template-columns: 1fr; }
  .painel { position: static; }
}
@media (max-width: 520px) { .kpi svg { display: none; } .kpi-val { font-size: 1.5rem; } }

/* ==========================================================================
   HUBIA-09 · Jornada compacta (C-07, versão sem fixar)
   ========================================================================== */

.jorc { position: relative; padding-top: 30px; }
.jorc-linha { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--linha-2); }
.jorc-cheia { position: absolute; inset: 0; background: var(--azul); transform-origin: 0 50%; }
.jorc-passos { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.jorc-passo {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 18px;
  border: 1px solid var(--linha-2); border-radius: 14px; background: var(--ink-1);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), border-color calc(var(--dur-base) * var(--motion));
}
.jorc-passo::before {
  content: ""; position: absolute; left: 16px; top: -32px; width: 12px; height: 12px; border-radius: 3px;
  background: var(--ink); border: 2px solid var(--linha-3);
  transition: background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion));
}
.jorc-num { color: var(--txt-3); }
.jorc-passo h3 { font-size: .98rem; line-height: 1.3; letter-spacing: -.012em; }
.jorc-passo p { font-size: .84rem; line-height: 1.5; color: var(--txt-2); }
.jorc-passo .tag { align-self: flex-start; margin-top: auto; }
.jorc--anima .jorc-passo:not(.aceso) { opacity: .38; }
.jorc-passo.aceso::before, .jorc-passo.ativo::before { background: var(--azul); border-color: var(--azul); }
.jorc-passo.ativo { opacity: 1 !important; border-color: rgba(232, 80, 2, .5); }
.jorc-gratis .tag--gratis { box-shadow: 0 0 0 4px rgba(232, 80, 2, .12); }
.jorc-cta { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.jorc-micro { color: var(--txt-2); max-width: 58ch; font-size: .95rem; line-height: 1.55; }
.jorc-cta .link-seta { margin-top: 0; }
@media (max-width: 1280px) { .jorc-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; } .jorc-linha { display: none; } .jorc { padding-top: 22px; } .jorc-passo::before { top: -7px; } }
@media (max-width: 760px) {
  .jorc-passos { grid-template-columns: 1fr; row-gap: 14px; margin-left: 8px; padding-left: 24px; border-left: 2px solid var(--linha-2); }
  .jorc-passo::before { left: -32px; top: 22px; }
}

/* ==========================================================================
   HUBIA-10 · Quem implanta (provas de engenharia)
   ========================================================================== */

.provas { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.prova {
  height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--linha-2); border-radius: 16px;
  background: var(--ink-1); text-decoration: none; color: inherit;
  transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), border-color calc(var(--dur-micro) * var(--motion));
}
.prova:hover, .prova:focus-visible { transform: translateY(calc(-4px * var(--motion))); border-color: rgba(232, 80, 2, .5); }
.prova-tipo { position: relative; align-self: flex-start; color: var(--azul-claro); padding-bottom: 4px; }
.prova-tipo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--azul);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.prova:hover .prova-tipo::after, .prova:focus-visible .prova-tipo::after { transform: scaleX(1); }
.prova h3 { font-size: 1.2rem; letter-spacing: -.02em; }
.prova p { color: var(--txt-2); font-size: .92rem; line-height: 1.55; }
.prova .ia-cartao-seta { margin-top: auto; }
.quem-nota { margin-top: 18px; font-size: .86rem; line-height: 1.55; color: var(--txt-3); max-width: 80ch; }
.quem-neutro { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linha-2); color: var(--txt-2); font-size: 1.04rem; line-height: 1.65; max-width: 76ch; }
.opcional { margin-top: 30px; max-width: 76ch; border: 1px dashed var(--linha-3); border-radius: 14px; padding: 18px 20px; }
.opcional-tag { display: block; color: var(--txt-3); margin-bottom: 8px; }
.opcional p:last-child { color: var(--txt-2); line-height: 1.6; }
html.sem-notas .opcional { display: none !important; } /* desligado no site (D6); só aparece com as notas do protótipo */
@media (max-width: 1023px) { .provas { grid-template-columns: 1fr; } }

/* ==========================================================================
   HUBIA-11 e HUBIA-12 · Revisão, FAQ e CTA final
   ========================================================================== */

.revisado { color: var(--txt-3); margin-bottom: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ia-final-in { max-width: 900px; }
.ia-final-txt { margin-top: 26px; color: var(--txt-2); font-size: 1.1rem; line-height: 1.6; max-width: 60ch; }
.ia-final-in .btn { margin-top: 34px; }
.ia-final-linhas { margin-top: 30px; display: grid; gap: 8px; color: var(--txt-2); }
.ia-final-linhas a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }

/* Capturas do protótipo (?captura=1): sem transições de CSS, para o Chrome sem janela fotografar o estado certo */
html.captura *, html.captura *::before, html.captura *::after { transition: none !important; }

/* Movimento reduzido: tudo no estado final (o JS nem liga as classes de animação) */
html.movimento-reduzido .classe-scan, html.movimento-reduzido .classe-tarefa { display: none; }

/* ==========================================================================
   COMO FUNCIONA · componentes C-25 a C-28 e variações
   ========================================================================== */

[data-mec="simplificar"] { --c: #b4bac4; --c-claro: #d5d9df; }

/* ---------- COMO-01 · Hero com a trilha com portões (C-25) ---------- */
.como-hero-topo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.como-h1 { max-width: 16ch; font-size: clamp(2.2rem, 1.2rem + 2.5vw, 3.4rem); }
.como-hero-topo .hero-sub { margin-top: 0; }

.trilha { position: relative; margin: 72px 0 0; padding-bottom: 70px; }
.trilha-passos { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; position: relative; z-index: 2; }
.trilha-passo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 12px; outline-offset: 6px; transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state); }
.trilha-no {
  width: 18px; height: 18px; border-radius: 5px; margin-bottom: 10px;
  background: var(--azul); border: 2px solid var(--azul); box-shadow: 0 0 0 5px rgba(232, 80, 2, .14);
  transition: background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
}
.trilha-num { color: var(--txt-3); }
.trilha-nome { font-weight: 600; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.012em; }
.trilha-passo .tag { margin-top: 2px; }
.trilha-balao {
  position: absolute; left: -6px; bottom: calc(100% + 12px); width: max-content; max-width: 220px;
  font-size: .8rem; line-height: 1.4; color: var(--txt); background: var(--ink-3); border: 1px solid var(--linha-3);
  border-radius: 10px; padding: 9px 12px; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.trilha-passo.ativo .trilha-balao { opacity: 1; transform: none; }
.trilha-passo.ativo .trilha-no { box-shadow: 0 0 0 7px rgba(232, 80, 2, .22); }

.trilha-linha { position: absolute; z-index: 1; height: 2px; margin-top: -1px; background: var(--linha-2); left: 9px; right: 9px; top: 9px; }
.trilha-cheia { position: absolute; inset: 0; background: var(--azul); transform-origin: 0 50%; transform: scaleX(1); }
.trilha-portao { position: absolute; z-index: 3; width: 0; height: 0; }
.trilha-portao-ic {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--ink); border: 1.5px solid var(--ambar); border-radius: 3px;
  transition: background-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
}
.trilha-portao b { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); white-space: nowrap; font-size: .5rem; color: var(--ambar); opacity: .8; }
.trilha-portao.aberto .trilha-portao-ic { background: var(--ambar); box-shadow: 0 0 16px rgba(255, 181, 71, .6); }
.trilha-volta { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.trilha-volta-linha { fill: none; stroke: var(--linha-3); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(1s * var(--motion)) var(--ease-state); }
.trilha-volta-seta { fill: none; stroke: var(--linha-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity calc(var(--dur-base) * var(--motion)); }
.trilha-volta-rot { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 0 10px; background: var(--ink); color: var(--txt-3); white-space: nowrap; transition: opacity calc(var(--dur-base) * var(--motion)); }
.trilha-tarefa { position: absolute; left: 0; top: 0; z-index: 4; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 2px; background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .7); opacity: 0; pointer-events: none; }
.trilha .classe-repetir { position: absolute; right: 0; bottom: 0; }

.trilha--anima .trilha-passo:not(.aceso) { opacity: .38; }
.trilha--anima .trilha-passo:not(.aceso) .trilha-no { background: var(--ink); border-color: var(--linha-3); box-shadow: none; }
.trilha--anima .trilha-passo.ativo { opacity: 1; }
.trilha--anima .trilha-portao:not(.aberto) .trilha-portao-ic { border-color: rgba(255, 181, 71, .45); }
.trilha--anima:not(.volta-feita) .trilha-volta-linha { stroke-dashoffset: 1; }
.trilha--anima:not(.volta-feita) .trilha-volta-seta, .trilha--anima:not(.volta-feita) .trilha-volta-rot { opacity: 0; }

@media (max-width: 1023px) {
  .como-hero-topo { grid-template-columns: 1fr; gap: 22px; }
  .trilha { margin-top: 44px; padding-bottom: 0; }
  .trilha-passos { grid-template-columns: 1fr; gap: 0; margin-left: 8px; border-left: 2px solid var(--azul); }
  .trilha-passo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 0 22px 22px; }
  .trilha-passo + .trilha-passo { border-top: 1px dashed rgba(255, 181, 71, .35); }
  .trilha-no { position: absolute; left: -10px; top: 16px; width: 16px; height: 16px; margin: 0; }
  .trilha-nome { flex: 1 1 100%; order: 2; }
  .trilha-num { order: 1; }
  .trilha-passo .tag { order: 3; }
  .trilha-balao { position: static; order: 4; opacity: 1; transform: none; background: none; border: 0; padding: 0; color: var(--txt-2); max-width: none; }
  .trilha-linha, .trilha-portao, .trilha-volta, .trilha-volta-rot, .trilha-tarefa, .trilha .classe-repetir { display: none !important; }
}

/* ---------- COMO-02 · Passos em faixas (C-26) ---------- */
.como-def { max-width: 76ch; margin-bottom: 40px; }
.faixas { position: relative; }
.faixas-lista { list-style: none; }
.faixa {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.faixa::before, .faixa:last-child::after { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--linha-2); pointer-events: none; }
.faixa::before { top: 0; }
.faixa:last-child::after { bottom: 0; }
.faixa-esq { padding: 36px 40px 34px 64px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.faixa-num { color: var(--txt-3); }
.faixa-nome { font: 600 clamp(1.25rem, .8rem + .95vw, 1.85rem)/1.1 var(--f-disp); letter-spacing: -.035em; text-wrap: balance; }
.faixa-dir { padding: 36px 34px 34px 40px; border-left: 1px solid var(--linha-2); }
.faixa-txt { color: var(--txt-2); line-height: 1.6; max-width: 66ch; }
.faixa-grupos { margin-top: 18px; display: grid; gap: 10px; }
.faixa-grupo { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.faixa-grupo .altf-pil { position: relative; height: 40px; padding: 0 16px; font-size: .64rem; }
.faixa-grupo .altf-pil--fora:hover, .faixa-grupo .altf-pil--fora:focus-visible { opacity: .85; }
.faixa-grupo .altf-pil[data-depois]::after {
  content: attr(data-depois); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  white-space: nowrap; text-decoration: none; text-transform: none; letter-spacing: 0;
  font: 500 .74rem/1 var(--f-txt); color: var(--txt); background: var(--ink-3); border: 1px solid var(--linha-3);
  border-radius: 8px; padding: 7px 10px; opacity: 0; pointer-events: none;
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.faixa-grupo .altf-pil[data-depois]:hover::after, .faixa-grupo .altf-pil[data-depois]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.faixa-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.faixa-portao { position: absolute; z-index: 2; left: 11px; bottom: -8px; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.faixa-portao i { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 3px; background: var(--ink); border: 1.5px solid rgba(255, 181, 71, .55); transition: background-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion)); }
.faixa-portao b { font: 500 .54rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); background: var(--ink); padding: 3px 6px; }
.faixa.passou .faixa-portao i { background: var(--ambar); box-shadow: 0 0 12px rgba(255, 181, 71, .5); }
.faixa--marco .faixa-portao b { text-transform: none; letter-spacing: 0; font: 600 .78rem/1.2 var(--f-txt); }
.faixas--anima .faixa:not(.passou) { opacity: .34; }
.faixa.ativo { opacity: 1 !important; }
@media (min-width: 1024px) { .faixas .altf-trilho { left: 18px; } }
@media (max-width: 1023px) {
  .faixas .altf-trilho { display: none; }
  .faixa { grid-template-columns: 1fr; padding: 22px 0 26px; }
  .faixa-esq { padding: 0; text-align: left; align-items: flex-start; }
  .faixa-dir { padding: 14px 0 0; border-left: 0; }
  .faixa-portao { position: static; margin-top: 18px; }
  .faixa-grupo .altf-pil { height: 34px; padding: 0 12px; font-size: .6rem; }
}

/* ---------- COMO-03 · Mapa Operacional anotado (C-27) ---------- */
.mapa-anot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.conversa { list-style: none; border-top: 1px solid var(--linha-2); }
.conversa > li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--linha-2);
  transition: opacity calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.conversa-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linha-3); color: var(--txt-2); font-size: .7rem; transition: background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)); }
.conversa h3 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -.012em; }
.conversa p { grid-column: 2; color: var(--txt-2); font-size: .92rem; line-height: 1.55; }
.conversa > li.ativo .conversa-num, .conversa > li.par .conversa-num { background: var(--azul); border-color: var(--azul); color: var(--azul-ink); }
.conversa > li.par { border-bottom-color: rgba(232, 80, 2, .5); }
.perguntas { margin: 30px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--linha-2); }
.perguntas > p { color: var(--txt-3); margin-bottom: 12px; }
.perguntas ul { list-style: none; display: grid; gap: 12px; }
.perguntas li { position: relative; padding-left: 18px; font-size: .98rem; line-height: 1.5; color: var(--txt); font-style: italic; }
.perguntas li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }

.mapa--grande { transform: none; padding: 26px 28px 24px; position: sticky; top: calc(var(--topo-min) + 24px); }
.mapa--grande .mapa-tit { font-size: 1.3rem; }
.mapa--grande .mapa-sub, .mapa--grande .mapa-proc, .mapa--grande .mapa-h { font-size: .58rem; }
.mapa-reg { padding: 14px 0; border-top: 1.5px dashed rgba(21, 23, 27, .18); transition: opacity calc(var(--dur-micro) * var(--motion)); border-radius: 4px; outline-offset: 4px; }
.mapa-reg p { font-size: .82rem; line-height: 1.5; color: #2b2e33; }
.mapa--grande .mapa-fluxo { flex-wrap: wrap; row-gap: 16px; margin: 14px 0 12px; }
.mapa--grande .mf-cx { flex: 1 1 22%; font-size: .66rem; padding: 10px 6px; }
.mapa--grande .mf-sx { font-size: .8rem; }
.mf-sinal[data-sinal="consulta"]::after { background: #b83e00; }
.mf-sinal[data-sinal="decisão"]::after { background: #c98a12; }
.mapa--grande .mapa-prio { font-size: .74rem; }
.mapa--grande .mapa-prio thead th { font-size: .52rem; }
.mapa-tobe { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mapa-tobe li { font: 600 .6rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 7px 9px; border-radius: 999px; border: 1.5px solid currentColor; }
.mapa-tobe .tb-int, .mapa-tobe .tb-auto { color: #8f3000; }
.mapa-tobe .tb-ia, .mapa-tobe .tb-agente { color: #075f57; }
.mapa-tobe .tb-aprov { color: #7a4f00; }
.mapa-tobe .tb-pessoa { color: #5c4f33; }
.mapa-tobe .tb-soft { color: #48505d; }
.mapa-inv { list-style: none; display: grid; gap: 6px; margin-top: 8px; }
.mapa-inv li { position: relative; padding-left: 16px; font-size: .8rem; line-height: 1.45; color: #2b2e33; }
.mapa-inv li::before { content: "?"; position: absolute; left: 0; top: 0; font: 700 .7rem/1.45 var(--f-mono); color: #8f2a0b; }
.mapa-prox { margin-top: 12px; padding-top: 10px; border-top: 1.5px solid #15171b; font-weight: 600; }
.mapa-anot.com-foco .mapa-reg:not(.foco) { opacity: .28; }
.mapa-reg.foco, .mapa-reg.ativo { background: rgba(232, 80, 2, .07); }
.mapa-anot.realca-sinais .mf-sinal::after { box-shadow: 0 0 0 3px rgba(229, 72, 58, .25); transform: translateX(-50%) scale(1.12); }
@media (max-width: 1023px) {
  .mapa-anot { grid-template-columns: 1fr; }
  .mapa--grande { position: static; padding: 20px 18px; }
  .mapa--grande .mf-cx { flex: 1 1 40%; }
  .mapa--grande .mapa-fluxo .mf-sx { display: none; }
}

/* ---------- COMO-04 · Classificação em cartões ---------- */
.class-ex { margin-bottom: 26px; }
.class-ex-tit { color: var(--txt-3); margin-bottom: 12px; }
.class-ex-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.class-ex-lista > li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--linha-2); background: var(--ink-1); font-size: .84rem; color: var(--txt-2); cursor: default;
  transition: border-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.class-ex-lista > li i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.class-ex-lista > li.ativo, .class-ex-lista > li.par { color: var(--txt); border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--ink-1)); }
.class-cartoes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.class-cartao {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px;
  border: 1px solid var(--linha-2); border-radius: 14px; background: var(--ink-1);
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.class-cartao::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); }
.class-cartao[data-mec="eliminar"]::before { background: repeating-linear-gradient(90deg, var(--txt-3) 0 6px, transparent 6px 10px); }
.class-cartao .mec { align-self: flex-start; }
.class-quando { color: var(--txt); font-size: .92rem; line-height: 1.5; }
.class-ex-txt { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--linha-2); color: var(--txt-2); font-size: .84rem; line-height: 1.45; }
.class-ex-txt .mono { display: block; color: var(--txt-3); margin-bottom: 4px; font-size: .56rem; }
.class-cartao.ativo, .class-cartao.par { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 6%, var(--ink-1)); transform: translateY(calc(-3px * var(--motion))); }
@media (max-width: 1180px) { .class-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .class-cartoes { grid-template-columns: 1fr; }
  .class-ex-lista { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .class-ex-lista > li { flex: none; }
}

/* ---------- COMO-05 · Saídas do parecer (C-28) ---------- */
.parecer { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(60px, 9vw, 150px); align-items: center; }
.parecer-no {
  position: relative; z-index: 2; display: grid; gap: 6px; padding: 22px 20px; border-radius: 16px;
  border: 1px solid rgba(255, 181, 71, .5); background: rgba(255, 181, 71, .05); text-align: center;
}
.parecer-no .mono { color: var(--ambar); font-size: .62rem; }
.parecer-no-txt { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.parecer-leque { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.parecer-linha { fill: none; stroke: var(--linha-3); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(.9s * var(--motion)) var(--ease-state), stroke calc(var(--dur-micro) * var(--motion)); }
.parecer-linha.desenhada { stroke-dashoffset: 0; }
.parecer-linha--nao.desenhada { stroke-dasharray: .015 .015; }
.parecer-ponta { fill: var(--linha-3); opacity: 0; transition: opacity calc(var(--dur-base) * var(--motion)) calc(.7s * var(--motion)), fill calc(var(--dur-micro) * var(--motion)); }
.parecer-ponta.desenhada { opacity: 1; }
.parecer-linha.ativa { stroke: var(--azul-claro); }
.parecer-ponta.ativa { fill: var(--azul-claro); }
.parecer-saidas { list-style: none; display: grid; gap: 12px; position: relative; z-index: 2; }
.parecer-saidas > li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; align-items: start;
  padding: 18px 20px; border: 1px solid var(--linha-2); border-radius: 14px; background: var(--ink-1);
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.parecer-saidas .parecer-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--linha-2); color: var(--txt-2); grid-row: span 2; }
.parecer-saidas .parecer-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.parecer-saidas h3 { font-size: 1.05rem; letter-spacing: -.012em; }
.parecer-saidas p { color: var(--txt-2); font-size: .9rem; line-height: 1.55; }
/* a saída que manda seguir em frente e a que manda iterar têm cor; "aprofundar"
   e "não" ficam neutras. Os pares são os mesmos no MVP Lab (seguir, ajustar). */
.parecer-saidas > li[data-saida="implantar"] .parecer-ic,
.parecer-saidas > li[data-saida="seguir"] .parecer-ic { color: var(--azul-claro); border-color: rgba(232, 80, 2, .4); }
.parecer-saidas > li[data-saida="testar"] .parecer-ic,
.parecer-saidas > li[data-saida="ajustar"] .parecer-ic { color: var(--teal); border-color: rgba(23, 191, 176, .4); }
.parecer-saida--nao { border-style: dashed !important; }
.parecer-saidas > li.ativo { border-color: rgba(255, 122, 51, .55); background: rgba(232, 80, 2, .05); }
@media (max-width: 1023px) {
  .parecer { grid-template-columns: 1fr; gap: 18px; }
  .parecer-no { justify-self: start; text-align: left; }
  .parecer-leque { display: none; }
}

/* ---------- COMO-06 · O que pedimos da sua equipe ---------- */
.pedimos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pedimos > li { padding: 24px 22px; border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1); transition: border-color calc(var(--dur-micro) * var(--motion)); }
.pedimos > li:hover, .pedimos > li:focus-within { border-color: var(--linha-3); }
.pedimos .mono { color: var(--azul-claro); display: block; margin-bottom: 12px; }
.pedimos p { color: var(--txt-2); line-height: 1.6; }
.pedimos-fecho { margin-top: 26px; color: var(--txt-2); font-size: 1.02rem; max-width: 70ch; }
@media (max-width: 900px) { .pedimos { grid-template-columns: 1fr; } }

/* ---------- COMO-07 · Glossário ---------- */
.glossario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; }
.glossario > div { padding: 18px 0; border-top: 1px solid var(--linha-2); transition: border-color calc(var(--dur-micro) * var(--motion)); }
.glossario > div:hover { border-top-color: var(--azul); }
.glossario dt { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; margin-bottom: 6px; }
.glossario dd { margin: 0; color: var(--txt-2); line-height: 1.6; }
@media (max-width: 860px) { .glossario { grid-template-columns: 1fr; } }
.mapa-prio td.baixa { color: #8f2a0b; font-weight: 600; }
.class-cartoes > li { display: flex; }
.class-cartoes > li > .class-cartao { flex: 1; }
.class-links { margin-top: 26px; }

/* ==========================================================================
   AUTOMAÇÃO DE PROCESSOS · componentes C-29 a C-31 e variações
   ========================================================================== */

/* ---------- AUT-01 · Hero com a esteira com exceções (C-29) ---------- */
.aut-h1 { max-width: 13ch; font-size: clamp(2.4rem, 1.2rem + 3vw, 4rem); }
.esteira {
  position: relative; margin: 64px 0 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);
}
.est-palco {
  position: relative; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); grid-template-rows: auto auto;
  column-gap: clamp(28px, 4.2vw, 72px); row-gap: 18px; align-items: center; padding: 24px 0 12px;
}
.est-linhas { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.est-linha { fill: none; stroke: var(--linha-3); stroke-width: 1.5; }
.est-linha--erp { stroke: rgba(232, 80, 2, .6); }
.est-linha--pessoa { stroke: rgba(232, 220, 194, .5); }

.est-estacao { grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; text-align: center; outline-offset: 6px; }
.est-porta {
  position: relative; width: 100%; max-width: 210px; height: 124px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 14px;
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); background: color-mix(in srgb, var(--c) 6%, var(--ink-2));
  transition: border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-base) * var(--motion));
}
.est-cab { display: inline-flex; align-items: center; gap: 8px; color: var(--c-claro); }
.est-cab .mono { font-size: .6rem; }
.est-ic { display: inline-grid; place-items: center; color: var(--c-claro); }
.est-ic .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.est-vaga {
  position: relative; overflow: hidden; width: 128px; height: 54px; border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--c) 40%, transparent);
}
/* leitura da IA: uma linha teal varre a vaga enquanto a nota está nela */
.est-vaga::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; opacity: 0;
  background: var(--c-claro); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--c) 60%, transparent);
}
.est-estacao.processa .est-porta { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--ink-2)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 14%, transparent), 0 0 34px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.est-estacao.processa .est-vaga { border-style: solid; }
.est-estacao[data-est="ia"].processa .est-vaga::after { animation: est-varre calc(.55s * var(--motion)) linear both; }
@keyframes est-varre { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 2px); opacity: 1; } }
.est-estacao.ativo .est-porta { border-color: var(--c); }
.est-txt { font-size: .84rem; line-height: 1.45; color: var(--txt-2); max-width: 22ch; }
.est-estacao.ativo .est-txt { color: var(--txt); }

.est-saida {
  position: relative; z-index: 1; grid-column: 4; padding: 14px 16px 10px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 5%, var(--ink-2));
  transition: background-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
}
.est-saida[data-est="erp"] { grid-row: 1; }
.est-saida[data-est="pessoa"] { grid-row: 2; }
.est-saida.chega { background: color-mix(in srgb, var(--c) 14%, var(--ink-2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent); }
.est-saida-tit { display: flex; align-items: center; gap: 8px; color: var(--c-claro); padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.est-saida-tit .mono { font-size: .6rem; }
.est-lista { list-style: none; }
.est-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px;
  padding: 8px 4px; border-bottom: 1px solid var(--linha); border-radius: 6px; font-size: .84rem;
  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));
}
.est-item:last-child { border-bottom: 0; }
.est-num { font-size: .62rem; color: var(--txt); }
.est-res { display: inline-flex; align-items: center; gap: 7px; color: var(--azul-claro); }
.est-res::before { content: ""; width: 7px; height: 4px; margin-top: -3px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.est-item--exc .est-res { color: var(--sinal); }
.est-item--exc .est-res::before { width: 6px; height: 6px; margin-top: 0; border: 0; border-radius: 50%; background: currentColor; transform: none; }
.est-det {
  grid-column: 1 / -1; display: block; max-height: 0; opacity: 0; overflow: hidden;
  font-size: .8rem; line-height: 1.45; color: var(--txt);
  transition: max-height calc(var(--dur-base) * var(--motion)) var(--ease-out), opacity calc(var(--dur-micro) * var(--motion)), margin calc(var(--dur-base) * var(--motion));
}
.est-item--exc { cursor: default; }
.est-item.ativo, .est-item:focus-visible { background: rgba(236, 238, 241, .04); }
.est-item--exc.ativo .est-det, .est-item--exc:focus-visible .est-det, .est-item--exc:hover .est-det { max-height: 4em; opacity: 1; margin-top: 6px; }
.esteira--anima .est-item:not(.chegou) { opacity: 0; transform: translateX(-8px); }

/* notas que andam (criadas pelo JS, decorativas) */
.est-nota {
  position: absolute; left: 0; top: 0; z-index: 5; width: 118px; height: 46px; margin: -23px 0 0 -59px;
  display: grid; align-content: center; gap: 7px; padding: 0 12px; border-radius: 7px; pointer-events: none;
  background: var(--papel); color: var(--papel-txt); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .85);
}
.est-nota-num { font-size: .58rem; font-weight: 500; }
.est-nota-campos { display: flex; gap: 5px; }
.est-nota-campos i { height: 4px; border-radius: 2px; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(.3s * var(--motion)) var(--ease-out), background-color calc(var(--dur-micro) * var(--motion)); }
.est-nota-campos i:nth-child(1) { width: 30px; }
.est-nota-campos i:nth-child(2) { width: 22px; transition-delay: calc(70ms * var(--motion)); }
.est-nota-campos i:nth-child(3) { width: 26px; transition-delay: calc(140ms * var(--motion)); }
.est-nota.lido .est-nota-campos i { transform: scaleX(1); }
.est-nota.difere-2 .est-nota-campos i:nth-child(2), .est-nota.difere-3 .est-nota-campos i:nth-child(3) { background: #e5483a; }
.est-nota-res {
  position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; transform: scale(.4);
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) cubic-bezier(.34, 1.56, .64, 1);
}
.est-nota.confere .est-nota-res, .est-nota.difere .est-nota-res { opacity: 1; transform: none; }
.est-nota.confere .est-nota-res { background: var(--azul); }
.est-nota.confere .est-nota-res::before { content: ""; width: 7px; height: 4px; margin-top: -2px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); }
.est-nota.difere .est-nota-res { background: var(--sinal); }
.est-nota.difere .est-nota-res::before { content: "!"; font: 700 .62rem/1 var(--f-mono); color: #2a0b06; }

@media (max-width: 1023px) {
  .esteira { margin-top: 40px; padding: 16px 16px 14px; }
  .est-palco { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; padding: 14px 0 6px; }
  .est-estacao { grid-row: auto; display: flex; align-items: center; gap: 14px; text-align: left; padding: 8px 0 22px; }
  .est-estacao::after { content: ""; position: absolute; left: 22px; bottom: 4px; height: 14px; width: 1.5px; background: var(--linha-3); }
  .est-porta { width: auto; max-width: none; height: auto; flex: none; padding: 10px 12px; }
  .est-vaga { display: none; }
  .est-txt { max-width: none; }
  .est-saida { grid-column: auto; grid-row: auto !important; margin-top: 10px; }
  .est-det { max-height: none; opacity: 1; margin-top: 6px; color: var(--txt-2); }
  .est-linhas, .est-nota { display: none !important; }
}

/* ---------- AUT-02 · O que é ---------- */
.aut-def-link { margin-top: 22px; }

/* ---------- AUT-03 · Guia de mecanismos em faixas (C-30) ---------- */
.guia { position: relative; }
.guia-tab { width: 100%; border-collapse: collapse; }
.guia-tab thead, .guia-tab tbody { display: block; }
.guia-tab tr {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) repeat(4, minmax(0, 1fr));
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.guia-tab tbody tr::before, .guia-tab tbody tr:last-child::after {
  content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--linha-2); pointer-events: none;
}
.guia-tab tbody tr::before { top: 0; }
.guia-tab tbody tr:last-child::after { bottom: 0; }
.guia-tab th, .guia-tab td { display: block; text-align: left; }
.guia-tab thead th {
  padding: 0 22px 16px; font: 500 .6rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3);
  cursor: default; transition: color calc(var(--dur-micro) * var(--motion));
}
.guia-tab thead th[data-col="para"] { color: var(--sinal); }
.guia-tab .ic { flex: none; }
.guia-tab tbody th {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right;
  padding: 34px 36px 32px 64px;
}
.guia-num { color: var(--txt-3); font-size: .6rem; }
.guia-nome { font: 600 clamp(1.2rem, .8rem + .8vw, 1.7rem)/1.1 var(--f-disp); letter-spacing: -.032em; color: var(--txt); text-wrap: balance; transition: color calc(var(--dur-micro) * var(--motion)); }
.guia-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--c-claro); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
.guia-ic .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.guia-tab tbody th::after { content: ""; position: absolute; right: -1px; top: 34px; bottom: 32px; width: 3px; border-radius: 2px; background: var(--c); }
.guia-tab tbody td {
  padding: 34px 22px 32px; border-left: 1px solid var(--linha); font-size: .94rem; line-height: 1.55; color: var(--txt-2);
  transition: opacity calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.guia-tab tbody td:first-of-type { border-left-color: var(--linha-2); }
.guia-tab tbody td[data-col="faz"] { color: var(--txt); }
.guia-tab tbody td[data-col="para"] { position: relative; padding-left: 38px; }
.guia-marca { position: absolute; left: 22px; top: 36px; width: 3px; height: 20px; border-radius: 2px; background: var(--sinal); box-shadow: 0 0 10px rgba(255, 107, 87, .45); }
.guia-marca--aprov { background: var(--ambar); box-shadow: 0 0 12px rgba(255, 181, 71, .6); }
.guia-marca .raios { left: 1.5px; top: 10px; }

/* rolagem: faixa ainda não alcançada pelo selo DP fica em tom baixo */
.guia--anima tbody tr:not(.passou) { opacity: .34; }
.guia--anima tbody tr:not(.passou) .guia-marca { opacity: .3; }
.guia-tab tbody tr.ativo { opacity: 1 !important; }
.guia-tab tbody tr.ativo .guia-nome { color: #fff; }
/* pares: uma coluna acende nas quatro faixas */
.guia[data-foco] tbody td { opacity: .3; }
.guia[data-foco="faz"] [data-col="faz"], .guia[data-foco="para"] [data-col="para"],
.guia[data-foco="usamos"] [data-col="usamos"], .guia[data-foco="exemplo"] [data-col="exemplo"] { opacity: 1; color: var(--txt); }
.guia[data-foco] thead th:not([data-col]) { opacity: 1; }
.guia[data-foco="faz"] thead [data-col="faz"], .guia[data-foco="usamos"] thead [data-col="usamos"], .guia[data-foco="exemplo"] thead [data-col="exemplo"] { color: var(--azul-claro); }
.guia[data-foco="para"] thead [data-col="para"] { color: #ff8a7a; }
.guia-links { margin-top: 26px; }
@media (max-width: 1023px) {
  .guia .altf-trilho { display: none; }
  .guia-tab thead { display: none; }
  .guia-tab tr { grid-template-columns: minmax(0, 1fr); padding: 24px 0 18px; }
  .guia-tab tbody th { flex-direction: row-reverse; justify-content: flex-end; align-items: center; text-align: left; padding: 0 0 6px; }
  .guia-tab tbody th::after { display: none; }
  .guia-num { display: none; }
  .guia-tab tbody td { border-left: 0; padding: 12px 0 0; }
  .guia-tab tbody td::before { content: attr(data-rot); display: block; margin-bottom: 4px; font: 500 .56rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }
  .guia-tab tbody td[data-col="para"] { padding-left: 16px; }
  .guia-tab tbody td[data-col="para"]::before { color: var(--sinal); }
  .guia-marca { left: 0; top: 14px; height: calc(100% - 16px); }
}

/* ---------- AUT-04 · Exemplos em processos administrativos ---------- */
.exs-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 22px; }
.exs-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.exs-legenda .mec { cursor: default; transition: box-shadow calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)); }
.exs-legenda .mec.ativo, .exs-legenda .mec.par { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); background: color-mix(in srgb, var(--c) 18%, transparent); }
.exs.tem-par .exs-legenda .mec:not(.par) { opacity: .4; }
.ex-cartoes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ex-cartoes > li { display: flex; }
.ex-cartao {
  flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 20px;
  border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1); outline-offset: 3px;
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.ex-cartao h3 { font-size: 1.16rem; letter-spacing: -.018em; }
.ex-vira, .ex-fica { padding-left: 14px; border-left: 2px solid var(--azul); }
.ex-fica { border-left-color: var(--areia); }
.ex-vira .mono, .ex-fica .mono { font-size: .56rem; margin-bottom: 5px; color: var(--azul-claro); }
.ex-fica .mono { color: var(--areia); }
.ex-vira p:last-child, .ex-fica p:last-child { font-size: .9rem; line-height: 1.52; color: var(--txt-2); }
.ex-mecs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--linha-2); }
.ex-cartao.ativo, .ex-cartao.par { border-color: var(--linha-3); background: var(--ink-2); transform: translateY(calc(-3px * var(--motion))); }
.ex-cartao.ativo .ex-mecs .mec, .ex-cartao.par .ex-mecs .mec { background: color-mix(in srgb, var(--c) 18%, transparent); }
.exs.com-foco .ex-cartao:not(.par) { opacity: .32; }
@media (max-width: 1180px) { .ex-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ex-cartoes { grid-template-columns: 1fr; }
  .exs-legenda { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; max-width: 100%; }
  .exs-legenda .mec { flex: none; }
}

/* ---------- AUT-05 · Mapa de integrações (C-31) ---------- */
.integ { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.integ-lista { list-style: none; border-top: 1px solid var(--linha-2); }
.integ-lista > li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 6px;
  border-bottom: 1px solid var(--linha-2); border-radius: 6px; outline-offset: -2px;
  transition: background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.integ-lista b { display: block; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.integ-lista span { color: var(--txt-2); font-size: .9rem; line-height: 1.45; }
.integ-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--linha-2); color: var(--aco); transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)); }
.integ-ic .ic, .integ-no .ic, .integ-centro-ic .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.integ-lista > li.ativo, .integ-lista > li.par { background: rgba(232, 80, 2, .06); }
.integ-lista > li.ativo .integ-ic, .integ-lista > li.par .integ-ic { color: var(--azul-claro); border-color: rgba(232, 80, 2, .5); }
.integ-lista > li[data-sis="planilhas"] b { text-decoration: line-through 1px; text-decoration-color: var(--txt-3); }

.integ-mapa { position: relative; margin: 0; aspect-ratio: 1.12; }
.integ-linhas { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.integ-linha { stroke: rgba(232, 80, 2, .45); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(.8s * var(--motion)) var(--ease-state), stroke calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion)); }
.integ-linha.desenhada { stroke-dashoffset: 0; }
.integ-linha--legado.desenhada { stroke-dasharray: .012 .012; stroke: rgba(142, 153, 171, .55); }
.integ-linha--fora.desenhada { stroke-dasharray: .012 .012; stroke: rgba(236, 238, 241, .16); }
.integ-linha.ativa { stroke: var(--azul-claro); }
.integ-linha--fora.ativa { stroke: rgba(236, 238, 241, .45); }
.integ-pacote { fill: var(--azul-claro); opacity: 0; }
.integ-pacote--lento { fill: #b9c2d0; }
.integ-centro {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 8px; padding: 20px 22px; border-radius: 18px;
  border: 1px solid rgba(232, 80, 2, .55); background: color-mix(in srgb, var(--azul) 10%, var(--ink-1));
  box-shadow: 0 0 0 8px rgba(232, 80, 2, .06), 0 20px 50px -24px rgba(232, 80, 2, .6);
}
.integ-centro .mono { font-size: .62rem; color: var(--txt); }
.integ-centro-ic { color: var(--azul-claro); }
.integ-centro-ic .ic { width: 22px; height: 22px; }
.integ-no {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; width: max-content; white-space: nowrap; padding: 9px 14px 9px 11px; border-radius: 999px;
  border: 1px solid var(--linha-3); background: var(--ink-2); color: var(--txt); font-size: .82rem; font-weight: 500;
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), box-shadow calc(var(--dur-micro) * var(--motion));
}
.integ-no > span { flex: none; display: inline-grid; color: var(--aco); }
.integ-no--fora { border-style: dashed; color: var(--txt-3); background: var(--ink); text-decoration: line-through 1px; text-decoration-color: var(--txt-3); }
.integ-no.ativo { border-color: var(--azul-claro); background: color-mix(in srgb, var(--azul) 12%, var(--ink-2)); box-shadow: 0 0 0 4px rgba(232, 80, 2, .14); }
.integ-no.ativo > span { color: var(--azul-claro); }
.integ.com-foco .integ-no:not(.ativo) { opacity: .4; }
.integ.com-foco .integ-linha:not(.ativa) { opacity: .35; }
.integ--anima .integ-no:not(.aceso) { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
.integ--anima .integ-centro:not(.aceso) { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.integ-centro { transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out); }

.integ-semapi { margin-top: 40px; max-width: 76ch; color: var(--txt-2); font-size: 1.02rem; line-height: 1.62; padding-left: 20px; border-left: 2px solid var(--aco); }
.integ-semapi b { color: var(--txt); font-weight: 600; }
.integ-provas { margin-top: 36px; }
.integ-provas > .mono { color: var(--txt-3); margin-bottom: 12px; }
.integ-provas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.integ-provas a {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--linha-2); background: var(--ink-1); color: var(--txt); text-decoration: none; font-size: .9rem;
  transition: border-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.integ-provas a span { color: var(--txt-2); font-size: .84rem; }
.integ-provas a svg { align-self: center; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy); }
.integ-provas a:hover, .integ-provas a:focus-visible { border-color: rgba(232, 80, 2, .55); transform: translateY(calc(-2px * var(--motion))); }
.integ-provas a:hover svg, .integ-provas a:focus-visible svg { transform: translateX(3px); }
@media (max-width: 1023px) {
  .integ { grid-template-columns: 1fr; }
  .integ-mapa { display: none; }
  .integ-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 640px) {
  .integ-lista { grid-template-columns: 1fr; }
  .integ-provas ul { display: grid; }
  .integ-provas a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; border-radius: 14px; }
  .integ-provas a span { grid-column: 1; }
  .integ-provas a svg { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- AUT-07 · Jornada compacta em quatro passos e entregas ---------- */
.jorc--4 .jorc-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .jorc--4 { padding-top: 30px; }
  .jorc--4 .jorc-linha { display: block; }
  .jorc--4 .jorc-passos { row-gap: 14px; }
  .jorc--4 .jorc-passo::before { top: -32px; }
}
@media (max-width: 1023px) {
  .jorc--4 { padding-top: 22px; }
  .jorc--4 .jorc-linha { display: none; }
  .jorc--4 .jorc-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .jorc--4 .jorc-passo::before { top: -7px; }
}
@media (max-width: 760px) {
  .jorc--4 .jorc-passos { grid-template-columns: 1fr; row-gap: 14px; }
  .jorc--4 .jorc-passo::before { top: 22px; }
}
.recebe { margin-top: 40px; }
.recebe-tit { color: var(--txt-3); margin-bottom: 12px; }

/* ==========================================================================
   AGENTES DE IA · componentes C-32 a C-35 e variações
   ========================================================================== */

/* Cores dos níveis de autonomia (as mesmas da tabela de níveis da HUBIA-07) */
[data-mec="observa"] { --c: var(--aco); --c-claro: #b9c2d0; }
[data-mec="rascunha"] { --c: var(--ambar); --c-claro: #ffcb7d; }
[data-mec="sozinho"] { --c: var(--teal); --c-claro: #5fd9cd; }

/* ---------- AGE-01 · Hero com o agente em ação (C-33) ---------- */
.acao {
  position: relative; margin: 64px 0 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);
}
.acao-estado { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--txt-3); }
.acao-quem { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-2); }
.acao-quem-ic { display: inline-grid; color: var(--teal); }
.acao-quem-ic .ic, .acao-cad .ic, .matriz-ic .ic, .altf-aprov .ic, .altf-aprov-leg .ic, .autonomia-regra-ic .ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acao-quem-ic .ic { width: 15px; height: 15px; }
.acao-estado-txt {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 500; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 122, 51, .45); color: var(--azul-claro);
  transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.acao-estado-txt i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.acao[data-estado="trabalhando"] .acao-estado-txt { color: #5fd9cd; border-color: rgba(23, 191, 176, .5); }
.acao[data-estado="aguardando"] .acao-estado-txt { color: var(--ambar); border-color: rgba(255, 181, 71, .55); }
.acao[data-estado="trabalhando"] .acao-estado-txt i, .acao[data-estado="aguardando"] .acao-estado-txt i { animation: acao-pulso calc(1.1s * var(--motion)) ease-in-out infinite; }
@keyframes acao-pulso { 50% { opacity: .25; } }

.acao-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); margin-top: 20px; align-items: start; }
.acao-tit { color: var(--txt-3); margin-bottom: 10px; font-size: .58rem; }
.acao-log { list-style: none; position: relative; }
.acao-log::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 16px; width: 1.5px; background: var(--linha-2); }
.acao-linha {
  position: relative; display: grid; grid-template-columns: 13px 44px 134px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 8px 8px 8px 0; border-radius: 8px; font-size: .9rem; 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));
}
.acao-no { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--teal); background: var(--ink-1); }
.acao-hora { font-size: .6rem; color: var(--txt-3); }
.acao-verbo { font-weight: 600; color: var(--txt); white-space: nowrap; }
.acao-txt { color: var(--txt-2); line-height: 1.45; }
.acao-onde {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .54rem; color: var(--txt-3); border: 1px solid var(--linha-2); border-radius: 999px; padding: 4px 8px;
}
.acao-cad { display: inline-grid; color: var(--ambar); }
.acao-cad .ic { width: 11px; height: 11px; }
.acao-linha--espera .acao-no, .acao-linha--aprov .acao-no { border-color: var(--ambar); }
.acao-linha--aprov .acao-no { background: var(--ambar); }
.acao-linha--espera .acao-verbo, .acao-linha--aprov .acao-verbo { color: var(--ambar); }
.acao-linha--espera .acao-onde, .acao-linha--aprov .acao-onde { border-color: rgba(255, 181, 71, .45); color: var(--ambar); }
.acao-linha--equipe .acao-no { border-color: var(--areia); background: var(--areia); }
.acao-linha--equipe .acao-verbo { color: var(--areia); }
.acao-linha--equipe .acao-onde { border-color: rgba(232, 220, 194, .45); color: var(--areia); }
.acao-linha.ativo, .acao-linha.par { background: rgba(236, 238, 241, .04); }
/* cena: linhas ainda não escritas ficam escondidas; a linha da vez ganha o cursor */
.acao--anima .acao-linha:not(.feita) { opacity: 0; transform: translateY(6px); }
.acao-linha.agora { background: rgba(23, 191, 176, .05); }
.acao-linha.agora .acao-txt::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 5px; vertical-align: -2px; background: #5fd9cd; animation: acao-cursor calc(.9s * var(--motion)) steps(1) infinite; }
@keyframes acao-cursor { 50% { opacity: 0; } }
.acao-linha--espera.agora { background: rgba(255, 181, 71, .06); }
.acao-linha--espera.agora .acao-no { box-shadow: 0 0 0 0 rgba(255, 181, 71, .5); animation: acao-espera calc(1.2s * var(--motion)) ease-out infinite; }
.acao-linha--espera.agora .acao-txt::after { background: var(--ambar); }
@keyframes acao-espera { 0% { box-shadow: 0 0 0 0 rgba(255, 181, 71, .55); } 100% { box-shadow: 0 0 0 10px rgba(255, 181, 71, 0); } }
.acao-linha--equipe.agora { background: rgba(232, 220, 194, .05); }
.acao-linha--equipe.agora .acao-txt::after { background: var(--areia); }

.acao-matriz { border-left: 1px solid var(--linha-2); padding-left: clamp(20px, 2.6vw, 36px); }
.matriz { margin: 0; display: grid; gap: 12px; }
.matriz-grupo { --cg: var(--txt-3); border: 1px solid var(--linha-2); border-radius: 12px; padding: 12px 12px 8px; }
.matriz-grupo[data-nivel="sozinho"] { --cg: var(--teal); }
.matriz-grupo[data-nivel="aprova"] { --cg: var(--ambar); border-color: rgba(255, 181, 71, .32); }
.matriz-grupo[data-nivel="nunca"] { --cg: var(--sinal); border-style: dashed; }
.matriz-grupo dt { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 500 .58rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cg); }
.matriz-ic { display: inline-grid; }
.matriz-ic .ic { width: 14px; height: 14px; }
.matriz-grupo dd {
  position: relative; margin: 0; padding: 7px 8px 7px 22px; border-radius: 6px; font-size: .88rem; line-height: 1.4; color: var(--txt-2);
  transition: background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.matriz-grupo dd::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 2px; border: 1.5px solid var(--cg); transition: background-color calc(var(--dur-micro) * var(--motion)); }
.matriz-grupo dd.usada::before { background: var(--cg); }
.matriz-grupo dd.agora, .matriz-grupo dd.ativo, .matriz-grupo dd.par { background: color-mix(in srgb, var(--cg) 12%, transparent); color: var(--txt); }
.matriz-grupo dd.espera::before { animation: acao-pulso calc(.9s * var(--motion)) ease-in-out infinite; }
.matriz-fica { display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: .5rem; color: var(--areia); border: 1px solid rgba(232, 220, 194, .45); border-radius: 999px; padding: 3px 6px; }
.acao--anima .matriz dd:not(.usada) .matriz-fica { display: none; }
@media (max-width: 1279px) {
  .acao-linha { grid-template-columns: 13px 44px 134px minmax(0, 1fr); row-gap: 5px; align-items: baseline; }
  .acao-no { align-self: start; margin-top: 4px; }
  .acao-onde { grid-column: 4; justify-self: start; }
}
@media (max-width: 1023px) {
  .acao { margin-top: 40px; padding: 16px 16px 14px; }
  .acao-grade { grid-template-columns: 1fr; }
  .acao-matriz { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha-2); padding-top: 18px; }
  .acao-linha { grid-template-columns: 13px 40px minmax(0, 1fr); row-gap: 4px; align-items: baseline; }
  .acao-no { align-self: start; margin-top: 3px; }
  .acao-txt { grid-column: 3; }
  .acao-onde { grid-column: 3; justify-self: start; }
}

/* ---------- AGE-02 · O que é ---------- */
.ia-def-frase--agente { border-left-color: var(--teal); }

/* ---------- AGE-03 · Faixas com etapas próprias e o cadeado da aprovação ---------- */
.altf-nos--agente .altf-pil--cobre { background: var(--teal); color: #032420; box-shadow: 0 12px 30px -16px rgba(23, 191, 176, .95); }
.altf-nos--agente .altf-para::before { color: var(--ambar); }
.altf-aprov, .altf-aprov-leg {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--ambar);
  border: 1.5px solid rgba(255, 181, 71, .6); background: rgba(255, 181, 71, .08);
}
.altf-aprov { position: absolute; top: 50%; right: -38px; margin-top: -13px; transition: opacity calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion)); box-shadow: 0 0 18px -2px rgba(255, 181, 71, .55); }
.altf-aprov .ic, .altf-aprov-leg .ic { width: 13px; height: 13px; }
.altf-aprov-leg { display: inline-grid; width: 24px; height: 24px; }
.altf--anima .altf-nos:not(.passou) .altf-aprov { opacity: .3; box-shadow: none; }
@media (max-width: 1023px) { .altf-aprov { display: none; } }

/* ---------- AGE-04 · Cartões com o medidor de autonomia (C-35) ---------- */
.nivel-ponto { width: 7px; height: 7px; border-radius: 2px; background: var(--c); flex: none; }
.ex-vira--agente { border-left-color: var(--teal); }
.ex-vira--agente .mono { color: #5fd9cd !important; }
.ex-nivel { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--linha-2); }
.ex-nivel > .mono { font-size: .54rem; color: var(--txt-3); margin-bottom: 9px; }
.nivel-medidor { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.nivel-medidor li { position: relative; padding-top: 11px; font-size: .74rem; color: var(--txt-3); }
.nivel-medidor li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: var(--linha-2); transition: background-color calc(var(--dur-base) * var(--motion)); }
.nivel-medidor li:nth-child(1) { --seg: var(--aco); }
.nivel-medidor li:nth-child(2) { --seg: var(--ambar); }
.nivel-medidor li:nth-child(3) { --seg: var(--teal); }
.nivel-medidor li.aceso::before { background: var(--seg); }
.ex-nivel[data-nivel="observa"] li:nth-child(1), .ex-nivel[data-nivel="rascunha"] li:nth-child(2), .ex-nivel[data-nivel="sozinho"] li:nth-child(3) { color: var(--txt); font-weight: 600; }
.exs--niveis .ex-cartao.ativo, .exs--niveis .ex-cartao.par { border-color: var(--linha-3); }

/* ---------- AGE-05 · Ficha do agente (C-32) ---------- */
@media (min-width: 1024px) { .ficha-anot { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); } }
.ficha-blocos > li { padding: 13px 0; }
.ficha-blocos h3 { font-size: 1rem; }
.ficha-blocos p { font-size: .88rem; }
.ficha.mapa--grande { position: relative; top: 0; }
.ficha .mapa-reg { padding: 11px 0; }
.ficha .mapa-reg p + p { margin-top: 4px; }
.ficha .mapa-reg b { font-weight: 700; }
.ficha-crivo { list-style: none; display: grid; gap: 4px; margin-top: 6px; }
.ficha-crivo li { position: relative; padding-left: 18px; font-size: .8rem; line-height: 1.45; color: #2b2e33; }
.ficha-crivo li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 8px; height: 4px; border-left: 1.8px solid #0b7d73; border-bottom: 1.8px solid #0b7d73; transform: rotate(-45deg); }
.ficha-fora { color: #6a4a3a !important; }
.ficha-fora b { color: #8f2a0b; }
.ficha-carimbo {
  position: absolute; right: 24px; top: 58px; transform: rotate(-9deg);
  padding: 7px 12px; border: 2px solid #c98a12; border-radius: 6px; color: #7a4f00; background: rgba(255, 181, 71, .14);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: opacity calc(.2s * var(--motion)), transform calc(.4s * var(--motion)) cubic-bezier(.34, 1.56, .64, 1);
}
.ficha--anima .ficha-carimbo:not(.bate) { opacity: 0; transform: rotate(-9deg) scale(1.7); }
@media (max-width: 1023px) { .ficha-carimbo { position: static; display: inline-block; margin-top: 14px; } }

/* ---------- AGE-06 · Escada de autonomia e testes antes de ativar (C-34) ---------- */
.autonomia-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.autonomia-in .h2 { max-width: 16ch; }
.autonomia-txt { margin-top: 22px; color: var(--txt-2); font-size: 1.05rem; line-height: 1.62; max-width: 54ch; }
.escada { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 40px; }
.degrau {
  --cn: var(--aco); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px;
  border: 1px solid var(--linha-2); border-top: 3px solid var(--cn); border-radius: 12px; background: var(--ink-1); outline-offset: 3px;
  transition: opacity calc(var(--dur-slow) * var(--motion)) var(--ease-out), transform calc(var(--dur-slow) * var(--motion)) var(--ease-out), border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.degrau[data-nivel="observa"] { min-height: 176px; }
.degrau[data-nivel="rascunha"] { --cn: var(--ambar); min-height: 222px; }
.degrau[data-nivel="sozinho"] { --cn: var(--teal); min-height: 268px; }
.degrau-num { color: var(--cn); font-size: .62rem; }
.degrau h3 { font-size: 1.1rem; letter-spacing: -.015em; }
.degrau p { color: var(--txt-2); font-size: .88rem; line-height: 1.5; }
.degrau-tag { margin-top: auto; align-self: flex-start; font-size: .52rem; color: #b9c2d0; border: 1px solid rgba(142, 153, 171, .55); border-radius: 999px; padding: 4px 8px; }
.degrau.ativo { border-color: var(--cn); background: color-mix(in srgb, var(--cn) 6%, var(--ink-1)); }
.escada--anima .degrau:not(.aceso) { opacity: .2; transform: translateY(14px); }
.autonomia-regra {
  margin-top: 22px; display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .04); color: var(--txt); line-height: 1.55; max-width: 60ch;
}
.autonomia-regra-ic { flex: none; display: inline-grid; color: var(--ambar); margin-top: 2px; }
.autonomia-regra-ic .ic { width: 18px; height: 18px; }

.testes { margin: 0; padding: 20px 22px 16px; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); position: sticky; top: calc(var(--topo-min) + 32px); }
.testes-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.testes-topo .mono { color: var(--txt-3); font-size: .6rem; }
.testes-topo .testes-placar { color: #5fd9cd; }
.testes-lista { list-style: none; }
.teste {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 4px;
  border-top: 1px solid var(--linha); border-radius: 6px; outline-offset: -2px;
  transition: opacity calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.teste-estado { position: relative; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--teal); }
.teste-estado::before { content: ""; position: absolute; left: 5px; top: 5px; width: 7px; height: 4px; border-left: 1.8px solid #032420; border-bottom: 1.8px solid #032420; transform: rotate(-45deg); }
.teste-txt b { display: block; font-weight: 600; font-size: .94rem; line-height: 1.35; }
.teste-txt > span { display: block; margin-top: 2px; color: var(--txt-2); font-size: .86rem; line-height: 1.45; }
.teste-res { margin-top: 2px; font-size: .54rem; color: #5fd9cd; border: 1px solid rgba(23, 191, 176, .45); border-radius: 999px; padding: 4px 8px; }
.teste-doc { display: grid !important; gap: 3px; margin-top: 9px !important; padding: 9px 11px; border-radius: 8px; background: var(--papel); color: var(--papel-txt) !important; font-size: .8rem !important; }
.teste-doc .mono { font-size: .5rem; color: var(--papel-txt-2); }
.teste-doc s { text-decoration-color: #e5483a; text-decoration-thickness: 1.5px; transition: text-decoration-color calc(var(--dur-base) * var(--motion)); }
.teste-doc em { font: 600 .54rem/1 var(--f-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #075f57; }
.teste.ativo { background: rgba(236, 238, 241, .035); }
.testes-nota { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: .8rem; color: var(--txt-3); }
/* cena: testes rodando em sequência */
.testes--anima .teste:not(.rodou):not(.rodando) { opacity: .4; }
.testes--anima .teste:not(.rodou) .teste-estado { background: none; border: 1.5px solid var(--linha-3); }
.testes--anima .teste:not(.rodou) .teste-estado::before { display: none; }
.testes--anima .teste.rodando .teste-estado { border: 2px solid var(--teal); border-right-color: transparent; animation: teste-gira calc(.7s * var(--motion)) linear infinite; }
@keyframes teste-gira { to { transform: rotate(360deg); } }
.testes--anima .teste:not(.rodou):not(.rodando) .teste-res { visibility: hidden; }
.testes--anima .teste.rodando .teste-res { color: var(--txt-3); border-color: var(--linha-2); }
.testes--anima .teste--injecao:not(.rodou) .teste-doc s { text-decoration-color: transparent; }
.testes--anima .teste--injecao:not(.rodou) .teste-doc em { visibility: hidden; }
@media (max-width: 1023px) {
  .autonomia-in { grid-template-columns: 1fr; }
  .testes { position: static; }
}
@media (max-width: 640px) {
  .escada { grid-template-columns: 1fr; align-items: stretch; }
  .degrau { min-height: 0 !important; }
}