/* Maxxi site — base compartilhada das páginas (tokens MBS) */
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-theme-background);font-family:var(--font-family-text);color:var(--color-text-title)}
/* MARGEM DE TÍTULO ZERADA — GLOBAL. No MBS todo afastamento entre irmãos é Intervalo (gap) do
   pai; margem de heading do navegador (h1 = .67em = 40px em 60px) SOMA com o gap e desmonta o
   ritmo declarado. A Home nunca sofreu porque .d-hero já zerava; as páginas internas usam
   .type-display/.type-h1 do DS, que não zeram. Regra única aqui, não por página. */
h1,h2,h3,h4,h5,h6{margin:0}
a{color:var(--color-text-highlight)}a:hover{color:color-mix(in srgb, var(--color-text-highlight) var(--opacity-80), var(--color-text-title))}
section[id],div[id]{scroll-margin-top:calc(var(--space-16) + var(--space-64) + var(--space-24))}
/* ===== MALHA — uma só, herdada (preset Slide 16:9 · 1280: 12 col · margem 64 · vão 24) =====
   Nenhuma seção resolve alinhamento por conta: todo mundo herda .wrap + .grid.
   .wrap usa padding-inline (não o atalho) para que classes de recuo vertical não zerem a margem. */
:root{--mx-container:var(--grid-slide-1280-canvas);--mx-gutter:var(--grid-slide-1280-gutter);--mx-gutter-safe:var(--space-24);
  /* alias de transição: --mx-margin resolvia o recuo de página e é consumido por sangrias
     e faixas full-bleed; passa a apontar para o gutter seguro. */
  --mx-margin:var(--mx-gutter-safe);
  /* largura de coluna DERIVADA do trilho, não fixada à mão */
  --mx-col:calc((var(--mx-container) - 11*var(--mx-gutter))/12);
  /* medida de leitura: 662px é span de TEXTO (74 caracteres em body 16px), não fração de
     grid — permanece como está mesmo com o trilho mudando. */
  --mx-span-text:662px;--mx-span-support:388px;
  /* reserva do cabeçalho persistente (16 de topo + 64 de barra) + respiro; simétrico para
     que align-content:center centre o conteúdo em relação à ALTURA DA SEÇÃO */
  --mx-header-space:calc(var(--space-96) + var(--space-16))}
/* RECUO VERTICAL ENTRE SEÇÕES — dobrado (Well, rodada 1): fórmula, não valor solto,
   para continuar derivado da escala primitiva se ela mudar.
   PARALLAX — folga matematicamente derivada do deslocamento máximo D declarado no JS
   (motion.js e 01-home.js, array LAYERS): a imagem de fundo precisa exceder a seção em
   pelo menos D de cada lado, com o ponto de partida centrado, para que nem +D nem -D
   descubram a borda. --parallax-max-bg = D da camada de hero/mídia (90px, factor 0.20);
   --parallax-max-cta = D da camada de arte do CTA (120px, factor 0.16). Mudar o D no JS
   exige mudar aqui também — os dois lados da fórmula precisam concordar. */
:root{--space-section-v:calc(var(--space-96) * 2);--parallax-max-bg:90px;--parallax-max-cta:120px;
  /* Tema Preto: fundo ≠ superfície (regra do Well). O MBS JÁ TEM o escopo
     [data-tema="preto"] com --color-theme-background = {neutral.950}; este alias existe
     apenas porque o rodapé é componente persistente FORA de um escopo de tema (shadow
     host), e resolve ao MESMO primitivo canônico. Superfície continua sendo
     --surface-model-dark-background ({neutral.900}). */
  --color-theme-background-preto:var(--color-neutral-950)}
/* ===== ON-COLOR E CONTRASTE =====
   Os papéis de texto vêm SÓLIDOS do DS (claro {neutral.600} · secundário {blue.600} ·
   primário {coral.900}) — o site não os redefine. Aqui ficam só os degraus de ACENTO,
   O papel de destaque vem SOMENTE do MBS: --color-text-highlight, resolvido por Tema e por
   Superfície. O alias local --mx-accent-* foi REMOVIDO nesta rodada (resolvia {orange.700}
   no Claro e o papel de TÍTULO no Primário, divergindo do canônico). */
/* --color-surface-subtle: PROMOVIDO NO MBS (colors_and_type.css, = --color-text-ghost por
   tema, inclusive [data-tema="preto"] = {neutral.700}×16). O alias provisório do site foi
   REMOVIDO nesta rodada: ele resolvia {blue.800}×16 no Secundário (o canônico é
   {blue.600}×16) e não tinha escopo preto, então divergia da cor do DS. */
