/* ============================================================================
   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 -- */
/* =========================================================== 02 AUTORIDADE
   Seção de duas colunas no padrão value-features do template BYQ: coluna de
   conteúdo à esquerda (selo, manchete, apoio, ação e a grade de números) e
   moldura de mídia à direita, com o mesmo recorte e parallax do hero.
   Substituiu a barra fina de estatísticas. O prefixo é "autoridade"
   porque o nome "split" já pertence a outro componente deste arquivo.                                 */
.autoridade {
  padding-block: var(--sp-10);
  border-top: var(--border-width) solid rgb(255 255 255 / .08);
}
.autoridade-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: stretch;
}
/* A coluna de conteúdo distribui: intro no topo, cartões colados na base,
   para os dois blocos assentarem na mesma régua da moldura ao lado.        */
.autoridade-main {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sp-8); min-width: 0;
}
.autoridade-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.autoridade-intro h2 { margin: 0; max-width: 20ch; }
.autoridade-intro .lead { margin: 0; max-width: 46ch; font-size: var(--fs-base); }
.autoridade-intro .btn { margin-top: var(--sp-2); }

/* Selo de seção — o badge do template nos cantos definidos do manual, não
   no pill arredondado.                                                     */
.autoridade-badge {
  display: inline-flex; align-items: center;
  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(--text-label-dark);
}

/* Grade de números — os quatro dados verificáveis que antes formavam a barra
   de autoridade, agora em cartões claros sobre o azul.                      */
.autoridade-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.autoridade-card {
  display: flex; flex-direction: column; gap: var(--sp-5);
  background: var(--gr-000);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.autoridade-card .ico {
  flex: none; width: 44px; height: 44px;
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
  background: var(--az-50); color: var(--az-700);
  display: grid; place-items: center;
}
.autoridade-card 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(--az-600); margin-bottom: var(--sp-2);
}
.autoridade-card span {
  display: block; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--gr-600); line-height: var(--lh-normal);
}
/* O cartão de certificações não tem número: o texto entra na medida de um
   título de cartão para não fingir escala de dado.                         */
.autoridade-card-text b { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }

/* Moldura de mídia — mesmo desenho do hero: imagem 20% mais alta que a
   moldura, centrada no excedente, deslizando com a rolagem.                */
.autoridade-media {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 520px;
}
.autoridade-media picture { position: static; }
.autoridade-media img {
  position: absolute; left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
}
.autoridade-media.reveal { transform: translateX(56px); }
.autoridade-media.reveal[data-shown="true"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .autoridade-media img { top: 0; height: 100%; }
  .autoridade-media.reveal { transform: none; }
}
@media (max-width: 1023.98px) {
  .autoridade-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .autoridade-media { min-height: 380px; }
  .autoridade-intro h2 { max-width: none; }
}
@media (max-width: 479.98px) {
  .autoridade-cards { grid-template-columns: minmax(0, 1fr); }
  .autoridade-media { min-height: 260px; }
}

/* -------------------------------------------------- ROTEADOR DE INTENÇÃO -- */
/* Roteador de intenção (raiz / hero azul): grade de cartões compactos. */
.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); } }

/* Roteador de intenção (v2 / hero branco): intro fixa à esquerda + pilha de
   cards, um por frente. Sem foto por frente — o manual pede octógono e azul,
   não banco de imagem — então cada card é um painel da marca (azul profundo +
   textura de octógonos + símbolo em marca d'água + ícone da frente), com selo
   numerado no topo e uma ilha branca de conteúdo embaixo.                    */
.svc-split { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) {
  .svc-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--sp-8); }
}

.svc-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.svc-intro h2 { margin: 0; }
.svc-intro p  { margin: 0; color: var(--text-secondary); }
.svc-intro-cta { margin-top: var(--sp-2); }
@media (min-width: 1024px) {
  .svc-intro { position: sticky; top: calc(var(--header-height) + var(--sp-5)); max-width: 36ch; }
}

.svc-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-full);
  font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-brand);
}
.svc-eyebrow .octo-dot { width: 10px; height: 10px; background: var(--az-600); }

.svc-stack { display: flex; flex-direction: column; gap: var(--sp-5); }

.svc-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 420px; padding: var(--sp-4);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--text-primary);
  transition: transform var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--text-primary); }
@media (max-width: 767.98px) { .svc-card { min-height: 360px; } }
@media (max-width: 479.98px) { .svc-card { min-height: 320px; padding: var(--sp-3); } }

/* Fundo de marca do card */
.svc-card-bg { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(155deg, var(--az-700) 0%, var(--az-950) 100%); }
.svc-card-bg::before { content: ""; position: absolute; inset: 0;
  background: url("../img/pattern-millenium.svg") center / 150px repeat; opacity: .10; }
.svc-card-bg::after { content: ""; position: absolute; right: -6%; bottom: -8%;
  width: 58%; aspect-ratio: 1 / 1;
  background: url("../img/icone-millenium-branco.svg") right bottom / contain no-repeat; opacity: .06; }

.svc-card-tag {
  position: relative; z-index: 1; align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border: var(--border-width) solid var(--border-on-brand);
  border-radius: var(--radius-full);
  font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); color: var(--ci-200);
}

.svc-card-ico {
  position: relative; z-index: 1; margin: var(--sp-6) 0 auto var(--sp-1);
  color: var(--ci-400);
  transition: transform var(--dur-normal) var(--ease-standard);
}
.svc-card-ico svg { width: 60px; height: 60px; display: block; }
.svc-card:hover .svc-card-ico { transform: translateY(-3px); }

.svc-card-panel {
  position: relative; z-index: 1; margin-top: var(--sp-6);
  background: var(--surface-raised); border-radius: var(--radius-md);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4);
}
.svc-card-titles { display: flex; flex-direction: column; gap: var(--sp-2); }
.svc-card-title {
  font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  color: var(--text-heading);
}
.svc-card-sub { font-size: var(--fs-sm); color: var(--text-secondary); }

.svc-card-cta {
  position: relative; align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight); color: var(--text-brand);
}
.svc-card-arrow { transition: transform var(--dur-normal) var(--ease-standard); }
.svc-card:hover .svc-card-arrow { transform: translateX(3px); }
.svc-card-underline {
  position: absolute; left: 0; bottom: -3px; height: 2px; width: 0;
  background: var(--az-600); transition: width var(--dur-normal) var(--ease-standard);
}
.svc-card:hover .svc-card-underline { width: 100%; }

/* ------------------------------------------------------------- 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-7); }
/* No desktop o aside gruda (sticky) ao lado do formulário e alinha pelo topo:
   o formulário é naturalmente mais alto, então o aside acompanha a rolagem em
   vez de deixar um vazio embaixo. O rodapé de credenciais aproxima as alturas. */
@media (min-width: 1000px) {
  .form-shell { grid-template-columns: .85fr 1.15fr; gap: clamp(var(--sp-8), 5vw, var(--sp-10)); align-items: start; }
  .form-aside { position: sticky; top: calc(var(--header-height) + var(--sp-6)); }
}

.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; } }

/* Grupos lógicos numerados ("1 Sobre você" / "2 A operação"): passo + rótulo
   com hairline. Chunking que organiza o formulário e cria uma linguagem de
   PROCESSO coesa com o fluxo numerado do aside. */
.form-group-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: var(--border-width) solid var(--gr-200);
}
.form-step {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--az-600); color: var(--gr-000);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: 1;
}
.form-group-label {
  margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--gr-900);
}
.form-group-fields { display: grid; gap: var(--sp-4); }

/* Ritmo vertical entre os blocos de topo do formulário. */
.form-card > form > .form-group + .form-group { margin-top: clamp(var(--sp-6), 3vw, var(--sp-7)); }
.form-card > form > .consent-field { margin-top: var(--sp-6); }
.form-card > form > button[type="submit"] { margin-top: 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-600); }
.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-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
/* Select com chevron próprio (o nativo varia entre navegadores). */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 16px;
}
.field textarea { min-height: 92px; resize: vertical; line-height: var(--lh-normal); }
.field input::placeholder, .field textarea::placeholder { color: var(--gr-600); }
.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-600); 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; }

/* Kicker de nó no padrão das seções novas (substitui o marcador numerado). */
.form-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--text-brand); margin-bottom: var(--sp-4);
}
.form-kicker svg { width: 18px; height: 18px; flex: none; }

/* Garantias com chip de ícone (no idioma dos cards novos), sem as divisórias. */
.form-aside .assurance { list-style: none; padding: 0; margin: var(--sp-7) 0 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.form-aside .assurance li { display: flex; gap: var(--sp-4); align-items: flex-start; font-size: var(--fs-sm); }
.assurance-ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--ci-400);
  background: rgb(255 255 255 / .06); border: var(--border-width) solid var(--border-on-brand);
}
.form-aside .assurance b { display: block; margin-bottom: 2px; color: var(--gr-000); }
.form-aside .assurance li > span:last-child { color: var(--text-secondary); }

/* Fluxo em 3 passos (aside): timeline vertical com a linha conectando os
   números. Materializa "avaliação → plano → preço". Números com fundo sólido
   az-800 interrompem a linha atrás deles. */
.form-flow {
  list-style: none; margin: clamp(var(--sp-6), 3vw, var(--sp-7)) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-5); position: relative;
}
.form-flow::before {
  content: ""; position: absolute; left: 15px; top: 15px; bottom: 15px;
  width: 2px; background: rgb(255 255 255 / .12);
}
.form-flow li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.form-flow-num {
  position: relative; z-index: 1; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--az-800); color: var(--ci-400);
  border: var(--border-width) solid rgb(141 214 244 / .35);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: 1;
}
.form-flow b { display: block; color: var(--gr-000); font-size: var(--fs-base); letter-spacing: var(--ls-tight); }
.form-flow p { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* Garantias em chips: variedade visual em relação ao fluxo acima. */
.form-guarantees {
  list-style: none; margin: clamp(var(--sp-6), 3vw, var(--sp-7)) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.form-guarantees li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  background: rgb(255 255 255 / .06); border: var(--border-width) solid var(--border-on-brand);
  font-size: var(--fs-xs); color: var(--text-on-brand-soft);
}
.form-guarantees svg { flex: none; color: var(--ci-400); }

/* Rodapé de credenciais do aside: reforço de confiança no ponto de conversão. */
.form-aside-foot {
  margin-top: clamp(var(--sp-7), 4vw, var(--sp-8));
  padding-top: var(--sp-6);
  border-top: var(--border-width) solid var(--border-on-brand);
}
.form-cred-marks {
  display: block; font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: normal; font-weight: var(--fw-bold); font-size: var(--fs-base);
  letter-spacing: var(--ls-wide); color: var(--ci-400);
}
.form-aside-foot p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); 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; overflow-wrap: anywhere; }
.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-200);
}

/* ---------------------------------------------------------------------------
   RODAPÉ EM CARD (padrão Ordina) — só a raiz usa .site-footer--card; as páginas
   de serviço seguem no .site-footer plano acima. Card escuro arredondado sobre
   o fundo mais profundo: [marca + colunas + atendimento] · statement + CTA · base.
   --------------------------------------------------------------------------- */
.site-footer--card { background: var(--az-950); padding-block: clamp(var(--sp-6), 4vw, var(--sp-9)); }
.footer-card {
  background: var(--az-900);
  border: var(--border-width) solid rgb(255 255 255 / .08);
  border-radius: var(--radius-xl);
  padding: clamp(var(--sp-6), 4vw, var(--sp-9));
}
.footer-top { display: grid; gap: var(--sp-8) var(--sp-7); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-top { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } }
.footer-brand img { height: calc(var(--logo-altura) * 1.2); width: auto; display: block; margin-bottom: var(--sp-4); }
.footer-brand p { font-size: var(--fs-sm); color: var(--az-300); max-width: 42ch; margin: 0 0 var(--sp-3); }
.footer-brand .footer-cnpj { font-size: var(--fs-xs); }
.footer-col-h {
  display: block; font-size: var(--fs-2xs); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--ci-400); font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
}
.footer-unit { margin-bottom: var(--sp-4); }
.footer-unit b { display: block; color: var(--gr-000); font-size: var(--fs-sm); }
.footer-unit span { font-size: var(--fs-xs); color: var(--az-300); }

