@charset "utf-8";
/* ============================================================
   ACT · ARCONTEC — Folha de estilo
   Direção: "editorial técnico premium" — rigor de grade suíça
   + profundidade em camadas, fios de 1px, numerais fantasma,
   movimento scroll-driven discreto.
   Paleta e tipografia: Manual de Marca ACT v1.0/2026 (4.5 e 4.6).
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --act-azul: #0E2A4D;
  --act-azul-2: #1E5AA8;
  --act-vermelho: #E31E24;
  --act-cinza: #687280;
  --act-cinza-claro: #F2F4F7;
  --act-branco: #FFFFFF;

  --act-azul-900: #071628;
  --act-azul-800: #0B2340;
  --act-azul-700: #123566;
  --act-azul-clara: #8FBBF0;
  --act-azul-2-hover: #17488a;
  --act-vermelho-hover: #c4171c;
  --act-borda: #E4E8EE;
  --act-borda-forte: #D3DAE4;
  --act-fio-esc: rgba(255, 255, 255, .14);
  --act-fio-esc-2: rgba(255, 255, 255, .07);

  --cor-fundo: var(--act-branco);
  --cor-fundo-alt: var(--act-cinza-claro);
  --cor-texto: #16233A;
  --cor-texto-suave: #4E5866;
  --cor-inv: var(--act-branco);
  --cor-inv-suave: rgba(255, 255, 255, .78);
  --cor-foco: var(--act-azul-2);

  --fonte-titulo: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-corpo: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --txt-xs: .75rem;
  --txt-sm: .875rem;
  --txt-base: 1rem;
  --txt-lg: 1.125rem;
  --txt-xl: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --txt-2xl: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --txt-3xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --txt-4xl: clamp(2.15rem, 1.4rem + 3.6vw, 4rem);
  --txt-mega: clamp(3.5rem, 2rem + 11vw, 11rem);

  --lh-titulo: 1.12;
  --lh-corpo: 1.68;
  --ls-eyebrow: .16em;
  --ls-titulo: -.025em;

  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 2.5rem; --sp-6: 3rem;   --sp-8: 4rem;   --sp-10: 5rem;  --sp-12: 6rem;
  --sp-secao: clamp(4rem, 2rem + 7vw, 8.5rem);

  --largura-max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --h-cabecalho: 78px;

  /* Raio por HIERARQUIA, não o mesmo valor em tudo (anti-padrão 2.10):
       raio-1 (2px)  utilitários — botões, chips, inputs
       raio-2 (4px)  blocos de conteúdo — cards, painéis
       raio-3 (8px)  mídia — figuras e galeria, o único nível "macio"
     Sombra é exceção, não padrão: só mídia elevada, lightbox e popup.
     Card comum se separa por borda de 1px, não por sombra. */
  --raio-1: 2px;
  --raio-2: 4px;
  --raio-3: 8px;
  --fio: 1px solid var(--act-borda);
  --sombra-media: 0 10px 30px -14px rgba(14, 42, 77, .16);
  --sombra-alta: 0 30px 70px -24px rgba(7, 22, 40, .45);

  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 460ms;
  --dur-4: 720ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  --z-header: 100; --z-nav: 110; --z-cookie: 150; --z-lightbox: 200;
  --z-preview: 80;
  --alvo-min: 44px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-cabecalho) + 12px);
  -webkit-text-size-adjust: 100%;
  /* Reserva a barra de rolagem: sem isso `100vw` fica ~8px maior que a largura
     real do conteúdo, e o recuo do hero (que usa 100vw) sai do alinhamento da
     grade do header. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: var(--act-azul-2); text-decoration: none; }
a:hover { color: var(--act-azul-2-hover); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; border-radius: var(--raio-1); }

/* WCAG 2.2 SC 2.4.11 — Focus Not Obscured: ao tabular, o header sticky cobriria
   o elemento que acabou de receber foco. O recuo vale para qualquer focável,
   não só para âncoras (por isso não basta o scroll-padding do html). */
a, button, input, select, textarea, summary, [tabindex] {
  scroll-margin-top: calc(var(--h-cab-real, var(--h-cabecalho)) + 16px);
}
.hero :focus-visible, .qualidade :focus-visible, .cta :focus-visible,
.rodape :focus-visible, .autoridade :focus-visible, .nav :focus-visible { outline-color: var(--act-branco); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ancora { display: block; height: 0; }

.skip-link {
  position: absolute; left: var(--sp-2); top: -100px; z-index: 999;
  padding: .75rem 1.25rem; background: var(--act-azul); color: var(--act-branco);
  font-family: var(--fonte-titulo); font-weight: 600;
  border-radius: var(--raio-2); transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: var(--sp-2); color: var(--act-branco); }

/* ---------- LAYOUT BASE ---------- */
.envelope {
  width: 100%; max-width: var(--largura-max);
  margin-inline: auto; padding-inline: var(--gutter);
}
.secao { position: relative; padding-block: var(--sp-secao); }
.secao--alt { background: var(--cor-fundo-alt); }

/* Eyebrow: numeral + fio técnico */
.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--act-azul-2); margin-bottom: var(--sp-3);
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 20px;
  background: currentColor; opacity: .32;
  transform-origin: left; transform: scaleX(var(--fio-escala, 1));
  transition: transform var(--dur-4) var(--ease-out-expo) 120ms;
}
[data-on] .eyebrow::after, .eyebrow[data-on]::after { --fio-escala: 1; }
.eyebrow--claro { color: var(--act-azul-clara); }
.eyebrow__num {
  display: inline-block; padding: .18rem .5rem;
  background: var(--act-vermelho); color: var(--act-branco);
  border-radius: var(--raio-1); letter-spacing: .06em;
}

