/* ==========================================================================
   Kesco Engenharia — direção "corporativo denso"
   Base tipográfica menor, muita informação por tela, grades com fio de 1px.
   Todo bloco usa o container .env — nenhum inventa alinhamento próprio.
   ========================================================================== */

:root {
  --navy:      #1c2a5e;
  --navy-esc:  #111b3f;
  --navy-cla:  #2e4184;
  --azul:      #1b5fae;
  --ambar:     #f5a623;
  --ambar-esc: #8a5a00;

  --branco:    #ffffff;
  --gelo:      #f3f5f9;
  --linha:     #dde3ee;
  --linha2:    #eef1f7;
  --txt:       #151820;
  --suave:     #545c72;

  /* TELAS LARGAS (23/09). Travado em 1720px, o conteúdo parava de crescer e
     sobrava margem dos dois lados; no banner essa margem é NAVY e virava uma
     faixa azul vazia de ~470px em 2560 — o "muito azul" de 22/09 de volta,
     multiplicado. Acima de 1920 o container volta a crescer, mas só 32% do
     que a tela cresce e com teto em 2040: crescer junto deixaria as linhas de
     texto de corpo longas demais para ler.
     ⚠ Abaixo de 1920 NADA muda — todas as medições já validadas continuam
     valendo, porque o max() segura em 1720. */
  /* ⚠ SEM TETO, de propósito (23/09, 3ª rodada). Qualquer teto em px faz o
     conteúdo parar de crescer e o resto virar BORDA: em 3400px sobravam ~580px
     de branco de cada lado. Agora o container é 88% da tela, então a margem é
     sempre ~6% — proporcional, em qualquer largura e em qualquer nível de zoom.
     O max() segura em 1720px: abaixo de ~1955px nada muda. */
  /* 88vw deixava ~8% de margem de cada lado em tela larga — a "borda sobrando"
     que o Hugo apontou. Com 96vw a margem do container cai para 2%, e quem
     dá o respiro passa a ser só o --lado. */
  --env:       max(1720px, 96vw);
  --lado:      clamp(calc(18px * var(--escala)), calc(3.4vw * var(--escala)),
                     calc((52px + var(--ext) * .006) * var(--escala)));
  --topo:      calc(72px * var(--escala));
  --r:         3px;
  --t:         .2s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font: 15px/1.6 Roboto, system-ui, -apple-system, sans-serif;
  color: var(--txt);
  background: var(--branco);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: Montserrat, system-ui, sans-serif;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}

p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
a { color: var(--azul); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 .8em; padding-left: 1.1em; }
li { margin-bottom: .25em; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

.env { width: 100%; max-width: var(--env); margin: 0 auto; padding: 0 var(--lado); }

.pular {
  position: absolute; left: -9999px; z-index: 3000;
  background: var(--ambar); color: var(--navy-esc); padding: 12px 20px; font-weight: 700;
}
.pular:focus { left: 0; }

/* rótulo técnico ------------------------------------------------------- */
.rot {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 10.5px/1 Montserrat, sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--azul); margin-bottom: 10px;
}
.rot::before { content: ''; width: 22px; height: 2px; background: var(--ambar); }
.rot-claro { color: var(--ambar); }

/* dado ainda não confirmado com o Kennedy ------------------------------- */
.falta { color: var(--ambar-esc); border-bottom: 1px dashed rgba(138,90,0,.5); }
/* sobre fundo navy o âmbar escuro cai para 2,8:1 — aqui vai o tom claro */
.sec-navy .falta, .nums .falta,
.util .falta, .rod .falta, .cta .falta, .hero .falta
  { color: #ffd68a; border-bottom-color: rgba(255,214,138,.55); }

/* ==========================================================================
   Barra utilitária + cabeçalho
   ========================================================================== */

.util { background: var(--navy-esc); color: rgba(255,255,255,.78); font-size: calc(12px * var(--escala)); }
.util .env { display: flex; align-items: center; gap: 8px 26px; min-height: 36px; flex-wrap: wrap; }
.util a { color: rgba(255,255,255,.78); display: inline-flex; align-items: center; gap: 7px; }
.util a:hover { color: var(--ambar); }
.util svg { width: 13px; height: 13px; fill: currentColor; }
.util .dir { margin-left: auto; display: flex; gap: 16px; align-items: center; }

.topo { background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 100; }
.topo .env { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); height: var(--topo); }
.marca { flex-shrink: 0; }
.marca img { height: calc(40px * var(--escala)); width: auto; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 1px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 7px 11px;
  font: 600 calc(12.5px * var(--escala))/1 Montserrat, sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--suave); white-space: nowrap;
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--ambar); }

.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  font: 700 calc(12.5px * var(--escala))/1 Montserrat, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t);
}
.bt svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.bt-ambar { background: var(--ambar); color: var(--navy-esc); }
.bt-ambar:hover { background: #ffb840; color: var(--navy-esc); }
.bt-navy { background: var(--navy); color: var(--branco); }
.bt-navy:hover { background: var(--navy-esc); color: var(--branco); }
.bt-linha { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.45); }
.bt-linha:hover { background: var(--branco); color: var(--navy); border-color: var(--branco); }
.bt-linha-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.bt-linha-navy:hover { background: var(--navy); color: var(--branco); }

