/* =================================================================
   Mat Incêndio · Site institucional · v1.0
   CSS compartilhado entre todas as páginas (Home + internas)
   Extraído do home.html v0.9.1 + componentes novos para o
   esqueleto institucional (doc "Proposta de novo site")
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  overflow-wrap: break-word;
  font-family: var(--mf-font-body);
  font-size: var(--mf-fs-body-md);
  line-height: var(--mf-lh-body-md);
  color: var(--mf-ink-1000);
  background: var(--mf-ink-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss02' 1;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
figure { margin: 0; }

/* Foco visível em todo interativo · WCAG 2.2 AA.
   outline em vez de box-shadow para não brigar com as sombras dos botões. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mf-blue-light);
  outline-offset: 3px;
  border-radius: var(--mf-radius-xs);
}
/* Sobre fundo azul-profundo o anel azul some: inverte para branco. */
.hero :where(a, button):focus-visible,
.page-hero :where(a, button):focus-visible,
.figures :where(a, button):focus-visible,
.cases :where(a, button):focus-visible,
.cta-strip :where(a, button):focus-visible,
.footer :where(a, button):focus-visible,
.topbar :where(a, button):focus-visible,
.header-sticky :where(a, button):focus-visible { outline-color: #fff; }

/* Skip link · clip em vez de left:-9999px, que pode gerar scroll lateral */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus-visible,
.skip-link:focus { position: fixed; left: var(--mf-space-4); top: var(--mf-space-4); width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; z-index: var(--mf-z-toast); background: var(--mf-blue-deep); color: #fff; padding: var(--mf-space-4) var(--mf-space-5); border-radius: var(--mf-radius-sm); font-weight: 600; font-size: var(--mf-fs-body-sm); }

.container {
  max-width: var(--mf-container-max);
  margin: 0 auto;
  padding: 0 var(--mf-container-pad-mobile);
}
@media (min-width: 768px) { .container { padding: 0 var(--mf-container-pad-desktop); } }

/* ===== PLACEHOLDER (imagem com fallback) ===== */
.ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--mf-blue-deep) 0%, var(--mf-blue-mid) 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  border-radius: var(--mf-radius-md);
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,  transparent 0 31px, rgba(255,255,255,0.04) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,0.04) 31px 32px);
  pointer-events: none;
}
.ph-label {
  position: relative;
  text-align: center;
  padding: var(--mf-space-4);
  font-family: var(--mf-font-mono);
  font-size: var(--mf-fs-caption);
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  z-index: 1;
}
.ph-label .file { display: block; color: var(--mf-blue-on-dark); font-weight: 500; margin-bottom: 4px; word-break: break-all; }
.ph-label .spec { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.ph-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--mf-motion-slow), transform 1.6s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
}
.ph-img.failed { opacity: 0; }
.ph--portrait { aspect-ratio: 1 / 1; border-radius: 50%; }
.ph--3-4 { aspect-ratio: 3 / 4; }
.ph--4-3 { aspect-ratio: 4 / 3; }
.ph--16-9 { aspect-ratio: 16 / 9; }
.ph--16-10 { aspect-ratio: 16 / 10; }
.ph--21-9 { aspect-ratio: 21 / 9; }

/* ===== EDITORIAL CAPTION ===== */
.editorial-cap {
  margin-top: var(--mf-space-3);
  font-family: var(--mf-font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mf-ink-600);
  line-height: 1.5;
}
.editorial-cap .plate { color: var(--mf-blue-cobalt); font-weight: 500; }
.editorial-cap .sep   { color: var(--mf-ink-300); margin: 0 var(--mf-space-2); }
/* 0.45 dava 4.40:1 e reprovava AA. 0.60 dá 7.1:1. */
.section-dark .editorial-cap, .cases .editorial-cap { color: rgba(255,255,255,0.60); }
.section-dark .editorial-cap .plate, .cases .editorial-cap .plate { color: var(--mf-blue-on-dark); }
.section-dark .editorial-cap .sep, .cases .editorial-cap .sep { color: rgba(255,255,255,0.30); }

/* ===== TOPBAR ===== */
.topbar { background: var(--mf-blue-deep); color: rgba(255,255,255,0.65); font-size: var(--mf-fs-caption); position: relative; z-index: 101; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--mf-hairline-dark); }
/* padding-top/bottom em vez do atalho: o atalho zerava o padding
   horizontal herdado do .container e a topbar colava na borda. */
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; gap: var(--mf-space-1); flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,0.85); transition: color var(--mf-motion-snap); }
.topbar a:hover { color: var(--mf-blue-on-dark); }
.topbar-phones { display: flex; gap: var(--mf-space-2); flex-wrap: wrap; font-family: var(--mf-font-mono); }
.topbar-phones strong { color: #fff; font-weight: 500; }
.topbar-phones span { color: rgba(255,255,255,0.62); }
.topbar-right { display: flex; align-items: center; gap: var(--mf-space-4); flex-wrap: wrap; }
.topbar-social { display: inline-flex; align-items: center; gap: var(--mf-space-3); }
.topbar-social a { color: rgba(255,255,255,0.65); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; position: relative; transition: color var(--mf-motion-snap), transform var(--mf-motion-snap); }
/* Alvo de toque de 44px sem inflar a altura visual da topbar */
.topbar-social a::after,
.topbar-phones a::after,
.lang-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
.topbar-phones a { position: relative; display: inline-flex; align-items: center; }
.topbar-social a:hover { color: var(--mf-blue-on-dark); transform: translateY(-1px); }
.topbar-social svg { width: 15px; height: 15px; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mf-space-3); min-height: 44px; font-family: var(--mf-font-body); font-weight: 600; font-size: var(--mf-fs-body-sm); letter-spacing: 0.02em; padding: var(--mf-space-3) var(--mf-space-5); border-radius: var(--mf-radius-pill); cursor: pointer; transition: background var(--mf-motion-base), border-color var(--mf-motion-base), transform var(--mf-motion-base), box-shadow var(--mf-motion-base); border: 1px solid transparent; white-space: nowrap; text-transform: none; }
.btn .arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.18); font-size: 12px; }
/* Um transform so, no botao inteiro: a seta e filha e cresce junto, sem
   se deslocar em relacao a ele. transform-origin no padrao (centro), entao
   o crescimento e simetrico nos quatro lados. */
.btn:hover { transform: scale(1.03); }
.btn-cta { background: var(--mf-red); color: #fff; box-shadow: 0 4px 14px rgba(201,34,39,0.30); }
.btn-cta:hover { background: var(--mf-red-hover); box-shadow: 0 6px 20px rgba(201,34,39,0.40); }
/* Sem override de foco aqui: o anel global (outline sólido) é mais visível
   que o box-shadow translúcido que existia antes. */
.btn-dark { background: var(--mf-blue-deep); color: #fff; }
.btn-dark:hover { background: var(--mf-blue-mid); }
.btn-ghost-light { background: transparent; color: var(--mf-ink-1000); border-color: var(--mf-ink-300); }
.btn-ghost-light:hover { border-color: var(--mf-blue-deep); color: var(--mf-blue-deep); }
/* Sem backdrop-filter: o overlay do hero já garante legibilidade e o blur
   aqui era decorativo (ban de glassmorphism). */
.btn-ghost-dark { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.34); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.55); }
.btn-sm { padding: var(--mf-space-2) var(--mf-space-4); font-size: var(--mf-fs-caption); min-height: 44px; }
.btn-sm .arrow { width: 18px; height: 18px; font-size: 10px; }

/* ===== EYEBROW / PILL ===== */
.eyebrow { font-family: var(--mf-font-mono); font-weight: 500; font-size: var(--mf-fs-caption); line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mf-red); display: inline-flex; align-items: center; margin-bottom: var(--mf-space-4); }
.eyebrow--white { color: #fff; }
.eyebrow--red { color: var(--mf-red); }
.pill { display: inline-flex; align-items: center; gap: var(--mf-space-2); padding: var(--mf-space-2) var(--mf-space-4); border-radius: var(--mf-radius-pill); font-family: var(--mf-font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500; margin-bottom: var(--mf-space-4); }
.pill--blue { color: var(--mf-red); }
.pill--ghost-light { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ===== HEADER STICKY ===== */
.header-sticky { position: fixed; top: 36px; left: 0; right: 0; z-index: 100; padding: 16px 0; background: transparent; border-bottom: 1px solid transparent; /* padding fora da transicao: animar padding forca reflow a cada frame.
   A mudanca 16px->12px no scroll agora e instantanea. */
  transition: background 220ms ease, box-shadow var(--mf-motion-base), border-color var(--mf-motion-base); }
.header-sticky.is-scrolled { background: var(--mf-blue-deep); padding: 12px 0; border-bottom-color: rgba(255,255,255,0.10); box-shadow: 0 6px 24px rgba(0,7,54,0.55); }
.header-sticky-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--mf-space-5); }
.header-sticky .logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.header-sticky .logo img { height: 64px; width: auto; flex-shrink: 0; object-fit: contain; }
@media (max-width: 640px) {
  .header-sticky-inner { gap: var(--mf-space-3); }
  .header-sticky .btn-cta.btn-sm { padding: 8px 12px; font-size: 12px; letter-spacing: 0.02em; }
  .header-sticky .btn-cta.btn-sm .arrow { width: 16px; height: 16px; font-size: 9px; }
}
@media (max-width: 767.98px) {
  .case-numbers { grid-template-columns: 1fr !important; gap: var(--mf-space-4); }
  .case-num { padding-bottom: 0; border-bottom: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--mf-space-4); }
  .case-num .v { font-size: 1.75rem; }
  .case-num .l { font-size: 11px; margin-top: 0; }
  .brands-row { grid-template-columns: 1fr !important; gap: var(--mf-space-3); }
  .cta-strip { border-radius: 0 !important; margin: 0 !important; max-width: 100% !important; }
  .footer h5, .footer .col-title { margin: 0 0 var(--mf-space-4) !important; }
}
.header-sticky-nav { display: none; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--mf-radius-pill); padding: var(--mf-space-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); gap: var(--mf-space-hair); }
@media (min-width: 1240px) { .header-sticky-nav { display: inline-flex; } }
.header-sticky-nav a { color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 500; padding: var(--mf-space-2) var(--mf-space-4); border-radius: var(--mf-radius-pill); transition: all var(--mf-motion-snap); }
.header-sticky-nav a:hover, .header-sticky-nav a.active { color: #fff; background: rgba(255,255,255,0.10); }

/* ===== NAV MOBILE · gaveta abaixo de 1240px =====
   Sem isto a navegação simplesmente sumia em tablet e celular. */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--mf-space-2); min-width: 44px; height: 44px; padding: 0 var(--mf-space-3); flex-shrink: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--mf-radius-sm); color: #fff; cursor: pointer; transition: background var(--mf-motion-base), border-color var(--mf-motion-base); }
.nav-toggle:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.5); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
@media (min-width: 1240px) { .nav-toggle { display: none; } }

/* No mobile o header fica so com marca e menu. O CTA sai: era ele que
   empurrava o botao do menu para fora da viewport a 375px, e o caminho
   de contato continua na gaveta, no botao do WhatsApp e no rodape. */
@media (max-width: 599.98px) {
  .header-sticky-inner { gap: var(--mf-space-3); }
  .header-sticky .logo img { height: 44px; }
  .header-sticky .btn-cta { display: none; }
}