/* apoio dentro de superfície (vidro/card): 48% não passa AA sobre navy */
.card-dark .oferta p,.card-light .oferta p{color:var(--surface-secondary, var(--color-text-body))}
/* O DS pinta o Vidro no host (.surface-glass) com --radius-12; a barra aprovada usa 16.
   Só geometria: nenhuma cor local. */
mx-header.surface-glass{border-radius:var(--radius-16);backdrop-filter:none;-webkit-backdrop-filter:none}
/* ═══ HERO — contrato único do site (R33 · corrigido R35) ═══
   1. 100vh sempre; 2. breadcrumb é NAVEGAÇÃO, não conteúdo: ANCORADO no topo, a um
   espaçamento pequeno e fixo do cabeçalho (16px), fora de qualquer cálculo de centro;
   3. o conteúdo centra no espaço ÚTIL que sobra ABAIXO do crumb até o fim da seção —
   o recuo interno simétrico do .hero-body garante distâncias iguais acima e abaixo.
   4. imagem de hero é FUNDO em sangria total, nunca caixa flutuante. */
.hero-sec{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box;padding-block:calc(var(--space-16) + var(--space-64) + var(--space-16)) 0}
.hero-sec>.crumb-bar{position:relative;z-index:2;flex:none;width:min(100% - 2*var(--mx-gutter-safe), var(--mx-container));margin-inline:auto}
.hero-sec>.hero-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding-block:var(--space-48)}
/* fundo fotográfico em sangria total + véu para piso de contraste */
.hero-bg{position:absolute;top:calc(-1*var(--parallax-max-bg));left:0;right:0;height:calc(100% + 2*var(--parallax-max-bg));z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* Véu do hero interno: MESMO degradê do hero da Home — horizontal, {blue.900}×80 na esquerda,
   transparente na direita. Antes ia de sólido a 32% no fim, ou seja, cobria a foto inteira.
   A parada transparente é 90% (não 72% como na Home) porque o parágrafo dos heroes internos
   corre até ~75% da largura, na faixa MÉDIA da altura: a Home sustenta esse trecho com o
   segundo véu vertical (.hero-veil2), que aqui não existe. Com 72% o parágrafo caía a 3.2:1. */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 26%, transparent 90%)}
/* SOMBREADO DO CABEÇALHO — padrão de todos os heroes internos (a Home não usa .hero-sec e
   segue com o tratamento próprio dela). Faixa de {neutral.950} atrás do cabeçalho de vidro,
   com o DOBRO da altura dele (2 × 64px) e a transição concluída em 50% dessa altura, ou seja
   exatamente na borda inferior do cabeçalho. Fica sob crumb e conteúdo (z-index 1 < 2) e
   acima da fotografia. */
.hero-sec::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(3*var(--size-header,64px));z-index:1;pointer-events:none;background:linear-gradient(180deg, var(--color-neutral-950), color-mix(in srgb, var(--color-neutral-950) var(--opacity-48), transparent) 50%, transparent)}
/* MARCAÇÃO DE PROVISÓRIO — só o asterisco, em papel de destaque. Sem tracejado, sem chip. */
.ast{color:var(--color-text-highlight);font-weight:700}
/* ÍCONE DE CONTEÚDO — alinhamento herdado, não repetido por página.
   .mx-icon do DS é inline-flex centrado: em coluna stretch o <i> estica e centra o glifo.
   Fixa o glifo no eixo do texto que ele acompanha. */
.ico,.d-ico,.ent-ico,.pq-ico,.of-ico,.mnode-i,.setor-item .ph{align-self:flex-start;justify-content:flex-start;width:max-content}
.wrap{box-sizing:border-box;width:min(100% - 2*var(--mx-gutter-safe), var(--mx-container));margin-inline:auto;padding-inline:0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mx-gutter)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
/* ═══ ALTURA E CENTRAGEM — contrato HERDADO (decidido na Home) ═══
   Toda seção de conteúdo tem no mínimo a altura da viewport e centra seu conteúdo;
   faixas ficam fora (.faixa, .logos, .passos, .canais, .conf, migalhas).
   GRID, não flex: item de grid não encolhe, então .wrap continua sendo container da
   malha — o bug 1 da Home nasceu justamente de .wrap virando item flex. */
/* grid-template-columns:minmax(0,1fr) é OBRIGATÓRIO aqui, não estética: item de grid tem
   min-width:auto, então um scroller horizontal (.strip, carrossel de KPIs) impõe seu
   max-content ao track — medido 2026px de track em viewport de 909, com .wrap resolvendo
   100% contra o track e os cards 3 e 4 fora da tela, escondidos pelo overflow:hidden. */
