.section--tight{padding:90px 0}
/* ========================================================
   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}
.modules__tabs{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;margin-bottom:48px;
}
.modules__tab{
  padding:11px 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:var(--text-dim);font-weight:500;font-size:14px;
  transition:all .25s;
}
.modules__tab:hover{color:#fff;border-color:rgba(255,255,255,.18)}
.modules__tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;border-color:transparent;
  box-shadow:0 10px 30px -10px var(--primary-glow);
}
/* ========================================================
   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}
/* hero banner com imagem de fundo — só em gestao-operacional.html
   (.page-header--banner), pedido explícito do usuário. Imagem real
   escolhida por ele: assets/img/cards_ERP/operacional.webp (mesma foto já
   usada no card "Transnet" da seção "Conheça nosso ERP" da home — origem
   em retrato, 937×1678, então background-size:cover corta bastante altura
   pra caber numa faixa larga e baixa como esse hero; aceitável mantendo
   center). Mesma técnica de camadas por z-index já usada em .erp-card/
   .tl-slide/.page-header--video: imagem (0) → véu escuro (1) → conteúdo
   (2). `.page-header__scrim` é reaproveitado tal qual do
   `.page-header--video` (mesmo gradiente escuro + brilho azul radial),
   não precisou de nenhuma variação nova — funciona igual bem sobre
   qualquer imagem/vídeo de fundo. */
.page-header--banner{overflow:hidden;padding:260px 0 140px;min-height:95vh;display:flex;align-items:center}
.page-header--banner .container{position:relative;z-index:2}
/* ========================================================
   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;
}
.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__icon{
  width:52px;height:52px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:rgba(13,110,233,.12);color:var(--primary-2);
  transition:background-color .15s, border-color .15s, color .15s;
}
.pillar__icon svg{width:24px;height:24px}
.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}
}
/* Fundo claro sólido — pedido explícito do usuário, mesma receita exata
   da seção "Redes sociais" (.social-section, sobre.html): fundo cinza-
   azulado (#e2e7f0), cards num tom levemente mais claro (#e9edf5), ícone
   com selo neutro (sem tint azul), textos reescritos pro contraste certo
   sobre claro (--text-mute em vez de --text-dim, que só dá ~2.5:1 sobre
   fundo claro), e no hover o card "vira" azul-escuro (#0d1f3d) em vez do
   anel de gradiente — mesmo motivo: o anel (::before) foi desenhado pra
   contrastar com um fundo escuro, ficaria fraco/estranho aqui. */
.pillars-section--light{position:relative;z-index:1;background:#e2e7f0}
.pillars-section--light .section__title{color:#0b0f1a}
.pillars-section--light .section__lead{color:var(--text-mute)}
.pillars-section--light .pillar{background:#e9edf5;border-color:rgba(11,15,26,.08)}
.pillars-section--light .pillar__icon{background:rgba(11,15,26,.05);border-color:rgba(11,15,26,.09);color:var(--primary)}
.pillars-section--light .pillar h3{color:#0b0f1a}
.pillars-section--light .pillar p{color:var(--text-mute)}
.pillars-section--light .pillar:hover{
  background:#0d1f3d;
  border-color:transparent;
  box-shadow:0 24px 48px -20px rgba(5,7,13,.45);
}
.pillars-section--light .pillar:hover::before{opacity:0}
.pillars-section--light .pillar:hover .pillar__icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--primary-2)}
.pillars-section--light .pillar:hover h3{color:#fff}
.pillars-section--light .pillar:hover p{color:var(--text-dim)}
/* ========================================================
   POWER BI — galeria de painéis (abas + prints reais)
   ======================================================== */
/* reaproveita .modules__tabs/.modules__tab (mesmo pill-row de #modulos,
   ver CLAUDE.md) pro seletor de categoria; .bi-panel é novo, já que o
   conteúdo (texto + print emoldurado) não tem nada a ver com o grid de
   .card do painel de módulos. position:relative é necessário pro
   .particles-bg (position:absolute;inset:0) se ancorar nesta seção, não
   num ancestral mais acima (mesma regra que .modules já tem). */
.bi-gallery{position:relative}
.bi-panel{
  display:none;
  grid-template-columns:minmax(240px,360px) 1fr;
  gap:48px;align-items:center;
  margin-top:8px;padding:40px;border-radius:28px;
  background:linear-gradient(160deg, rgba(13,110,233,.08), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
}
.bi-panel.active{display:grid}
.bi-panel__text h3{font-size:27px;font-weight:700;color:#fff;margin-bottom:14px}
.bi-panel__text p{font-size:16px;color:var(--text-dim);line-height:1.65}
.bi-panel__frame{
  border-radius:18px;overflow:hidden;background:#0b0f1a;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(13,110,233,.15);
}
/* barra de "janela" fake — só um toque de identidade de produto de
   verdade (o print já mostra a UI real do Power BI logo abaixo). */
.bi-panel__bar{
  display:flex;gap:7px;align-items:center;
  padding:12px 16px;background:#12161f;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bi-panel__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15)}
.bi-panel__bar i:nth-child(1){background:#ff5f57}
.bi-panel__bar i:nth-child(2){background:#febc2e}
.bi-panel__bar i:nth-child(3){background:#28c840}
.bi-panel__frame img{display:block;width:100%;height:auto}
.bi-gallery__cta{display:flex;justify-content:center;margin-top:48px}
@media (max-width:900px){
  .bi-panel{grid-template-columns:1fr;padding:24px;gap:24px}
}