/* ==========================================================================
   Cases · grade (/cases/) e modelo de case (/case/{slug}/) · componentes C-60 a C-64
   Usa os tokens de base.css e as classes de secoes.css e componentes-ia.css
   (.ia-hero, .migalha, .faixa, .altf-pil, .case, .selo, .classe-topo, .faq-*).
   Estado sem JavaScript = estado final de cada cena. O js/cases.js liga as
   classes de animação só com movimento e sem pausa.
   ========================================================================== */

.pagina-cases [id] { scroll-margin-top: calc(var(--topo-min) + 16px); }

/* Cores das marcas (G-11): aço = sistemas e software; azul = integração e automação;
   areia = pessoa (aqui, a equipe que responde pelo que está no ar). Setores não têm cor. */
[data-cor="aco"] { --c: var(--aco); --c-claro: #b9c2d0; }
[data-cor="azul"] { --c: var(--azul); --c-claro: var(--azul-claro); }
[data-cor="areia"] { --c: var(--areia); --c-claro: #f3ead6; }
[data-cor="neutra"] { --c: var(--txt-3); --c-claro: var(--txt-2); }

/* ==========================================================================
   CASES-01 · Hero e índice das duas faixas (C-64)
   ========================================================================== */

.cs-eyebrow { color: var(--azul-claro); margin-bottom: 16px; }
.cs-h1 { max-width: 18ch; font-size: clamp(2.3rem, 1.15rem + 3.1vw, 3.9rem); }
.indice { margin-top: clamp(48px, 6vw, 84px); }
.indice-faixas { list-style: none; }
.indice-faixa .faixa-esq { padding-left: 0; }
.indice-faixa .faixa-num { color: var(--txt-3); }
.indice-cont { display: flex; align-items: baseline; gap: 8px; color: var(--txt-2); font-size: .86rem; }
.indice-cont b { font: 600 2.6rem/1 var(--f-txt); letter-spacing: -.045em; color: var(--txt); font-variant-numeric: tabular-nums; }
.indice-regra { color: var(--txt-2); font-size: .9rem; line-height: 1.5; max-width: 28ch; }

.indice-tipos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.indice-tipo {
  cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent);
  color: var(--txt-2); font: 500 .6rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase;
  transition: background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.indice-tipo b { font: 600 .95rem/1 var(--f-txt); letter-spacing: -.01em; color: var(--txt); }
.indice-tipo.ativo, .indice-tipo.par { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c-claro); color: var(--txt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }

.indice-nomes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.indice-nome {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(142, 153, 171, .42); background: rgba(142, 153, 171, .07); color: var(--txt); text-decoration: none;
  font: 500 .64rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.indice-nome:hover, .indice-nome:focus-visible, .indice-nome.ativo, .indice-nome.par {
  border-color: #b9c2d0; background: rgba(142, 153, 171, .2); transform: translateY(calc(-2px * var(--motion)));
}
.indice.com-foco .indice-nome:not(.par) { opacity: .28; }
/* balão com o setor e a linha do card (o mesmo desenho dos balões das faixas de Como funciona) */
.indice-nome[data-balao]::after, .indice-molde .altf-pil[data-depois]::after {
  content: attr(data-balao); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; transform: translate(-50%, 4px);
  white-space: nowrap; text-transform: none; letter-spacing: 0; text-decoration: none;
  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);
}
.indice-molde .altf-pil[data-depois]::after { content: attr(data-depois); }
.indice-nome[data-balao]:hover::after, .indice-nome[data-balao]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* entrada: os nomes começam apagados e acendem um a um (só com .indice--anima, ligada pelo JS) */
.indice--anima .indice-nome:not(.aceso):not(.ativo) { opacity: .14; border-style: dashed; background: transparent; }

/* faixa de IA: a vaga tracejada em verde-azulado, com as seis pílulas do molde a preencher */
.indice-vaga { position: relative; padding: 18px 16px 16px; border-radius: 16px; }
.indice-vaga::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed rgba(23, 191, 176, .55); pointer-events: none;
  transition: clip-path calc(1.1s * var(--motion)) var(--ease-out);
}
.indice--anima .indice-vaga:not(.desenhada)::before { clip-path: inset(0 100% 0 0); }
.indice-vaga-rot { position: absolute; top: -8px; left: 16px; padding: 0 8px; background: var(--ink); color: var(--teal); font-size: .54rem; }
.indice-molde { margin: 0; }
.indice-molde .altf-pil { cursor: default; }
/* pílula vazia: o campo existe e ainda não tem conteúdo (a riscada das faixas quer dizer "fica de fora") */
.altf-pil--vazia { background: transparent; border: 1px dashed rgba(23, 191, 176, .42); color: var(--txt-3); }
.indice-molde .altf-pil--vazia:hover, .indice-molde .altf-pil--vazia:focus-visible, .indice-molde .altf-pil--vazia.ativo { border-style: solid; border-color: rgba(23, 191, 176, .75); color: var(--txt); }
.indice-scan {
  position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(transparent, var(--teal) 25%, var(--teal) 75%, transparent); box-shadow: 0 0 14px 1px rgba(23, 191, 176, .5);
}
.indice-vaga.varre .indice-scan { animation: cs-varre-x calc(1.7s * var(--motion)) var(--ease-state) 1 both; }
@keyframes cs-varre-x { 0% { left: 2%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 98%; opacity: 0; } }
.indice-link { margin-top: 16px; }

@media (max-width: 1023px) {
  .indice-faixa .faixa-esq { align-items: flex-start; }
  .indice-cont b { font-size: 2rem; }
  .indice-nome[data-balao]::after, .indice-molde .altf-pil[data-depois]::after { display: none; }
}

/* ==========================================================================
   CASES-02 · Grade de cases de engenharia (C-10) com legenda em par
   ========================================================================== */

.casos-topo { display: grid; gap: 20px; margin-bottom: 30px; }
.casos .revisado { margin-bottom: 0; }
.casos-legenda { display: grid; gap: 10px; }
.casos-legenda[hidden] { display: none; }
.casos-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.casos-filtros-tit { flex: none; width: 15.5em; color: var(--txt-3); font-size: .56rem; }
.filtro {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c, var(--txt-3)) 45%, transparent); background: transparent;
  color: var(--txt-2); font: 500 .6rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  transition: background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion));
}
.filtro .n { color: var(--c-claro, var(--txt-3)); }
.filtro.ativo, .filtro.par { background: color-mix(in srgb, var(--c, var(--txt-3)) 18%, transparent); color: var(--txt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--txt-3)) 16%, transparent); }
.filtro[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--txt-3)) 30%, transparent); border-color: var(--c-claro, var(--txt-2)); color: #fff; }
.filtro--todos { --c: var(--azul); --c-claro: var(--azul-claro); }
.casos.tem-par .filtro:not(.par):not([aria-pressed="true"]) { opacity: .38; }
.casos-filtros-base { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.casos-cont { color: var(--txt-3); font-size: .58rem; }

.caso-grade { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.caso-item { display: flex; transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state); }
.caso-item[hidden] { display: none; }
.casos-mais { display: flex; justify-content: center; margin-top: 40px; }
.casos-mais[hidden] { display: none; }
.case.caso { width: auto; flex: 1; outline-offset: 3px; }
.caso-setor { padding: 18px 22px 0; color: var(--txt-3); font-size: .56rem; }
.caso .case-cli { padding-top: 7px; }
.caso-num { display: grid; gap: 5px; padding: 16px 22px 0; }
.caso-num-l { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.caso-num b { font: 500 .66rem/1.45 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--azul-claro); }
.caso-num small { font: 400 .56rem/1.45 var(--f-mono); letter-spacing: .03em; color: var(--txt-3); }
.caso-num .marcador { margin: 0; }
.caso-num-pend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.caso-num-pend b { color: var(--txt-3); }
/* com as notas desligadas, o protótipo mostra o site: número a confirmar não aparece */
html.sem-notas .caso-num-pend, html.sem-notas .caso-num--so-pend { display: none; }
.caso-tipos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding: 16px 22px 20px; }
.caso-linha-sep { display: none; }
.caso .case-linha + .caso-tipos, .caso .caso-num + .caso-tipos { margin-top: auto; }
.caso-tipos::before { content: ""; flex: 0 0 100%; height: 1px; margin: 0 0 12px; background: linear-gradient(90deg, var(--linha-2) 50%, transparent 0) 0 0 / 8px 1px repeat-x; }
.caso-tipo {
  font: 500 .52rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-claro);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 999px; padding: 5px 8px;
}
.case.caso > :last-child { padding-bottom: 20px; }
.casos.com-foco .caso-item:not(.par) { opacity: .26; }
.caso-item.ativo .case, .caso-item.par .case { border-color: var(--linha-3); background: var(--ink-2); transform: translateY(calc(-3px * var(--motion))); }
.caso-item.par .case-img img { transform: scale(calc(1 + .035 * var(--motion))); }
.caso-item.ativo .caso-tipo, .caso-item.par .caso-tipo { background: color-mix(in srgb, var(--c) 14%, transparent); }
@media (max-width: 1180px) { .caso-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .casos-filtros-tit { width: 100%; } }
@media (max-width: 640px) {
  .caso-grade { grid-template-columns: 1fr; }
  .casos-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .casos-filtros::-webkit-scrollbar { display: none; }
  .casos-filtros-tit { width: auto; }
  .filtro { flex: none; }
}