.sec,.cta,.ct-form-sec{box-sizing:border-box;padding:var(--space-section-v) 0;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
.sec>*,.cta>*,.ct-form-sec>*{min-width:0}
/* (contrato antigo de centragem dos heros removido na R35: centralizava o bloco INTEIRO,
   crumb incluído — o .hero-sec flex é quem governa: crumb ancorado + corpo centrado) */
.sec-head{display:flex;flex-direction:column;gap:var(--space-12);max-width:var(--mx-span-text)}
.kicker{display:flex;align-items:center;gap:var(--space-12)}
.kicker span{font-family:var(--font-family-text);font-weight:700;font-size:14px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-highlight)}
.sec-sub{margin:0;font:400 20px/1.4 var(--font-family-text);color:var(--color-text-body);max-width:var(--mx-span-text)}
.sec-body{margin-top:var(--space-64);display:flex;flex-direction:column;gap:var(--space-48)}
.crumb{font:600 12px var(--font-family-text);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-body)}
.crumb a{color:var(--color-text-highlight);text-decoration:none}.crumb a:hover{color:var(--color-text-highlight)}
/* ── CONTRATO PROVISÓRIO DE BOTÃO · candidato ao futuro componente Button ──────
   Não há Button fechado no MBS. Regra em vigor na Home, só com tokens existentes:
   grande  --size-xl  48px → --radius-12 · padrão --size-lg 40px → --radius-8
   pequeno --size-md  32px → --radius-pill, com alvo tátil --size-touch-target-min. */
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);height:var(--size-xl);padding:0 var(--space-32);border-radius:var(--radius-12);font:700 16px/1.5 var(--font-family-text);text-decoration:none;white-space:nowrap}
.btn .ph{font-size:var(--size-icon-24);line-height:1}
.btn-md{height:var(--size-lg);padding:0 var(--space-24);border-radius:var(--radius-8);font:700 14px/1.4 var(--font-family-text)}
.btn-sm{height:var(--size-md);min-height:var(--size-touch-target-min);padding:0 var(--space-16);border-radius:var(--radius-pill);font:700 14px/1.4 var(--font-family-text)}
/* rótulo: provisão canônica do MBS para o tom 500 ({neutral.1000} quando o contexto determinar) —
   mesma aplicada ao CTA do cabeçalho; on-highlight branco sobre orange.500 mede 2,63. Pendência de token registrada. */
.btn-pri{background:var(--color-text-highlight);color:var(--color-neutral-1000)}
.btn-pri:hover{background:color-mix(in srgb, var(--color-text-highlight) var(--opacity-80), var(--color-text-title));color:var(--color-neutral-1000)}
/* SECUNDÁRIO (Well, R28-fix): contorno/fantasma na cor de TEXTO SECUNDÁRIO do tema — o papel de apoio
   (--color-text-body), texto e contorno; nem corpo... nem destaque: destaque é privilégio do primário. */
.btn-ghost{border:var(--border-width-thin) solid color-mix(in srgb, var(--color-text-body) var(--opacity-48), transparent);color:var(--color-text-body)}
.btn-ghost:hover{border-color:var(--color-text-body);color:var(--color-text-body)}
.btn-dark{background:var(--color-neutral-950);color:var(--color-neutral-0)}
.btn-dark:hover{background:var(--color-neutral-900);color:var(--color-neutral-0)}
/* SECUNDÁRIO: contorno na cor de TEXTO SECUNDÁRIO do tema (regra R28-fix) — era papel de
   título, que competia com o primário. Mesmo contrato de .btn-ghost. */