.nav-drawer { display: none; position: fixed; left: 0; right: 0; z-index: 99; background: var(--mf-blue-deep); border-bottom: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 40px rgba(0,7,54,0.55); }
.nav-drawer.is-open { display: block; }
@media (min-width: 1240px) { .nav-drawer, .nav-drawer.is-open { display: none; } }
.nav-drawer-inner { padding-top: var(--mf-space-2); padding-bottom: var(--mf-space-5); }
.nav-drawer a { display: flex; align-items: center; padding: var(--mf-space-4) 0; border-top: 1px solid rgba(255,255,255,0.12); color: #fff; font-family: var(--mf-font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; transition: color var(--mf-motion-snap); }
.nav-drawer a:first-child { border-top: 0; }
.nav-drawer a:hover { color: var(--mf-blue-on-dark); }
.nav-drawer a[aria-current="page"] { color: var(--mf-blue-on-dark); }

/* ===== HERO (Home · rotativo) ===== */
.hero { position: relative; color: #fff; overflow: hidden; min-height: clamp(600px, 80svh, 760px); display: flex; align-items: flex-end; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms ease-in-out; }
.hero-slide.active { opacity: 1; }
.hero-slide .ph { width: 100%; height: 100%; border-radius: 0; }
.hero-slide.active .ph-img { transform: scale(1.06); }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.88) 100%), linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 65%); }
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: var(--mf-header-clear); padding-bottom: clamp(48px, 6vw, 80px); text-align: center; }
.hero-inner h1 { font-family: var(--mf-font-display); font-weight: 700; font-size: clamp(2rem, 5.5vw, 4.25rem); line-height: 1.04; letter-spacing: -0.025em; color: #fff; margin: 0 auto var(--mf-space-5); max-width: 20ch; }
.hero-inner h1 em { color: var(--mf-blue-on-dark); font-style: italic; font-weight: 600; }
.hero-inner p { font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 56ch; margin: 0 auto var(--mf-space-6); }
.hero-actions { display: flex; gap: var(--mf-space-3); flex-wrap: wrap; justify-content: center; }
.hero-inner .pill { margin-bottom: var(--mf-space-4); }
.hero-pagination { position: absolute; bottom: var(--mf-space-7); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.hero-dot { width: 36px; height: 2px; background: rgba(255,255,255,0.30); border: 0; cursor: pointer; padding: 0; transition: all var(--mf-motion-base); }
.hero-dot.active { background: var(--mf-blue-light); height: 3px; width: 44px; }
/* Botao de pausa do hero rotativo (injetado por JS so quando ha >1 slide).
   Exigencia da WCAG 2.2.2 para movimento automatico acima de 5s. */
.hero-pausa {
  position: absolute; right: var(--mf-space-5); bottom: var(--mf-space-5); z-index: 3;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(0,7,54,0.55); border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--mf-radius-pill); backdrop-filter: blur(2px);
  transition: background var(--mf-motion-base), border-color var(--mf-motion-base);
}
.hero-pausa:hover { background: rgba(0,7,54,0.75); border-color: rgba(255,255,255,0.6); }

/* ===== PAGE HERO (páginas internas · estático, mais baixo) ===== */
.page-hero { position: relative; color: #fff; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; }
/* z-index: 0 (nao "auto") e obrigatorio aqui: ele CRIA o contexto de
   empilhamento que prende o .ph-img (z-index: 2) dentro do .ph. Sem
   isso a imagem subia para o mesmo contexto do .page-hero-overlay
   (z-index: 1) e pintava por cima dele — o overlay existia, era
   renderizado, e ficava atras da foto. Igual ao .hero-slides da home. */
.page-hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; z-index: 0; }
/* Topo subiu de 0.55 para 0.65: com 0.55 a foto vazava e o breadcrumb
   (11px, no ponto mais claro do hero) caía para 2.7:1 nas 6 páginas internas.
   0.65 mantém a fotografia legível e dá margem de contraste. */
.page-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,7,54,0.65) 0%, rgba(0,7,54,0.92) 100%); }
.page-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: var(--mf-header-clear); padding-bottom: var(--mf-space-8); }
/* Branco em vez do azul: sobre fotografia variável o #4ea9ec só passaria
   com overlay a 0.80, que apagaria a imagem. Branco dá 8.9:1 no pior pixel. */
.page-hero h1 { font-family: var(--mf-font-display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 0 0 var(--mf-space-5); max-width: 22ch; }
.page-hero p { font-size: var(--mf-fs-body-lg); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 62ch; margin: 0; }

/* ===== FIGURES · faixa de indicadores assimétrica =====
   Substitui a barra hero-metric de 4 colunas iguais (ban do impeccable).
   Uma cifra dominante + três linhas de ficha técnica com régua. */
.figures { background: var(--mf-blue-deep); color: #fff; position: relative; overflow: hidden; }
.figures::after { content: ""; position: absolute; inset: 0; background-image: var(--mf-noise); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
.figures-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--mf-space-7); padding-top: var(--mf-space-8); padding-bottom: var(--mf-space-8); align-items: center; }
@media (min-width: 900px) { .figures-inner { grid-template-columns: 5fr 7fr; gap: var(--mf-space-9); } }
.figure-lead .v { font-family: var(--mf-font-display); font-weight: 800; font-size: clamp(3.75rem, 9vw, 7rem); line-height: 0.85; letter-spacing: -0.045em; color: #fff; }
/* Sem uso hoje (o indicador principal passou a ser "86", sem sufixo), mas
   alinhada ao mesmo criterio para nao reintroduzir o sobrescrito. */
.figure-lead .v small { font-size: 0.42em; vertical-align: baseline; color: var(--mf-blue-on-dark); margin-left: 6px; letter-spacing: 0; }
.figure-lead .l { font-family: var(--mf-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mf-blue-on-dark); margin-top: var(--mf-space-4); }
.figure-rows { margin: 0; }
.figure-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mf-space-4); padding: var(--mf-space-4) 0; border-top: 1px solid rgba(255,255,255,0.12); }
.figure-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.figure-row dt { font-family: var(--mf-font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin: 0; }
.figure-row dd { margin: 0; font-family: var(--mf-font-display); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
/* O sufixo estava em 0.5em e vertical-align: super. Sobrescrito sinaliza
   nota de rodape ou expoente, e nenhum dos dois e o caso: "200+" e "24/7"
   sao parte do numero. Levantado e pela metade, "24/7" chegava a ler como
   "24, nota 7". Vai para a linha de base, em 0.72em — subordinado ao
   numero, mas legivel como parte dele. */
.figure-row dd small { font-size: 0.72em; vertical-align: baseline; color: var(--mf-blue-on-dark); letter-spacing: -0.01em; }

/* ===== VISÃO GERAL · overview asimétrico ===== */
.overview { padding: var(--mf-space-7) 0; background: #fff; }
.overview-grid { display: grid; grid-template-columns: 1fr; gap: var(--mf-space-7); }
@media (min-width: 900px) { .overview-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--mf-space-8); } }
.overview-text h2 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.625rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-4); }
.overview-text p { font-size: var(--mf-fs-body-md); line-height: 1.65; color: var(--mf-ink-700); margin: 0 0 var(--mf-space-3); }
.overview-text .actions { margin-top: var(--mf-space-5); display: flex; gap: var(--mf-space-3); flex-wrap: wrap; }
.overview-photos { display: grid; grid-template-columns: 5fr 4fr; grid-template-rows: auto auto; gap: var(--mf-space-4); }
.op-1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.op-2 { grid-column: 2 / 3; grid-row: 1 / 2; }
.op-3 { grid-column: 1 / 3; grid-row: 2 / 3; }
.op .ph { border-radius: var(--mf-radius-lg); }
.op-1 .ph { aspect-ratio: 5/3; }
.op-2 .ph { aspect-ratio: 4/3; }
.op-3 .ph { aspect-ratio: 16/9; }
.op .ph-img { transition: transform 1.6s cubic-bezier(0.16,1,0.3,1); }
.op:hover .ph-img { transform: scale(1.04); }

/* ===== PULL QUOTE TELA INTEIRA ===== */
.pullquote-fullscreen { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--mf-space-9) 0; background: var(--mf-blue-deep); text-align: center; position: relative; overflow: hidden; color: #fff; }
.pullquote-fullscreen.has-bg { background-color: var(--mf-blue-deep); background-size: cover; background-position: center; }
@media (min-width: 1024px) { .pullquote-fullscreen.has-bg { background-attachment: fixed; } }
.pullquote-fullscreen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(201,34,39,0.55) 0%, transparent 60%), linear-gradient(135deg, rgba(0,7,54,0.92) 0%, rgba(0,7,54,0.85) 45%, rgba(122,16,16,0.78) 100%); z-index: 0; pointer-events: none; }
.pullquote-fullscreen::before { content: "\201C"; position: absolute; top: 12vh; left: 50%; transform: translateX(-50%); font-family: var(--mf-font-display); font-weight: 700; font-size: clamp(7rem, 18vw, 16rem); line-height: 0.6; color: #fff; opacity: 0.10; z-index: 1; pointer-events: none; }
.pullquote-fullscreen .container { position: relative; z-index: 2; }
.pullquote-fullscreen-vol { font-family: var(--mf-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mf-blue-on-dark); margin-bottom: var(--mf-space-5); }
.pullquote-fullscreen blockquote { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.625rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; color: #fff; max-width: 18ch; margin: 0 auto var(--mf-space-6); }
.pullquote-fullscreen blockquote em { color: var(--mf-blue-on-dark); font-style: italic; font-weight: 500; }
.pullquote-fullscreen .who { font-family: var(--mf-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* ===== SECTION ===== */
.section { padding: var(--mf-space-9) 0; }
.section-tight { padding: var(--mf-space-7) 0; }
.section-light-2 { background: var(--mf-ink-100); }
.section-dark { background: var(--mf-ink-1000); color: #fff; position: relative; overflow: hidden; }
.section-dark::after { content: ""; position: absolute; inset: 0; background-image: var(--mf-noise); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; }
.section-header { margin-bottom: var(--mf-space-7); max-width: 63ch; }
.section-header h2 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 var(--mf-space-3); color: var(--mf-blue-deep); }
.section-dark .section-header h2 { color: #fff; }
.section-header p { font-size: var(--mf-fs-body-lg); line-height: 1.6; color: var(--mf-ink-700); margin: 0; max-width: 56ch; }
.section-dark .section-header p { color: rgba(255,255,255,0.7); }

/* ===== SPLITS EDITORIAIS ===== */
.splits { padding: var(--mf-space-7) 0; background: #fff; }
.split { display: grid; gap: var(--mf-space-7); grid-template-columns: 1fr; align-items: center; padding: var(--mf-space-7) 0; position: relative; }
.split + .split::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: var(--mf-hairline-light); opacity: 0.4; }
@media (min-width: 900px) {
  .split { grid-template-columns: 7fr 5fr; gap: var(--mf-space-8); }
  .split.reverse { grid-template-columns: 5fr 7fr; }
  .split.reverse .split-img { order: 2; }
  .split.reverse .split-text { order: 1; }
}
.split-img figure .ph { border-radius: var(--mf-radius-lg); }
.split-text .num { font-family: var(--mf-font-mono); font-size: var(--mf-fs-caption); color: var(--mf-blue-cobalt); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-bottom: var(--mf-space-4); }
.split-text h3 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-5); }
.split-text, .case-text, .overview-text, .cap-row, .market-item, .contact-card, .holding-card { min-width: 0; }
.split-text p.with-drop { font-size: var(--mf-fs-body-lg); line-height: 1.6; color: var(--mf-ink-700); margin: 0 0 var(--mf-space-5); }
.split-text ul { display: grid; gap: var(--mf-space-3); margin: 0 0 var(--mf-space-6); padding: var(--mf-space-5) 0; border-top: 1px solid var(--mf-ink-200); border-bottom: 1px solid var(--mf-ink-200); }
.split-text li { font-size: var(--mf-fs-body-md); color: var(--mf-ink-700); padding-left: var(--mf-space-5); position: relative; }
.split-text li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--mf-red); }
.split-text a.link { font-weight: 600; color: var(--mf-blue-cobalt); display: inline-flex; align-items: center; gap: 8px; transition: gap var(--mf-motion-base); font-size: var(--mf-fs-body-md); }
.split-text a.link:hover { gap: 14px; }
/* WCAG 1.4.1: cor sozinha nao pode indicar link em meio a texto. */
a.link, .contact-card a.contact-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.link:hover, .contact-card a.contact-link:hover { text-decoration-thickness: 2px; }

/* ===== CAPABILITIES · lista editorial numerada =====
   Substitui o grid de 4 cards idênticos com ícone (ban do impeccable +
   ban de marca "ícone grande arredondado acima de cada título").
   Primeira entrada tem peso de abertura; as demais são linhas de ficha. */
.capabilities { padding: var(--mf-space-9) 0; background: #fff; }
.cap-row { display: grid; grid-template-columns: 1fr; gap: var(--mf-space-3); padding: var(--mf-space-6) 0; border-top: 1px solid var(--mf-ink-200); }
/* Eram 3 colunas (3.5rem para o numero + 5fr + 7fr). Sem a numeracao,
   sobram titulo e texto — 2 colunas, senao o h3 caia na faixa estreita. */
@media (min-width: 900px) { .cap-row { grid-template-columns: 5fr 7fr; gap: var(--mf-space-6); align-items: start; } }
.cap-row:last-child { border-bottom: 1px solid var(--mf-ink-200); }
.cap-row h3 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--mf-blue-deep); margin: 0; }
.cap-row p { margin: 0; color: var(--mf-ink-700); font-size: var(--mf-fs-body-md); line-height: 1.65; max-width: 62ch; }
.cap-row--lead { padding-top: 0; border-top: 0; }
.cap-row--lead h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; }
.cap-row--lead p { font-size: var(--mf-fs-body-lg); }

