.section--tight{padding:90px 0}
/* "Vantagens de se usar o C.R.A.F.T." (transnet-ia.php) — redesenhada do
   zero (1ª versão reaproveitava .showcase__visual--floatcards/.float-card
   de "Ecossistema Transoft", balões flutuantes sobre o print como fundo;
   reprovada pelo usuário: "está muito vazia e não gostei de como ficou o
   card" — tanto o card retrato quanto os balões empilhados sumiram).
   Virou o mesmo `.showcase` de 2 colunas já usado em outras seções do
   site: lista de 3 itens (ícone+título+texto, mesma receita visual do
   `.feat-item`) à esquerda, o print real do relatório à direita — cheio
   de propósito (preenche a coluna inteira, não uma foto quase invisível
   atrás de balões). Ver `.craft-advantages__visual` logo abaixo. */
.craft-advantages__list{display:flex;flex-direction:column;gap:22px;margin-top:32px}
.craft-advantages__item{display:flex;gap:18px;align-items:center}
/* numeração "vazada" — 1ª versão era um selo circular sólido (reprovada:
   "não gostei de como ficaram os números"); trocada, a pedido do usuário
   entre as opções apresentadas, pela mesma receita exata de
   `.pillars--numbered .pillar__num` (seção "3 pilares", logo acima nesta
   mesma página) — numeral grande, só contorno translúcido em repouso
   (marca d'água), que ganha o gradiente da marca só no hover da linha.
   Dá consistência visual entre as duas seções numeradas da página. */