.titulo-secao { font-size: var(--txt-3xl); color: var(--act-azul); }
.qualidade .titulo-secao, .cta .titulo-secao { color: var(--cor-inv); }
.intro-secao {
  margin-top: var(--sp-3); max-width: 62ch;
  font-size: var(--txt-lg); color: var(--cor-texto-suave);
}
.qualidade .intro-secao { color: var(--cor-inv-suave); }

/* Numeral fantasma — elemento gráfico permitido (grade/linha técnica) */
.ghost-num {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: var(--txt-mega); line-height: .78;
  letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 1px var(--act-borda-forte);
  pointer-events: none; user-select: none;
}

/* ---------- BOTÕES ---------- */
/* Sem brilho de varredura, sem sombra colorida, sem levantar no hover:
   o botão muda de cor e a seta avança. Nada além disso. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--alvo-min); padding: .85rem 1.6rem;
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 600;
  text-align: center; border-radius: var(--raio-1);
  border: 2px solid transparent; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
.btn--g { padding: 1.05rem 2rem; font-size: var(--txt-base); }
.btn__seta {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-2) var(--ease);
}
.btn:hover .btn__seta { transform: translateX(4px); }

.btn--acento { background: var(--act-vermelho); color: var(--act-branco); }
.btn--acento:hover { background: var(--act-vermelho-hover); color: var(--act-branco); }
.btn--fantasma { border-color: rgba(255, 255, 255, .45); color: var(--act-branco); }
.btn--fantasma:hover { background: rgba(255, 255, 255, .1); border-color: var(--act-branco); color: var(--act-branco); }
.btn--claro { background: var(--act-branco); color: var(--act-azul); }
.btn--claro:hover { background: var(--act-cinza-claro); color: var(--act-azul); }
.btn--linha { border-color: var(--act-azul); color: var(--act-azul); }
.btn--linha:hover { background: var(--act-azul); color: var(--act-branco); }

/* ============================================================
   HEADER — minimalista, padrão `planeta-navbar-transparente-sobre-hero`
   Barra fina sem faixa de fundo própria: nasce dentro do hero. Sem "fake
   button" de CTA no topo (o padrão é explícito) — e repetir o vermelho de
   acento aqui anularia o destaque do CTA do hero (Von Restorff, ux-ui §5.5).
   Ao rolar, vira azul sólido: o logo segue branco, sem troca de versão.
   ============================================================ */
/* `fixed`, não `sticky`: sticky ocupa espaço no fluxo, então o header
   transparente revelaria o fundo branco da página em vez do hero — logo e
   links brancos sobre branco. Fixo, ele sai do fluxo e sobrepõe o hero de
   verdade. Quem compensa a altura é o próprio hero (e `.pagina-topo` nas
   páginas internas), com padding-top. */
.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.cabecalho.rolou {
  background: var(--act-azul);
  border-bottom-color: var(--act-fio-esc);
}
.cabecalho__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: var(--h-cabecalho);
}
.cabecalho__marca { display: flex; align-items: center; flex: 0 0 auto; }
.logo { width: auto; height: 34px; transition: height var(--dur-2) var(--ease); }
.cabecalho.rolou .logo { height: 30px; }

/* barra de progresso: cor sólida, não gradiente — gradiente decorativo é um dos
   sinais de "cara de IA" e aqui não comunica nada além do próprio avanço */