/* ===== ABOUT · TABS (Missão/Visão/Valores/História) ===== */
.about { padding: var(--mf-space-7) 0; background: #fff; position: relative; overflow: hidden; }
.about-bigtext { position: absolute; bottom: -2vw; left: 0; right: 0; z-index: 0; pointer-events: none; font-family: var(--mf-font-display); font-weight: 800; font-size: clamp(4rem, 14vw, 16rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--mf-blue-deep); opacity: 0.05; white-space: nowrap; text-align: center; user-select: none; }
.about .container { position: relative; z-index: 1; }
.about-grid { display: grid; gap: var(--mf-space-7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--mf-space-9); } }
.about-photo .ph { border-radius: 0 var(--mf-radius-xl) var(--mf-radius-xl) 0; aspect-ratio: 4 / 5; margin-left: calc(-1 * var(--mf-container-pad-mobile)); }
@media (min-width: 768px) { .about-photo .ph { margin-left: calc(-1 * var(--mf-container-pad-desktop)); } }
.about-text h2 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-5); }
.about-text h2 em { color: var(--mf-red); font-style: normal; font-weight: 700; }
.about-tabs { display: inline-flex; flex-wrap: wrap; background: rgba(0,7,54,0.06); border-radius: var(--mf-radius-pill); padding: var(--mf-space-1); margin-bottom: var(--mf-space-5); gap: var(--mf-space-hair); }
.about-tab { background: transparent; border: 0; cursor: pointer; padding: 8px 16px; border-radius: var(--mf-radius-pill); font-family: var(--mf-font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500; color: var(--mf-ink-600); transition: all var(--mf-motion-base); }
.about-tab.active { background: var(--mf-red); color: #fff; }
.about-panel { display: none; color: var(--mf-ink-700); line-height: 1.7; font-size: var(--mf-fs-body-md); }
.about-panel.active { display: block; }
.about-panel p { margin: 0 0 var(--mf-space-4); }
.about-panel ul { display: grid; gap: 12px; margin: var(--mf-space-5) 0 var(--mf-space-5); }
.about-panel li { padding-left: var(--mf-space-6); position: relative; color: var(--mf-ink-700); font-size: var(--mf-fs-body-md); }
.about-panel li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--mf-red); background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-size: 16px 16px; }
.about-panel .value-item { margin-bottom: var(--mf-space-5); }
.about-panel .value-item h3 { font-family: var(--mf-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-2); letter-spacing: -0.01em; }
.about-panel .value-item p { margin: 0; }
.about-actions { display: flex; gap: var(--mf-space-3); flex-wrap: wrap; margin-top: var(--mf-space-6); }