.footer-rule { height: var(--border-width); background: rgb(255 255 255 / .1); margin-block: clamp(var(--sp-6), 3vw, var(--sp-8)); }

.footer-statement { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-6); flex-wrap: wrap; }
.footer-statement-title {
  margin: 0; max-width: 20ch; color: var(--gr-000);
  font-size: var(--fs-4xl); font-style: normal; line-height: var(--lh-tight); text-wrap: balance;
}
.footer-statement-cta { flex: none; border-radius: var(--radius-full); }

.footer-base {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--az-300);
}
.footer-base-links { display: flex; gap: var(--sp-4); }
@media (max-width: 559.98px) { .footer-statement-title { font-size: var(--fs-3xl); } }

/* --------------------------------------------------------- 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); }

@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-secondary);
}
.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);
  max-width: 900px;
  margin-inline: auto;
}
/* 2 colunas: frentes de atuação (preenche) + preview. A coluna "A Millenium"
   foi removida — os links institucionais já vivem no nav e no rodapé. */
.mega-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: start; }
@media (max-width: 1279.98px) {
  .mega-grid { grid-template-columns: 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;
  /* A superfície segue o contexto: com .on-brand .on-brand-deep no <section>
     o hero fica no azul escuro da marca (az-900); sem as classes, volta ao
     branco sólido do --surface-base do documento.                         */
  background: var(--surface-base);
  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;
}

/* A grade de linhas finas ao fundo (papel milimetrado, na voz do manual)
   saiu junto com os fachos: o fundo do hero é branco sólido. Para trazê-la
   de volta, é reativar o .hero2::before com os dois linear-gradient de
   rgb(31 70 142 / .035) em background-size: 56px 56px.                    */
.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; }
/* Sobre o azul escuro o trecho esmaecido inverte de lado na rampa: az-200
   entrega 8,7:1 contra az-900, contra os 1,8:1 do az-400.                 */
.hero2.on-brand h1 .mute { color: var(--az-200); }
.hero2 .lead { max-width: 64ch; margin: 0; }

/* Cabeçalho do hero: manchete e texto de apoio numa coluna só, no eixo à
   esquerda em todas as larguras — parágrafo longo centralizado obriga o
   olho a procurar o início de cada linha.                                 */
.hero2-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-5);
  max-width: 72rem; margin-inline: auto;
  text-align: left;
}
/* O apoio acompanha a manchete na largura total da coluna, na escala --fs-lg
   dos demais leads do site. O align-self: stretch é necessário porque, num
   flex column com align-items: flex-start, o parágrafo encolhe para o
   conteúdo e ignora a medida cheia.                                       */
.hero2-head .lead {
  align-self: stretch; max-width: none;
  font-size: var(--fs-lg);
}

/* 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-5);
}
/* O rótulo mora dentro do filete de separação: o texto abre a linha e o
   hairline corre dele até a borda do wrap, esmaecendo na ponta no mesmo
   desenho da máscara do marquee logo abaixo.                             */
.hero2-clients .eyebrow {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; margin-bottom: 0;
}
.hero2-clients .eyebrow::after {
  content: ""; flex: 1 1 auto;
  height: var(--border-width);
  background: linear-gradient(90deg,
    var(--border-default), var(--border-default) 94%, transparent);
}
.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);
}

.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)); }
/* Sobre o azul escuro os papéis se invertem: os logos escuros passam a ser
   negativados e os que já eram claros voltam ao natural.                  */
.hero2.on-brand .hero2-marquee img { filter: grayscale(1) invert(1) opacity(var(--op, .68)); }
.hero2.on-brand .hero2-marquee img.logo-negativo { filter: grayscale(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(--surface-sunken); }
@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);
}

/* ================================================== 03 FRENTES (SLIDER) ==
   Slider de cartões no padrão cms-grid do template BYQ: cabeçalho com selo,
   manchete e navegação; trilho com ~2 cartões visíveis por vez. As setas
   usam o recorte octogonal do símbolo. Sem JS as setas não aparecem e o
   trilho vira rolagem horizontal nativa com scroll-snap.                  */
.frentes-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--sp-7); margin-bottom: var(--sp-8);
}
.frentes-intro {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4); max-width: 34rem;
}
.frentes-intro h2 { margin: 0; }
.frentes-badge {
  display: inline-flex; align-items: center;
  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(--text-accent);
}
.frentes-nav { display: flex; align-items: center; gap: var(--sp-7); }
.frentes-mais {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-brand);
  text-decoration: underline; text-underline-offset: 0.22em;
}
.frentes-mais:hover { color: var(--az-800); }
.frentes-setas { display: none; gap: var(--sp-2); }
.frentes-pronto .frentes-setas { display: flex; }
.frentes-seta {
  width: 48px; height: 48px;
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
  background: var(--az-50); color: var(--az-700);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.frentes-seta:hover { background: var(--az-600); color: var(--gr-000); }
.frentes-seta:active { transform: scale(.9); }
.frentes-seta[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* Sem JS o trilho rola no gesto nativo; com JS a máscara fecha e as setas
   conduzem por transform.                                                 */
.frentes-mask { overflow-x: auto; scroll-snap-type: x proximity; }
.frentes-pronto .frentes-mask { overflow: hidden; }
.frentes-track {
  display: flex; gap: 2%;
  transition: transform var(--dur-reveal) var(--ease-entrance);
}

.frentes-card {
  position: relative; overflow: hidden;
  flex: none; width: 49%;
  min-height: 440px;
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; gap: var(--sp-7);
  text-decoration: none; color: var(--text-primary);
  background: var(--az-800);
  scroll-snap-align: start;
}
.frentes-card .foto { position: absolute; inset: 0; z-index: 0; }
.frentes-card .foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.frentes-card:hover .foto img { transform: scale(1.04); }

.frentes-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.frentes-tag {
  display: inline-flex; align-items: center;
  border: var(--border-width) solid rgb(255 255 255 / .5);
  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-000);
  background: rgb(13 29 60 / .22);
  text-shadow: 0 1px 8px rgb(13 29 60 / .5);
}

.frentes-info {
  position: relative; z-index: 2; width: 100%;
  background: var(--gr-000);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
}
.frentes-info b {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-bold);
  font-size: var(--fs-xl); line-height: var(--lh-snug);
  color: var(--text-heading);
}
.frentes-info .txt { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
.frentes-info .go {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-accent);
  text-decoration: underline; text-underline-offset: 0.22em;
}
.frentes-card:hover .frentes-info .go { color: var(--az-800); }

@media (max-width: 991.98px) {
  .frentes-head { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .frentes-nav { width: 100%; justify-content: space-between; }
}
@media (max-width: 767.98px) {
  .frentes-card { min-height: 360px; }
}
@media (max-width: 479.98px) {
  .frentes-track { gap: 5%; }
  .frentes-card { width: 72%; min-height: 320px; padding: var(--sp-3); }
  .frentes-info { padding: var(--sp-4); }
  .frentes-seta { width: 40px; height: 40px; }
}

/* Slider de diferenciais (v2 · seção 03): reaproveita o shell visual do slider
   de frentes (badge, setas octogonais, cabeçalho) com cartões de "feature" —
   caixa de ícone no azul-claro oficial + título + texto. Rolagem nativa com
   scroll-snap; sem JS as setas não aparecem (.feat-ready as revela).          */
.feat-lead  { margin: 0; max-width: 42ch; color: var(--text-secondary); font-size: var(--fs-base); }
.feat-certs {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-secondary);
}

.feat-arrows { display: none; gap: var(--sp-2); }
.feat-ready .feat-arrows { display: flex; }
/* A seção é az-50; a seta padrão também é az-50 e sumiria. Aqui ela ganha
   fundo branco com contorno para ler como botão sobre o tom da seção. */
.feat-arrows .frentes-seta { background: var(--surface-raised); border: var(--border-width) solid var(--border-default); }
.feat-arrows .frentes-seta:hover { background: var(--az-600); border-color: var(--az-600); }

.feat-viewport {
  display: flex; gap: var(--sp-4);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
}
.feat-viewport::-webkit-scrollbar { display: none; }

.feat-card {
  flex: none; width: 32%;
  scroll-snap-align: start; min-height: 300px;
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
}
.feat-ico {
  flex: none; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: var(--radius-md);
  background: var(--ci-400); color: var(--az-900);
}
.feat-ico svg { width: 34px; height: 34px; display: block; }
.feat-text  { display: flex; flex-direction: column; gap: var(--sp-2); }
.feat-title {
  font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  color: var(--text-heading);
}
.feat-body  { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); }

@media (max-width: 991.98px) { .feat-card { width: 46%; } }
@media (max-width: 767.98px) { .feat-card { min-height: 280px; } }
@media (max-width: 479.98px) { .feat-card { width: 82%; padding: var(--sp-4); } }

/* "O que está em jogo" (v2 · seção 05) no espírito do grid de planos do template
   BYQ: cabeçalho central + dois cartões lado a lado; o da Millenium em azul
   profundo, como o "plano" destacado. Cruz octogonal no caminho por preço,
   check no caminho Millenium. O cartão escuro leva .on-brand e os tokens
   semânticos se reescrevem sozinhos (texto, borda, botão).                   */
/* Cabeçalho no padrão das seções novas (kicker de nó + manchete + lead,
   centralizado, sem o marcador numerado). */
.stakes-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4); max-width: 52rem; margin: 0 auto clamp(var(--sp-8), 5vw, var(--sp-10));
}
.stakes-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--text-brand);
}
.stakes-kicker svg { width: 18px; height: 18px; flex: none; }
.stakes-title-main { margin: 0; max-width: 24ch; font-size: var(--fs-4xl); color: var(--text-heading); text-wrap: pretty; }
.stakes-lead { margin: 0; max-width: 62ch; font-size: var(--fs-base); color: var(--text-secondary); }

.stakes-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: stretch; }
@media (min-width: 900px) { .stakes-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.stakes-card {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-7); border-radius: var(--radius-xl);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
}
.stakes-card.is-millenium { background: var(--az-900); border-color: transparent; box-shadow: var(--shadow-lg); }

.stakes-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.stakes-tag {
  display: inline-flex; align-items: center;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  background: var(--ci-400); color: var(--az-900);
  font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
}
.stakes-tag--muted { background: var(--surface-sunken); color: var(--text-secondary); }
.stakes-title {
  font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--text-heading);
}
.stakes-sub { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }

.stakes-divider { height: var(--border-width); background: var(--border-default); }

.stakes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.stakes-list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary);
}
.stakes-ico {
  flex: none; margin-top: 1px; display: grid; place-items: center;
  width: 22px; height: 22px;
  clip-path: var(--octo); -webkit-clip-path: var(--octo);
}
.stakes-ico svg { width: 13px; height: 13px; }
.stakes-ico--no  { background: var(--surface-sunken); color: var(--text-tertiary); }
.stakes-ico--yes { background: rgb(255 255 255 / .14); color: var(--ci-400); }

.stakes-cta { margin-top: auto; align-self: flex-start; }
.stakes-foot { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); }

@media (max-width: 479.98px) { .stakes-card { padding: var(--sp-5); } }

/* Timeline do método (v2 · seção 06) no espírito do template BYQ: coluna
   esquerda fixa (eyebrow + título + lead + CTA) e trilho vertical numerado à
   direita, com linha que preenche conforme a rolagem. Seção .on-brand: dots,
   números e linha no azul-claro oficial; títulos em branco — os tokens já são
   reescritos pelo contexto de marca.                                         */
.tl-split { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: start; }
@media (min-width: 1024px) { .tl-split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--sp-10); } }

.tl-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.tl-intro h2 { margin: 0; }
.tl-intro p  { margin: 0; color: var(--text-secondary); }
.tl-cta { margin-top: var(--sp-3); }
@media (min-width: 1024px) { .tl-intro { position: sticky; top: calc(var(--header-height) + var(--sp-6)); } }

.tl-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-3); font-family: var(--font-display); font-style: normal;
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-brand);
}

.tl-track { position: relative; }
.tl-line { position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--border-default); border-radius: var(--radius-full); }
.tl-line-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--ci-400); border-radius: var(--radius-full); }