.sanduba {
  display: none; width: 40px; height: 40px; padding: 0;
  background: var(--gelo); border: none; border-radius: var(--r); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.sanduba span { display: block; width: 18px; height: 2px; background: var(--navy); transition: transform var(--t), opacity var(--t); }
.sanduba[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sanduba[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sanduba[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* faixas finas ---------------------------------------------------------- */
/* Duas ocorrências: clientes logo ABAIXO do banner e segmentos ACIMA do
   rodapé. Mesmo desenho, só muda de que lado fica a borda. */
.segfaixa { background: var(--gelo); border-bottom: 1px solid var(--linha); font-size: 12.5px; }
/* a do topo fica logo abaixo do banner: sem borda em cima, que encostaria no navy */
.segfaixa .env { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; padding-block: 11px; }
/* a do topo leva os LOGOS: mesma .cli de sempre, só ocupando o resto da linha */
.segfaixa-logos .env { padding-block: 13px; }
.cli-faixa { flex: 1 1 420px; gap: 12px 26px; }
.segfaixa b { font: 700 10.5px/1 Montserrat, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.segfaixa a, .segfaixa span { color: var(--navy); font-weight: 500; }
.segfaixa a:hover { color: var(--azul); }
/* A do pé encosta no rodapé navy e, em 7 das 8 páginas, também no CTA navy.
   Clara ali, virava uma tira de luz espremida entre dois blocos escuros —
   então vai escura, fechando o rodapé como a .util abre o cabeçalho. */
.segfaixa-pe { background: var(--navy-esc); border: 0; }
.segfaixa-pe b { color: rgba(255,255,255,.58); }
.segfaixa-pe a, .segfaixa-pe span { color: rgba(255,255,255,.78); }
.segfaixa-pe a:hover { color: var(--ambar); }
/* separa do CTA, que é do mesmo navy */
.segfaixa-pe .env { border-top: 1px solid rgba(255,255,255,.12); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--navy-esc); }
.hero-t {
  padding: clamp(32px, 3.4vw, 60px) var(--lado);
  padding-left: max(var(--lado), calc((100vw - var(--env)) / 2 + var(--lado)));
  display: flex; flex-direction: column; justify-content: center;
}
.hero-t h1 { color: var(--branco); font-size: clamp(1.55rem, 2.3vw, 2.4rem); font-weight: 800; max-width: 20ch; }
.hero-t p { color: rgba(255,255,255,.8); max-width: 54ch; margin-bottom: 18px; }
.hero-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-f { position: relative; min-height: 334px; background: var(--navy); }
.hero-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ALTURA PADRÃO DE TODOS OS BANNERS (21/09, pedido do Hugo) -------------
   Antes havia três alturas: hero, hero-curto e hero-alto.

   Padronizar pelo padding NÃO funciona: com o mesmo respiro, a altura ainda
   sai do CONTEÚDO do texto, que muda de página para página — a home tem 3
   linhas de título, 3 de parágrafo e 2 botões; Trabalhe Conosco tem bem menos.
   Medido com padding igual: home 437px, Trabalhe Conosco 271px.

   Por isso a altura vai num min-height EXPLÍCITO. Calibrado por medição para
   bater com a home: 437px em 1440 e 487px em 1920. Um único valor em vw não
   serve (daria 576px em 1920), daí o vw + px fixo. */
@media (min-width: 1001px) {
  /* O teto de 500px fazia o banner PARAR de crescer em ~2050px enquanto a
     largura seguia: em 3200 virava uma tira de 3200x500 e a foto chegava a
     3,2:1, cortando quase tudo. O teto subiu para 600px. Abaixo de 2050 a
     conta é a mesma de sempre — 437px em 1440, 487px em 1920. */
  .hero { min-height: calc(max(380px, calc(10.4vw + 287px)) * var(--escala)); }
}
/* empilhado: a foto é a mesma em todas, então o banner já sai uniforme */

/* O carrossel de Serviços mantém só a TIPOGRAFIA maior; a altura é a padrão. */
.hero-alto .hero-t h1 { font-size: clamp(1.75rem, 2.8vw, 2.9rem); max-width: 18ch; }
.hero-alto .hero-t p { font-size: 1.05rem; }

/* Tela baixa (celular deitado, janela curta): sem isto o banner passa de 1,5
   tela antes de o conteúdo começar. Vale para TODOS os heros.
   ATENÇÃO: este bloco tem de vir DEPOIS das regras acima. Ele já esteve antes,
   e a regra de h1 seguinte, de mesma especificidade, o anulava em silêncio. */
@media (max-height: 560px) {
  .hero-f { min-height: clamp(180px, 36vh, 285px); }
  .hero-t { padding-block: clamp(24px, 3vw, 38px); }
  .hero-alto .hero-t h1 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
}

/* carrossel do hero ---------------------------------------------------- */
/* As fotos ficam empilhadas e só a opacidade é animada — um keyframe único,
   escalonado por animation-delay NEGATIVO, para a primeira já estar visível
   em t=0 em vez de entrar com corte seco. Sem JS e sem dependência.
   Keyframe CSS é seguro aqui: não há <mask> no caminho (armadilha 7.8). */
.hero-carr .hero-f { overflow: hidden; }
.carr-f {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; z-index: 1;
  animation: carr var(--carr-ciclo, 25s) linear infinite;
}
/* Os @keyframes carr e carr-t NÃO ficam aqui: são calculados por
   hero_carrossel() a partir do número de fotos e saem no <head> da página.
   Fixos, eles só valiam para 5 fotos, enquanto o ciclo e os atrasos derivam de
   len(fotos) — acrescentar uma sexta quebrava a animação em silêncio. */

/* Títulos que trocam junto com as fotos.
   Empilhados numa única célula de grade: a altura do h1 passa a ser a do título
   mais alto, então nada pula quando um troca pelo outro. Mesmos atrasos das
   fotos, o que mantém os dois em sincronia. */
/* A pilha reserva a altura do maior título e alinha todos ao topo,
   mantendo constante o espaço entre o rótulo e o título de cada slide. */
.carr-h1 { display: grid; align-items: start; }
.carr-h1 > .carr-t { grid-area: 1 / 1; }
.carr-t { opacity: 0; animation: carr-t var(--carr-ciclo, 25s) linear infinite; }

/* 23/09: o texto de apoio do banner também gira, um por serviço. Mesmo
   keyframe dos títulos (texto sobre texto não pode cruzar) e mesmos atrasos. */
.carr-desc { display: grid; align-items: start; }
.carr-desc > .carr-d { grid-area: 1 / 1; }
.carr-d { opacity: 0; animation: carr-t var(--carr-ciclo, 25s) linear infinite;
          color: rgba(255,255,255,.8); }

/* Texto só para leitor de tela e buscador: dá nome acessível ao h1, já que os
   títulos giratórios são aria-hidden. Fora do fluxo, não afeta a altura. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Botão de pausa — WCAG 2.2.2 (nível A): conteúdo que se move sozinho por mais
   de 5s, junto de outro conteúdo, precisa de um jeito de parar. O
   prefers-reduced-motion NÃO supre: é preferência de sistema, vem desligada por
   padrão no Windows e no Android, e o critério exige mecanismo no próprio
   conteúdo. Feito com checkbox + irmão `~`, sem JS e sem :has(), para funcionar
   também com o JavaScript desligado e em navegador mais antigo. */
.carr-pausa { position: absolute; width: 1px; height: 1px; opacity: 0;
              margin: 0; pointer-events: none; }
.carr-bt {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(17, 27, 63, .82); color: var(--branco);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t);
}
.carr-bt:hover { background: var(--navy-esc); }
.carr-bt::before { content: '❙❙'; font-size: 12px; letter-spacing: 1px; }
.carr-pausa:checked ~ .hero-f .carr-bt::before { content: '▶'; font-size: 13px; }
.carr-pausa:focus-visible ~ .hero-f .carr-bt { outline: 3px solid var(--ambar); outline-offset: 2px; }
.carr-pausa:checked ~ .hero-f .carr-f,
.carr-pausa:checked ~ .hero-t .carr-t,
.carr-pausa:checked ~ .hero-t .carr-d { animation-play-state: paused; }

/* quem pede menos movimento vê só a primeira foto e o primeiro título */
@media (prefers-reduced-motion: reduce) {
  .carr-f, .carr-t, .carr-d { animation: none; opacity: 0; }
  .carr-bt, .carr-pausa { display: none; }   /* parado: não há o que pausar */
  .hero-f .carr-f:first-of-type { opacity: 1; }
  /* 23/09: era `.carr-t:first-of-type` e NUNCA casava. O primeiro <span> do
     <h1> é o .so-leitor (título fixo, oculto para quem enxerga), então
     nenhum .carr-t é o primeiro do seu tipo — e o banner de Atuação ficava
     SEM TÍTULO VISÍVEL para quem usa "menos movimento". O irmão adjacente
     resolve sem depender da contagem de spans. */
  .carr-h1 .so-leitor + .carr-t,
  .carr-desc .so-leitor + .carr-d { opacity: 1; }
}
/* hero-curto guarda só a TIPOGRAFIA menor das páginas internas — o título da
   home continua sendo o maior. A altura é a padrão, igual em todas. */
.hero-curto .hero-t h1 { font-size: clamp(1.45rem, 2vw, 2.05rem); }
.hero-curto .hero-t p { margin-bottom: 0; }

/* ==========================================================================
   Faixa de números
   ========================================================================== */

.nums { background: var(--navy); color: var(--branco); border-bottom: 1px solid rgba(255,255,255,.14); }
.nums .env {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: rgba(255,255,255,.14);
  border-inline: 1px solid rgba(255,255,255,.14);
  padding: 0;
}
.num { background: var(--navy); padding: 22px clamp(14px, 1.2vw, 20px); }
.nums .env > .num:first-child { padding-left: var(--lado); }
.nums .env > .num:last-child { padding-right: var(--lado); }
.num b { display: block; font: 800 clamp(1.45rem, 2vw, 2.05rem)/1 Montserrat, sans-serif; color: var(--ambar); margin-bottom: 5px; }
.num span { font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.4; display: block; }

/* ==========================================================================
   Seções, grades e células
   ========================================================================== */

.sec { padding: clamp(32px, 3.2vw, 56px) 0; }
.sec-gelo { background: var(--gelo); }
.sec-navy { background: var(--navy); color: rgba(255,255,255,.84); }
.sec-navy h2, .sec-navy h3 { color: var(--branco); }
.sec-navy .cel h3, .sec-navy .portf-g h3 { color: var(--navy); }
.sec-navy .cel p, .sec-navy .cel ul { color: var(--suave); }

.cabsec { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.cabsec > div { max-width: 82ch; }
.cabsec h2 { font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 800; margin: 0; }
/* variante com <h1>: em Quem Somos não há banner, então o h1 abre a 1ª seção */
.cabsec.tit h1 { font-size: clamp(1.75rem, 2.9vw, 2.9rem); font-weight: 800;
                 margin: 0; letter-spacing: -.02em; line-height: 1.1; }
/* respiro entre o h1 e o destaque, que agora vem logo abaixo dele */
.cabsec.tit { margin-bottom: clamp(16px, 1.6vw, 26px); }
.cabsec.tit > div { max-width: none; }
.cabsec.tit h1 + p { color: var(--suave); margin-top: .55em; max-width: 62ch; }
.cabsec h2 + p { color: var(--suave); margin-top: .5em; }
.sec-navy .cabsec h2 + p { color: rgba(255,255,255,.78); }
.cabsec .link {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12px/1 Montserrat, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
}
/* sem isto o SVG da seta herda tamanho do viewBox e vira um ícone gigante */
.cabsec .link svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.cabsec .nota { font-size: 12.5px; color: var(--suave); }
.sec-navy .cabsec .nota { color: rgba(255,255,255,.7); }

.gr { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.cel { background: var(--branco); padding: 20px; }
.cel-num { display: block; font: 800 1.05rem/1 Montserrat, sans-serif; color: var(--ambar-esc); margin-bottom: 9px; }
.cel h3 { font-size: 1rem; margin-bottom: .4em; }
.cel p { color: var(--suave); font-size: 13.5px; }
.cel ul { color: var(--suave); font-size: 13px; margin-bottom: 0; padding-left: 1em; }

.celf { padding: 0; display: flex; flex-direction: column; }
.celf figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gelo); }
.celf figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.celf:hover figure img { transform: scale(1.04); }
.celf .in { padding: 18px 20px; flex: 1; }

/* ficha de produto: mostra a imagem inteira */
.celficha figure { background: var(--branco); padding: 10px; }
.celficha figure img { object-fit: contain; }
.celficha:hover figure img { transform: none; }
.cod { display: block; font: 700 11.5px/1 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ambar-esc); margin-bottom: 9px; }

/* ==========================================================================
   Tabelas
   ========================================================================== */

/* logo animado — Quem Somos --------------------------------------------- */
/* Reprodução nativa do pacote "Animação de logo Kesco": SVG inline + estes
   keyframes. Sem React, sem Babel, sem CDN — nenhum arquivo novo para subir.
   Os tempos vêm do kesco-reel.jsx original.
   O estado PARADO já é o logo montado: se o JS não rodar, se o observador
   falhar ou se a pessoa pedir menos movimento, a página mostra o logo inteiro.
   A classe .tocar (posta pelo menu.js quando a seção entra na tela) é o que
   rebobina e toca — uma vez só. */
/* Abertura: título e destaque em largura cheia; abaixo, o texto do corpo em
   UMA coluna à esquerda e o logo animado grande à direita, ao lado dele.
   O texto não é dividido em duas colunas — foi pedido assim. */
/* metade do espaço para o texto, metade para a animação */
.qs-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(26px, 3.4vw, 70px); align-items: center; }
/* justificado, com hifenização: sem ela, coluna estreita + justificado abre
   rios de espaço entre as palavras */
.qs-texto { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.klogo { width: 100%; }
.klogo svg { width: 100%; height: auto; display: block; overflow: visible; }
.kl-letra { transform-box: view-box; transform-origin: var(--ox) 170px; }
.kl-eng { letter-spacing: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .klogo.tocar .kl-camera { animation: kl-camera 3.6s cubic-bezier(.33, 1, .68, 1) both; }
  /* O arco NÃO é animado por CSS. Ele vive dentro de um <mask>, e o navegador
     não invalida o repinte do elemento mascarado quando a animação CSS mexe no
     stroke-dashoffset da máscara: o logo congela no primeiro quadro, que é
     "nada revelado" — some da página de vez. Mudança feita por JavaScript
     invalida corretamente, então quem desenha o arco é o menu.js. */
  .klogo.tocar .kl-letra  { animation: kl-surge .94s cubic-bezier(.37, 0, .63, 1) var(--atraso) both,
                                       kl-junta 1.3s cubic-bezier(.16, 1, .3, 1) 1.3s both; }
  .klogo.tocar .kl-eng    { animation: kl-surge 1s cubic-bezier(.37, 0, .63, 1) 2.05s both,
                                       kl-tracking 1.3s cubic-bezier(.16, 1, .3, 1) 2.05s both; }
}

@keyframes kl-surge  { from { opacity: 0; } to { opacity: 1; } }
@keyframes kl-junta  { from { transform: translateX(var(--dx)) scale(1.03); }
                       to   { transform: translateX(0) scale(1); } }
@keyframes kl-tracking { from { letter-spacing: 22px; } to { letter-spacing: 2px; } }
@keyframes kl-camera { from { transform: scale(1.05); } to { transform: scale(1); } }

/* Quem Somos ------------------------------------------------------------ */
/* frase de abertura, com filete âmbar */
/* largura cheia: o bloco de abertura ocupa a lateral inteira, como pedido */
.destaque { font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.5;
            color: var(--navy); font-weight: 500;
            padding-left: 18px; border-left: 3px solid var(--ambar);
            margin-bottom: clamp(22px, 2.2vw, 34px); }

/* MISSÃO E VISÃO — opção B do preview previews-fotos/quem-somos.html, 23/09.
   Eram duas colunas densas sobre navy: um paredão de ~650px de texto
   justificado, que o Hugo reprovou. Viraram duas faixas, cada uma com o rótulo
   grande à esquerda e o texto em medida de leitura à direita.
   O Hugo pediu as DUAS no mesmo fundo claro — a missão não fica mais em navy —,
   então as duas convivem na mesma seção e o que as separa é um fio. */
.faixa-d { display: grid; grid-template-columns: 230px 1fr; gap: clamp(24px, 3vw, 56px);
           align-items: start; }
.faixa-d + .faixa-d { margin-top: clamp(26px, 2.8vw, 44px);
                      padding-top: clamp(26px, 2.8vw, 44px);
                      border-top: 1px solid var(--linha); }
.faixa-d .rotulo { border-top: 2px solid var(--ambar); padding-top: 16px; }
.faixa-d .rotulo b { display: block; font: 800 calc((26px + var(--ext) * .005837) * var(--escala))/1.1 Montserrat, sans-serif;
                     color: var(--navy); letter-spacing: -.02em; }
.faixa-d p { font-size: 16.5px; line-height: 1.7; }

/* VALORES em linha, no lugar dos quatro cartões estreitos */
.valor-linha { display: grid; grid-template-columns: 64px 278px 1fr; gap: 20px;
               align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linha); }
.valor-linha:last-child { border-bottom: 1px solid var(--linha); }
.valor-linha b { font: 800 calc((26px + var(--ext) * .005837) * var(--escala))/1 Montserrat, sans-serif; color: var(--ambar); }
.valor-linha h3 { margin: 0; font-size: var(--t5); }
.valor-linha p { margin: 0; color: var(--suave); }

/* ofícios mobilizados em campo */
.oficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
           column-gap: clamp(20px, 2.4vw, 46px); border-top: 1px solid var(--linha); }