.progresso {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: transparent; overflow: hidden;
}
.progresso__barra {
  height: 100%; width: 100%;
  background: var(--act-vermelho);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

.nav { display: flex; align-items: center; }
.nav__lista { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__lista a {
  position: relative; display: inline-block; padding: .5rem 0;
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color var(--dur-1) var(--ease);
}
/* fio de 1px, não barra de 2px: menos peso visual */
.nav__lista a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.nav__lista a:hover, .nav__lista a.ativo { color: var(--act-branco); }
.nav__lista a:hover::after, .nav__lista a.ativo::after { transform: scaleX(1); }

/* No desktop o header não tem CTA. Ele existe só dentro do menu off-canvas,
   onde é a única ação disponível. */
.nav__cta { display: none; white-space: nowrap; }

.hamburguer {
  display: none; width: var(--alvo-min); height: var(--alvo-min);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--raio-2);
}
.hamburguer span {
  display: block; width: 24px; height: 2px; background: var(--act-branco);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  background: rgba(7, 22, 40, .6); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.nav-overlay.visivel { opacity: 1; }

/* ============================================================
   HERO — padrão `bricknet-hero-fullbleed-escuro-cta-esquerda` (design-bank)
   Foto real cobrindo todo o hero sob overlay, texto à esquerda em ~metade da
   largura, faixa alta mas SEM forçar 100vh, e elemento diagonal criando
   assimetria no próprio fundo. O overlay é pontual: denso onde o texto está,
   aberto do lado oposto para a foto manter textura em vez de virar cor chapada.
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  background: var(--act-azul); color: var(--cor-inv);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.hero__fundo { position: absolute; inset: 0; z-index: -2; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* Overlay pontual, não gradiente uniforme de canto a canto. As paradas foram
   escolhidas medindo contraste: onde o texto termina (~52% da largura) o alfa
   ainda garante 6,5:1 para branco no pior caso da foto. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(92deg,
    rgba(7, 22, 40, .95) 0%,
    rgba(7, 22, 40, .88) 38%,
    rgba(7, 22, 40, .42) 68%,
    rgba(7, 22, 40, .18) 100%);
}

/* Véu curto no topo, só na altura do header. O padrão do Planeta conta com a
   foto já ser escura o bastante para os links brancos; a nossa clareia à
   direita, exatamente onde o menu fica. Sem isso os links reprovariam contraste. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: calc(var(--h-cab-real, var(--h-cabecalho)) + 40px);
  background: linear-gradient(rgba(7, 22, 40, .82), rgba(7, 22, 40, 0));
  pointer-events: none;
}

/* A cunha diagonal cita o "A" do logo e é o que cria a assimetria no FUNDO —
   não é ornamento solto flutuando sobre o conteúdo. */
.hero__diagonal {
  position: absolute; right: 0; bottom: 0; z-index: -1;
  width: min(34vw, 420px); aspect-ratio: 1;
  background: var(--act-vermelho); opacity: .9;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.hero__inner {
  flex: 1 1 auto;
  /* `align-items: flex-start` + `margin-block: auto` no filho, e NÃO
     `align-items: center`: quando o conteúdo é mais alto que o espaço livre,
     a centralização de flex transborda para os DOIS lados e o texto vai para
     trás do header fixo. Margem `auto` centraliza quando há folga e resolve
     para zero quando não há — nunca fica negativa. */
  display: flex; align-items: flex-start;
  /* o topo compensa o header fixo, que sobrepõe o hero */
  padding-top: calc(var(--h-cab-real, var(--h-cabecalho)) + clamp(1.5rem, 4vh, 3rem));
  padding-bottom: clamp(2.5rem, 7vh, 5.5rem);
}
/* Metade da largura, alinhado à esquerda: o padrão é explícito em não
   centralizar sobre a imagem, que é o hero mais genérico que existe. */
.hero__texto { width: 100%; max-width: min(52%, 40rem); margin-block: auto; }

/* Não força 100vh (nota do padrão), mas garante que hero + faixa de fatos
   caibam na janela e ainda sobre um resquício da próxima seção. */
@media (min-width: 60.0625em) {
  /* O desconto de 150px é o resquício da próxima seção que fica à vista na base
     — contra a "ilusão de completude" do `ux-ui-boas-praticas` §3.2. Como é um
     valor fixo subtraído de `dvh`, o resquício fica constante em qualquer altura
     de janela, em vez de crescer junto. O teto de 70vh evita um hero exagerado
     em monitores muito altos. */
  /* O header agora é fixo e sobrepõe o hero, então NÃO se desconta a altura
     dele aqui — o hero já começa em y=0. Só o resquício de 150px. */
  .hero { min-height: min(88vh, calc(100dvh - 150px)); }
}

/* Título menor e menos denso que o `--txt-4xl`: em duas linhas ele precisa
   caber no hero junto com sub, CTAs e a faixa de fatos, dentro da viewport. */
.hero__titulo {
  /* também limitado pela altura da janela, pelo mesmo motivo da imagem */
  font-size: clamp(1.8rem, min(1.15rem + 2.4vw, 5.6vh), 3.15rem);
  font-weight: 700; color: var(--cor-inv); line-height: 1.08;
  max-width: 22ch;
}

/* Faixa de fatos: substitui o selo flutuante por informação verificável */
.hero__fatos { flex: 0 0 auto; border-top: 1px solid var(--act-fio-esc); background: var(--act-azul-900); }
.fatos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fato {
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3);
  border-left: 1px solid var(--act-fio-esc);
}
.fato:first-child { border-left: 0; padding-left: 0; }
.fato dt {
  font-family: var(--fonte-titulo); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--act-azul-clara); margin-bottom: .3rem;
}
.fato dd { font-size: var(--txt-sm); color: var(--cor-inv-suave); line-height: 1.45; }
.hero__sub {
  margin-top: var(--sp-2); max-width: 46ch;
  font-size: var(--txt-base); color: var(--cor-inv-suave); line-height: 1.55;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ============================================================
   AUTORIDADE — contadores animados
   ============================================================ */
.autoridade {
  position: relative;
  background: var(--act-azul-900); color: var(--cor-inv);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--act-fio-esc);
}
.autoridade__grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-2);
}
.metrica { position: relative; padding-left: var(--sp-2); border-left: 1px solid var(--act-fio-esc); }
.metrica::before {
  content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 0;
  background: var(--act-vermelho);
  transition: height var(--dur-4) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.metrica[data-on]::before, [data-on] .metrica::before { height: 34px; }
.metrica__valor {
  display: flex; align-items: baseline; gap: .1rem;
  font-family: var(--fonte-titulo); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.metrica__rotulo { display: block; margin-top: .45rem; font-size: var(--txt-sm); color: var(--cor-inv-suave); }
.autoridade__nota {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--act-fio-esc);
  font-size: var(--txt-sm); color: var(--cor-inv-suave); max-width: 104ch;
}
.autoridade__nota strong { color: var(--act-branco); }

/* ============================================================
   PROBLEMA — coluna sticky + itens com numeral fantasma
   ============================================================ */
.problema__grade {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.problema__fixo { position: sticky; top: calc(var(--h-cabecalho) + var(--sp-5)); }
.problema__frase {
  margin-top: var(--sp-5); padding: var(--sp-3);
  background: var(--act-azul); color: var(--cor-inv);
  border-left: 4px solid var(--act-vermelho); border-radius: 0 var(--raio-2) var(--raio-2) 0;
  font-family: var(--fonte-titulo); font-size: var(--txt-xl); font-weight: 600; line-height: 1.35;
}
.dores { display: grid; gap: 0; }
.dor {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) 0; border-top: var(--fio);
}
.dor:last-child { border-bottom: var(--fio); }
.dor__num { --ghost: 1; font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem); line-height: .8; }
.dor h3 { font-size: var(--txt-xl); color: var(--act-azul); margin-bottom: .5rem; }
.dor p { color: var(--cor-texto-suave); max-width: 56ch; }
.dor__icone { width: 26px; height: 26px; margin-top: .2rem; }

