/* Universo do CLP — folha principal
   Segue specs/design.md (paleta, tipografia, tom) e specs/plano.md §5 (redlines).
   Ordem: base → utilitários → nav → herói → padrão de seção → componentes → rodapé. */

/* ============================================================
   1. BASE
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-altura) + 24px);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--txt);
  background: var(--branco);
  overflow-x: hidden;
}

/* Contenção de texto em PT-BR (plano.md §5.3) */
p { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
h1, h2, h3, h4 { hyphens: none; text-wrap: balance; }

h1 {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.02em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
}

a { text-decoration: none; }

/* Sublinhado só em links dentro de texto corrido */
p a, li a.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease;
}
p a:hover, li a.link:hover { color: var(--azul-escuro); }

strong { font-weight: 500; }

/* ============================================================
   2. UTILITÁRIOS
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}

/* Split dominante 4/8 medido na referência */
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: 1 / -1; }
.col-dir { grid-column: 5 / -1; }   /* começa em x=736 no grid de 1376 */

.nowrap { white-space: nowrap; }

.medida-lead { max-width: 46ch; }
.medida-corpo { max-width: 62ch; }
.medida-estreita { max-width: 34ch; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular-conteudo {
  position: absolute;
  left: var(--pad-lateral);
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--branco);
  color: var(--txt);
  font-size: var(--fs-ui);
  font-weight: 500;
  border: 1px solid var(--borda-clara);
  transition: top .2s ease;
}
.pular-conteudo:focus { top: 16px; }

.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   3. NAV FIXO (plano.md §6.1)
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-altura);
  display: flex;
  align-items: center;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}