.btn-line{border:var(--border-width-thin) solid var(--color-text-body);color:var(--color-text-body)}
.btn-line:hover{background:color-mix(in srgb, var(--color-text-body) var(--opacity-8), transparent);color:var(--color-text-body)}
.chip{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-md);padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);border:var(--border-width-thin) solid var(--surface-glass-border, var(--color-line-grid));background:var(--surface-glass-background, var(transparent));backdrop-filter:blur(var(--blur-8));-webkit-backdrop-filter:blur(var(--blur-8));font:600 14px/1.33 var(--font-family-text);letter-spacing:.02em;color:var(--color-neutral-0);white-space:nowrap}
.chip img{height:20px;width:auto}
/* chip com selo: o selo é a evidência, então o chip vai ao degrau lg (40) — os de setor ficam em md (32) */
.chip-selo{min-height:var(--size-lg);padding-inline:var(--space-12) var(--space-24)}
.chip .ph{font-size:var(--size-icon-24);line-height:1}
.chip-light{border-color:var(--surface-model-light-border);background:var(--surface-model-light-background);color:var(--surface-model-light-text);backdrop-filter:none;-webkit-backdrop-filter:none}
/* cases (bloco padrão do site: navy + vidro + número primeiro) */
.cases{position:relative;overflow:hidden;background:var(--color-theme-background)}
.cases-marca{position:absolute;right:-140px;bottom:-200px;width:620px;height:620px;color:var(--color-cover-watermark);pointer-events:none}
.cases-marca svg{width:100%;height:100%;display:block}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24)}
.case-card{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-32);text-decoration:none}
.case-num{font:800 52px/1.05 var(--font-family-display);color:var(--surface-glass-highlight, var(--color-text-highlight));letter-spacing:-.01em}
.case-card h4{margin:var(--space-8) 0 0}
.case-meta{margin-top:var(--space-8);font:600 14px var(--font-family-text);color:var(--surface-glass-secondary, var(--color-text-body))}
.case-card:hover{border-color:var(--color-text-highlight)}
/* CTA final (Flow escuro em camadas) */
.cta{position:relative;overflow:hidden;background:var(--color-neutral-950)}
.cta-grad{position:absolute;inset:0;background:linear-gradient(225deg, transparent, var(--color-blue-900))}
.cta-arte{position:absolute;top:calc(-1*var(--parallax-max-cta));left:0;right:0;height:calc(100% + 2*var(--parallax-max-cta));color:var(--color-blue-800)}
/* A ARTE É O PRÓPRIO SVG: a altura precisa ser a MESMA da regra acima (sangria de ±120px
   do parallax). Era height:100%, que vencia por especificidade (tipo+classe) e encolhia a
   arte à altura da seção — o translate então descobria 240px de fundo pelado no rodapé do
   CTA em TODAS as internas; a Home não usa esta classe e nunca mostrou o defeito. */
svg.cta-arte{width:100%;height:calc(100% + 2*var(--parallax-max-cta))}
/* Flow por SVG inline (currentColor só tinge inline) — usado pela Home */
.flow-art{position:absolute;top:calc(-1*var(--parallax-max-cta));left:0;right:0;width:100%;height:calc(100% + 2*var(--parallax-max-cta));pointer-events:none;color:var(--color-blue-800)}
.cta-in{position:relative;padding-block:var(--space-96);display:flex;flex-direction:column;gap:var(--space-16);max-width:680px}
.cta-in p{margin:0;font:400 20px/1.4 var(--font-family-text);color:var(--color-text-body);max-width:var(--mx-span-text)}
.crumb-dark{color:var(--color-text-body)}
.crumb-dark a:hover{color:var(--color-text-highlight)}
/* FAQ (classe única) */
.faq-list{display:flex;flex-direction:column;gap:var(--space-8);max-width:860px}
.faq-list details{border:var(--border-width-thin) solid var(--color-neutral-100);border-radius:var(--radius-12);background:var(--color-neutral-0)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding:var(--space-16) var(--space-24);font:700 16px var(--font-family-display);color:var(--surface-model-light-text)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:700 20px var(--font-family-display);color:var(--color-text-highlight)}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{margin:0;padding:0 var(--space-24) var(--space-16);font:400 16px/1.6 var(--font-family-text);color:var(--color-text-body);max-width:680px}
/* stubs de âncora dos templates */
.stubs{background:var(--color-theme-background)}
.stub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-16)}
.stub{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-24);border:var(--border-width-thin) solid var(--color-card-border, var(--surface-model-light-border));border-radius:var(--radius-12);background:var(--color-card-background, var(--surface-model-light-background))}
.stub-desc{margin:0;font:400 16px/1.55 var(--font-family-text);color:var(--color-text-body)}
.stub h4{margin:0}
@media (max-width:1100px){.grid{gap:var(--space-16)}[class*="col-"]{grid-column:span 12}}
@media (max-width:1000px){:root{--mx-gutter-safe:var(--space-16)}.case-grid,.stub-grid{grid-template-columns:1fr}}

.type-display em,.type-h1 em,.sec-head h1 em,.sec-head h2 em{font-style:italic;color:var(--color-text-highlight)}
/* ═══ CAMADA PERSISTENTE E REVELAÇÃO — compartilhadas pelas páginas ═══ */
.rv{opacity:1;translate:none}
html.mx-js .rv{opacity:0;translate:0 28px;transition:opacity .8s cubic-bezier(.2,.6,.2,1),translate .8s cubic-bezier(.2,.6,.2,1);transition-delay:var(--rvd,0s)}
html.mx-js .rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){html.mx-js .rv{opacity:1;translate:none;transition:none}}
/* ===== TRILHO INDEXADOR =====
   Índice da página: TODOS os assuntos visíveis e clicáveis o tempo todo, com posição atual.
   Sem caixa, sem painel, sem gaveta — os fundos correm por baixo. A legibilidade sobre
   qualquer superfície vem de halo (text-shadow por token), não de superfície própria.
   Numeração é legítima aqui: a página é uma sequência ordenada (guia §9). */