.oficios > div { padding: 15px 0 16px; border-bottom: 1px solid var(--linha); }
.oficios b { display: block; color: var(--navy);
             font: 700 13px/1.4 Montserrat, sans-serif; margin-bottom: 5px; }
.oficios span { font-size: 13.5px; line-height: 1.55; color: var(--suave); }

.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--branco); }
.tab caption { text-align: left; font: 700 11.5px/1 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); padding: 0 0 9px; }
.tab th, .tab td { border: 1px solid var(--linha); padding: 9px 12px; text-align: left; vertical-align: top; }
.tab thead th { background: var(--navy); color: var(--branco); border-color: var(--navy); font: 700 11.5px/1.3 Montserrat, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.tab tbody tr:nth-child(even) { background: #fafbfd; }
.tab td.v { font-weight: 600; color: var(--navy); white-space: nowrap; }
.tab td.obs { color: var(--suave); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px); align-items: start; }

/* ==========================================================================
   Bloco texto + foto
   ========================================================================== */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.2vw, 56px); align-items: center; }
.duo.inv .duo-foto { order: 2; }
.duo-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.duo-txt h2 { font-size: clamp(1.25rem, 1.9vw, 1.8rem); font-weight: 800; }
.duo-txt p, .duo-txt ul { color: var(--suave); }
.duo-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ==========================================================================
   Portfólio e clientes
   ========================================================================== */

