/* ============================================================================
   MILLENIUM TRANSPORTES — LANDING PAGE
   Folha de estilo da página. Consome exclusivamente os tokens de tokens.css.
   Regra de governança: nenhum #hex, nenhum tamanho de fonte e nenhum valor de
   espaçamento cru abaixo desta linha. Se falta um valor, cria-se o token.
   ============================================================================ */

/* ---------------------------------------------------------------- LAYOUT -- */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.wrap-text { max-width: var(--container-text); }

/* Impede que o cabeçalho fixo cubra o título ao navegar por âncora. */
[id] { scroll-margin-top: calc(var(--header-height) + var(--sp-4)); }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: var(--section-y-tight); }
.section + .section { border-top: var(--border-width) solid var(--border-subtle); }
.on-brand + .section, .section + .on-brand { border-top: 0; }

.skip-link {
  position: absolute; left: var(--sp-4); top: calc(var(--sp-4) * -6);
  z-index: var(--z-toast); background: var(--az-900); color: var(--gr-000);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold); text-decoration: none;
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--sp-4); }

/* ------------------------------------------------------------ TIPOGRAFIA -- */
.eyebrow {
  display: block;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-accent); margin-bottom: var(--sp-3);
}
.on-brand .eyebrow { color: var(--text-label-dark); }

.section-head { max-width: 60ch; margin-bottom: var(--sp-8); }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head p {
  font-size: var(--fs-lg); color: var(--text-secondary); margin-bottom: 0;
}
.on-brand .section-head p { color: var(--text-secondary); }
.section-head.center { margin-inline: auto; text-align: center; }

.lead { font-size: var(--fs-lg); color: var(--text-secondary); }
.rule-accent {
  width: 48px; height: var(--rule-accent); background: var(--border-accent);
  border: 0; margin: 0 0 var(--sp-5);
}

/* --------------------------------------------------------------- BOTÕES -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-comfort);
  padding-inline: var(--sp-5);
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-text); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: var(--transition-base);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn-primary { background: var(--action-primary); color: var(--action-primary-text); }
.btn-primary:hover { background: var(--action-primary-hover); color: var(--action-primary-text); }
.btn-primary:active { background: var(--action-primary-active); }

.btn-solid { background: var(--action-solid); color: var(--action-solid-text); }
.btn-solid:hover { background: var(--action-solid-hover); color: var(--action-solid-text); }

.btn-secondary {
  background: var(--action-secondary);
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-text);
}
.btn-secondary:hover { background: var(--action-secondary-hover); color: var(--action-secondary-text); }

.btn-whatsapp { background: var(--action-whatsapp); color: var(--gr-000); }
.btn-whatsapp:hover { background: var(--action-whatsapp-hover); color: var(--gr-000); }

.btn-ghost { color: var(--text-brand); padding-inline: var(--sp-3); }
.btn-ghost:hover { background: var(--az-50); }

.btn-lg { min-height: 56px; padding-inline: var(--sp-6); font-size: var(--fs-base); }
/* Compacto, mas nunca abaixo do alvo mínimo de toque de 44px (WCAG 2.5.5). */
.btn-sm { min-height: var(--touch-min); padding-inline: var(--sp-4); font-size: var(--fs-xs); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* -------------------------------------------------------------- CABEÇALHO -- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(31 70 142 / .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-width) solid rgb(255 255 255 / .1);
  transition: background-color var(--dur-normal) var(--ease-standard),
              border-color var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
}

/* Na home o cabeçalho flutua transparente sobre a foto do hero e só ganha
   corpo quando a página rola — o mesmo comportamento do padrão FN. As
   páginas internas continuam com a barra sólida acima.                    */
.site-header.is-overlay {
  position: fixed; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header.is-overlay.scrolled,
.site-header.is-overlay.menu-open {
  background: rgb(31 70 142 / .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgb(255 255 255 / .1);
}
.site-header .bar {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-height);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; margin-right: auto; }
.brand .mark {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); letter-spacing: var(--ls-tight);
  color: var(--gr-000); line-height: 1;
}
.brand .mark em {
  display: block; font-style: normal; font-size: var(--fs-3xs);
  font-weight: var(--fw-medium); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--az-300); margin-top: 2px;
}

.nav { display: none; gap: var(--sp-5); align-items: center; }
.nav a {
  color: var(--az-200); text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  position: relative; padding-block: var(--sp-1);
  transition: color var(--dur-fast) var(--ease-standard);
}
/* Sublinhado que cresce da esquerda — assinatura de interação do padrão FN,
   no azul claro oficial da marca. */
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: var(--border-width); background: var(--ci-400);
  transition: width var(--dur-normal) var(--ease-standard);
}
.nav a:hover { color: var(--ci-400); }
.nav a:hover::after { width: 100%; }
.header-cta { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch-comfort); height: var(--touch-comfort);
  background: none; border: var(--border-width) solid rgb(255 255 255 / .24);
  border-radius: var(--radius-sm); color: var(--gr-000); cursor: pointer;
}
.nav-panel {
  display: none; flex-direction: column; gap: var(--sp-1);
  padding-block: var(--sp-4) var(--sp-6);
  border-top: var(--border-width) solid rgb(255 255 255 / .1);
}
.nav-panel[data-open="true"] { display: flex; }
.nav-panel a {
  color: var(--az-200); text-decoration: none; font-size: var(--fs-base);
  font-weight: var(--fw-medium); padding-block: var(--sp-3);
  min-height: var(--touch-comfort); display: flex; align-items: center;
}
.nav-panel .btn { margin-top: var(--sp-3); }

/* O cabeçalho vive sempre sobre azul — transparente sobre a foto ou sólido
   ao rolar. O CTA usa a ação do contexto escuro (azul claro oficial sobre
   azul-900), senão o botão azul some contra o próprio cabeçalho.          */
.site-header .btn-primary { background: var(--ci-400); color: var(--az-900); }
.site-header .btn-primary:hover { background: var(--ci-300); color: var(--az-900); }
.site-header .btn-primary:active { background: var(--ci-500); }

@media (min-width: 1024px) {
  .nav, .header-cta { display: flex; }
  .nav-toggle, .nav-panel { display: none !important; }
}



/* ------------------------------------------------------------------ MARCA --
   Logotipo oficial extraído do Manual da Marca (Publiaty, 2021).
   · Versão negativa sobre o azul institucional (cabeçalho e rodapé)
   · Versão positiva sobre superfície clara
   · Área de proteção equivalente à altura do símbolo, conforme p. 9
   · Nunca redimensionar por largura fixa: a altura governa, a proporção segue
   ---------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; margin-right: auto;
         padding: calc(var(--logo-clearspace) / 2); margin-left: calc(var(--logo-clearspace) / -2); }
.brand img { height: var(--logo-altura); width: auto; display: block; }
.brand-footer img { height: calc(var(--logo-altura) * 1.15); width: auto; display: block; }

/* Pattern oficial (Manual, p. 12) — assinatura discreta de fundo.
   Sempre em opacidade baixa e sempre atrás do conteúdo.                    */
.pattern-bg { position: relative; isolation: isolate; }
.pattern-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/pattern-millenium.svg") repeat;
  background-size: 200px;
  opacity: .13;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.on-brand .pattern-bg::before, .pattern-bg.on-brand::before { opacity: .055; }

/* ------------------------------------------------------------------ HERO --
   Layout do padrão FN sobre a fotografia da avenida: manchete massiva no
   topo, apoio + CTAs na base esquerda e, à direita, o índice de frentes de
   atuação com o marquee de clientes. O véu de leitura da p. 21 do manual
   continua garantindo o contraste do texto branco sobre a foto.           */