.nav__interno {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Logo real (design.md §Logo): duas versões, trocadas pelo estado do nav */
.nav__logo {
  height: clamp(28px, 2.4vw, 36px);
  width: auto;
  display: block;
}
.nav__logo--claro { display: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin-left: auto;
}
.nav__links a {
  font-size: var(--fs-ui);
  font-weight: 500;
  padding: 6px 2px;
  position: relative;
  transition: opacity .18s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { font-weight: 500; }

.nav__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 0 20px;
  font-size: var(--fs-ui);
  font-weight: 500;
  background: var(--branco);
  color: var(--txt);
  border: 1px solid var(--borda-clara);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nav__cta:hover { background: var(--azul); color: var(--txt-inv); border-color: var(--azul); }

/* Sobre o herói: transparente e em branco. Ao rolar (ou em página interna): sólido. */
.nav--sobre-heroi { color: var(--txt-inv); }
.nav--sobre-heroi .nav__cta {
  background: transparent;
  color: var(--txt-inv);
  border-color: rgba(255, 255, 255, .6);
}
.nav--sobre-heroi .nav__cta:hover { background: var(--branco); color: var(--txt); border-color: var(--branco); }
.nav--sobre-heroi .nav__logo--escuro { display: none; }
/* O herói já apresenta o logo em tamanho grande logo abaixo; repetir no nav
   a 40px de distância lê como erro. Some enquanto o nav está transparente e
   volta assim que ele ganha fundo. */
.nav--sobre-heroi .nav__logo--claro { display: block; opacity: 0; transition: opacity .3s ease; }
.nav--sobre-heroi.is-rolado .nav__logo--claro { opacity: 1; }

.nav.is-rolado,
.nav--solido {
  background: var(--branco);
  color: var(--txt);
  border-bottom-color: var(--borda-clara);
  box-shadow: 0 1px 20px rgba(0, 45, 77, .06);
}
.nav.is-rolado .nav__cta,
.nav--solido .nav__cta {
  background: var(--branco);
  color: var(--txt);
  border-color: var(--borda-clara);
}
.nav.is-rolado .nav__cta:hover,
.nav--solido .nav__cta:hover { background: var(--azul); color: var(--txt-inv); border-color: var(--azul); }
.nav.is-rolado .nav__logo--escuro,
.nav--solido .nav__logo--escuro { display: block; }
.nav.is-rolado .nav__logo--claro,
.nav--solido .nav__logo--claro { display: none; }

/* Hambúrguer */
.nav__hamburguer {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.nav__hamburguer span {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
  transition: background-color .2s ease;
}
.nav__hamburguer span::before,
.nav__hamburguer span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform .25s ease;
}
.nav__hamburguer span::before { top: -7px; }
.nav__hamburguer span::after { top: 7px; }
.nav__hamburguer[aria-expanded="true"] span { background: transparent; }
.nav__hamburguer[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav__hamburguer[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   4. HERÓI (plano.md §6.2 — variante E)
   ============================================================ */

.heroi {
  position: relative;
  min-height: clamp(560px, 88vh, 945px);
  background: var(--grad-heroi);
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-altura);
  padding-bottom: var(--s-2);
  overflow: hidden;
}

.heroi__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
  padding-bottom: clamp(32px, 5vh, 64px);
}

/* Logo real no lugar do wordmark re-tipografado (design.md §Logo) */
/* O intervalo aqui é o generoso da dobra, e o de baixo do H1 é o apertado:
   a marca fica sozinha, o título e o texto de apoio leem como um par. Antes
   os dois vãos eram 44px e 56px — perto demais para haver cadência, e os três
   blocos saíam com o mesmo peso no teste de vista embaçada. */
.heroi__logo {
  width: clamp(260px, 30vw, 440px);
  height: auto;
  margin-bottom: clamp(48px, 7vh, 96px);
}

/* Navy sobre a metade clara do gradiente: ~10:1.
   O branco de antes ficava em ~2,3:1 sobre a faixa cinza-creme. */
/* O display medido é 200px, calibrado para "Powering the World" (18 car.).
   "Automação industrial de ponta a ponta" tem 37 e quebrava em 3 linhas,
   estourando a coluna — exatamente o risco que plano.md §5.3 antecipou.
   Aqui o teto cai para 120px, que mantém as 2 linhas do orçamento. */
.heroi__titulo {
  font-size: clamp(2.5rem, 6.4vw, 7.5rem);
  color: var(--navy-marca);
  max-width: 22ch;
  margin-bottom: clamp(24px, 3vh, 40px);
}
/* cada linha do H1 entra por conta própria, então precisa empilhar */
.heroi__titulo .entra-linha { display: block; }

/* Régua vertical de 1px × 134px, em x=272 (plano.md §5.4) */
.heroi__apoio {
  position: relative;
  padding-left: 20px;
  color: rgba(0, 0, 0, .62);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5;
}
.heroi__apoio::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 1px;
  height: 134px;
  max-height: 100%;
  background: var(--regua);
}

/* Peça visual: cena isométrica industrial.
   O arquivo já vem com matte alfa derivado da própria imagem (ver
   ferramentas/build_extras.py), então compõe normalmente. A versão anterior
   usava mix-blend-mode: multiply, que dava o mesmo resultado visual mas
   isolava a camada a ponto de a página não pintar em captura.

   O palco posiciona; o filho move. São dois elementos porque o paralaxe
   precisa de um transform só seu — se dividisse o transform com o
   translateY(-46%) do enquadramento, cada quadro do JS teria que reescrever
   os dois valores juntos. */
/* A cena desceu e cresceu: o centro dela saiu de 78% para ~70% da largura
   (ainda claramente à direita, e ainda sangrando pela borda) e desceu ~57px,
   passando a correr POR BAIXO do fim do título em vez de ao lado dele. O pé
   fica cortado pelo `overflow` do herói, o que não custa nada — os últimos
   6% do render são chão vazio. */
.heroi__palco {
  position: absolute;
  z-index: 1;
  right: -2%;
  top: 56%;
  transform: translateY(-46%);
  width: 66%;
  max-width: 1220px;
  pointer-events: none;
  user-select: none;
}

.heroi__cena-mov {
  position: relative;
  transform: translate3d(0, 0, 0);
}

.heroi__cena {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  .heroi__palco { right: -10%; top: 40%; width: 94%; opacity: .9; }
  .heroi__titulo { max-width: 12ch; }
}

@media (max-width: 767px) {
  .heroi { align-items: flex-end; min-height: 640px; }
  .heroi__titulo { max-width: none; }
  /* Em coluna estreita a cena passa inteira por trás do texto, então cresce
     menos que no desktop e continua em .8 de opacidade. */
  .heroi__palco { right: -16%; top: 32%; width: 126%; max-width: none; opacity: .8; }
  /* A régua vira ruído em container estreito (plano.md §5.4) */
  .heroi__apoio { padding-left: 0; }
  .heroi__apoio::before { display: none; }
}

/* ---- A rede viva sobre a cena ----
   Os caminhos são as rotas de enlace do próprio render, extraídas de
   `cena-1200.png` por ferramentas/extrair_enlaces.py — mesmo viewBox do
   arquivo (1200×755) e o SVG ocupa exatamente a caixa da imagem, então o
   traçado cai em cima da linha desenhada em qualquer largura.

   Duas passagens, e elas contam a mesma coisa que a copy: a supervisão
   reconhece a planta (o traço nasce no hub e corre para o campo, uma vez só),
   e a planta responde (os pulsos correm do campo para o hub, sem parar).
   Onde o enlace passa atrás de um prédio ele não está desenhado — o pulso
   some na oclusão e reaparece do outro lado, que é o certo.

   Comprimento, duração e atraso vêm assados no HTML: o traçado é poligonal,
   então o valor é exato e a animação não precisa de getTotalLength(). */
.heroi__rede {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  --pulso: 38;    /* comprimento do risco de luz, em unidades do viewBox */
  --folga: 300;   /* corrida morta nas pontas: é o descanso entre repetições */
  --traco-w: 2.2;
}

.rede__traco use {
  stroke: var(--navy-marca);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: calc(var(--len) * 1px) calc(var(--len) * 1px);
  stroke-dashoffset: calc(var(--len) * -1px);
  animation: rede-varre 3.4s cubic-bezier(.16, 1, .3, 1) var(--atraso) 1 both;
}

/* O laranja é o accent escasso da marca (tokens.css). Cabe aqui porque o que
   fica na tela é um risco de 38px de comprimento por ~2px de espessura, e as
   contas de duração deixam cerca de três no ar ao mesmo tempo — é detalhe de
   marca, não uma segunda cor disputando a dobra. */
.enlace use {
  stroke: var(--laranja);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: calc(var(--pulso) * 1px) 9999;
  /* `backwards` não é enfeite: sem ele, durante o atraso o elemento fica no
     estilo base (deslocamento 0) e cada enlace exibe um toco laranja parado
     na largada, por até 6,5s depois que a página abre. */
  animation: rede-pulso var(--dur) linear var(--atraso) infinite backwards;
}
.enlace__halo   { stroke-width: calc(var(--traco-w) * 3); opacity: .16; }
.enlace__nucleo { stroke-width: var(--traco-w); opacity: .92; }

/* O traço desenha de trás para a frente: com dasharray igual ao comprimento,
   o deslocamento -len esconde tudo e 0 revela tudo, a partir da ponta do hub.

   Ele não some no fim, assenta — e o valor de repouso é calibrado, não
   escolhido no olho. Os enlaces desenhados estão em ~16% de alfa, o que dá
   ~6 em 255 de contraste sobre o gradiente; sem nada que fique, o pulso
   correria no vazio. O navy a .14 sobre o mesmo fundo dá ~13: o dobro da
   linha do render, o bastante para haver trilho, longe de virar uma segunda
   camada de desenho por cima da cena aprovada. */
@keyframes rede-varre {
  0%   { stroke-dashoffset: calc(var(--len) * -1px); opacity: 0; }
  12%  { opacity: .8; }
  46%  { stroke-dashoffset: 0px; opacity: .8; }
  100% { stroke-dashoffset: 0px; opacity: .14; }
}

/* A folga nas duas pontas é a pausa: o risco corre fora do caminho, invisível,
   antes de entrar e depois de sair. Um keyframe linear, sem porcentagem. */
@keyframes rede-pulso {
  from { stroke-dashoffset: calc((var(--pulso) + var(--folga)) * 1px); }
  to   { stroke-dashoffset: calc((var(--len) + var(--folga)) * -1px); }
}

/* Nada roda por trás do véu da intro nem com a dobra fora da tela. */
html.intro-ativa .heroi__rede use,
.heroi__rede.is-fora use { animation-play-state: paused; }

@media (max-width: 767px) {
  .heroi__rede { --traco-w: 3.4; }
  .rede__traco use { stroke-width: 2.6; }
}

/* ---- Cabeçalho das páginas internas: fotografia + scrim ----
   design.md: "Fotografia entra em blocos de largura total, sempre com um leve
   overlay/gradiente para manter contraste do texto."
   Scrim em duas camadas: uma vertical, que assenta o texto na base, e uma
   horizontal, que protege o lado da leitura sem apagar a foto do outro lado.
   Medido: branco sobre a área do texto fica acima de 9:1. */
.cabecalho {
  position: relative;
  background: var(--navy);
  padding-top: calc(var(--nav-altura) + clamp(64px, 9vw, 152px));
  padding-bottom: clamp(56px, 7vw, 112px);
  overflow: hidden;
  isolation: isolate;
}
.cabecalho__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cabecalho::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 26, 46, .82) 0%, rgba(0, 26, 46, .58) 42%, rgba(0, 26, 46, .88) 100%),
    linear-gradient(90deg, rgba(0, 26, 46, .78) 0%, rgba(0, 26, 46, .40) 52%, rgba(0, 26, 46, .12) 100%);
}
.cabecalho .container { position: relative; z-index: 1; }
.cabecalho__eyebrow { color: rgba(255, 255, 255, .78); }
.cabecalho h1 {
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  color: var(--txt-inv);
  max-width: 18ch;
  margin-top: var(--s-4);
}
.cabecalho__lead {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .88);
  line-height: 1.36;
}

/* ============================================================
   5. PADRÃO DE SEÇÃO: eyebrow → título → parágrafo → CTA
   ============================================================ */

.secao {
  padding-block: var(--sec-y);
  /* Fundo explícito, não herdado do <main>: uma seção transparente não
     esconderia a faixa que passa por baixo dela (ver .palco-ascende). */
  background: var(--branco);
}
.secao--offwhite { background: var(--off-white); }
.secao--escura   { background: var(--carvao); color: var(--txt-inv); }
.secao--navy     { background: var(--navy); color: var(--txt-inv); }
.secao--preta    { background: var(--preto); color: var(--txt-inv); }
.secao--compacta { padding-block: var(--s-8); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--txt-2);
  margin-bottom: var(--s-4);
}
.secao--escura .eyebrow,
.secao--navy .eyebrow,
.secao--preta .eyebrow { color: rgba(255, 255, 255, .6); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.36;
  max-width: 46ch;
}

.corpo { max-width: 62ch; }
.corpo + .corpo { margin-top: var(--s-4); }