.tl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.tl-step {
  position: relative; padding-left: var(--sp-7);
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sp-4); align-items: start;
}
.tl-dot {
  position: absolute; left: 0; top: 5px; width: 12px; height: 12px;
  background: var(--ci-400); clip-path: var(--octo); -webkit-clip-path: var(--octo);
}
.tl-num {
  font-family: var(--font-display); font-style: normal; font-weight: var(--fw-bold);
  font-size: var(--fs-lg); letter-spacing: var(--ls-tight); color: var(--text-brand);
  line-height: 1; padding-top: 2px;
}
.tl-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.tl-title {
  font-family: var(--font-display); font-style: normal; font-weight: var(--fw-bold);
  font-size: var(--fs-xl); letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  color: var(--text-heading);
}
.tl-body p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-normal); }

@media (max-width: 479.98px) {
  .tl-step { grid-template-columns: 1fr; gap: var(--sp-1); padding-left: var(--sp-6); }
  .tl-num  { font-size: var(--fs-sm); }
}

/* Estrutura própria (seção 07) — composição assimétrica: foto da frota em
   destaque (com faixa de provas verificadas) + manifesto de quatro pilares
   separados por filete. Sem cards idênticos (proibido pelo manual e pelas
   anti-referências), sem eyebrow (a régua numerada já rotula a seção); o
   octógono da marca é a moldura dos ícones.                                  */
.estr-head { max-width: 62ch; margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9)); }
.estr-head h2 { margin: 0 0 var(--sp-4); }
.estr-head .lead { margin: 0; max-width: 60ch; }

/* ----------------------------------------------------------------------------
   BENTO de capacidades (padrão AgentFlow, nativo e on-brand). Grid assimétrico:
   foto-hero alta (span 7, 2 linhas) + célula-destaque de números escura + célula
   de chips de capacidade + três frentes. Sobre o plano cinza; células brancas e
   uma escura de destaque. Mobile-first: 1 col → 2 col (≥640) → 12 col (≥900).  */
.estr-bento { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) {
  .estr-bento { grid-template-columns: repeat(2, 1fr); }
  .estr-cell-hero, .estr-cell-tags { grid-column: 1 / -1; }
  .estr-cell-pillar:last-child { grid-column: 1 / -1; }
}
/* Grid alinhado: hero 8 + veículos 4 no topo; a linha da coluna 8 é a mesma
   que separa a 2ª da 3ª frente embaixo, então as bordas coincidem. */
@media (min-width: 900px) {
  .estr-bento { grid-template-columns: repeat(12, 1fr); }
  .estr-cell-hero  { grid-column: span 8; }
  .estr-cell-tags  { grid-column: span 4; }
  .estr-cell-pillar, .estr-cell-pillar:last-child { grid-column: span 4; }
}

.estr-cell {
  margin: 0;                              /* zera a margin padrão do <figure> do hero */
  border-radius: var(--radius-xl);
  background: var(--surface-base);
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: clamp(var(--sp-5), 2.4vw, var(--sp-6));
  min-width: 0;
}

/* HERO — foto da frota: foco visual da seção, com chip (topo) e números
   sobrepostos (base). Um só bloco de destaque, sem célula escura solta. */
.estr-cell-hero {
  position: relative; overflow: hidden; isolation: isolate; padding: 0;
  box-shadow: var(--shadow-md); min-height: clamp(300px, 30vw, 380px);
}
.estr-cell-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.estr-cell-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(8 16 33 / .9) 0%, rgb(8 16 33 / .55) 26%, rgb(8 16 33 / .12) 52%, transparent 74%);
}
.estr-hero-chip {
  position: absolute; z-index: 2;
  top: clamp(var(--sp-4), 2.4vw, var(--sp-5)); left: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  background: rgb(13 29 60 / .6); border: var(--border-width) solid rgb(255 255 255 / .18);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--gr-000);
}
.estr-hero-chip .octo-dot { flex: none; width: 8px; height: 8px; background: var(--ci-400);
  clip-path: var(--octo); -webkit-clip-path: var(--octo); }

/* Números sobrepostos na base do hero. */
.estr-hero-stats {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) clamp(var(--sp-5), 4vw, var(--sp-8));
  padding: clamp(var(--sp-8), 6vw, var(--sp-10)) clamp(var(--sp-5), 3vw, var(--sp-7)) clamp(var(--sp-5), 2.5vw, var(--sp-6));
}
.estr-hstat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.estr-hstat-top { display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal; }
.estr-hstat b { font-weight: var(--fw-heavy); font-size: var(--fs-3xl); line-height: 1;
  letter-spacing: var(--ls-tighter); color: var(--gr-000); }
.estr-hstat i { font-style: normal; font-weight: var(--fw-bold); font-size: var(--fs-base);
  letter-spacing: var(--ls-tight); color: var(--ci-400); }
.estr-hstat small { font-family: var(--font-text); font-size: var(--fs-xs); color: rgb(255 255 255 / .82); }

/* Célula de conteúdo (tags + frentes): ícone + título + corpo */
.estr-cell-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--az-50); color: var(--az-700); margin-bottom: var(--sp-4);
}
.estr-cell-ico svg { width: 22px; height: 22px; }
.estr-cell-title {
  display: block; font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  color: var(--text-heading); margin-bottom: var(--sp-3);
}
.estr-cell-pillar p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); }

/* TAGS — chips de capacidade (padrão task-chips do AgentFlow). Conteúdo
   centralizado na vertical para preencher a altura do hero ao lado. */
.estr-cell-tags { display: flex; flex-direction: column; justify-content: center; }
.estr-tags { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.estr-tags li {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  background: var(--surface-sunken); border: var(--border-width) solid var(--border-default);
  font-size: var(--fs-sm); color: var(--text-secondary);
}

/* --------------------------------------------------------------- IMPRESSÃO */
@media print {
  .site-header, .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; }
}


/* ============================================================================
   02 — A MILLENIUM  (padrão "About" do template Farmio, reconstruído on-brand)
   Kicker à esquerda, manchete grande à direita e uma régua horizontal de
   quatro números com divisórias verticais. Entrada coreografada por GSAP
   (main.js): a manchete acende palavra a palavra na rolagem, as divisórias
   sobem e os rótulos surgem; os números contam pelo observer de [data-count].
   ============================================================================ */
.about {
  padding-block: var(--section-y);
  background: var(--surface-brand-soft);
}
.about-head {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 2.18fr);
  gap: var(--sp-6) var(--sp-8);
  align-items: start;
  margin-bottom: clamp(var(--sp-8), 5vw, var(--sp-11));
}
.about-kicker {
  padding-top: var(--sp-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-accent);
}
.about-heading { min-width: 0; }
.about-title {
  margin: 0; max-width: 20ch;
  font-size: var(--fs-5xl); line-height: var(--lh-tight);
}
/* Nas páginas de serviço (.about--noruler) a manchete é uma FRASE inteira —
   no fs-5xl/20ch ela vira um bloco alto e enorme. Reduz um degrau e alarga
   para ler como afirmação, em menos linhas. Não afeta a home (manchete curta). */
.about--noruler .about-title { font-size: var(--fs-4xl); }
@media (min-width: 1024px) { .about--noruler .about-title { max-width: 34ch; } }
/* Palavras embrulhadas pelo main.js para o acender progressivo. Sem JS a
   manchete é só texto. */
.about-title .w-i { display: inline-block; will-change: opacity; }
.about-certs {
  margin: var(--sp-5) 0 0; max-width: 54ch;
  font-size: var(--fs-base); color: var(--text-secondary);
}
.about-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-brand);
  text-decoration: none;
}
.about-link svg { transition: transform var(--dur-normal) var(--ease-standard); }
.about-link:hover svg { transform: translateX(4px); }

/* Régua de MEDIÇÃO — os quatro dados verificáveis assentam numa régua: linha
   superior contínua (desenha da esquerda na entrada, via --rule-sx) e um tique
   de graduação pendurado sobre cada numeral (desce via --sy). É a tradução do
   "planejamos antes de mover" em forma; substitui a divisória genérica de
   coluna e afasta o bloco do hero-metric de SaaS. Afixos (%, m², +) ficam
   subordinados ao numeral, que é o herói. */
.about-stats {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: var(--sp-6);
}
.about-stats::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: var(--border-width); background: var(--border-default);
  transform: scaleX(var(--rule-sx, 1)); transform-origin: left;
}
.about-stat { position: relative; padding: 0 var(--sp-6); --sy: 1; }
.about-stat:first-child { padding-left: 0; }
.about-stat::before {
  content: ""; position: absolute; top: 0; left: var(--sp-6);
  width: 2px; height: 18px; background: var(--az-600);
  transform: scaleY(var(--sy)); transform-origin: top;
}
.about-stat:first-child::before { left: 0; }

.about-stat-num {
  display: inline-flex; align-items: baseline; margin-top: var(--sp-6); margin-bottom: var(--sp-3);
  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; letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums; color: var(--text-heading);
}
/* Unidade/sinal subordinados: metade do corpo do numeral, peso 700. O tamanho
   faz a hierarquia — sem cor nova, respeitando o manual. */
.about-stat-affix { font-size: 0.5em; font-weight: var(--fw-bold); letter-spacing: 0; margin-left: 0.08em; }
.about-stat-affix--pre { margin-left: 0; margin-right: 0.06em; }
.about-stat-label {
  display: block; max-width: 22ch;
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-secondary); line-height: var(--lh-normal);
}
@media (max-width: 1023.98px) {
  .about-head { grid-template-columns: minmax(0, 1fr); }
  .about-title { max-width: none; font-size: var(--fs-4xl); }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-8); }
  .about-stat:nth-child(odd) { padding-left: 0; }
  .about-stat:nth-child(odd)::before { left: 0; }
}
/* Celular: a coluna única empilhada fica alta e solta. Vira uma PLANILHA de
   medição — cada dado é uma linha (numeral herói à esquerda, rótulo à direita)
   separada por filete. Mantém a linha superior animada (--rule-sx); os tiques
   verticais dão lugar aos filetes horizontais, coerente com a régua. */
@media (max-width: 479.98px) {
  .about-stats { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 0; }
  .about-stat, .about-stat:first-child { padding: var(--sp-4) 0; }
  .about-stat {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  }
  .about-stat + .about-stat { border-top: var(--border-width) solid var(--border-default); }
  .about-stat:last-child { border-bottom: var(--border-width) solid var(--border-default); }
  .about-stat::before { display: none; }
  .about-stat-num { margin: 0; font-size: var(--fs-3xl); flex: none; }
  .about-stat-label { max-width: 18ch; min-width: 0; text-align: right; }
}


/* ============================================================================
   03 — NOSSOS SERVIÇOS  (padrão "Our services" do template Utomic, on-brand)
   Fusão de "Nossas soluções" + "Roteador" numa seção escura (az-900 via
   .on-brand-deep no HTML): intro centralizado e as seis frentes como linhas
   horizontais de três áreas — [título + botão] · [descrição + etiquetas] ·
   [foto]. O preto do Utomic vira o azul institucional; a foto é produção
   própria com o tratamento do manual. Hover acende o botão e aproxima a foto.
   ============================================================================ */
.srv { padding-block: var(--section-y); }
.srv-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4); max-width: 48rem;
  margin: 0 auto clamp(var(--sp-8), 5vw, var(--sp-10));
}
.srv-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--text-brand);
}
.srv-kicker svg { width: 18px; height: 18px; flex: none; }
.srv-title { margin: 0; max-width: 24ch; font-size: var(--fs-4xl); color: var(--gr-000); text-wrap: pretty; }
.srv-head-cta { margin-top: var(--sp-2); border-radius: var(--radius-full); }