/* ícones com traço que se desenha */
.icone {
  fill: none; stroke: var(--act-azul-2);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Escopo `.js`: sem JavaScript nenhum elemento recebe `.visivel`, e o traço
   ficaria deslocado para sempre — ou seja, ícone invisível. */
.js .icone--desenha path, .js .icone--desenha circle, .js .icone--desenha rect {
  stroke-dasharray: var(--dash, 200);
  stroke-dashoffset: var(--dash, 200);
  transition: stroke-dashoffset 900ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-on] .icone--desenha path, [data-on] .icone--desenha circle, [data-on] .icone--desenha rect { stroke-dashoffset: 0; }

/* ============================================================
   TERRITÓRIO + PILARES
   ============================================================ */
.territorio {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: var(--sp-2); margin-bottom: var(--sp-10);
}
.territorio__col {
  padding: var(--sp-4) var(--sp-3);
  background: var(--act-branco); border: var(--fio); border-radius: var(--raio-2);
  transition: opacity var(--dur-4) var(--ease-out-expo), transform var(--dur-4) var(--ease-out-expo);
}
/* idem: sem o motor as colunas precisam já estar visíveis */
html[data-motion] .territorio__col { opacity: 0; transform: translateY(20px); }
.territorio[data-on] .territorio__col { opacity: 1; transform: none; }
.territorio__col--forte {
  background: var(--act-azul); border-color: var(--act-azul); color: var(--cor-inv);
}
/* Deslize lateral só no desktop, onde as colunas ficam lado a lado.
   No mobile elas empilham e um translateX vazaria a viewport. */
@media (min-width: 60.0625em) {
  html[data-motion] .territorio__col { transform: translateX(-24px); }
  html[data-motion] .territorio__col--forte { transform: translateX(24px); }
}
.territorio__rotulo {
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--cor-texto-suave); padding-bottom: .6rem; margin-bottom: .9rem;
  border-bottom: var(--fio);
}
.territorio__col--forte .territorio__rotulo { color: var(--act-azul-clara); border-bottom-color: var(--act-fio-esc); }
.territorio__lista li {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fonte-titulo); font-weight: 600; padding: .45rem 0;
}
.territorio__lista li::before {
  content: ""; width: 14px; height: 1px; background: var(--act-borda-forte); flex: 0 0 auto;
}
.territorio__col--forte .territorio__lista li { color: var(--cor-inv); }
.territorio__col--forte .territorio__lista li::before { background: var(--act-vermelho); width: 18px; height: 2px; }
.territorio__vs {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: #A9151A; /* vermelho da marca escurecido — 5.9:1 sobre #F2F4F7 */
}

/* Assimétrico: 1 destaque + 3 linhas numeradas, em vez de 4 cards de peso igual
   (anti-padrão 2.3). Sem ícone acima de cada título (anti-padrão 2.5). */
.pilares {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.pilar-destaque {
  padding: var(--sp-4);
  background: var(--act-azul); color: var(--cor-inv);
  border-radius: var(--raio-2);
  border-left: 3px solid var(--act-vermelho);
}
.pilar-destaque__marca {
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--act-azul-clara); margin-bottom: var(--sp-2);
}
.pilar-destaque h3 { font-size: var(--txt-2xl); color: var(--cor-inv); margin-bottom: var(--sp-2); }
.pilar-destaque__texto { color: var(--cor-inv-suave); }