.titulo-secao + .lead,
.titulo-secao + .corpo,
h2 + p { margin-top: var(--s-5); }

.secao--escura p { color: var(--txt-inv-2); }
.secao--navy p   { color: var(--txt-inv-2); }

/* Bloco de cabeçalho de seção em split 4/8 */
.bloco {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 0;
  row-gap: var(--s-6);
  align-items: start;
}
.bloco__esq { grid-column: span 4; }
.bloco__dir { grid-column: 5 / -1; }

@media (max-width: 1023px) {
  .bloco__esq, .bloco__dir { grid-column: 1 / -1; }
  .bloco { row-gap: var(--s-4); }
}

/* ---- CTA discreto: chip com seta + texto (design.md §Componentes) ---- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-ui);
  font-weight: 500;
  min-height: 44px;
  transition: color .18s ease;
}
.cta__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: var(--azul-claro);
  color: var(--navy);
  transition: background-color .2s ease, transform .2s ease, color .2s ease;
}
.cta__chip svg { width: 13px; height: 13px; }
.cta:hover .cta__chip { background: var(--azul); color: var(--branco); transform: translateX(3px); }
.cta:hover { color: var(--azul-escuro); }

.secao--escura .cta__chip,
.secao--navy .cta__chip,
.secao--preta .cta__chip { background: rgba(255, 255, 255, .12); color: var(--branco); }
.secao--escura .cta:hover .cta__chip,
.secao--navy .cta:hover .cta__chip,
.secao--preta .cta:hover .cta__chip { background: var(--azul); }
.secao--escura .cta:hover,
.secao--navy .cta:hover,
.secao--preta .cta:hover { color: var(--azul-claro); }

p + .cta, .corpo + .cta, .lead + .cta,
.abertura__colunas + .cta { margin-top: var(--s-6); }

/* ---- Botões ---- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  font-size: var(--fs-ui);
  font-weight: 500;
  border: 1px solid var(--borda-clara);
  background: var(--branco);
  color: var(--txt);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.botao:hover { background: var(--azul); color: var(--txt-inv); border-color: var(--azul); }
.botao svg { width: 18px; height: 18px; flex-shrink: 0; }

.botao--principal { background: var(--azul); color: var(--txt-inv); border-color: var(--azul); }
.botao--principal:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }

.botao--claro {
  background: transparent;
  color: var(--txt-inv);
  border-color: rgba(255, 255, 255, .45);
}
.botao--claro:hover { background: var(--branco); color: var(--txt); border-color: var(--branco); }

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ============================================================
   6. NÚMEROS DE CREDIBILIDADE (plano.md §6.3)
   ============================================================ */

.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-8);
  border-top: 1px solid var(--borda-clara);
  padding-top: var(--s-6);
}
.numeros__item dt {
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navy-marca);
}
.numeros__item dd {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--txt-suave);
  max-width: 22ch;
}
.secao--escura .numeros { border-top-color: var(--borda-esc); }
.secao--escura .numeros__item dt { color: var(--branco); }
.secao--escura .numeros__item dd { color: var(--txt-inv-2); }

@media (max-width: 767px) {
  .numeros { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
}

/* ============================================================
   7. IMAGENS E FAIXAS
   ============================================================ */

.figura { margin: 0; }
.figura img { width: 100%; height: auto; }

.figura--cinema {
  aspect-ratio: 911 / 315;
  overflow: hidden;
}
.figura--cinema img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Emblema: a marca assinando um bloco de texto ----
   Ocupa a largura inteira do container, então fica no eixo da página. O
   `padding-block` substitui o aspect-ratio de antes: com a caixa larga, a
   proporção herdada da foto daria uma faixa de quase 500px de altura.
   Sem caixa, sem borda: o ar em volta é a composição. Sem overflow
   escondido, porque a peça se desloca de leve. */
.emblema {
  display: grid;
  place-items: center;
  padding-block: clamp(64px, 9vh, 116px);
}
.emblema__marca {
  width: clamp(196px, 26%, 376px);
  height: auto;
  transform: translate3d(0, 0, 0);
}

/* Faixa full-bleed com scrim (plano.md §6.4 e §5.3 regra 7) */
.faixa {
  position: relative;
  min-height: clamp(360px, 48vw, 734px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.faixa__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.faixa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 45, 77, .42) 0%, rgba(0, 45, 77, .78) 100%);
}
.faixa__texto {
  color: var(--txt-inv);
  max-width: 22ch;
}
.faixa__texto p { color: rgba(255, 255, 255, .82); max-width: 46ch; }
.faixa .eyebrow { color: rgba(255, 255, 255, .68); }

/* ============================================================
   8. CHIPS DE TECNOLOGIA (plano.md §6.5)
   ============================================================ */

/* Quatro famílias em quatro colunas de mesma largura, cada tecnologia em
   sua linha. Substitui as pílulas embrulhando de forma irregular: com a
   coluna fixa, as listas se alinham e a seção fica simétrica de verdade. */
.familias {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-7);
}
.familia__nome {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--txt-2);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--borda-clara);
}
.familia__lista {
  list-style: none;
  display: grid;
  gap: 0;
}
.familia__lista li {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--txt);
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  /* O deslocamento do hover é transform, não padding: só o compositor
     trabalha, sem recalcular layout a cada quadro. */
  transition: color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.familia__lista li:last-child { border-bottom: 0; }
.familia__lista li:hover { color: var(--azul-escuro); transform: translateX(6px); }

/* Capacidade nova, ainda não divulgada: um dos dois usos de laranja da dobra */
.familia__lista li.e-novo {
  color: var(--laranja-esc);
  font-weight: 500;
}

@media (max-width: 1023px) {
  .familias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .familias { grid-template-columns: 1fr; gap: var(--s-5); }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.2;
  border: 1px solid var(--borda-clara);
  background: var(--branco);
  color: var(--txt);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.chip:hover { border-color: var(--azul); color: var(--azul-escuro); }
.chip--novo {
  border-color: var(--laranja);
  color: var(--laranja-esc);
}

/* ============================================================
   9. CARDS
   ============================================================ */

.cards {
  display: grid;
  gap: var(--gap-card);
  margin-top: var(--s-7);
}
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1023px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .cards--4, .cards--3, .cards--2 { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--borda-clara);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--azul); }
.card__midia {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--off-white);
}
.card__midia--larga { aspect-ratio: 3 / 2; }
.card__midia img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.card:hover .card__midia img { transform: scale(1.03); }
.card__corpo {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.card__titulo {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.card__texto {
  font-size: var(--fs-small);
  color: var(--txt-suave);
  line-height: 1.45;
}
.card__meta {
  font-size: var(--fs-legal);
  font-weight: 500;
  color: var(--txt-2);
  letter-spacing: .01em;
}
.card__rodape { margin-top: auto; padding-top: var(--s-3); }

.secao--escura .card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--borda-esc);
}
.secao--escura .card__texto { color: var(--txt-inv-2); }
.secao--escura .card__meta { color: var(--azul); }
.secao--escura .card__midia { background: rgba(255, 255, 255, .05); }

/* Truncamento com expansão (plano.md §5.3 regra 6) */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.is-expandido .clamp-3 { -webkit-line-clamp: unset; overflow: visible; }

.mais {
  align-self: flex-start;
  font-size: var(--fs-legal);
  font-weight: 500;
  color: var(--azul);
  padding: 6px 0;
  min-height: 32px;
}
.mais:hover { color: var(--azul-escuro); text-decoration: underline; text-underline-offset: 3px; }
.secao--escura .mais:hover { color: var(--azul-claro); }