.srv-list { border-top: var(--border-width) solid var(--border-subtle); }
.srv-row {
  position: relative; display: grid;
  grid-template-columns: 1fr 1.05fr 1.12fr;
  grid-template-areas: "head mid media";
  align-items: stretch; min-height: 232px; overflow: hidden;
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-decoration: none; color: var(--gr-000);
  transition: background-color var(--dur-normal) var(--ease-standard);
}
.srv-row:hover { background: rgb(255 255 255 / .04); color: var(--gr-000); }
.srv-row:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -4px; }
.srv-row-head, .srv-row-mid {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6); min-width: 0;
  border-right: var(--border-width) solid var(--border-subtle);
}
.srv-row-head { grid-area: head; }
.srv-row-mid  { grid-area: mid; }
.srv-row-title {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: var(--display-style); font-weight: var(--fw-heavy);
  font-size: var(--fs-2xl); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight); color: var(--gr-000); max-width: 12ch;
}
.srv-row-arrow {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border-default);
  display: grid; place-items: center; color: var(--gr-000);
  transition: background-color var(--dur-normal) var(--ease-standard),
              color var(--dur-normal) var(--ease-standard),
              border-color var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-entrance);
}
.srv-row:hover .srv-row-arrow {
  background: var(--ci-400); color: var(--az-900); border-color: var(--ci-400);
  transform: translate(3px, -3px);
}
.srv-row-desc {
  margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal);
  color: var(--text-on-brand-soft); max-width: 42ch;
}
.srv-row-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.srv-tag {
  display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-full);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--gr-000);
}
/* Foto como cartão com respiro — sem isso as fotos das linhas vizinhas se emendam. */
.srv-row-media {
  grid-area: media; position: relative; overflow: hidden;
  margin: var(--sp-5);
  border-radius: var(--radius-lg);
}
.srv-row-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.srv-row:hover .srv-row-media img { transform: scale(1.05); }
/* Véu leve só na borda esquerda, pra assentar a foto no azul da seção. */
.srv-row-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(13 29 60 / .22), transparent 40%);
}

@media (max-width: 1023.98px) {
  .srv-row { grid-template-columns: 1fr 1fr; grid-template-areas: "media media" "head mid"; }
  .srv-row-media { min-height: 200px; }
  .srv-row-mid { border-right: 0; }
}
@media (max-width: 639.98px) {
  .srv-row { grid-template-columns: 1fr; grid-template-areas: "media" "head" "mid"; min-height: 0; }
  .srv-row-media { min-height: 176px; }
  .srv-row-head { flex-direction: row; align-items: center; border-right: 0;
    border-bottom: var(--border-width) solid var(--border-subtle); }
  .srv-row-title { max-width: none; }
}


/* ============================================================================
   04 — CONTROLE EM TEMPO REAL  (padrão "Real time ai control" do Utomic)
   Grid bento sobre o azul institucional: card alto com aurora animada à
   esquerda + grid 2×2 de capacidades à direita (três de texto, uma de foto).
   O preto do Utomic vira az-950; o glow é feito de blobs de azul OFICIAL
   (radiais az-500/ci-500/az-700 borrados), animados no main.js. Só tokens.
   ============================================================================ */
.ctrl { padding-block: var(--section-y); background: var(--surface-sunken); }
.ctrl-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4); max-width: 46rem; margin: 0 auto clamp(var(--sp-8), 5vw, var(--sp-10));
}
.ctrl-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--text-brand);
}
.ctrl-kicker svg { width: 18px; height: 18px; flex: none; }
.ctrl-title { margin: 0; max-width: 22ch; font-size: var(--fs-4xl); color: var(--text-heading); text-wrap: pretty; }

.ctrl-bento {
  display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.14fr);
  gap: var(--sp-5); align-items: stretch;
  background: transparent;
}

/* Card alto com aurora animada. */
.ctrl-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8);
  min-height: 520px; padding: var(--sp-7);
  border-radius: var(--radius-xl); background: var(--az-950);
}
/* Fundo fotográfico do card de rastreamento: vista aérea noturna do caminhão
   (olhar de satélite), abaixo da aurora. A foto já é escura — véu leve, só o
   rodapé escurece mais p/ título e CTA. Sem esta regra o <picture> vira imagem
   solta no fluxo do card — NÃO remover sem tirar o markup do index. */
.ctrl-hero-media { position: absolute; inset: 0; z-index: -2; }
.ctrl-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ctrl-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(13 29 60 / .2) 0%, rgb(13 29 60 / .08) 42%, rgb(13 29 60 / .58) 100%);
}
.ctrl-aurora { position: absolute; inset: 0; z-index: -1; }
.ctrl-blob { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; }
.ctrl-blob-1 { left: -12%; top: 18%; width: 62%; height: 55%;
  background: radial-gradient(circle, var(--az-500), transparent 68%); opacity: .60; }
.ctrl-blob-2 { right: -14%; top: -8%; width: 58%; height: 58%;
  background: radial-gradient(circle, var(--ci-500), transparent 68%); opacity: .40; }
.ctrl-blob-3 { left: 24%; bottom: -16%; width: 54%; height: 50%;
  background: radial-gradient(circle, var(--az-700), transparent 70%); opacity: .55; }
.ctrl-live {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border-on-brand); background: rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--gr-000);
}
.ctrl-live-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ci-400);
  animation: ctrl-pulse 2.2s var(--ease-standard) infinite;
}
@keyframes ctrl-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(141 214 244 / .55); }
  70%  { box-shadow: 0 0 0 9px rgb(141 214 244 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(141 214 244 / 0); }
}
.ctrl-hero-title { margin: 0; max-width: 22ch; font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--gr-000); }
.ctrl-hero-cta { margin-top: var(--sp-5); align-self: flex-start; border-radius: var(--radius-full); }

/* Grid 2×2 de capacidades, com divisórias internas. */
.ctrl-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--az-950);
}
.ctrl-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-7);
  padding: var(--sp-6); min-height: 232px; min-width: 0;
  border-right: var(--border-width) solid var(--border-subtle);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.ctrl-card:nth-child(2n) { border-right: 0; }
.ctrl-card:nth-child(n+3) { border-bottom: 0; }
.ctrl-card-ico {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border-on-brand); background: rgb(255 255 255 / .06);
  display: grid; place-items: center; color: var(--gr-000);
}
.ctrl-card-ico svg { width: 22px; height: 22px; }
.ctrl-card-text { display: flex; flex-direction: column; gap: var(--sp-2); }
.ctrl-card-title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight); color: var(--gr-000);
}
.ctrl-card-desc { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-on-brand-soft); }
.ctrl-card--img { padding: 0; position: relative; overflow: hidden; }
.ctrl-card--img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.3) saturate(.8) contrast(.95) brightness(.7);
}
.ctrl-card--img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(13 29 60 / .55), transparent 60%);
}

@media (max-width: 1023.98px) {
  .ctrl-bento { grid-template-columns: minmax(0, 1fr); }
  .ctrl-hero { min-height: 420px; }
}
@media (max-width: 559.98px) {
  .ctrl-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .ctrl-card { border-right: 0; }
  .ctrl-card:nth-child(n+3) { border-bottom: var(--border-width) solid var(--border-subtle); }
  .ctrl-card:last-child { border-bottom: 0; }
  .ctrl-card--img { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .ctrl-live-dot { animation: none; } }


/* ============================================================================
   05 — POR QUE A MILLENIUM  (padrão "Why choose us" do Utomic, sobre a frota)
   Cabeçalho dividido (kicker + manchete à esquerda, ação à direita) + três
   cards de foto com número grande que conta, rótulo e descrição. Fundo branco;
   cada card é um painel de foto escura (frota/estrutura) com véu az-950.
   ============================================================================ */
.why { padding-block: var(--section-y); background: var(--surface-base); }
.why-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5) var(--sp-8); flex-wrap: wrap;
  margin-bottom: clamp(var(--sp-8), 5vw, var(--sp-10));
}
.why-head-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); max-width: 42rem; }
.why-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--text-brand);
}
.why-kicker svg { width: 18px; height: 18px; flex: none; }
.why-title { margin: 0; font-size: var(--fs-4xl); color: var(--text-heading); text-wrap: pretty; }
.why-cta { flex: none; border-radius: var(--radius-full); }

.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.why-card {
  position: relative; overflow: hidden; isolation: isolate; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; padding: var(--sp-7);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  background: var(--surface-brand-deep); color: var(--gr-000);
}
/* Durante a entrada em leque, o card do meio fica por cima dos laterais. */
.why-card:nth-child(2) { z-index: 2; }
.why-card-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.why-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Menos cinza e mais brilho: a foto mostra a cor natural, sem lavar de azul. */
  filter: grayscale(.16) saturate(.92) contrast(.98) brightness(.88);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.why-card:hover .why-card-media img { transform: scale(1.05); }
/* Véu escuro NEUTRO (near-black), não o az-950 azul: escurece o rodapé para o
   texto sem tingir a foto de azul; some antes do topo, deixando a foto limpa. */
.why-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(10 14 22 / .86) 0%, rgb(10 14 22 / .56) 32%, rgb(10 14 22 / .18) 56%, transparent 80%);
}
.why-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.why-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; letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums; color: var(--gr-000);
}
.why-label {
  margin-top: var(--sp-2); font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: normal; font-weight: var(--fw-bold); font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight); color: var(--gr-000);
}
.why-desc { margin-top: var(--sp-2); max-width: 34ch; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-on-brand-soft); }
@media (max-width: 1023.98px) {
  .why-head { align-items: flex-start; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-card:last-child { grid-column: 1 / -1; min-height: 320px; }
}
@media (max-width: 639.98px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card, .why-card:last-child { min-height: 340px; }
}


/* ============================================================================
   09 — QUEM CONFIA / CLIENTES  (reestruturada no padrão das seções novas)
   Plano cinza LIMPO (sem pattern) + header centralizado + UM painel de
   credibilidade unificado (filosofia bento do #controle): vitrine de logos,
   régua, e certificações numa linha DIVIDIDA (idioma do #autoridade).
   Usa .reveal (mesmo blur-reveal das novas).
   ============================================================================ */
.trust { background: var(--surface-sunken); }

.trust-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4); max-width: 46rem; margin: 0 auto clamp(var(--sp-7), 4vw, var(--sp-9));
}
.trust-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--text-brand);
}
.trust-kicker svg { width: 18px; height: 18px; flex: none; }
.trust-title { margin: 0; font-size: var(--fs-4xl); color: var(--text-heading); text-wrap: pretty; }
.trust-lead { margin: 0; max-width: 60ch; font-size: var(--fs-base); color: var(--text-secondary); }

/* Painel unificado de credibilidade — branco sobre o plano cinza, uma peça só. */
.trust-panel {
  overflow: hidden;
  background: var(--surface-base);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
/* Zona 1 — vitrine: a marquee sangra até as bordas do painel e some no fade. */
.trust-logos { padding-block: clamp(var(--sp-3), 2.4vw, var(--sp-5)); }
.trust-rule { height: var(--border-width); background: var(--border-subtle); }

/* Zona 2 — certificações. */
.trust-creds { padding: clamp(var(--sp-6), 4vw, var(--sp-8)); }
.trust-creds-label {
  margin: 0 0 clamp(var(--sp-5), 3vw, var(--sp-6));
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--text-secondary);
}
.trust-creds-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
}
.trust-cred { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.trust-cred-mark {
  display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-md); background: var(--az-50); color: var(--az-700);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-heavy); font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
}
.trust-cred-title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); color: var(--text-heading); font-size: var(--fs-lg); letter-spacing: var(--ls-tight);
}
.trust-cred-desc { margin: 0; max-width: 40ch; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary); }

/* Colunas divididas por hairline (mesmo idioma dos divisores do #autoridade). */
@media (min-width: 768px) {
  .trust-creds-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .trust-cred { padding-inline: clamp(var(--sp-5), 3vw, var(--sp-7)); }
  .trust-cred:first-child { padding-left: 0; }
  .trust-cred:last-child { padding-right: 0; }
  .trust-cred + .trust-cred { border-left: var(--border-width) solid var(--border-subtle); }
}

.trust-nota {
  margin: clamp(var(--sp-5), 3vw, var(--sp-6)) 0 0; text-align: center;
  font-size: var(--fs-sm); color: var(--text-secondary);
}


/* ============================================================================
   08 — RESPONSABILIDADE / SEGURANÇA  (reestruturada: bento no padrão do
   #controle). Sobre o az-950 da seção, um painel elevado (az-900) com uma
   CÉLULA-IMAGEM humana à esquerda (cliente real, mudança concluída) + as 6
   garantias numa matriz 2×3 dividida por hairlines à direita. Ícones ci-400.
   Humaniza a seção mais formal sem abrir mão do rigor. Estrutura distinta do
   #estrutura (07) — que é imagem-landscape + pilares — para não repetir.
   ============================================================================ */
.seg-bento {
  display: grid; grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--surface-sunken);          /* az-900 sobre o az-950 da seção */
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
@media (min-width: 1000px) { .seg-bento { grid-template-columns: 0.82fr 1.18fr; } }