.rail3{position:fixed;right:var(--space-24);top:50%;transform:translateY(-50%);z-index:90;display:grid;grid-template-columns:var(--border-width-base) auto;column-gap:var(--space-12);align-items:stretch;pointer-events:none;color:var(--surface-glass-text)}
.rail3-spine{position:relative;border-radius:var(--radius-pill);background:var(--surface-glass-lines)}
/* progresso é ORIENTAÇÃO, não ênfase: consumia o mesmo papel de destaque do item ativo e,
   em página longa, pintava de laranja um trecho que atravessa vários rótulos — lia como
   "vários itens ativos". Passa a usar baixa ênfase derivada do próprio papel de texto do
   Vidro; o destaque fica exclusivo do item ativo. */
.rail3-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--rail-p,0)*100%);background:color-mix(in srgb, var(--surface-glass-text) var(--opacity-48), transparent);border-radius:var(--radius-pill);transition:height .18s linear}
.rail3-items{display:flex;flex-direction:column;gap:var(--space-12)}
/* Apoio óptico LOCAL à zona do trilho (só optics tokenizadas): o Vidro contextual dá o
   papel de cor, mas sobre fotografia o papel sozinho não garante piso de contraste.
   Halo por sombra do próprio Vidro — nada de escurecer a imagem inteira. */
.rail3 a{pointer-events:auto;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:var(--space-8);text-decoration:none;color:var(--surface-glass-text);text-shadow:0 0 var(--blur-4) var(--surface-glass-shadow),0 1px var(--blur-8) var(--surface-glass-shadow),0 0 var(--blur-16) var(--surface-glass-shadow);transition:transform .2s}
.rail3 a:hover{transform:translateX(-2px);color:var(--surface-glass-highlight)}
.rail3 .num{font:700 12px/1.33 var(--font-family-text);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.rail3 .lbl{font:700 12px/1.33 var(--font-family-text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* Estado ativo = papel contextual de DESTAQUE do Tema atravessado. Sublinhado fica
   reservado a links. O contraste vem da combinação com o apoio óptico do fundo
   (.rail-aura nas seções com imagem) + o halo de sombra do próprio Vidro. */
.rail3 a.on{color:var(--surface-glass-highlight)}
.rail3 a.on .num,.rail3 a.on .lbl{text-shadow:0 0 var(--blur-4) var(--surface-glass-shadow),0 1px var(--blur-8) var(--surface-glass-shadow),0 0 var(--blur-24) var(--surface-glass-shadow)}
/* APOIO ÓPTICO LATERAL — só atrás da faixa do trilho, em seções com imagem de fundo.
   Gradiente do próprio papel de sombra do Tema + desfoque de foco na tira. Não escurece
   a página nem cria painel: é uma tira sem borda, sem fundo sólido, sem raio. */
.rail-aura{position:absolute;top:0;bottom:0;right:0;width:clamp(200px,22vw,340px);pointer-events:none;z-index:1;background:linear-gradient(270deg, var(--surface-glass-shadow), transparent 78%);-webkit-backdrop-filter:blur(var(--blur-4));backdrop-filter:blur(var(--blur-4));-webkit-mask-image:linear-gradient(270deg,var(--color-neutral-1000),transparent 80%);mask-image:linear-gradient(270deg,var(--color-neutral-1000),transparent 80%)}
@media (max-width:1399px){.rail-aura{display:none}}
@media (prefers-reduced-motion:reduce){.rail3 a,.rail3-fill{transition:none}}
@media (max-width:1399px){.rail3{display:none}}

/* Só entre SEÇÕES de composição: os componentes persistentes (cabeçalho, trilho, dropdown)
   também carregam data-tema — escrito por surface-context.js — e o trilho é irmão imediato
   do cabeçalho; sem a exclusão, a regra os capturava e derrubava o position:fixed do trilho.
   [data-surface-context] é a assinatura dos persistentes. */
[data-tema="secundario"]:not([data-surface-context])+[data-tema="secundario"]:not([data-surface-context]){position:relative}
[data-tema="secundario"]:not([data-surface-context])+[data-tema="secundario"]:not([data-surface-context])::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--space-96);background:linear-gradient(180deg, color-mix(in srgb, var(--color-neutral-950) var(--opacity-32), transparent), transparent);pointer-events:none;z-index:1}
[data-tema="secundario"]:not([data-surface-context])+[data-tema="secundario"]:not([data-surface-context])>*{position:relative;z-index:2}

/* ═══ COMPONENTES UNIFICADOS (rodada de composição) — antes duplicados por página ═══ */
/* faixa: seção fina de apoio — não seção de altura cheia */
.sec-band{padding:var(--space-48) 0}
/* prova (hero): rótulo + dado; a separação visual é do .hero-divider (linha do tema) — sem régua de acento própria */
.prova{display:flex;flex-direction:column;gap:var(--space-4);text-decoration:none}
.prova small{font:700 12px var(--font-family-text);letter-spacing:.1em;text-transform:uppercase;color:var(--surface-secondary, var(--color-text-body))}
.prova b{font:700 16px var(--font-family-display);color:var(--surface-text, var(--color-text-title))}
.prova:hover b{color:var(--color-text-highlight)}
/* banda de links relacionados em duas colunas (03 .rel-grid ≡ 04 .conh-grid) */
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-48);align-items:start}
.rel-col{display:flex;flex-direction:column;gap:var(--space-16)}
.rel-links{display:flex;flex-direction:column;gap:var(--space-8)}
.rel-links a{font:600 16px/1.5 var(--font-family-text);color:var(--color-text-title);text-decoration:none}
.rel-links a:hover{color:var(--color-text-highlight)}
/* item de linha superior (topline): 03 .muda-item ≡ 03 .apl-item ≡ 06 .fiz-item */
.tl-item{display:flex;flex-direction:column;gap:var(--space-8);border-top:var(--border-width-base) solid var(--color-text-highlight);padding-top:var(--space-16)}
.tl-item h4{margin:0}
.tl-item p{margin:0;font:400 16px/1.55 var(--font-family-text);color:var(--color-text-body)}
.tl-item>a{font:700 14px var(--font-family-text);color:var(--color-text-highlight);text-decoration:none}
/* indicador institucional com topline (02 .stat ≡ 07 .stat, cópias idênticas) */
.stat{display:flex;flex-direction:column;gap:var(--space-8);border-top:var(--border-width-base) solid var(--color-text-highlight);padding-top:var(--space-16)}
/* ícone de conteúdo em accent (estava só na Home) */
.ico{flex:none;align-self:flex-start;color:var(--color-text-highlight)}
@media (max-width:1000px){.rel-grid{grid-template-columns:1fr}}
/* ═══ CARD FOTOGRÁFICO DE INDÚSTRIA — componente único (Home capítulo navy ≡ Hub seção própria).
   .inds-sec traz só o padding (mesmo valor de .sec, mas em padding-block): quem usa .sec
   junto herda min-height/box-sizing/centragem; a Home usa .inds-sec sozinho, sem piso, dentro
   do capítulo navy fundido — nenhuma das duas muda o comportamento da outra). */