.craft-advantages__num{
  flex:0 0 auto;width:54px;text-align:center;
  font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);
  transition:color .4s var(--ease-out);
}
.craft-advantages__item:hover .craft-advantages__num{
  -webkit-text-stroke:1.5px transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.craft-advantages__item h4{font-size:16px;color:#fff;margin-bottom:6px;font-weight:700}
.craft-advantages__item p{font-size:13.5px;color:var(--text-dim);line-height:1.6}
/* imagem à direita — mesmo raciocínio do glow atrás dos prints das 3
   páginas de Gestão (.showcase__visual--screens::after), mas com um frame
   próprio (borda arredondada + sombra) em vez de "sem cartão": diferente
   dos prints de .showcase__visual--screens (que já vêm com sombra/
   perspectiva "assadas" na própria composição), resultado_com_craft.webp
   é um screenshot cru de fundo branco — precisa da própria moldura pra não
   ficar "colado" no fundo escuro da seção, mesmo tratamento já usado no
   .craft-results__frame da seção logo acima. object-fit:cover +
   object-position:top corta só a base do relatório (que é bem mais alto
   que largo), mantendo visível o cabeçalho/KPIs — a parte mais legível
   numa altura fixa. Clicável (data-craft-expand, mesmo lightbox com zoom
   da seção "Sem C.R.A.F.T. vs. Com C.R.A.F.T." — initCraftResults() em
   main.js foi generalizada de `carousel.querySelectorAll` pra
   `document.querySelectorAll` pra alcançar este gatilho fora do
   carrossel). */
.craft-advantages__visual{position:relative;isolation:isolate}
.craft-advantages__visual::before{
  content:"";position:absolute;inset:-15% -10%;z-index:-1;
  background:radial-gradient(closest-side, rgba(13,110,233,.35), transparent 70%);
  filter:blur(60px);pointer-events:none;
}
.craft-advantages__visual img{
  display:block;width:100%;height:520px;object-fit:cover;object-position:top;
  border-radius:16px;box-shadow:0 30px 70px -25px rgba(0,0,0,.6);
  cursor:zoom-in;
}
@media (max-width:640px){
  .craft-advantages__visual img{height:400px}
}
/* ========================================================
   SHOWCASE DE IA — bloco de chat / consulta
   ======================================================== */
.ai-wave-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}
/* ========================================================
   GRADE DE INTEGRAÇÕES
   ======================================================== */
/* Redesenho completo, pedido explícito do usuário: "quero que a seção de
   integrações deixe de ser um carrossel e vire uma seção com cards, quero
   a seção com um tema branco e quero que você acrescente algum elemento
   ao fundo que diferencie um pouco a seção." Deixou de ser carrossel
   (trilho horizontal com scroll/arrasto + setas de navegação) e virou
   grid estático — todos os 12 `.integ-card` visíveis de uma vez, sem
   scroll horizontal. Como essa seção é replicada **idêntica** em 5
   páginas (`gestao-operacional.html`, `gestao-frotas.html`,
   `gestao-administrativa.html`, `power-bi.html`, `transnet-ia.html`, ver
   CLAUDE.md), o redesenho foi aplicado nas 5 de uma vez, mantendo a
   sincronia que já era regra pra esse componente — confirmado com o
   usuário antes de mexer, já que é uma mudança estrutural grande.
   `.integ-carousel`/`.integ-track`/`.integ-nav` (CSS do carrossel) foram
   **removidos por completo** (não deixados como código morto) — eram
   exclusivos deste componente, que não é mais um carrossel em nenhuma
   página do site, então não há motivo pra manter. */
.integrations{position:relative;z-index:1}
/* "Seção branca" — mesma receita padrão de sempre (ver "Convenções
   gerais" no CLAUDE.md). Modificador `--light` mesmo não havendo mais
   nenhuma instância escura desse componente (todas as 5 páginas usam o
   mesmo HTML/CSS) — mantém a convenção do projeto de nomear o tema
   explicitamente, útil se algum dia pedir pra reverter só essa seção. */
.integrations--light{background:#e2e7f0}
.integrations--light .section__title{color:#0b0f1a}
.integrations--light .section__lead{color:var(--text-mute)}
/* Elemento de fundo pra diferenciar a seção, a pedido do usuário ("seja
   criativo") — reaproveita o canvas `[data-wave-grid]` (grade pontilhada
   que ondula e reage ao mouse, já generalizado em `initWaveGridAll()`,
   ver "Grade de onda" no CLAUDE.md) com as mesmas cores calibradas pro
   tema claro já usadas em `#ai` (home) e nos heroes das páginas de
   Gestão (`data-wave-base="15,23,42" data-wave-peak="13,110,233"` —
   pontos escuro-marinho em repouso, acendendo pro azul da marca nos
   picos/perto do cursor). Zero JS novo — só o atributo no `<canvas>`.
   `.integrations` já tinha `position:relative`, então o canvas
   (`position:absolute;inset:0;z-index:0`) já se ancora certo; `.container
   {z-index:1}` (regra global) garante que os cards fiquem por cima. */
/* Grid estático no lugar do trilho — `repeat(6,1fr)` fecha as 12 integrações
   em 2 linhas de 6 no desktop, mesma técnica de colunas fixas + breakpoints
   já usada em `.craft`/`.pillars`. */
.integ-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:20px;
  margin-top:56px;
}
@media (max-width:980px){.integ-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.integ-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.integ-grid{grid-template-columns:repeat(2,1fr)}}
/* Redesenho do card — pedido explícito do usuário ("não gostei da
   interação, faça essa seção de uma forma mais bonita"), depois de duas
   rodadas anteriores (fundo azul claro no hover, depois ícone sem
   rotação) não terem ficado satisfatórias. 4 mudanças, todas voltando a
   uma linguagem mais próxima do resto do site (mais previsível = mais
   "bonita" nesse caso) + um ajuste de layout novo:
   1. Hover volta a "virar" azul-escuro sólido (mesma receita comprovada
      de `.pillar`/`.social-card`/`.bi-pillar`, abandonando o experimento
      "azul claro" da rodada anterior) — texto/ícone voltam a claro só no
      hover, mesmo contraste alto de sempre.
   2. Removido o brilho de spotlight que seguia o mouse (`::after`,
      radial-gradient com `--mx`/`--my`) — com o hover já mudando fundo +
      ícone + texto + anel de gradiente, mais uma camada de brilho ficava
      visualmente carregado; a interação agora é mais limpa/direta.
      `initSpotlight()` (main.js) continua rodando sem nenhuma mudança —
      ela seta as custom properties `--mx`/`--my` em qualquer `.card,
      .integ-card`, e simplesmente não sobra nenhum CSS pra consumi-las
      aqui agora (inofensivo, outras seções com `.card` continuam usando).
   3. Ícone ganhou um leve tingimento azul já em repouso (`rgba(13,110,
      233,.08)`, era tint neutro cinza) — mais vida antes do hover, sem
      abandonar `var(--primary)` como cor do traço (mesma regra de
      contraste de sempre).
   4. Cards com altura mínima uniforme (`min-height:152px` +
      `display:flex;flex-direction:column;justify-content:center`) — os
      12 nomes têm comprimentos bem diferentes ("GPS" vs. "APC - Contador
      Automático de Passageiros"), então sem isso a grade ficava com
      bordas inferiores desalinhadas (cards de 1 linha de texto ficavam
      visivelmente mais baixos que os de 2 linhas); agora todos fecham a
      grade com a mesma altura, ícone+texto sempre centralizados
      verticalmente. */
.integ-card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;min-height:152px;
  padding:24px 18px;
  border-radius:16px;
  background:#e9edf5;
  border:1px solid rgba(11,15,26,.08);
  box-shadow:0 12px 28px -22px rgba(11,15,26,.2);
  text-align:center;
  transition:transform .4s var(--ease-out), border-color .35s, box-shadow .4s, background .3s;
}
/* anel de gradiente, escondido até o hover — inalterado, já funciona
   sobre qualquer fundo de card */
.integ-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;
  pointer-events:none;
}
.integ-card:hover{
  background:#0d1f3d;
  border-color:transparent;
  transform:translateY(-8px);
  box-shadow:0 24px 48px -20px rgba(5,7,13,.45);
}
.integ-card:hover::before{opacity:1}
.integ-card .ic{
  width:46px;height:46px;border-radius:12px;margin:0 auto 14px;
  display:grid;place-items:center;
  background:rgba(13,110,233,.08);
  border:1px solid rgba(13,110,233,.16);
  color:var(--primary);
  transition:transform .35s var(--ease-out), box-shadow .35s, background .35s, border-color .35s, color .35s;
}
.integ-card .ic svg{width:22px;height:22px}
.integ-card .t{font-size:13px;color:#0b0f1a;font-weight:600;transition:color .3s}
.integ-card:hover .ic{
  transform:scale(1.14);
  box-shadow:0 0 26px rgba(13,110,233,.5);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  color:var(--primary-2);
}
.integ-card:hover .t{color:#fff}
/* botão "Conhecer soluções" abaixo do grid — pedido explícito do
   usuário, mesmo markup canônico de sempre (`.btn.btn--primary
   .btn--solucoes` + seta, ver "Convenções gerais" no CLAUDE.md). */
.integ-cta{display:flex;justify-content:center;margin-top:48px}
/* ========================================================
   CABEÇALHO DE PÁGINA (páginas internas)
   ======================================================== */
.page-header{
  padding:200px 0 100px;
  text-align:center;
  position:relative;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(13,110,233,.25), transparent 60%);
}
.page-header h1{
  font-size:clamp(40px,5vw,70px);
  color:#fff;letter-spacing:-.028em;
}
.page-header h1 span{
  color:var(--primary-2);
}
.page-header p{margin-top:22px;color:var(--text-dim);font-size:18px;max-width:680px;margin-left:auto;margin-right:auto}
/* variante "split" — só em transnet-ia.html (.page-header--split), pedido
   explícito do usuário pra essa página ser "um pouco diferente das
   outras": sem imagem de banner, texto alinhado à esquerda (não
   centralizado como o .page-header genérico) e uma logo ao lado, em vez
   de balões ou fundo com foto. Reaproveita `.hero__grid`/`.hero__left`/
   `.hero__right` (o grid de 2 colunas texto/visual que já existe pro
   hero da home) em vez de criar um grid novo — texto na coluna esquerda,
   logo na direita; no mobile, `.hero__right{display:none}` (regra já
   existente, ver `@media(max-width:980px)` acima) esconde a logo e o
   grid vira coluna única, sem precisar de nenhuma regra nova aqui.
   `text-align:left` sobrescreve o `text-align:center` do `.page-header`
   base — como é herdado, basta essa única declaração pro h1/p (que não
   têm `text-align` próprio) alinharem à esquerda também. */
.page-header--split{text-align:left;min-height:95vh;display:flex;align-items:center;overflow:hidden}
/* pontos de luz desfocados no hero das 3 páginas de Gestão — pedido explícito
   do usuário ("coloque pontos de luz desfocados que se movimentam pela seção,
   eles não devem se sobrepor aos elementos da seção, ele irá se sobrepor
   apenas ao plano de fundo delas"). Reaproveita o canvas [data-ambient-lights]
   genérico (initAmbientLights(), main.js) sem nenhuma mudança de JS — mesmo
   efeito já usado em #sobre-resumo e na galeria do Power BI. Diferente
   dessas outras instâncias (onde o wrapper fica sempre em z-index:0, abaixo
   do .container por ter um número menor), aqui a seção já tem
   .page-header__bg (imagem, z:0) e .page-header__scrim (véu escuro, z:1) por
   baixo — sem subir esse z-index, os focos ficariam escondidos atrás do véu
   escuro. z-index:1 empata com o véu e com o .container; o empate é
   resolvido pela ordem no DOM (este wrapper vem depois do véu e antes do
   .container no HTML), mesma técnica de empate proposital já usada entre
   .page-header__scrim e .container — resultado: os focos pintam por cima do
   véu/imagem de fundo, mas o conteúdo real (texto, botão, notebook) ainda
   pinta por cima deles, já que vem depois no DOM. */
.page-header--split .particles-bg{z-index:1}
/* suaviza a costura entre o hero e a seção seguinte — pedido explícito do
   usuário ("deixe a transição entre a seção inicial e a segunda mais
   suave"). Sem isso, a rede de partículas (`.particle-canvas`) do fundo
   terminava seca bem na borda inferior da seção, criando um corte visível
   contra a seção 2. Mesma técnica de degradê já usada em `.modules::after`
   (`#modulos`) — aqui só o rodapé precisa (o topo já fica atrás da nav). */
.page-header--split::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;
  background:linear-gradient(0deg, var(--bg-0), transparent);
  pointer-events:none;
}
/* visual do hero — era uma composição única já pronta
   (assets/img/relatorios_transnet_ia.webp, ver histórico no CLAUDE.md),
   trocada a pedido explícito do usuário pelos 3 prints reais de relatório
   (assets/img/relatorios_transnet/{1,2,3}.png, screenshots crus, sem
   moldura/sombra própria) organizados em leque — um na frente do outro,
   levemente rotacionados, bordas arredondadas, com efeito de flutuar.
   Glow de fundo (::before) reaproveitado tal qual da versão anterior
   (.ia-hero-visual::before). */
