/* ==========================================================================
   Casos de uso (/casos-de-uso/ e os três casos) · componentes C-98 a C-101
   Usa os tokens de base.css e as classes de secoes.css e componentes-ia.css
   (.ia-hero, .classe-topo, .selo, .faixa, .altf, .acao, .jorc, .ia-cartao, .raios).
   Estado sem JavaScript = estado final de cada cena ("como pode ficar").
   O JS da página (casos-de-uso.js) liga as animações só no desktop, com movimento e sem pausa.
   Cores com significado (G-11): azul para automação e integração, verde-azulado para IA e agente,
   âmbar para a aprovação de uma pessoa, areia para o trabalho das pessoas, vermelho para a espera.
   ========================================================================== */

/* ---------- Selo, H1 e rótulo do caso de uso ---------- */
.selo--uso { border-style: solid; border-color: rgba(23, 191, 176, .45); color: #5fd9cd; }
.selo--uso .selo-ponto { background: var(--teal); }
.cdu-selo { margin-bottom: 18px; }
.cdu-h1 { max-width: 19ch; font-size: clamp(2.2rem, 1.1rem + 2.7vw, 3.6rem); }
.cdu-h1-ia { color: var(--teal); }
.cdu-rotulo { margin-top: 16px; padding-left: 14px; border-left: 2px solid rgba(23, 191, 176, .55); color: var(--txt-2); font-size: .9rem; line-height: 1.55; max-width: 60ch; }
.cdu-rotulo a { color: var(--txt); text-decoration: underline; text-decoration-color: rgba(23, 191, 176, .6); text-underline-offset: 3px; }
.cdu-rotulo a:hover { color: #5fd9cd; }

/* ---------- Legenda dos mecanismos (usada no hero, nas faixas e no índice) ---------- */
.cdu-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cdu-legenda li {
  display: inline-flex; align-items: center; gap: 8px; cursor: default;
  font: 500 .6rem/1.2 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
  padding: 6px 2px; border-radius: 6px; transition: color calc(var(--dur-micro) * var(--motion));
}
.cdu-legenda li:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.cdu-legenda li.ativo, .cdu-legenda li.par { color: var(--txt); }
.cdu-leg-ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c, var(--txt-3)); }
.cdu-legenda li[data-leg="auto"] { --c: var(--azul); }
.cdu-legenda li[data-leg="ia"] { --c: var(--teal); }
.cdu-legenda li[data-leg="agente"] { --c: var(--teal); }
.cdu-legenda li[data-leg="agente"] .cdu-leg-ponto { border-radius: 3px; }
.cdu-legenda li[data-leg="aprova"] { --c: var(--ambar); }
.cdu-legenda li[data-leg="aprova"] .cdu-leg-ponto { border-radius: 2px; transform: rotate(45deg) scale(.85); }
.cdu-legenda li[data-leg="pessoa"] { --c: var(--areia); }
.cdu-legenda li.ativo .cdu-leg-ponto, .cdu-legenda li.par .cdu-leg-ponto { box-shadow: 0 0 0 4px rgba(236, 238, 241, .08), 0 0 14px var(--c); }

/* ==========================================================================
   C-98 · O processo hoje e como pode ficar (CDU-01)
   ========================================================================== */
.cdu-fluxo {
  position: relative; margin: 60px 0 0;
  border: 1px solid var(--linha-2); border-radius: 18px; padding: 20px 24px 16px;
  background: linear-gradient(180deg, rgba(15, 18, 24, .92), rgba(10, 12, 16, .92));
}
.cdu-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 18px 0 8px; }
.cdu-botoes { display: inline-flex; padding: 4px; border: 1px solid var(--linha-2); border-radius: 999px; background: var(--ink); }
.cdu-btn {
  font: 600 .8rem/1 var(--f-txt); color: var(--txt-2); background: none; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
  transition: background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.cdu-btn:hover { color: var(--txt); }
.cdu-btn:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.cdu-btn[aria-pressed="true"] { background: var(--ink-3); color: var(--txt); box-shadow: inset 0 0 0 1px var(--linha-3); }
.cdu-btn[data-ver="hoje"][aria-pressed="true"] { color: #ffb3a8; box-shadow: inset 0 0 0 1px rgba(255, 107, 87, .45); }
.cdu-btn[data-ver="depois"][aria-pressed="true"] { color: #5fd9cd; box-shadow: inset 0 0 0 1px rgba(23, 191, 176, .5); }

.cdu-palco { position: relative; padding: 54px 0 8px; }
.cdu-linha { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 76px; height: 2px; background: var(--linha-2); border-radius: 2px; overflow: hidden; }
.cdu-linha-cheia { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(1); background: linear-gradient(90deg, var(--azul), var(--teal)); opacity: .7; }
.cdu-fluxo[data-estado="hoje"] .cdu-linha { background: repeating-linear-gradient(90deg, rgba(232, 220, 194, .35) 0 6px, transparent 6px 12px); }
.cdu-fluxo[data-estado="hoje"] .cdu-linha-cheia { background: rgba(232, 220, 194, .5); }

/* o documento de exemplo que anda pela trilha */
.cdu-doc {
  position: absolute; left: 0; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--papel); color: var(--papel-txt);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8); white-space: nowrap; opacity: 0; pointer-events: none;
  transform: translateX(var(--x, 0px)) translateX(-50%);
  transition: opacity calc(var(--dur-base) * var(--motion));
}
.cdu-doc b { font-size: .56rem; letter-spacing: .04em; font-weight: 500; }
.cdu-doc .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cdu--anima .cdu-doc { opacity: 1; }
.cdu-doc.parado::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: var(--papel); }