.hero {
  position: relative; overflow: hidden;
  background: var(--surface-brand);
  min-height: 100vh; min-height: 100svh;
  display: flex;
  padding-block: calc(var(--header-height) + var(--sp-7)) var(--sp-7);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: url("../img/pattern-millenium.svg") repeat;
  background-size: 220px; opacity: .06;
  mask-image: linear-gradient(100deg, transparent 48%, #000 90%);
  -webkit-mask-image: linear-gradient(100deg, transparent 48%, #000 90%);
}

/* O conteúdo distribui-se entre topo e base do viewport. */
.hero > .wrap {
  position: relative; z-index: var(--z-raised);
  display: flex; flex-direction: column;
  justify-content: space-between; gap: var(--sp-8);
}

/* Imagem de fundo em sangria. Fica atrás dos gradientes e do pattern; se o
   arquivo ainda não existir, o azul institucional segue como fundo.        */
.hero-media, .hero-media img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 50%;
  display: block; border: 0;
}
/* Aproximação lenta de entrada: a foto assenta enquanto a manchete entra.
   Neutralizada pelo bloco global de movimento reduzido em tokens.css.      */
.hero-media img { animation: hero-zoom var(--dur-hero-zoom) var(--ease-entrance) both; }
@keyframes hero-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }

/* Véu de leitura — regra da p. 21 do manual para texto sobre fotografia.
   Fechado à esquerda e na base (manchete e apoio), aberto à direita, onde
   o caminhão precisa aparecer; um véu curto no topo protege o cabeçalho
   transparente. Garante os 9:1 do texto branco.                            */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(100deg,
      rgb(31 70 142 / .88) 0%,
      rgb(31 70 142 / .84) 44%,
      rgb(31 70 142 / .74) 64%,
      rgb(31 70 142 / .48) 82%,
      rgb(18 41 82 / .34) 100%),
    linear-gradient(to top, rgb(13 29 60 / .56), transparent 42%),
    linear-gradient(to bottom, rgb(13 29 60 / .38), transparent 22%);
}

/* A manchete quebra em duas linhas — "Nem tudo que se transporta" em cima,
   "pode ser substituído." embaixo. A medida de 24ch força exatamente esse
   corte, com a linha de cima mais longa que a de baixo.                    */
.hero h1 {
  font-size: var(--fs-hero);
  max-width: 24ch;
  margin-bottom: 0;
}
.hero-top .eyebrow { margin-bottom: var(--sp-4); }

.hero-bottom { display: grid; gap: var(--sp-7); align-items: end; }
/* O trilho max-content do marquee não pode ditar a largura da coluna:
   sem isso, a célula do grid estoura o viewport no celular.               */
.hero-bottom > * { min-width: 0; }
.hero-clients { min-width: 0; max-width: 100%; }
.hero-desc .lead { max-width: 46ch; margin-bottom: var(--sp-6); }
.hero .btn-row { margin-bottom: var(--sp-5); }
.hero-assure {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs); color: var(--text-tertiary);
}
.hero-assure span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-assure svg { color: var(--ci-400); }

/* Índice de frentes de atuação — linhas com seta diagonal, padrão FN. */
.hero-right { display: flex; flex-direction: column; gap: var(--sp-5); }
.hero-services { display: flex; flex-direction: column; }
.hero-service {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3);
  min-height: var(--touch-min);
  border-bottom: var(--border-width) solid var(--border-on-brand);
  color: var(--gr-000); text-decoration: none;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--fw-semibold); font-size: var(--fs-base);
  letter-spacing: var(--ls-tight);
  transition: color var(--dur-fast) var(--ease-standard),
              padding-left var(--dur-normal) var(--ease-standard);
}
.hero-service:first-child { border-top: var(--border-width) solid var(--border-on-brand); }
.hero-service svg { flex: none; color: var(--ci-400); transition: transform var(--dur-normal) var(--ease-standard); }
.hero-service:hover { color: var(--ci-400); padding-left: var(--sp-2); }
.hero-service:hover svg { transform: translate(2px, -2px); }

/* Marquee de clientes em texto, separados pelo símbolo octogonal da marca. */
.hero-clients {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hero-clients-track {
  display: flex; width: max-content; align-items: center; gap: var(--sp-5);
  animation: correr var(--dur-marquee) linear infinite;
}
.hero-client {
  flex: none; white-space: nowrap;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--az-200);
}

/* Separador octogonal — a forma do símbolo da marca em miniatura. */
.octo-dot {
  flex: none; width: 7px; height: 7px;
  background: var(--ci-400);
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
}

@media (min-width: 768px) {
  .hero-media, .hero-media img { object-position: 72% 50%; }
}
@media (min-width: 1024px) {
  .hero-bottom { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-9); }
  .hero-right { width: 100%; max-width: 400px; justify-self: end; }
}
/* Em telas estreitas a foto vertical entra e o véu fecha por cima, não pela
   diagonal; o índice de serviços sai do HERO — seis linhas não cabem no
   viewport junto da manchete — e o marquee de clientes permanece como
   prova. Fora do hero (ex.: página 404) o índice continua visível.        */
@media (max-width: 1023.98px) {
  .hero .hero-services { display: none; }
}
@media (max-width: 767.98px) {
  .hero::after {
    background:
      linear-gradient(180deg,
        rgb(31 70 142 / .92) 0%,
        rgb(31 70 142 / .86) 46%,
        rgb(31 70 142 / .74) 100%);
  }
  .hero-media, .hero-media img { object-position: 50% 78%; }
  .hero h1 { max-width: none; }
}

/* ------------------------------------------------------- PLACEHOLDER FOTO -- */
/*  Substituir cada .ph por <img> ou <picture>. As dimensões-alvo estão
    anotadas no HTML, junto de cada bloco.                                   */
.ph {
  position: relative; display: flex; align-items: flex-end;
  border-radius: var(--radius-lg); overflow: hidden;
  background:
    linear-gradient(140deg, var(--az-800) 0%, var(--az-700) 42%, var(--az-600) 100%);
  border: var(--border-width) solid rgb(255 255 255 / .1);
  min-height: 260px;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.ph .ph-label {
  position: relative; width: 100%;
  padding: var(--sp-5); font-size: var(--fs-xs);
  color: var(--az-200); background: linear-gradient(transparent, rgb(13 29 60 / .74));
}
.ph .ph-label b {
  display: block; font-family: var(--font-display); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); color: var(--gr-000); margin-bottom: 2px;
}
.ph-tall { min-height: 420px; }
.ph-wide { min-height: 300px; }
.ph-sm   { min-height: 180px; border-radius: var(--radius-md); }
.ph-light {
  background: linear-gradient(140deg, var(--az-100) 0%, var(--gr-100) 100%);
  border-color: var(--border-default);
}
.ph-light .ph-label { color: var(--gr-600); background: linear-gradient(transparent, rgb(255 255 255 / .82)); }
.ph-light .ph-label b { color: var(--az-800); }
.ph-light::before { background-image:
    linear-gradient(rgb(31 70 142 / .07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(31 70 142 / .07) 1px, transparent 1px); }

/* ------------------------------------------------------ BARRA AUTORIDADE -- */
.authority {
  background: var(--az-800);
  padding-block: var(--sp-7);
  border-top: var(--border-width) solid rgb(255 255 255 / .08);
}
.authority-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5);
}
/* Fio superior no lugar do filete lateral — o desenho de resultados do
   padrão FN. Números tabulares evitam tremor durante a contagem animada. */