/* Célula-imagem humana (retrato, recortado por object-fit para preencher). */
.seg-figure { position: relative; margin: 0; overflow: hidden; isolation: isolate; min-height: 320px; }
.seg-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
  filter: saturate(.96) contrast(.98) brightness(.92);
}
/* Véu neutro na base para o caption; some antes do topo, deixando a foto limpa. */
.seg-figure::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(8 16 33 / .9) 0%, rgb(8 16 33 / .52) 26%, rgb(8 16 33 / .12) 50%, transparent 72%);
}
.seg-figure-cap {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-7));
}
.seg-figure-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  background: rgb(13 29 60 / .72); border: var(--border-width) solid rgb(255 255 255 / .16);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--gr-000);
}
.seg-figure-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ci-400); flex: none; }
.seg-figure-line {
  margin: 0; max-width: 26ch; color: var(--gr-000);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
  text-wrap: pretty;
}

/* Matriz 2×3 das garantias, dividida por hairlines (sem cards). */
.seg-matrix { display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) { .seg-matrix { grid-template-columns: 1fr 1fr; } }
.seg-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: clamp(var(--sp-5), 2.4vw, var(--sp-6));
  border-top: var(--border-width) solid var(--border-subtle);
}
.seg-matrix > .seg-item:first-child { border-top: 0; }
@media (min-width: 620px) {
  .seg-item:nth-child(2) { border-top: 0; }
  .seg-item:nth-child(even) { border-left: var(--border-width) solid var(--border-subtle); }
}
.seg-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: rgb(141 214 244 / .12); color: var(--ci-400);
}
.seg-ico svg { width: 20px; height: 20px; }
.seg-label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--ci-400);
}
.seg-item h3 {
  margin: 0; font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--ls-tight);
  color: var(--gr-000); line-height: var(--lh-tight);
}
.seg-item p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-on-brand-soft); }


/* ----------------------------------------------------------------------------
   Estados iniciais das seções 02/03/04/05 animadas por GSAP. Só valem sob
   .has-motion (adicionada no <head> quando o usuário aceita movimento). Se o
   GSAP não carregar, o main.js remove .has-motion e tudo aparece estático.
   ---------------------------------------------------------------------------- */
.has-motion .about-kicker,
.has-motion .about-certs,
.has-motion .about-link,
.has-motion .about-stat-num,
.has-motion .about-stat-label,
.has-motion .srv-kicker,
.has-motion .srv-title,
.has-motion .srv-head-cta,
.has-motion .srv-row,
.has-motion .ctrl-kicker,
.has-motion .ctrl-title,
.has-motion .ctrl-hero,
.has-motion .ctrl-card,
.has-motion .why-kicker,
.has-motion .why-title,
.has-motion .why-cta,
/* Só opacity no pré-set: o GSAP controla sozinho o leque (xPercent). Um
   transform aqui conflitava com o xPercent do GSAP (contava em dobro e os cards
   ficavam presos no centro). Com opacity:0 já não há flash antes de animar. */
.has-motion .why-card { opacity: 0; }
/* Entradas elaboradas: problema (cards convergem dos lados), estrutura (foto
   desliza + pilares em cascata) e segurança (cases em cascata). */
.has-motion .stakes-kicker,
.has-motion .stakes-title-main,
.has-motion .stakes-lead,
.has-motion .stakes-card,
.has-motion .estr-media,
.has-motion .estr-pillar,
.has-motion #seguranca .case { opacity: 0; }
.has-motion .stakes-card:first-child { transform: translateX(-56px); }
.has-motion .stakes-card:last-child  { transform: translateX(56px); }
.has-motion .estr-media   { transform: translateX(-36px) scale(.97); }
.has-motion .estr-pillar  { transform: translateY(26px); }
.has-motion #seguranca .case { transform: translateY(28px); }

.has-motion .about-title .w-i { opacity: .16; }
.has-motion .about-stats { --rule-sx: 0; }
.has-motion .about-stat { --sy: 0; }


/* ============================================================================
   COMPONENTES v3 COMPARTILHADOS p/ páginas internas (header v3-nav + hero v3).
   Migrados do inline do index.html; a home mantém a cópia inline (que sobrescreve
   estas por ordem de fonte), então a home NÃO muda. Só nav + hero — nada de
   badge/v3-dark (já existentes e não usados fora da home).
   ============================================================================ */
/* Header / nav */
  .v3-nav {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
    height: var(--header-height); display: flex; align-items: center;
    /* Transparente sobre o hero = casa 100% com ele (mostra o próprio fundo + o
       brilho azul do hero, sem emenda). Ganha fundo sólido só ao rolar (.v3-nav-solid),
       pra o conteúdo não passar por trás. Os trilhos verticais correm sem interrupção. */
    background: transparent;
    /* Linha horizontal abaixo do menu, de ponta a ponta da tela (o nav é full-width),
       cruzando os trilhos verticais — como na referência. */
    border-bottom: 1px solid rgb(255 255 255 / .1);
    transition: background-color var(--dur-normal) var(--ease-standard);
  }
  .v3-nav.v3-nav-solid { background: var(--az-950); }
  .v3-nav-rail {
    position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: min(var(--container-max), calc(100% - 2px)); pointer-events: none;
    border-inline: 1px solid rgb(255 255 255 / .08);
  }
  .v3-nav-inner {
    position: relative; width: 100%; max-width: var(--container-max); margin-inline: auto;
    padding-inline: var(--container-pad); display: flex; align-items: center; gap: var(--sp-5);
  }
  .v3-nav-brand { display: inline-flex; align-items: center; flex: none; }
  .v3-nav-brand img { height: clamp(24px, 22px + .7vw, 32px); width: auto; display: block; }
  .v3-nav-links { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 2rem); margin-inline-start: var(--sp-6); }
  .v3-nav-links a, .v3-nav-wa {
    color: rgb(255 255 255 / .82); text-decoration: none;
    font-family: var(--font-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight); transition: color var(--dur-fast) var(--ease-standard);
  }
  .v3-nav-links a:hover, .v3-nav-wa:hover { color: #fff; }
  /* "Serviços" vira botão de mega menu (estrutura do mega da home) */
  .v3-nav-svc { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer;
    color: rgb(255 255 255 / .82); font-family: var(--font-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight); padding: 0; transition: color var(--dur-fast) var(--ease-standard); }
  .v3-nav-svc:hover, .v3-nav-svc[aria-expanded="true"] { color: #fff; }
  .v3-nav-svc-chev { transition: transform var(--dur-normal) var(--ease-standard); }
  .v3-nav-svc[aria-expanded="true"] .v3-nav-svc-chev { transform: rotate(180deg); }
  /* Dropdown do mega sob o nav escuro: card branco (reusa .mega-* da home), centrado e travado no container. */
  /* Centralizado por margin:auto (NÃO por translateX): a animação mega-abrir mexe no
     transform, então usar transform pra centralizar causava o "pula pra direita e centraliza". */
  .v3-mega { position: absolute; top: calc(100% + var(--sp-2)); left: 0; right: 0; margin-inline: auto;
    width: min(var(--container-max), calc(100% - 2 * var(--container-pad))); display: none; z-index: var(--z-dropdown); }
  .v3-mega[data-open="true"] { display: block; animation: mega-abrir var(--dur-normal) var(--ease-entrance); }
  @media (max-width: 1023.98px) { .v3-mega { display: none !important; } }
  .v3-nav-right { display: flex; align-items: center; gap: var(--sp-4); margin-inline-start: auto; }
  .v3-nav-cta {
    display: inline-flex; align-items: center; background: #fff; color: var(--az-950);
    padding: 0.62rem 1.1rem; border-radius: var(--radius-full);
    font-family: var(--font-display); font-style: normal; font-weight: var(--fw-bold);
    font-size: var(--fs-sm); letter-spacing: var(--ls-tight); text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  }
  .v3-nav-cta:hover { background: var(--ci-200); color: var(--az-950); transform: translateY(-1px); }
  .v3-nav-burger { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: var(--sp-1); }
  .v3-nav-burger .ico-close { display: none; }
  .v3-nav-burger[aria-expanded="true"] .ico-open { display: none; }
  .v3-nav-burger[aria-expanded="true"] .ico-close { display: block; }
  .v3-nav-panel { display: none; }
  @media (max-width: 1023.98px) {
    .v3-nav-links, .v3-nav-right .v3-nav-wa, .v3-nav-right .v3-nav-cta { display: none; }
    .v3-nav-burger { display: inline-grid; place-items: center; }
    /* Menu mobile reestruturado: área rolável (acordeão de serviços + navegação)
       + rodapé fixo (CTA, contato rápido). */
    .v3-nav-panel {
      display: flex; flex-direction: column; position: fixed; top: var(--header-height); left: 0; right: 0;
      height: calc(100dvh - var(--header-height)); overflow: hidden;
      background: var(--az-950);
      transform: translateY(-8px); opacity: 0; visibility: hidden;
      transition: opacity var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard), visibility var(--dur-normal);
    }
    .v3-nav-panel[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
    .v3-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: var(--sp-4) var(--container-pad) var(--sp-5); }
    .v3-panel-label { display: block; margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-2xs);
      font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: rgb(255 255 255 / .4); }
    .v3-panel-label:first-child { margin-top: 0; }
    .v3-panel-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
      padding: var(--sp-3) 0; color: #fff; text-decoration: none;
      font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lg); letter-spacing: var(--ls-tight);
      border-bottom: 1px solid rgb(255 255 255 / .08); }
    .v3-panel-link svg { flex: none; color: rgb(255 255 255 / .38); transition: transform var(--dur-fast) var(--ease-standard); }
    .v3-panel-link:hover svg { transform: translateX(3px); color: var(--ci-400); }
    .v3-panel-svc { border-bottom: 1px solid rgb(255 255 255 / .08); }
    .v3-panel-svc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
      padding: var(--sp-3) 0; color: #fff; font-family: var(--font-display); font-weight: var(--fw-semibold);
      font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
    .v3-panel-svc > summary::-webkit-details-marker { display: none; }
    .v3-panel-svc > summary .chev { flex: none; color: rgb(255 255 255 / .5); transition: transform var(--dur-fast) var(--ease-standard); }
    .v3-panel-svc[open] > summary .chev { transform: rotate(180deg); }
    .v3-panel-svc-list { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) 0 var(--sp-4); }
    .v3-panel-svc-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
      border-radius: var(--radius-md); background: rgb(255 255 255 / .03); color: rgb(255 255 255 / .9); text-decoration: none; }
    .v3-panel-svc-item:active { background: rgb(255 255 255 / .09); }
    .v3-panel-svc-item .ico { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px;
      border-radius: var(--radius-sm); background: rgb(141 214 244 / .12); color: var(--ci-400); }
    .v3-panel-svc-item .ico svg { width: 18px; height: 18px; }
    .v3-panel-svc-item b { font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
    .v3-panel-foot { flex: none; display: flex; flex-direction: column; gap: var(--sp-3);
      padding: var(--sp-4) var(--container-pad) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
      background: var(--az-900); border-top: 1px solid rgb(255 255 255 / .1); }
    .v3-panel-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
      padding: 0.9rem 1.2rem; border-radius: var(--radius-full); background: var(--ci-400); color: var(--az-950);
      font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); text-decoration: none; }
    .v3-panel-cta:active { background: var(--ci-200); }
    .v3-panel-quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
    .v3-panel-quick a { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
      padding: 0.72rem; border-radius: var(--radius-full); border: 1px solid rgb(255 255 255 / .18);
      color: #fff; text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
    .v3-panel-quick a svg { flex: none; width: 18px; height: 18px; }
    .v3-panel-quick a:active { background: rgb(255 255 255 / .08); }
    .v3-panel-foot .lang-switch { margin-top: 0; align-self: flex-start; width: auto; }
  }