/* ===== ESTRUTURA INTEGRADA (holding) ===== */
.holding { padding: var(--mf-space-7) 0; background: var(--mf-ink-100); }
.holding-parent { background: var(--mf-blue-deep); color: #fff; border-radius: var(--mf-radius-lg); padding: var(--mf-space-6) var(--mf-space-7); text-align: center; margin-bottom: var(--mf-space-5); position: relative; }
.holding-parent .tag { font-family: var(--mf-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mf-blue-on-dark); margin-bottom: var(--mf-space-3); }
.holding-parent h3 { font-family: var(--mf-font-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin: 0 0 var(--mf-space-2); letter-spacing: -0.01em; }
.holding-parent p { margin: 0; color: rgba(255,255,255,0.75); font-size: var(--mf-fs-body-sm); max-width: 60ch; margin-left: auto; margin-right: auto; }
.holding-connector { width: 2px; height: 28px; background: var(--mf-blue-light); margin: 0 auto; opacity: 0.5; }
.holding-children { display: grid; gap: var(--mf-space-4); grid-template-columns: 1fr; margin-top: var(--mf-space-5); align-items: start; }
@media (min-width: 900px) { .holding-children { grid-template-columns: repeat(3, 1fr); } }
.holding-card { background: #fff; border: 1px solid var(--mf-ink-200); border-radius: var(--mf-radius-lg); padding: var(--mf-space-6); transition: all var(--mf-motion-base); }
.holding-card:hover { transform: translateY(-3px); box-shadow: var(--mf-shadow-md); }
/* O acento azul saiu do topo do card (faixa em card arredondado e
   assinatura de UI gerada) e virou um fio curto sobre o rotulo. */
.holding-card .tag::before { content: ""; display: block; width: 28px; height: 2px;
  background: var(--mf-blue-light); margin-bottom: var(--mf-space-3); }
.holding-card .tag { font-family: var(--mf-font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--mf-blue-cobalt); margin-bottom: var(--mf-space-3); font-weight: 500; }
.holding-card h4 { font-family: var(--mf-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-3); line-height: 1.25; letter-spacing: -0.01em; }
.holding-card p { font-size: var(--mf-fs-body-sm); color: var(--mf-ink-700); margin: 0 0 var(--mf-space-4); line-height: 1.55; }
.holding-card ul { display: grid; gap: 6px; }
.holding-card li { font-size: 13px; color: var(--mf-ink-700); padding-left: 16px; position: relative; }
.holding-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--mf-red); }

/* ===== LEDGER · lista técnica com régua =====
   Substitui o grid de chips repetidos. Sem caixa, sem ícone: numeração
   monoespaçada + título, no vocabulário de ficha técnica. */
.ledger { display: grid; }
.ledger-row { display: grid; grid-template-columns: 1fr; align-items: baseline; padding: var(--mf-space-4) 0; border-top: 1px solid var(--mf-ink-200); }
.ledger-row:last-child { border-bottom: 1px solid var(--mf-ink-200); }
.ledger-row h3 { margin: 0; font-family: var(--mf-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--mf-blue-deep); letter-spacing: -0.01em; line-height: 1.35; }
.ledger-row p { margin: 4px 0 0; font-size: var(--mf-fs-body-sm); color: var(--mf-ink-600); line-height: 1.5; }
.section-dark .ledger-row { border-color: rgba(255,255,255,0.14); }
/* h3, nao h4: o passo de hierarquia de headings converteu h4->h3 dentro
   de .ledger-row e este seletor ficou morto, jogando o titulo de volta
   no azul-escuro da regra base — 1.02:1 sobre o fundo escuro. */
.section-dark .ledger-row h3 { color: #fff; }
.section-dark .ledger-row p { color: rgba(255,255,255,0.62); }

/* ===== INDEX STRIP · faixa de índice (mercados na Home) ===== */
.index-strip { display: flex; flex-wrap: wrap; border-top: 1px solid var(--mf-ink-200); border-bottom: 1px solid var(--mf-ink-200); }
.index-strip a { flex: 1 1 170px; padding: var(--mf-space-6) var(--mf-space-5); border-right: 1px solid var(--mf-ink-200); font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.1875rem); color: var(--mf-blue-deep); letter-spacing: -0.01em; transition: color var(--mf-motion-base), background var(--mf-motion-base); }
.index-strip a:first-child { padding-left: 0; }
.index-strip a:last-child { border-right: 0; }
.index-strip a:hover { color: var(--mf-blue-on-light); }

/* ===== MARKET INDEX · entradas numeradas (página Mercados) ===== */
.market-index { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .market-index { grid-template-columns: repeat(2, 1fr); column-gap: var(--mf-space-8); } }
.market-item { display: grid; grid-template-columns: auto 1fr; gap: var(--mf-space-5); align-items: start; padding: var(--mf-space-6) 0; border-top: 1px solid var(--mf-ink-200); }
.market-item .n { font-family: var(--mf-font-display); font-weight: 800; font-size: 2.25rem; line-height: 0.9; color: var(--mf-ink-400); letter-spacing: -0.04em; }
.market-item h3 { margin: 0 0 6px; font-family: var(--mf-font-display); font-weight: 600; font-size: 1.1875rem; color: var(--mf-blue-deep); letter-spacing: -0.015em; }
.market-item p { margin: 0; font-size: var(--mf-fs-body-sm); color: var(--mf-ink-700); line-height: 1.6; }

/* ===== TAG ROW · certificações (denso, textual) ===== */
.tagrow { display: flex; flex-wrap: wrap; gap: var(--mf-space-2); }
/* Escopado em .tagrow: um ".tag" solto colidia com os labels de
   .holding-card e .contact-card, que ganhavam caixa e borda sem querer. */
.tagrow li { display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid var(--mf-ink-300); border-radius: var(--mf-radius-xs); font-family: var(--mf-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mf-ink-700); background: #fff; }
.section-dark .tagrow li { border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.85); background: transparent; }

/* ===== CASES NARRATIVOS ===== */
.cases { padding: var(--mf-space-9) 0; background: var(--mf-blue-deep); color: #fff; position: relative; overflow: hidden; }
.cases::after { content: ""; position: absolute; inset: 0; background-image: var(--mf-noise); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
.cases .container { position: relative; z-index: 1; }
.cases .section-header h2 { color: #fff; }
.cases .section-header p { color: rgba(255,255,255,0.7); }
.case-grid { display: grid; gap: var(--mf-space-9); }
.case { display: grid; gap: var(--mf-space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .case { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--mf-space-9); }
  .case:nth-child(even) .case-img { order: 2; }
  .case:nth-child(even) .case-text { order: 1; }
}
.case-img figure .ph { border-radius: var(--mf-radius-lg); border: 1px solid rgba(255,255,255,0.10); }
.case-text .seg { font-family: var(--mf-font-mono); font-size: 11px; color: var(--mf-blue-on-dark); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--mf-space-4); font-weight: 500; }
.case-text h3 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin: 0 0 var(--mf-space-5); }
.case-text p { color: rgba(255,255,255,0.78); line-height: 1.7; margin: 0 0 var(--mf-space-6); font-size: var(--mf-fs-body-md); }
.case-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mf-space-4); padding-top: var(--mf-space-5); border-top: 1px solid rgba(255,255,255,0.18); }
.case-num .v { font-family: var(--mf-font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; color: #fff; letter-spacing: -0.02em; }
.case-num .l { font-family: var(--mf-font-mono); font-size: 11px; color: var(--mf-blue-on-dark); text-transform: uppercase; letter-spacing: 0.10em; margin-top: var(--mf-space-2); }

/* ===== MARCAS ===== */
.brands-row { display: grid; gap: var(--mf-space-3); align-items: center; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .brands-row { grid-template-columns: repeat(3, 1fr); } }
.brands-row--6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .brands-row--6 { grid-template-columns: repeat(6, 1fr); } }
.brand-cell { height: 88px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--mf-ink-200); border-radius: var(--mf-radius-md); transition: border-color var(--mf-motion-base), transform var(--mf-motion-base), box-shadow var(--mf-motion-base); background: #fff; padding: 0 var(--mf-space-4); position: relative; overflow: hidden; }
.brand-cell:hover { border-color: var(--mf-blue-deep); transform: translateY(-2px); box-shadow: var(--mf-shadow-sm); }
.brand-fallback { font-family: var(--mf-font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-align: center; transition: opacity var(--mf-motion-base); opacity: 0.85; }
.brand-cell:hover .brand-fallback { opacity: 1; }
.brand-fallback--notifier { color: #C8102E; letter-spacing: 0.06em; }
.brand-fallback--honeywell { color: #E60023; letter-spacing: 0.04em; font-size: 13px; }
.brand-fallback--paradigm  { color: #003478; letter-spacing: 0.06em; }
.brand-fallback--sevo { color: #4a5fa5; letter-spacing: 0.03em; font-size: 12px; }
.brand-fallback--matre { color: #d3232a; letter-spacing: 0.04em; }
.brand-fallback--orion { color: #1a1a8c; letter-spacing: 0.03em; font-style: italic; }
.brand-logo { max-height: 56px; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter var(--mf-motion-base), opacity var(--mf-motion-base), transform var(--mf-motion-base); }
.brand-cell:hover .brand-logo { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
.brands-row .reveal, .certs .reveal { transition-property: opacity, transform; transition-duration: 700ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.brands-row .reveal:nth-child(1) { transition-delay: 0ms; }
.brands-row .reveal:nth-child(2) { transition-delay: 90ms; }
.brands-row .reveal:nth-child(3) { transition-delay: 180ms; }
.brands-row .reveal:nth-child(4) { transition-delay: 270ms; }
.brands-row .reveal:nth-child(5) { transition-delay: 360ms; }
.brands-row .reveal:nth-child(6) { transition-delay: 450ms; }

/* ===== CTA STRIP ===== */
.cta-strip { background: var(--mf-blue-deep); color: #fff; padding: var(--mf-space-8) 0; position: relative; overflow: hidden; border-radius: 28px; margin: var(--mf-space-7) auto; max-width: calc(var(--mf-container-max) - 48px); }
/* Removida a grade de repeating-linear-gradient: assinatura de UI
   gerada, e o ::after abaixo ja da a textura de grao. */
.cta-strip::after { content: ""; position: absolute; inset: 0; background-image: var(--mf-noise); opacity: 0.06; mix-blend-mode: overlay; pointer-events: none; }
.cta-strip-inner { position: relative; display: grid; gap: var(--mf-space-5); align-items: center; z-index: 1; padding: 0 var(--mf-space-5); }
@media (min-width: 768px) { .cta-strip-inner { grid-template-columns: 2fr 1fr; padding: 0 var(--mf-space-7); } }
.cta-strip h2 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.1; margin: 0 0 var(--mf-space-3); color: #fff; letter-spacing: -0.02em; }
/* 0.85 dava 4.40:1 sobre a parada vermelha do gradiente. 0.94 dá 5.2:1. */
.cta-strip p { color: rgba(255,255,255,0.94); margin: 0; max-width: 56ch; font-size: var(--mf-fs-body-md); }
.cta-strip-actions { display: flex; gap: var(--mf-space-3); flex-wrap: wrap; justify-self: end; }
.btn-on-blue { background: var(--mf-red); color: #fff; box-shadow: 0 4px 14px rgba(201,34,39,0.30); }
.btn-on-blue:hover { background: var(--mf-red-hover); }
.btn-on-blue-ghost { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.38); }
.btn-on-blue-ghost:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.60); }

/* ===== SOLUÇÕES (2 cards Home → Engenharia / Fabricação) ===== */
.solutions-grid { display: grid; gap: var(--mf-space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
.solution-card { background: #fff; border: 1px solid var(--mf-ink-200); border-radius: var(--mf-radius-lg); padding: var(--mf-space-7); transition: all var(--mf-motion-base); display: block; }
.solution-card:hover { transform: translateY(-3px); box-shadow: var(--mf-shadow-md); border-color: var(--mf-blue-light); }
.solution-card .n { font-family: var(--mf-font-mono); font-size: 11px; color: var(--mf-blue-cobalt); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--mf-space-4); font-weight: 500; }
.solution-card h3 { font-family: var(--mf-font-display); font-weight: 600; font-size: 1.375rem; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-3); letter-spacing: -0.01em; }
.solution-card p { font-size: var(--mf-fs-body-md); color: var(--mf-ink-700); line-height: 1.6; margin: 0 0 var(--mf-space-5); }

/* ===== CONTATO (cards) ===== */
.contact-grid { display: grid; gap: var(--mf-space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { background: #fff; border: 1px solid var(--mf-ink-200); border-radius: var(--mf-radius-lg); padding: var(--mf-space-6); }
.contact-card .tag { font-family: var(--mf-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mf-blue-cobalt); margin-bottom: var(--mf-space-3); font-weight: 500; }
.contact-card h3 { font-family: var(--mf-font-display); font-weight: 600; font-size: 1.125rem; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-3); }
.contact-card p { font-size: var(--mf-fs-body-sm); line-height: 1.7; color: var(--mf-ink-700); margin: 0 0 var(--mf-space-4); }
.contact-card a.contact-link { display: block; font-weight: 600; color: var(--mf-blue-cobalt); margin-top: var(--mf-space-2); }
.contact-card a.contact-link:hover { color: var(--mf-blue-cobalt); }

/* ===== STUB (páginas em levantamento de dados) ===== */
.stub-card { max-width: 62ch; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--mf-ink-200); border-radius: var(--mf-radius-lg); padding: var(--mf-space-8) var(--mf-space-6); }
.stub-card .eyebrow { display: inline-flex; }
.stub-card h2 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-4); letter-spacing: -0.02em; }
.stub-card p { font-size: var(--mf-fs-body-md); line-height: 1.65; color: var(--mf-ink-700); margin: 0 0 var(--mf-space-6); }
.stub-card .actions { display: flex; gap: var(--mf-space-3); flex-wrap: wrap; justify-content: center; }

/* Visualmente oculto, mas lido por leitor de tela. Usado para dar <h2> a
   secoes que sao visualmente auto-explicativas mas pulavam nivel. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ===== FOOTER ===== */
.footer { background: var(--mf-blue-deep); color: rgba(255,255,255,0.65); padding: var(--mf-space-8) 0 var(--mf-space-5); border-top: 4px solid var(--mf-red); position: relative; overflow: hidden; }
.footer::after { content: ""; position: absolute; inset: 0; background-image: var(--mf-noise); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; }
.footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: var(--mf-space-7); grid-template-columns: 1fr; }
/* 4 colunas iguais: a marca e os enderecos saíram para a .footer-top */
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer h5, .footer .col-title { font-family: var(--mf-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: #fff; margin: 0 0 var(--mf-space-4); font-weight: 500; }
.footer ul { display: grid; gap: var(--mf-space-3); }
.footer a { color: rgba(255,255,255,0.65); transition: color var(--mf-motion-snap); }
.footer a:hover { color: var(--mf-blue-on-dark); }
.footer-brand-logo { height: 56px; width: auto; margin-bottom: var(--mf-space-3); }
.footer-brand-tag { font-family: var(--mf-font-mono); font-size: 11px; color: var(--mf-blue-on-dark); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--mf-space-5); font-weight: 500; }
.footer-addr { font-size: var(--mf-fs-body-sm); line-height: 1.7; }
.footer-bottom { margin-top: var(--mf-space-8); padding-top: var(--mf-space-5); border-top: 1px solid rgba(255,255,255,0.10); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--mf-space-3); font-family: var(--mf-font-mono); font-size: 11px; letter-spacing: 0.08em; }

/* ===== WhatsApp FAB ===== */
.wa-fab { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: var(--mf-shadow-lg); z-index: var(--mf-z-overlay); transition: transform var(--mf-motion-base); }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; }

/* ===== Reveal on scroll ===== */
/* Gated em .js (classe posta por script inline no <head>). Sem JavaScript
   o .reveal nunca fica opacity:0, entao o conteudo aparece normalmente.
   Antes, se o script falhasse, 12 blocos da Home ficavam invisiveis. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: none; }
}


/* ===== MOVIMENTO REDUZIDO — cobertura completa =====
   tokens.css ja zera os tokens de motion, mas havia duracoes hardcoded
   (1200ms do slide, 700ms do reveal, 1.6s do zoom da imagem). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-slide.active .ph-img, .op:hover .ph-img { transform: none; }
  .btn:hover { transform: none; }
  .pullquote-fullscreen.has-bg { background-attachment: scroll; }
}

/* ===== ALTO CONTRASTE FORCADO (Windows) =====
   Nos modos forced-colors o sistema substitui as cores; garantir que
   bordas e foco continuem visiveis. */
@media (forced-colors: active) {
  .btn, .tagrow li, .contact-card, .holding-card, .solution-card { border: 1px solid ButtonBorder; }
  :where(a, button):focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .ph-img { forced-color-adjust: none; }
}


/* =================================================================
   ADAPT — adaptacao para entrada por TOQUE
   Detecta o dispositivo de entrada, nao a largura da tela: um desktop
   com touchscreen tambem precisa de alvo grande, e um tablet com mouse
   nao precisa. Assim a densidade do desktop com mouse fica intacta.
   ================================================================= */
@media (hover: none) and (pointer: coarse) {

  /* Links do rodape: 19px de altura com 10px de gap era pilha apertada.
     Agora cada link tem 44px de area e o gap sobe para separar de fato. */
  .footer ul { gap: var(--mf-space-2); }
  .footer ul a { display: flex; align-items: center; min-height: 44px; }

  /* Abas Missao/Visao/Valores: 29px -> 44px */
  .about-tab { min-height: 44px; padding-left: var(--mf-space-5); padding-right: var(--mf-space-5); }

  /* CTAs em linha e links de contato: 26px -> 44px */
  a.link, .contact-card a.contact-link { min-height: 44px; align-items: center; }

  /* Faixa de indice de mercados: alvo por item */
  .index-strip a { min-height: 44px; }

  /* Gaveta de navegacao ja tem 59px, mas garante o piso */
  .nav-drawer a { min-height: 44px; align-items: center; }

  /* Sem hover em toque: o estado :hover pode "grudar" apos o tap.
     Neutraliza os efeitos de elevacao que dependem de mouse. */
  .cap-row:hover, .holding-card:hover, .solution-card:hover,
  .contact-card:hover, .brand-cell:hover, .market-item:hover,
  .ledger-row:hover, .chip:hover { transform: none; box-shadow: none; }
  .op:hover .ph-img, .brand-cell:hover .brand-logo { transform: none; }
}

/* Paisagem em celular: o hero de 100vh ocupa a tela toda e esconde o
   conteudo. Limita a altura quando a viewport e baixa. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 420px; }
  .page-hero { min-height: 300px; }
  .page-hero-inner { padding-top: var(--mf-header-clear-baixo); }
  .pullquote-fullscreen { min-height: 0; padding: var(--mf-space-8) 0; }
}

/* ===== CORREÇÕES DE MOBILE (revisão visual a 375px) ===================== */

/* #4 · Blowout de grid: item de grid nasce com min-width:auto (= min-content),
   entao o card media 297px numa trilha de 271px e ligava rolagem horizontal.
   O padding de 48px tambem sobrava num card de 271px. */
.solutions-grid > *, .contact-grid > *, .footer-grid > * { min-width: 0; }
@media (max-width: 767.98px) {
  .solution-card { padding: var(--mf-space-5); }
}

/* #1 · A pilula do hero quebrava em 5 linhas (51 caracteres em caixa alta
   dentro de um componente de uma linha so). No mobile ela perde o chrome
   e vira sobrelinha editorial alinhada a esquerda. */
@media (max-width: 599.98px) {
  .hero-inner .pill--ghost-light {
    display: block; width: 100%;   /* alinhamento herdado do hero (centro) */
    background: none; border: 0; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    line-height: 1.7; letter-spacing: 0.10em;
    color: rgba(255,255,255,0.92);
    margin-bottom: var(--mf-space-4);
  }
}

/* #3 · O botao flutuante do WhatsApp pousava sobre o paragrafo do hero e
   sobre a linha do CNPJ. Encolhe no mobile e o rodape reserva a folga.
   Um FAB fixo sempre sobrepoe algo — isto reduz a intrusao, nao a elimina. */
@media (max-width: 599.98px) {
  .wa-fab { width: 48px; height: 48px; right: 12px; bottom: 12px; }
  .wa-fab svg { width: 24px; height: 24px; }
  .footer { padding-bottom: calc(var(--mf-space-5) + 60px); }
}

/* #2 · Topbar colapsada no mobile.
   Antes: telefones, redes e PT|EN quebravam em 3 fileiras (90px de altura)
   e, somados aos 77px do header, comiam 20% do viewport antes do conteudo.
   Agora: uma fileira so. O DDI some (o link tel: mantem o numero completo)
   e as redes migram para o rodape — nenhum conteudo se perde. */
.footer-social { display: flex; align-items: center; gap: var(--mf-space-4); margin: var(--mf-space-4) 0 var(--mf-space-5); }
.footer-social a { color: rgba(255,255,255,0.65); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; position: relative; transition: color var(--mf-motion-base); }
.footer-social a::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
.footer-social a:hover { color: var(--mf-blue-on-dark); }
.footer-social svg { width: 18px; height: 18px; }

@media (max-width: 599.98px) {
  .topbar-inner { flex-wrap: nowrap; gap: var(--mf-space-3); }
  .topbar-phones { flex-wrap: nowrap; gap: var(--mf-space-3); }
  .topbar-phones a { white-space: nowrap; }
  .topbar-phones .ddi { display: none; }
  /* So o RJ na barra: com os dois, cada link era espremido a 59px e o
     numero quebrava em 3 linhas. O SP continua no rodape, com endereco. */
  .topbar-phones a:last-child { display: none; }
  .topbar-social { display: none; }
}

/* FAB do WhatsApp recolhivel.
   Ele e fixo, entao sempre sobrepoe algo. Duas regras resolvem os dois
   casos reais: na zona do hero ele some (o CTA primario esta ali e o FAB
   cobria 24px dele) e, fora dela, recolhe ao rolar para baixo. */
.wa-fab { transition: opacity var(--mf-motion-base), transform var(--mf-motion-base); }
.js .wa-fab.is-recolhido {
  opacity: 0; transform: translateY(16px) scale(0.9);
  pointer-events: none; visibility: hidden;
}

/* ===== ESCALA TIPOGRAFICA NO MOBILE ==================================
   Todo titulo usa clamp(min, vw, max) e abaixo de ~600px e SEMPRE o
   minimo que vale — os minimos foram calibrados para desktop, entao a
   375px o H1 saia a 32px em 4 linhas (133px so de titulo) e os H2 a
   26-28px. Aqui a escala baixa um degrau; desktop nao muda. */
@media (max-width: 599.98px) {
  .hero-inner h1               { font-size: 1.625rem; }  /* 32 -> 26 */
  .page-hero h1                { font-size: 1.625rem; }  /* 32 -> 26 */
  .section-header h2           { font-size: 1.375rem; }  /* 28 -> 22 */
  .about-text h2               { font-size: 1.375rem; }  /* 26 -> 22 */
  .overview-text h2            { font-size: 1.375rem; }  /* 26 -> 22 */
  .cta-strip h2                { font-size: 1.375rem; }  /* 24 -> 22 */
  .stub-card h2                { font-size: 1.3125rem; } /* 24 -> 21 */
  .pullquote-fullscreen blockquote { font-size: 1.5rem; }/* 26 -> 24 */
  .split-text h3               { font-size: 1.25rem; }   /* 24 -> 20 */
  .case-text h3                { font-size: 1.25rem; }   /* 24 -> 20 */
  .cap-row--lead h3            { font-size: 1.25rem; }   /* 24 -> 20 */
  .holding-parent h3           { font-size: 1.125rem; }  /* 20 -> 18 */
  .figure-lead .v              { font-size: 3rem; }      /* 60 -> 48 */
  /* Leading um pouco mais folgado: titulo curto em linha apertada
     fica pesado quando o corpo de texto ao lado respira 1.6. */
  .hero-inner h1, .page-hero h1, .section-header h2,
  .about-text h2, .overview-text h2 { line-height: 1.2; }
}

/* Foto do bloco Missao/Visao/Valores em coluna unica.
   O corte e 899px (nao 599): e em 900px que o .about-grid vira duas
   colunas. Entre 600 e 899 a foto ainda ocupa a largura inteira, e em
   4/5 ficaria 700x875. Em 16/9 ela vira uma faixa, e como ja sangra
   para a esquerda, encostar no topo da secao e coerente. */
@media (max-width: 899.98px) {
  .about { padding-top: 0; }
  .about-photo .ph { aspect-ratio: 16 / 9; }
}

/* Ritmo vertical no mobile: 96px entre secoes e 12% de um viewport de
   812px so em branco. Baixa um degrau na escala (96->64, 64->48). Os
   blocos que ja estavam em 48px ficam, senao some a diferenca entre
   respiro grande e pequeno. Longhand de proposito: o atalho `padding`
   zeraria o padding horizontal herdado. */
@media (max-width: 599.98px) {
  .section, .capabilities, .cases, .pullquote-fullscreen {
    padding-top: var(--mf-space-8); padding-bottom: var(--mf-space-8);
  }
  .cta-strip { padding-top: var(--mf-space-7); padding-bottom: var(--mf-space-7); }
}

/* ===== DROPDOWN DE IDIOMA (topbar) ==================================
   Bandeiras em SVG inline, nao emoji: no Windows o emoji de bandeira
   renderiza como as letras "BR"/"US", nao como bandeira. */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: var(--mf-space-2);
  min-height: 32px; padding: var(--mf-space-1) var(--mf-space-2);
  background: none; border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--mf-radius-sm); cursor: pointer;
  color: rgba(255,255,255,0.85); font-family: var(--mf-font-mono);
  font-weight: 500; font-size: var(--mf-fs-caption); letter-spacing: 0.08em;
  transition: border-color var(--mf-motion-base), color var(--mf-motion-base);
}
.lang-btn:hover { color: #fff; border-color: rgba(255,255,255,0.42); }
/* alvo de toque de 44px sem inflar a barra */
.lang-btn::after { content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 100%; height: 44px; }
.lang-flag { width: 18px; height: 13px; border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.lang-caret { width: 12px; height: 12px; transition: transform var(--mf-motion-base); }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  min-width: 196px; margin: 0; padding: var(--mf-space-1);
  list-style: none; background: var(--mf-blue-deep);
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--mf-radius-md);
  box-shadow: 0 12px 32px rgba(0,7,54,0.55);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex; align-items: center; gap: var(--mf-space-3);
  min-height: 44px; padding: 0 var(--mf-space-3);
  border-radius: var(--mf-radius-sm); color: rgba(255,255,255,0.82);
  font-family: var(--mf-font-body); font-size: var(--mf-fs-body-sm);
  letter-spacing: 0; text-decoration: none;
}
.lang-menu a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.lang-menu a[aria-current="true"] { color: #fff; font-weight: 600; }

/* Os dois telefones voltam a aparecer no mobile, lado a lado. Cabem
   porque o DDI continua oculto e as redes seguem so no rodape. */
@media (max-width: 599.98px) {
  .topbar-phones a:last-child { display: inline-flex; }
  .topbar { font-size: 11px; }
  .topbar-inner { gap: var(--mf-space-2); }
  .topbar-phones { gap: var(--mf-space-2); }
  .lang-btn { padding: 2px var(--mf-space-1); gap: var(--mf-space-1); }
  .lang-sigla { display: none; }
}

/* Idioma indisponivel: deixa de ser <a> de proposito — nao e link morto,
   nao recebe foco, e o leitor de tela ouve o estado pelo aria-disabled. */
.lang-menu .lang-off {
  display: flex; align-items: center; gap: var(--mf-space-3);
  min-height: 44px; padding: 0 var(--mf-space-3);
  color: rgba(255,255,255,0.62); cursor: default;
  font-family: var(--mf-font-body); font-size: var(--mf-fs-body-sm);
}
.lang-menu .lang-off .lang-flag { opacity: 0.5; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.lang-menu .lang-off em {
  margin-left: auto; font-style: normal; font-family: var(--mf-font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ===== BOTOES NO MOBILE =============================================
   Todos ocupam a linha inteira. Isso tambem corrige o estouro medido
   em .stub-card .actions, onde rotulos longos ("Ver Engenharia e
   Servicos") pediam 278px num pai de 246px e vazavam do cartao. */
@media (max-width: 599.98px) {
  .btn { width: 100%; }
  .hero-actions, .actions, .cta-strip-actions {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
  }
  /* 32px de recuo lateral num cartao de 375px comia largura util */
  .stub-card { padding: var(--mf-space-7) var(--mf-space-5); }
}

/* ===== RODAPE EM DUAS LINHAS ========================================
   Linha 1: marca+redes | Rio de Janeiro | Sao Paulo — tres colunas
   iguais. Linha 2: as quatro colunas de links, tambem iguais. */
.footer-top {
  display: grid; grid-template-columns: 1fr; gap: var(--mf-space-6);
  padding-bottom: var(--mf-space-7); margin-bottom: var(--mf-space-7);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 900px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); gap: var(--mf-space-7); align-items: start; }
}
.footer-brand .footer-social { margin-bottom: 0; }
.footer-top .footer-addr strong { display: block; color: #fff; margin-bottom: var(--mf-space-1); }

/* Credito do rodape: o link fica com 13px de altura e o alvo de toque
   nao alcanca 44px. Amplia a area sem mudar o desenho da linha. */
.footer-bottom a { position: relative; color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); }
.footer-bottom a:hover { text-decoration-color: #fff; }
@media (hover: none) and (pointer: coarse) {
  .footer-bottom a::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% + 16px); height: 44px; }
}

/* Rotulo "Menu" no botao do hamburguer. O aria-label continua
   "Abrir menu de navegacao" — contem a palavra visivel, o que satisfaz
   a WCAG 2.5.3 (Label in Name) para comando por voz. */
.nav-toggle-txt {
  font-family: var(--mf-font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase; line-height: 1;
}

/* Entre 600 e 1099px o nav de desktop esta oculto, entao o
   space-between distribuia tres itens e jogava o CTA para o MEIO do
   header. O auto na margem esquerda gruda CTA e menu na direita. */
@media (min-width: 600px) and (max-width: 1239.98px) {
  .header-sticky .btn-cta { margin-left: auto; }
}



/* Split usado para dar imagem a seção que era só texto.
   O .split padrão dá 7fr à foto. Aqui é o contrário: o corpo (ledger, tagrow,
   prosa densa) fica na coluna larga e a foto entra como acento na estreita.
   Isso também protege a nitidez — duas dessas origens têm master de 960px e
   ficariam moles numa caixa de 644px em tela retina. */
@media (min-width: 900px) {
  .split--sec.reverse { grid-template-columns: 7fr 5fr; }
}
.split--sec .split-text > *:first-child { margin-top: 0; }
.split--sec .ledger, .split--sec .tagrow { margin-top: var(--mf-space-5); }

/* ===== RITMO POR HIERARQUIA (impeccable layout) =====
   A home usava space-9 em seis seções seguidas. Padding igual em tudo apaga a
   hierarquia: nada indica o que é âncora e o que é apoio. Dois níveis, e a
   escala do título acompanha o nível. */
.section--support { padding: var(--mf-space-8) 0; }
.section--anchor  { padding: clamp(var(--mf-space-9), 8vw, var(--mf-space-10)) 0; }  /* fluido: 128px sobra em tela de 375px */
.section--support .section-header { margin-bottom: var(--mf-space-6); }
.section--support .section-header h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.section--anchor  .section-header h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }

/* Abertura assimétrica: eyebrow e título à esquerda, texto de entrada à
   direita, alinhados pela base. É o grid 5fr/7fr que o DESIGN.md define como
   composição padrão, e quebra a pilha centrada repetida. */

/* ===== SETA DO BOTÃO: mais presente (impeccable layout) =====
   Antes: disco de 22px (18px no header) com 18% de branco e glifo de 12px.
   Duas falhas somadas — o disco ocupava 41 a 45% da altura do botão, e 18% de
   branco sobre vermelho não chega a ler como forma. O conjunto virava detalhe,
   não afordância.

   Agora o disco fica em torno de 58% da altura, e o contraste sobe. A ação
   primária (btn-cta e btn-on-blue) ganha disco sólido com a seta em vermelho:
   é o elemento mais evidente da página, que é o papel dela. As secundárias
   ficam com disco translúcido reforçado, preservando a hierarquia. */
.btn .arrow {
  width: 28px; height: 28px;
  font-size: 15px; font-weight: 500; line-height: 1;
  background: rgba(255,255,255,0.26);
}
.btn-ghost-light .arrow { background: var(--mf-ink-100); color: var(--mf-blue-deep); }

/* Ação primária: disco sólido, seta na cor da marca. */
.btn-cta .arrow, .btn-on-blue .arrow { background: #fff; color: var(--mf-red); }

.btn-sm .arrow { width: 24px; height: 24px; font-size: 13px; }

@media (min-width: 1240px) {
  .header-sticky .btn-cta.btn-sm .arrow { width: 22px; height: 22px; font-size: 12px; }
}

/* ===== SETA DO BOTÃO: ícone, não glifo =====
   Era o caractere → renderizado em Montserrat: traço fino e ponta miúda, sem
   controle de peso. Como SVG o traço é 2px com ponta arredondada, e escala sem
   perder definição. currentColor faz o ícone herdar a cor da variante, então a
   regra de contraste de cada botão continua valendo. */
.btn .arrow svg { width: 62%; height: 62%; display: block; }
.btn .arrow { font-size: 0; }

/* O pill terminava 24px depois do ícone. Agora fecha junto dele. */
.btn:has(.arrow) { padding-right: var(--mf-space-2); }
.btn-sm:has(.arrow) { padding-right: 6px; }

@media (max-width: 599.98px) {
  /* Os grupos de botão ficavam onde o grid os deixasse. O do CTA tinha
     justify-self: end, o que jogava o bloco para a direita numa tela de 375px. */
  .hero-actions, .actions, .cta-strip-actions {
    align-items: center; justify-self: center; width: 100%;
  }
  .cta-strip-inner { justify-items: center; text-align: center; }
  .cta-strip p { margin-left: auto; margin-right: auto; }
  /* Largura por conteúdo, para o preenchimento acabar no ícone e não esticar. */
  .btn { width: auto; }
}

/* ===== LINHA DO TEMPO =====
   Seis marcos visíveis: grade no desktop e eixo vertical no celular.
   A história acompanha a rolagem normal do documento, sem prender a página. */
.timeline-section { background: var(--mf-ink-50); position: relative; }
.timeline-head { margin-bottom: var(--mf-space-7); }
.timeline-head h2 { font-family: var(--mf-font-display); font-weight: 600; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0; color: var(--mf-blue-deep); }

.timeline-runway { padding: var(--mf-space-9) 0; }
.timeline-stage { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.timeline-stage:focus-visible, .timeline-track:focus-visible { outline: none; box-shadow: var(--mf-shadow-focus); }

.timeline-track {
  display: flex; align-items: flex-start; list-style: none; margin: 0;
  gap: clamp(2.5rem, 6vw, 7rem);
  padding: var(--mf-space-7) var(--mf-container-pad-mobile) var(--mf-space-6);
  position: relative;
}
@media (min-width: 768px) { .timeline-track { padding-left: var(--mf-container-pad-desktop); padding-right: var(--mf-container-pad-desktop); } }

/* O eixo: uma régua contínua atravessando todos os marcos. */
.timeline-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--mf-space-7);
  height: 1px; background: var(--mf-ink-300);
}

.timeline-mark {
  flex: 0 0 auto; width: clamp(15rem, 24vw, 20rem);
  position: relative; padding-top: var(--mf-space-6);
  scroll-snap-align: center;
}
/* O ponto onde o marco toca o eixo. */
.timeline-mark::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mf-blue-cobalt);
}
.timeline-mark .ano {
  display: block; font-family: var(--mf-font-display); font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.88;
  letter-spacing: -0.045em; color: var(--mf-blue-deep);
  margin-bottom: var(--mf-space-4);
}
.timeline-mark p {
  margin: 0; font-size: var(--mf-fs-body-md); line-height: 1.6;
  color: var(--mf-ink-700);
}

/* ===== LINHA DO TEMPO: vertical no mobile =====
   Abaixo de 900px a faixa horizontal obrigava rolagem lateral dentro de uma
   pagina que ja rola na vertical, e cortava o marco seguinte na borda. Em tela
   estreita a leitura natural e de cima para baixo: o eixo vira uma regua
   vertical a esquerda e os marcos descem por ela. */
@media (max-width: 899.98px) {
  .timeline-stage { overflow: visible; scroll-snap-type: none; }
  .timeline-track {
    flex-direction: column;
    gap: var(--mf-space-7);
    padding-left: calc(var(--mf-container-pad-mobile) + 2rem);
    padding-right: var(--mf-container-pad-mobile);
    padding-top: var(--mf-space-4);
  }
  /* eixo passa de horizontal para vertical */
  .timeline-track::before {
    top: 0; bottom: 0; left: var(--mf-container-pad-mobile);
    right: auto; width: 1px; height: auto;
  }
  .timeline-mark {
    width: auto; max-width: 34ch;
    padding-top: 0;
    scroll-snap-align: none;
  }
  /* o ponto encosta no eixo, alinhado ao topo do ano */
  .timeline-mark::before {
    left: -2rem; top: 0.45em;
    transform: translateX(-3px);
  }
  .timeline-mark .ano { font-size: clamp(2.75rem, 13vw, 4rem); }
}

/* Ícone de setor na faixa de mercados. Pictograma de traço ao lado do rótulo,
   não acima e sem cápsula — o DESIGN.md proíbe o ícone grande arredondado
   sobre título e o grid de cards com ícone. */
.index-strip a { display: flex; align-items: center; gap: var(--mf-space-3); }
.index-strip svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--mf-blue-cobalt); transition: color var(--mf-motion-base); }
.index-strip a:hover svg { color: var(--mf-red); }
@media (max-width: 599.98px) { .index-strip svg { width: 22px; height: 22px; } }

/* ===== AJUSTES DE SECAO E LINHA DO TEMPO ===== */

/* O eixo da linha do tempo parava na borda da tela. A pista estava limitada a
   largura da viewport (1425px) enquanto o conteudo tem 2806px, entao o
   ::before cobria so metade. Com width: max-content a caixa acompanha o
   conteudo e a regua atravessa todos os marcos. */
@media (min-width: 900px) {
  .timeline-track { width: max-content; }
}

/* A foto do split de secao ficava centralizada contra uma coluna de texto bem
   mais alta, abrindo ate 183px de vazio acima dela. Agora acompanha a altura
   do texto. */
@media (min-width: 900px) {
  .split--sec { align-items: stretch; }
  .split--sec .split-img,
  .split--sec .split-img figure { display: flex; flex-direction: column; height: 100%; }
  .split--sec .split-img .ph { aspect-ratio: auto; flex: 1 1 auto; min-height: 18rem; }
}

/* Em tablet e mobile a foto sangra ate a lateral da tela. */
.split--sec .split-img { --sangra: var(--mf-container-pad-mobile); }
@media (min-width: 768px) { .split--sec .split-img { --sangra: var(--mf-container-pad-desktop); } }
@media (max-width: 899.98px) {
  .split--sec .split-img {
    margin-left: calc(-1 * var(--sangra));
    margin-right: calc(-1 * var(--sangra));
  }
  .split--sec .split-img .ph { border-radius: 0; }
  .split--sec .split-img figcaption { padding: 0 var(--sangra); }
}

/* Eram 116px entre o titulo da secao e o primeiro paragrafo: 48px de margem do
   cabecalho mais 48px de padding do split. Fecha o intervalo. */
.section-header:has(+ .split--sec) { margin-bottom: var(--mf-space-5); }
.section-header + .split--sec { padding-top: 0; }

/* Contraste em secao escura: ao mover o paragrafo do .section-header para
   dentro do .split-text, ele perdeu a regra .section-dark .section-header p e
   passou a herdar a cor de tinta escura — 1.85:1 sobre o fundo, reprovando o
   piso AA de 4.5:1. Regressao introduzida junto com os splits de secao. */
.section-dark .split-text p,
.section-dark .split-text p.with-drop,
.section-dark .split-text li { color: rgba(255,255,255,0.78); }
.section-dark .split-text h3 { color: #fff; }

/* Certificacoes em duas colunas, com o nome maior. Eram sete caixas de
   largura cheia numa coluna so, a 12px. */
@media (min-width: 560px) {
  .split--sec .tagrow { grid-template-columns: repeat(2, 1fr); }
}
.split--sec .tagrow li { font-size: var(--mf-fs-body-sm); letter-spacing: 0.06em; }

/* A fileira de certificacoes, ao entrar no .split-text, herdou tambem o
   .split-text li::before — o ponto vermelho de lista — dentro de caixas que ja
   tem borda propria. Nao faz sentido ali. */
.split--sec .tagrow li::before { content: none; }
.split--sec .tagrow { padding-top: 0; padding-bottom: 0; border: 0; }

/* Contato: dois endereços, cada um com a foto do lugar. O card de atendimento
   comercial saiu; o canal continua no botão flutuante e na faixa de CTA. */
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.contact-card .ph { border-radius: 0; }
.contact-card-body { padding: var(--mf-space-6); }

/* ===== FAIXA DE ENTREGAS DA FABRICA =====
   Cinco colunas. O icone e Lucide (path exato da biblioteca), no mesmo
   tratamento aprovado nos cards da home: traco simples, 36px, cobalto, sem
   caixa. Substituiu um conjunto isometrico de tres tons dentro de caixa com
   borda e sombra — desenho proprio, recusado pelo cliente. Saiu com ele todo
   o aparato de animacao de traco (stroke-dashoffset com oito atrasos) e os
   keyframes cap-desenha/cap-preenche, que nao eram usados em mais nada. */
.capability-band { display: grid; grid-template-columns: 1fr; gap: var(--mf-space-7); }
@media (min-width: 640px) { .capability-band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .capability-band { grid-template-columns: repeat(5, 1fr); gap: var(--mf-space-6); } }
/* Cada entrega vira card, no mesmo tratamento dos cards da home: fundo
   --mf-blue-sky (token do design system para "tints, backgrounds suaves"),
   sem borda, conteudo centralizado. O icone centraliza junto — antes ficava
   colado a esquerda enquanto o rotulo corria embaixo. */
.capability {
  display: flex; flex-direction: column; align-items: center; gap: var(--mf-space-4);
  background: var(--mf-blue-sky); border-radius: var(--mf-radius-lg);
  padding: var(--mf-space-6) var(--mf-space-4); text-align: center;
}
.capability-ico { display: block; width: 36px; height: 36px; color: var(--mf-blue-cobalt); }
.capability h3 {
  font-family: var(--mf-font-display); font-weight: 600;
  font-size: var(--mf-fs-body-md); line-height: 1.25;
  color: var(--mf-blue-deep); margin: 0;
}

/* Abaixo de 900px o .split empilha na ordem do DOM e a foto vem antes — a
   regra de order do .reverse so vale a partir de 900px. Onde o corpo e o
   conteudo e a foto e acento, inverte o empilhamento sem tocar no desktop. */
@media (max-width: 899.98px) {
  .split--texto-primeiro .split-text { order: 1; }
  .split--texto-primeiro .split-img { order: 2; }
}

/* ===== A NOVA MARCA · item 1 da diretoria =====
   Faixa clara logo abaixo do hero. Clara de proposito: hero escuro e faixa de
   indicadores azul-profundo em seguida — tres blocos escuros seguidos apagariam
   o que se quer destacar. */
.marca-band { padding: var(--mf-space-8) 0; background: #fff; border-bottom: 1px solid var(--mf-ink-200); }
.marca-inner { display: grid; grid-template-columns: 1fr; gap: var(--mf-space-7); align-items: start; }
@media (min-width: 900px) { .marca-inner { grid-template-columns: 5fr 7fr; gap: var(--mf-space-8); } }
.marca-lockup { display: flex; flex-direction: column; gap: var(--mf-space-5); min-width: 0; }
.marca-texto { min-width: 0; }
.marca-texto h2 {
  font-family: var(--mf-font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-4);
}
.marca-texto > p {
  font-size: var(--mf-fs-body-lg); line-height: 1.6; color: var(--mf-ink-700);
  margin: 0 0 var(--mf-space-6); max-width: 58ch;
}
.marca-frentes { margin: 0 0 var(--mf-space-6); padding: 0; list-style: none; }
.marca-frentes li {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: var(--mf-space-4) 0; border-top: 1px solid var(--mf-ink-200);
}
@media (min-width: 640px) {
  .marca-frentes li { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--mf-space-5); }
}
.marca-frentes li:last-child { border-bottom: 1px solid var(--mf-ink-200); }
.marca-frentes strong {
  font-family: var(--mf-font-display); font-weight: 600;
  font-size: var(--mf-fs-body-md); line-height: 1.3; color: var(--mf-blue-deep);
}
.marca-frentes span {
  font-family: var(--mf-font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mf-ink-600); white-space: nowrap;
}
.marca-band a.link {
  font-weight: 600; color: var(--mf-blue-cobalt); font-size: var(--mf-fs-body-md);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap var(--mf-motion-base);
}
.marca-band a.link:hover { gap: 14px; }

/* Legenda sob o hero de pagina. Existe por um motivo concreto: a foto do hero
   da Notifier e a bancada de deteccao e gas da propria Mat Incendio, mas os
   paineis nela sao AutroSafe/IFG. Sem dizer isso, o leitor de uma pagina
   chamada Notifier atribuiria os paineis a Notifier. */
.page-hero-cap {
  margin: var(--mf-space-5) 0 0; max-width: 60ch;
  font-family: var(--mf-font-mono); font-size: var(--mf-fs-caption);
  line-height: 1.5; letter-spacing: 0.02em; color: rgba(255,255,255,0.72);
}

/* A linha do cabecalho ficou apertada com oito itens: logo, menu e botao. O
   item perde 4px de padding lateral e 1px de corpo. Medido em 1240px: a linha
   fecha com 48px de folga em vez de vazar 34px. Vale em todo o desktop — sem
   isso, acima de 1440 a folga cai para 21px, que some com qualquer variacao de
   renderizacao da fonte. */
@media (min-width: 1240px) {
  .header-sticky-nav a { padding: var(--mf-space-2) var(--mf-space-3); font-size: 12px; }
}

/* ===== FAIXA DA MARCA · foto da fabrica ao lado do lockup =====
   .ph--16-9, nao --4-3: o tanque criogenico fica na borda esquerda da foto
   e um recorte mais estreito o cortaria fora. Sem CSS de largura — a coluna
   flex (.marca-lockup, column, sem align-items nao-stretch) ja estica o
   figure para a largura toda, igual ao logo faz por conta propria com o
   proprio clamp(). */
.marca-lockup .ph { margin-top: var(--mf-space-1); border-radius: var(--mf-radius-md); }

/* ===== CAPACIDADES · lead centralizado, os tres restantes viram cards =====
   O lead usava a mesma grade 5fr/7fr dos itens comuns e lia como duas
   colunas de corpo — nao como titulo. display:block sobrepoe o grid
   independente de viewport (nao precisa de media query espelhada). */
.cap-row--lead {
  display: block;
  text-align: center;
  max-width: 46rem;
  margin: 0 auto var(--mf-space-8);
}
.cap-row--lead p { margin-top: var(--mf-space-3); }

.capabilities-grid { display: grid; grid-template-columns: 1fr; gap: var(--mf-space-5); }
@media (min-width: 640px) { .capabilities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .capabilities-grid { grid-template-columns: repeat(3, 1fr); } }
/* Mesma casca visual do .solution-card (raio, borda, padding) sem hover de
   elevacao nem link — os tres itens sao afirmacao, nao CTA, entao a elevacao
   ao passar o mouse sugeriria clique onde nao ha. */
.cap-card { background: #fff; border: 1px solid var(--mf-ink-200); border-radius: var(--mf-radius-lg); padding: var(--mf-space-7); }
.cap-card h3 { font-family: var(--mf-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-3); }
.cap-card p { font-size: var(--mf-fs-body-md); line-height: 1.6; color: var(--mf-ink-700); margin: 0; }
@media (max-width: 599.98px) { .cap-card { padding: var(--mf-space-5); } }

/* ===== TIMELINE · cabecalho centralizado =====
   .timeline-head so existe nesta secao — seguro mexer sem escopo extra. */
.timeline-head { text-align: center; }

/* ===== CABECALHO DE SECAO CENTRALIZADO =====
   Modificador, nao regra por secao: .section-header e generico (dezenas de
   usos no site), entao a variante centralizada se declara no HTML e nao fica
   escondida num seletor descendente. Substituiu a regra antiga presa a .cases
   quando o mesmo pedido apareceu pela terceira vez. */
.section-header--centro { text-align: center; margin-left: auto; margin-right: auto; }
.section-header--centro p { margin-left: auto; margin-right: auto; }

/* A imagem da marca entra inteira, na proporcao do proprio arquivo — sem
   recorte nem no build (ver SEM_RECORTE em image_manifest.py) nem no
   navegador. Esticar a caixa ate a altura do texto, como se fazia aqui antes,
   punha um derivativo 16:9 numa caixa quase quadrada e o object-fit:cover
   comia as laterais do logotipo.
   Sem aspect-ratio fixo e sem numero magico: a .ph-img sai de position
   absolute e volta ao fluxo, entao a altura da caixa passa a ser a da propria
   imagem. Se o arquivo trocar de proporcao de novo, isso acompanha sozinho. */
.marca-lockup .ph { aspect-ratio: auto; }
.marca-lockup .ph-img { position: static; width: 100%; height: auto; object-fit: fill; }

/* Cor e icone nos cards de capacidade. --mf-blue-sky ja existia no design
   system ("tints, backgrounds suaves") sem nenhum uso no CSS ate aqui. */
.cap-card { background: var(--mf-blue-sky); border: 0; }
.cap-card-icon { display: block; width: 36px; height: 36px; margin-bottom: var(--mf-space-4); color: var(--mf-blue-cobalt); }

/* Evita palavra orfa em titulo de mais de uma linha. Bem suportado (Chrome
   114+, Safari 17.4+, Firefox 121+) — este site ja depende de :has(), mesma
   faixa de suporte. Sem efeito em titulo de uma linha so. */
h1, h2, h3, h4 { text-wrap: balance; }

/* Link dentro do ledger. Enquanto a secao de certificados tinha fundo preto o
   link herdava a cor do paragrafo e ninguem notou; em fundo claro ficou
   identico ao texto ao redor — mesma cor, mesmo peso, sem sublinhado. Como
   esta no meio de uma frase ("ABNT NBR 15808:2026 · abrir certificado"), cor
   sozinha nao basta para sinalizar que e link: vai sublinhado. */
.ledger-row a {
  color: var(--mf-blue-cobalt); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.ledger-row a:hover { color: var(--mf-blue-on-light); }

/* Sub-bloco dentro de uma secao que ja tem cabecalho proprio. Existe porque o
   bloco do INSPIRE N16e, na pagina Notifier, usava .section-header — havia
   dois cabecalhos de secao na mesma secao, e a padronizacao de centro
   deixaria os dois com o mesmo peso. Aqui e subordinado: menor, alinhado a
   esquerda como o conteudo que ele encabeca. */
.sub-bloco { margin-top: var(--mf-space-8); margin-bottom: var(--mf-space-5); }
.sub-bloco h3 {
  font-family: var(--mf-font-display); font-weight: 600;
  font-size: var(--mf-fs-body-lg); line-height: 1.25;
  color: var(--mf-blue-deep); margin: 0 0 var(--mf-space-2);
}
.sub-bloco p { font-size: var(--mf-fs-body-md); line-height: 1.6; color: var(--mf-ink-700); margin: 0; max-width: 62ch; }

/* ===== CERTIFICADOS EM CARDS =====
   Eram oito .ledger-row empilhadas numa coluna de 7fr ao lado da foto: uma
   lista alta e estreita, com o titulo e o numero do certificado quebrando em
   duas linhas. Em quatro colunas cada certificado cabe numa linha so e os oito
   fecham em duas fileiras, ocupando a largura da secao — que e o motivo de a
   foto ter saido daqui.

   Casca igual a do .solution-card (fundo branco, hairline, mesmo raio e
   padding): estes ficam sobre .section-light-2, entao o branco separa o card do
   fundo, e o link em cobalto continua legivel, o que nao aconteceria no
   --mf-blue-sky dos cards de capacidade. */
.cert-grid { display: grid; grid-template-columns: 1fr; gap: var(--mf-space-4); }
@media (min-width: 600px)  { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cert-grid { grid-template-columns: repeat(4, 1fr); } }

.cert-card {
  background: #fff; border: 1px solid var(--mf-ink-200);
  border-radius: var(--mf-radius-lg); padding: var(--mf-space-6);
  display: flex; flex-direction: column; gap: var(--mf-space-2);
}
.cert-card h3 {
  font-family: var(--mf-font-display); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--mf-blue-deep); margin: 0;
}
.cert-card p { font-size: var(--mf-fs-body-sm); line-height: 1.5; color: var(--mf-ink-600); margin: 0; }
/* O link vai para o rodape do card com margin-top:auto, para que os oito
   "abrir certificado (PDF)" fiquem na mesma altura apesar de os titulos terem
   uma ou duas linhas. */
.cert-card a {
  margin-top: auto; padding-top: var(--mf-space-2);
  color: var(--mf-blue-cobalt); font-weight: 600;
  font-size: var(--mf-fs-body-sm); text-decoration: underline;
}
.cert-card a:hover { color: var(--mf-blue-on-light); }
@media (max-width: 599.98px) { .cert-card { padding: var(--mf-space-5); } }

/* ===== SPLIT COM TEXTO CURTO =====
   .split--sec estica as duas colunas (align-items: stretch, mais acima) para
   que a foto acompanhe uma coluna de texto alta. Com texto curto o efeito se
   inverte: a foto tem min-height de 18rem, o texto fica com ~150px no topo da
   celula esticada e sobra um vazio embaixo dele.

   Aqui o texto se centraliza dentro da propria celula, sem desfazer o stretch
   — a foto continua com a altura cheia. Modificador, nao regra geral: onde o
   texto ja preenche a altura isso nao mudaria nada, mas nao ha motivo para
   mexer nesses. */
@media (min-width: 900px) {
  .split--v-centro .split-text { display: flex; flex-direction: column; justify-content: center; }
  .split--v-centro .split-text > *:last-child { margin-bottom: 0; }
}

/* Fileira de chips sob um cabecalho centralizado. Sem isto os chips ficavam
   encostados a esquerda debaixo de um titulo ao centro — o desalinhamento
   aparecia mais que a propria centralizacao. Modificador porque .tagrow tambem
   vive dentro de .split-text, onde acompanha o texto a esquerda. */
.tagrow--centro { justify-content: center; }


/* Client review: meaningful contact states and report form. */
.missing-info { display: inline-block; font-size: .85rem; line-height: 1.5; color: var(--mf-ink-600); }
.footer .missing-info, .cta-strip .missing-info { color: var(--mf-ink-200, #c2c8d3); }
body > .missing-info { display: block; width: 100%; padding: 12px 24px; background: var(--mf-blue-deep); color: #f4f6fa; text-align: center; border-top: 1px solid rgba(255,255,255,.15); }
.production-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 900px; margin: 0 auto; text-align: center; }
.production-numbers strong { display: block; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; color: var(--mf-blue-deep); margin-bottom: 16px; }
.production-numbers p { max-width: 36ch; margin: 0 auto; }
.technical-note { font-size: .9rem; line-height: 1.7; color: var(--mf-ink-600); }
.notifier-hero .ph-img { object-fit: contain; object-position: right center; }
.notifier-hero .page-hero-overlay { background: linear-gradient(90deg, rgba(0,7,54,.95) 0%, rgba(0,7,54,.8) 38%, rgba(0,7,54,.1) 100%); }
.report-section { padding-top: clamp(48px, 7vw, 100px); }
.report-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.report-layout h1 { font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1.08; color: var(--mf-blue-deep); margin: 16px 0 24px; }
.report-layout p { margin-bottom: 20px; }
.report-form { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--mf-ink-200, #dce0e6); background: var(--mf-ink-50); border-radius: 8px; min-width: 0; }
.form-field { margin-bottom: 24px; }
.form-field label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--mf-blue-deep); }
.form-field label span { font-weight: 400; color: var(--mf-ink-600); }
.form-field input, .form-field textarea { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; color: var(--mf-ink-1000); background: #fff; border: 1px solid #8a93a3; border-radius: 4px; }
.form-field textarea { resize: vertical; min-height: 160px; }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: 3px solid var(--mf-blue-cobalt); outline-offset: 3px; }
.field-help { font-size: .8rem; color: var(--mf-ink-600); margin: 8px 0 0 !important; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-error { color: #9d1c21; }
.report-form button:disabled { opacity: .6; cursor: not-allowed; }
.report-page .header-sticky { background: var(--mf-blue-deep); }
.report-page .report-section { padding-top: 160px; }
.page-hero .page-hero-inner .page-hero-cap { font-size: var(--mf-fs-caption); line-height: 1.5; font-weight: 400; }
#inspire .ph-img, #vesda .ph-img { object-fit: contain; background: var(--mf-ink-50); }
@media(max-width: 767px) { .report-layout, .production-numbers { grid-template-columns: 1fr; } .production-numbers { gap: 32px; } }

/* Notifier: product proportions and a consistent technical reading grid.
   Scoped to this page so photography-led pages keep their existing rhythm. */
.notifier-page main > section[id] { scroll-margin-top: 112px; }
.notifier-page .section--support { padding-block: clamp(40px, 5vw, 64px); }
.notifier-page .section-header { max-width: none; margin: 0 0 24px; }
.notifier-page .section-header h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.18; }
.notifier-page .section-header p { font-size: 1rem; line-height: 1.65; max-width: 65ch; }
.notifier-page .eyebrow { color: var(--mf-blue-cobalt); }

.notifier-page .notifier-hero { min-height: 0; display: block; background: var(--mf-blue-deep); }
.notifier-hero-grid { display: grid; gap: 32px; align-items: center; padding-top: 152px; padding-bottom: 40px; }
.notifier-hero-copy { min-width: 0; }
.notifier-page .notifier-hero h1 { font-size: clamp(1.875rem, 3.7vw, 3.25rem); line-height: 1.1; max-width: 24ch; margin-bottom: 20px; }
.notifier-page .notifier-hero p { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; max-width: 54ch; }
.notifier-hero-media { min-width: 0; }
.notifier-page .notifier-hero-media .ph { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1726 / 729; border-radius: 0; background: transparent; }
.notifier-page .notifier-hero-media .ph-img { object-fit: contain; object-position: center; }
.notifier-page .notifier-hero-media .editorial-cap { color: var(--mf-blue-sky); letter-spacing: .03em; text-transform: none; }

.product-layout { display: grid; gap: 28px; align-items: center; }
.product-copy, .product-media { min-width: 0; }
.product-copy > p { font-size: 1rem; line-height: 1.65; max-width: 65ch; margin: 0 0 16px; }
.product-copy > .technical-note { font-size: .875rem; margin-top: 16px; }
.product-media { width: 100%; margin: 0; }
.product-media .ph { width: 100%; margin-inline: auto; aspect-ratio: 1334 / 925; border-radius: 0; background: transparent; }
.notifier-page .product-media .ph-img { object-fit: contain; }
.notifier-page #inspire .product-media .ph { aspect-ratio: 488 / 565; max-width: 280px; }
.product-media .editorial-cap { max-width: 44ch; margin: 12px auto 0; text-align: center; font-size: .625rem; letter-spacing: .05em; }
.model-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--mf-ink-200); border-bottom: 1px solid var(--mf-ink-200); margin-bottom: 8px; }
.notifier-page .model-pair .ledger-row { border: 0; padding-block: 16px; }
.notifier-page .model-pair .ledger-row h3 { font-size: 1.125rem; }
.notifier-page .model-pair p { max-width: 26ch; font-variant-numeric: tabular-nums; }
.notifier-page .product-details .ledger-row:first-child { border-top: 0; }
.notifier-page .ledger-row { padding-block: 16px; }
.notifier-page .ledger-row h3 { font-size: 1rem; line-height: 1.4; }
.notifier-page .ledger-row p { font-size: .9375rem; line-height: 1.6; margin-top: 6px; }

.technical-layout { display: grid; gap: 24px; align-items: start; }
.technical-layout > .section-header { margin: 0; }
.technical-layout .ledger-row:first-child { border-top-color: var(--mf-ink-300); }
.technical-document { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; line-height: 1.5; color: var(--mf-blue-cobalt); font-weight: 600; padding-block: 8px; }
.technical-document-block { border-top: 1px solid var(--mf-ink-200); padding-top: 20px; }
.technical-document-block p { max-width: 58ch; margin: 0 0 12px; font-size: 1rem; line-height: 1.65; }

@media (min-width: 700px) {
  .product-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
  .notifier-page #inspire .product-media .ph { max-width: 360px; }
  .notifier-page .product-media { align-self: center; }
  .technical-ledger .ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); column-gap: 24px; align-items: start; }
  .technical-ledger .ledger-row p { margin-top: 0; }
}
@media (min-width: 1000px) {
  .notifier-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; padding-top: 168px; padding-bottom: 56px; }
  .technical-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 88px); }
  .technical-layout .section-header h2 { max-width: 23ch; }
  .technical-layout--compact { align-items: center; }
  .technical-layout--compact .technical-document-block { padding: 4px 0 4px 32px; border-top: 0; border-left: 1px solid var(--mf-ink-300); }
}
@media (max-width: 699px) {
  .notifier-hero-grid { gap: 24px; padding-top: 132px; padding-bottom: 32px; }
  .notifier-page .section-header h2 { font-size: 1.5rem; }
  .product-layout { gap: 24px; }
  .product-media { max-width: 440px; margin-inline: auto; }
  .notifier-page #inspire .product-media .ph { max-width: 240px; }
}