.stat { border-top: var(--border-width) solid var(--border-default); padding-top: var(--sp-4); }
.stat b {
  display: block; font-family: var(--font-display);
  font-stretch: var(--display-stretch); font-style: var(--display-style);
  font-size: var(--fs-3xl); font-weight: var(--fw-heavy);
  line-height: 1; letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums;
  color: var(--gr-000); margin-bottom: var(--sp-2);
}
.stat span {
  display: block; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--az-300); line-height: var(--lh-normal);
}
.stat.stat-text b { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
@media (min-width: 768px) { .authority-grid { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------- ROTEADOR DE INTENÇÃO -- */
.router-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.router-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface-base);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--text-primary);
  min-height: var(--touch-comfort);
  transition: var(--transition-base);
}
.router-card:hover {
  border-color: var(--az-400); box-shadow: var(--shadow-md);
  transform: translateY(-2px); color: var(--text-primary);
}
.router-card .ico {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--az-50); color: var(--az-700);
  display: grid; place-items: center;
}
.router-card .txt b {
  display: block; font-family: var(--font-display); font-size: var(--fs-base);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight);
}
.router-card .txt span { font-size: var(--fs-xs); color: var(--text-secondary); }
.router-card .arrow { margin-left: auto; color: var(--az-600); flex: none; }
@media (min-width: 640px)  { .router-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .router-grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------- PROBLEMA -- */
.compare { display: grid; gap: var(--sp-5); }
.compare-col {
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid;
}
.compare-col h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); display: flex; gap: var(--sp-2); align-items: center; }
.compare-col ul { list-style: none; padding: 0; margin: 0; }
.compare-col li {
  display: flex; gap: var(--sp-3); padding-block: var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.compare-col li + li { border-top: var(--border-width) solid var(--border-subtle); }
.compare-col li svg { flex: none; margin-top: 2px; }
.compare-bad  { background: var(--gr-50); border-color: var(--border-default); color: var(--text-secondary); }
.compare-bad h3 { color: var(--text-tertiary); }
.compare-bad li svg { color: var(--gr-400); }
.compare-good { background: var(--az-50); border-color: var(--az-200); }
.compare-good h3 { color: var(--az-800); }
.compare-good li svg { color: var(--sem-sucesso); }
.compare-good li { color: var(--text-primary); }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------- MÉTODO --
   Linha do tempo. O marcador de cada etapa reproduz o octógono estrelado do
   símbolo da marca (manual, p. 6), recortado por clip-path — a mesma forma
   de dois quadrados sobrepostos a 45°.
   Vertical até 1099px, horizontal a partir daí.
   ------------------------------------------------------------------------ */
:root {
  --octo: polygon(50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%,
                  85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%,
                  14.6% 85.4%, 14.6% 64.6%, 0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
  --marcador: 58px;
}

.method { counter-reset: step; display: grid; gap: 0; }

.method-item {
  position: relative; counter-increment: step;
  background: none; border: 0; border-radius: 0;
}

/* Marcador: o símbolo da marca com o número da etapa dentro. */
.method-item::before {
  content: "0" counter(step);
  position: absolute; z-index: var(--z-raised);
  width: var(--marcador); height: var(--marcador);
  display: grid; place-items: center;
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
  background: var(--action-primary); color: var(--action-primary-text);
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-size: var(--fs-lg);
  font-weight: var(--fw-heavy); letter-spacing: var(--ls-tighter);
  line-height: 1; padding-right: 2px;
}

/* Fio que liga as etapas. Tingido com o azul claro da marca em vez de um
   branco neutro, para o percurso pertencer à identidade e não ao chrome.  */
.method-item::after {
  content: ""; position: absolute;
  background: var(--border-default);
  background: color-mix(in srgb, var(--border-accent) 42%, transparent);
}

.method-item h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.method-item p  { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 0; }

/* ---- Vertical: telefone e tablet ---- */
@media (max-width: 1099.98px) {
  .method-item { padding-left: calc(var(--marcador) + var(--sp-5)); padding-bottom: var(--sp-7); }
  .method-item:last-child { padding-bottom: 0; }
  .method-item::before { left: 0; top: 0; }
  .method-item::after {
    left: calc(var(--marcador) / 2 - 1px); top: var(--marcador);
    width: 2px; bottom: 0;
  }
  .method-item:last-child::after { display: none; }
}

/* ---- Horizontal: desktop ---- */
@media (min-width: 1100px) {
  .method { grid-template-columns: repeat(5, 1fr); column-gap: var(--sp-5); }
  .method-item { padding-top: calc(var(--marcador) + var(--sp-5)); }
  .method-item::before { top: 0; left: 0; }
  .method-item::after {
    top: calc(var(--marcador) / 2 - 1px); height: 2px;
    left: var(--marcador); right: calc(var(--sp-5) * -1);
  }
  .method-item:last-child::after { display: none; }
}

/* Sem movimento reduzido, as etapas entram em cascata da esquerda para a
   direita — o mesmo sentido de leitura da linha.                          */
.method[data-shown="true"] .method-item { animation: etapa var(--dur-reveal) var(--ease-entrance) backwards; }
.method-item:nth-child(1) { animation-delay: 0ms; }
.method-item:nth-child(2) { animation-delay: 90ms; }
.method-item:nth-child(3) { animation-delay: 180ms; }
.method-item:nth-child(4) { animation-delay: 270ms; }
.method-item:nth-child(5) { animation-delay: 360ms; }
@keyframes etapa { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .method[data-shown="true"] .method-item { animation: none; }
}

/* ------------------------------------------------------------- SERVIÇOS --
   Frentes de atuação em accordion numerado — o desenho de serviços do
   padrão FN: número de ordem, título grande em Archivo oblíqua e corpo que
   abre sob demanda. Sem JS, todos os corpos permanecem abertos: o accordion
   é aprimoramento progressivo, nunca condição de acesso ao conteúdo.      */
.services-layout { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 1024px) {
  .services-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-9); }
  .services-intro { position: sticky; top: calc(var(--header-height) + var(--sp-6)); }
}
.services-intro p { color: var(--text-secondary); font-size: var(--fs-lg); }

.service { border-top: var(--border-width) solid var(--border-default); }
.service:last-child { border-bottom: var(--border-width) solid var(--border-default); }

.service-head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  width: 100%; padding-block: var(--sp-5);
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit;
}
.service-head .num {
  flex: none; min-width: 2.4ch;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-bold);
  font-size: var(--fs-base); color: var(--text-tertiary);
}
.service-title { margin: 0; }
.service-head { color: var(--text-heading); }
.service-head .ttl {
  flex: 1;
  font-size: var(--fs-2xl); line-height: var(--lh-snug);
}
/* O botão de abrir/fechar usa a forma octogonal do símbolo da marca — o
   mesmo recorte dos marcadores do método. Aberto, o "+" gira em "×".      */
.service-head .acc-ico {
  flex: none; align-self: center;
  width: 38px; height: 38px;
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
  background: var(--az-50); color: var(--az-700);
  display: grid; place-items: center;
  transition: transform var(--dur-normal) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.service-head:hover .acc-ico,
.service-head:focus-visible .acc-ico {
  background: var(--az-600); color: var(--gr-000);
}
.service.open .acc-ico { transform: rotate(45deg); }

/* Colapso só existe depois que o JS marca o contêiner como pronto. */
.service-body { overflow: hidden; }
.acc-ready .service-body {
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-standard);
}