/* Hero v3 */
  .v3-hero {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--az-950); color: #fff;
    padding: calc(var(--header-height) + clamp(1rem, 2.4vw, 2.25rem)) var(--container-pad) clamp(1.75rem, 2.6vw, 3rem);
    text-align: center;
  }
  /* brilho radial sutil no topo (o degradê discreto da referência) */
  .v3-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(120% 78% at 50% -4%, rgb(141 214 244 / .12), transparent 62%);
  }
  /* trilhos verticais enquadrando a coluna (grade técnica, no espírito octógono) */
  .v3-hero-rails {
    position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: min(var(--container-max), calc(100% - 2px)); z-index: 0; pointer-events: none;
    border-inline: 1px solid rgb(255 255 255 / .08);
  }
  .v3-hero-inner {
    position: relative; z-index: 1; max-width: 62rem; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  .v3-eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide); color: var(--ci-200); margin-bottom: var(--sp-4);
  }
  .v3-eyebrow .octo-dot { width: 8px; height: 8px; background: var(--ci-400); }
  .v3-title {
    margin: 0; max-width: 26ch;
    font-family: var(--font-display); font-style: normal; font-stretch: 100%; font-weight: 500;
    font-size: clamp(2.5rem, 1rem + 5.2vw, 4.5rem); line-height: 1.04;
    letter-spacing: -0.03em; color: #fff; text-wrap: balance;
  }
  /* Palavra-chave "substituído": nasce branca (fallback sem JS) e se PREENCHE de
     azul-claro (ci-400) da esquerda pra direita — o JS quebra em letras e o GSAP
     faz uma onda de cor letra a letra. Reduced-motion já entrega em ci-400. */
  .v3-kw { color: #fff; }
  @media (prefers-reduced-motion: reduce) { .v3-kw { color: var(--ci-400); } }
  .v3-sub {
    margin: var(--sp-4) 0 0; max-width: 62ch;
    font-family: var(--font-text); font-size: var(--fs-lg); line-height: var(--lh-normal);
    color: var(--az-200);
  }
  .v3-sub strong { color: #fff; font-weight: var(--fw-bold); }
  .v3-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: clamp(1.25rem, 2vw, 1.75rem); }
  .v3-btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 0.72rem 1.25rem; border-radius: var(--radius-full);
    font-family: var(--font-display); font-style: normal; font-weight: var(--fw-bold);
    font-size: var(--fs-sm); letter-spacing: var(--ls-tight); text-decoration: none; cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
  }
  .v3-btn-primary { background: var(--ci-400); color: var(--az-950); }
  .v3-btn-primary:hover { background: var(--ci-300); color: var(--az-950); transform: translateY(-2px); }
  .v3-btn-primary svg { transition: transform var(--dur-fast) var(--ease-standard); }
  .v3-btn-primary:hover svg { transform: translateX(3px); }
  .v3-btn-ghost { background: rgb(255 255 255 / .06); color: #fff; border: 1px solid rgb(255 255 255 / .24); }
  .v3-btn-ghost:hover { background: rgb(255 255 255 / .12); color: #fff; }
  .v3-trust {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--sp-2) var(--sp-4); margin-top: clamp(1rem, 2vw, 1.5rem);
    font-family: var(--font-text); font-size: var(--fs-sm); color: var(--az-200);
  }
  .v3-trust b { font-family: var(--font-display); font-style: normal; color: #fff; letter-spacing: var(--ls-wide); }
  .v3-trust .octo-dot { width: 7px; height: 7px; background: var(--ci-400); }
  .v3-trust-sep { width: 1px; height: 14px; background: rgb(255 255 255 / .24); }
  @media (max-width: 767.98px) {
    .v3-title { font-size: clamp(2.25rem, 6vw, 3rem); letter-spacing: -0.02em; }
    .v3-btn { flex: 1 1 auto; justify-content: center; }
  }


/* Showcase v3 (compartilhado) — card-imagem + citação + marquee de logos */
  .v3-showcase { position: relative; overflow: hidden; background: var(--az-950); color: #fff;
    padding: 0 var(--container-pad) clamp(2.5rem, 5vw, 4.5rem); }
  /* Pequeno respiro do conteúdo até os trilhos verticais (como na referência):
     o inner tem a largura dos trilhos, então este padding afasta os cards/logos da linha. */
  .v3-showcase-inner { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(var(--sp-4), 2vw, var(--sp-6)); }
  .v3-showcase-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
  @media (min-width: 900px) { .v3-showcase-grid { grid-template-columns: 1.9fr 1fr; } }
  .v3-card-media { position: relative; display: block; min-height: 440px; border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none; color: #fff; }
  .v3-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
    transition: transform var(--dur-slow) var(--ease-standard); }
  .v3-card-media:hover img { transform: scale(1.03); }
  .v3-card-media::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgb(13 29 60 / .62) 0%, rgb(13 29 60 / .12) 38%, transparent 60%); }
  .v3-card-media-copy { position: relative; z-index: 2; padding: var(--sp-5); max-width: 32ch; }
  .v3-card-media-copy b { display: block; font-family: var(--font-display); font-style: normal; font-weight: var(--fw-bold);
    font-size: var(--fs-xl); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: #fff; }
  .v3-card-media-copy span { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: rgb(255 255 255 / .86); }
  .v3-card-quote { margin: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--sp-6); min-height: 440px; border-radius: var(--radius-lg); padding: var(--sp-6);
    background: linear-gradient(158deg, var(--az-700) 0%, var(--az-800) 100%); border: 1px solid rgb(255 255 255 / .09); }
  .v3-quote-mark { font-family: Georgia, "Times New Roman", serif; font-size: 4rem; line-height: .5; color: var(--ci-400); }
  .v3-quote-body { display: flex; flex-direction: column; gap: var(--sp-5); }
  .v3-card-quote blockquote { margin: 0; font-family: var(--font-text); font-size: var(--fs-lg); line-height: var(--lh-normal); color: #fff; }
  .v3-card-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
  .v3-card-quote figcaption b { font-family: var(--font-display); font-style: normal; color: #fff; letter-spacing: var(--ls-tight); }
  .v3-card-quote figcaption span { font-size: var(--fs-sm); color: var(--az-200); }
  /* Card de vídeo (B-roll da frota) que substitui o depoimento-exemplo no showcase. */
  .v3-card-video { margin: 0; position: relative; min-height: 440px; border-radius: var(--radius-lg);
    overflow: hidden; background: var(--az-950); border: 1px solid rgb(255 255 255 / .09); }
  .v3-card-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .v3-logos { position: relative; margin-top: clamp(2rem, 4vw, 3.5rem); max-width: var(--container-max); margin-inline: auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .v3-logos-track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); width: max-content;
    animation: v3-logos-scroll 44s linear infinite; }
  .v3-logos:hover .v3-logos-track { animation-play-state: paused; }
  .v3-logos img { height: 26px; width: auto; flex: none; opacity: .6; filter: brightness(0) invert(1);
    transition: opacity var(--dur-fast) var(--ease-standard); }
  .v3-logos img:hover { opacity: 1; }
  @keyframes v3-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .v3-logos-track { animation: none; } .v3-logos { overflow-x: auto; } }
  @media (max-width: 899.98px) { .v3-card-media, .v3-card-quote, .v3-card-video { min-height: 340px; } }


/* ============================================================================
   PÁGINAS INTERNAS v3 — camada de página, escopo body.v3-page.
   Migrada do inline do index.html (a home mantém a cópia inline, que vence por
   ordem de fonte): tipografia da v3 (Archivo LARGA, RETA, medium nos headings),
   altura do header e a seção escura reutilizável .v3-dark. Sem isto, as
   páginas internas renderizam os títulos na voz antiga (condensada oblíqua) e
   não têm as seções escuras da home.
   ============================================================================ */
body.v3-page {
  --header-height: clamp(66px, 58px + 1.1vw, 80px);
  --display-stretch: 100%;
  --display-style: normal;
  --display-word-spacing: normal;
}
body.v3-page :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--fw-medium) !important; }

/* Seção escura reutilizável: soma-se a .on-brand (texto/acento claros) e só
   aprofunda a superfície ao azul do hero + brilho radial no topo. Mesma regra
   inline da home — mantida idêntica para as duas fontes não divergirem. */
.v3-dark {
  position: relative; isolation: isolate; overflow: hidden;
  --surface-base: var(--az-950); --surface-sunken: var(--az-900); --surface-raised: var(--az-800);
  background-color: var(--az-950);
}
.v3-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -6%, rgb(141 214 244 / .10), transparent 60%);
}
.v3-dark > .wrap { position: relative; z-index: 1; }

/* Cabeçalho assimétrico (Ordina) nas seções internas, como na home:
   título grande à esquerda, descrição à direita. */
@media (min-width: 900px) {
  body.v3-page #inclui .section-head,
  body.v3-page #canais .section-head,
  body.v3-page #estrutura .estr-head {
    display: grid; grid-template-columns: 1.3fr 1fr; column-gap: var(--sp-8);
    align-items: end; max-width: none; text-align: left;
  }
  body.v3-page #inclui .section-head > h2,
  body.v3-page #canais .section-head > h2,
  body.v3-page #estrutura .estr-head > h2 { grid-column: 1; margin-bottom: 0; }
  body.v3-page #inclui .section-head > p,
  body.v3-page #canais .section-head > p,
  body.v3-page #estrutura .estr-head > p { grid-column: 2; align-self: end; margin: 0 0 .35rem; }
}

/* Contato: o título do card de canal é o próprio link (tel:/mailto:/wa.me).
   Herda a cor do heading; o e-mail longo pode quebrar em qualquer ponto. */
body.v3-page .seg-item h3 a,
body.v3-page .ctrl-card-title a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
body.v3-page .seg-item h3 a:hover,
body.v3-page .ctrl-card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================================
   SOBRE — layout próprio (sb-*). Mesma linguagem da v3 (az-950, trilhos,
   hairlines, octógono, Archivo larga) em composições que só existem nesta
   página: hero dividido com ficha técnica, cláusulas numeradas com coluna
   fixa, capítulos com numeral fantasma e selos de credenciamento.
   ============================================================================ */
/* Kicker compartilhado das seções do sobre */
.sb-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-accent);
}
.sb-kicker .octo-dot { width: 8px; height: 8px; background: var(--ci-400);
  clip-path: var(--octo); -webkit-clip-path: var(--octo); flex: none; }

/* ── Hero dividido: texto à esquerda, retrato à direita, ficha na base ───── */
.sb-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--az-950); color: #fff;
  padding: calc(var(--header-height) + clamp(2.75rem, 6vw, 4.75rem)) var(--container-pad) clamp(2.5rem, 5vw, 4rem);
}
.sb-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -6%, rgb(141 214 244 / .10), transparent 60%);
}
.sb-hero-inner {
  position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto;
  /* Respiro do conteúdo até os trilhos verticais (mesma regra do showcase). */
  padding-inline: clamp(var(--sp-4), 2vw, var(--sp-6));
  display: grid; grid-template-columns: 1fr; gap: clamp(var(--sp-6), 4vw, var(--sp-9)); align-items: center;
}
@media (min-width: 900px) { .sb-hero-inner { grid-template-columns: 1.15fr .85fr; } }
.sb-hero .sb-kicker { color: var(--ci-200); }
.sb-hero h1 {
  margin: var(--sp-4) 0 0; color: #fff; text-wrap: balance;
  font-size: clamp(2.4rem, 1.55rem + 3.4vw, 4.25rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.sb-hero-lead { margin: var(--sp-5) 0 0; max-width: 56ch; color: rgb(255 255 255 / .82); line-height: var(--lh-normal); }
.sb-hero-lead strong { color: #fff; font-weight: var(--fw-bold); }
.sb-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: clamp(var(--sp-5), 3vw, var(--sp-7)); }
.sb-hero-figure {
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  min-height: clamp(320px, 36vw, 460px);
}
.sb-hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-hero-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(13 29 60 / .85), rgb(13 29 60 / .15) 45%, transparent 70%);
}
.sb-hero-figcap {
  position: absolute; z-index: 1; inset: auto 0 0 0; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.sb-hero-figcap b {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); color: #fff;
}
.sb-hero-figcap span { font-size: var(--fs-sm); color: rgb(255 255 255 / .8); }
/* Ficha técnica: dados verificáveis numa régua de hairlines */
.sb-ficha {
  position: relative; z-index: 1; max-width: var(--container-max);
  margin: clamp(var(--sp-7), 5vw, var(--sp-9)) auto 0;
  padding-inline: clamp(var(--sp-4), 2vw, var(--sp-6));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) 0; padding-top: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / .14);
}
@media (min-width: 900px) { .sb-ficha { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sb-ficha-item { padding-inline: var(--sp-4); border-left: 1px solid rgb(255 255 255 / .1); min-width: 0; }
.sb-ficha-item:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 899.98px) { .sb-ficha-item:nth-child(odd) { border-left: 0; padding-left: 0; } }
.sb-ficha-item dt {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ci-200);
}
.sb-ficha-item dd {
  margin: var(--sp-1) 0 0; color: #fff;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-medium); font-size: var(--fs-lg); letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

/* ── Manifesto em cláusulas: coluna fixa + lista numerada com hairlines ──── */
.sb-manifesto { padding-block: var(--section-y); background: var(--surface-brand-soft); }
.sb-manifesto-grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--sp-6), 5vw, var(--sp-10)); }
@media (min-width: 900px) {
  .sb-manifesto-grid { grid-template-columns: .85fr 1.15fr; }
  .sb-manifesto-aside { position: sticky; top: calc(var(--header-height) + var(--sp-6)); align-self: start; }
}
.sb-manifesto-aside h2 { margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-4xl); }
.sb-manifesto-aside p { margin: 0; max-width: 44ch; color: var(--text-secondary); }
.sb-clausula {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding-block: clamp(var(--sp-5), 3vw, var(--sp-7));
  border-top: var(--border-width) solid var(--border-default);
}
.sb-clausula:last-child { border-bottom: var(--border-width) solid var(--border-default); }
.sb-clausula-num {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-medium); font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1;
  letter-spacing: var(--ls-tight); color: var(--az-200);
}
.sb-clausula h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }
.sb-clausula p { margin: 0; max-width: 58ch; color: var(--text-secondary); line-height: var(--lh-normal); }