.portf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.portf-g { background: var(--branco); padding: 20px; }
.portf-g h3 { font-size: .98rem; margin-bottom: .6em; padding-bottom: .5em; border-bottom: 1px solid var(--linha2); }
.portf-g ul { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--suave); }
.portf-g li { padding-left: 15px; position: relative; }
.portf-g li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--ambar); }

.cli { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 26px; }
/* Logos SEMPRE coloridos (21/09, pedido do Hugo). Antes ficavam em cinza com
   opacidade .6 e só coloriam no hover.

   Os 9 arquivos são JPEG sem transparência: o fundo branco está gravado na
   imagem e aparecia como um retângulo branco sobre o cinza da faixa. O
   mix-blend-mode: multiply resolve sem reprocessar arquivo nenhum — branco
   multiplicado pelo fundo dá o próprio fundo, então o retângulo some, e as
   cores do logo escurecem só ~5% contra o cinza claro. */
.cli img { height: 38px; width: auto; max-width: 112px; object-fit: contain;
           mix-blend-mode: multiply; }

/* ==========================================================================
   Chamada final
   ========================================================================== */

.cta { background: var(--navy); color: var(--branco); padding: clamp(30px, 3.2vw, 52px) 0; }
.cta .env { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 50px); flex-wrap: wrap; }
.cta h2 { color: var(--branco); font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 800; margin-bottom: .3em; max-width: 22ch; }
.cta p { color: rgba(255,255,255,.8); max-width: 58ch; margin: 0; }
.cta-acoes { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

/* ==========================================================================
   Rodapé
   ========================================================================== */

/* RODAPÉ EM BARRA — opção C do preview (previews-fotos/rodape.html), 23/09.
   275px → 227px → 135px. A primeira redução foi só de respiros; a segunda veio
   de DEITAR os links.
   ⚠ Medido antes de decidir: quem ditava a altura era a coluna "Empresa", com
   quatro links empilhados. Tirar a frase institucional sob a marca, sozinho,
   não mudava UM pixel — ela custava 88px só porque empurrava a coluna da
   marca, e saiu junto. Se alguém quiser o rodapé em colunas de novo, o custo
   volta pela mesma porta. */
.rod { background: var(--navy-esc); color: rgba(255,255,255,.72); padding: 22px 0 0; font-size: 13.5px; }
.rod a { color: rgba(255,255,255,.72); }
.rod a:hover { color: var(--ambar); }
.rod h4 { color: var(--branco); font: 700 11.5px/1 Montserrat, sans-serif; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 13px; }
.rod-g { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding-bottom: 16px; }
.rod-marca { display: flex; align-items: center; gap: 20px; }
/* os sete links numa faixa só; encostam à direita e quebram sozinhos */
.rod-links { margin-left: auto; }
.rod-links ul { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; }
.rod-links li { margin: 0; }
.rod ul { list-style: none; padding: 0; margin: 0; }
.rod li { margin-bottom: .34em; }
.rod-logo img { height: 34px; width: auto; }
/* o contato agora vive na base, deitado ao lado do copyright */
.rod-contato { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.rod-contato li { display: flex; gap: 9px; align-items: flex-start; margin: 0; }
.rod-contato svg { width: 15px; height: 15px; fill: var(--ambar); flex-shrink: 0; margin-top: .3em; }
.rod-social { display: flex; gap: 8px; }
.rod-social a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.22); color: var(--branco); transition: background var(--t), border-color var(--t), color var(--t); }
.rod-social a:hover { background: var(--ambar); border-color: var(--ambar); color: var(--navy-esc); }
.rod-social svg { width: 16px; height: 16px; fill: currentColor; }
.rod-base { border-top: 1px solid rgba(255,255,255,.12); padding: 10px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1400px) { .nav a { padding: 7px 8px; font-size: 11.5px; letter-spacing: .03em; } }