.pilar-lista { display: grid; }
.pilar-lista li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) 0; border-top: var(--fio);
}
.pilar-lista li:last-child { border-bottom: var(--fio); }
.pilar-lista__num {
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 700;
  /* vermelho da marca escurecido: o #E31E24 puro dá 4.26:1 sobre o cinza claro
     do fundo da seção, abaixo do mínimo de 4.5:1 */
  color: #A9151A; font-variant-numeric: tabular-nums;
  padding-top: .15rem;
}
.pilar-lista h3 { font-size: var(--txt-lg); color: var(--act-azul); margin-bottom: .35rem; }
.pilar-lista p { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

/* ============================================================
   SOBRE — imagem sticky + missão/visão
   ============================================================ */
.sobre {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: var(--sp-12);
}
.sobre__figura {
  position: sticky; top: calc(var(--h-cabecalho) + var(--sp-3));
  border-radius: var(--raio-3); overflow: hidden; border: var(--fio);
  box-shadow: var(--sombra-media);
}
.sobre__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sobre__figura figcaption {
  padding: .7rem .9rem; font-size: var(--txt-xs);
  color: var(--cor-texto-suave); background: var(--act-branco); border-top: var(--fio);
}
.sobre h3 { font-size: var(--txt-2xl); color: var(--act-azul); margin-bottom: var(--sp-3); }
.sobre__texto p { margin-bottom: var(--sp-2); color: var(--cor-texto-suave); }
.sobre__texto p strong { color: var(--cor-texto); }

.mvv { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.mvv > div { padding-left: var(--sp-3); border-left: 2px solid var(--act-azul-2); }
.mvv dt {
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--act-azul-2); margin-bottom: .3rem;
}
.mvv dd { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

.valores { margin-top: var(--sp-12); }
.valores__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0;
}
.valores__lista li {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-top: var(--fio); font-size: var(--txt-sm); color: var(--cor-texto-suave);
}
.valores__lista strong {
  display: block; font-family: var(--fonte-titulo); font-size: var(--txt-base);
  color: var(--act-azul); margin-bottom: .35rem;
}

/* ============================================================
   SERVIÇOS — índice sticky + painéis (desktop) / acordeão (mobile)
   ============================================================ */
.servicos { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.servicos__indice { position: sticky; top: calc(var(--h-cabecalho) + var(--sp-5)); }
.servicos__indice ol { display: grid; }
.servicos__indice a {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline;
  gap: .5rem; padding: .7rem 0; border-top: var(--fio);
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 600;
  color: var(--cor-texto-suave);
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-2) var(--ease);
}
.servicos__indice li:last-child a { border-bottom: var(--fio); }
.servicos__indice a span:first-child { font-size: var(--txt-xs); color: var(--act-cinza); font-variant-numeric: tabular-nums; }
.servicos__indice a:hover { color: var(--act-azul-2); padding-left: .35rem; }
.servicos__indice a.ativo { color: var(--act-azul); }
.servicos__indice a.ativo span:first-child { color: var(--act-vermelho); }

.servicos__paineis { display: grid; gap: 0; }
.servico { position: relative; padding: var(--sp-5) 0; border-top: var(--fio); }
.servico:first-child { border-top: 0; padding-top: 0; }
.servico:last-child { padding-bottom: 0; }
.servico__cabeca { display: flex; align-items: flex-start; gap: var(--sp-3); }
.servico__marca {
  flex: 0 0 auto; width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--act-cinza-claro); border-radius: var(--raio-2);
}
.servico__marca .icone { width: 26px; height: 26px; }
.servico__titulo { font-size: var(--txt-2xl); color: var(--act-azul); }
.servico__num {
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: .1em; color: var(--act-vermelho); display: block; margin-bottom: .3rem;
}
.servico__desc { margin: var(--sp-3) 0; color: var(--cor-texto-suave); max-width: 68ch; }
.servico__itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem var(--sp-3); }
.servico__itens li { position: relative; padding-left: 1.2rem; font-size: var(--txt-sm); }
.servico__itens li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 1px; background: var(--act-azul-2);
}
.servico__gatilho { display: none; }

/* ============================================================
   OBRAS — lista editorial + preview de imagem seguindo o cursor
   ============================================================ */
.obras__lista { border-top: var(--fio); }
.obra {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) 120px minmax(0, 1.1fr);
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-2); border-bottom: var(--fio);
  transition: background-color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.obra:hover { background: var(--act-branco); padding-left: var(--sp-4); }
.secao--alt .obra:hover { background: var(--act-branco); }
.obra__nome { font-family: var(--fonte-titulo); font-weight: 600; color: var(--act-azul); }
.obra__cliente { font-size: var(--txt-sm); color: var(--cor-texto); }
.obra__local {
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: .08em; color: var(--cor-texto-suave);
}
.obra__servico { font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.obra__rotulo { display: none; }

.preview {
  position: fixed; z-index: var(--z-preview); pointer-events: none;
  width: 260px; aspect-ratio: 4 / 3;
  border-radius: var(--raio-3); overflow: hidden;
  border: 1px solid var(--act-borda-forte); box-shadow: var(--sombra-media);
  opacity: 0; transform: translate(-50%, -50%) scale(.94);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.preview.visivel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.preview img { width: 100%; height: 100%; object-fit: cover; }

.nota-secao { margin-top: var(--sp-3); font-size: var(--txt-sm); color: var(--cor-texto-suave); max-width: 84ch; }
.sub-secao {
  display: inline-block; font-size: var(--txt-xl); color: var(--act-azul);
  margin: var(--sp-12) 0 var(--sp-4); padding-top: var(--sp-3);
  border-top: 2px solid var(--act-azul);
}

/* ---------- GALERIA masonry + lightbox ---------- */
.galeria { columns: 3; column-gap: var(--sp-2); }
/* o botão "ver todas" só existe no recorte mobile */
.galeria-mais { display: none; }
.galeria > li { break-inside: avoid; margin-bottom: var(--sp-2); }
.galeria__item {
  position: relative; display: block; width: 100%; padding: 0;
  overflow: hidden; border-radius: var(--raio-3); background: var(--act-azul);
}
.galeria__item img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
/* ritmo do masonry: um retrato a cada três quadros */
.galeria > li:nth-child(3n + 2) .galeria__item img { aspect-ratio: 3 / 4; }
.galeria > li:nth-child(6n + 4) .galeria__item img { aspect-ratio: 1 / 1; }
.galeria__item:hover img { transform: scale(1.05); opacity: .82; }
.galeria__legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .9rem .8rem;
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 600;
  text-align: left; color: var(--act-branco);
  background: linear-gradient(transparent, rgba(7, 22, 40, .88));
  transform: translateY(24%); opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.galeria__item:hover .galeria__legenda, .galeria__item:focus-visible .galeria__legenda { transform: none; opacity: 1; }
.galeria__lupa {
  position: absolute; top: .7rem; right: .7rem;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(7, 22, 40, .7); border-radius: 50%;
  opacity: 0; transform: scale(.8);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.galeria__lupa svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; }
.galeria__item:hover .galeria__lupa, .galeria__item:focus-visible .galeria__lupa { opacity: 1; transform: none; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-3);
  background: rgba(7, 22, 40, .96);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.lightbox.aberto { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__figura {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); min-width: 0; max-height: 100%;
}
.lightbox__figura img {
  max-width: 100%; max-height: calc(100vh - 10rem); width: auto;
  object-fit: contain; border-radius: var(--raio-2);
}
.lightbox__figura figcaption {
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 600;
  color: var(--cor-inv); text-align: center; max-width: 62ch;
}
.lightbox__contador {
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); letter-spacing: .1em;
  color: var(--cor-inv-suave); font-variant-numeric: tabular-nums;
}
.lightbox__fechar, .lightbox__nav {
  display: grid; place-items: center;
  width: var(--alvo-min); height: var(--alvo-min);
  border: 1px solid var(--act-fio-esc); border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.lightbox__fechar:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .2); transform: scale(1.06); }