.ia-hero-fan{
  position:relative;isolation:isolate;
  width:100%;max-width:640px;
  height:clamp(320px,32vw,460px);
  display:flex;align-items:center;justify-content:center;
}
.ia-hero-fan::before{
  content:"";position:absolute;inset:-30% -10%;z-index:-1;
  background:radial-gradient(closest-side, rgba(13,110,233,.4), transparent 72%);
  filter:blur(50px);
}
/* cada print é um screenshot cru (fundo branco sólido, sem sombra/moldura
   próprias) — por isso o cartão precisa da sua própria borda arredondada +
   sombra aqui, diferente de outras composições do site que já vêm
   "assadas" prontas. object-position:top corta só a base do relatório
   (que é bem mais alto que largo), mantendo visível o cabeçalho/KPIs/
   início do conteúdo — a parte mais legível em miniatura. */
.ia-hero-fan__card{
  position:absolute;width:60%;aspect-ratio:4/5;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -20px rgba(5,7,13,.6), 0 10px 24px -10px rgba(5,7,13,.4);
}
.ia-hero-fan__card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ia-hero-fan__card--center{z-index:2;animation:iaFanFloatCenter 4.6s ease-in-out infinite;animation-delay:-2.1s}
.ia-hero-fan__card--left{
  z-index:1;filter:brightness(.82) saturate(.9);
  animation:iaFanFloatLeft 5.2s ease-in-out infinite;animation-delay:-1.2s;
}
.ia-hero-fan__card--right{
  z-index:1;filter:brightness(.82) saturate(.9);
  animation:iaFanFloatRight 5.6s ease-in-out infinite;animation-delay:-.5s;
}
@keyframes iaFanFloatCenter{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
@keyframes iaFanFloatLeft{
  0%,100%{transform:translate(-34%,-4%) rotate(-10deg) translateY(0)}
  50%{transform:translate(-34%,-4%) rotate(-10deg) translateY(-13px)}
}
@keyframes iaFanFloatRight{
  0%,100%{transform:translate(34%,4%) rotate(10deg) translateY(0)}
  50%{transform:translate(34%,4%) rotate(10deg) translateY(-13px)}
}
@media (prefers-reduced-motion:reduce){
  .ia-hero-fan__card--center,.ia-hero-fan__card--left,.ia-hero-fan__card--right{animation:none}
  .ia-hero-fan__card--left{transform:translate(-34%,-4%) rotate(-10deg)}
  .ia-hero-fan__card--right{transform:translate(34%,4%) rotate(10deg)}
}
/* ========================================================
   PILARES DE VALOR — .pillars/.pillar (componente genérico)
   ======================================================== */
/* 3 (ou mais) cartões de valor com ícone no topo centralizado — nasceu
   em transnet/power-bi.html (".bi-pillars"/".bi-pillar", ver CLAUDE.md),
   generalizado (renomeado, sem duplicar CSS) quando transnet-ia.html
   precisou do mesmo componente. Mesma técnica de anel-de-gradiente-só-
   no-hover já usada em .integ-card/.social-card, só que em formato de
   pilar (ícone no topo) em vez do selo lateral que .feat-item usa.
   `.pillars-section--light` (bloco logo abaixo) é um modificador à parte —
   a variante de tema claro da seção que contém `.pillar`s, reaproveitada
   depois em `super-app.html` também (nasceu como `.bi-pillars-section`,
   nome específico do Power BI, renomeado quando deixou de ser exclusiva
   de uma página só). */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:56px;
}
/* instância de "3 pilares" ao lado de uma imagem (`.showcase`, ver
   `super-app.html` — pedido explícito do usuário pra encaixar
   `tela_home_superapp.webp` na seção) — coluna única empilhada em vez de
   3 lado a lado (não cabe numa metade de `.showcase`), texto alinhado à
   esquerda pra acompanhar o título/lead acima, que também são left por
   padrão nesse contexto (sem `.section__head`, ver HTML). Escopado por
   `.showcase .pillars`, não precisa de um novo modificador de seção —
   só bate quando `.pillars` vive dentro de um `.showcase` mesmo. */