.service-body-inner { padding: 0 0 var(--sp-6) calc(2.4ch + var(--sp-4)); }
.service-body p { font-size: var(--fs-base); color: var(--text-secondary); max-width: 62ch; }
.service-body ul {
  list-style: none; padding: 0; margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.service-body li { display: flex; gap: var(--sp-2); padding-block: var(--sp-1); }
.service-body li svg { flex: none; color: var(--az-600); margin-top: 4px; }
.service-cta {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--touch-comfort);
}
/* Par de saídas no fim de cada frente: avaliar agora ou aprofundar na
   página do serviço. */
.service-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-6); }
.service-cta:hover { color: var(--az-800); }
.service-cta svg { transition: transform var(--dur-normal) var(--ease-standard); }
.service-cta:hover svg { transform: translateX(3px); }
@media (max-width: 639.98px) {
  .service-head .ttl { font-size: var(--fs-xl); }
  .service-body-inner { padding-left: 0; }
}

/* ---------------------------------------------------------- FOTO EM BLOCO --
   Bloco fotográfico das seções internas. Substitui o placeholder .ph e herda
   a mesma forma: raio contido e um filete de acento na base, para a foto
   pertencer ao sistema e não flutuar solta.                                */
.foto-bloco {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-bottom: var(--rule-accent) solid var(--border-accent);
}
.foto-bloco img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------- SPLIT GENÉRICO -- */
.split { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .split.split-reverse > *:first-child { order: 2; }
}
.feature-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.feature-list li {
  display: flex; gap: var(--sp-3); padding-block: var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.feature-list li + li { border-top: var(--border-width) solid var(--border-subtle); }
.feature-list svg { flex: none; color: var(--az-600); margin-top: 3px; }
.feature-list b { display: block; margin-bottom: 2px; }
.feature-list span { color: var(--text-secondary); }

/* --------------------------------------------------------------- CASES --
   Garantias em grade de cartões com borda integral, no desenho dos cards
   de ecossistema do padrão FN — sem filete lateral.                       */
.cases { display: grid; gap: var(--sp-4); }
.case {
  padding: var(--sp-6);
  background: var(--surface-base);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}
.case:hover { border-color: var(--az-300); box-shadow: var(--shadow-sm); }
.on-brand .case { background: rgb(255 255 255 / .04); }
.case .tagline {
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-accent);
  font-weight: var(--fw-semibold); margin-bottom: var(--sp-2);
}
.case h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.case p { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 0; }
@media (min-width: 800px)  { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cases { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------- PROVA SOCIAL --
   Vitrine de clientes em carrossel contínuo. Duas listas idênticas correm
   lado a lado e o trilho anda metade da própria largura, então o ponto de
   emenda cai exatamente onde a segunda cópia começa: o laço é imperceptível.
   ------------------------------------------------------------------------ */
.marquee {
  position: relative; overflow: hidden;
  background: transparent;
  border: 0; border-radius: 0;
  padding-block: var(--sp-3);
  /* As pontas somem em vez de cortar um nome ao meio. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

.marquee-track { display: flex; width: max-content; animation: correr var(--dur-marquee) linear infinite; }

.marquee-set {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.marquee-set li {
  flex: none; min-width: 206px; padding-inline: var(--sp-5);
  height: 96px; display: grid; place-items: center;
}
.marquee-set li + li { border-left: var(--border-width) solid var(--border-subtle); }

/* A vitrine é prova, não anúncio de terceiros: os logos entram em escala de
   cinza e só ganham cor quando o visitante para sobre eles. A altura vem do
   token --h, calculado por equalização óptica logo no HTML.                */
.marquee-set img {
  height: var(--h, 34px); width: auto; display: block;
  /* --op é calculado por marca: cada logotipo tem um valor tonal próprio e,
     sem essa correção, um azul claro como o da GE some ao lado de um navy
     como o da JBS. A opacidade compensa a diferença de escuridão.        */
  filter: grayscale(1) opacity(var(--op, .68));
  transition: filter var(--dur-normal) var(--ease-standard);
}
/* O arquivo da Crown é a versão negativa, feita para fundo escuro: sobre o
   branco ela seria invisível. Invertida em escala de cinza, resulta na mesma
   silhueta escura que a versão positiva teria nesta vitrine.             */
.marquee-set img.logo-negativo { filter: grayscale(1) invert(1) opacity(var(--op, .68)); }

.marquee-set li:hover img { filter: grayscale(0) opacity(1); }
.marquee-set li:hover img.logo-negativo { filter: grayscale(1) invert(1) opacity(1); }

@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* O visitante pode parar para ler. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* Sem movimento: vira uma faixa rolável, navegável por teclado. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scroll-snap-type: x proximity; }
  .marquee-track { animation: none; }
  .marquee-set[aria-hidden="true"] { display: none; }
  .marquee-set li { scroll-snap-align: center; }
}

/* Em telas estreitas as células encolhem para caberem duas de cada vez —
   um nome isolado no quadro não comunica "vitrine de clientes".          */
@media (max-width: 620px) {
  .marquee {
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .marquee-set li {
    min-width: 148px; padding-inline: var(--sp-4); height: 78px;
  }
  /* Reduz proporcionalmente, preservando a relação óptica entre as marcas. */
  .marquee-set img { height: calc(var(--h, 34px) * 0.84); }
  .marquee-track { animation-duration: var(--dur-marquee-tight); }
}

.marquee-nota {
  margin: var(--sp-4) 0 0; text-align: center;
  font-size: var(--fs-sm); color: var(--text-secondary); max-width: none;
}

.seals { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.seal {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md); background: var(--surface-base);
}
.seal .mark {
  flex: none; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-sm); letter-spacing: var(--ls-tight);
  color: var(--az-800); background: var(--az-50);
  border: var(--border-width) solid var(--az-200);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); line-height: 1;
}
.seal p { font-size: var(--fs-xs); color: var(--text-secondary); margin: 0; }
.seal b { display: block; font-size: var(--fs-sm); color: var(--text-primary); margin-bottom: 2px; }
@media (min-width: 800px) { .seals { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ FAQ -- */
.faq {
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-base);
}
.faq details + details { border-top: var(--border-width) solid var(--border-default); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); cursor: pointer; list-style: none;
  padding: var(--sp-4) var(--sp-5); min-height: var(--touch-comfort);
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg); letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-standard);
}
.faq summary:hover { color: var(--az-600); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: currentColor; color: var(--az-600);
  transition: transform var(--dur-normal) var(--ease-standard);
  -webkit-mask: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke="black" stroke-width="2.5" fill="none"/></svg>');
  mask: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke="black" stroke-width="2.5" fill="none"/></svg>');
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 var(--sp-5) var(--sp-5); }
.faq .answer p { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 0; max-width: 72ch; }

/* ------------------------------------------------------------ FORMULÁRIO -- */
.form-shell { display: grid; gap: var(--sp-8); }
@media (min-width: 1000px) { .form-shell { grid-template-columns: .85fr 1.15fr; gap: var(--sp-9); } }

.form-card {
  background: var(--gr-000);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  color: var(--gr-900);
}
@media (min-width: 640px) { .form-card { padding: var(--sp-8); } }

.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

/* Ritmo vertical entre blocos do formulário (dentro do grid, o gap resolve). */
.form-card > form > .form-grid,
.form-card > form > .field { margin-bottom: var(--sp-4); }
.form-card > form > .field:last-of-type { margin-bottom: var(--sp-6); }