/* ==========================================================================
   CASES-03 · Faixa de IA: o molde do case de transformação (C-10, vazio)
   ========================================================================== */

.molde {
  position: relative; overflow: hidden; border-radius: 18px; padding: 24px;
  border: 1px dashed rgba(23, 191, 176, .5); background: rgba(23, 191, 176, .02);
}
.molde-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-bottom: 18px; }
.molde-topo [hidden] { display: none; }
.molde-tit { color: var(--teal); }
.molde-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.molde-campo {
  position: relative; padding: 16px 16px 18px; border-radius: 12px; border: 1px dashed rgba(236, 238, 241, .16);
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.molde-campo dt { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.molde-campo dt i { font-style: normal; color: var(--teal); font-size: .56rem; }
.molde-campo dt .mono { color: var(--txt-3); font-size: .54rem; }
.molde-campo dd { margin: 0; color: var(--txt-2); font-size: .88rem; line-height: 1.52; }
.molde-campo dd[hidden] { display: none; }
.molde-campo.ativo { border-style: solid; border-color: rgba(23, 191, 176, .6); background: rgba(23, 191, 176, .05); }
.molde-scan {
  position: absolute; left: 16px; right: 16px; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--teal) 20%, var(--teal) 80%, transparent); box-shadow: 0 0 16px 1px rgba(23, 191, 176, .45);
}
.molde.varre .molde-scan { animation: cs-varre-y calc(1.9s * var(--motion)) var(--ease-state) 1 both; }
@keyframes cs-varre-y { 0% { top: 8%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 94%; opacity: 0; } }
/* protótipo: ?faixa2=1 mostra o card preenchido com o exemplo ilustrativo */
.molde--exemplo { border-style: solid; border-color: rgba(23, 191, 176, .45); background: linear-gradient(180deg, rgba(23, 191, 176, .05), transparent 60%); }
.molde--exemplo .molde-campo { border-style: solid; border-color: var(--linha-2); }
.molde--exemplo .molde-campo:last-child dd { color: var(--txt-3); font-style: italic; }
.molde-links { margin-top: 26px; display: grid; gap: 10px; color: var(--txt-2); max-width: 80ch; }
.molde-links .ia-mini-link { margin-top: 0; margin-left: 6px; }
@media (max-width: 1023px) { .molde-campos { grid-template-columns: 1fr; } .molde { padding: 18px; } }