/* ============================================================
   10. ABAS DE FILTRO (plano.md §6.7)
   ============================================================ */

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-7);
  border-bottom: 1px solid var(--borda-esc);
}
.aba {
  position: relative;
  padding: 0 0 14px;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
  min-height: 44px;
  transition: color .18s ease;
}
.aba::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.aba:hover { color: var(--branco); }
.aba[aria-pressed="true"] { color: var(--branco); }
.aba[aria-pressed="true"]::after { transform: scaleX(1); }

.projeto[hidden] { display: none; }

/* ============================================================
   11. LINHA DO TEMPO 2008 → 2026 (plano.md §6.7)
   ============================================================ */

.linha-tempo { margin-top: var(--s-8); }
.linha-tempo__escala {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-legal);
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--borda-esc);
}
.linha-tempo__lista { list-style: none; margin-top: var(--s-4); display: grid; gap: 10px; }
.linha-tempo__item {
  display: grid;
  grid-template-columns: minmax(200px, 264px) 1fr;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-legal);
}
.linha-tempo__nome { color: rgba(255, 255, 255, .8); font-weight: 500; }
.linha-tempo__periodo {
  color: rgba(255, 255, 255, .45);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.linha-tempo__trilho {
  position: relative;
  height: 22px;
  background: rgba(255, 255, 255, .06);
}
.linha-tempo__barra {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--azul);
  min-width: 6px;
}
/* Projetos em andamento: único uso de laranja nesta dobra (design.md) */
.linha-tempo__barra--ativo { background: var(--laranja); }

@media (max-width: 767px) {
  .linha-tempo__item { grid-template-columns: 1fr; gap: 4px; }
  .linha-tempo__escala { font-size: 12px; }
}

/* ============================================================
   12. CERTIFICAÇÕES (plano.md §6.9)
   ============================================================ */

.selo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--borda-clara);
  background: var(--branco);
  margin-top: var(--s-5);
}
.selo__numero {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--navy-marca);
  font-variant-numeric: tabular-nums;
}
.selo__texto { font-size: var(--fs-small); color: var(--txt-suave); }

.cert__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
}
.cert__links a {
  font-size: var(--fs-legal);
  font-weight: 500;
  color: var(--azul-escuro);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.cert__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cert__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--txt-suave);
  letter-spacing: .02em;
}

/* ============================================================
   13. TREINAMENTOS E CUPOM (plano.md §6.10 e §6.11)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  background: var(--laranja);
  color: #211202;
}

.card--destaque { border-color: var(--laranja); }
.card--destaque .card__titulo { font-size: var(--fs-h3); font-weight: 400; }

@media (min-width: 1024px) {
  .card--destaque { grid-column: span 2; }
  .card--destaque .card__corpo { padding: var(--s-6); }
}

.cupom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--s-7);
}
.cupom__codigo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.cupom__valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 10px 18px;
  border: 1px dashed var(--laranja);
  color: var(--laranja-esc);
  background: var(--branco);
}
.copiar {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--azul-escuro);
  min-height: 44px;
  padding: 0 4px;
}
.copiar:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .cupom { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ============================================================
   14. FAIXA DE CULTURA / BASTIDORES (plano.md §6.12)
   ============================================================ */

.cultura {
  display: flex;
  gap: var(--gap-card);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--pad-lateral);
  padding-block: var(--s-8);
  scrollbar-width: none;
}
.cultura::-webkit-scrollbar { display: none; }
.cultura figure {
  flex: 0 0 auto;
  scroll-snap-align: center;
  margin: 0;
}
.cultura img { height: clamp(260px, 30vw, 450px); width: auto; object-fit: cover; }

/* ============================================================
   15. VÍDEOS (plano.md §6.8)
   ============================================================ */

.video-card .card__midia {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-card__play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background-color .25s ease;
}
.video-card__play svg { width: 18px; height: 18px; margin-left: 3px; fill: var(--navy); }
.video-card:hover .video-card__play { transform: scale(1.08); background: var(--branco); }

/* ============================================================
   16. CONTATO (plano.md §6.13)
   ============================================================ */

.contato-lista {
  list-style: none;
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.contato-lista a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--borda-esc);
  transition: color .18s ease;
}
.contato-lista a:hover { color: var(--azul-claro); }
.contato-lista__rotulo {
  font-size: var(--fs-eyebrow);
  color: rgba(255, 255, 255, .55);
  width: 110px;
  flex-shrink: 0;
}
.contato-lista__valor { font-size: var(--fs-lead); font-weight: 400; }

/* ============================================================
   17. RODAPÉ (plano.md §6.14)
   ============================================================ */

/* ---- Rodapé revelado por baixo ----
   O rodapé fica preso ao pé da janela desde o começo, mas escondido atrás do
   <main>, que rola por cima dele. Só quando o conteúdo termina de subir é que
   ele aparece — ou seja, o usuário chega ao fim e continua rolando um pouco.
   É layout puro: nenhuma animação, nenhum JS, nada que possa travar.
   O <main> precisa de fundo opaco, senão não haveria o que esconder. */
main {
  position: relative;
  z-index: 1;
  background: var(--branco);
}

.rodape {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background: var(--preto);
  color: var(--txt-inv);
  padding-block: var(--s-8) var(--s-6);
}
.rodape__headline {
  font-size: var(--fs-h3);
  font-weight: 300;
  max-width: 20ch;
  line-height: 1.08;
  margin-bottom: var(--s-8);
}
.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--borda-esc);
}
.rodape__titulo {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  margin-bottom: var(--s-4);
}
.rodape__lista { list-style: none; display: grid; gap: 10px; }
.rodape__lista a {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .82);
  transition: color .18s ease;
  display: inline-block;
  padding: 3px 0;
}
.rodape__lista a:hover { color: var(--branco); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-6);
  font-size: var(--fs-legal);
  color: rgba(255, 255, 255, .55);
}
.rodape__marca { display: flex; align-items: center; gap: 10px; }
.rodape__marca img { height: 30px; width: auto; }


@media (max-width: 1023px) {
  .rodape__colunas { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); }
}
@media (max-width: 479px) {
  .rodape__colunas { grid-template-columns: 1fr; }
}

/* (18. Reveal foi reescrito na secao 26 -- Movimento) */

/* ============================================================
   19. MENU MOBILE
   ============================================================ */