.cdu-etapas { list-style: none; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; }
.cdu-etapa {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 0 4px 10px; border-radius: 12px; cursor: default; outline: none;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.cdu-etapa:focus-visible .cdu-no { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
.cdu-no {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 6px;
  border: 1.5px solid var(--c, var(--areia)); background: var(--ink); color: var(--c-claro, var(--areia));
  transition: background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
}
.cdu-etapa[data-mec="agente"] .cdu-no { border-radius: 12px; }
.cdu-etapa[data-mec="aprovacao"] .cdu-no { border-radius: 10px; transform: rotate(45deg); }
.cdu-etapa[data-mec="aprovacao"] .cdu-no .ic { transform: rotate(-45deg); }
.cdu-no-ic { display: grid; place-items: center; }
.cdu-no .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cdu-no-ic--hoje { display: none; }
.cdu-num { color: var(--txt-3); font-size: .58rem; }
.cdu-nome { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.cdu-hoje, .cdu-depois { font-size: .8rem; line-height: 1.4; color: var(--txt-2); }
.cdu-hoje { display: none; }
.cdu-mec { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-claro); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.cdu-espera { display: none; align-items: center; gap: 6px; font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; color: #ff9a8b; line-height: 1.35; max-width: 18ch; }
.cdu-espera::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sinal); flex: none; box-shadow: 0 0 10px rgba(255, 107, 87, .6); }

/* estado "como pode ficar" (padrão): cor do mecanismo */
.cdu-fluxo[data-estado="depois"] .cdu-no { background: color-mix(in srgb, var(--c) 16%, var(--ink)); box-shadow: 0 0 18px -6px var(--c); }
.cdu-fluxo[data-estado="depois"] .cdu-etapa[data-mec="aprovacao"] .cdu-no { background: rgba(255, 181, 71, .14); }
/* estado "hoje": tudo em areia, com as esperas em vermelho */
.cdu-fluxo[data-estado="hoje"] .cdu-no { --c: var(--areia); --c-claro: var(--areia); border-radius: 50%; transform: none; background: var(--ink); box-shadow: none; border-style: dashed; }
.cdu-fluxo[data-estado="hoje"] .cdu-no .ic { transform: none; }
.cdu-fluxo[data-estado="hoje"] .cdu-no-ic--hoje { display: grid; }
.cdu-fluxo[data-estado="hoje"] .cdu-no-ic--depois { display: none; }
.cdu-fluxo[data-estado="hoje"] .cdu-hoje { display: block; }
.cdu-fluxo[data-estado="hoje"] .cdu-depois { display: none; }
.cdu-fluxo[data-estado="hoje"] .cdu-espera { display: inline-flex; }
.cdu-fluxo[data-estado="hoje"] .cdu-etapa:has(.cdu-espera)::after {
  content: ""; position: absolute; top: 21px; left: calc(50% + 26px); width: calc(100% - 42px); height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 107, 87, .85) 0 5px, transparent 5px 9px);
}