.lightbox__fechar { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.lightbox svg { width: 20px; height: 20px; fill: none; stroke: var(--act-branco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- CLIENTES — marquee duplo ---------- */
.marquee { position: relative; overflow: hidden; padding-block: .35rem; --vel: 46s; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 110px); z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--cor-fundo), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--cor-fundo), transparent); }
.marquee__trilha { display: flex; width: max-content; animation: desliza var(--vel) linear infinite; }
.marquee--reverso .marquee__trilha { animation-direction: reverse; }
.marquee:hover .marquee__trilha, .marquee:focus-within .marquee__trilha { animation-play-state: paused; }
.marquee__grupo { display: flex; flex: 0 0 auto; }
.marquee__grupo li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-inline: var(--sp-3);
  font-family: var(--fonte-titulo); font-size: var(--txt-lg); font-weight: 600;
  color: var(--act-azul); white-space: nowrap;
}
.marquee__grupo li::after { content: ""; width: 6px; height: 6px; background: var(--act-vermelho); border-radius: 50%; }
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- QUALIDADE (escura) ---------- */
.qualidade {
  position: relative; isolation: isolate;
  background: var(--act-azul); color: var(--cor-inv); overflow: clip;
}
.qualidade__malha {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--act-fio-esc-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--act-fio-esc-2) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 80% at 80% 0%, #000 30%, transparent 76%);
  -webkit-mask-image: radial-gradient(100% 80% at 80% 0%, #000 30%, transparent 76%);
}
/* Credenciais como faixa tipográfica: norma à esquerda, o que ela significa à
   direita, separadas por fio. Ritmo diferente do resto da página. */
.credenciais { display: grid; }
.credencial {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--sp-3) clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--act-fio-esc);
  position: relative;
}
.credencial:last-child { border-bottom: 1px solid var(--act-fio-esc); }
.credencial::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px;
  background: var(--act-vermelho);
  transition: width var(--dur-4) var(--ease-out-expo);
}
.credencial[data-on]::before { width: 56px; }
.credencial dt {
  font-family: var(--fonte-titulo); font-size: var(--txt-lg); font-weight: 600;
  color: var(--cor-inv); letter-spacing: -.01em;
}
.credencial dd { font-size: var(--txt-sm); color: var(--cor-inv-suave); }
.qualidade__fecho {
  margin-top: var(--sp-6); max-width: 72ch;
  color: var(--cor-inv-suave); border-left: 3px solid var(--act-vermelho); padding-left: var(--sp-3);
}