@media (max-width: 1023px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburguer { display: flex; }

  .nav.is-aberto {
    background: var(--branco);
    color: var(--txt);
  }
  .nav.is-aberto .nav__logo--escuro { display: block; }
  .nav.is-aberto .nav__logo--claro { display: none; }

  .nav__painel {
    position: fixed;
    inset: var(--nav-altura) 0 0 0;
    background: var(--branco);
    color: var(--txt);
    padding: var(--s-6) var(--pad-lateral) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav__painel.is-aberto { opacity: 1; transform: none; visibility: visible; }
  .nav__painel a {
    font-size: 1.5rem;
    font-weight: 400;
    padding: 10px 0;
    border-bottom: 1px solid var(--borda-clara);
  }
  .nav__painel a[aria-current="page"] { color: var(--azul-escuro); }
  .nav__painel .botao { margin-top: var(--s-4); }
  body.is-travado { overflow: hidden; }
}

@media (min-width: 1024px) {
  .nav__painel { display: none; }
}

/* ============================================================
   20. AJUSTES RESPONSIVOS FINAIS
   ============================================================ */

@media (min-width: 1024px) {
  /* Quebra semântica de título só a partir do desktop (plano.md §5.3) */
  h1 br, h2 br { display: inline; }
}
@media (max-width: 1023px) {
  h1 br, h2 br { display: none; }
}

@media (max-width: 767px) {
  .abas { gap: var(--s-4); }
  .selo { width: 100%; }
}

/* ============================================================
   21. SUPERFÍCIES DO NAVEGADOR
   As partes que não desenhamos também carregam o design.
   ============================================================ */

::selection { background: var(--azul); color: #0B1626; }

:root { scrollbar-color: rgba(27, 58, 107, .38) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(27, 58, 107, .3);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(27, 58, 107, .55); background-clip: content-box; }

.secao--escura, .secao--navy, .secao--preta, .rodape {
  scrollbar-color: rgba(255, 255, 255, .34) transparent;
}

body { caret-color: var(--azul); }

/* ============================================================
   22. CARROSSEL DE PROJETOS (padrão de referencia/goal/image.png)
   Card de foto alto alternando com card de texto, rompendo o
   container pelos dois lados. Substitui a grade de cards iguais.
   ============================================================ */

.carrossel { position: relative; margin-top: var(--s-8); }

.carrossel__trilho {
  display: flex;
  gap: var(--gap-card);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: max(var(--pad-lateral), calc((100vw - var(--container)) / 2 + var(--pad-lateral)));
  padding-block: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__item {
  flex: 0 0 auto;
  width: clamp(280px, 30vw, 460px);
  height: clamp(440px, 52vw, 640px);
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  /* O trilho tem 16 itens e mais de 8.000px de largura; sem isto o navegador
     rasteriza todos de uma vez. O tamanho intrínseco declarado mantém a
     barra de rolagem estável enquanto os de fora ficam sem renderizar. */
  content-visibility: auto;
  contain-intrinsic-size: clamp(280px, 30vw, 460px) clamp(440px, 52vw, 640px);
}

.carrossel__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.carrossel__foto:hover img { transform: scale(1.04); }

/* Card de texto: neutro quente, como na referência */
.carrossel__texto {
  background: #4E4A45;
  color: var(--txt-inv);
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
}
.carrossel__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
}
.carrossel__marca::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--azul);
  flex-shrink: 0;
}
.carrossel__item--ativo .carrossel__marca::before { background: var(--laranja); }

.carrossel__titulo {
  margin-top: auto;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.01em;
  max-width: 18ch;
}
.carrossel__desc {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
  max-width: 34ch;
}
.carrossel__dados {
  margin-top: var(--s-4);
  display: grid;
  gap: 6px;
  font-size: var(--fs-legal);
  color: rgba(255, 255, 255, .62);
  font-variant-numeric: tabular-nums;
}
.carrossel__dados div { display: flex; gap: 10px; }
.carrossel__dados dt { flex: 0 0 64px; color: rgba(255, 255, 255, .42); }
.carrossel__dados dd { margin: 0; }

.carrossel__stack {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-legal);
  color: rgba(255, 255, 255, .58);
  line-height: 1.5;
}

.carrossel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .94);
  color: #10233F;
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 24, 48, .22);
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.carrossel__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.carrossel__nav svg { width: 17px; height: 17px; }
.carrossel__nav--ant { left: max(12px, calc((100vw - var(--container)) / 2 + 12px)); }
.carrossel__nav--prox { right: max(12px, calc((100vw - var(--container)) / 2 + 12px)); }
.carrossel__nav[disabled] { opacity: .28; pointer-events: none; }

@media (max-width: 767px) {
  .carrossel__nav { display: none; }
  .carrossel__item { width: 78vw; height: 460px; }
  .carrossel__texto { padding: var(--s-5); }
}

/* ============================================================
   23. BASTIDORES: faixa de rolagem automática
   Duas cópias do mesmo trilho deslizando; a animação percorre
   exatamente 50%, então o ponto de emenda nunca aparece.
   ============================================================ */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-8);
}

/* O esmaecido das pontas vem de duas sobreposições, não de mask-image:
   a máscara obrigava um buffer offscreen do tamanho do trilho e travava
   o compositor. O resultado visual é o mesmo. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(48px, 7vw, 140px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--fundo-marquee, #fff), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--fundo-marquee, #fff), transparent); }
.secao--offwhite .marquee { --fundo-marquee: var(--off-white); }

.marquee__trilho {
  display: flex;
  width: max-content;
  gap: var(--gap-card);
  animation: marquee var(--marquee-dur, 64s) linear infinite;
  /* Sem will-change de propósito: o trilho é muito largo e a dica forçava
     uma textura de dezenas de MB, a ponto de travar o compositor. */
}
.marquee:hover .marquee__trilho,
.marquee:focus-within .marquee__trilho { animation-play-state: paused; }

/* O deslocamento é de 50% porque o JS duplica o conteúdo: ao chegar na
   metade, o trilho está visualmente idêntico ao início. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee figure {
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  contain: paint;
}
.marquee img {
  height: clamp(220px, 24vw, 340px);
  width: auto;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.marquee figure:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .marquee__trilho { animation: none; }
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
}

/* ============================================================
   24. VÍDEOS COM THUMBNAIL REAL (lite embed)
   ============================================================ */

.video-card {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--branco);
  border: 1px solid var(--borda-clara);
  transition: border-color .2s ease;
}
.video-card:hover { border-color: var(--azul); }

.video-card__midia {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0E1826;
}
.video-card__midia img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}
.video-card:hover .video-card__midia img { transform: scale(1.05); filter: brightness(.82); }

.video-card__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 26, 0) 46%, rgba(6, 14, 26, .7) 100%);
  pointer-events: none;
}

.video-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 68px; height: 48px;
  border-radius: 12px;
  background: rgba(11, 22, 38, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.video-card__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }
.video-card:hover .video-card__play {
  background: #E4342A;
  transform: translate(-50%, -50%) scale(1.08);
}

.video-card__corpo { padding: var(--s-4); }
/* O card de vídeo é um <a> com filhos <span>: sem JS ele continua sendo um
   link real para o YouTube, e com JS o iframe entra no lugar da thumbnail. */
.video-card__midia,
.video-card__corpo,
.video-card__canal,
.video-card__titulo { display: block; }
.video-card { text-align: left; }
.video-card__midia picture { display: block; height: 100%; }

.video-card__canal {
  font-size: var(--fs-legal);
  font-weight: 500;
  color: var(--azul-escuro);
  letter-spacing: .01em;
}
.video-card__titulo {
  margin-top: 6px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--txt);
}
.secao--escura .video-card { background: rgba(255, 255, 255, .03); border-color: var(--borda-esc); }
.secao--escura .video-card__titulo { color: var(--txt-inv); }
.secao--escura .video-card__canal { color: var(--azul); }

/* iframe injetado no clique, nunca no carregamento da página */
.video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 4;
}

/* ============================================================
   25. INTRO: o logo encolhe até o lugar dele no herói
   O movimento é dirigido por JS (FLIP), porque o destino só é
   conhecido em tempo de execução. Aqui ficam a cena e a rede de
   segurança: se o JS morrer, o véu sai sozinho aos 8s.
   ============================================================ */

.intro { display: none; }