@media (max-width: 1240px) {
  .sanduba { display: flex; order: 3; }
  .topo .env > .bt { order: 2; margin-left: auto; }
  .nav {
    position: absolute; top: var(--topo); left: 0; right: 0; order: 4; margin: 0;
    background: var(--branco); border-bottom: 1px solid var(--linha);
    box-shadow: 0 14px 30px rgba(17,27,63,.14);
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .nav.aberto { max-height: 560px; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--lado) 16px; }
  .nav a { padding: 12px 0; font-size: 13px; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ambar); padding-left: 12px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .nums .env { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-t { padding-left: var(--lado); order: 2; }
  /* empilhado: a MESMA altura de foto em todas as páginas */
  .hero-f { order: 1; min-height: clamp(230px, 40vh, 380px); }
  .g3, .portf, .dupla { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .duo.inv .duo-foto { order: 0; }
  .nums .env { grid-template-columns: repeat(2, 1fr); }
  .nums .env > .num { padding-inline: var(--lado); }
  .qs-corpo { grid-template-columns: 1fr; gap: 26px; }
  .faixa-d { grid-template-columns: 1fr; gap: 18px; }
  .valor-linha { grid-template-columns: 52px 1fr; gap: 6px 16px; }
  .valor-linha p { grid-column: 2; }
  /* tabelas rolam dentro de si, sem empurrar a página */
  .tab { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; }
  .tab caption { white-space: normal; }
}

@media (max-width: 640px) {
  .g2, .g3, .g4, .portf, .dupla { grid-template-columns: 1fr; }
  .nums .env { grid-template-columns: repeat(2, 1fr); }
  /* no celular a barra empilha: marca em cima, links embaixo, à esquerda */
  .rod-g { gap: 18px; }
  .rod-links { margin-left: 0; width: 100%; }
  .rod-links ul { justify-content: flex-start; }
  .marca img { height: 34px; }
  .util .dir { width: 100%; margin-left: 0; }
  .hero-acoes .bt, .cta-acoes .bt { width: 100%; }
  .cli { justify-content: center; gap: 18px 24px; }
  .cli img { height: 30px; max-width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ======================================================================
   PROJETO 2 — acréscimos da reestruturação de 22/09
   ====================================================================== */

/* Trabalhe Conosco e Contato vivem na barra utilitária no desktop. No
   celular a barra fica apertada e o menu sanduíche é o único caminho, então
   os dois reaparecem dentro dele. A ordem importa: a regra base vem antes
   do media query, senão o display:none venceria no celular. */
.so-movel { display: none; }

/* Navegação interna de Atuação: a página reúne quatro assuntos longos. */
.navsec {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  padding-block: 18px 0;
}
.navsec a {
  font: 700 11px/1 Montserrat, sans-serif; letter-spacing: .09em;
  text-transform: uppercase; color: var(--navy);
  border: 1px solid var(--linha); border-radius: 3px; padding: 9px 13px;
}
.navsec a:hover { border-color: var(--ambar); color: var(--azul); }

/* Segmentos como linha de marcadores na home, sem a faixa cheia. */
.taglinks { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.taglinks a {
  font: 500 13px/1 Roboto, sans-serif; color: var(--navy);
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 3px; padding: 10px 15px;
}
.taglinks a:hover { border-color: var(--ambar); color: var(--azul); }

/* O que reunir antes de pedir proposta, dentro do CTA navy. */
.cta-lista {
  margin: 14px 0 0; padding-left: 1.1em; columns: 2; column-gap: 34px;
  color: rgba(255,255,255,.82); font-size: 13.5px;
}
.cta-lista li { margin-bottom: 4px; break-inside: avoid; }

/* Os cards da home e as fichas de divisor levam link próprio; o .link só
   estava estilizado dentro de .cabsec. */
.cel .link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font: 700 12px/1 Montserrat, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--azul);
}
.cel .link svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.cel .link:hover { color: var(--navy); }
.celficha .cod { display: block; margin-bottom: .5em; }

@media (max-width: 1240px) {
  .so-movel { display: block; }
}
@media (max-width: 640px) {
  .cta-lista { columns: 1; }
}

/* Os rótulos do documento de 22/09 são frases ("Solicitar proposta de
   serviço", "Enviar currículo pelo WhatsApp"), não uma palavra. Com o
   white-space: nowrap do .bt, os botões do CTA passavam da largura do
   celular — 670px de conteúdo numa tela de 375. Aqui eles quebram linha e
   ocupam a largura toda. */
@media (max-width: 720px) {
  .cta-acoes { flex-wrap: wrap; width: 100%; }
  .cta-acoes .bt {
    white-space: normal; text-align: center; justify-content: center;
    flex: 1 1 100%; line-height: 1.3;
  }
}

/* ======================================================================
   PROJETO 3 — densidade: as páginas do projeto 2 ficaram longas demais
   (Atuação chegou a 5,5 telas). Nada de conteúdo foi removido; o que muda
   é ritmo vertical, agrupamento de seções e as abas de Atuação.
   ====================================================================== */

/* 1. Ritmo vertical. Em 1440 o respiro de seção cai de 46px para 34px —
   cerca de 24px por seção, ~280px por página. */
.sec { padding: clamp(26px, 2.4vw, 42px) 0; }
.cabsec { margin-bottom: 16px; }

/* 2. Sub-bloco dentro de uma seção: evita abrir seção nova só para um
   assunto curto, que custaria o respiro inteiro duas vezes. */
.bloco-par {
  margin-top: clamp(22px, 2vw, 34px);
  padding-top: clamp(18px, 1.6vw, 26px);
  border-top: 1px solid var(--linha);
}
.bloco-par h3 {
  font: 800 clamp(1.05rem, 1.35vw, 1.3rem)/1.2 Montserrat, sans-serif;
  margin: 0 0 .5em;
}
.bloco-par > p { color: var(--suave); max-width: 82ch; margin-bottom: 14px; }
.bloco-par .taglinks { margin-bottom: 14px; }
.bloco-par .qs-texto p:last-child { margin-bottom: 0; }

/* 3. Abas de Atuação. Sem JS, os quatro painéis aparecem empilhados como
   antes — o conteúdo nunca depende do script. Com JS, o menu interno vira
   tablist e só um painel fica visível. */
.abas[data-abas-on] .navsec { border-bottom: 2px solid var(--linha); padding-bottom: 0; gap: 4px; }
.abas[data-abas-on] .navsec a {
  border: 0; border-radius: 0; margin-bottom: -2px;
  border-bottom: 2px solid transparent; padding: 12px 14px;
}
.abas[data-abas-on] .navsec a[aria-selected="true"] {
  color: var(--navy); border-bottom-color: var(--ambar);
}
.abas[data-abas-on] .navsec a:hover { color: var(--azul); }
.abas[data-abas-on] .painel { padding-top: clamp(20px, 2vw, 32px); }

/* 4. Etapas do atendimento: quatro passos em faixa, sem a moldura de card. */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 26px; }
.passo { display: flex; gap: 12px; align-items: flex-start; }
.passo > b {
  font: 800 .95rem/1 Montserrat, sans-serif; color: var(--ambar-esc);
  border: 1px solid var(--linha); border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; flex: none;
}
.passo h3 { font-size: .95rem; margin: 5px 0 .35em; }
.passo p { color: var(--suave); font-size: 13px; margin: 0; }

@media (max-width: 1000px) {
  .passos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .passos { grid-template-columns: 1fr; }
  .abas[data-abas-on] .navsec { overflow-x: auto; flex-wrap: nowrap; }
  .abas[data-abas-on] .navsec a { white-space: nowrap; }
}

/* O .link só estava estilizado dentro de .cabsec e .cel. Solto num
   .bloco-par, o SVG da seta herdava o tamanho do viewBox e virava um ícone
   de mil pixels — a home saltou de 3.268px para 4.497px por causa disso.
   Regra base, para qualquer .link em qualquer lugar. */
.link {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12px/1 Montserrat, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--azul);
}
.link svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.link:hover { color: var(--navy); }

/* 5. O bloco foto+texto é o que mais pesa: 4/3 numa coluna de ~800px dá
   600px de foto, e ele aparece em toda página. Em 16/9 cai para ~450px,
   150px por página, sem perder a presença da imagem — o texto ao lado
   raramente passava disso e sobrava respiro dos dois lados. */
.duo-foto img { aspect-ratio: 16 / 9; }

/* 6. Portfólio: cinco grupos em três colunas davam duas fileiras, com a
   segunda quase vazia. Em telas largas cabem os cinco numa fileira só. */
@media (min-width: 1200px) {
  .portf { grid-template-columns: repeat(5, 1fr); }
  .portf-g { padding: 18px 16px; }
}

/* ======================================================================
   Texto de corpo justificado (pedido do Hugo, 22/09)
   ====================================================================== */

/* Vale para parágrafos e listas de conteúdo — não para títulos, rótulos,
   botões, menus nem células de tabela, que são dado, não corpo.
   A hifenização é obrigatória aqui: em coluna estreita, justificado sem
   hífen abre rios de espaço branco entre as palavras. Ela depende do
   lang="pt-BR" do <html>, que o gerador já emite.
   Linha final de parágrafo não é justificada pelo próprio CSS, então
   texto de uma linha só fica igual ao que era. */
.hero p,
.cabsec p,
.cel p, .cel ul,
.celf .in p,
.duo-txt p, .duo-txt ul,
.passo p,
.bloco-par p,
.faixa-d p,
.cta p, .cta-lista,
.portf-g ul,
.qs-texto,
.rod p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* ======================================================================
   Banner: o texto ocupando o painel (22/09)
   ====================================================================== */

/* O h1 estava preso em 20ch e o parágrafo em 54ch, dentro de uma coluna que
   em 1920 tem ~790px úteis: sobravam uns 340px de navy vazio à direita, e o
   título quebrava em três linhas sem precisar.
   O teto continua existindo — sem nenhum, a linha chegaria a ~88ch em tela
   larga, medida em que o olho perde a linha seguinte. */
.hero-t h1 { max-width: 30ch; text-wrap: balance; }
.hero-t p { max-width: min(78ch, 100%); }
.hero-alto .hero-t h1 { max-width: 24ch; }

/* 23/09: o Hugo pediu METADE PARA CADA LADO em todos os banners. Isto
   desfaz o 46/54 de 22/09, que dava mais espaço à foto para reduzir o navy
   vazio. A coluna de texto volta a 50%, e quem evita o vazio agora são os
   limites de medida do h1 e do parágrafo, logo acima.
   NÃO reintroduzir proporção diferente sem falar com ele. */

/* O h1 de Quem Somos ficou longo com o texto de 23/09 e quebrava deixando
   uma palavra sozinha na última linha. Mesmo tratamento do banner. */
.cabsec.tit h1 { text-wrap: balance; }

/* Segmentos na home: cards de uma linha (opção B, escolhida em 23/09).
   Antes eram seis botões que só repetiam o nome do setor. */
.segcards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--linha); border: 1px solid var(--linha);
}
.segcard { background: var(--branco); padding: 17px 20px; display: block; }
.segcard h3 { font: 700 .98rem/1.2 Montserrat, sans-serif; color: var(--navy); margin: 0 0 .35em; }
.segcard p { margin: 0; color: var(--suave); font-size: 13px; line-height: 1.5; text-align: left; }
.segcard:hover { background: #fbfcfe; }
.segcard:hover h3 { color: var(--azul); }

@media (max-width: 900px)  { .segcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .segcards { grid-template-columns: 1fr; } }

/* ======================================================================
   Quem Somos: a animação vira banner (23/09, variante 2 do mockup)
   ====================================================================== */

/* ======================================================================
   Banner de Quem Somos: a animação da marca (23/09)
   ======================================================================
   Sentido CLARO → AZUL (escolha do Hugo): começa em gelo com a logo navy e
   termina em navy com a logo branca, por dissolução entre 3,70s e 4,80s.

   Terminar escuro resolve o acabamento sozinho: a faixa fica igual aos
   banners das outras seis páginas e se separa da seção branca de baixo sem
   precisar de borda.

   O estado PARADO do HTML é o FINAL. Sem JS, ou com "menos movimento", o
   banner já está navy com a marca branca montada. A camada clara do começo
   só entra quando o script roda. */
.faixa-marca {
  position: relative; overflow: hidden;
  background: var(--navy-esc);
}
.mk-camada { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mk-ini { display: none; background: var(--gelo); }   /* só com JS */
.mk-cam { width: min(78%, 1040px); }
.mk-cam svg { width: 100%; height: auto; display: block; }

@media (min-width: 1001px) {
  .faixa-marca { min-height: calc(max(380px, calc(10.4vw + 287px)) * var(--escala)); }
}
@media (max-width: 1000px) {
  .faixa-marca { min-height: 240px; }
  .mk-cam { width: 86%; }
}
/* quem pede menos movimento fica no estado final, que já é o do HTML */
@media (prefers-reduced-motion: reduce) { .mk-ini { display: none !important; } }

/* O corpo desceu para uma seção própria, em coluna única de largura
   inteira (pedido do Hugo). Linha cheia pede tipo maior e entrelinha mais
   solta, senão o olho perde o começo da linha seguinte. */
.corpo-largo { font-size: 17px; line-height: 1.8; text-align: justify; hyphens: auto; }
.corpo-largo p { margin: 0 0 1em; }
.corpo-largo p:last-child { margin-bottom: 0; }
.sec > .env > .rot { margin-bottom: 14px; }

@media (max-width: 1000px) {
  .corpo-largo { font-size: 16px; line-height: 1.75; }
}

/* ======================================================================
   23/09 — subabas visíveis e menu suspenso em Atuação
   ====================================================================== */

/* 1. As subabas pareciam links soltos. Viram controle segmentado: caixa
   cinza com as quatro opções, e a ativa preenchida em navy. */
.abas[data-abas-on] .navsec {
  background: var(--gelo);
  border: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  border-radius: 4px;
  padding: 5px;
  gap: 4px;
}
.abas[data-abas-on] .navsec a {
  border: 0; border-radius: 3px; margin: 0;
  padding: 11px 16px; color: var(--navy); background: transparent;
}
.abas[data-abas-on] .navsec a:hover { background: var(--branco); color: var(--azul); }
.abas[data-abas-on] .navsec a[aria-selected="true"] {
  background: var(--navy); color: var(--branco);
}
.abas[data-abas-on] .navsec a[aria-selected="true"]:hover { color: var(--branco); }

/* 2. Menu suspenso do item Atuação. Sem JS: abre no hover e no foco do
   teclado. Clicar no "Atuação" continua indo para a página. */
.nav .tem-sub { position: relative; }
.nav .submenu {
  /* display explícito: .nav ul é flex, e sem isto o submenu sai em linha */
  display: block;
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 248px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--branco); border: 1px solid var(--linha);
  box-shadow: 0 16px 34px rgba(17,27,63,.16);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav .tem-sub:hover > .submenu,
.nav .tem-sub:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav .submenu a {
  padding: 10px 16px; text-transform: none; letter-spacing: 0;
  font: 500 13px/1.3 Roboto, sans-serif; color: var(--navy); white-space: nowrap;
}
.nav .submenu a:hover { background: var(--gelo); color: var(--azul); }

@media (max-width: 1240px) {
  /* no celular não há hover: a lista fica aberta, recuada sob o item */
  .nav .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 6px 14px; min-width: 0;
    border-left: 2px solid var(--linha);
    margin-left: 2px;
  }
  .nav .submenu a { padding: 9px 0; }
  .nav.aberto { max-height: 760px; }   /* cabem os 4 itens a mais */
}
@media (max-width: 640px) {
  .abas[data-abas-on] .navsec { border-radius: 0; }
}

/* ======================================================================
   23/09 — texto de corpo ocupando a largura da página
   ======================================================================
   O Hugo apontou parágrafos parando no meio da página. Eram tetos em `ch`
   herdados da medida de leitura. Ficam apenas nos TÍTULOS, onde o limite
   serve ao equilíbrio da quebra, e no parágrafo do banner, que divide o
   painel com a foto.

   No .cabsec o `flex: 1 1 auto` é necessário: sem ele, o bloco de texto sem
   teto empurra o link da direita para a linha de baixo. */
.cabsec > div { max-width: none; flex: 1 1 auto; }
.cabsec.tit h1 + p { max-width: none; }
.bloco-par > p { max-width: none; }
.faixa-d p { max-width: none; }
.cta p { max-width: none; }

/* ======================================================================
   23/09 — a barra de subabas precisava se separar da faixa de clientes
   ======================================================================
   Estava em --gelo logo abaixo da faixa de clientes, que também é --gelo:
   as duas se fundiam e ninguém entendia que eram abas. Agora a barra é
   branca sobre a página, com sombra, rótulo próprio e respiro acima. */
.abas[data-abas-on] .abas-rot { display: flex; margin: clamp(26px, 2.8vw, 44px) 0 10px; }
.abas .abas-rot { display: none; }        /* sem JS não há abas, só âncoras */

.abas[data-abas-on] .navsec {
  /* quatro colunas iguais: encostadas à esquerda, pareciam links soltos */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: var(--branco);
  border: 1px solid var(--linha); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(17, 27, 63, .09);
  padding: 6px;
}
.abas[data-abas-on] .navsec a {
  text-align: center; padding: 13px 10px; white-space: normal;
}
.abas[data-abas-on] .navsec a:hover { background: var(--gelo); color: var(--azul); }
.abas[data-abas-on] .navsec a[aria-selected="true"] { background: var(--navy); color: var(--branco); }

@media (max-width: 760px) {
  /* na largura de celular, quatro colunas espremem o texto: vira rolagem */
  .abas[data-abas-on] .navsec {
    display: flex; overflow-x: auto; flex-wrap: nowrap; border-radius: 0;
  }
  .abas[data-abas-on] .navsec a { white-space: nowrap; }
}

/* Parágrafo de apoio entre a abertura da seção e os cards. */
.lead { color: var(--suave); margin: 0 0 18px; text-align: justify; hyphens: auto; }

/* ======================================================================
   ESCALA TIPOGRÁFICA ÚNICA — 23/09
   ======================================================================
   Antes havia 10 tamanhos de título e 7 de corpo, três deles quase
   idênticos (17 / 17,3 / 16,8) sem diferença de função. O Hugo escolheu:
   corpo 17px, texto de card 14px, títulos em cinco níveis.

   Valores conferidos em 1440px. Os clamp() seguram os extremos: nada
   encolhe abaixo do mínimo no celular nem cresce demais em tela larga.
   ====================================================================== */
:root {
  /* ⚠ TELAS MUITO LARGAS / ZOOM OUT (23/09).
     Toda a tipografia congelava acima de ~1600px: os clamp batiam no teto e
     corpo, card e destaque eram px fixos. Resultado: quanto maior a tela (ou
     menor o zoom), menor o texto parecia — a página encolhia sozinha.

     --ext é quanto a tela passa de 1920px, limitado a 980px (ou seja, para de
     crescer em 2.900px). Todo tamanho de LEITURA cresce a partir dele, ~22%
     no total. Abaixo de 1920 --ext vale 0 e NADA muda: os valores são
     idênticos aos já validados.

     ⚠ NÃO tentar um fator adimensional do tipo
     `clamp(1, calc(1 + (100vw - 1920px) * .00023), 1.22)`: somar número a
     comprimento é INVÁLIDO, a declaração inteira cai e o texto despenca para
     o 15px herdado do body — sem erro nenhum no console. Foi o que aconteceu
     na primeira tentativa. Aqui tudo é comprimento: `Npx + var(--ext) * k`.

     ⚠ A INTERFACE ficou de fora de propósito — menu, botões, abas e rótulos
     seguem em px fixo, como decidido em 23/09: são controles, não leitura. */
  /* ⚠ SEM TETO também aqui. Com teto, a partir de 2.900px o texto voltava a
     congelar enquanto a tela crescia — o defeito de novo, só que mais longe. */
  --ext: max(0px, calc(100vw - 1920px));

  /* ESCALA GERAL — 85%, escolhida pelo Hugo em 23/09 no preview
     previews-fotos/escala.html. Os 17px de corpo eram decisão dele de 23/09 de
     manhã, a partir de um espécime; revendo na página inteira, achou grande.

     O fator multiplica BASE e INCLINAÇÃO de todo token, então a proporção
     escolhida em 1440 se mantém em qualquer largura — foi o que ele pediu.
     Para mexer na escala depois, mude SÓ este número.

     ⚠ `--escala` é um NÚMERO puro, e por isso pode entrar em calc(). Não
     confundir com a tentativa que falhou antes: um custom property contendo
     `clamp(1, calc(1 + ...px * k), 1.22)` mistura número e comprimento, é
     inválido, e derruba a declaração inteira em silêncio. */
  --escala: .85;

  --t1: clamp(calc(28px * var(--escala)), calc(2.5vw * var(--escala)),
              calc((40px + var(--ext) * .008982) * var(--escala)));   /* 30,6px em 1440 */
  --t2: clamp(calc(24px * var(--escala)), calc(2vw * var(--escala)),
              calc((32px + var(--ext) * .007186) * var(--escala)));   /* 24,5px */
  --t3: clamp(calc(21px * var(--escala)), calc(1.8vw * var(--escala)),
              calc((28px + var(--ext) * .006288) * var(--escala)));   /* 22px */
  --t4: clamp(calc(18px * var(--escala)), calc(1.35vw * var(--escala)),
              calc((21px + var(--ext) * .004716) * var(--escala)));   /* 16,5px */
  --t5: calc((17px + var(--ext) * .003817) * var(--escala));          /* título de card */
  --corpo: calc((17px + var(--ext) * .003817) * var(--escala));       /* 14,45px em 1440 */
  --corpo-card: calc((14px + var(--ext) * .003143) * var(--escala));  /* 11,9px */
  --destaque: calc((19px + var(--ext) * .004266) * var(--escala));    /* 16,15px */
}

/* --- T1: h1 que abre a página --- */
.hero-inicio .hero-t h1,
.hero-alto .hero-t h1,
.cabsec.tit h1 { font-size: var(--t1); }

/* --- T2: banner das páginas internas --- */
.hero-curto .hero-t h1 { font-size: var(--t2); }

/* --- T3: título de seção, de bloco foto+texto e do CTA --- */
.cabsec h2, .duo-txt h2, .cta h2 { font-size: var(--t3); }

/* --- T4: sub-bloco dentro de uma seção --- */
.bloco-par h3 { font-size: var(--t4); }

/* --- T5: título de card, de grupo e de passo --- */
.cel h3, .celf .in h3, .portf-g h3, .segcard h3, .passo h3 { font-size: var(--t5); }

/* --- corpo: texto corrido em qualquer seção --- */
/* .hero-alto .hero-t p vinha com 1.05rem e especificidade maior — sem
   repeti-lo aqui, o banner de Serviços ficava em 16,8px fora da escala. */
.cabsec p, .duo-txt p, .duo-txt ul, .cta p, .lead,
.corpo-largo, .qs-texto, .faixa-d p, .hero-t p, .hero-alto .hero-t p, .carr-d {
  font-size: var(--corpo);
  line-height: 1.7;
}
.destaque { font-size: var(--destaque); }

/* --- corpo de card: o menor tamanho do site, e só aqui --- */
.cel p, .cel ul, .celf .in p, .segcard p, .portf-g ul, .valor-linha p,
.tab td, .tab th, .cta-lista, .rod p, .rod ul a {
  font-size: var(--corpo-card);
  line-height: 1.65;
}
.tab thead th { line-height: 1.3; }

/* Enquadramento das tres fotos de "Experiencia em campo". Os arquivos guardam
   o QUADRO INTEIRO e quem escolhe o pedaco visivel e o CSS — regra do Hugo de
   23/09: nao cortar demais no disco. O card e 16:9; duas dessas fotos sao em
   pe (960x1280) e so 42% da altura cabe, entao a porcentagem nao e detalhe.
   Os valores saem do preview em previews-fotos/, onde ele os escolheu com o
   slider, e sao o mesmo numero que o slider mostrava.
   Ao trocar qualquer uma dessas fotos, reveja o valor aqui: ele foi calibrado
   para a foto ANTIGA e continuaria valendo, em silencio, para a nova. */
.celf img[src*="soldagem-flange-tubo"]              { object-position: center 45%; }
.celf img[src*="montagem-estrutura-munck"]          { object-position: center 35%; }
.celf img[src*="posicionamento-carretel-tubulacao"] { object-position: center 55%; }
/* Mesmo caso no card "Linhas de tubulação" de Serviços: foto em pé (960x1280)
   num card 16:9, só 42% da altura cabe. Comparei 35 / 50 / 65%: a 35% e a 50%
   o capacete do profissional fica cortado no meio; a 65% entram a válvula
   inteira com os manômetros E as costas do uniforme com a marca Kesco. */
.celf img[src*="valvula-linha-tubulacao"]           { object-position: center 65%; }

/* 2º slide do carrossel de Serviços: foto em pé (1086x1448) num painel que vai
   de 1,52 (em 1280px) a 1,97 (em 1920px) — aparece de 49% a 38% da altura.
   A porcentagem NÃO muda o tamanho da janela, só a posição: para mostrar mais
   do profissional da frente, que está na parte de BAIXO da foto, o valor sobe.
   Esteve em 45%, onde só aparecia o topo do capacete — o Hugo pediu mais gente.
   Comparei 45/55/62/70 em 1920 e em 1440: a 62% entram a cabeça, os ombros e a
   marca no uniforme e o carretel continua inteiro; a 70% o topo do carretel
   some em 1920. */
.carr-f[src*="montagem-valvula-flangeada"]          { object-position: center 62%; }

/* torre-escadas-noturna é QUADRADA (1254x1254) e o assunto é uma torre
   vertical: num card 16:9 aparecem 56% da altura e no banner de 51% (1920) a
   61% (1440). Nenhum recorte mostra a torre inteira. O Hugo escolheu, no
   preview previews-fotos/estruturas.html, o TOPO da torre nos dois lugares.
   A regra pega as TRÊS ocorrências da foto em servicos.html — card "Estruturas
   metálicas", 5º slide do banner e card "Energia" dos segmentos: é a mesma foto
   com o mesmo problema, e enquadrá-la de dois jeitos na mesma página destoaria.
   Para separar o card dos segmentos, prefixar com `#segmentos`. */
.celf img[src*="torre-escadas-noturna"],
.carr-f[src*="torre-escadas-noturna"]               { object-position: center 0%; }

/* Revisão de 24/09/2026 — documento de alterações */
.cta.cta-gelo { background: var(--gelo); color: var(--navy); }
.cta.cta-gelo h2, .cta.cta-gelo p { color: var(--navy); }
.cta.cta-gelo p + p { margin-top: 1em; }
.cta.cta-gelo .bt-linha { color: var(--navy); border-color: var(--navy); }
.cta.cta-gelo .bt-linha:hover { background: var(--navy); color: white; }
.hero-f .carr-f.carr-inteira { object-fit: contain; background: var(--gelo); }

/* Produtos: o conteúdo inteiro gira como um bloco, sem linhas vazias reservadas. */
.produto-slides { display: grid; align-items: center; }
.produto-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden;
  animation: produto-texto var(--carr-ciclo) linear infinite; }