.field label {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--gr-900); margin-bottom: var(--sp-2);
}
.field .opt { font-weight: var(--fw-regular); color: var(--gr-500); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--field-height);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-text); font-size: var(--fs-base);
  color: var(--gr-900); background: var(--gr-000);
  border: var(--border-width) solid var(--gr-300);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.field textarea { min-height: 116px; resize: vertical; line-height: var(--lh-normal); }
.field input::placeholder, .field textarea::placeholder { color: var(--gr-500); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--az-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--az-700);
  box-shadow: 0 0 0 3px rgb(31 70 142 / .18);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: var(--sem-erro); background: var(--sem-erro-bg);
}
.field .error {
  display: none; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); color: var(--sem-erro);
}
.field.invalid .error { display: flex; }

/* Especificidade elevada de propósito: precisa vencer `.field label`. */
.field label.consent {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-xs); font-weight: var(--fw-regular);
  color: var(--gr-600); line-height: var(--lh-normal);
  margin-bottom: 0; cursor: pointer;
}
.consent > span { flex: 1; }
.consent input {
  flex: none; width: 20px; height: 20px; min-height: 0; margin-top: 2px;
  accent-color: var(--az-600);
}
.consent a { color: var(--az-700); }

.form-note {
  display: flex; gap: var(--sp-2); align-items: center;
  font-size: var(--fs-xs); color: var(--gr-500); margin-top: var(--sp-4);
}
.form-note svg { flex: none; color: var(--sem-sucesso); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-aside .assurance { list-style: none; padding: 0; margin: var(--sp-6) 0 0; }
.form-aside .assurance li {
  display: flex; gap: var(--sp-3); padding-block: var(--sp-4);
  border-top: var(--border-width) solid var(--border-default);
  font-size: var(--fs-sm);
}
.form-aside .assurance svg { flex: none; color: var(--ci-400); margin-top: 3px; }
.form-aside .assurance b { display: block; margin-bottom: 2px; }
.form-aside .assurance span { color: var(--text-secondary); }

/* ----------------------------------------------------------------- ALERT -- */
.alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md);
  border-left: var(--rule-accent) solid; font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.alert svg { flex: none; margin-top: 2px; }
.alert p { margin: 0; }
.alert b { display: block; }
.alert-ok   { background: var(--sem-sucesso-bg); border-color: var(--sem-sucesso); color: var(--sem-sucesso); }
.alert-err  { background: var(--sem-erro-bg);    border-color: var(--sem-erro);    color: var(--sem-erro); }
.alert-info { background: var(--sem-info-bg);    border-color: var(--sem-info);    color: var(--sem-info); }

/* ---------------------------------------------------------------- RODAPÉ -- */
.site-footer { background: var(--az-900); color: var(--az-200); padding-block: var(--sp-9) var(--sp-6); }
.footer-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 760px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.site-footer h3 {
  font-size: var(--fs-2xs); letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--ci-400); margin-bottom: var(--sp-4); font-weight: var(--fw-semibold);
}
.site-footer p { font-size: var(--fs-sm); color: var(--az-300); }
.site-footer a { color: var(--az-200); text-decoration: none; }
.site-footer a:hover { color: var(--ci-400); text-decoration: underline; }
/* Botões dentro do rodapé não herdam a cor de link do rodapé. */
.site-footer a.btn { text-decoration: none; }
.site-footer a.btn-primary { color: var(--action-primary-text); }
.site-footer a.btn-primary:hover { color: var(--action-primary-text); background: var(--action-primary-hover); }
.site-footer a.btn-secondary { color: var(--action-secondary-text); }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.site-footer li { padding-block: var(--sp-2); }
.site-footer .unit { margin-bottom: var(--sp-4); }
.site-footer .unit b { display: block; color: var(--gr-000); font-size: var(--fs-sm); }
.site-footer .unit span { font-size: var(--fs-xs); color: var(--az-300); }
.footer-bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: var(--border-width) solid rgb(255 255 255 / .1);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between; font-size: var(--fs-xs); color: var(--az-400);
}

/* --------------------------------------------------------- CTAs FLUTUANTES */
/* Botão flutuante do WhatsApp — cores oficiais do canal: círculo no verde
   de marca com o glifo em branco. Fora do sistema Millenium de propósito:
   é um selo de reconhecimento de terceiro, e alterá-lo enfraquece o
   reconhecimento imediato que faz esse botão funcionar.                   */
.wa-float {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4);
  z-index: var(--z-float-cta);
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--whatsapp-marca); color: var(--gr-000);
  display: grid; place-items: center;
  /* O anel no verde escuro do canal dá ao botão uma borda perceptível sobre
     as seções claras: o verde oficial rende só 1,98:1 contra branco e o
     controle deixaria de ser identificável (WCAG 1.4.11).                 */
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--whatsapp-acao);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.wa-float:hover { transform: scale(1.06); color: var(--gr-000); }
.wa-float:focus-visible { outline-color: var(--az-700); }

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-float-cta);
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4)
           calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / .96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-lg);
  transform: translateY(110%);
  transition: transform var(--dur-normal) var(--ease-standard);
}
.mobile-cta[data-visible="true"] { transform: translateY(0); }
.mobile-cta .btn { flex: 1; }

@media (min-width: 768px) { .mobile-cta { display: none; } }
@media (max-width: 767.98px) {
  .wa-float { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------- REVELAR --
   Entrada do padrão FN: além do deslocamento, o elemento chega desfocado e
   levemente reduzido, e assenta em foco — a página parece "revelar" e não
   apenas deslizar. O conteúdo nunca depende da transição para existir:
   sem JS, nada recebe .reveal e tudo fica visível.                        */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  filter: blur(6px);
}
.reveal[data-shown="true"] {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--dur-reveal) var(--ease-entrance),
              transform var(--dur-reveal) var(--ease-entrance),
              filter var(--dur-reveal) var(--ease-entrance);
}
.reveal-delay-1[data-shown="true"] { transition-delay: 90ms; }
.reveal-delay-2[data-shown="true"] { transition-delay: 180ms; }
.reveal-delay-3[data-shown="true"] { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------------- PÁGINA OBRIGADO -- */
.thanks { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.thanks .icon {
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: var(--sem-sucesso-bg); color: var(--sem-sucesso);
  display: grid; place-items: center; margin: 0 auto var(--sp-6);
}
.thanks h1 { max-width: 18ch; margin-inline: auto; }
.thanks p { margin-inline: auto; }

/* ------------------------------------------------------- BARRA DE SEÇÃO --
   Réguas de abertura do padrão FN: número da seção à esquerda, rótulo entre
   parênteses à direita, sobre um fio. Substituem o eyebrow nas seções
   principais e dão a sensação de documento técnico paginado.              */
.section-topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-8);
  border-bottom: var(--border-width) solid var(--border-default);
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--fw-semibold); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary);
}
.on-brand .section-topbar { border-bottom-color: var(--border-on-brand); color: var(--text-on-brand-mute); }
.section-topbar .tb-num { color: var(--text-accent); }
.on-brand .section-topbar .tb-num { color: var(--ci-400); }
.section-topbar .tb-right { display: flex; gap: var(--sp-5); }

/* ------------------------------------------------------------- STATEMENT --
   Declaração de abertura em Archivo heavy oblíqua — o "big statement" do
   padrão FN, na voz tipográfica do manual.                                */