html.intro-ativa .intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, #0E1F3A 0%, #1B3A6B 58%, #2E568F 100%);
  animation: intro-seguranca 0s linear 8s forwards;
}
@keyframes intro-seguranca {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

html.intro-ativa .intro__logo {
  width: min(62vw, 720px);
  height: auto;
  will-change: transform;
  animation: intro-surge .8s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes intro-surge {
  from { opacity: 0; filter: blur(18px); }
  to   { opacity: 1; filter: blur(0); }
}

/* ---- Frase da intro, em máquina de escrever ----
   O recorte é clip-path, não width: animar largura recalcularia layout a
   cada passo. Com steps(38) — um por caractere — o clip revela e depois
   recolhe o texto letra a letra, e o cursor viaja junto.
   Ciclo de 4s: 1s escrevendo, 2s na tela, 1s apagando. */
.intro__cena {
  display: grid;
  justify-items: center;
  gap: clamp(22px, 3.4vh, 46px);
}

.intro__frase {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: clamp(1rem, 1.9vw, 1.625rem);
  font-weight: 300;
  letter-spacing: .005em;
  line-height: 1.3;
  color: rgba(255, 255, 255, .94);
  white-space: nowrap;
  max-width: 92vw;
}

html.intro-ativa .intro__texto {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: intro-escrita 4s steps(38) forwards;
}

html.intro-ativa .intro__cursor {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 1.15em;
  margin-top: -.575em;
  background: var(--laranja);
  animation: intro-cursor 4s steps(38) forwards;
}

@keyframes intro-escrita {
  0%   { clip-path: inset(0 100% 0 0); }
  25%  { clip-path: inset(0 0 0 0); }
  75%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes intro-cursor {
  0%   { transform: translateX(0); opacity: 1; }
  25%  { transform: translateX(var(--largura-frase, 0px)); opacity: 1; }
  75%  { transform: translateX(var(--largura-frase, 0px)); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* O logo do herói fica invisível enquanto o da intro viaja até ele.
   O JS devolve a opacidade ao encerrar; a animação aqui é a mesma rede de
   segurança do véu, para o logo voltar mesmo se o script não rodar. */
html.intro-ativa .heroi__logo {
  opacity: 0;
  animation: heroi-logo-volta 0s linear 8s forwards;
}
@keyframes heroi-logo-volta { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.intro-ativa .intro__logo { animation: none; }
  html.intro-ativa .intro__texto { animation: none; clip-path: none; }
  html.intro-ativa .intro__cursor { display: none; }
  html.intro-ativa .intro { animation: intro-seguranca 0s linear .8s forwards; }
}

/* ============================================================
   26. MOVIMENTO
   Uma gramática só: entrada com desfoque e sobe, saída exponencial.
   O atraso vem do índice, não de uma classe por elemento.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(6px);
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1),
    filter .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visivel { opacity: 1; transform: none; filter: blur(0); }

/* Título do herói: entra linha a linha, uma vez, na primeira dobra */
.entra-linha {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .34em, 0);
  animation: entra-linha .95s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + var(--atraso, 0ms));
}
@keyframes entra-linha {
  to { opacity: 1; transform: none; }
}

/* A régua do herói se desenha em vez de aparecer */
.heroi__apoio::before {
  transform-origin: top;
  animation: regua 1.1s cubic-bezier(.16, 1, .3, 1) .9s backwards;
}
@keyframes regua {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Sublinhado que cresce da esquerda nos links do rodapé */
.rodape__lista a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.16, 1, .3, 1), color .2s ease;
}
.rodape__lista a:hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .entra-linha { opacity: 1; transform: none; animation: none; }
  .heroi__apoio::before { animation: none; }

  /* A rede perde o movimento mas não perde o sentido: o pulso que viaja sai,
     e a topologia fica marcada de vez, aparecendo com um fade só. */
  .rede__fluxo { display: none; }
  .rede__traco use {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0;
    animation: rede-surge 900ms ease 300ms 1 forwards;
  }
}

@keyframes rede-surge { to { opacity: .2; } }

/* ============================================================
   27. PROJETO DETALHADO (página de Trabalhos)
   Linha horizontal em vez de card quadrado: sobra largura para o
   escopo inteiro, sem truncar, e sai da grade de cards iguais.
   ============================================================ */

.projeto-lista { display: grid; gap: var(--gap-card); margin-top: var(--s-7); }

.projeto {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--borda-esc);
  overflow: hidden;
  transition: border-color .25s ease, background-color .25s ease;
}
.projeto:hover { border-color: rgba(98, 138, 209, .55); background: rgba(255, 255, 255, .05); }
.projeto[hidden] { display: none; }

.projeto__midia { overflow: hidden; background: rgba(255, 255, 255, .04); }
.projeto__midia picture { display: block; height: 100%; }
.projeto__midia img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.projeto:hover .projeto__midia img { transform: scale(1.04); }

.projeto__corpo {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.projeto__cliente {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--txt-inv);
}
.projeto__selo {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #211202;
  background: var(--laranja);
  border-radius: 2px;
}

.projeto__dados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  font-size: var(--fs-legal);
  font-variant-numeric: tabular-nums;
}
.projeto__dados div { display: flex; gap: 8px; }
.projeto__dados dt { color: rgba(255, 255, 255, .42); }
.projeto__dados dd { margin: 0; color: rgba(255, 255, 255, .82); font-weight: 500; }

.projeto__escopo {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--txt-inv-2);
  max-width: 62ch;
}

.projeto .chips { margin-top: auto; padding-top: var(--s-2); }
.projeto .chip {
  background: transparent;
  border-color: var(--borda-esc);
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-legal);
  padding: 6px 12px;
}
.projeto .chip:hover { border-color: var(--azul); color: var(--azul-claro); }

@media (max-width: 899px) {
  .projeto { grid-template-columns: 1fr; }
  .projeto__midia { aspect-ratio: 16 / 9; }
  .projeto__corpo { padding: var(--s-5); }
}

/* ============================================================
   28. ESTEIRA DE TRABALHOS (full-bleed, arrasto nos dois lados)
   Cada projeto é UMA peça: foto e descrição viajam sempre juntas.
   O trilho é duplicado no JS e a posição é reenrolada ao cruzar
   metade, então o giro é contínuo nos dois sentidos.
   ============================================================ */

.esteira {
  position: relative;
  margin-top: var(--s-8);
}