.inds-sec{padding-block:var(--space-section-v) var(--space-section-v)}
.inds-head{margin-bottom:var(--space-64)}
.inds{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mx-gutter)}
/* CARD DE INDÚSTRIA — FULL-IMAGE (R37, exemplo do Well): a fotografia ocupa o card inteiro
   (retrato 3:4) e o texto assenta sobre um sombreado de baixo para cima em {blue.900} —
   sólido no rodapé, transparente a partir de ~55% da altura. O vidro do tema fica só no
   contorno; título {neutral.0}, parágrafo {neutral.100}, como todo texto sobre foto.
   Componente único: Home ≡ Hub de Soluções ≡ Visão/Missão/Propósito da Sobre. */
.ind-card{grid-column:span 4;position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;text-decoration:none;overflow:hidden;border-radius:var(--radius-16);box-shadow:var(--shadow-md);border:var(--border-width-thin) solid var(--surface-border, var(--color-line-grid));transition:translate .3s cubic-bezier(.2,.6,.2,1)}
.ind-card:hover{translate:0 -8px}
.ind-media{position:absolute;inset:0;overflow:hidden}
/* ENQUADRAMENTO POR FOTO: o card é 3:4 e as fotos são ~3.2:4 — cover não sobra altura, então
   alinhamento vertical dos assuntos se faz por --ind-ty (deslocamento) + --ind-zoom (folga).
   Linha de referência: topo da cabeça do homem no card de Farma (~20% da altura do card). */