/* Shared mobile rhythm: retain touch targets without a single-column footer. */
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer ul { gap: 4px; }
  .footer ul a { display: flex; align-items: center; min-height: 44px; font-size: .875rem; line-height: 1.5; }
  .footer .missing-info { display: flex; align-items: center; min-height: 44px; font-size: .875rem; line-height: 1.5; }
  .footer-bottom { margin-top: 32px; }
  .footer { padding-bottom: 24px; }
}
@media (min-width: 360px) and (max-width: 899px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 32px; margin-bottom: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-addr { font-size: .8125rem; }
}

/* Contact channels form one compact service band, using the same grid. */
.contact-channel { padding-block: 40px; }
.contact-channel-grid { display: grid; gap: 24px; align-items: center; }
.contact-channel-copy h2 { margin: 12px 0; color: var(--mf-blue-deep); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.contact-channel-copy p { max-width: 65ch; margin: 0; font-size: 1rem; line-height: 1.65; }
.contact-channel-copy p a, .contact-compliance p a { color: var(--mf-blue-cobalt); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact-channel .actions { margin: 0; gap: 12px; }
.contact-compliance > p { margin: 0; max-width: 60ch; line-height: 1.65; }
.contact-compliance-section { padding-block: 48px; }
.contact-compliance .section-header h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; }
@media (min-width: 1000px) {
  .contact-channel-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
  .contact-channel .actions { justify-content: flex-end; }
  .contact-compliance { align-items: center; }
  .contact-compliance .section-header { margin: 0; }
}

/* Editorial pages: proportion follows the amount of content, not a fixed
   portrait crop. Native 16:9 photos retain the approved framing. */
.editorial-sequence { padding-block: clamp(40px, 5vw, 64px); }
.editorial-sequence .split { gap: 24px; padding-block: 32px; align-items: center; }
.editorial-sequence .split-img { min-width: 0; }
.editorial-sequence .split-img .ph { aspect-ratio: 16 / 9; }
.editorial-sequence .split-text .num { margin-bottom: 12px; }
.editorial-sequence .split-text h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; margin-bottom: 16px; }
.editorial-sequence .split-text p.with-drop { font-size: 1rem; line-height: 1.65; margin-bottom: 16px; max-width: 65ch; }
.editorial-sequence .split-text ul { padding-block: 16px; margin-bottom: 16px; gap: 8px; }
.editorial-sequence .split-text li { font-size: .9375rem; line-height: 1.6; }
.editorial-sequence .split-text { order: 1; }
.editorial-sequence .split-img { order: 2; }
.editorial-sequence--factory .capability-band { margin-bottom: 16px; }
.editorial-sequence--markets .section-header { margin-bottom: 16px; }