.hero-produtos .produto-slide h2 { color: var(--branco); font-size: var(--t2);
  font-weight: 800; max-width: 30ch; text-wrap: balance; line-height: 1.15; margin: 0 0 .55em; }
.hero-produtos .produto-slide p { margin: 0; }
.carr-pausa:checked ~ .hero-t .produto-slide { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .produto-slide { animation: none; opacity: 0; visibility: hidden; }
  .produto-slide:first-child { opacity: 1; visibility: visible; }
}

/* Imagens de Produtos preenchem o painel sem faixas de fundo. */
.hero-produtos .hero-f .carr-f { object-fit: cover; object-position: center; }

/* Trocadores: imagem integral sobre fundo contínuo, sem ampliar nem recortar. */
.hero-produtos .carr-trocadores { background: #fff; display: flex; align-items: center; justify-content: center; container-type: size; }
.hero-produtos .carr-trocadores img { position: static; width: min(100cqw, 266.6667cqh); height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent); }

/* Título da chamada de Serviços usa toda a largura disponível. */
#proposta-servicos .env > div:first-child { width: 100%; }
#proposta-servicos h2 { max-width: none; text-wrap: wrap; }

/* Respiro uniforme entre a descrição e as ações de todos os banners. */
.hero .hero-acoes { margin-top: 24px; }
.hero .hero-t p:has(+ .hero-acoes) { margin-bottom: 0; }