/* ---------- DEPOIMENTOS — slider ---------- */
.slider { position: relative; }
.slider__janela { overflow: hidden; }
.slider__trilha {
  display: flex; gap: var(--sp-3);
  transition: transform var(--dur-4) var(--ease-out-expo);
  touch-action: pan-y;
}
.slider__slide { flex: 0 0 calc((100% - var(--sp-3) * 2) / 3); min-width: 0; }
.depoimento {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--act-branco); border: var(--fio); border-radius: var(--raio-2);
}
.depoimento__aspas {
  font-family: var(--fonte-titulo); font-size: 3.5rem; font-weight: 700; line-height: .7;
  color: var(--act-vermelho); opacity: .18; margin-bottom: .3rem;
}
.depoimento__tipo {
  font-family: var(--fonte-titulo); font-size: var(--txt-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--act-azul-2); margin-bottom: var(--sp-2);
}
.depoimento blockquote { flex: 1 1 auto; }
.depoimento blockquote p { font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.depoimento footer { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: var(--fio); }
.depoimento cite { display: block; font-family: var(--fonte-titulo); font-style: normal; font-weight: 700; color: var(--act-azul); }
.depoimento footer span { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

.slider__controles { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.slider__btn {
  display: grid; place-items: center;
  width: var(--alvo-min); height: var(--alvo-min);
  border: 1px solid var(--act-borda-forte); border-radius: 50%;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.slider__btn svg { width: 18px; height: 18px; fill: none; stroke: var(--act-azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slider__btn:hover:not(:disabled) { background: var(--act-azul); border-color: var(--act-azul); transform: scale(1.06); }
.slider__btn:hover:not(:disabled) svg { stroke: #fff; }
.slider__btn:disabled { opacity: .35; cursor: not-allowed; }
.slider__pontos { display: flex; gap: .45rem; margin-left: auto; }
.slider__ponto {
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--act-borda-forte);
  transition: background-color var(--dur-2) var(--ease), width var(--dur-2) var(--ease);
}
.slider__ponto[aria-current="true"] { background: var(--act-vermelho); width: 40px; }

/* ---------- CTA final com parallax ---------- */
.cta { position: relative; isolation: isolate; overflow: clip; color: var(--cor-inv); padding-block: var(--sp-secao); }
.cta__fundo { position: absolute; inset: -12% 0; z-index: -2; }
.cta__fundo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* alfa mínimo 0.84: garante ≥5.8:1 para texto branco mesmo sobre a área mais clara da foto */
  background: linear-gradient(105deg, rgba(7, 22, 40, .97) 0%, rgba(14, 42, 77, .92) 52%, rgba(14, 42, 77, .84) 100%);
}
.cta__titulo { max-width: 32ch; font-size: var(--txt-3xl); color: var(--cor-inv); }
.cta__texto { margin-top: var(--sp-3); max-width: 58ch; font-size: var(--txt-lg); color: var(--cor-inv-suave); }
.cta__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.cta__nota { margin-top: var(--sp-4); font-size: var(--txt-sm); color: var(--cor-inv-suave); }

/* ---------- RODAPÉ ---------- */
.rodape { background: var(--act-azul-900); color: var(--cor-inv); padding-top: var(--sp-10); }
.rodape__grade {
  display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: var(--sp-4); padding-bottom: var(--sp-8);
}
.rodape__col--marca img { height: 44px; width: auto; }
.rodape__tagline {
  margin-top: var(--sp-3); max-width: 30ch;
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 600; color: var(--cor-inv-suave);
}
.rodape__titulo {
  font-size: var(--txt-xs); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--act-azul-clara); margin-bottom: var(--sp-3);
}
.rodape__lista { display: grid; gap: .6rem; }
.rodape__lista a, .rodape__endereco {
  font-size: var(--txt-sm); color: var(--cor-inv-suave); font-style: normal; line-height: 1.6;
}
.rodape__lista a { display: inline-block; min-height: 24px; transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.rodape__lista a:hover { color: var(--act-branco); transform: translateX(3px); }
.rodape__legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); justify-content: space-between;
  padding-block: var(--sp-3); border-top: 1px solid var(--act-fio-esc);
  font-size: var(--txt-xs); color: rgba(255, 255, 255, .6);
}

/* O botão flutuante de WhatsApp foi removido: o popup do Merlin ocupa o mesmo
   canto inferior direito. Os CTAs de WhatsApp seguem no header, hero,
   serviços e CTA final. */

/* O sistema de reveal vive em `motion.css` (spec BuildV: gate html[data-motion],
   variantes soft/fig/mask, stagger automático). Não duplicar aqui. */

/* ============================================================
   RESPONSIVO — aceite: zero overflow horizontal de 320px a desktop
   ============================================================ */

@media (max-width: 73.75em) {
  .obra { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 96px; }
  .obra__servico { grid-column: 1 / -1; padding-top: .35rem; border-top: 1px dashed var(--act-borda); }
}

@media (max-width: 67.5em) {
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__col--marca { grid-column: 1 / -1; }
  .slider__slide { flex-basis: calc((100% - var(--sp-3)) / 2); }
  .galeria { columns: 2; }
}

@media (max-width: 60em) {
  :root { --h-cabecalho: 68px; }

  /* Nav off-canvas */
  .hamburguer { display: flex; }
  .nav {
    position: fixed; top: 0; right: 0; z-index: var(--z-nav);
    width: min(88vw, 340px); height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-3);
    padding: calc(var(--h-cabecalho) + var(--sp-3)) var(--sp-3) var(--sp-4);
    background: var(--act-azul); box-shadow: var(--sombra-alta);
    transform: translateX(100%);
    transition: transform var(--dur-3) var(--ease-out-expo);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.aberto { transform: translateX(0); }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista li + li { border-top: 1px solid var(--act-fio-esc); }
  .nav__lista a {
    display: block; padding: .95rem .75rem; font-size: var(--txt-base);
    color: var(--cor-inv); border-left: 3px solid transparent;
  }
  .nav__lista a::after { display: none; }
  .nav__lista a:hover, .nav__lista a.ativo { color: var(--act-branco); border-left-color: var(--act-vermelho); }
  /* No off-canvas o CTA reaparece: ali é a única ação disponível e não compete
     com nada, ao contrário do header no desktop. */
  .nav__cta { display: inline-flex; width: 100%; }

  /* Nota mobile do padrão: o bloco de texto passa a ocupar a largura total mas
     MANTÉM o alinhamento à esquerda (não vira centralizado); a faixa reduz de
     altura e a foto recorta preservando a diagonal visível. */
  .hero__texto { max-width: 100%; }
  /* `padding-top` separado do `padding-bottom`: usar `padding-block` aqui
     apagaria a compensação do header fixo e o texto ficaria atrás dele. */
  .hero__inner {
    padding-top: calc(var(--h-cab-real, var(--h-cabecalho)) + clamp(1.5rem, 5vw, 2.5rem));
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }
  .hero__diagonal { width: min(52vw, 300px); opacity: .82; }
  /* overlay mais fechado: sem a coluna livre à direita, o texto atravessa a foto */
  .hero::before {
    background: linear-gradient(178deg,
      rgba(7, 22, 40, .93) 0%,
      rgba(7, 22, 40, .88) 55%,
      rgba(7, 22, 40, .80) 100%);
  }
  .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fato:nth-child(3) { border-left: 0; padding-left: 0; }
  .fato:nth-child(3), .fato:nth-child(4) { border-top: 1px solid var(--act-fio-esc); padding-top: var(--sp-3); }

  .autoridade__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .problema__grade { grid-template-columns: minmax(0, 1fr); }
  .problema__fixo { position: static; }
  .territorio { grid-template-columns: minmax(0, 1fr); }
  .territorio__vs { padding: .3rem 0; }

  .sobre { grid-template-columns: minmax(0, 1fr); }
  .sobre__figura { position: static; max-width: 560px; }

  /* Serviços viram acordeão */
  .servicos { grid-template-columns: minmax(0, 1fr); }
  .servicos__indice { display: none; }
  .servicos__paineis { border-top: var(--fio); }
  .servico { padding: 0; border-top: 0; }
  .servico:first-child { padding-top: 0; }
  .servico__gatilho {
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%; padding: var(--sp-3) 0; text-align: left;
    border-bottom: var(--fio);
  }
  .servico__gatilho .servico__marca { width: 42px; height: 42px; }
  .servico__gatilho .servico__titulo { font-size: var(--txt-lg); flex: 1 1 auto; }
  .servico__mais {
    flex: 0 0 auto; width: 26px; height: 26px; position: relative;
  }
  .servico__mais::before, .servico__mais::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 14px; height: 2px; background: var(--act-azul-2);
    transform: translate(-50%, -50%);
    transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  }
  .servico__mais::after { transform: translate(-50%, -50%) rotate(90deg); }
  .servico__gatilho[aria-expanded="true"] .servico__mais::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
  .servico__cabeca--desk { display: none; }
  /* A altura é animada pelo JS (propriedade `height` explícita).
     Transições em faixas `fr` de grid ficam presas um estado atrás no Chrome,
     por isso não são usadas aqui. Sem JS, o painel permanece aberto — que é o
     fallback correto: todo o conteúdo continua legível e indexável. */
  .servico__corpo { border-bottom: var(--fio); }
  .js .servico__corpo {
    overflow: hidden;
    transition: height var(--dur-3) var(--ease);
  }
  .servico__desc { margin: var(--sp-3) 0; }
  .servico__itens { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-3); }

  /* Obras em cards */
  .obras__lista { border-top: 0; }
  .obra {
    grid-template-columns: minmax(0, 1fr); gap: .5rem;
    padding: var(--sp-3); margin-bottom: var(--sp-2);
    background: var(--act-branco); border: var(--fio); border-left: 3px solid var(--act-azul);
    border-radius: var(--raio-2);
  }
  .obra:hover { padding-left: var(--sp-3); }
  .obra > div + div { padding-top: .5rem; border-top: 1px solid var(--act-borda); }
  .obra__servico { grid-column: auto; }
  .obra__rotulo {
    display: block; font-family: var(--fonte-titulo); font-size: 11px; font-weight: 700;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--act-cinza);
    margin-bottom: .1rem;
  }

  .slider__slide { flex-basis: 100%; }
}