.content-section { padding-block: clamp(40px, 5vw, 64px); }
.content-pair { display: grid; gap: 28px; align-items: center; }
.content-copy, .content-photo { min-width: 0; }
.content-copy .section-header { max-width: none; margin: 0 0 20px; }
.content-copy .section-header h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }
.content-copy p, .content-copy .section-header p { font-size: 1rem; line-height: 1.7; max-width: 65ch; margin: 0 0 20px; color: var(--mf-ink-700); }
.content-copy p:last-child { margin-bottom: 0; }
.content-copy .ledger-row { padding-block: 14px; }
.content-copy .ledger-row p { font-size: .875rem; line-height: 1.6; margin: 6px 0 0; }
.content-copy .tagrow { margin-top: 20px; }
.content-photo .ph { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.content-copy .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.content-photo .editorial-cap { margin-top: 10px; }

.portfolio-pending { padding-block: 40px; }
.portfolio-pending-grid { display: grid; gap: 24px; align-items: center; }
.portfolio-pending-copy h2 { margin: 12px 0; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; color: var(--mf-blue-deep); }
.portfolio-pending-copy p { margin: 0; max-width: 65ch; font-size: 1rem; line-height: 1.65; }
.portfolio-pending .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.institutional-pending { align-self: center; }
.topbar-social .social-pending, .footer-social .social-pending { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; opacity: .55; }
.social-pending svg { display: block; width: 18px; height: 18px; }
.ext-section--reviewed { padding-block: clamp(40px, 5vw, 72px); }
.ext-section--reviewed .section-header h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
.ext-section--reviewed .split { padding-bottom: 0; }
.cert-card a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; }
.about--reviewed .about-tab { min-height: 44px; }