/* ── História em capítulos: numeral fantasma + zigue-zague texto/foto ────── */
.sb-historia {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--az-950); color: #fff; padding-block: var(--section-y);
}
.sb-historia::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -6%, rgb(141 214 244 / .08), transparent 60%);
}
.sb-historia > .wrap { position: relative; z-index: 1; }
.sb-historia-head { max-width: 62ch; margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8)); }
.sb-historia-head h2 { margin: var(--sp-3) 0 0; color: #fff; font-size: var(--fs-4xl); letter-spacing: var(--ls-tight); }
.sb-cap {
  position: relative; display: grid; grid-template-columns: 1fr; align-items: center;
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-9));
  border-top: 1px solid rgb(255 255 255 / .1);
}
@media (min-width: 900px) {
  .sb-cap { grid-template-columns: 1.05fr .95fr; }
  .sb-cap--invertido .sb-cap-media { order: -1; }
}
.sb-cap-ghost {
  position: absolute; top: clamp(var(--sp-4), 2vw, var(--sp-6)); right: 0; z-index: 0;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: clamp(4rem, 10vw, 8rem); line-height: 1;
  letter-spacing: var(--ls-tight); color: transparent;
  -webkit-text-stroke: 1px rgb(141 214 244 / .22);
  pointer-events: none; user-select: none;
}
.sb-cap-body { position: relative; z-index: 1; }
.sb-cap-era {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ci-400);
}
.sb-cap h3 { margin: var(--sp-3) 0; color: #fff; font-size: var(--fs-3xl); letter-spacing: var(--ls-tight); text-wrap: balance; }
.sb-cap p { margin: 0; max-width: 54ch; color: rgb(255 255 255 / .78); line-height: var(--lh-normal); }
.sb-cap-media {
  position: relative; z-index: 1; margin: 0; border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 4 / 3;
}
.sb-cap-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.96) contrast(.98); }

/* ── Selos de credenciamento + vitrine de logos ──────────────────────────── */
.sb-selos { padding-block: var(--section-y); background: var(--surface-sunken); }
.sb-selos-head { text-align: center; max-width: 52ch; margin: 0 auto clamp(var(--sp-7), 4vw, var(--sp-9)); }
.sb-selos-head h2 { margin: var(--sp-3) 0 var(--sp-3); font-size: var(--fs-4xl); }
.sb-selos-head p { margin: 0; color: var(--text-secondary); }
.sb-selo-row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sb-selo-row { grid-template-columns: repeat(3, 1fr); } }
.sb-selo { padding: clamp(var(--sp-5), 3vw, var(--sp-7)); border-top: var(--border-width) solid var(--border-default); }
@media (min-width: 760px) {
  .sb-selo { border-top: 0; border-left: var(--border-width) solid var(--border-default); }
  .sb-selo:first-child { border-left: 0; padding-left: 0; }
}
.sb-selo-mark {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-2xl); letter-spacing: var(--ls-tight);
  color: var(--text-brand);
}
.sb-selo b { display: block; margin-top: var(--sp-2); color: var(--text-heading); letter-spacing: var(--ls-tight);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal; font-weight: var(--fw-bold); }
.sb-selo p { margin: var(--sp-2) 0 0; max-width: 40ch; font-size: var(--fs-sm); color: var(--text-secondary); }
.sb-selos .marquee { margin-top: clamp(var(--sp-7), 4vw, var(--sp-9)); padding-block: var(--sp-5);
  border-top: var(--border-width) solid var(--border-default);
  border-bottom: var(--border-width) solid var(--border-default); }

/* ============================================================================
   CONTATO — layout próprio (ct-*). Mesma linguagem da v3 em composições
   exclusivas desta página: hero com CARTÃO BRANCO de canais diretos e faixa
   de promessas, índice TIPOGRÁFICO das unidades (nome da cidade em corpo
   grande) e FAQ em duas colunas com cabeçalho centrado.
   ============================================================================ */
/* ── Hero: texto à esquerda, cartão de canais à direita, promessas na base ── */
.ct-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--az-950); color: #fff;
  padding: calc(var(--header-height) + clamp(2.75rem, 6vw, 4.75rem)) var(--container-pad) clamp(2.5rem, 5vw, 4rem);
}
.ct-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -6%, rgb(141 214 244 / .10), transparent 60%);
}
.ct-hero-inner {
  position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto;
  /* Respiro do conteúdo até os trilhos verticais (mesma regra do showcase). */
  padding-inline: clamp(var(--sp-4), 2vw, var(--sp-6));
  display: grid; grid-template-columns: 1fr; gap: clamp(var(--sp-6), 4vw, var(--sp-9)); align-items: center;
}
@media (min-width: 900px) { .ct-hero-inner { grid-template-columns: 1.05fr .95fr; } }
.ct-hero .sb-kicker { color: var(--ci-200); }
.ct-hero h1 {
  margin: var(--sp-4) 0 0; color: #fff; text-wrap: balance;
  font-size: clamp(2.4rem, 1.55rem + 3.2vw, 4rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.ct-hero-lead { margin: var(--sp-5) 0 0; max-width: 52ch; color: rgb(255 255 255 / .82); line-height: var(--lh-normal); }
.ct-hero-lead strong { color: #fff; font-weight: var(--fw-bold); }
.ct-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: clamp(var(--sp-5), 3vw, var(--sp-7)); }
/* Cartão branco de canais: tokens claros via .on-light no HTML */
.ct-card {
  border-radius: var(--radius-lg); background: var(--gr-000);
  box-shadow: var(--shadow-lg); padding: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.ct-card .sb-kicker { color: var(--text-accent); }
.ct-canal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-4); padding-block: var(--sp-4); text-decoration: none;
  border-top: var(--border-width) solid var(--border-subtle);
}
.ct-card .sb-kicker + .ct-canal { border-top: 0; }
.ct-canal-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--radius-full);
  background: var(--az-50); color: var(--text-brand);
}
.ct-canal-ico svg { width: 20px; height: 20px; }
.ct-canal-txt { min-width: 0; }
.ct-canal-txt small {
  display: block; font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-secondary);
}
.ct-canal-txt b {
  display: block; margin-top: 2px; color: var(--text-heading);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-base); letter-spacing: var(--ls-tight);
  overflow-wrap: anywhere;
}
.ct-canal-go { color: var(--text-brand); transition: transform var(--dur-fast) var(--ease-standard); }
.ct-canal:hover .ct-canal-go { transform: translateX(4px); }
.ct-canal:hover .ct-canal-txt b { text-decoration: underline; text-underline-offset: 3px; }
/* Faixa de promessas: régua de hairlines na base do hero */
.ct-promessas {
  position: relative; z-index: 1; max-width: var(--container-max);
  margin: clamp(var(--sp-7), 5vw, var(--sp-9)) auto 0;
  padding-inline: clamp(var(--sp-4), 2vw, var(--sp-6));
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3) 0;
  padding-top: var(--sp-5); border-top: 1px solid rgb(255 255 255 / .14);
}
@media (min-width: 760px) { .ct-promessas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-promessa {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-4); font-size: var(--fs-sm); color: rgb(255 255 255 / .85);
  border-left: 1px solid rgb(255 255 255 / .1);
}
.ct-promessa:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 759.98px) { .ct-promessa { border-left: 0; padding-left: 0; } }
.ct-promessa .octo-dot { width: 7px; height: 7px; background: var(--ci-400);
  clip-path: var(--octo); -webkit-clip-path: var(--octo); flex: none; }

/* ── Unidades: índice tipográfico, cidade em corpo grande + hairlines ────── */
.ct-unidades { padding-block: var(--section-y); background: var(--surface-brand-soft); }
.ct-unidades-head { margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8)); }
.ct-unidades-head h2 { margin: var(--sp-3) 0 0; font-size: var(--fs-4xl); letter-spacing: var(--ls-tight); }
.ct-unidade {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: var(--sp-2) clamp(var(--sp-5), 4vw, var(--sp-8));
  padding-block: clamp(var(--sp-5), 3.5vw, var(--sp-7));
  border-top: var(--border-width) solid var(--border-default);
  text-decoration: none;
}
.ct-unidade:last-of-type { border-bottom: var(--border-width) solid var(--border-default); }
@media (min-width: 900px) { .ct-unidade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; } }
.ct-unidade-cidade {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-medium); font-size: clamp(1.9rem, 3.8vw, 3.25rem);
  line-height: 1.05; letter-spacing: var(--ls-tight); color: var(--text-heading);
  transition: color var(--dur-fast) var(--ease-standard);
}
a.ct-unidade:hover .ct-unidade-cidade { color: var(--text-brand); }
.ct-unidade-info small {
  display: block; font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-accent);
}
.ct-unidade-info p { margin: var(--sp-1) 0 0; max-width: 52ch; color: var(--text-secondary); line-height: var(--lh-normal); }
.ct-unidade-go {
  display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-brand);
}
.ct-unidade-go svg { transition: transform var(--dur-normal) var(--ease-standard); }
a.ct-unidade:hover .ct-unidade-go svg { transform: translateX(4px); }
/* Cabeçalho da base: tag de função (organiza Sede/Apoio/Operações, sede destacada)
   acima da cidade. E uma nota que ocupa a coluna de ação quando não há CTA (Cotia),
   para a régua não ter célula vazia. */
.ct-unidade-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.ct-unidade-tag {
  display: inline-block; padding: 4px 11px; border-radius: var(--radius-full);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap;
  color: var(--text-secondary); background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-default);
}
.ct-unidade-tag--sede { color: var(--text-brand); background: var(--az-50); border-color: transparent; }
.ct-unidade-nota {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary, var(--text-secondary));
}
@media (min-width: 900px) { .ct-unidade-nota { text-align: right; } }

/* ── FAQ em duas colunas com cabeçalho centrado ──────────────────────────── */
.ct-faq { padding-block: var(--section-y); background: var(--surface-sunken); }
.ct-faq-head { text-align: center; max-width: 52ch; margin: 0 auto clamp(var(--sp-6), 4vw, var(--sp-8)); }
.ct-faq-head h2 { margin: var(--sp-3) 0 var(--sp-3); font-size: var(--fs-4xl); }
.ct-faq-head p { margin: 0; color: var(--text-secondary); }
.ct-faq-grid { display: grid; grid-template-columns: 1fr; gap: 0 clamp(var(--sp-5), 3vw, var(--sp-7)); align-items: start; }
@media (min-width: 900px) { .ct-faq-grid { grid-template-columns: 1fr 1fr; } }
.ct-faq-foot { text-align: center; margin-top: clamp(var(--sp-6), 4vw, var(--sp-8)); }