.ind-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1);transform:translate(var(--ind-tx,0px),var(--ind-ty,0px)) scale(var(--ind-zoom,1))}
.ind-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 28%, transparent 55%)}
.ind-card:hover .ind-media img{transform:translate(var(--ind-tx,0px),var(--ind-ty,0px)) scale(calc(var(--ind-zoom,1)*1.045))}
.ind-body{position:relative;z-index:1;padding:var(--space-24) var(--space-24) var(--space-32);display:flex;flex-direction:column;gap:var(--space-8)}
.ind-body .type-eyebrow{color:var(--color-text-highlight)}
.ind-title{display:flex;align-items:center;gap:var(--space-12)}
.ind-title h3{margin:0;color:var(--color-neutral-0)}
.ind-body h3{margin:0;color:var(--color-neutral-0)}
.ind-body p{margin:0;font:600 14px/1.4 var(--font-family-text);color:var(--color-neutral-100)}
.ind-link{margin-top:var(--space-8);padding-top:0;font:600 16px/1.5 var(--font-family-text);color:var(--color-text-highlight);display:flex;align-items:center;gap:var(--space-8)}
.ind-link::after{content:"→";transition:transform .2s}
.ind-card:hover .ind-link::after{transform:translateX(4px)}
/* ═══ SELOS/PROVA DO HERO — componente único (Home ≡ Hub) ═══ */
.provas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32);max-width:calc(var(--mx-col)*8 + var(--mx-gutter)*7)}
.prova-item{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-12);align-items:start}
.prova-item img{grid-row:span 2;width:var(--size-icon-32);height:var(--size-icon-32);align-self:start}
.prova-item .ph{grid-row:span 2;font-size:var(--size-icon-32);line-height:1;color:var(--color-text-highlight)}
.prova-forte{font:700 16px/1.35 var(--font-family-display);color:var(--color-text-title)}
.prova-compl{font:600 14px/1.4 var(--font-family-text);color:var(--color-neutral-200)}
/* ═══ SETINHAS DE CARROSSEL — componente único (Home cases ≡ demais carrosséis do site) ═══ */
/* cabeçalho de carrossel: título à esquerda, setinhas na base direita (era CSS local da Home) */
.cases-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-32)}
@media (max-width:1000px){.cases-top{flex-direction:column;align-items:flex-start;gap:var(--space-24)}.cases-top .carrossel-nav{align-self:flex-end}.carrossel-nav{padding-bottom:0}}
.carrossel-nav{display:flex;gap:var(--space-8);flex:none}
.cnav{position:relative;width:var(--size-lg);height:var(--size-lg);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-8);border:var(--border-width-thin) solid var(--surface-glass-border, var(--color-line-grid));background:var(--surface-glass-background, var(--color-neutral-0));color:var(--surface-glass-text, var(--color-text-title));cursor:pointer;transition:border-color .2s,color .2s,opacity .2s}
.cnav::after{content:"";position:absolute;inset:-2px}
.cnav .ph{font-size:var(--size-icon-24);line-height:1}
.cnav:hover:not(:disabled){border-color:var(--surface-glass-highlight, var(--color-text-highlight));color:var(--surface-glass-highlight, var(--color-text-highlight))}
.cnav:focus-visible{outline:var(--border-width-base) solid var(--surface-glass-highlight, var(--color-text-highlight));outline-offset:var(--space-4)}
.cnav:disabled{opacity:var(--opacity-32);cursor:default}
/* divisória fina entre botão e prova no hero — componente único (Oferta ≡ Indústria) */
.hero-divider{width:var(--border-width-thin);align-self:stretch;min-height:var(--size-lg);background:var(--color-line-grid)}
/* ═══ MURO DE LOGOS — carrossel em loop, componente único (Home ≡ Contato) ═══ */
.logos-view{position:relative;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--color-neutral-1000) var(--space-96),var(--color-neutral-1000) calc(100% - var(--space-96)),transparent);mask-image:linear-gradient(90deg,transparent,var(--color-neutral-1000) var(--space-96),var(--color-neutral-1000) calc(100% - var(--space-96)),transparent)}
.logos-track{display:flex;width:max-content;animation:mx-marquee 42s linear infinite}
.logos-track:hover{animation-play-state:paused}
.logos-row{display:flex;align-items:center;gap:var(--space-64);padding-right:var(--space-64);flex:none}
.logos-row img{width:auto}
@keyframes mx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos-track{animation:none;flex-wrap:wrap}}

/* retranca de destaque (kicker cromático) — o guia do MBS define .type-eyebrow.is-highlight,
   mas o CSS do pacote ainda não traz a regra; declarada aqui consumindo o PAPEL do DS
   (--color-text-highlight resolve por tema/superfície), nunca primitivo nem hex. */