.statement {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-heavy);
  font-size: var(--fs-statement); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tighter);
  word-spacing: calc(var(--display-word-spacing) + 0.015em);
  color: var(--text-heading);
  max-width: 40ch; margin: 0;
  text-wrap: balance;
}
.statement em { font-style: var(--display-style); color: var(--ci-700); }

/* ---------------------------------------------------------------- TICKER --
   Faixa dupla de texto corrido entre seções: unidades e alcance numa linha,
   certificações e estrutura na outra, correndo em sentidos opostos.
   É ambiente, não chamada — por isso a velocidade baixa e o cinza.        */
.ticker {
  overflow: hidden;
  border-block: var(--border-width) solid var(--border-default);
  background: var(--surface-base);
}
.ticker-row { padding-block: var(--sp-4); }
.ticker-row + .ticker-row { border-top: var(--border-width) solid var(--border-subtle); }
.ticker-track {
  display: flex; align-items: center; gap: var(--sp-6);
  width: max-content;
  animation: correr var(--dur-ticker) linear infinite;
}
.ticker-track.reverse { animation-direction: reverse; }
.ticker-item {
  flex: none; white-space: nowrap;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--fw-semibold); font-size: var(--fs-ticker);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--gr-600);
}
.ticker-item b { font-weight: inherit; color: var(--az-600); }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
  .ticker-track [aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------- MARQUEE DO RODAPÉ ------
   Assinatura tipográfica gigante correndo sobre o azul profundo, como o
   "CAUSE IMPACTO" do padrão FN. Decorativa: fica atrás de aria-hidden e
   em contraste baixo de propósito — é textura, não mensagem.              */
.footer-marquee {
  overflow: hidden;
  margin-top: var(--sp-8);
  padding-block: var(--sp-5);
  border-top: var(--border-width) solid rgb(255 255 255 / .08);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.footer-marquee-track {
  display: flex; align-items: center; gap: var(--sp-7);
  width: max-content;
  animation: correr var(--dur-marquee-foot) linear infinite;
}
.footer-marquee-text {
  flex: none; white-space: nowrap;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-heavy);
  font-size: var(--fs-marquee); line-height: 1;
  letter-spacing: var(--ls-tighter); text-transform: uppercase;
  color: rgb(255 255 255 / .12);
}
.footer-marquee .octo-dot { width: 14px; height: 14px; background: rgb(141 214 244 / .35); }
@media (prefers-reduced-motion: reduce) {
  .footer-marquee-track { animation: none; }
}

/* ------------------------------------------------- MICRO-INTERAÇÕES -------
   Setas dos botões respondem ao hover — o gesto de convite do padrão FN. */
.btn svg { transition: transform var(--dur-normal) var(--ease-standard); }
.btn:hover svg { transform: translateX(2px); }

/* ======================================================= TOPO FLUTUANTE ==
   Estrutura nova do cabeçalho: faixa de anúncio colada no topo + cartão de
   navegação flutuante com grade [logo | menu | ação], mega menu de
   serviços e painel mobile em acordeão. A pilha inteira é fixa; as páginas
   compensam a altura com body.has-topnav e os heroes sangram por trás com
   .under-nav.                                                             */
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); }

body.has-topnav { padding-top: var(--header-height); }
.under-nav { margin-top: calc(-1 * var(--header-height)); }
.section.under-nav { padding-top: calc(var(--header-height) + var(--section-y)); }
.nf-hero.under-nav { min-height: 100vh; min-height: 100svh; }
body.nav-travada { overflow: hidden; }

/* --- Faixa de anúncio -------------------------------------------------- */
.announce {
  background: var(--ci-400); color: var(--az-900);
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  text-align: center; line-height: 1.3;
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
}
.announce a {
  color: inherit; font-weight: var(--fw-bold);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.announce a:hover { color: var(--az-700); }
@media (max-width: 479.98px) { .announce .announce-extra { display: none; } }

/* --- Cartão flutuante -------------------------------------------------- */
.topnav-outer { padding: var(--sp-3) var(--sp-6) 0; }
@media (max-width: 479.98px) { .topnav-outer { padding: var(--sp-2) var(--sp-4) 0; } }

.topnav-card {
  position: relative;
  background: var(--gr-000);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-5) var(--sp-3);
}
@media (max-width: 767.98px) { .topnav-card { border-radius: var(--radius-lg); padding-inline: var(--sp-4) var(--sp-2); } }

.topnav-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--sp-5);
  min-height: var(--navcard-height);
}
@media (max-width: 1023.98px) { .topnav-grid { grid-template-columns: 1fr auto; gap: var(--sp-4); min-height: var(--navcard-height-tight); } }

.topnav-brand { display: inline-flex; align-items: center; justify-self: start; }
.topnav-brand img { height: calc(var(--logo-altura) * 0.95); width: auto; display: block; }

/* --- Menu central (desktop) -------------------------------------------- */
.topnav-menu { display: flex; align-items: center; gap: var(--sp-1); }
@media (max-width: 1023.98px) { .topnav-menu { display: none; } }

.topnav-link,
.topnav-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-text); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); line-height: 1.5;
  color: var(--gr-900); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.topnav-link:hover, .topnav-toggle:hover { background: var(--az-50); color: var(--az-800); }
.topnav-toggle svg { flex: none; color: var(--az-600); transition: transform var(--dur-normal) var(--ease-standard); }
.topnav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.topnav-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
@media (max-width: 767.98px) { .topnav-right .topnav-cta { display: none; } }

.topnav-burger {
  display: none; align-items: center; justify-content: center;
  width: var(--touch-min); height: var(--touch-min);
  background: none; border: 0; cursor: pointer;
  color: var(--az-800); border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.topnav-burger:hover { background: var(--az-50); }
@media (max-width: 1023.98px) { .topnav-burger { display: inline-flex; } }
.topnav-burger .icon-close { display: none; }
.topnav-burger[aria-expanded="true"] .icon-open { display: none; }
.topnav-burger[aria-expanded="true"] .icon-close { display: block; }

/* --- Mega menu de serviços (desktop) ----------------------------------- */
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-2));
  display: none; transform-origin: 50% 0;
}
.mega[data-open="true"] { display: block; animation: mega-abrir var(--dur-normal) var(--ease-entrance); }
@keyframes mega-abrir {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 1023.98px) { .mega { display: none !important; } }

.mega-card {
  background: var(--gr-000);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-6);
}
.mega-grid { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-8); align-items: start; }
@media (max-width: 1279.98px) {
  .mega-grid { grid-template-columns: auto 1fr; }
  .mega-preview { display: none; }
}

.mega-badge {
  display: inline-block;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--gr-600);
  margin-bottom: var(--sp-5);
}

.mega-services { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: var(--sp-3) var(--sp-6); }
.mega-item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2); border-radius: var(--radius-md);
  text-decoration: none; color: var(--text-primary);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.mega-item:hover { background: var(--az-50); color: var(--text-primary); }
.mega-item .ico {
  flex: none; width: 34px; height: 34px;
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
  background: var(--az-50); color: var(--az-700);
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.mega-item:hover .ico { background: var(--az-600); color: var(--gr-000); }
.mega-item b {
  display: block; font-family: var(--font-display);
  font-stretch: var(--display-stretch); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); letter-spacing: var(--ls-tight);
  color: var(--az-800); margin-bottom: 1px;
}
.mega-item span { display: block; font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-normal); }

