/* dá mais espaço à coluna direita — pedido explícito do usuário pra o
vídeo dos heroes de Gestão (dentro do .notebook-frame) ficar maior.
Modificador em vez de mudar `.hero__grid` genérico, que os heroes
com `.phone-frame` (super-app.html) e a logo (transnet-ia.html)
continuam usando sem alteração. */
.hero__grid--video{grid-template-columns:1fr 1.15fr}
.section--tight{padding:90px 0}
/* ========================================================
CARDS DE FUNCIONALIDADES / GRADE DE MÓDULOS
======================================================== */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
position:relative;
padding:32px;
border-radius:var(--radius-lg);
background:linear-gradient(180deg, rgba(20,26,42,.55) 0%, rgba(12,16,28,.55) 100%);
border:1px solid rgba(255,255,255,.06);
overflow:hidden;
transition:border-color .35s, transform .35s var(--ease-out);
isolation:isolate;
}
.card::before{
content:"";position:absolute;inset:0;z-index:-1;
background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), rgba(13,110,233,.18), transparent 65%);
opacity:0;transition:opacity .35s;
}
.card:hover{transform:translateY(-4px);border-color:rgba(13,110,233,.35)}
.card:hover::before{opacity:1}
.card__icon{
width:50px;height:50px;border-radius:13px;
display:grid;place-items:center;
background:linear-gradient(135deg, rgba(13,110,233,.22), rgba(58,141,255,.10));
border:1px solid rgba(13,110,233,.35);
color:var(--primary-2);
margin-bottom:22px;
box-shadow:inset 0 0 20px rgba(13,110,233,.18);
}
.card__icon svg{width:22px;height:22px}
.card__title{font-size:19px;color:#fff;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.card__text{color:var(--text-dim);font-size:14.5px;line-height:1.6}
/* prints reais das telas do Transnet (assets/img/telas-transnet/*.webp) no
lugar do .dash (mockup de gráfico falso) na 2ª seção das 3 páginas de
Gestão — mesmo tratamento "sem cartão" do .showcase__visual--video, já
que os prints já vêm com sombra/perspectiva própria (composição de 3
telas em ângulo) sobre fundo transparente; um card por baixo só
duplicaria a sombra e destoaria. */
.showcase__visual--screens{
padding:0;display:flex;align-items:center;justify-content:center;
background:transparent;box-shadow:none;border:none;
overflow:visible;isolation:isolate;
}
.showcase__visual--screens::before{display:none}
/* iluminação atrás dos prints — pedido explícito do usuário ("coloque uma
iluminação atrás das imagens das telas que ficam à direita do texto").
Mesma receita do .ia-hero-visual::before (glow radial bem desfocado, sem
nenhuma aresta reta, isolation:isolate + z-index:-1 pra ficar atrás do
![]()
sem depender de ordem no DOM): overflow, que a base .showcase__visual
deixa em hidden, precisou virar visible aqui — do contrário o glow
(inset negativo, de propósito maior que a própria imagem) seria cortado
pela borda arredondada do card antes de conseguir "vazar" ao redor do
print. */
.showcase__visual--screens::after{
content:"";position:absolute;inset:-15% -10%;z-index:-1;
background:radial-gradient(closest-side, rgba(13,110,233,.4), transparent 70%);
filter:blur(60px);
pointer-events:none;
}
.showcase__img{width:100%;height:auto;display:block}
/* ========================================================
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 `