/* Cotação de Produtos: informações organizadas em três grupos. */
#cotacao-componentes .env { display: block; }
#cotacao-componentes h2 { max-width: none; text-wrap: wrap; }
#cotacao-componentes .cta-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; columns: auto; list-style: none; padding: 0; margin: 26px 0 0; color: var(--navy); }
#cotacao-componentes .cta-lista li { margin: 0; text-align: left; }
#cotacao-componentes .cta-lista strong { display: block; margin-bottom: 6px; }
#cotacao-componentes .cta-acoes { margin-top: 30px; }
@media (max-width: 700px) {
  #cotacao-componentes .cta-lista { grid-template-columns: 1fr; gap: 18px; }
}

/* Buchas de bronze: recorte aproximado para ocupar todo o banner. */
.hero-f .carr-f[src*="buchas-bronze-usinadas"] { object-fit: cover; object-position: center 52%; }

/* Ações da cotação: larguras iguais e conjunto centralizado. */
#cotacao-componentes .cta-acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
#cotacao-componentes .cta-acoes .bt { width: 100%; justify-content: center; }
@media (max-width: 700px) {
  #cotacao-componentes .cta-acoes { grid-template-columns: 1fr; width: 100%; }
}

/* Distribuição das ações na largura da seção de cotação. */
@media (min-width: 701px) {
  #cotacao-componentes .cta-acoes {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: space-evenly;
    column-gap: clamp(32px, 6vw, 120px);
  }
  #cotacao-componentes .cta-acoes .bt { width: min(100%, max(285px, 25vw)); justify-self: center; }
}
@media (max-width: 700px) {
  #cotacao-componentes .cta-acoes { row-gap: 18px; }
}