.mega-col a {
  display: block; padding-block: var(--sp-1);
  font-size: var(--fs-sm); color: var(--text-primary); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.mega-col a:hover { color: var(--az-600); text-decoration: underline; text-underline-offset: 0.18em; }

.mega-preview { width: 280px; text-decoration: none; color: var(--text-primary); display: block; }
.mega-preview .pic {
  border-radius: var(--radius-md); overflow: hidden;
  border-bottom: var(--rule-accent) solid var(--border-accent);
  margin-bottom: var(--sp-3);
}
.mega-preview .pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mega-preview b { display: block; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.mega-preview .go {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--az-600);
  text-decoration: underline; text-underline-offset: 0.18em;
}
.mega-preview:hover .go { color: var(--az-800); }

/* --- Painel mobile ------------------------------------------------------ */
.mnav {
  display: none;
  border-top: var(--border-width) solid var(--border-subtle);
  padding: var(--sp-4) var(--sp-2) var(--sp-5);
  max-height: calc(100dvh - var(--header-height) - var(--sp-6));
  overflow: auto;
}
.mnav[data-open="true"] { display: block; }
@media (min-width: 1024px) { .mnav { display: none !important; } }

.mnav-tile {
  background: var(--az-50); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.mnav-tile b { display: block; font-size: var(--fs-sm); color: var(--az-800); }
.mnav-tile a { font-size: var(--fs-sm); color: var(--az-700); text-underline-offset: 2px; }
.mnav-tile img { width: 92px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }

.mnav-acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: var(--touch-comfort);
  padding: var(--sp-2); background: none; border: 0; cursor: pointer;
  font-family: var(--font-text); font-size: var(--fs-base);
  font-weight: var(--fw-semibold); color: var(--gr-900); text-align: left;
}
.mnav-acc-btn svg { flex: none; color: var(--az-600); transition: transform var(--dur-normal) var(--ease-standard); }
.mnav-acc-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.mnav-acc-body { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-standard); }
.mnav-acc-body .mega-item { padding-inline: var(--sp-2); }

.mnav > a.mnav-link {
  display: flex; align-items: center; min-height: var(--touch-comfort);
  padding: var(--sp-2); font-size: var(--fs-base); font-weight: var(--fw-semibold);
  color: var(--gr-900); text-decoration: none; border-radius: var(--radius-md);
}
.mnav > a.mnav-link:hover { background: var(--az-50); color: var(--az-800); }
.mnav-rule { height: var(--border-width); background: var(--border-subtle); margin: var(--sp-2) var(--sp-2); }
.mnav-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) var(--sp-2) 0;
  font-size: var(--fs-xs); color: var(--text-secondary);
}
.mnav-foot a { color: var(--az-700); }
.mnav .btn { width: calc(100% - var(--sp-4)); margin: var(--sp-2) var(--sp-2) 0; }

/* --- Véu de fundo quando mega ou painel abertos ------------------------- */
.topnav-backdrop {
  position: fixed; inset: 0; z-index: var(--z-sticky);
  background: rgb(13 29 60 / .38);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-standard);
}
.topnav-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ========================================================== HERO CLARO ==
   Hero no padrão do template hero-2: cabeçalho de duas colunas (manchete
   com trecho esmaecido e texto de apoio ao lado), ações, marquee estreito
   de logos e grade
   de duas imagens com parallax — a da direita com um cartão de prova
   sobreposto. Fundo claro derivado do azul (az-50), o "bg-1" do template. */
.hero2 {
  position: relative;
  /* Iluminação sutil sobre o fundo claro: um facho do azul claro oficial
     nascendo no topo e um sopro do azul institucional à direita — as duas
     cores do manual diluídas, nenhum matiz novo.                          */
  background:
    radial-gradient(56rem 30rem at 50% -6%, rgb(141 214 244 / .28), transparent 62%),
    radial-gradient(48rem 30rem at 88% 34%, rgb(31 70 142 / .07), transparent 62%),
    radial-gradient(44rem 26rem at 8% 62%, rgb(141 214 244 / .12), transparent 60%),
    var(--az-50);
  padding-block: calc(var(--header-height) + var(--sp-8)) var(--sp-9);
  /* Os deslizes laterais da grade não podem gerar barra de rolagem
     horizontal durante a entrada. */
  overflow: hidden;
}

/* Grade de linhas finas ao fundo — papel milimetrado na voz do manual:
   o traço é o azul institucional diluído em branco, nunca um cinza neutro.
   Esmaece rumo à base para não competir com os tiles e o texto de apoio.  */
.hero2::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(31 70 142 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(31 70 142 / .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hero2 > .wrap { position: relative; z-index: var(--z-raised); }

.hero2-center {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-5);
  max-width: 72rem; margin-inline: auto;
  text-align: center;
}

/* A manchete quebra exatamente antes do trecho esmaecido, como no template:
   "Nem tudo que se transporta" em cima, "pode ser substituído." embaixo.
   Sem a inclinação oblíqua dos demais títulos — na manchete central do
   hero claro ela fica reta, como no template.                             */
.hero2 h1 { font-size: var(--fs-hero); margin: 0; max-width: none; font-style: normal; }
.hero2 h1 .mute { display: block; color: var(--az-400); font-style: normal; }
.hero2 .lead { max-width: 64ch; margin: 0; }
.hero2-ctas { justify-content: flex-start; }

/* Cabeçalho do hero em duas colunas: manchete à esquerda e texto de apoio
   à direita, alinhados pela base para que a última linha dos dois blocos
   assente na mesma régua. Abaixo de 900px volta a empilhar centralizado,
   que é como o bloco nasceu.                                              */
.hero2-head {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-7);
  align-items: end;
  max-width: 72rem; margin-inline: auto;
  text-align: left;
}
.hero2-head-main {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-5);
}
/* Coluna da direita: apoio + ações juntos, uma decisão só no alto da
   página em vez de um botão perdido depois da grade de mídia.            */
.hero2-head-aside {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4);
}
/* O texto de apoio divide a linha com a manchete, então desce um degrau da
   escala (--fs-lg para --fs-base) e não compete com ela.                   */
.hero2-head .lead { max-width: 46ch; font-size: var(--fs-base); }
@media (max-width: 1023.98px) {
  .hero2-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center; text-align: center;
  }
  .hero2-head-main,
  .hero2-head-aside { align-items: center; }
  .hero2-head .lead { max-width: 60ch; }
  .hero2-ctas { justify-content: center; }
}

/* Faixa de clientes — o rótulo dá contexto ao strip (sem ele os logos ficam
   órfãos) e o marquee ocupa a largura do wrap, no mesmo eixo do cabeçalho,
   em vez da tira estreita centrada que brigava com o texto à esquerda.    */
.hero2-clients {
  max-width: 72rem; margin: var(--sp-8) auto 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.hero2-clients .eyebrow { margin-bottom: 0; }
.hero2-marquee {
  position: relative; overflow: hidden;
  /* O trilho é max-content: sem largura explícita a tira estoura o wrap
     quando o bloco centraliza no empilhamento.                            */
  width: 100%; min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
@media (max-width: 1023.98px) {
  .hero2-clients { align-items: center; }
}
.hero2-marquee-track {
  display: flex; align-items: center; gap: var(--sp-7);
  width: max-content;
  animation: correr var(--dur-marquee) linear infinite;
}
.hero2-marquee:hover .hero2-marquee-track { animation-play-state: paused; }
.hero2-marquee img {
  flex: none; width: auto;
  height: calc(var(--h, 34px) * 0.8);
  filter: grayscale(1) opacity(var(--op, .68));
}
.hero2-marquee img.logo-negativo { filter: grayscale(1) invert(1) opacity(var(--op, .68)); }
@media (prefers-reduced-motion: reduce) {
  .hero2-marquee { overflow-x: auto; }
  .hero2-marquee-track { animation: none; }
  .hero2-marquee [aria-hidden="true"] { display: none; }
}

/* Grade do hero no desenho do template de 3 colunas: foto grande, coluna
   interna com dois tiles empilhados (prova social + número em tile escuro)
   e tile neutro com o símbolo da marca.                                   */
.hero2-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-2); margin-top: var(--sp-7);
  align-items: stretch;
}