.esteira__trilho {
  display: flex;
  gap: var(--gap-card);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* folga para qualquer par conseguir chegar ao centro da tela */
  padding-inline: max(var(--pad-lateral), calc((100vw - clamp(300px, 76vw, 960px)) / 2));
  padding-block: 40px;
  /* proximity, não mandatory: com o encaixe obrigatório o navegador
     sequestra qualquer rolagem — um scrollBy de 300px virava 976px — e o
     arraste e as setas travavam no meio da troca. */
  scroll-snap-type: x proximity;
}
.esteira__trilho::-webkit-scrollbar { display: none; }
.esteira__trilho.is-arrastando {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.esteira__trilho.is-arrastando * { pointer-events: none; }

.esteira__par {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  width: clamp(300px, 76vw, 960px);
  height: clamp(430px, 44vw, 560px);
  overflow: hidden;
  background: #4E4A45;
  color: var(--txt-inv);
  border-radius: 4px;
  content-visibility: auto;
  contain-intrinsic-size: clamp(300px, 76vw, 960px) clamp(430px, 44vw, 560px);
  /* estado de repouso = par lateral: menor, flutuando e fora de foco */
  transform: scale(.88) translateY(10px);
  filter: blur(3px);
  opacity: .48;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  transition:
    transform .7s cubic-bezier(.16, 1, .3, 1),
    filter .7s cubic-bezier(.16, 1, .3, 1),
    opacity .7s cubic-bezier(.16, 1, .3, 1),
    box-shadow .7s cubic-bezier(.16, 1, .3, 1);
}

/* o par no centro do trilho ganha tamanho cheio, nitidez e sombra funda */
.esteira__par.is-foco {
  transform: scale(1) translateY(0);
  filter: blur(0);
  opacity: 1;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
}

@media (prefers-reduced-motion: reduce) {
  .esteira__par { transform: none; filter: none; opacity: 1; transition: none; }
}

.esteira__foto { overflow: hidden; background: rgba(255, 255, 255, .05); }
.esteira__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.esteira__par:hover .esteira__foto img { transform: scale(1.04); }

.esteira__corpo {
  padding: clamp(var(--s-5), 2.4vw, var(--s-7));
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.esteira__cliente {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.esteira__cliente::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--azul);
  flex-shrink: 0;
}
.esteira__par--ativo .esteira__cliente::before { background: var(--laranja); }

.esteira__titulo {
  margin-top: auto;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 20ch;
}
.esteira__desc {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  max-width: 40ch;
}
.esteira__dados {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-5);
  font-size: var(--fs-legal);
  font-variant-numeric: tabular-nums;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.esteira__dados div { display: flex; gap: 8px; }
.esteira__dados dt { color: rgba(255, 255, 255, .42); }
.esteira__dados dd { margin: 0; color: rgba(255, 255, 255, .84); font-weight: 500; }

.esteira__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .94);
  color: #10233F;
  box-shadow: 0 8px 28px rgba(0, 20, 42, .28);
  transition: background-color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.esteira__nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.esteira__nav svg { width: 18px; height: 18px; }
.esteira__nav--ant { left: clamp(12px, 3vw, 40px); }
.esteira__nav--prox { right: clamp(12px, 3vw, 40px); }

.esteira__dica {
  margin-top: var(--s-5);
  padding-inline: max(var(--pad-lateral), calc((100vw - var(--container)) / 2));
  font-size: var(--fs-legal);
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 767px) {
  .esteira__par {
    grid-template-columns: 1fr;
    grid-template-rows: 44% 1fr;
    width: 84vw;
    height: 540px;
  }
  .esteira__nav { display: none; }
  .esteira__titulo { max-width: none; }
}

/* ============================================================
   29. DEPOIMENTOS
   Grade de 12 colunas, igual ao resto do site: cada cartão ocupa
   4 colunas, então tudo encaixa com as demais seções. Cantos mais
   suaves e um pouco de cor da própria paleta — sem sair dela.
   ============================================================ */

.depoimentos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-card);
  margin-top: var(--s-8);
}

.depoimento {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: 14px;
  background: var(--branco);
  border: 1px solid var(--borda-clara);
  transition:
    border-color .3s ease,
    transform .45s cubic-bezier(.16, 1, .3, 1),
    box-shadow .45s cubic-bezier(.16, 1, .3, 1);
}
.depoimento:hover {
  border-color: var(--azul);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27, 58, 107, .12);
}

/* Um em cada três recebe o fundo azul-claro da paleta: dá cor à seção
   sem introduzir nenhum tom novo. */
.depoimento:nth-child(3n - 1) {
  background: var(--azul-claro);
  border-color: transparent;
}
.depoimento:nth-child(3n - 1):hover { border-color: var(--azul); }

.depoimento__texto {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--txt);
  flex: 1;
}
.depoimento__autor {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(27, 58, 107, .16);
  display: flex;
  align-items: center;
  gap: 12px;
}
.depoimento__inicial {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-marca);
  color: var(--branco);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1;
}
.depoimento:nth-child(3n - 1) .depoimento__inicial { background: var(--azul-escuro); }
.depoimento__nome {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--txt);
}
.depoimento__papel {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-legal);
  color: var(--txt-2);
}

/* Assinatura da marca fechando a seção, no mesmo grid */
/* Assinatura da marca fecha a seção ocupando a linha inteira: as duas
   fileiras de depoimentos ficam simétricas e o logo ganha o destaque. */
.depoimentos__selo {
  grid-column: 1 / -1;
  border-radius: 14px;
  background: var(--navy-marca);
  color: var(--txt-inv);
  padding: var(--s-6) var(--s-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
}
.depoimentos__selo img { width: clamp(160px, 18vw, 230px); height: auto; }
.depoimentos__selo p {
  flex: 1 1 26ch;
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
}

@media (max-width: 1023px) {
  .depoimento { grid-column: span 6; }
}
@media (max-width: 639px) {
  .depoimento { grid-column: 1 / -1; }
  .depoimentos__selo { padding: var(--s-5); }
}

/* ============================================================
   30. CUPOM EM LINHA (dentro da seção de cursos)
   Sem a imagem promocional: o desconto é informação, não banner.
   ============================================================ */

.cupom-linha {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--laranja);
  background: var(--branco);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.cupom-linha__texto { max-width: 46ch; }
.cupom-linha__titulo {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.cupom-linha__apoio {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--txt-suave);
}
.cupom-linha__acao {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .cupom-linha { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   31. CERTIFICADOS: agrupados por emissor
   ============================================================ */

.cert-grupo + .cert-grupo { margin-top: var(--s-7); }
.cert-grupo__nome {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--txt-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--borda-clara);
  margin-bottom: var(--s-5);
}
.cert-grupo .cards { margin-top: 0; }

/* ============================================================
   32. ABERTURA DA HOME
   Declaração longa em duas colunas, com a primeira linha maior.
   ============================================================ */

.abertura__declaracao {
  font-size: clamp(1.375rem, 2.1vw, 2rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: 30ch;
  color: var(--txt);
}
.abertura__colunas {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
.abertura__colunas p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--txt-suave);
}
@media (max-width: 767px) {
  .abertura__colunas { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Detalhamento do projeto, revelado por "Ver mais" */
.projeto__detalhe {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
.projeto__detalhe p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--txt-inv-2);
  max-width: 68ch;
}
.projeto__detalhe .chips { margin-top: var(--s-2); padding-top: 0; }
.projeto .mais { margin-top: var(--s-2); }

/* ============================================================
   33. VALORES (Quem Somos)
   Mesma linguagem arredondada dos depoimentos, sobre o grid de
   12 colunas: duas fileiras de três, encaixando com o resto.
   ============================================================ */

.valores {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-card);
  margin-top: var(--s-7);
}

.valor {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: 14px;
  background: var(--branco);
  border: 1px solid var(--borda-clara);
  transition:
    border-color .3s ease,
    transform .45s cubic-bezier(.16, 1, .3, 1),
    box-shadow .45s cubic-bezier(.16, 1, .3, 1);
}
.valor:hover {
  border-color: var(--azul);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27, 58, 107, .12);
}
/* o mesmo ritmo de cor dos depoimentos: um em cada três recebe o azul-claro */
.valor:nth-child(3n - 1) {
  background: var(--azul-claro);
  border-color: transparent;
}
.valor:nth-child(3n - 1):hover { border-color: var(--azul); }

.valor__nome {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--txt);
}
.valor__texto {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--txt-suave);
}
/* secundário sobre superfície colorida sai do próprio azul, nunca cinza */
.valor:nth-child(3n - 1) .valor__texto { color: #3F4E68; }

@media (max-width: 1023px) { .valor { grid-column: span 6; } }
@media (max-width: 639px)  { .valor { grid-column: 1 / -1; } }

/* ============================================================
   34. PÁGINA DE CONTATO
   ============================================================ */

.canais {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-card);
  margin-top: var(--s-8);
}