@media (max-width: 35em) {
  .logo { height: 32px; }
  .cabecalho.rolou .logo { height: 30px; }
  .autoridade__grade { grid-template-columns: minmax(0, 1fr); }
  .pilares { grid-template-columns: minmax(0, 1fr); }
  /* Galeria: 18 fotos em coluna única viram uma rolagem interminável.
     Mostra 8 e deixa o resto atrás de um botão — o lightbox segue com as 18. */
  .galeria { columns: 1; }
  .galeria.tem-corte > li:nth-child(n + 9) { display: none; }
  .galeria.tem-corte.expandida > li:nth-child(n + 9) { display: block; }
  .galeria-mais { display: flex; justify-content: center; margin-top: var(--sp-3); }
  .galeria-mais .btn { width: 100%; }

  .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .rodape__legal { flex-direction: column; }
  .problema__frase { font-size: var(--txt-lg); }
  .dor { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .dor__num { font-size: 2.5rem; }
  .hero__acoes .btn, .cta__acoes .btn { width: 100%; }
  .fatos { grid-template-columns: minmax(0, 1fr); }
  .fato { border-left: 0; padding-left: 0; padding-block: var(--sp-2); }
  .fato + .fato { border-top: 1px solid var(--act-fio-esc); padding-top: var(--sp-2); }
  .valores__lista li { padding-right: 0; }
  .marquee__grupo li { font-size: var(--txt-base); padding-inline: var(--sp-2); }

  .lightbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; padding: var(--sp-5) var(--sp-2) var(--sp-3); }
  .lightbox__figura { grid-column: 1; grid-row: 1; }
  .lightbox__nav--ant { grid-column: 1; grid-row: 2; justify-self: start; }
  .lightbox__nav--prox { grid-column: 1; grid-row: 2; justify-self: end; }
  .lightbox__figura img { max-height: calc(100dvh - 13rem); }

}

/* Ponteiro grosso (touch): sem preview seguindo cursor */
@media (hover: none), (pointer: coarse) {
  .preview { display: none; }
  .galeria__legenda { transform: none; opacity: 1; }
}

/* ---------- PREFERÊNCIAS DO USUÁRIO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .linha > span, .hero__aparece { transform: none !important; opacity: 1 !important; }
  .marquee__trilha { animation: none; transform: none; }
  .marquee { overflow-x: auto; }
  .galeria__item:hover img { transform: none; }
  .icone--desenha path, .icone--desenha circle, .icone--desenha rect { stroke-dashoffset: 0 !important; }
}

@media print {
  .cabecalho, .lightbox, .nav-overlay, .preview,
  .hero__acoes, .cta__acoes, .slider__controles, .marquee::before, .marquee::after { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .qualidade, .cta, .rodape, .autoridade { background: #fff !important; color: #000 !important; }
  .qualidade__malha, .cta__fundo, .cta::before,
  .hero__fundo, .hero__diagonal, .hero::before { display: none !important; }
  .slider__trilha { flex-wrap: wrap; transform: none !important; }
}