.hero2-stack { display: grid; grid-template-rows: auto 1fr; gap: var(--sp-2); min-width: 0; }

/* Tile de prova social — logos de clientes + linha de leitura. */
.hero2-proof {
  background: var(--gr-000);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-3);
}
.hero2-proof .logos { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.hero2-proof .logos img {
  width: auto; height: calc(var(--h, 34px) * 0.62);
  filter: grayscale(1) opacity(var(--op, .68));
}
.hero2-proof p { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); max-width: none; }

/* Tile de número — o "1M+" do template, com dado verificável.
   Foto pura ao fundo, sem véu de cor; uma sombra leve no texto segura a
   leitura do branco sobre a fotografia.                                   */
.hero2-stat {
  background-color: var(--az-600);
  background-image: url("../img/stat-28anos.webp");
  background-size: cover;
  background-position: center 24%;
  background-repeat: no-repeat;
  color: var(--gr-000);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--sp-1);
  min-height: 180px;
}
.hero2-stat .num {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-heavy);
  font-size: var(--fs-5xl); line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 14px rgb(13 29 60 / .55);
}
.hero2-stat .rot {
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--gr-000);
  text-shadow: 0 1px 10px rgb(13 29 60 / .6);
}

/* Tile fotográfico — cliente com as caixas da marca ao fundo; a foto
   preenche a coluna e as caixas Millenium fazem o papel do símbolo. */
.hero2-brandtile {
  position: relative; overflow: hidden;
  background: var(--gr-100);
  border-radius: var(--radius-lg);
}
.hero2-brandtile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
}

/* --- Coreografia de entrada da grade (padrão do template Webflow) --------
   Cada coluna chega da sua direção: a foto desliza da esquerda, os tiles
   internos sobem em cascata, o tile da marca entra da direita e o símbolo
   assenta por último, em fade + escala. Sem blur aqui: o movimento é
   direcional e limpo, como no template.                                   */
.hero2-grid .reveal { filter: none; }
.hero2-grid .reveal[data-shown="true"] { filter: none; }

.hero2-media.reveal     { transform: translateX(-56px); }
.hero2-proof.reveal     { transform: translateY(44px); }
.hero2-stat.reveal      { transform: translateY(72px); }
.hero2-brandtile.reveal { transform: translateX(56px); }

/* Estado revelado explícito: estas regras precisam vencer os "from" acima,
   que vêm depois do bloco genérico de .reveal no arquivo.                 */
.hero2-media.reveal[data-shown="true"],
.hero2-proof.reveal[data-shown="true"],
.hero2-stat.reveal[data-shown="true"],
.hero2-brandtile.reveal[data-shown="true"] { transform: none; }

.hero2-proof.reveal[data-shown="true"]     { transition-delay: 120ms; }
.hero2-stat.reveal[data-shown="true"]      { transition-delay: 260ms; }
.hero2-brandtile.reveal[data-shown="true"] { transition-delay: 400ms; }

.hero2-brandtile img {
  opacity: 0; transform: scale(1.08);
  transition: opacity var(--dur-reveal) var(--ease-entrance) 650ms,
              transform var(--dur-reveal) var(--ease-entrance) 650ms;
}
.hero2-brandtile[data-shown="true"] img { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero2-media.reveal, .hero2-proof.reveal,
  .hero2-stat.reveal, .hero2-brandtile.reveal { opacity: 1; transform: none; }
  .hero2-brandtile img { opacity: 1; transform: none; transition: none; }
}
.hero2-media {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  height: 512px;
}
/* A mídia é 20% mais alta que a moldura e centrada no excedente, para o
   deslocamento do parallax nunca expor borda. Sem JS ou com movimento
   reduzido, fica um corte estático normal. Vale para a foto e para o
   vídeo da frota, que entra no mesmo recorte.                             */
.hero2-media picture { position: static; }
.hero2-media img,
.hero2-media video {
  position: absolute; left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
}
/* O vídeo é vertical (720×1280) e nasce fora da moldura: o recorte fica
   na altura, e o display block evita a folga de linha de base.            */
.hero2-media video { display: block; background: var(--az-100, #dceefb); }
@media (prefers-reduced-motion: reduce) {
  .hero2-media img,
  .hero2-media video { top: 0; height: 100%; }
}
@media (max-width: 1023.98px) {
  .hero2-grid { grid-template-columns: 1fr 1fr; }
  .hero2-brandtile { grid-column: 1 / -1; min-height: 260px; }
}
@media (max-width: 767.98px) {
  .hero2-grid { grid-template-columns: 1fr; }
  .hero2-media { height: 360px; }
  .hero2-brandtile { min-height: 300px; }
}
@media (max-width: 479.98px) {
  .hero2-media { height: 250px; }
}

/* Cartão de prova sobreposto — o "widget" do template com dados
   verificáveis, no desenho do sistema (filete de acento na base).         */
.hero2-widget {
  position: absolute; z-index: var(--z-raised);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--gr-000);
  border-radius: var(--radius-md);
  border-bottom: var(--rule-accent) solid var(--border-accent);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-7);
  text-align: center;
  min-width: 220px;
}
.hero2-widget .num {
  display: block;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-heavy);
  font-size: var(--fs-4xl); line-height: 1;
  color: var(--az-600);
}
.hero2-widget .rot {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--gr-600);
}
.hero2-widget .certs {
  display: block; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: var(--border-width) solid var(--border-subtle);
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--fw-bold); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); color: var(--az-800);
}

/* ------------------------------------------------------------ PÁGINA 404 --
   O código do erro vira marca d'água tipográfica na lateral — a mesma voz
   do marquee do rodapé — e a página devolve o visitante às frentes.       */
.nf-hero {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  display: grid; align-items: center;
  position: relative; overflow: hidden;
}
.nf-hero > .wrap { position: relative; z-index: var(--z-raised); }
.nf-code {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-heavy);
  font-size: calc(var(--fs-marquee) * 2.2); line-height: 1;
  letter-spacing: var(--ls-tighter);
  color: rgb(255 255 255 / .07);
  pointer-events: none; user-select: none;
}

/* ------------------------------------------------- PÁGINA DE CONVERSÃO --
   Selo de confirmação no recorte octogonal do símbolo da marca.           */
.thanks-octo {
  width: 76px; height: 76px;
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
  background: var(--ci-400); color: var(--az-900);
  display: grid; place-items: center;
  margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------- IMPRESSÃO */
@media print {
  .site-header, .mobile-cta, .wa-float, .nav-panel,
  .topnav, .topnav-backdrop,
  .ticker, .footer-marquee, .hero-clients { display: none !important; }
  body.has-topnav { padding-top: 0 !important; }
  .under-nav { margin-top: 0 !important; }
  .hero, .on-brand, .on-brand-deep, .authority {
    background: var(--marca-branco) !important;
    color: var(--marca-preto) !important;
  }
  .hero::before, .hero::after, .pattern-bg::before { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}