/* animação: etapas que ainda não passaram ficam apagadas; a da aprovação espera em âmbar */
.cdu--anima .cdu-etapa:not(.passou) { opacity: .38; }
.cdu--anima .cdu-etapa.agora .cdu-no { box-shadow: 0 0 0 6px rgba(236, 238, 241, .06), 0 0 22px -4px var(--c); }
.cdu-fluxo[data-estado="hoje"].cdu--anima .cdu-etapa.agora .cdu-espera { animation: cdu-pisca calc(.9s * var(--motion)) ease-in-out 2; }
.cdu-etapa.espera .cdu-no { animation: cdu-espera calc(1.1s * var(--motion)) ease-in-out infinite; }
@keyframes cdu-pisca { 50% { opacity: .35; } }
@keyframes cdu-espera { 50% { box-shadow: 0 0 0 7px rgba(255, 181, 71, .14), 0 0 22px rgba(255, 181, 71, .5); } }

/* balão da etapa (hover e foco) */
.cdu-balao {
  position: absolute; z-index: 4; left: 50%; top: calc(100% + 6px); width: max(200px, 100%); max-width: 250px;
  transform: translate(-50%, 6px); text-align: left;
  font-size: .8rem; line-height: 1.45; color: var(--txt); background: var(--ink-3); border: 1px solid var(--linha-3);
  border-radius: 10px; padding: 10px 12px; opacity: 0; pointer-events: none;
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.cdu-balao-hoje { display: none; }
.cdu-fluxo[data-estado="hoje"] .cdu-balao-hoje { display: inline; }
.cdu-fluxo[data-estado="hoje"] .cdu-balao-depois { display: none; }
.cdu-etapa.ativo .cdu-balao { opacity: 1; transform: translate(-50%, 0); }
.cdu-etapas li:first-child .cdu-balao { left: 0; transform: translate(0, 6px); }
.cdu-etapas li:first-child.ativo .cdu-balao { transform: translate(0, 0); }
.cdu-etapas li:last-child .cdu-balao { left: auto; right: 0; transform: translate(0, 6px); }
.cdu-etapas li:last-child.ativo .cdu-balao { transform: translate(0, 0); }

/* pares com a legenda */
.cdu-fluxo.com-foco .cdu-etapa:not(.par):not(.ativo) { opacity: .3; }
.cdu-fluxo .cdu-etapa.par .cdu-no { box-shadow: 0 0 0 5px rgba(236, 238, 241, .07), 0 0 22px -4px var(--c); }

.cdu-fluxo .classe-base { margin-top: 26px; }

@media (max-width: 1279px) and (min-width: 1024px) {
  .cdu-nome { font-size: .9rem; }
  .cdu-espera { font-size: .5rem; }
}
@media (max-width: 1023px) {
  .cdu-fluxo { padding: 16px 16px 14px; margin-top: 44px; }
  .cdu-barra { flex-direction: column; align-items: flex-start; }
  .cdu-palco { padding: 18px 0 4px; }
  .cdu-linha { left: 21px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .cdu-fluxo[data-estado="hoje"] .cdu-linha { background: repeating-linear-gradient(180deg, rgba(232, 220, 194, .35) 0 6px, transparent 6px 12px); }
  .cdu-doc { display: none; }
  .cdu-etapas { grid-template-columns: 1fr; gap: 14px; }
  .cdu-etapa { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; text-align: left; padding: 0; }
  .cdu-no { grid-row: span 5; margin: 0; }
  .cdu-num, .cdu-nome, .cdu-hoje, .cdu-depois, .cdu-espera, .cdu-balao { grid-column: 2; }
  .cdu-espera { max-width: none; }
  .cdu-fluxo[data-estado="hoje"] .cdu-etapa:has(.cdu-espera)::after { display: none; }
  .cdu-balao, .cdu-etapas li:first-child .cdu-balao, .cdu-etapas li:last-child .cdu-balao {
    position: static; width: auto; max-width: none; transform: none; opacity: 1; background: none; border: 0; padding: 0; color: var(--txt-2); font-size: .85rem;
  }
}

/* ==========================================================================
   C-26, variante de caso de uso · O que muda em cada etapa (CDU-02)
   ========================================================================== */
.cdu-legenda--faixas { margin: 0 0 22px; }
.cdu-l { color: var(--txt-2); line-height: 1.6; max-width: 66ch; }
.cdu-l + .cdu-l { margin-top: 10px; }
.cdu-rot { display: block; margin-bottom: 3px; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.cdu-l--hoje .cdu-rot { color: #ff9a8b; }
.cdu-l--hoje .cdu-rot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sinal); margin-right: 7px; vertical-align: 1px; }
.cdu-l--depois { color: var(--txt); }
.cdu-l-base { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; }
.cdu-l--pessoa { flex: 1 1 260px; margin: 0 !important; color: var(--txt-2); font-size: .92rem; }
.cdu-l--pessoa .cdu-rot { color: var(--areia); }
.cdu-pil { position: relative; height: 38px; padding: 0 14px 0 10px; gap: 8px; font-size: .62rem; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 16%, #111316); color: var(--c-claro); }
.cdu-pil-ic .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.cdu-faixas.faixas--anima .faixa:not(.passou) .cdu-pil { background: #16181c; color: #6b7280; border-color: transparent; }
.cdu-faixas .faixa.ativo .cdu-pil, .cdu-faixas .faixa.par .cdu-pil { box-shadow: 0 0 18px -6px var(--c); }
.cdu-faixas.com-foco .faixa:not(.par):not(.ativo) { opacity: .35; }
.cdu-faixas .faixa.par { opacity: 1 !important; }

/* ==========================================================================
   C-99 · O que precisa estar pronto (CDU-04)
   ========================================================================== */
.pronto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pronto-col { border: 1px solid var(--linha-2); border-radius: var(--raio); padding: 22px 22px 18px; background: rgba(15, 18, 24, .6); }
.pronto-tit { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 14px; }
.pronto-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--linha-2); color: var(--txt-2); flex: none; }
.pronto-ic .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pronto-col ul { list-style: none; display: grid; gap: 4px; }
.pronto-col li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 9px 8px; border-radius: 9px; color: var(--txt-2); font-size: .93rem; line-height: 1.5; cursor: default; outline: none;
  transition: background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.pronto-col li:focus-visible { box-shadow: inset 0 0 0 2px var(--azul-claro); }
.pronto-col li.ativo { background: rgba(236, 238, 241, .04); color: var(--txt); }
.pronto-visto { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.pronto--anima .pronto-col li:not(.feito) .pronto-visto { stroke-dashoffset: 24; }
.pronto-col li .pronto-visto { transition: stroke-dashoffset calc(.5s * var(--motion)) var(--ease-out); }
.pronto-col li.ativo .pronto-visto { animation: pronto-desenha calc(.6s * var(--motion)) var(--ease-out) both; }
@keyframes pronto-desenha { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.pronto-linha { margin-top: 20px; color: var(--txt-2); font-size: .95rem; max-width: 70ch; }
@media (max-width: 1023px) { .pronto { grid-template-columns: 1fr; } }

/* ==========================================================================
   C-100 · O que medir (CDU-05)
   ========================================================================== */
.medir { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.medir-cartao {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; border-radius: var(--raio);
  border: 1px solid rgba(23, 191, 176, .28); background: linear-gradient(170deg, rgba(23, 191, 176, .06), rgba(23, 191, 176, .01));
  cursor: default; outline: none;
  transition: border-color calc(var(--dur-base) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.medir-cartao:focus-visible { box-shadow: 0 0 0 2px var(--azul-claro); }
.medir-cartao.ativo { border-color: rgba(23, 191, 176, .6); transform: translateY(-2px); }
.medir-selo {
  align-self: flex-start; padding: 5px 10px; border-radius: 6px; border: 1.5px solid rgba(23, 191, 176, .7);
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #5fd9cd; transform: rotate(-2deg);
}
.medir-tit { font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; }
.medir-como { color: var(--txt-2); font-size: .9rem; line-height: 1.5; }
.medir-base { margin-top: auto; color: var(--txt-3); font-size: .8rem; line-height: 1.45; max-height: 0; opacity: 0; overflow: hidden; transition: max-height calc(var(--dur-base) * var(--motion)) var(--ease-out), opacity calc(var(--dur-base) * var(--motion)); }
.medir-cartao.ativo .medir-base { max-height: 80px; opacity: 1; }
.medir--anima .medir-cartao:not(.feito) { border-color: rgba(23, 191, 176, 0); }
.medir--anima .medir-cartao:not(.feito) .medir-selo { opacity: 0; transform: rotate(-2deg) scale(1.25); }
.medir-cartao .medir-selo { transition: opacity calc(.25s * var(--motion)), transform calc(.35s * var(--motion)) var(--ease-snappy); }
.medir-linha { margin-top: 20px; color: var(--txt-2); font-size: .95rem; }
@media (max-width: 1279px) { .medir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .medir-base { max-height: none; opacity: 1; } }
@media (max-width: 639px) { .medir { grid-template-columns: 1fr; } }

/* ---------- CDU-08 · Outros casos de uso (cartões do C-23) ---------- */
.cdu-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .cdu-cartoes { grid-template-columns: 1fr; } }

/* ==========================================================================
   C-101 · Índice dos casos de uso com a trilha de mecanismos (CDUH-01)
   ========================================================================== */
.cdu-indice { margin-top: 64px; }
.cdu-indice-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 14px; }
.cdu-indice-tit { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.cdu-indice-lista { list-style: none; }
.cdu-faixa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); outline: none; transition: opacity calc(var(--dur-base) * var(--motion)); }
.cdu-faixa::before, .cdu-faixa:last-child::after { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--linha-2); pointer-events: none; }
.cdu-faixa::before { top: 0; }
.cdu-faixa:last-child::after { bottom: 0; }
.cdu-faixa-esq { padding: 30px 34px 30px 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cdu-faixa-tag { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.cdu-faixa-nome { font: 600 clamp(1.25rem, .8rem + .95vw, 1.8rem)/1.1 var(--f-disp); letter-spacing: -.035em; }
.cdu-faixa-nome a { color: var(--txt); text-decoration: none; }
.cdu-faixa-nome a:hover, .cdu-faixa-nome a:focus-visible { color: #5fd9cd; }
.cdu-faixa-dir { padding: 26px 0 26px 34px; border-left: 1px solid var(--linha-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; }
.cdu-faixa-frase { grid-column: 1 / -1; color: var(--txt-2); }
.cdu-faixa-link { justify-self: end; }
.cdu-faixa.ativo .cdu-faixa-nome a { color: #5fd9cd; }
.cdu-indice.com-foco .cdu-faixa:not(.ativo) { opacity: .5; }

.cdu-mini { list-style: none; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cdu-mini::before { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 15px; height: 2px; background: var(--linha-2); }
.cdu-mini li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: default; outline: none; transition: opacity calc(var(--dur-base) * var(--motion)); }
.cdu-mini-ponto {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 18%, var(--ink)); color: var(--c-claro);
  transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out), box-shadow calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion));
}
.cdu-mini li[data-mec="agente"] .cdu-mini-ponto { border-radius: 9px; }
.cdu-mini li[data-mec="aprovacao"] .cdu-mini-ponto { border-radius: 8px; transform: rotate(45deg) scale(.9); }
.cdu-mini li[data-mec="aprovacao"] .cdu-mini-ic { transform: rotate(-45deg); }
.cdu-mini-ic { display: grid; place-items: center; }
.cdu-mini-ic .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cdu-mini-nome { font-size: .74rem; color: var(--txt-2); text-align: center; line-height: 1.25; }
.cdu-mini-balao {
  position: absolute; z-index: 4; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap;
  font: 500 .72rem/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);
}
.cdu-mini li.ativo .cdu-mini-balao { opacity: 1; transform: translate(-50%, 0); }
.cdu-mini li.ativo .cdu-mini-ponto, .cdu-mini li.par .cdu-mini-ponto { box-shadow: 0 0 0 5px rgba(236, 238, 241, .07), 0 0 18px -4px var(--c); }
.cdu-indice.foco-leg .cdu-mini li:not(.par) { opacity: .28; }
.cdu-indice--anima .cdu-mini li:not(.aceso) .cdu-mini-ponto { background: var(--ink); border-color: var(--linha-3); color: var(--txt-3); box-shadow: none; }
.cdu-indice--anima .cdu-mini li:not(.aceso) .cdu-mini-nome { color: var(--txt-3); }
.cdu-indice-rev { margin-top: 16px; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); text-align: right; }

@media (max-width: 1023px) {
  .cdu-indice { margin-top: 44px; }
  .cdu-faixa { grid-template-columns: 1fr; padding: 22px 0 24px; }
  .cdu-faixa-esq { padding: 0; text-align: left; align-items: flex-start; }
  .cdu-faixa-dir { padding: 12px 0 0; border-left: 0; grid-template-columns: 1fr; }
  .cdu-faixa-link { justify-self: start; }
  .cdu-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .cdu-mini::before { display: none; }
  .cdu-mini-balao { display: none; }
  .cdu-indice-rev { text-align: left; }
}

/* ---------- CDUH-02 · faixas comparativas ---------- */
.cdu-altf-tag { display: block; margin-top: 8px; font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: #5fd9cd; font-weight: 500; }

/* ---------- Movimento reduzido e captura: estado final ---------- */
.movimento-reduzido .cdu-doc { display: none; }

/* CDU-03 · no celular, os locais longos do registro ("Planilha de propostas · escrita aprovada") quebram linha */
@media (max-width: 1023px) {
  .cdu-acao .acao-onde { white-space: normal; max-width: 100%; line-height: 1.35; }
}