@media (min-width: 900px) {
  .editorial-sequence .split, .editorial-sequence .split.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); }
  .editorial-sequence .split:not(.reverse) .split-img { order: 1; }
  .editorial-sequence .split:not(.reverse) .split-text { order: 2; }
  .content-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); }
  .portfolio-pending-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
  .portfolio-pending .actions { justify-content: flex-end; }
}
@media (max-width: 899px) {
  .content-photo { width: 100%; max-width: 680px; margin-inline: auto; }
  .content-photo .ph { aspect-ratio: 16 / 9; }
  .about--reviewed .about-text { order: 1; }
  .about--reviewed .about-photo { order: 2; }
  .about--reviewed .about-photo .ph { margin-left: 0; border-radius: var(--mf-radius-lg); }
  .marca-band--reviewed .marca-lockup { max-width: 300px; margin-inline: auto; width: 100%; }
  .marca-band--reviewed .marca-texto > p { font-size: 1rem; line-height: 1.65; }
  .editorial-sequence--factory .capability-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .editorial-sequence--factory .capability-band > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .editorial-sequence--factory .capability { padding: 20px 12px; gap: 12px; }
  .editorial-sequence--factory .capability h3 { font-size: .875rem; }
  .cap-card { padding: 28px; }
  .capabilities { padding-block: 48px; }
}