.type-eyebrow.is-highlight{color:var(--color-text-highlight)}
/* ═══ PILAR DE ATUAÇÃO — componente da Home promovido (Agronegócio reusa; Home mantém defs locais idênticas) ═══ */
.pilar{position:relative;display:flex;flex-direction:column;gap:var(--space-32);border-top:var(--border-width-bold) solid var(--color-line-grid);padding-top:var(--space-24)}
.pilar-h{display:flex;flex-direction:column;gap:var(--space-4)}
.pilar-h h3{margin:0}
.pilar-list{display:flex;flex-direction:column;gap:var(--space-40)}
.oferta{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-16);row-gap:var(--space-4);align-items:start;text-decoration:none}
.oferta h4{grid-column:2;margin:0;text-wrap:pretty;transition:color .15s}
.oferta p{grid-column:2;margin:0;font:400 16px/1.55 var(--font-family-text);color:var(--color-text-body)}
.oferta .ph{grid-row:span 2;align-self:start;margin-top:var(--space-4);font-size:var(--size-icon-32, 32px);line-height:1;color:var(--color-text-highlight);transition:color .15s}
.oferta:hover h4{color:var(--color-text-highlight)}
.oferta:hover .ph{color:var(--color-text-title)}
/* ═══ POR QUE MAXXI — diferenciais institucionais, formulação literal compartilhada (Home ≡ ofertas) ═══ */
.pq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mx-gutter)}
.pq-item{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:var(--space-12);align-content:start;border-top:var(--border-width-base) solid var(--color-text-title);padding-top:var(--space-16)}
/* notas de prova: linha de partida COMUM nos 4 cards (linha do subgrid); distância do parágrafo
   é composta: intervalo do item (12) + recuo de entrada do bloco de notas (24) */
.pq-provas{display:flex;flex-direction:column;gap:var(--space-8);align-self:start;padding-top:var(--space-24)}
.pq-item h4{margin:0}
.pq-item p{margin:0;font:400 16px/1.55 var(--font-family-text);color:var(--color-text-body)}
.pq-prova{display:flex;gap:var(--space-8);align-items:baseline;font:600 14px/1.4 var(--font-family-text);color:var(--color-text-title)}
/* NOTA DE FONTE — referência visível (fonte/período/base) exigida pela spec; não é tooltip */
.fonte-nota{max-width:var(--mx-span-text);font:600 12px/1.6 var(--font-family-text);color:var(--color-text-footer)}
.ind-card .ind-benefit{font:700 18px/1.33 var(--font-family-display);color:var(--color-neutral-0)}
@media (max-width:1000px){.pq-grid{grid-template-columns:1fr 1fr}}

/* setinhas: contorno no papel secundário do contexto (o contorno de Vidro sumia no tema claro) */
.cnav{border-color:var(--surface-glass-secondary, var(--color-text-body));color:var(--surface-glass-secondary, var(--color-text-body))}
.cnav:hover:not(:disabled){border-color:var(--surface-glass-highlight, var(--color-text-highlight));color:var(--surface-glass-highlight, var(--color-text-highlight))}

/* ═══ MOBILE MVP (≤768) — rodada Home+Contato. Desktop intocado: tudo vive nesta media. ═══ */
@media (max-width:768px){
:root{--mx-gutter-safe:var(--space-24);--space-section-v:var(--space-64)}
html,body{overflow-x:clip}
.sec,.cta,.ct-form-sec{min-height:0;padding:var(--space-64) 0}
.sec-body{margin-top:var(--space-40);gap:var(--space-32)}
.inds-sec{padding-block:var(--space-64)}
.cta-in{padding-block:var(--space-64)}
/* véu dos heroes: de BAIXO para CIMA no mobile — base escura sustenta o texto ancorado embaixo; topo/meio da foto ficam limpos */
.hero-bg::after{background:linear-gradient(0deg, var(--color-blue-900) 0%, color-mix(in srgb, var(--color-blue-900) var(--opacity-80), transparent) 34%, transparent 72%)}
}

/* ===== OCULTAÇÃO TEMPORÁRIA (r26) — Cases, PT/EN e dados em validação =====
   Nada foi apagado: tudo volta removendo este bloco. */
section#cases,section#case{display:none!important}
.rail3-items a[data-spy="cases"],.rail3-items a[data-spy="case"]{display:none!important}
.rail3-items{counter-reset:mxr}
.rail3-items a{counter-increment:mxr}
.rail3-items a .num{visibility:hidden;position:relative}
.rail3-items a .num::after{content:counter(mxr,decimal-leading-zero);visibility:visible;position:absolute;left:0;top:0}
.prova[href="#cases"],.prova[href="#case"]{pointer-events:none}
#porque .fonte-nota{display:none!important}
.stats .stat:has(.stat-conf){display:none!important}