.showcase .pillars{grid-template-columns:1fr;gap:16px;margin-top:40px}
.showcase .pillar{text-align:left;padding:20px 24px}
.pillar{
  position:relative;
  padding:32px 28px;border-radius:20px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);
  text-align:center;
  transition:transform .35s var(--ease-out), box-shadow .35s, background-color .15s, border-color .15s;
}
.pillar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.pillar:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(13,110,233,.4)}
.pillar:hover::before{opacity:1}
.pillar h3{font-size:19px;font-weight:700;color:#fff;margin-bottom:10px;transition:color .15s}
.pillar p{font-size:15px;color:var(--text-dim);line-height:1.6;transition:color .15s}
@media (max-width:820px){
  .pillars{grid-template-columns:1fr;gap:18px}
}
/* Variante numerada — pedido explícito do usuário, só na 1ª seção
   ("3 pilares") de transnet-ia.html: "não quero ícones nos cards mas sim
   números... que o número parece uma marca d'água". Modificador
   (`.pillars--numbered`, no `.pillars`, não em `.pillar__icon` — os 2
   outros usos de `.pillar` no site, power-bi.html e super-app.html,
   continuam com ícone normal) trocando o `.pillar__icon` (selo com SVG)
   por `.pillar__num`, um numeral grande centralizado no topo do card, no
   lugar onde o ícone ficava.
   Passou por várias rodadas de cor — mesmo azul em 3 opacidades, depois 3
   tons de azul do site (`--accent`/`--primary-2`/`--primary`) ainda com
   opacidade crescente, depois 3 tons "fortes" sólidos (`--primary-2`/
   `--primary`/um tom novo mais profundo, sem opacidade nenhuma) — até o
   usuário pedir de volta o visual original ("deixe vazado como estava
   antes"). **Versão final = a primeira**: "vazado", só contorno via
   `-webkit-text-stroke` (sem preenchimento, mesma técnica de
   `.value__num`, seção "Nossos valores" em `sobre.html`), que ganha o
   gradiente da marca (`--primary`→`--primary-2`, via `background-clip:
   text`) só no hover do card — é isso que lê como "marca d'água": um
   numeral grande, oco, quase invisível em repouso, que só "acende" ao
   interagir. */
.pillars--numbered .pillar__num{
  display:block;margin:0 auto 16px;
  font-family:var(--font-display);font-weight:800;font-size:56px;line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.16);
  transition:color .4s var(--ease-out);
}
.pillars--numbered .pillar:hover .pillar__num{
  -webkit-text-stroke:1.5px transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Cards glassmórficos — pedido explícito do usuário ("quero que os cards
   desfoquem o fundo, quero eles como elementos glassmórficos"), só nesta
   instância (`.pillars--numbered`, mesmo escopo de todas as mudanças
   anteriores nesta seção — power-bi.html/super-app.html continuam com o
   `.pillar` padrão, sem blur). `backdrop-filter:blur` desfoca o que está
   atrás do card (a grade de pontos ambiente do fundo, `body::after`, e o
   canvas de partículas do hero logo acima) através dele — só tem efeito
   visível porque agora há algo com textura por trás pra desfocar; fundo
   um pouco mais opaco que o `.pillar` padrão (`rgba(255,255,255,.06)`,
   era `.02`) e borda um pouco mais visível (`.14`, era `.07`) reforçam a
   leitura de "vidro fosco" em vez de só "levemente mais claro que o
   fundo". `-webkit-backdrop-filter` necessário pro Safari. */
.pillars--numbered .pillar{
  background-color:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
/* ========================================================
   TRANSNET IA — "Método Tradicional × Novo Padrão" e C.R.A.F.T.
   ======================================================== */
/* comparação antes/depois — usada na seção "A Evolução da Rotina de
   Análise" (sem IA × com Transnet IA). Coluna da esquerda em cinza neutro
   (extração manual, resultado genérico); coluna da direita com o azul da
   marca (resultado da IA), cada item com ícone de check só do lado
   "novo". (Chegou a ter uma 2ª instância, "Pedido comum × Comando
   C.R.A.F.T." dentro de .craft-section — removida quando esse exemplo foi
   unido à seção "Sem C.R.A.F.T. vs. Com C.R.A.F.T." logo abaixo, ver
   .craft-results__prompt.) */
.ia-compare{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
.ia-compare__col h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px;text-align:center}
.ia-compare__col--old h3{color:var(--text-mute)}
.ia-compare__col--new h3{color:var(--primary-2)}
.ia-compare__item{
  padding:16px 18px;border-radius:14px;margin-bottom:12px;
  font-size:14px;line-height:1.55;
}
.ia-compare__col--old .ia-compare__item{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:var(--text-dim);
}
.ia-compare__col--new .ia-compare__item{
  background:rgba(13,110,233,.06);border:1px solid rgba(13,110,233,.28);
  color:#fff;display:flex;gap:12px;align-items:flex-start;
}
.ia-compare__item svg{flex:0 0 auto;width:19px;height:19px;color:var(--primary-2);margin-top:2px}
@media (max-width:780px){.ia-compare{grid-template-columns:1fr;gap:16px}}
/* "Seção branca" — pedido explícito do usuário ("a terceira seção seja
   branca"), mesma receita padrão de sempre (ver "Convenções gerais" no
   CLAUDE.md). Modificador próprio (`.ia-evolution-section`) em vez de
   editar `.ia-compare` direto, já que esse componente é compartilhado com
   a instância dentro de `.craft-section` (que continua escura, não fez
   parte deste pedido). */
.ia-evolution-section{position:relative;z-index:1;background:#e2e7f0}
.ia-evolution-section .section__title{color:#0b0f1a}
.ia-evolution-section .section__lead{color:var(--text-mute)}
.ia-evolution-section .ia-compare__col--new h3{color:var(--primary)}
.ia-evolution-section .ia-compare__col--old .ia-compare__item{
  background:#e9edf5;border-color:rgba(11,15,26,.08);color:var(--text-mute);
}
.ia-evolution-section .ia-compare__col--new .ia-compare__item{
  background:rgba(13,110,233,.07);border-color:rgba(13,110,233,.22);color:#0b0f1a;
}
.ia-evolution-section .ia-compare__item svg{color:var(--primary)}
/* espaço entre .craft-section e .craft-results-section reduzido — pedido
   explícito do usuário ("reduza um pouco do espaço"). As duas usam
   .section--tight (padding:90px 0), então o vão entre elas somava 180px
   (90 de baixo + 90 de cima); reduzindo só os lados que se tocam (bottom
   de uma, top da outra) pra 40px cada, o vão cai pra 80px sem afetar o
   respiro no topo/base de nenhuma das duas com as seções vizinhas. */
.craft-section{padding-bottom:40px}
.craft-results-section{padding-top:40px}
/* 5 engrenagens do C.R.A.F.T. — Contexto/Papel/Ação/Formato/Tom, cada uma
   com a letra em destaque (mesmo gradiente de texto do .btn--solucoes) +
   instrução curta + exemplo real do framework (Material de Apoio
   Folder.pdf, "A Anatomia do Comando Perfeito"). */
.craft{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:48px}
/* glassmórfico, tema branco — 2 pedidos explícitos do usuário em
   sequência ("faça esses cards glassmórficos", depois "faça esses cards
   com um tema branco"), único uso de `.craft__item` no site, então
   editado direto na regra base (sem modificador). A seção
   (`.craft-section`) continua escura de propósito — só os cards viraram
   "vidro branco fosco": fundo quase opaco (`rgba(255,255,255,.92)`, era
   `rgba(255,255,255,.05)` na 1ª rodada) ainda com `backdrop-filter:blur`
   (mantém a leitura de vidro, agora com tingimento branco em vez de
   escuro) — `-webkit-backdrop-filter` necessário pro Safari. Textos
   internos reescritos pro contraste certo sobre claro (mesma regra de
   sempre: `#0b0f1a` pro título, `var(--text-mute)` pro texto de apoio,
   nunca `var(--text-dim)`, que só dá ~2.5:1 sobre fundo claro). O
   `.craft__letter` (gradiente `--primary`→`--primary-2` via
   `background-clip:text`) não precisou de ajuste — já lê bem tanto sobre
   claro quanto sobre escuro. */
.craft__item{
  padding:26px 18px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.92);border:1px solid rgba(11,15,26,.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:transform .3s, border-color .3s;
}
.craft__item:hover{transform:translateY(-6px);border-color:rgba(13,110,233,.35)}
.craft__letter{
  font-family:var(--font-display);font-size:36px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:10px;
}
.craft__item h3{font-size:14px;font-weight:700;color:#0b0f1a;margin-bottom:10px}
.craft__item p{font-size:12.5px;color:var(--text-mute);line-height:1.55}
.craft__item p em{display:block;margin-top:10px;color:var(--text-mute);font-style:italic}
@media (max-width:980px){.craft{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.craft{grid-template-columns:1fr}}
/* "Veja a diferença no resultado" — pedido explícito do usuário, com 2
   prints reais (assets/img/resultado_sem_craft.webp/resultado_com_craft.webp,
   telas de relatório em retrato) mostrando o resultado de gerar o
   relatório sem/com o método C.R.A.F.T., alternados por 2 abas (mesmo
   pill-toggle de .ai-tabs/.modules__tabs). Nasceu só com a imagem —
   depois uniu-se ao exemplo "Pedido comum × Comando C.R.A.F.T." (que
   antes vivia como uma 2ª instância de .ia-compare dentro de
   .craft-section, ver comentário lá em cima) a pedido explícito do
   usuário: cada aba agora mostra o PROMPT usado (esquerda,
   .craft-results__prompt) lado a lado com o RELATÓRIO que ele gerou
   (direita, .craft-results__frame, inalterado). Ganhou seção própria
   (`.craft-results-section`, sem nenhuma regra própria além do que
   `.section` genérico já dá — só existe como seletor pra facilitar achar
   este bloco), separada de `.craft-section` (o método em si). */
.craft-results__carousel{max-width:960px;margin:0 auto;text-align:center}
.craft-results__tabs{
  display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  margin-bottom:32px;
}
.craft-results__tab{
  padding:8px 18px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--text-dim);
  cursor:pointer;transition:background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.craft-results__tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
}
/* prompt (esquerda) e relatório (direita), lado a lado — trocou de um
   crossfade por position:absolute (viável quando só havia uma imagem por
   aba, sempre com a mesma proporção) pra um simples toggle de display:
   o "Comando C.R.A.F.T." é um parágrafo bem mais longo que o "Pedido
   comum", então as duas abas têm alturas de conteúdo bem diferentes —
   position:absolute faria a mais curta herdar a altura da mais alta (ou
   colapsar o viewport, já que absolutos não contam pra altura do pai).
   Sem crossfade a troca fica sem fade, mas o layout nunca pula/corta. */
.craft-results__slide{display:none}
.craft-results__slide.active{display:block}
.craft-results__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:center;text-align:left;
}
.craft-results__grid .craft-results__frame{justify-self:center}
/* cartão do prompt — mesma receita visual que .ia-compare__col--old/--new
   .ia-compare__item já usava (cinza neutro pro "comum", azul translúcido
   da marca pro "C.R.A.F.T."), reaproveitada aqui em vez de inventada do
   zero. max-height+overflow-y:auto no texto do prompt evita que o
   "Comando C.R.A.F.T." (parágrafo longo) estique o cartão muito além da
   altura do relatório ao lado — os dois lados ficam com altura visual
   parecida em qualquer aba. */
.craft-results__prompt{padding:22px 24px;border-radius:14px}
.craft-results__prompt--sem{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.craft-results__prompt--com{background:rgba(13,110,233,.06);border:1px solid rgba(13,110,233,.28)}
.craft-results__prompt-label{
  display:block;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:14px;
}
.craft-results__prompt--sem .craft-results__prompt-label{color:var(--text-mute)}
.craft-results__prompt--com .craft-results__prompt-label{color:var(--primary-2)}
/* barra de rolagem sutil — mesma receita já usada em .founder-modal__body/
   .tl-mark__text (scrollbar-color cobre Firefox; os três ::-webkit-
   scrollbar-* cobrem Chrome/Safari), em vez da barra cinza chapada
   padrão do navegador. */
.craft-results__prompt-text{
  font-size:14px;line-height:1.6;font-style:italic;color:var(--text-dim);
  max-height:230px;overflow-y:auto;padding-right:8px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.craft-results__prompt-text::-webkit-scrollbar{width:5px}
.craft-results__prompt-text::-webkit-scrollbar-track{background:transparent}
.craft-results__prompt-text::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px}
/* variante "com C.R.A.F.T." — o comando real (antes um único parágrafo
   corrido em itálico) foi separado em 5 trechos rotulados pela própria
   letra do método (C/R/A/F/T), mesmo mnemônico já usado nos 5 cards
   .craft__item logo acima na página — deixa visível *qual parte do
   comando* corresponde a cada etapa do framework, em vez de um bloco de
   texto só. font-style:normal desliga o itálico herdado (que fazia
   sentido pra uma citação única, não pra uma lista estruturada). */
.craft-results__prompt-text--craft{font-style:normal}
.craft-results__prompt-text--craft p{margin-bottom:12px}
.craft-results__prompt-text--craft p:last-child{margin-bottom:0}
.craft-results__prompt-text--craft strong{font-style:normal;font-weight:800;color:var(--primary-2)}
.craft-results__prompt-text--craft strong span{font-weight:600;color:var(--text-mute)}
.craft-results__prompt-text::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.craft-results__prompt--com .craft-results__prompt-text{color:#fff}
.craft-results__prompt-outcome{
  font-size:12.5px;line-height:1.6;color:var(--text-mute);font-style:italic;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
}
@media (max-width:780px){
  .craft-results__grid{grid-template-columns:1fr;gap:24px}
  .craft-results__grid .craft-results__frame{order:-1}
}
/* .craft-results__frame encolhe pro tamanho real da imagem renderizada
   (inline-block, não a coluna inteira) — é isso que deixa o botão de
   expandir (position:absolute) grudado no canto da imagem, em vez de
   flutuar solto no meio do espaço vazio ao redor dela quando a imagem
   (retrato, mais estreita que a coluna) não preenche a largura toda. */
.craft-results__frame{position:relative;display:inline-block;max-height:100%}
.craft-results__frame img{
  display:block;max-height:340px;max-width:100%;width:auto;height:auto;
  border-radius:12px;box-shadow:0 20px 44px -20px rgba(0,0,0,.55);
}
.craft-results__expand{
  position:absolute;top:8px;right:8px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,13,.62);border:1px solid rgba(255,255,255,.18);
  color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;transition:background-color .25s var(--ease-out);
}
.craft-results__expand:hover{background:rgba(13,110,233,.65)}
.craft-results__expand svg{width:15px;height:15px}
/* lightbox de tela cheia pros 2 resultados — pedido explícito do
   usuário ("faça uma funcionalidade para visualizar o resultado em tela
   cheia"), já que o carrossel acima é deliberadamente pequeno demais
   pra ler o conteúdo dos relatórios. Mesma receita de overlay fixed +
   backdrop-filter isolado num elemento próprio (.craft-lightbox__backdrop,
   não o .craft-lightbox direto) já usada no .founder-modal — evita o bug
   de containing-block já documentado no projeto (um ancestral com
   filter/backdrop-filter vira containing block de descendentes position:
   fixed/absolute; aqui não há nenhum descendente fixed, mas a convenção
   foi mantida por segurança e consistência). initCraftResults() (main.js)
   troca o src/alt da <img> pro clicado antes de abrir. */
.craft-lightbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease-out), visibility .35s;
}
.craft-lightbox.is-open{opacity:1;visibility:visible}
.craft-lightbox__backdrop{
  position:absolute;inset:0;
  background:rgba(3,5,10,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.craft-lightbox__close{
  position:absolute;top:20px;right:20px;z-index:2;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#fff;transition:background-color .25s var(--ease-out);
}
.craft-lightbox__close:hover{background:rgba(255,255,255,.18)}
.craft-lightbox__close svg{width:18px;height:18px}
/* .craft-lightbox__stage carrega a animação de entrada (fade+scale) —
   precisou sair do <img> pra não brigar com o transform de zoom/pan que
   initCraftResults() (main.js) escreve direto no style do <img> via JS;
   as duas coisas mexendo na mesma propriedade transform, uma por classe
   CSS e outra por JS, se cancelariam. overflow:hidden aqui é o que evita
   a imagem "vazar" pra fora da área visível quando ampliada. */
.craft-lightbox__stage{
  position:relative;z-index:1;
  max-width:min(720px,90vw);max-height:88vh;
  overflow:hidden;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(16px) scale(.97);opacity:0;
  transition:transform .4s var(--ease-out), opacity .4s var(--ease-out);
}
.craft-lightbox.is-open .craft-lightbox__stage{transform:translateY(0) scale(1);opacity:1}
.craft-lightbox__img{
  max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:16px;box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
  cursor:zoom-in;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;
  transition:transform .2s var(--ease-out);
}
/* aplicadas via JS (initCraftResults()) conforme o estado de zoom —
   is-zoomed troca o cursor pra "mão aberta" (dá pra arrastar), is-
   dragging desliga a transition durante o arrasto de verdade (senão o
   movimento fica com lag, brigando com o easing pensado só pro clique
   nos botões +/-). */
.craft-lightbox__img.is-zoomed{cursor:grab}
.craft-lightbox__img.is-dragging{cursor:grabbing;transition:none}
/* toolbar de zoom — pill flutuante centralizada embaixo, mesma
   linguagem visual (vidro translúcido + blur) do .craft-results__expand
   e do próprio .craft-lightbox__close. */
.craft-lightbox__zoom{
  position:absolute;left:50%;bottom:24px;z-index:2;
  transform:translateX(-50%);
  display:flex;gap:8px;padding:6px;border-radius:999px;
  background:rgba(5,7,13,.62);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.craft-lightbox__zoom-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:19px;font-weight:600;line-height:1;
  cursor:pointer;transition:background-color .25s var(--ease-out);
}
.craft-lightbox__zoom-btn:hover{background:rgba(13,110,233,.65)}
@media (max-width:480px){
  .craft-results__frame img{max-height:280px}
}