/* ==========================================================================
   Modelo de case · CASE-01 hero e C-62 rede em distribuição
   ========================================================================== */

.case-selos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.case-selos li { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--linha-2); color: var(--txt-2); font-size: .56rem; }
.case-selos li:first-child { color: var(--azul-claro); border-color: rgba(232, 80, 2, .45); }
.case-h1 { max-width: 15ch; font-size: clamp(2.2rem, 1.1rem + 3.1vw, 3.9rem); }
.case-def { margin-top: 0; }

.rede {
  position: relative; margin: clamp(40px, 5vw, 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 20px 16px; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
/* "Dados reais": selo contínuo em azul, para não confundir com o tracejado do "Exemplo ilustrativo" */
.selo--real { border-style: solid; border-color: rgba(232, 80, 2, .45); color: var(--azul-claro); }
.selo--real .selo-ponto { background: var(--azul); }
.rede-placar { color: var(--txt-3); font-size: .58rem; }
.rede-placar b { color: var(--txt); font-size: .8rem; font-variant-numeric: tabular-nums; }

.rede-grade { position: relative; display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; padding: 8px 4px 4px; }
.rede-centro { position: relative; z-index: 2; display: grid; gap: 12px; }
.rede-portal { border: 1px solid rgba(142, 153, 171, .5); border-radius: 14px; background: var(--ink-2); padding: 14px; }
.rede-portal-tit { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.rede-portal-tit .mono { margin-left: auto; color: var(--txt-3); font-size: .54rem; }
.rede-ic { display: inline-grid; color: var(--aco); }
.rede-ic .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rede-noticia {
  margin-top: 12px; padding: 12px; border-radius: 10px; border: 1px solid rgba(232, 80, 2, .55); background: rgba(232, 80, 2, .08);
  transition: border-color calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-base) * var(--motion));
}
.rede-noticia-tipo { margin-bottom: 6px; color: var(--azul-claro); font-size: .52rem; }
.rede-noticia-tit { font-size: .82rem; line-height: 1.42; font-weight: 500; }
.rede--anima .rede-noticia:not(.publicada) { border-style: dashed; border-color: var(--linha-3); background: transparent; }
.rede--anima .rede-noticia:not(.publicada) .rede-noticia-tipo { color: var(--txt-3); }

.rede-regras { list-style: none; display: grid; gap: 8px; }
.rede-regra {
  --c: var(--azul); --c-claro: var(--azul-claro);
  display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  font-size: .78rem; line-height: 1.4; color: var(--txt-2); cursor: default;
  transition: background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.rede-regra .mono { font-size: .5rem; color: var(--c-claro); }
.rede-regra--local { --c: var(--areia); --c-claro: #f3ead6; }
.rede--anima .rede-regra:not(.ligada):not(.ativo):not(.par) { opacity: .38; }
.rede-regra.ligada { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.rede-regra.ativo, .rede-regra.par { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: var(--c-claro); color: var(--txt); opacity: 1; }

.rede-campi { list-style: none; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px; }
.rede-campus {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 96px; padding: 8px 9px 9px;
  border-radius: 10px; border: 1px solid rgba(142, 153, 171, .38); background: var(--ink-2); outline-offset: 2px;
  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);
}
.rc-barra { display: flex; gap: 3px; margin-bottom: 3px; }
.rc-barra i { width: 4px; height: 4px; border-radius: 50%; background: var(--linha-3); }
.rc-cod { font-size: .7rem; letter-spacing: .08em; color: var(--txt); }
.rc-nome { font-size: .62rem; line-height: 1.25; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-feed { display: grid; gap: 4px; margin-top: 4px; }
.rc-nova {
  display: block; padding-left: 6px; border-left: 2px solid var(--azul); color: var(--azul-claro);
  font-size: .56rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
/* a manchete nos campi é decoração: vem do CSS (--manchete), para o texto não se repetir 20 vezes no HTML */
.rc-nova::before { content: var(--manchete, ""); }
.rc-linha { display: block; height: 4px; border-radius: 2px; background: rgba(236, 238, 241, .08); }
.rc-linha--curta { width: 62%; }
.rc-local {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px;
  padding-left: 6px; border-left: 2px solid var(--areia); color: var(--areia); font-size: .54rem; line-height: 1.3;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.rede-campus[data-campus="snp"] { border-color: rgba(232, 220, 194, .4); }
.rede--anima .rede-campus:not(.recebeu) .rc-nova { opacity: 0; transform: translateY(-4px); }
.rede--anima .rede-campus:not(.local-pub) .rc-local { opacity: 0; }
.rede-campus.pulsa { animation: rc-pulsa calc(.9s * var(--motion)) var(--ease-out) 1; }
.rede-campus.pulsa-local { animation: rc-pulsa-local calc(1s * var(--motion)) var(--ease-out) 1; }
@keyframes rc-pulsa { 0% { box-shadow: 0 0 0 0 rgba(232, 80, 2, .6); border-color: var(--azul-claro); } 100% { box-shadow: 0 0 0 12px rgba(232, 80, 2, 0); } }
@keyframes rc-pulsa-local { 0% { box-shadow: 0 0 0 0 rgba(232, 220, 194, .55); border-color: var(--areia); } 100% { box-shadow: 0 0 0 12px rgba(232, 220, 194, 0); } }
.rede-campus.ativo, .rede-campus.par { z-index: 4; border-color: var(--azul-claro); background: #111a25; }
.rede.com-foco .rede-campus:not(.par):not(.ativo) { opacity: .32; }
/* balão com o nome completo e o endereço do site */
.rede-campus::after {
  content: attr(data-dica); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 6; 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);
}
.rede-campus.ativo::after { opacity: 1; transform: translate(-50%, 0); }
.rede-campi > li:nth-child(5n + 1)::after { left: 0; transform: translate(0, 4px); }
.rede-campi > li:nth-child(5n + 1).ativo::after { transform: none; }
.rede-campi > li:nth-child(5n)::after { left: auto; right: 0; transform: translate(0, 4px); }
.rede-campi > li:nth-child(5n).ativo::after { transform: none; }

/* ligações (planta): do portal até um tronco, pela calha de cada linha, até o topo do campus */
.rede-linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.rede-linhas path { fill: none; stroke: #343b47; stroke-width: 1.2; stroke-linejoin: round; transition: stroke calc(var(--dur-micro) * var(--motion)); }
.rede-linhas path.par { stroke: var(--azul-claro); stroke-width: 1.6; }
.rede-linhas .rede-pacote { fill: var(--azul-claro); filter: drop-shadow(0 0 4px rgba(255, 122, 51, .9)); }

@media (max-width: 1023px) {
  .rede { padding: 16px 14px 14px; }
  .rede-grade { grid-template-columns: 1fr; gap: 18px; }
  .rede-linhas { display: none; }
  .rede-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rede-campus { min-height: 0; }
  .rede-campus::after { display: none; }
  .rc-barra, .rc-linha { display: none; }
}

/* ==========================================================================
   CASE-02 · Ficha do case (C-60)
   ========================================================================== */

.case-ficha-sec { padding-top: clamp(64px, 7vw, 96px); }
.ficha { border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); overflow: hidden; }
.ficha-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding: 16px 22px; border-bottom: 1px solid var(--linha-2); color: var(--txt-3); }
.ficha-tit { font-size: .66rem; color: var(--azul-claro); }
.ficha-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.ficha-campo {
  padding: 20px 22px 22px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); outline-offset: -2px;
  transition: background-color calc(var(--dur-micro) * var(--motion));
}
.ficha-campo--largo { grid-column: span 2; }
.ficha-campo dt { margin-bottom: 8px; color: var(--txt-3); font: 500 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; transition: color calc(var(--dur-micro) * var(--motion)); }
.ficha-campo dd { margin: 0; color: var(--txt); font-size: .95rem; line-height: 1.5; }
.ficha-campo dd .marcador { margin-left: 0; }
.ficha-campo a { display: inline-flex; align-items: center; gap: 6px; color: var(--txt); text-underline-offset: 4px; }
.ficha-ext { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ficha-campo.ativo { background: rgba(236, 238, 241, .03); }
/* com as notas desligadas, o protótipo mostra o site: campo sem confirmação não aparece */
html.sem-notas .ficha-campo--confirmar { display: none; }
.ficha-campo.ativo dt { color: var(--azul-claro); }
@media (max-width: 1023px) {
  .ficha-campos { grid-template-columns: 1fr; }
  .ficha-campo { border-right: 0; }
  .ficha-campo--largo { grid-column: auto; }
}

/* ==========================================================================
   CASE-03 a CASE-05 · Blocos de resposta, antes e depois (C-61) e provas (C-63)
   ========================================================================== */

.case-resposta {
  font-size: clamp(1.08rem, .98rem + .45vw, 1.3rem); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; color: var(--txt);
  padding-left: 22px; border-left: 2px solid var(--aco);
}
.ia-topo p.case-resposta { color: var(--txt); font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); max-width: 54ch; }
.case-resposta--sinal { border-left-color: var(--sinal); }
.case-resposta--azul { border-left-color: var(--azul); }
.case-lista-tit { margin-top: 34px; color: var(--txt-3); font-size: .6rem; }
.problema-lista { list-style: none; margin-top: 12px; border-top: 1px solid var(--linha-2); }
.problema-lista li {
  position: relative; padding: 15px 0 15px 22px; border-bottom: 1px solid var(--linha-2); color: var(--txt-2); line-height: 1.55; outline-offset: -2px;
  transition: color calc(var(--dur-micro) * var(--motion));
}
.problema-lista li::before {
  content: ""; position: absolute; left: 0; top: 17px; bottom: 17px; width: 2px; border-radius: 2px; background: var(--sinal); opacity: .5;
  transition: opacity calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.problema-lista li.ativo { color: var(--txt); }
.problema-lista li.ativo::before { opacity: 1; box-shadow: 0 0 10px rgba(255, 107, 87, .55); }

/* C-61 · Antes e depois anotado */
.construido-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ad { margin: 0; }
.ad-quadro {
  --x: 50%; position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--linha-2); background: var(--ink-3); user-select: none;
}
.ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* o print de antes define a altura do quadro: a proporção é a do print, sem corte */
.ad-quadro > .ad-img { position: relative; display: block; height: auto; }
.ad-depois { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.ad-range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y;
}
.ad-div { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 3; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 18px rgba(255, 255, 255, .35); pointer-events: none; }
.ad-pega { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(6, 7, 9, .86); border: 2px solid #fff; display: grid; place-items: center; }
.ad-pega svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ad-range:focus-visible ~ .ad-div .ad-pega { outline: 2px solid var(--azul); outline-offset: 3px; }
.ad-rot {
  position: absolute; bottom: 12px; z-index: 5; cursor: pointer; padding: 7px 10px; border-radius: 999px;
  background: rgba(6, 7, 9, .82); border: 1px solid var(--linha-3); color: var(--txt); font-size: .54rem;
  transition: background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.ad-rot--antes { left: 12px; }
.ad-rot--depois { right: 12px; color: var(--azul-claro); border-color: rgba(232, 80, 2, .6); }
.ad-rot.ativo { background: rgba(21, 25, 34, .95); border-color: #fff; }
.ad-pino {
  position: absolute; z-index: 5; left: var(--px); top: var(--py); width: 26px; height: 26px; margin: -13px 0 0 -13px; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; background: var(--azul); color: var(--azul-ink); border: 2px solid #fff;
  font: 700 .72rem/1 var(--f-txt); box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-snappy), box-shadow calc(var(--dur-micro) * var(--motion));
}
.ad-pino.oculto { opacity: 0; transform: scale(.6); pointer-events: none; }
.ad-pino.ativo, .ad-pino.par { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(232, 80, 2, .28), 0 6px 16px rgba(0, 0, 0, .45); }
.ad-pino.pulsa { animation: ad-pino-pulsa calc(1s * var(--motion)) var(--ease-out) 1; }
@keyframes ad-pino-pulsa { 0% { box-shadow: 0 0 0 0 rgba(232, 80, 2, .7); } 100% { box-shadow: 0 0 0 16px rgba(232, 80, 2, 0); } }
.ad-leg { margin-top: 12px; font-size: .8rem; line-height: 1.5; color: var(--txt-2); }

.pecas { list-style: none; border-top: 1px solid var(--linha-2); }
.pecas li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 15px 8px 15px 0; border-bottom: 1px solid var(--linha-2); outline-offset: -2px;
  transition: background-color calc(var(--dur-micro) * var(--motion));
}
.pecas-num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linha-3);
  font: 600 .66rem/1 var(--f-mono); color: var(--txt-2); transition: box-shadow calc(var(--dur-micro) * var(--motion));
}
.pecas li[data-pino] .pecas-num { background: var(--azul); border: 2px solid #fff; color: var(--azul-ink); }
.pecas b { display: block; font-weight: 600; color: var(--txt); margin-bottom: 4px; }
.pecas p { color: var(--txt-2); font-size: .9rem; line-height: 1.55; }
.pecas li.ativo, .pecas li.par { background: rgba(236, 238, 241, .03); }
.pecas li.ativo .pecas-num, .pecas li.par .pecas-num { box-shadow: 0 0 0 5px rgba(232, 80, 2, .22); }
@media (max-width: 1023px) { .construido-grade { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  /* celular: o mesmo quadro; a divisória se arrasta com o dedo e os rótulos ficam curtos */
  .ad-rot { bottom: 8px; padding: 6px 8px; }
  .ad-rot--antes { left: 8px; }
  .ad-rot--depois { right: 8px; }
  .ad-rot-mais { display: none; }
  .ad-pino { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .64rem; }
  .ad-pega { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
}

/* C-63 · Prova com fonte */
mark.pf-trecho {
  background: none; color: inherit; border-bottom: 1px dashed rgba(232, 80, 2, .65); padding: 0 1px; border-radius: 2px; cursor: default;
  transition: background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
mark.pf-trecho.ativo, mark.pf-trecho.par { background: rgba(232, 80, 2, .18); border-bottom-color: var(--azul); }
.pf-lista { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pf {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 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)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), background-color calc(var(--dur-micro) * var(--motion));
}
.pf-valor { font: 600 clamp(1.9rem, 1.35rem + 1.5vw, 2.7rem)/1 var(--f-txt); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pf-rotulo { color: var(--txt-2); font-size: .9rem; line-height: 1.45; }
.pf-fonte {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--linha-2); font: 400 .58rem/1.55 var(--f-mono); letter-spacing: .02em; color: var(--txt-3);
  transition: clip-path calc(.9s * var(--motion)) steps(28, end);
}
.pf-estado {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px;
  font: 500 .54rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--azul-claro); border: 1px solid rgba(232, 80, 2, .5); background: rgba(232, 80, 2, .08);
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) cubic-bezier(.34, 1.56, .64, 1);
}
.pf-estado .ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pf .marcador { align-self: flex-start; margin: 0; }
.pf--pendente { border-style: dashed; background: transparent; }
.pf--pendente .pf-valor { color: var(--txt-3); }
.pf--pendente .pf-estado { color: #cbb8ff; border: 1px dashed rgba(183, 156, 255, .6); background: none; }
html.sem-notas .pf--pendente { display: none; }
.pf.ativo, .pf.par { border-color: rgba(232, 80, 2, .55); background: var(--ink-2); transform: translateY(calc(-3px * var(--motion))); }
.pf--anima .pf:not(.escreveu) .pf-fonte { clip-path: inset(0 100% 0 0); }
.pf--anima .pf:not(.carimbou) .pf-estado { opacity: 0; transform: scale(1.5); }
.pf-nota { margin-top: 20px; max-width: 80ch; font: 400 .62rem/1.6 var(--f-mono); letter-spacing: .02em; color: var(--txt-3); }
@media (max-width: 1180px) { .pf-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-lista { grid-template-columns: 1fr; } }

/* ==========================================================================
   CASE-06 a CASE-09
   ========================================================================== */

.case-opcional { max-width: 860px; padding: 28px; border: 1px dashed var(--linha-3); border-radius: 16px; }
.case-opcional-tag { margin-bottom: 14px; }
.case-opcional-tag .marcador { margin-left: 0; }
.case-opcional-h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); }
.case-opcional-txt { margin-top: 18px; color: var(--txt-2); font-size: 1.04rem; line-height: 1.65; max-width: 62ch; }
.case-opcional-linha { margin-top: 18px; color: var(--txt-3); font-size: .9rem; line-height: 1.6; }
.case-opcional-linha .ia-mini-link { margin-left: 6px; }
html.sem-notas .case-opcional-sec { display: none; } /* no IFMT, o bloco depende de confirmação */
.caso-grade--3 .case-img { aspect-ratio: 16 / 9; }
.case-rel-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.case-rel-links .ia-mini-link { margin-top: 0; }

/* Capturas e movimento reduzido: estados finais */
html.movimento-reduzido .indice-scan, html.movimento-reduzido .molde-scan { display: none; }

/* ==========================================================================
   Cases em subpáginas (decisão 31, 20/10/2026): visão geral, desenvolvimento e IA
   ========================================================================== */
.indice-faixa-link { color: inherit; text-decoration: none; }
.indice-faixa-link:hover, .indice-faixa-link:focus-visible { color: var(--azul-claro); }
.indice-faixa-link--ia:hover, .indice-faixa-link--ia:focus-visible { color: #5fd9cd; }
.indice-faixa-link:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 4px; border-radius: 4px; }
.indice-faixa .indice-link { margin-top: 16px; }
.indice-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.cs-hero--sub { padding-bottom: 8px; }
.cia-estado {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 7px 12px;
  border: 1px dashed rgba(23, 191, 176, .45); border-radius: 999px;
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: #5fd9cd;
}
.cia-ponto { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--teal); }
.cia-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .cia-cartoes { grid-template-columns: 1fr; }
}
#cia-01 .cs-eyebrow { color: #5fd9cd; }

/* Entregas em largura cheia, nos cases sem antes e depois (Rota da Liberdade, Orthocrin) */
.pecas--largo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
@media (max-width: 899px) { .pecas--largo { grid-template-columns: 1fr; } }

/* O projeto no ar: o vídeo do case (ou a montagem com as telas), logo depois da rede */
.case-filme-sec { padding-top: 0; }
.case-filme { max-width: 960px; margin: 0 auto; }
.case-filme-quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--ink-3, #0b0c0f); border: 1px solid var(--linha-2); box-shadow: 0 40px 80px -48px rgba(0, 0, 0, .8); }
.case-filme-quadro video, .case-filme-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-filme--img { max-width: 720px; }
.case-filme--img .case-filme-quadro { aspect-ratio: auto; background: none; border: 0; box-shadow: none; }
.case-filme--img .case-filme-quadro img { height: auto; object-fit: contain; }
.case-filme-leg { margin-top: 14px; font-size: .86rem; color: var(--txt-3); text-align: center; }
/* vídeo de mockup com o texto de abertura ao lado, como no site atual: o
   vídeo já traz o notebook e o celular sobre preto, então vai sem moldura e
   o preto se funde ao fundo da página (mix-blend-mode: lighten) */
.case-filme-lado { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; }
.case-filme--solto { max-width: none; margin: 0; }
.case-filme--solto .case-filme-quadro { aspect-ratio: 16 / 9; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.case-filme--solto video { mix-blend-mode: lighten; object-fit: contain; }
.case-filme-txt { max-width: 46ch; }
/* texto longo ao lado: o vídeo acompanha a leitura, preso no alto, em vez de ficar centralizado com vazio em cima */
@media (min-width: 1024px) {
  .case-filme-lado--longo { align-items: start; }
  /* o sticky isola o vídeo num grupo próprio: a fusão do preto com o fundo passa para o bloco inteiro */
  .case-filme-lado--longo .case-filme { position: sticky; top: calc(var(--topo-h) + 40px); mix-blend-mode: lighten; }
}
/* vídeo do case como fundo apagado, com a montagem e o texto por cima */
.case-filme-sec--fundo { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(56px, 7vw, 120px); padding-bottom: clamp(56px, 7vw, 120px); }
.case-filme-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.case-filme-fundo video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .14; }
.case-filme-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--ink) 0, transparent 22%, transparent 78%, var(--ink) 100%); }
.case-filme--transparente .case-filme-quadro { aspect-ratio: auto; }
.case-filme--transparente img { display: block; width: 100%; height: auto; }
/* sem vídeo: a montagem trabalhada do case, com cantos, em colunas iguais */
.case-filme-lado--montagem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.case-filme--montagem .case-filme-quadro { aspect-ratio: auto; }
.case-filme--montagem img { display: block; width: 100%; max-width: 580px; height: auto; margin: 0 auto; border-radius: 20px; }
.case-filme-tit { font-size: clamp(28px, 2.7vw, 44px); line-height: 1.02; color: var(--txt-tit); margin-bottom: 22px; text-wrap: balance; }
.case-filme-txt p { font-size: 1.05rem; line-height: 1.65; color: var(--txt); }
.case-filme-txt p + p { margin-top: 1em; }
.case-filme-txt h3 { font-size: 1.15rem; line-height: 1.3; color: var(--txt-tit); margin: 22px 0 6px; }
.case-filme-txt ul { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.case-filme-txt li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.55; color: var(--txt); }
.case-filme-txt li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--azul); }
@media (max-width: 1023px) {
  .case-filme-lado { grid-template-columns: minmax(0, 1fr); }
  .case-filme-txt { max-width: 62ch; }
}
.case-telas { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1320px; margin: clamp(32px, 4vw, 56px) auto 0; padding: 0; }
.case-telas img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--linha-2); }
@media (max-width: 767px) { .case-telas { grid-template-columns: 1fr; } .case-filme-quadro { border-radius: 14px; } }
/* a montagem trabalhada do case, abaixo do vídeo, na mesma largura dele */
.case-filme--mockup { max-width: 960px; margin-top: clamp(32px, 4vw, 56px); }