/* Segunda passada: abertura com conteúdo visível e índice de setores completo. */
.capabilities .section-header { margin-bottom: 32px; }
.capabilities { padding-block: 64px; }
.capabilities .cap-card { padding: 32px; }
#mercados .index-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
#mercados .index-strip a { padding: 16px 12px; min-height: 72px; font-size: 1rem; line-height: 1.4; border: 0; border-bottom: 1px solid var(--mf-ink-200); }
#mercados .index-strip a:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--mf-ink-200); }
#mercados .index-strip a:nth-last-child(-n+2) { border-bottom: 0; }
.editorial-sequence .split[id] { scroll-margin-top: var(--mf-header-clear); }
.editorial-sequence .split-text > a.link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
.editorial-sequence .supervision-photo .ph { aspect-ratio: 3 / 4; max-width: 360px; margin-inline: auto; height: auto; }
.editorial-sequence .supervision-photo .ph-img { object-fit: contain; }
.editorial-sequence .supervision-photo figcaption { max-width: 360px; margin-inline: auto; }
#certificacao .section-header { text-align: left; max-width: 75ch; margin-inline: 0; }
#certificacao .section-header p { max-width: 70ch; margin-inline: 0; font-size: 1rem; line-height: 1.65; }
.contact-channel .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contact-channel .actions .missing-info { flex-basis: 100%; }
.contact-channel-copy a[href^="mailto:"], .contact-compliance a[href^="mailto:"] { display: inline-block; max-width: 100%; }
.contact-card a.contact-link { min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.home-page .header-sticky { background: rgba(0, 7, 54, .94); }
.home-page .hero-overlay { background: linear-gradient(180deg, rgba(0,7,54,.26) 0%, rgba(0,7,54,.56) 35%, rgba(0,7,54,.68) 72%, rgba(0,7,54,.76) 100%); }
.home-page .hero-inner { text-align: center; }
.home-page .hero-inner h1 { margin-inline: auto; max-width: 20ch; font-size: clamp(2rem, 4.6vw, 4rem); }
.home-page .hero-inner p { margin-inline: auto; max-width: 56ch; }
.home-page .hero-actions { justify-content: center; }
.home-page .hero-inner .pill { border: 0; background: transparent; }
.home-page .hero-slide.active .ph-img { transform: none; }
@media (max-width: 899.98px) {
  .home-page .hero { min-height: 620px; align-items: flex-end; }
  .home-page .hero-inner { padding-bottom: 40px; }
  .home-page .hero-inner h1 { max-width: 24ch; font-size: clamp(1.625rem, 4.8vw, 2.5rem); }
  .home-page .hero-inner p { font-size: 1rem; }
}
.notifier-page a.link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
@media (min-width: 900px) {
  .timeline-stage { overflow: visible; }
  .timeline-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; max-width: var(--mf-container-max); width: 100%; margin-inline: auto; padding-top: 0; padding-bottom: 0; }
  .timeline-track::before { content: none; }
  .timeline-mark { width: auto; padding-top: 24px; border-top: 1px solid var(--mf-ink-300); }
  .timeline-mark .ano { font-size: clamp(2.5rem, 4vw, 3.5rem); }
  .timeline-mark p { font-size: 1rem; line-height: 1.65; }
}
@media (max-width: 599.98px) {
  .hero { min-height: 620px; }
  .hero-inner { padding-bottom: 40px; }
  .marca-band--reviewed .marca-lockup { max-width: 240px; }
  .marca-band--reviewed .marca-inner { gap: 28px; }
  .capabilities { padding-block: 48px; }
  .capabilities .cap-card { padding: 24px; }
  .timeline-mark .ano { font-size: 2.5rem; }
  .timeline-mark p { font-size: 1rem; line-height: 1.65; }
  .timeline-track { gap: 28px; }
  .section-header--centro p { text-align: left; font-size: 1rem; line-height: 1.65; }
  .holding-parent { padding: 24px; }
  .holding-parent p { text-align: left; }
  .cert-grid { gap: 0; }
  .cert-card { padding: 20px 0; border: 0; border-bottom: 1px solid var(--mf-ink-300); border-radius: 0; background: transparent; }
  .cert-card:first-child { border-top: 1px solid var(--mf-ink-300); }
  .cert-card h3 { text-wrap: pretty; }
}

/* Certificados: links de documentos com aparência de botão. */
.cert-card a.cert-button { padding: 10px 16px; border: 1px solid currentColor; border-radius: 4px; text-decoration: none; }
.cert-card a.cert-button:hover, .cert-card a.cert-button:focus-visible { background: var(--mf-blue-on-light); color: #fff; }

/* Canais de WhatsApp seguem a hierarquia das seções de contato. */
.whatsapp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 599.98px) { .whatsapp-actions { flex-direction: column; align-items: stretch; } .whatsapp-actions .btn { width: 100%; justify-content: center; } }