/* Cotação: ações alinhadas à esquerda, com larguras iguais. */
#cotacao-componentes .cta-acoes {
  width: max-content;
  max-width: 100%;
  margin-inline: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  gap: 14px;
}
#cotacao-componentes .cta-acoes .bt { width: 100%; justify-self: stretch; }
@media (max-width: 700px) {
  #cotacao-componentes .cta-acoes { width: 100%; grid-template-columns: 1fr; }
}

/* Serviços: botões de proposta com dimensões iguais, alinhados à esquerda. */
#proposta-servicos .cta-acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: max-content;
  max-width: 100%;
  gap: 14px;
  margin-inline: 0;
}
#proposta-servicos .cta-acoes .bt { width: 100%; justify-content: center; }
@media (max-width: 700px) {
  #proposta-servicos .cta-acoes { width: 100%; grid-template-columns: 1fr; }
}



/* Fabricação: opção aprovada, do desenho à entrega. */
#controle .fabricacao-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
#controle .fabricacao-etapas article { background: white; padding: 28px; }
#controle h2 { font-size: var(--t3); max-width: none; }
#controle .fabricacao-etapas h3 { font-size: var(--t5); margin-bottom: 10px; }
#controle .fabricacao-etapas p { color: var(--suave); font-size: var(--corpo); line-height: 1.7; }
#controle .fabricacao-qualidade-link { margin-top: 28px; }
@media (max-width: 800px) {
  #controle .fabricacao-etapas { grid-template-columns: 1fr; gap: 24px; }
}

/* Botões dos banners: dimensões do botão de Fabricação. */
.hero .hero-acoes .bt {
  width: 308px;
  max-width: 100%;
  min-height: 41px;
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .hero .hero-acoes .bt { width: 100%; }
}

/* Contato do rodapé: canais com ícones, sem exibir telefone ou e-mail. */
.rod-canais { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:14px; }
.rod-canais>span { color:white; font-weight:600; margin-right:8px; }
.rod-canais a { display:inline-flex; align-items:center; gap:8px; color:white; padding:7px 0; }
.rod-canais svg { width:17px; height:17px; fill:var(--ambar); }
.rod-canais a:hover { color:var(--ambar); }
.rod-base { row-gap:18px; }
@media(max-width:600px) { .rod-canais { width:100%; } .rod-canais>span { width:100%; } }

/* Trabalhe Conosco: opção Essencial aprovada. */
.carreiras h1 { font-size:var(--t1); line-height:1.2; margin-bottom:22px; }
.carreiras h2 { font-size:var(--t3); margin:0 0 14px; }
.carreiras p { font-size:var(--corpo); line-height:1.7; color:var(--suave); }
.cv-split { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.cv-split h2 { margin-top:28px; }
.cv-photo { width:100%; height:430px; object-fit:cover; }
.cv-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:24px; }
.cv-actions .bt { min-height:44px; line-height:1.4; text-align:center; }
.carreiras .cv-note { font-size:12px; margin:18px 0 0; max-width:70ch; }
.cv-minimal { padding-block:64px; }
.cv-lead { max-width:85ch; }
.cv-rule { border-top:1px solid var(--linha); margin:36px 0; }
.cv-two { display:grid; grid-template-columns:1fr 1.2fr; gap:70px; }
.cv-areas { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:20px; }
.cv-areas span { font-size:var(--corpo); color:var(--navy); padding:8px 0; border-bottom:1px solid var(--linha); }
.cv-strip { background:var(--navy-esc); padding:44px 0; }
.cv-strip h1 { color:white; }
.cv-strip .rot { color:var(--ambar); }
.cv-strip p { color:rgba(255,255,255,.8); max-width:90ch; margin:0; }
.cv-three { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:center; }
.cv-apply { background:white; padding:32px; }
@media(max-width:900px){.cv-split,.cv-two,.cv-three{grid-template-columns:1fr;gap:30px}.cv-photo{height:280px}.cv-minimal{padding-block:36px}}
@media(max-width:600px){.cv-actions{grid-template-columns:1fr}.cv-apply{padding:24px}.cv-photo{height:230px}}


/* Página curta de carreiras: rodapé acompanha o limite inferior da tela. */
body:has(main .carreiras) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:has(main .carreiras) > main { flex: 1 0 auto; }
body:has(main .carreiras) > header,
body:has(main .carreiras) > footer { flex-shrink: 0; }

/* Rodapé compacto, com menos respiro na linha de contato. */
.rod { padding-top: 16px; }
.rod-g { padding-bottom: 12px; }
.rod-base { padding-block: 6px; row-gap: 8px; }
.rod-canais { column-gap: 14px; row-gap: 4px; }
.rod-canais a { padding-block: 2px; }

/* Cabeçalho de celular: chamada compacta, sem afetar desktop. */
@media (max-width: 600px) {
  .topo .env > .bt { padding: 8px 10px; font-size: 9px; letter-spacing: .025em; gap: 5px; white-space: nowrap; }
  .topo .env > .bt svg { width: 12px; height: 12px; }
}

/* Copyright visível apenas acima da largura de celular. */
@media (max-width: 600px) { .rod-copyright { display: none; } }