.canal {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--borda-esc);
  color: var(--txt-inv);
  transition:
    background-color .3s ease,
    border-color .3s ease,
    transform .45s cubic-bezier(.16, 1, .3, 1),
    box-shadow .45s cubic-bezier(.16, 1, .3, 1);
}
.canal:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--azul);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
}

.canal__icone {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(98, 138, 209, .16);
  color: var(--azul-claro);
  transition: background-color .3s ease, color .3s ease;
}
.canal:hover .canal__icone { background: var(--azul); color: #0B1626; }
.canal__icone svg { width: 21px; height: 21px; }

.canal__rotulo {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: rgba(255, 255, 255, .58);
}
/* O e-mail tem 28 caracteres e estourava o card em --fs-lead (28px).
   Escala menor e quebra permitida em qualquer ponto seguram a string. */
.canal__valor {
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.canal__apoio {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--txt-inv-2);
  margin-top: auto;
  padding-top: var(--s-3);
}

@media (max-width: 1023px) { .canal { grid-column: span 6; } }
@media (max-width: 639px)  { .canal { grid-column: 1 / -1; padding: var(--s-5); } }

/* ---- o que incluir na mensagem ---- */
.checklist {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: var(--s-5);
}
.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--borda-clara);
}
.checklist li:last-child { border-bottom: 0; }
.checklist svg {
  width: 18px; height: 18px;
  margin-top: 3px;
  color: var(--azul-escuro);
}
.checklist strong {
  display: block;
  font-weight: 500;
  color: var(--txt);
}
.checklist span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--txt-suave);
}

/* ---- bloco de alunos ---- */
.alunos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-card);
  margin-top: var(--s-7);
}
.alunos__card {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: 14px;
  background: var(--branco);
  border: 1px solid var(--borda-clara);
  transition:
    border-color .3s ease,
    transform .45s cubic-bezier(.16, 1, .3, 1),
    box-shadow .45s cubic-bezier(.16, 1, .3, 1);
}
.alunos__card:hover {
  border-color: var(--azul);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27, 58, 107, .12);
}
.alunos__card h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.alunos__card p { font-size: var(--fs-small); color: var(--txt-suave); line-height: 1.5; }
.alunos__card .cta { margin-top: auto; padding-top: var(--s-4); }

@media (max-width: 767px) { .alunos__card { grid-column: 1 / -1; } }

/* ============================================================
   35. FILME DA HOME
   A mesma faixa cinematográfica que era foto agora é vídeo, e a
   janela por onde ele aparece abre com o scroll até romper o
   container, segura, e fecha de volta ao sair.

   A abertura é clip-path, não width/height: só recorta, nunca
   recalcula layout. O palco fica em position: sticky, e o scroll
   dentro do trecho alto vira o progresso --p (0 a 1).
   ============================================================ */

.filme {
  position: relative;
  height: 220vh;            /* trecho de rolagem que alimenta o progresso */
  background: var(--branco);
}

.filme__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.filme__janela {
  position: absolute;
  inset: 0;
  /* --ix0 e --iy0 são medidos em JS: a janela fechada tem exatamente a
     largura do container e a proporção 2,9:1 da faixa que existia antes. */
  clip-path: inset(
    calc(var(--iy0, 22vh) * (1 - var(--p, 0)))
    calc(var(--ix0, 18vw) * (1 - var(--p, 0)))
    round calc(4px * (1 - var(--p, 0)))
  );
}

.filme__midia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim para o texto: sem ele, branco sobre vídeo claro cai muito
   abaixo de 4,5:1 em vários quadros. */
.filme__janela::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 14, 28, .30) 0%, rgba(4, 14, 28, .12) 38%, rgba(4, 14, 28, .74) 100%),
    linear-gradient(90deg, rgba(4, 14, 28, .52) 0%, rgba(4, 14, 28, .10) 62%);
  pointer-events: none;
}

.filme__texto {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
  color: var(--txt-inv);
  opacity: var(--t, 0);
  transform: translate3d(0, calc((1 - var(--t, 0)) * 26px), 0);
  transition: opacity .1s linear;
}

.filme__marca {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
  margin-bottom: var(--s-4);
}

.filme__titulo {
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0, 16, 34, .35);
}

@media (max-width: 767px) {
  .filme { height: 180vh; }
  .filme__palco { height: 88vh; }
}

/* Sem movimento: a janela já nasce aberta e o vídeo não toca. */
@media (prefers-reduced-motion: reduce) {
  .filme { height: auto; }
  .filme__palco { position: static; height: clamp(420px, 70vh, 720px); }
  .filme__janela { clip-path: none; }
  .filme__texto { opacity: 1; transform: none; }
}

/* ============================================================
   36. FAIXA QUE ASCENDE
   A mesma ideia do rodapé revelado: a faixa fica presa ao pé da
   janela, atrás da seção anterior, e vai sendo descoberta de baixo
   para cima conforme o conteúdo sobe. É empilhamento puro — sem
   animação, sem timer e sem JS, então não há o que travar.

   O palco existe para limitar o alcance do sticky: sem ele, a
   faixa ficaria presa desde o topo da página, composta o tempo
   todo por trás de tudo.
   ============================================================ */

.palco-ascende { position: relative; }

/* a seção que passa por cima precisa de camada e de fundo opaco */
.palco-ascende > .secao {
  position: relative;
  z-index: 1;
}

.faixa--ascende {
  position: sticky;
  bottom: 0;
  z-index: 0;
}

/* Sem movimento, a faixa não tem por que se esconder */
@media (prefers-reduced-motion: reduce) {
  .faixa--ascende { position: relative; }
}

/* ============================================================
   37. OFERTA
   Bloco de marca no lugar do banner promocional. Mesma linguagem
   do selo de Treinamentos: painel navy, cantos suaves, logo em
   branco — para a oferta pertencer ao site em vez de parecer
   um anúncio colado por cima.
   ============================================================ */

.oferta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-6) var(--s-7);
  padding: var(--s-6) var(--s-7);
  border-radius: 14px;
  background: var(--navy-marca);
  color: var(--txt-inv);
}

.oferta__marca {
  padding-right: var(--s-7);
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.oferta__marca img { width: clamp(150px, 15vw, 196px); height: auto; }

.oferta__rotulo {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .62);
  margin-bottom: var(--s-2);
}
.oferta__titulo {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.01em;
  max-width: 26ch;
  /* A hifenização automática de PT-BR serve a coluna estreita de texto
     corrido, não a uma chamada curta: aqui ela partia "treina-mento". */
  hyphens: none;
  text-wrap: balance;
}

.oferta__acao {
  display: grid;
  justify-items: end;
  gap: var(--s-3);
}
.oferta__cupom {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.oferta__acao .copiar { color: rgba(255, 255, 255, .82); }
.oferta__acao .copiar:hover { color: var(--branco); }
.oferta__acao .botao { width: 100%; justify-content: center; }
.oferta__nota {
  font-size: var(--fs-legal);
  color: rgba(255, 255, 255, .72);   /* ~6,6:1 sobre o navy da marca */
}

@media (max-width: 1023px) {
  .oferta {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: var(--s-6);
  }
  .oferta__marca {
    padding-right: 0;
    padding-bottom: var(--s-5);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    width: 100%;
  }
  .oferta__acao { justify-items: start; width: 100%; }
  .oferta__acao .botao { width: auto; }
}