/* Barra do topo com 7 itens (inclui Sobre e Contato): entre 1024 e 1280px os
   links secundários saem da barra para não estourar a linha — continuam no
   mega menu e no painel mobile. A página atual fica acesa em branco. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .v3-nav-links a[data-nav-secondary] { display: none; }
}
.v3-nav-links a[aria-current="page"] { color: #fff; }

/* As entradas LATERAIS coreografadas (convergência dos stakes a ±56px e o
   leque dos why-cards) ficam armadas até a animação tocar e, sem isto,
   empurram a largura da página (overflow horizontal no celular). clip não
   cria scroll container, então nada mais muda. */
.why, #problema { overflow-x: clip; }

/* Barra CENTRALIZADA: grade [marca | menu | ações] com o menu no centro
   geométrico. O seletor header.v3-nav vence a cópia inline da home por
   especificidade, então vale para o site inteiro sem tocar o index. */
@media (min-width: 1024px) {
  header.v3-nav .v3-nav-inner {
    display: grid; align-items: center;
    /* Flancos com mínimo de conteúdo: o menu fica no centro do espaço entre
       a marca e as ações, sem espremer o botão (que não quebra linha). */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  }
  header.v3-nav .v3-nav-brand { justify-self: start; }
  header.v3-nav .v3-nav-links { justify-self: center; margin-inline-start: 0; }
  header.v3-nav .v3-nav-right { justify-self: end; margin-inline-start: 0; }
  header.v3-nav .v3-nav-cta { white-space: nowrap; }
}

/* Variante do padrão .about sem a régua de números (páginas internas):
   o cabeçalho encerra a seção, então zera o respiro que mirava os stats. */
body.v3-page .about--noruler .about-head { margin-bottom: 0; }


/* ============================================================================
   Seletor de idioma (PT/EN/ES) — dropdown com bandeiras. <details>, sem JS.
   Mostra a bandeira + sigla do idioma atual; abre a lista com bandeira + nome.
   Compartilhado por / , /en/ e /es/. Item atual destacado com check.
   ============================================================================ */
.lang-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 9px 5px 6px; border-radius: var(--radius-full);
  border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide);
  color: rgb(255 255 255 / .92);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch > summary:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .34); }
.lang-switch > summary:focus-visible { outline: 2px solid var(--ci-400); outline-offset: 2px; }
.lang-flag {
  flex: none; width: 21px; height: 14px; border-radius: 3px; overflow: hidden;
  display: block; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
}
.lang-chev {
  flex: none; width: 12px; height: 12px; opacity: .6;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.lang-switch[open] > summary .lang-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0; z-index: 60;
  min-width: 176px; padding: var(--sp-1);
  background: var(--az-900); border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--radius-lg); box-shadow: 0 18px 44px -14px rgb(0 0 0 / .6);
  display: flex; flex-direction: column; gap: 2px;
  animation: lang-in var(--dur-fast) var(--ease-standard);
}
@keyframes lang-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-menu a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 10px; border-radius: var(--radius-md);
  text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: rgb(255 255 255 / .78); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.lang-menu a:hover { background: rgb(255 255 255 / .08); color: #fff; }
.lang-menu a[aria-current="true"] { color: #fff; background: rgb(141 214 244 / .16); }
.lang-check { flex: none; width: 15px; height: 15px; margin-left: auto; color: var(--ci-400); }

/* No painel mobile o dropdown abre inline (sem posicionamento absoluto). */
.v3-nav-panel .lang-switch { width: 100%; margin-top: var(--sp-3); }
.v3-nav-panel .lang-switch > summary { width: 100%; justify-content: flex-start; }
.v3-nav-panel .lang-menu {
  position: static; width: 100%; min-width: 0; margin-top: var(--sp-2);
  box-shadow: none; background: rgb(255 255 255 / .04); animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .lang-menu { animation: none; }
  .lang-chev { transition: none; }
}


/* Remove o CTA de ação da BARRA do nav (a pedido) — sobram o seletor de idioma
   e o WhatsApp. O botão continua no painel mobile e no rodapé (conversão mantida).
   Escopo: só o CTA filho direto de .v3-nav-right (não o do painel mobile). */
header.v3-nav .v3-nav-right > .v3-nav-cta { display: none; }


/* ============================================================================
   BLOG — "Diário técnico". Layout editorial: masthead + artigo em destaque +
   índice tipográfico (linhas com hairlines). Artigo: capa + prosa com drop-cap
   + pull-quotes. Linguagem dossiê do site (hairlines, Archivo, sóbrio).
   ============================================================================ */

/* Barra de progresso de leitura (artigo) */
.reading-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300; background: transparent; pointer-events: none; }
.reading-bar span { display: block; height: 100%; width: 0; background: var(--ci-400); }

/* ── Masthead da listagem ── */
.blog-mast { position: relative; overflow: hidden; isolation: isolate; background: var(--az-950); color: #fff;
  padding: calc(var(--header-height) + clamp(3rem, 7vw, 5.5rem)) var(--container-pad) clamp(2.5rem, 5vw, 4rem); }
.blog-mast::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 12% -12%, rgb(141 214 244 / .13), transparent 55%); }
.blog-mast-inner { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(var(--sp-4), 2vw, var(--sp-6)); }
.blog-mast .sb-kicker { color: var(--ci-200); }
.blog-mast h1 { margin: var(--sp-4) 0 0; color: #fff; max-width: 16ch; text-wrap: balance;
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.75rem); line-height: .98; letter-spacing: var(--ls-tighter); }
.blog-mast-meta { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgb(255 255 255 / .16);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; font-size: var(--fs-sm); color: rgb(255 255 255 / .66); }
.blog-mast-meta strong { color: #fff; font-weight: var(--fw-semibold); }

/* ── Corpo da listagem ── */
.blog-wrap { max-width: var(--container-max); margin-inline: auto; padding: clamp(var(--sp-8), 5vw, var(--sp-11)) var(--container-pad); }

/* Artigo em destaque */
.blog-lead { display: grid; grid-template-columns: 1fr; gap: clamp(var(--sp-5), 4vw, var(--sp-8)); text-decoration: none; color: var(--text-primary); }
@media (min-width: 860px) { .blog-lead { grid-template-columns: 1.12fr .88fr; align-items: center; } }
.blog-lead-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 11; background: var(--az-900); }
.blog-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.blog-lead:hover .blog-lead-media img { transform: scale(1.03); }
.blog-lead-tag { position: absolute; top: var(--sp-4); left: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 12px; border-radius: var(--radius-full); background: rgb(4 10 24 / .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: #fff; }
.blog-lead-eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-accent); }
.blog-lead h2 { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.1rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-heading); text-wrap: balance; }
.blog-lead p { margin-top: var(--sp-4); max-width: 52ch; color: var(--text-secondary); line-height: var(--lh-normal); }
.blog-lead-go { margin-top: var(--sp-5); display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-brand); }
.blog-lead-go svg { transition: transform var(--dur-normal) var(--ease-standard); }
.blog-lead:hover .blog-lead-go svg { transform: translateX(4px); }

/* Índice de artigos (linhas com hairlines) */
.blog-index { margin-top: clamp(var(--sp-9), 6vw, var(--sp-11)); }
.blog-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--border-default); }
.blog-index-head h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.blog-index-head span { font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary); }
.blog-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-6); align-items: center;
  padding: clamp(var(--sp-5), 3vw, var(--sp-6)) 0; border-bottom: 1px solid var(--border-default); text-decoration: none; color: var(--text-primary); }
@media (min-width: 720px) { .blog-row { grid-template-columns: 140px 1fr auto; } }
.blog-row-thumb { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; background: var(--az-900); }
.blog-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.blog-row:hover .blog-row-thumb img { transform: scale(1.05); }
.blog-row-body { min-width: 0; }
.blog-row-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-accent); }
.blog-row-meta .sep { color: var(--text-tertiary); }
.blog-row h3 { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); transition: color var(--dur-fast) var(--ease-standard); }
.blog-row:hover h3 { color: var(--text-brand); }
.blog-row p { margin-top: var(--sp-2); max-width: 62ch; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
.blog-row-go { display: none; }
@media (min-width: 720px) {
  .blog-row-go { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-full);
    border: 1px solid var(--border-default); color: var(--text-brand); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
  .blog-row:hover .blog-row-go { background: var(--az-50); transform: translateX(3px); }
}

/* ── Artigo ── */
.post-mast { position: relative; overflow: hidden; isolation: isolate; background: var(--az-950); color: #fff;
  padding: calc(var(--header-height) + clamp(2.5rem, 5vw, 4rem)) var(--container-pad) clamp(3.5rem, 7vw, 6rem); }
.post-mast::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 12% -12%, rgb(141 214 244 / .13), transparent 55%); }
.post-mast-inner { position: relative; z-index: 1; max-width: 50rem; margin-inline: auto; }
.post-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: rgb(255 255 255 / .55); }
.post-crumb a { color: rgb(255 255 255 / .78); text-decoration: none; }
.post-crumb a:hover { color: #fff; }
.post-crumb .sep { opacity: .5; }
.post-eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ci-200); }
.post-mast h1 { margin: var(--sp-3) 0 0; color: #fff; text-wrap: balance;
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.post-byline { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgb(255 255 255 / .16);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: rgb(255 255 255 / .66); }
.post-byline strong { color: #fff; font-weight: var(--fw-semibold); }
.post-byline .sep { opacity: .45; }

.post-cover2 { max-width: 56rem; margin: clamp(-3rem, -6vw, -6rem) auto 0; padding-inline: var(--container-pad); position: relative; z-index: 2; }
.post-cover2 figure { margin: 0; }
.post-cover2 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); display: block; }
.post-cover2 figcaption { margin-top: var(--sp-3); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary); text-align: center; }

.post-article2 { padding-block: clamp(var(--sp-9), 5vw, var(--sp-11)); background: var(--gr-000); }
.post-prose { max-width: 50rem; margin-inline: auto; padding-inline: var(--container-pad); }
.post-prose > * + * { margin-top: var(--sp-5); }
.post-prose > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: var(--fw-heavy);
  font-size: 3.4em; line-height: .72; padding: 0.06em 0.12em 0 0; color: var(--text-brand); }
.post-prose h2 { margin-top: var(--sp-9); padding-top: var(--sp-5); border-top: 1px solid var(--border-default);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); }
.post-prose h3 { margin-top: var(--sp-7); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-xl); color: var(--text-heading); }
.post-prose p { font-size: var(--fs-xl); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.post-prose strong { color: var(--text-heading); font-weight: var(--fw-bold); }
.post-prose ul, .post-prose ol { padding-left: 1.35em; font-size: var(--fs-xl); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.post-prose li + li { margin-top: var(--sp-2); }
.post-prose li::marker { color: var(--text-brand); }
.post-prose .post-quote { margin: var(--sp-9) 0; padding: 0; border: 0; font-style: normal; text-wrap: balance;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.1rem);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); }
.post-prose .post-quote::before { content: "\201C"; display: block; font-size: 2.4em; line-height: .1; margin-bottom: var(--sp-4); color: var(--ci-400); }

/* Fim do artigo: assinatura + CTA */
.post-end { max-width: 50rem; margin: clamp(var(--sp-9), 5vw, var(--sp-11)) auto 0; padding-inline: var(--container-pad); }
.post-sign { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.post-sign-mark { flex: none; width: 46px; height: 46px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--az-50); }
.post-sign-mark img { width: 26px; height: 26px; }
.post-sign b { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-heading); }
.post-sign span { font-size: var(--fs-sm); color: var(--text-secondary); }
.post-cta2 { margin-top: var(--sp-7); padding: clamp(var(--sp-6), 4vw, var(--sp-8)); border-radius: var(--radius-lg); background: var(--az-950); color: #fff; text-align: center; }
.post-cta2 h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); color: #fff; }
.post-cta2 p { margin-top: var(--sp-3); color: rgb(255 255 255 / .8); max-width: 46ch; margin-inline: auto; }
.post-cta2 .v3-btn { margin-top: var(--sp-6); }

.post-more { padding-block: var(--section-y); background: var(--surface-brand-soft); }
.post-more-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.post-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--border-default); }
.post-more-head h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.post-more-head a { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-brand); text-decoration: none; }