/*
 * mfb.css — o <style> do <helmet> do preview, menos as amarras frageis.
 *
 * A transcricao das animacoes e dos estados de hover e literal. O que NAO e
 * transcricao sao as media queries: no preview elas miravam a string exata do
 * atributo style — `div[style*="grid-template-columns:repeat(4,1fr)"]` — porque
 * o layout inteiro era inline e nao havia classe onde pegar. Isso funciona ate
 * alguem trocar um espaco depois da virgula, e entao o seletor deixa de casar
 * sem nada quebrar visivelmente no desktop.
 *
 * Aqui cada grade com breakpoint virou classe (.mfb-grid-servicos,
 * .mfb-sobre-grid, .mfb-pilares-grid, .mfb-footer-grid, ...), e as media
 * queries miram as classes. E a mesma mudanca que conserta o overflow
 * horizontal e devolve o flex-wrap da regua do rodape — os dois pendentes que o
 * README do preview registra.
 *
 * @package MFB
 */

/* ---------------------------------------------------------------------------
 * Paleta da pagina: o design system nasce claro (--bg-page: areia-tint) e o
 * site e escuro. Este bloco inverte os aliases semanticos, e por isso precisa
 * vir DEPOIS de mfb-tokens.css na fila do wp_enqueue_style.
 * ------------------------------------------------------------------------- */
:root {
	--bg-page: var(--preto);
	--bg-alt: #171717;
	--bg-surface: #161616;
	--text-body: var(--branco);
	--text-muted: rgba(255, 255, 255, .68);
	--text-faint: rgba(255, 255, 255, .5);
	--border-subtle: rgba(255, 255, 255, .12);
	--border-strong: rgba(255, 255, 255, .3);
	--link: var(--azul-tint);
	--link-hover: var(--amarelo);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text-body);
	background: var(--bg-page);
	min-height: 100vh;
	/* O preview estourava a largura em mobile (~384px a 390px de viewport, e
	   442px no arquivo original). A causa era grade fixa que nao colapsava;
	   as media queries por classe abaixo resolvem na origem. Este clamp e o
	   cinto de seguranca: nenhuma secao nova pode reintroduzir o estouro. */
	overflow-x: hidden;
}

a { color: var(--link); text-decoration: none; }
/* Hover de link NAO muda cor e NAO sublinha — e a regra da revisao de arte de
   01/09/2026, escrita pela Ana em dois cartoes: "tirar grifado ... apenas se
   movimentando para cima" (86ak968xu) e "tirar grifado e manter apenas o
   movimento do box" (86ak98dj2). O movimento e o `translateY(-2px)` global,
   que continua logo abaixo. A regra generica que pintava e sublinhava saiu de
   mfb-tokens.css; esta linha aqui e o cinto de seguranca para o caso de o
   design system ser reimportado com ela de volta. */
a:hover { text-decoration: none; }
::selection { background: var(--amarelo); color: var(--preto); }
img { max-width: 100%; }

input, textarea, select { background: var(--bg-surface); color: var(--text-body); }
/* <button> NAO herda font-family: o UA stylesheet crava Arial 13.333px nele. No
   preview esses controles eram <div>/<span> com onClick, entao herdavam Inter
   sem ninguem pedir. O "Assine" do rodape saia em Arial ate esta linha. */
button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ---------------------------------------------------------------------------
 * `.screen-reader-text` — texto que so o leitor de tela recebe.
 *
 * O `header.php` depende desta classe em cinco lugares (o "Pular para o
 * conteudo" e os quatro rotulos da barra de toque) e o tema nunca a definiu:
 * quem a escondia eram o `frontend.css` do Elementor e o CSS inline do
 * `wp-block-library` (medido em 15/09/2026), os dois enfileirados em todas as
 * rotas por coincidencia, nao por contrato. Desativar o plugin e dequeue do
 * block library — coisa que tema sem Gutenberg faz — deixavam cinco textos
 * aparecerem na tela, e o sintoma nao parece com a causa.
 *
 * `clip-path` alem do `clip` porque o segundo esta obsoleto; os dois convivem
 * enquanto navegador antigo importar. `white-space: nowrap` impede que o texto
 * espremido em 1px vire uma coluna de letras que alguns leitores soletram.
 * ------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

/* O "Pular para o conteudo" e um link: escondido para o mouse, mas ele PRECISA
   aparecer quando o teclado chega nele — um atalho invisivel ao proprio usuario
   de teclado nao serve para nada. Volta como botao ancorado no topo. */
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 22px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--amarelo);
	color: var(--preto);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: normal;
	border-radius: var(--radius-pill);
	outline: 2px solid var(--preto);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Botao — no preview era o unico componente React importado do _ds_bundle.js.
 * Vira classe porque um <button> com estilo inline nao da para o cliente
 * reaproveitar no Elementor, e o bundle inteiro existia por causa deste botao.
 * ------------------------------------------------------------------------- */
.mfb-btn {
	/* `inline-flex` com centralizacao, e nao `inline-block`.
	 *
	 * Os CTAs vivem num flex `align-items: stretch`: o botao sem borda e
	 * esticado de 45 para os 47px do vizinho com borda. Um <button> centra o
	 * proprio conteudo nesse espaco extra — e o que o UA stylesheet faz —, mas
	 * um <a> em `inline-block` deixa o texto colado no padding de cima. Dava 1px
	 * de diferenca vertical no rotulo, e so no botao sem borda. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	/* `normal`, e nao o 1.5 que o base.css poe no body: no preview isto era um
	   <button>, que ja nasce com line-height normal do navegador. Como <a>, ele
	   herdava 1.5 e ficava 4px mais alto — diferenca que aparecia somada na
	   altura da secao de Servicos. */
	line-height: normal;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	border: none;
	cursor: pointer;
	letter-spacing: .02em;
	text-align: center;
}
.mfb-btn--primary   { background: var(--action-primary); color: var(--action-primary-text); }
.mfb-btn--accent    { background: var(--action-accent); color: var(--action-accent-text); }
.mfb-btn--highlight { background: var(--action-highlight); color: var(--action-highlight-text); }
.mfb-btn--secondary { background: transparent; color: var(--text-body); border: 1.5px solid var(--text-body); }
.mfb-btn--ghost     { background: rgba(16, 16, 16, .06); color: var(--text-body); }
/* Nao e variante do design system: e o botao branco escrito a mao que o canvas
   de 27/08 pos no lugar do Button na dobra de Servicos. Raio de 4px, e nao a
   pilula; medidas proprias. */
.mfb-btn--branco {
	background: #fff;
	border: 1px solid #fff;
	color: #101010;
	border-radius: 4px;
	font-size: 15px;
	padding: 14px 32px;
	/* `normal`, e nao o `.02em` do `.mfb-btn`. Nao e simplificacao: os botoes do
	   design system TEM o espacamento no canvas (`Quero Participar`, `Saiba
	   Mais` e `Ver todos` medem 0,28px a 14px, que e exatamente `.02em`). Este
	   aqui nao tem, porque nao e o componente — e o botao escrito a mao. Tirar
	   o `.02em` do `.mfb-btn` para consertar este quebraria os outros tres. */
	letter-spacing: normal;
}
/* Nem todo botao do preview era o componente do design system. O "Ver todos"
   dos Eventos era um <span> escrito a mao com os mesmos paddings, e por ser
   <span> herdava o line-height 1.5 do corpo — 4px mais alto que o <button>. A
   diferenca e pequena e real; reproduzi-la e o que fecha a altura da secao. */
.mfb-btn--loose { line-height: 1.5; }

/* Nao ha variante "sobre fundo escuro", e isso surpreende quem le o fonte.
 *
 * O arquivo entregue passa `style="color:#fff;border-color:rgba(255,255,255,.5)"`
 * aos botoes secundarios do hero e da chamada final — borda branca a 50%. So
 * que o componente Button do design system monta o proprio objeto de estilo e
 * ignora o atributo recebido: no preview publicado a borda desses botoes e
 * `1px solid rgb(255,255,255)`, branco opaco, medido. E o terceiro binding
 * morto do arquivo, junto com as media queries e a opacidade dos icones.
 *
 * Como `--secondary` ja resolve `var(--text-body)` para branco neste tema, o
 * resultado correto sai sem modificador nenhum. */

/* ---------------------------------------------------------------------------
 * Animacoes. Transcricao literal do preview — os tempos e os keyframes
 * intermediarios sao o desenho, nao aproximacao.
 * ------------------------------------------------------------------------- */
/* A borda que corre no botao do cabecalho.
 *
 * **Gira um gradiente PARADO, e nao anima o angulo dele.** A versao anterior
 * registrava `@property --ang` e animava o `from` de um `conic-gradient` no
 * pseudo-elemento. Isso parou de pintar: medido em 11/09/2026, o `--ang` do
 * `::before` avancava normalmente (getComputedStyle mostrava 248deg, 280deg,
 * 312deg, 344deg em leituras seguidas, com `playState: running`) e mesmo assim
 * tres capturas seguidas do botao saiam **identicas byte a byte**. Animar uma
 * propriedade customizada registrada nao invalida a pintura do background que a
 * usa; o valor muda no sistema de estilo e a tela nao repinta.
 *
 * Tres medidas sustentam isso, e vale registrar porque cada uma sozinha
 * enganaria: (1) fixando `--ang` em 90deg e em 300deg, o desenho MUDA — 291
 * pixels de diferenca —, entao o gradiente le a propriedade; (2) trocando a
 * animacao por um `filter: hue-rotate` no mesmo pseudo-elemento, as capturas
 * passam a diferir em 578 pixels, entao o instrumento enxerga repintura; (3)
 * com o rotulo antigo "Participe", que e 38px mais estreito, continuava em zero
 * — nao era largura, e o defeito ja existia antes de o botao mudar de nome.
 *
 * O desenho na tela e o mesmo: mesmas cores, mesma espessura, mesmo periodo. O
 * que muda e quem se move — agora e um quadrado maior que o botao girando por
 * `rotate`, recortado pelo `overflow: hidden` do botao, com o miolo tapado pelo
 * `<span>`. Transformacao sempre repinta, e o efeito deixa de depender de
 * `@property` — que Firefox so passou a ter na 128 e Safari na 16.4, ou seja,
 * nesses navegadores a borda estava parada desde sempre.
 * ------------------------------------------------------------------------- */
@keyframes mfbBorderSpin { to { rotate: 360deg; } }

.mfb-participe-btn {
	position: relative;
	border-radius: 4px;
	padding: 1.5px;
	/* Recorta o quadrado que gira. E o que substitui o `mask-composite`. */
	overflow: hidden;
}
.mfb-participe-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	/* Quadrado sobre a MAIOR dimensao do botao: a 200% da largura ele cobre a
	   diagonal com folga em qualquer rotulo, e a altura nunca e o lado longo. */
	width: 200%;
	aspect-ratio: 1;
	translate: -50% -50%;
	background: conic-gradient(var(--azul-tint) 0deg, var(--azul-tint) 300deg, #fff 330deg, var(--azul-tint) 360deg);
	animation: mfbBorderSpin 2.5s linear infinite;
}
.mfb-participe-btn > span {
	display: block;
	background: var(--preto);
	border-radius: 3px;
	padding: 7px 13px;
	position: relative;
	z-index: 1;
}

@keyframes mfbTextMoire {
	0%   { text-shadow: 0 0 currentColor; }
	15%  { text-shadow: 1.5px 0 var(--amarelo), -1.5px 0 var(--azul-tint); }
	30%  { text-shadow: -1px 0 var(--amarelo), 1px 0 var(--azul-tint); }
	45%  { text-shadow: 1px 0 var(--amarelo), -1px 0 var(--azul-tint); }
	60%  { text-shadow: -0.6px 0 var(--amarelo), 0.6px 0 var(--azul-tint); }
	100% { text-shadow: 0 0 currentColor; }
}
.mfb-moire-click { animation: mfbTextMoire .5s ease-out; }

@keyframes mfbNavWave {
	0%   { transform: scaleY(.35); opacity: 0; }
	12%  { opacity: 1; }
	30%  { transform: scaleY(1.2); }
	50%  { transform: scaleY(.85); }
	70%  { transform: scaleY(1.05); }
	88%  { opacity: 1; }
	100% { transform: scaleY(.35); opacity: 0; }
}
.mfb-nav-item .mfb-nav-wave { opacity: 0; }
.mfb-nav-item:hover .mfb-nav-wave { opacity: 1; }
/* Longhands de proposito, NAO o shorthand `animation:`. O shorthand reseta
   `animation-delay` para 0s e, por ter especificidade maior que os
   `span:nth-child(n)` la embaixo, apagava a defasagem das seis barras: elas
   subiam e desciam em bloco. No canvas o delay e inline em cada span e vence
   a cascata — por isso la e uma onda que atravessa da esquerda para a
   direita. Medido em 16/09/2026 com os seis `transform` iguais a cada
   instante. */
.mfb-nav-item:hover .mfb-nav-wave span {
	animation-name: mfbNavWave;
	animation-duration: .9s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
/* O item da pagina atual e so texto amarelo e negrito (`.is-active`, abaixo),
   como no canvas: as barras aparecem SO no hover — la ficam amarelas pela
   regra `.is-active .mfb-nav-wave span`. Em 16/09/2026 chegaram a ficar
   visiveis em repouso sob o item atual; o Daniel viu e pediu de volta o
   comportamento do canvas. */
/* O item do menu PERMANECE BRANCO no hover — so sobe. O amarelo virou o
   estado de clique, e esta na secao do fim do arquivo. Palavras da revisao:
   "Deve permanecer branco no hover, apenas se movimentando para cima. Ao
   clicar o botao fica amarelo." (86ak968xu) */

@keyframes mfbKenBurns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.12) translate(-1.5%, -1.5%); } }
.mfb-kenburns { animation: mfbKenBurns 18s ease-in-out infinite alternate; }

@keyframes mfbPulse { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@keyframes mfbLogoPulse {
	0%, 100% { transform: scaleY(1); }
	8%  { transform: scaleY(1.15); }
	16% { transform: scaleY(.96); }
	24% { transform: scaleY(1.1); }
	32% { transform: scaleY(1); }
	60% { transform: scaleY(1); }
	68% { transform: scaleY(1.18); }
	76% { transform: scaleY(.94); }
	84% { transform: scaleY(1.08); }
	92% { transform: scaleY(1); }
}
@keyframes mfbBarBeat { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(1.25); } 55% { transform: scaleY(.85); } 80% { transform: scaleY(1.1); } }
@keyframes mfbSoundPulse {
	0%, 100% { opacity: .3; transform: translate(-50%, calc(var(--mfb-disc) * -175 / 360)) rotate(var(--a)) scaleY(.7); }
	50%      { opacity: 1;  transform: translate(-50%, calc(var(--mfb-disc) * -175 / 360)) rotate(var(--a)) scaleY(3.4); }
}
@keyframes mfbEqBar { 0%, 100% { height: 5px; } 50% { height: 14px; } }

/* O logo sao 7 imagens, cada uma com seu delay — e o que da a impressao de
   equalizador tocando. Os delays vem do preview, um a um. */
.mfb-logo { display: flex; align-items: center; gap: 1px; cursor: pointer; flex: none; }
.mfb-logo img { width: auto; transform-origin: bottom; }
/* O canvas de 27/08 passou a pulsar as barras a partir do centro, e nao da
   base. Vale so no header: o rodape ainda usa o lockup antigo. */
.mfb-logo--header img { transform-origin: center; }
.mfb-logo .mfb-logo-bar { animation: mfbBarBeat 1.6s ease-in-out infinite; }
.mfb-logo .mfb-logo-bar:nth-of-type(1) { animation-duration: 1.6s;  animation-delay: 0s; }
.mfb-logo .mfb-logo-bar:nth-of-type(2) { animation-duration: 1.3s;  animation-delay: .15s; }
.mfb-logo .mfb-logo-bar:nth-of-type(3) { animation-duration: 1.5s;  animation-delay: .3s; }
.mfb-logo .mfb-logo-bar:nth-of-type(4) { animation-duration: 1.2s;  animation-delay: .05s; }
.mfb-logo .mfb-logo-bar:nth-of-type(5) { animation-duration: 1.45s; animation-delay: .22s; }
.mfb-logo .mfb-logo-bar:nth-of-type(6) { animation-duration: 1.35s; animation-delay: .38s; }
.mfb-logo .mfb-logo-word { margin-left: 3px; }

/* Header: barras 11.2/15.2/9.6/22.4/9.6/15.2 + wordmark 56. As barras
   encolheram e o wordmark dobrou porque o arquivo novo escreve o nome por
   extenso e traz folga vertical propria — o glifo ocupa ~40% da altura. */
.mfb-logo--header .mfb-logo-bar:nth-of-type(1) { height: 11.2px; }
.mfb-logo--header .mfb-logo-bar:nth-of-type(2) { height: 15.2px; }
.mfb-logo--header .mfb-logo-bar:nth-of-type(3) { height: 9.6px; }
.mfb-logo--header .mfb-logo-bar:nth-of-type(4) { height: 22.4px; }
.mfb-logo--header .mfb-logo-bar:nth-of-type(5) { height: 9.6px; }
.mfb-logo--header .mfb-logo-bar:nth-of-type(6) { height: 15.2px; }
.mfb-logo--header .mfb-logo-word { height: 56px; margin-left: -2px; object-fit: contain; }
/* ---- Lockup compacto: sete barras + o "m" ----
 *
 * Tres tamanhos do mesmo desenho. Cada barra tem duracao e atraso proprios,
 * herdados das regras `.mfb-logo-cbar:nth-of-type(n)` abaixo — as alturas e que
 * mudam por variante. O rodape passou a usar SO este lockup no canvas de
 * 27/08; o header o usa abaixo de 900px, e a tab bar num terceiro tamanho. */
.mfb-logo-compact { display: none; align-items: center; gap: 2px; }
.mfb-logo-compact img { width: auto; transform-origin: center; }
.mfb-logo-cbar { animation: mfbBarBeat 1.6s ease-in-out infinite; }
.mfb-logo-cbar:nth-of-type(1) { animation-duration: 1.6s;  animation-delay: 0s; }
.mfb-logo-cbar:nth-of-type(2) { animation-duration: 1.3s;  animation-delay: .15s; }
.mfb-logo-cbar:nth-of-type(3) { animation-duration: 1.5s;  animation-delay: .3s; }
.mfb-logo-cbar:nth-of-type(4) { animation-duration: 1.2s;  animation-delay: .05s; }
.mfb-logo-cbar:nth-of-type(5) { animation-duration: 1.45s; animation-delay: .22s; }
.mfb-logo-cbar:nth-of-type(6) { animation-duration: 1.35s; animation-delay: .38s; }
.mfb-logo-cbar:nth-of-type(7) { animation-duration: 1.55s; animation-delay: .46s; }
.mfb-logo-mark { object-fit: contain; }

/* Rodape (e header abaixo de 900px): 10.2/20.4/13.4/30.2/13.4/20.2/10.2 + 22. */
.mfb-logo--footer .mfb-logo-compact { display: flex; }
.mfb-logo--footer .mfb-logo-cbar:nth-of-type(1) { height: 10.2px; }
.mfb-logo--footer .mfb-logo-cbar:nth-of-type(2) { height: 20.4px; }
.mfb-logo--footer .mfb-logo-cbar:nth-of-type(3) { height: 13.4px; }
.mfb-logo--footer .mfb-logo-cbar:nth-of-type(4) { height: 30.2px; }
.mfb-logo--footer .mfb-logo-cbar:nth-of-type(5) { height: 13.4px; }
.mfb-logo--footer .mfb-logo-cbar:nth-of-type(6) { height: 20.2px; }
.mfb-logo--footer .mfb-logo-cbar:nth-of-type(7) { height: 10.2px; }
.mfb-logo--footer .mfb-logo-mark { height: 22px; margin-left: 3px; }

.mfb-logo--header .mfb-logo-cbar:nth-of-type(1) { height: 10.2px; }
.mfb-logo--header .mfb-logo-cbar:nth-of-type(2) { height: 20.4px; }
.mfb-logo--header .mfb-logo-cbar:nth-of-type(3) { height: 13.4px; }
.mfb-logo--header .mfb-logo-cbar:nth-of-type(4) { height: 30.2px; }
.mfb-logo--header .mfb-logo-cbar:nth-of-type(5) { height: 13.4px; }
.mfb-logo--header .mfb-logo-cbar:nth-of-type(6) { height: 20.2px; }
.mfb-logo--header .mfb-logo-cbar:nth-of-type(7) { height: 10.2px; }
.mfb-logo--header .mfb-logo-mark { height: 20.4px; margin-left: 2px; }

/* Tab bar: um passo menor que o rodape. */
.mfb-tabbar__logo .mfb-logo-compact { display: flex; gap: 1px; }
/* O logo da barra de abas e mais apagado que o do cabecalho: no canvas a
   opacidade de .65 esta no invólucro das barras, e nao no icone — por isso
   o seletor precisa do escopo `.mfb-tabbar__logo`, senao apaga o logo do
   topo junto. */
.mfb-tabbar__logo .mfb-logo-compact { opacity: .65; }
.mfb-tabbar__logo .mfb-logo-cbar:nth-of-type(1) { height: 8px; }
.mfb-tabbar__logo .mfb-logo-cbar:nth-of-type(2) { height: 16.2px; }
.mfb-tabbar__logo .mfb-logo-cbar:nth-of-type(3) { height: 10.7px; }
.mfb-tabbar__logo .mfb-logo-cbar:nth-of-type(4) { height: 24px; }
.mfb-tabbar__logo .mfb-logo-cbar:nth-of-type(5) { height: 10.7px; }
.mfb-tabbar__logo .mfb-logo-cbar:nth-of-type(6) { height: 16.1px; }
.mfb-tabbar__logo .mfb-logo-cbar:nth-of-type(7) { height: 8px; }
.mfb-tabbar__logo .mfb-logo-mark { height: 16.8px; margin-left: 1.5px; }
/* No rodape o logo carrega 16px de respiro antes do paragrafo. E o que fecha a
   coluna em 243px: 26 do logo + 16 + 125 do texto + 18 da margem dele + 58 dos
   sociais. */
.mfb-logo--footer { margin-bottom: 16px; }

/* O preview mirava [style*="cursor:pointer"] — aqui a intencao virou classe. */
a, button, .mfb-clickable { transition: transform .15s ease; }
a:hover, button:hover, .mfb-clickable:hover { transform: translateY(-2px); }

.mfb-flip-box { position: relative; transition: transform .35s ease; }
.mfb-flip-box:hover { transform: translateY(-6px); }
.mfb-flip-inner { position: relative; width: 100%; height: 100%; min-height: 170px; transition: transform .6s cubic-bezier(.4, 0, .2, 1); transform-style: preserve-3d; }
.mfb-flip-box:hover .mfb-flip-inner { transform: rotateY(180deg); }
.mfb-flip-front, .mfb-flip-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; padding: 24px 18px; }
.mfb-flip-back { transform: rotateY(180deg); }

.mfb-events-scroll::-webkit-scrollbar { height: 10px; }
.mfb-events-scroll::-webkit-scrollbar-track { background: rgba(16, 16, 16, .15); border-radius: 6px; }
.mfb-events-scroll::-webkit-scrollbar-thumb { background: var(--preto); border-radius: 6px; }

/* ---------------------------------------------------------------------------
 * Estrutura
 * ------------------------------------------------------------------------- */
.mfb-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.mfb-container--wide { max-width: 1320px; }
.mfb-section-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 20px;
	letter-spacing: -.02em;
}

/* Header */
.mfb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(16, 16, 16, .88);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border-subtle);
}
/* Barra do WordPress: o header gruda ABAIXO dela, nao atras.
 *
 * Um `sticky` com `top: 0` encosta no topo da JANELA, e a barra do admin e
 * `fixed` no mesmo lugar com z-index 99999 — o header passava por baixo e o
 * logo e a navegacao ficavam cobertos pelos itens dela. So quem esta logado ve
 * isso, o que e justamente por que passou despercebido.
 *
 * As tres faixas sao as do proprio WordPress: 32px acima de 782, 46px entre 601
 * e 782, e abaixo de 601 a barra deixa de ser fixa e sobe com a pagina, entao
 * ali o header volta a `top: 0`. */
.admin-bar .mfb-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .mfb-header { top: 46px; }
}

@media screen and (max-width: 600px) {
	.admin-bar .mfb-header { top: 0; }
}
.mfb-header__bar {
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(10px, 1.6vw, 28px);
	flex-wrap: nowrap;
}
/* A navegacao passou a ser a coluna elastica e centrada: com o wordmark por
   extenso a esquerda e quatro acoes a direita, deixar `wrap` fazia a barra
   virar duas linhas entre 1100 e 1300px. */
.mfb-desktop-nav {
	display: flex;
	align-items: center;
	/* Teto 24 → 28px em 16/09/2026, junto com a fonte dos itens (abaixo). O meio
	   sobe na mesma proporcao para o piso continuar valendo nos mesmos 900px. */
	gap: clamp(10px, 1.75vw, 28px);
	flex-wrap: nowrap;
	flex: 1;
	justify-content: center;
}
.mfb-nav-item {
	cursor: pointer;
	/* 11.5 → 14.5px no teto, pedido do Daniel em 16/09/2026 depois de escolher
	   num playground com o header real; o piso de 10px nos 900px fica onde
	   estava — so o meio (.85vw → 1.07vw) acompanha, para o teto ser alcancado
	   na mesma largura de antes (~1353px). */
	font-size: clamp(10px, 1.07vw, 14.5px);
	white-space: nowrap;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	position: relative;
	padding: 6px 2px;
	transition: color .25s ease;
}
.mfb-nav-item.is-active { color: var(--amarelo); font-weight: 700; }
.mfb-nav-wave {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 9px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	transition: opacity .2s ease;
}
.mfb-nav-wave span { width: 2px; background: #fff; border-radius: 1px; transform-origin: bottom; }
.mfb-nav-item.is-active .mfb-nav-wave span { background: var(--amarelo); }
.mfb-nav-wave span:nth-child(1) { height: 55%;  animation-delay: 0s; }
.mfb-nav-wave span:nth-child(2) { height: 75%;  animation-delay: .07s; }
.mfb-nav-wave span:nth-child(3) { height: 45%;  animation-delay: .14s; }
.mfb-nav-wave span:nth-child(4) { height: 100%; animation-delay: .21s; }
.mfb-nav-wave span:nth-child(5) { height: 60%;  animation-delay: .28s; }
.mfb-nav-wave span:nth-child(6) { height: 80%;  animation-delay: .35s; }

.mfb-header__actions { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); flex: none; }
.mfb-bma-link { display: flex; align-items: center; flex: none; }
.mfb-header-bma { height: 40px; width: auto; max-width: 150px; object-fit: contain; opacity: .9; }
/* Some antes do ponto de quebra do menu: entre 1080 e 900 a barra ainda e a de
   desktop, mas o selo ja espremeria a navegacao. */
@media (max-width: 1080px) {
	.mfb-header-bma { display: none; }
}
.mfb-mobile-toggle {
	display: none;
	position: absolute;
	top: 14px;
	right: 20px;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--branco);
	background: none;
	border: 0;
	padding: 0;
}
/* Fixo no rodape da janela e nao ancorado no header: o header se esconde ao
   rolar, e um menu preso a ele descia junto. `bottom` sobe para 56px quando a
   tab bar entra em cena — dai a variavel, escrita pelo mfb.js. */
.mfb-mobile-nav {
	display: none;
	flex-direction: column;
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--mfb-nav-bottom, 0px);
	z-index: 59;
	background: rgba(16, 16, 16, .97);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 8px 16px 14px;
	gap: 0;
	max-height: 58vh;
	overflow-y: auto;
	transition: bottom .28s ease;
}
.mfb-mobile-nav.is-open { display: flex; }
/* Veu atras da gaveta de menu.
 *
 * O painel e uma gaveta de 58vh ancorada no rodape da tela — e assim no canvas
 * de 27/08 tambem, medido: la ele abre mostrando o hero acima. O problema so
 * aparece com a pagina ROLADA ATE O FIM, porque ai o pedaco visivel acima da
 * gaveta e o menu do rodape: duas listas de navegacao legiveis ao mesmo tempo.
 * E a queixa da Ana em 86akbjc2f, e a captura dela mostra exatamente isso.
 *
 * O veu resolve sem mexer na altura da gaveta, que e desenho do canvas. Fica
 * ABAIXO do painel (59) e da tab bar (60), entao os dois seguem legiveis e
 * clicaveis; quem apaga e so a pagina.
 *
 * `::after` do body em vez de elemento novo: nao ha markup a acrescentar e
 * nada a limpar quando o menu fecha. Quem escuta o toque no veu e o documento
 * (ver `initMobileMenu`), porque pseudo-elemento nao recebe clique.
 *
 * So no toque: acima de 900px a gaveta nem existe. */
@media (max-width: 900px) {
	body.mfb-nav-aberto::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 58;
		background: rgba(10, 10, 10, .78);
	}
	/* O FAB do WhatsApp vive em 9000 e atravessava o veu e a gaveta: ficava
	   aceso em cima do menu, colado no "Seja Associado". Com a gaveta aberta
	   ele desce para baixo do veu e escurece com o resto da pagina. */
	body.mfb-nav-aberto .mfb-whatsapp-fab { z-index: 57; }
}

/* Tab bar. Entra so abaixo de 900px E so depois que a pagina rola: no topo o
   header ainda esta visivel, e as duas barras somavam 130px numa tela de 844. */
.mfb-tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: rgba(16, 16, 16, .96);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	transform: translateY(110%);
	transition: transform .28s ease;
}
body.mfb-scrolled .mfb-tabbar { transform: translateY(0); }
.mfb-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1;
	cursor: pointer;
	padding: 6px 2px;
	min-height: 44px;
	color: rgba(255, 255, 255, .6);
	background: none;
	border: 0;
}
.mfb-tabbar__item.is-active, .mfb-tabbar__menu[aria-expanded="true"] { color: var(--amarelo); }
.mfb-tabbar__item:hover { transform: none; }
/* O divisor vai em TODOS menos o ultimo, e nao so no primeiro — no canvas sao
   tres bordas. Nao e so o tracinho que falta: com `box-sizing: border-box` o
   1px entra no minimo intrinseco do item flex, entao as quatro larguras saem
   95.75/95.75/95.75/94.75 em vez de 96.25/95.25/95.25/95.25, e a barra inteira
   — logo, icones e divisores — anda 1px. */
.mfb-tabbar__item:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .14); }
.mfb-tabbar__logo { display: flex; align-items: center; }

.mfb-whatsapp-fab {
	position: fixed;
	right: 24px;
	bottom: 28px;
	z-index: 9000;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	text-decoration: none;
}
.mfb-mobile-nav a {
	cursor: pointer;
	font-size: 15px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .85);
	font-weight: 600;
}
.mfb-mobile-nav a.is-active { color: var(--amarelo); font-weight: 700; }
/* O "Seja Associado" ao pe da gaveta: pele do botao do cabecalho, mas em
 * bloco, centrado, e fora da lista — sem a linha divisoria e o padding de
 * item que `.mfb-mobile-nav a` da a todo `<a>`. O `> span` herda o preto de
 * fundo e o recorte da borda girante de `.mfb-participe-btn`. */
.mfb-mobile-nav .mfb-participe-btn--gaveta {
	margin-top: 14px;
	padding: 1.5px;
	border-bottom: 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--azul-tint);
}
.mfb-mobile-nav .mfb-participe-btn--gaveta > span { padding: 12px 16px; }
/* Azul sempre — na rota atual e no toque. O amarelo de `.is-active` e do
 * `:active` e para os itens da lista; no botao ele brigava com a borda azul
 * e virava um terceiro estado que nao existe no desktop (Daniel, 16/09). */
.mfb-mobile-nav .mfb-participe-btn--gaveta.is-active,
.mfb-mobile-nav .mfb-participe-btn--gaveta:active { color: var(--azul-tint); }

/* Hero */
/* So o hero da HOME e de altura de janela; as rotas internas seguem em
   `.mfb-page-hero`, que manteve a proporcao 1536/696.32 do arquivo entregue.
   O `min-height` existe para telas baixas de desktop, onde 100vh nao da espaco
   para titulo, subtitulo e os dois CTAs. */
.mfb-hero {
	text-align: center;
	color: var(--branco);
	width: 100%;
	position: relative;
	overflow: hidden;
	height: 100vh;
	min-height: 600px;
}
.mfb-hero__track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.mfb-hero__slide {
	height: 100%;
	flex: none;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 32px;
}
.mfb-hero__bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
.mfb-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 7, .15) 0%, rgba(8, 6, 7, .6) 55%, rgba(8, 6, 7, .8) 100%); }
/* A capa clicavel do banner. Fica DEPOIS do scrim no DOM e sem z-index proprio:
   assim ela cobre a arte e o veu, e o `.mfb-hero__body` logo abaixo — que tem
   `z-index: 1` — continua por cima dela, com os botoes clicaveis e o texto
   selecionavel. As setas e as bolinhas sao irmas do track e tambem ficam acima. */
.mfb-hero__capa { position: absolute; inset: 0; }
.mfb-hero__body { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.mfb-hero__title {
	font-family: var(--font-display);
	font-size: clamp(28px, 4.2vw, 48px);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0 0 14px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.mfb-hero__title span { color: var(--amarelo); }
.mfb-hero__sub {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
	margin: 0 0 20px;
	padding: 0 20px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.mfb-hero__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.mfb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(16, 16, 16, .4);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	z-index: 2;
	border: 0;
	padding: 0;
}
.mfb-arrow--prev { left: 20px; }
.mfb-arrow--next { right: 20px; }

.mfb-dots { display: flex; justify-content: center; gap: 0; }
/* Linha de navegacao do carrossel: chevron + bolinhas + chevron. O `gap` e
   o mesmo do `.mfb-dots`, entao o espacamento chevron-bolinha fecha nos 8px
   do canvas sem precisar de um segundo numero. */
.mfb-dots-nav { display: flex; align-items: center; justify-content: center; gap: 0; }
/* `align-items: center` porque abaixo de 900px esta linha fica MISTA: chevron
   de 15px ao lado de bolinha de 9px. Sem ele o `stretch` do flex esticaria a
   bolinha para 15px de altura e ela deixaria de ser redonda. E onde o
   `.mfb-serv-carrossel__dots` tambem declara, pelo mesmo motivo. */
.mfb-hero__dots { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 2; align-items: center; }
/* As duas formas do mesmo controle nunca aparecem juntas. O `.mfb-dot-chev`
   ja nasce `display:none` e so acende abaixo de 900px (regra unica, mais
   adiante); aqui apaga-se o par de cima no mesmo limite. */
@media (max-width: 900px) {
	.mfb-hero .mfb-arrow,
	.mfb-eventos .mfb-carousel__arrow { display: none; }
}
/* A bolinha continua com 9px VISIVEIS; o alvo de toque e 24px. A diferenca e
   uma borda transparente com `background-clip: padding-box`, que deixa a cor
   so no miolo — assim as regras de cor por secao (`--dark`, `--verde`, o
   branco do hero) seguem valendo sem mexer em nada. Por isso elas usam
   `background-color` e nao o atalho `background`: o atalho reseta o clip
   para `border-box` e a bolinha viraria um disco de 24px. O `gap: 0` das
   linhas de dots e o que sobra: com caixas de 24px o passo entre bolinhas
   e 25px (a borda de 8px em vez de 7,5 e porque 7,5 arredonda para 23), acima
   dos 24px do WCAG 2.5.8 — antes eram 9px + 8px de gap = 17px, e
   o Lighthouse acusava 23 alvos pequenos na home (17/09/2026). Custo
   visual: 16px entre bolinhas em vez de 8px. */
.mfb-dot {
	box-sizing: content-box;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	cursor: pointer;
	border: 8px solid transparent;
	padding: 0;
	background-color: rgba(255, 255, 255, .35);
	background-clip: padding-box;
}
.mfb-dot.is-active { background-color: var(--amarelo); }
/* Branco, e nao amarelo: o canvas de 27/08 trocou so o dot do hero. Os de
   Eventos (--azul-shade) e Novidades (--verde-tint) seguem como estavam. */
.mfb-hero__dots .mfb-dot.is-active { background-color: #fff; }

/* Dobra institucional */
/* As duas alturas travadas do desenho.
 *
 * `height: 615px` e `height: 400px` estao inline no arquivo entregue, e nos
 * dois casos a caixa e MAIOR que o conteudo — sao respiro deliberado, nao
 * recorte: medido no preview a 1440px, sobra 90px na dobra institucional e 97px
 * na chamada final. Reproduzir isso e o que fecha a diferenca de 14px e 47px
 * que a comparacao lado a lado acusou.
 *
 * Abaixo de 960px elas voltam a `auto`. Isso NAO e ajuste de mobile inventado:
 * e o mesmo tratamento que o proprio arquivo entregue da as outras duas alturas
 * fixas dele (`height:523px` e `height:600px` viram `auto` na media query de
 * 960px do <helmet>). As duas de baixo ficaram de fora daquela lista porque o
 * seletor mirava a string exata do style — 615 e 400 nao estavam escritos la.
 * Com a grade empilhada, manter a altura travada faria a secao invadir a
 * seguinte. */
/* 675px e nao 615: a entrega de 25/08 alongou a dobra para caber a faixa de
   realizacao (BM&A + ApexBrasil) entre o paragrafo e os numeros. */
.mfb-sobre { padding: 56px 0 96px; background: var(--bg-page); height: 675px; }
.mfb-sobre-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 64px;
	align-items: stretch;
}
/* Sem isto qualquer filho com largura intrinseca maior que a coluna estoura a
   grade em vez de encolher — e a origem classica de overflow horizontal em
   layout de grid, e a razao de o preview vazar 427px a 390px de viewport. */
.mfb-sobre-grid > *,
.mfb-pilares-grid > *,
.mfb-grid-servicos > *,
.mfb-footer-grid > * { min-width: 0; }
.mfb-sobre__text { display: flex; flex-direction: column; }
.mfb-sobre__lead { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }
.mfb-realizacao { display: flex; align-items: center; gap: 36px; padding: 0 0 6px; flex-wrap: wrap; }
.mfb-realizacao a { display: flex; align-items: center; }
.mfb-realizacao img { width: auto; object-fit: contain; opacity: .85; }
.mfb-realizacao__bma { height: 46px; }
.mfb-realizacao__apex { height: 32px; }
.mfb-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 22px 0;
	margin-top: auto;
	row-gap: 22px;
}
.mfb-stat { text-align: center; padding: 0 12px; border-right: 1px solid var(--border-subtle); }
.mfb-stat:nth-child(3n) { border-right: none; }
.mfb-stat__num { font-family: var(--font-display); font-weight: 800; font-size: 34px; }
.mfb-stat__label {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 8px;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.3;
}
.mfb-sobre__media { display: flex; align-items: center; justify-content: center; height: 100%; }
/* `width: min(420px, 100%)` e nao `width:420px; max-width:100%`: numa track
   `1fr` o `min-width: auto` implicito faz a coluna crescer ate caber o
   min-content do filho, e 420px fixos empurravam a grade para 420 mesmo com o
   max-width — foram os 46px de estouro medidos a 390px de viewport. Com o
   `min()` a largura JA nasce limitada, e o `aspect-ratio` guarda o circulo. */
.mfb-circle {
	width: min(420px, 100%);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid rgba(16, 16, 16, .15);
}
.mfb-circle { position: relative; }
.mfb-circle img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	max-width: none;
	transform: translate(-50%, -50%);
	display: block;
}

/* Servicos */
/* `scroll-margin-top` e para quem chega por `/#servicos` de outra pagina: o
   salto nativo do navegador poe o topo da secao na borda da janela, atras do
   header fixo de 80px. Cliques na mesma pagina passam pelo `rolarAte()` do
   mfb.js, que ja desconta os 90px. */
.mfb-servicos { padding: 96px 0; background: #1c1c1c; color: var(--branco); scroll-margin-top: 80px; }
.mfb-grid-servicos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px 6px;
	max-width: 960px;
	margin: 0 auto 36px;
}
.mfb-serv-icon-col {
	cursor: pointer;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	height: 190px;
	position: relative;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
}
.mfb-serv-icon-col::before,
.mfb-serv-icon-col::after {
	content: '';
	position: absolute;
	top: 64px;
	bottom: 64px;
	width: 1px;
	background: transparent;
	transition: background .2s ease;
}
.mfb-serv-icon-col::before { left: 0; }
.mfb-serv-icon-col::after { right: 0; }
/* Os dois divisores de 1px acendem na cor do servico SO sob o mouse (e no
   foco de teclado). Isso e do canvas: cada coluna do `.dc.html` tem dois
   `<span>` absolutos com `background:{{ic.dividerColor}}`, e `dividerColor` e
   `item.color` quando `i === hoveredServiceIdx`, senao `transparent`. A regra
   existiu, saiu em 02/09/2026 com o registro de que "o canvas nao tem esses
   pseudo-elementos" — leitura que nao foi conferida no fonte — e voltou em
   16/09/2026 a pedido do Daniel, com a captura do canvas na mao. */
.mfb-serv-icon-col:hover::before,
.mfb-serv-icon-col:hover::after,
.mfb-serv-icon-col:focus-visible::before,
.mfb-serv-icon-col:focus-visible::after { background: var(--mfb-serv-color); }
/* Os icones ficam TODOS em opacidade cheia, e isso e uma escolha contra a
 * intencao aparente do template.
 *
 * O arquivo entregue escreve `opacity:{{ic.active ? '1' : '.55'}}` no SVG, ou
 * seja: o designer quis o icone inativo a 55%. So que o ternario nunca foi
 * avaliado — no preview publicado a propriedade `opacity` simplesmente NAO
 * EXISTE no atributo style de nenhum dos oito, nem no carregamento nem depois
 * do hover. O que sobrou foi o `transition: opacity .2s`, apontando para um
 * efeito que nao acontece. E o mesmo tipo de binding morto das media queries.
 *
 * Como o pedido e fidelidade ao original, ficamos com o que ele RENDERIZA. O
 * estado ativo continua sinalizado pela pilula colorida do rotulo, que funciona
 * nos dois. Para devolver a intencao do designer um dia, basta descomentar as
 * duas linhas abaixo. */
.mfb-serv-icon-col svg { color: var(--mfb-serv-color); transition: opacity .2s ease; }
/* .mfb-serv-icon-col svg { opacity: .55; } */
/* .mfb-serv-icon-col.is-active svg { opacity: 1; } */
.mfb-serv-icon-col__label {
	padding: 6px 10px;
	border-radius: 4px;
	background: transparent;
	transition: background .2s ease;
	width: 100%;
	/* 130 → 200px com a fonte de 16px (16/09/2026): a 130 "Internacionalizacao
	   e Showcases" ia a tres linhas. A coluna tem 240px menos 28 de padding;
	   200 cabe. */
	max-width: 200px;
	/* Duas linhas de altura SEMPRE, com o texto centrado nelas. Com 200px de caixa
	   metade dos rotulos passou a caber numa linha so, e como a coluna centra o
	   conteudo na vertical, o icone de "Negocios e Conexoes" (uma linha) descia
	   ~10px em relacao ao de "Internacionalizacao e Showcases" (duas) — a fileira
	   ficava serrilhada. Altura fixa mantem os oito icones na mesma linha e a
	   pilula ativa do mesmo tamanho em todos. */
	min-height: calc(2 * 1.3 * 16px + 12px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mfb-serv-icon-col.is-active .mfb-serv-icon-col__label { background: var(--mfb-serv-color); }
.mfb-serv-icon-col__label span {
	font-size: 16px; /* 11.5 → 16, escolha do Daniel no playground de 16/09/2026 */
	font-weight: 500;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .7);
	display: block;
	line-height: 1.3;
}
.mfb-serv-icon-col.is-active .mfb-serv-icon-col__label span { color: var(--preto); }
.mfb-servicos__desc {
	max-width: 720px; /* 640 → 720, para a fonte de 19px caber em duas linhas */
	margin: 0 auto;
	border: 1px solid var(--mfb-serv-color, var(--amarelo));
	border-radius: 4px;
	padding: 28px 32px;
	text-align: center;
	transition: border-color .2s ease;
}
.mfb-servicos__desc p { font-size: 19px; line-height: 1.7; color: rgba(255, 255, 255, .75); margin: 0; }
/* O clique num icone pisca a caixa de leve (16/09/2026). O hover ja troca o
   texto, entao o clique nao fazia nada visivel — e caixa que nao reage ao
   clique le como link quebrado. O veu e a cor do servico a 14%, sobe e desce
   em ~450ms, sem mover nada; o `mfb.js` reinicia a classe a cada clique e a
   tira no `animationend`. Nao e do canvas: o `onClick` de la so troca o slide. */
.mfb-servicos__desc.is-pulse { animation: mfb-serv-pulse .45s ease-out; }
@keyframes mfb-serv-pulse {
	0%   { background: transparent; box-shadow: 0 0 0 0 transparent; }
	30%  { background: color-mix(in srgb, var(--mfb-serv-color) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfb-serv-color) 28%, transparent); }
	100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.mfb-servicos__desc.is-pulse { animation: none; }
}

.mfb-smoke-divider { height: 110px; background-position: center; background-size: cover; background-attachment: fixed; }

/* Pilares */
.mfb-pilares { padding: 96px 0; background-attachment: fixed; background-position: center; background-size: cover; color: var(--branco); }
.mfb-pilares-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 56px;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
}
/* Mesmo caso do circulo da dobra institucional: 360px cravados mais os 16px de
 * padding do container dao 392px de minimo, entao qualquer viewport abaixo
 * disso estourava. Era ele o 1px que sobrava a 375px — nao era arredondamento.
 *
 * O tamanho vira `--mfb-disc` porque as barras orbitam num raio de 175px
 * medido para um disco de 360: encolher um sem o outro joga as barras para
 * fora. Com a variavel, as tres medidas do desenho (3px de largura, 16px de
 * altura, 175px de raio) viram fracoes dela e acompanham.
 *
 * `min()` com `100vw` e nao `100%`: dentro de uma track de grid `auto`, `100%`
 * se resolve contra a track — que por sua vez se dimensiona pelo item. A
 * primeira tentativa usou `container-type: inline-size` para escapar disso e o
 * disco colapsou para 2x2px no desktop, porque a contencao inline tirou a
 * largura da negociacao. `100vw` nao depende do pai. Acima de 392px de viewport
 * o `min()` devolve 360px cravados, entao o desktop fica identico ao original. */
.mfb-pilares__disc {
	--mfb-disc: min(360px, calc(100vw - 32px));
	width: var(--mfb-disc);
	height: var(--mfb-disc);
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .15);
	position: relative;
}
.mfb-pilares__disc img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	max-width: none;
	transform: translate(-50%, -50%);
	display: block;
}
.mfb-soundbars { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.mfb-soundbar {
	position: absolute;
	left: 50%;
	top: 50%;
	/* 3/360, 16/360 e 175/360 do disco — os numeros do desenho, proporcionais
	   em vez de absolutos. Com o disco em 360px eles resolvem para exatamente
	   3px, 16px e 175px, que e o caso do desktop. */
	width: calc(var(--mfb-disc) * 3 / 360);
	height: calc(var(--mfb-disc) * 16 / 360);
	border-radius: 2px;
	transform-origin: center calc(var(--mfb-disc) * 175 / 360);
	transform: translate(-50%, calc(var(--mfb-disc) * -175 / 360)) rotate(var(--a));
	animation: mfbSoundPulse var(--dur) ease-in-out infinite;
	animation-delay: var(--delay);
}
.mfb-pilar { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.mfb-pilar__mark {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	transition: border-color .3s ease;
}
.mfb-pilar__dot { color: rgba(255, 255, 255, .28); position: absolute; opacity: 1; transition: opacity .3s ease; }
.mfb-pilar__eq { display: flex; align-items: center; justify-content: center; gap: 2px; height: 16px; position: absolute; opacity: 0; transition: opacity .3s ease; }
.mfb-pilar:hover .mfb-pilar__dot { opacity: 0; }
.mfb-pilar:hover .mfb-pilar__eq { opacity: 1; }
.mfb-pilar__eq span { display: block; width: 2px; background: rgba(255, 255, 255, .85); border-radius: 1px; height: 5px; animation: mfbEqBar var(--dur) ease-in-out infinite; animation-delay: var(--delay); }
.mfb-pilar__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--branco); }

/* Eventos */
.mfb-eventos { padding: 60px 0; background: var(--amarelo); color: var(--preto); }
.mfb-eventos__viewport { display: flex; gap: 0; overflow: hidden; border: 1px solid rgba(16, 16, 16, .14); border-radius: var(--radius-lg); }
/* flex:0 0 auto e obrigatorio: como flex item, a track de width:200% encolheria
   de volta para 100% e cortaria os cards ao meio. */
.mfb-eventos__track { display: flex; flex: 0 0 auto; transition: transform .4s ease; }
.mfb-card-evento { cursor: pointer; color: var(--branco); border-right: 1px solid rgba(0, 0, 0, .35); min-width: 0; }
/* aspect-ratio, nunca altura fixa: com altura fixa a caixa dava razao 1.23, o
   cover casava pela altura e jogava 31% da largura do poster para fora.
 *
 * CORRECAO LOCAL — nao vem do canvas do Claude Design, e o canvas NAO a tem.
 * Nasceu no preview em 20/08 (commit 4d9fb3f) porque o "R$ 1.440" e o
 * "21-25 OUT" do poster do WOMEX apareciam partidos ao meio. O canvas de
 * 27/08 continua com `height: 300px`, entao uma reimportacao futura vai
 * parecer indicar que esta linha esta errada. Nao esta: e a correcao. O card
 * fica 92px mais baixo que o canvas de proposito. */
.mfb-card-evento__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
/* ATENCAO: toda caixa que usa a tecnica abaixo PRECISA de `overflow: hidden`.
 *
 * O `image-slot` tem esse recorte no `.frame` da shadow DOM dele, e adotar o
 * posicionamento sem adotar o recorte deixa a foto vazar: na lista de eventos a
 * imagem tem 236px numa caixa de 160 e escorria por cima do titulo do card, que
 * ficava ilegivel. Na home o defeito existia e nao aparecia — o `overflow:
 * hidden` do viewport do carrossel escondia o vazamento por acidente.
 *
 * Mesma tecnica do `image-slot` do preview, e nao `object-fit: cover`.
 *
 * As duas enquadram igual — mesma escala pela largura, mesmo centro — mas
 * rasterizam por caminhos diferentes: com `cover` o browser reamostra para
 * dentro de uma caixa de 370x208, com esta o elemento tem 370x225,7 de verdade
 * e quem corta e o `overflow` do pai. A diferenca aparecia como ruido
 * espalhado pela foto no diff pixel a pixel, denso justamente nas areas de
 * detalhe. Nao e layout, e reamostragem — mas o pedido era fidelidade. */
.mfb-card-evento__media img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	max-width: none;
	transform: translate(-50%, -50%);
	display: block;
}
.mfb-card-evento__date {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--preto);
	color: #fff;
	border-radius: 4px;
	padding: 6px 9px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1.1;
	pointer-events: none;
}
.mfb-card-evento__date span { font-size: 9px; font-weight: 600; }
.mfb-card-evento__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 5px 10px;
	border-radius: 4px;
	pointer-events: none;
}
/* A tarja fica ABAIXO da imagem, nao sobre ela. Pedido da Ana em 86akbja4b, e
   e divergencia declarada do canvas: la ela e `position: absolute` com
   `rgba(0, 0, 0, .72)` por cima da foto — medido no DOM do canvas, nao deduzido.
   Quem pediu a mudanca e a autora da peca, e a HOME esta fora do portao
   (`seed`), entao nao ha custo de medicao.
   O fundo passou de translucido para SOLIDO junto com a mudanca: fora da foto,
   72% de preto deixaria o amarelo da secao atravessar e a faixa sairia verde-
   oliva. O `.mfb-card-evento` ja da `color: var(--branco)` ao texto.
   88px fixos seguem: a altura vem do texto que a faixa contem, e travar mantem
   as tarjas alinhadas entre cards de titulos diferentes. */
.mfb-card-evento__strip {
	height: 88px;
	padding: 14px 18px;
	background: var(--preto);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Uma linha, e nao duas: o canvas de 27/08 trocou o clamp de 2 linhas por
   `nowrap` + reticencias. Com titulos de tamanhos diferentes, o card de duas
   linhas mudava de altura conforme o evento e desalinhava a faixa do carrossel. */
.mfb-card-evento__strip h3 {
	font-family: var(--font-display);
	font-size: 14.5px;
	margin: 0 0 6px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mfb-card-evento__loc { font-size: 12px; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mfb-carousel { position: relative; }
.mfb-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--preto);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
	border: 0;
	padding: 0;
	z-index: 3;
}
.mfb-carousel__arrow--prev { left: -18px; }
.mfb-carousel__arrow--next { right: -18px; }
.mfb-dot--dark { background-color: rgba(16, 16, 16, .25); }
.mfb-dot--dark.is-active { background-color: var(--azul-shade); }

/* Parceiros */
.mfb-parceiros { padding: 80px 0; background-attachment: fixed; background-position: center; background-size: cover; }
.mfb-logo-wall { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.mfb-logo-wall__item {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 20px;
	width: 140px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mfb-logo-wall__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Novidades */
.mfb-novidades { padding: 96px 0; background-attachment: fixed; background-position: center; background-size: cover; }
/* No toque o fundo volta a rolar com a secao. Pedido da Ana em 86ak992bh
   ("ajustar o efeito de rolagem do fundo"), e a causa nao e divergencia de
   pareamento: o canvas declara exatamente o mesmo `fixed`/`cover`/`center`,
   medido no DOM dele a 390px. O problema e o `background-attachment: fixed`
   no Safari do iOS, que resolve a caixa do fundo pela JANELA e nao pelo
   bloco. Como `smoke-novidades.png` e 1484x513 (bem larga) e a janela do
   telefone e alta e estreita, o `cover` amplia a imagem por altura e sobra
   uma fatia central esticada — o verde chapado da captura da Ana.

   Por que isto nao aparece na medicao: o canvas-pair mede em Chromium, que
   trata o `fixed` de outro jeito, e ali os dois lados dao o mesmo escuro.
   O defeito so existe no motor que a Ana usa, entao NAO ha como confirmar
   o conserto aqui — a conferencia e no aparelho dela.

   `pointer: coarse` e o mesmo teste que o `initCursor()` usa para desligar
   o cursor de trompete: e efeito que nao sobrevive ao toque, nao largura.

   Escopo deliberado: `.mfb-pilares`, `.mfb-parceiros` e `.mfb-smoke-divider`
   declaram o MESMO `fixed` e sofrem do mesmo problema, e ficaram de fora —
   nao ha cartao para elas. Atencao a ultima antes de mexer: o
   `.mfb-smoke-divider` entra em `/servicos/` (route-servicos.php inclui
   `home/servicos.php`), que e rota COM portao em 0,000%; as outras tres
   secoes so existem na home, que esta fora do portao. */
@media (pointer: coarse) {
	.mfb-novidades { background-attachment: scroll; }
}
.mfb-novidades__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; flex-wrap: wrap; gap: 12px; }
/* O recorte saiu do `style=` inline para ca: em modo de rolagem no toque ele
   precisa virar `overflow-x: auto`, e estilo inline nao se sobrescreve por
   media query. */
.mfb-novidades__viewport { overflow: hidden; }
.mfb-novidades__track { display: flex; transition: transform .4s ease; }
/* `color` explicito porque o card virou <a>: no preview ele era um <div
   onClick>, e o texto herdava o branco do corpo. Como link, a regra
   `a { color: var(--link) }` desce para o <h3> e pintava o titulo de azul-tint.
   Mesmo motivo do `color: var(--branco)` no card de evento. */
.mfb-card-novidade {
	color: var(--text-body);
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: pointer;
	min-width: 0;
	margin-right: 16px;
}
.mfb-card-novidade__media { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.mfb-card-novidade__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfb-ig-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.mfb-card-novidade__body { padding: 12px; }
.mfb-card-novidade__meta { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.mfb-card-novidade__date { font-size: 10px; font-weight: 700; color: var(--laranja); }
.mfb-pin { font-size: 9px; font-weight: 700; background: var(--amarelo); color: var(--preto); padding: 2px 6px; border-radius: 4px; }
.mfb-card-novidade__title {
	font-family: var(--font-display);
	font-size: 12.5px;
	margin: 0;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.mfb-novidades .mfb-carousel__arrow { top: 35%; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--branco); }
.mfb-dot--verde { background-color: rgba(255, 255, 255, .25); }
.mfb-dot--verde.is-active { background-color: var(--verde-tint); }
.mfb-ig-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	background: transparent;
	border: 1px solid var(--amarelo);
	color: var(--amarelo);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	text-decoration: none;
}
.mfb-ig-cta:hover { color: var(--amarelo); }

/* Faca parte */
.mfb-facaparte {
	padding: 96px 0;
	background-position: center;
	background-size: cover;
	color: var(--branco);
	text-align: center;
	height: 400px;
}
.mfb-facaparte__inner { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.mfb-facaparte p { font-size: 16px; color: rgba(255, 255, 255, .75); margin: 0 0 36px; }
.mfb-facaparte__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }

/* Rodape */
.mfb-footer { background: rgba(16, 16, 16, .88); backdrop-filter: blur(8px); color: var(--verde-tint); padding: 70px 0 0; }
.mfb-footer-grid {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px 56px;
	display: grid;
	/* `minmax(0,1fr)` e nao `1fr`: numa track `1fr` o min-width implicito e
	   `auto`, entao o conteudo em `nowrap` da coluna do meio empurrava a grade
	   alem do container. Mesma armadilha do `.mfb-circle` na Fase 1. */
	grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) auto;
	gap: 0;
	align-items: start;
}
/* Os `margin-right: 15px` e `padding-right: 15px` espalhados pelo rodape do
 * arquivo entregue parecem ruido de editor visual, e nao sao: eles encurtam a
 * caixa util e mudam onde o texto quebra. Sem eles o paragrafo institucional
 * cabe em 4 linhas em vez de 5 e o da newsletter em 2 em vez de 3 — 28px de
 * diferenca na altura da pagina, que era a unica divergencia estrutural que
 * sobrou entre o tema e o preview no desktop. */
.mfb-footer__about { font-size: 13.5px; line-height: 1.85; margin: 0 15px 18px 0; color: var(--areia-tint); max-width: 260px; }

/* As quatro caixas de icone tem tamanhos DIFERENTES entre si no arquivo
 * entregue — 29x56, 40x53, 40x54 e 48x58. Nao ha padrao a inferir; e o que a
 * ferramenta gravou. Normalizar as quatro para 40x54 encurtava a coluna em 4px,
 * porque a linha e tao alta quanto o maior filho. */
.mfb-social { display: flex; gap: 4px; }
.mfb-social a { display: flex; align-items: center; justify-content: center; }
/* A caixa e propriedade da REDE, nao da posicao. Estas quatro regras eram
   `:nth-child(1..4)`, e isso deixou de funcionar em 06/09/2026, quando o
   rodape passou a esconder rede sem URL: com Facebook e LinkedIn vazios, o
   YouTube virava o 2o filho e herdava a caixa do Facebook — 53px em vez de
   58px. O rodape encolhia 2px, e como ele fecha a pagina, TODAS as rotas
   divergiam do canvas dali para baixo no toque. Duas linhas de CSS
   escondendo um deslocamento de pagina inteira. */
.mfb-social__item--instagram { width: 29px; height: 56px; }
.mfb-social__item--facebook  { width: 40px; height: 53px; }
.mfb-social__item--linkedin  { width: 40px; height: 54px; }
.mfb-social__item--youtube   { width: 48px; height: 58px; }

/* Colunas .85/.95/1.55 (canvas de 27/08): a terceira cresceu para caber
   "Política de Privacidade (LGPD)" e "Documentos e Transparência" em `nowrap`,
   que e o que as duas primeiras cederam. */
.mfb-footer__nav { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 32px; padding-top: 42px; display: grid; grid-template-columns: .85fr .95fr 1.55fr; gap: 0 20px; }
.mfb-footer__nav > div:nth-child(3) { padding-right: 44px; }
.mfb-footer__nav a { display: block; font-size: 14px; margin-bottom: 32px; color: rgba(255, 255, 255, .85); line-height: 1.4; padding-right: 15px; white-space: nowrap; }
.mfb-footer__news { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 32px; max-width: 220px; }
/* O atalho da newsletter no header rola ate aqui e, terminada a rolagem, o
   bloco pisca o fundo duas vezes, de leve (pedido do Daniel em 16/09/2026):
   quem clicou num icone la em cima precisa saber ONDE a pagina parou. O halo
   e `box-shadow` com spread, e nao padding — nada de layout muda, e o
   `border-radius` so aparece enquanto a cor existe. A classe quem poe e tira
   e o `initAnchors()` do mfb.js, depois do `scrollend`. */
.mfb-footer__news.is-destaque { animation: mfb-news-pulso 2.4s ease-in-out; border-radius: 6px; }
@keyframes mfb-news-pulso {
	0%, 100% { background-color: transparent; box-shadow: 0 0 0 14px transparent; }
	25%, 75% { background-color: rgba(225, 221, 25, .10); box-shadow: 0 0 0 14px rgba(225, 221, 25, .10); }
	50% { background-color: rgba(225, 221, 25, .03); box-shadow: 0 0 0 14px rgba(225, 221, 25, .03); }
}
@media (prefers-reduced-motion: reduce) {
	.mfb-footer__news.is-destaque { animation: none; background-color: rgba(225, 221, 25, .10); box-shadow: 0 0 0 14px rgba(225, 221, 25, .10); transition: background-color .4s, box-shadow .4s; }
}
.mfb-footer__news-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--amarelo); margin-bottom: 18px; padding-right: 15px; }
.mfb-footer__news p { font-size: 13px; margin: 24px 0 14px; color: var(--areia-tint); padding-right: 15px; }
/* `>` e nao descendente. A marcacao inerte do fallback tem os campos como
   filhos DIRETOS de `.mfb-footer__news`; os do formulario do Elementor vivem
   dois niveis abaixo, dentro do `.elementor-field-group`. Sem o `>`, estas
   regras alcancavam tambem os campos do Elementor e somavam `margin-bottom`
   por cima do que o grupo ja tem: cada campo virava 50px em vez de 40, a coluna
   crescia 20,5px e o rodape inteiro descia — em todas as rotas. */
.mfb-footer__news > input {
	width: 100%;
	padding: 11px 14px;
	padding-right: 15px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	margin-bottom: 10px;
	font-family: var(--font-body);
	height: 40px;
}
/* O segundo campo tem 14px de respiro, nao 10 — sao valores independentes no
   arquivo entregue. */
.mfb-footer__news > input + input { margin-bottom: 14px; }
/* Era um <div> no original, entao herdava line-height 1.5 do corpo. Como
   <button> herdaria `normal` e ficaria 5px mais baixo. */
.mfb-footer__news > button {
	display: inline-block;
	border: 1px solid var(--amarelo);
	color: var(--amarelo);
	background: transparent;
	padding: 9px 20px;
	padding-right: 15px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	text-align: center;
}
.mfb-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 22px 32px;
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 14px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .55);
	/* Devolvido. A entrega de 21/08/2026 tirou o wrap e a regua passou a sair
	   158px da tela a 375px de viewport — sem mudar a largura total da pagina,
	   entao o sintoma era so a regua ficar no scroll horizontal. */
	flex-wrap: wrap;
}
.mfb-footer__signature { display: flex; flex-direction: column; gap: 20px; }
.mfb-footer__signature > span { font-size: 11px; }
/* A assinatura e um link para o bureau-it.com. Parado, nada muda em relacao
   ao canvas (opacidade .65, texto a 60%); o destaque e so no hover/focus, para
   o portao do canvas-pair nao ver diferenca. */
.mfb-footer__by { display: flex; align-items: center; gap: 8px; opacity: .65; text-decoration: none; transition: opacity .2s ease; }
/* Texto como no modelo do playground de branding: 10px, fonte do sistema, em
   todo viewport. */
/* .8 e nao .6: com a opacidade .65 do link, .6 dava 3,67:1 sobre #101010 —
   abaixo dos 4,5:1 do WCAG AA para texto de 10px. Com .8 fica em ~5,1:1. */
.mfb-footer__by span { font-size: 10px; font-family: system-ui, -apple-system, sans-serif; color: rgba(255, 255, 255, .8); white-space: nowrap; transition: color .2s ease; }
.mfb-footer__by:hover, .mfb-footer__by:focus-visible { opacity: 1; }
.mfb-footer__by:hover span, .mfb-footer__by:focus-visible span { color: #fff; }

/* O logo do Bureau (SVG inline no footer.php). Cores do PNG anterior; o hover
   e o da Escola do Bairro — brilho, ligeiro aumento e o `_` piscando duas
   vezes — sem trocar cor. */
/* Caixa de 34x34 em todo viewport — decisao do Daniel em 16/09/2026: o tamanho
   e o da caixa do icone oficial, e o glifo ocupa ~41% dela. */
.mfb-bit-logo { height: 34px; width: 34px; display: block; overflow: visible; transition: transform .25s ease, filter .25s ease; }
.mfb-bit-logo__seta { fill: #1b1d1e; stroke: #f7f7f1; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.mfb-bit-logo__it, .mfb-bit-logo__underscore { fill: #a5de00; }
.mfb-footer__by:hover .mfb-bit-logo, .mfb-footer__by:focus-visible .mfb-bit-logo { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(165, 222, 0, .6)); }
/* A sequencia "CLI-CK" do playground de branding do Bureau
   (`_bit_/10_branding/CONTEXTO/playground-footer.html`): o `_` pisca por 0,6s,
   depois a seta afunda e volta em 0,3s, e dois tons curtos tocam durante o
   clique da seta. Quem encadeia e o `initAssinaturaBureau()` do mfb.js —
   as classes abaixo sao os dois quadros; o CSS sozinho nao faz a sequencia. */
.mfb-bit-logo__seta { transform-origin: center center; transform-box: fill-box; }
.mfb-bit-logo__underscore.is-blink { animation: mfb-bit-blink .6s ease-in-out; }
.mfb-bit-logo__seta.is-click { animation: mfb-bit-click .3s ease-out; }
@keyframes mfb-bit-blink {
	0%, 100% { opacity: 1; }
	25% { opacity: 0; }
	50% { opacity: 1; }
	75% { opacity: 0; }
}
@keyframes mfb-bit-click {
	0% { transform: scale(1) translateY(0); }
	40% { transform: scale(.85) translateY(4px); }
	70% { transform: scale(1.05) translateY(-2px); }
	100% { transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.mfb-bit-logo__underscore.is-blink, .mfb-bit-logo__seta.is-click { animation: none; }
}
.mfb-regua {
	background: #fff;
	border-radius: 4px;
	/* Medidas do canvas: caixa 408x78 com padding 10/21, o que da 366px de
	   largura interna. A imagem e dirigida pela LARGURA (ver o comentario do
	   <div> intermediario no footer.php), entao 366px produzem 75,89px de
	   altura — mais que os 58px do content box. Ela transborda de proposito, e
	   o `align-items: center` a centra na caixa, sobrando 1,05px em cima. Os
	   314x60 anteriores davam 282x58,5 e deixavam a regua 84px mais estreita e
	   17px mais baixa que a referencia. */
	padding: 10px 21px;
	display: flex;
	align-items: center;
	height: 78px;
	width: 408px;
	flex: none;
}
.mfb-regua__inner { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.mfb-regua img { height: 100%; width: auto; max-height: 78px; }

/* Aqui vivia o cursor de trompete: as regras `.mfb-cursor*`, o keyframe do
   estouro e o bloco `@media (hover: hover) and (pointer: fine)` que escondia o
   ponteiro do sistema com `cursor: none !important`, mais a excecao do
   Elementor. Saiu inteiro em 03/09/2026, a pedido do Daniel (86akawxrv) — o
   ponteiro do sistema voltou.

   Medido antes de remover, e e o que dizia que nao havia risco para o portao:
   o canvas de 27/08 NAO tem cursor nenhum. Ele declara `cursor: none` no body
   e nao poe elemento no lugar (conferido no DOM dele a 1440px: zero elementos
   `position: fixed` com z-index alto). O trompete era so do tema, entao tirar
   aproxima do canvas em vez de afastar.

   Toda a complicacao do `:not(.elementor)` morreu junto: ela existia so para
   devolver o ponteiro do sistema dentro dos formularios, onde a forma do
   cursor carrega informacao. Sem esconder o ponteiro, nao ha o que excetuar.

   As duas artes do trompete FICAM em `assets/img/`, sem referencia: elas
   tambem existem nos assets do canvas, e o `canvas-pair` casa asset de canvas
   com arquivo de tema pelo nome. Apagar as do tema mexe naquele mapeamento, e
   isso e decisao do pareamento — nao desta remocao. */

/* Acessibilidade: quem pediu menos movimento nao recebe equalizador nem Ken
   Burns. Ate 03/09/2026 esta lista comecava pelo cursor animado, que era o
   caso que o preview ja respeitava; com o trompete removido sobrou o resto das
   animacoes decorativas. */
@media (prefers-reduced-motion: reduce) {
	.mfb-logo img,
	.mfb-kenburns,
	.mfb-soundbar,
	.mfb-pilar__eq span,
	.mfb-participe-btn::before,
	.mfb-assoc__foto--onda span,
	.mfb-nav-wave span { animation: none !important; }
	html { scroll-behavior: auto; }
	.mfb-hero__track,
	.mfb-eventos__track,
	.mfb-novidades__track { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Breakpoints — miram CLASSE, nao string de style=.
 * ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	/* Faixa de tablet: so o que precisa encolher. Um `min-width: 0` geral aqui
	   achataria os cards do carrossel. */
	.mfb-footer-grid > * { min-width: 0; }
	.mfb-footer-grid { grid-template-columns: minmax(180px, 200px) minmax(0, 1fr) minmax(150px, 180px); gap: 20px; }
}

@media (max-width: 960px) {
	.mfb-sobre,
	.mfb-facaparte { height: auto; }
	.mfb-sobre-grid,
	.mfb-pilares-grid,
	.mfb-grid-servicos { grid-template-columns: 1fr; }
	.mfb-grid-servicos { max-width: 520px; grid-template-columns: repeat(2, 1fr); }
	.mfb-pilares-grid { justify-items: center; }
}

@media (max-width: 900px) {
	/* ---- Chrome mobile (canvas de 27/08) ----
	 *
	 * O header vira: logo compacto ancorado a esquerda, e a direita so
	 * newsletter, Instagram e hamburguer. O lockup largo, o selo da BM&A e o
	 * "Participe" saem — o Participe reaparece como item da tab bar.
	 *
	 * O logo sai do fluxo para a barra ficar em 56px independentemente do que
	 * houver a direita; as acoes vao para a direita com `flex-end`. */
	.mfb-header__bar {
		padding: 8px 12px;
		gap: 6px;
		flex-wrap: nowrap;
		position: relative;
		min-height: 56px;
		justify-content: flex-end;
	}
	.mfb-desktop-nav { display: none; }
	.mfb-bma-link { display: none; }
	/* So o do cabecalho: a gaveta tem uma copia dele (`--gaveta`) que precisa
	   continuar visivel. */
	.mfb-header__actions .mfb-participe-btn { display: none; }
	/* `--header`, e nao `.mfb-logo` solto: a regra tira o logo do fluxo para a
	   barra fechar em 56px, e alcancava tambem o logo do RODAPE. La ele
	   deixava de ocupar seus 30,19px + 16 de margem, e o bloco inteiro do
	   rodape subia 46,19px. */
	.mfb-logo--header { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); flex: none; }
	/* O `a:hover { translateY(-2px) }` global SUBSTITUI o `translateY(-50%)`
	   que centra o logo — e ele caia 13px ao passar o ponteiro (Daniel,
	   16/09/2026). O hover aqui repete o transform de centragem: o logo do
	   toque nao sobe 2px, mas tambem nao despenca. */
	.mfb-logo--header:hover { transform: translateY(-50%); }
	.mfb-logo .mfb-logo-bar,
	.mfb-logo .mfb-logo-word { display: none; }
	.mfb-logo--header .mfb-logo-compact { display: flex; }
	/* `margin-right` negativa: no canvas a caixa de 40px do menu ultrapassa em
	   8px o respiro de 12px do cabecalho, para o icone de 24px encostar na
	   borda. Sem ela a linha inteira de acoes — email, Instagram e menu —
	   nasce 8px a esquerda, em TODAS as rotas no toque. */
	.mfb-mobile-toggle { display: flex; position: static; width: 40px; height: 40px; flex: none; margin-right: -8px; }
	.mfb-header__actions { gap: 6px; flex: none; min-width: 0; }

	/* O header sobe ao rolar e a tab bar entra no lugar dele. */
	.mfb-header { transition: transform .28s ease; }
	body.mfb-scrolled .mfb-header { transform: translateY(-110%); }
	.mfb-tabbar { display: flex; }

	/* O rodape abre espaco para a tab bar nao cobrir o ultimo conteudo. */
	.mfb-footer { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
	.mfb-whatsapp-fab { bottom: calc(74px + env(safe-area-inset-bottom)); right: 14px; width: 48px; height: 48px; }

	/* ---- Hero ----
	 *
	 * Altura de janela menos a barra. `dvh` depois de `vh` para o navegador que
	 * nao conhece a unidade ficar com a primeira: em iOS o `vh` conta a barra de
	 * endereco que se recolhe, e o hero nascia alto demais.
	 *
	 * O scroll-snap faz o primeiro gesto levar direto a segunda dobra, em vez de
	 * parar no meio do hero. `proximity` e nao `mandatory`: com `mandatory` o
	 * resto da pagina tambem gruda e a rolagem fica presa. */
	html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
	.mfb-hero {
		aspect-ratio: auto;
		height: calc(100vh - 56px);
		height: calc(100dvh - 56px);
		min-height: 420px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		/* O `scroll-margin-top` NAO e respiro: e o que faz a posicao de encaixe
		   do hero ser 0 e nao 56.
		 *
		 * O header ocupa 56px no fluxo, entao o topo do hero fica em y=56. Com
		 * `align: start` puro o snap descansava em 57, e como o limiar de
		 * "rolou" e 40, a pagina nascia com o header escondido e nao havia
		 * gesto que o trouxesse de volta: rolar ate o topo era imediatamente
		 * desfeito pelo snap. Medido a 390px. */
		scroll-margin-top: 56px;
	}
	.mfb-hero + section { scroll-snap-align: start; scroll-snap-stop: always; }
	/* Aqui havia `.mfb-hero .mfb-carousel__arrow { display: none }`, que nao
	   casava com nada: as setas do hero sao `.mfb-arrow`, nao
	   `.mfb-carousel__arrow`. Ela dava a impressao de que o hero ja escondia
	   as setas no toque — nao escondia, e era por isso que elas cobriam o
	   texto na captura da Ana em 86ak98ucf. Quem faz isso de verdade agora e
	   `.mfb-hero .mfb-arrow`, no bloco de 900px. */
	.mfb-hero__title { font-size: 34px; line-height: 1.08; max-width: 250px; margin-left: auto; margin-right: auto; margin-bottom: 14px; }
	.mfb-hero__sub { font-size: 14.5px; padding-left: 18px; padding-right: 18px; margin-bottom: 22px; }
	.mfb-hero__ctas { flex-direction: column; align-items: center; gap: 10px; flex-wrap: nowrap; }
	.mfb-hero__ctas .mfb-btn { padding: 9px 20px; font-size: 12.5px; min-height: 38px; height: auto; min-width: 172px; justify-content: center; }

	.mfb-container { padding-left: 14px; padding-right: 14px; }
	.mfb-smoke-divider { height: 48px; }

	/* As setas laterais dos carrosseis somem: no toque quem navega e o dedo, e
	   as setas de 44px sobre um card de 44vw comem a foto.
	   As de EVENTOS saem daqui: elas agora somem em 900px, junto com a entrada
	   dos chevrons (regra propria, mais adiante) — este bloco e de 640 e deixava
	   a faixa 641-900 com seta lateral onde o canvas ja tem chevron.
	   Novidades continua aqui: o canvas tambem lhe da chevron abaixo de 900px,
	   mas eles ainda nao foram construidos, e antecipar o limite deixaria a
	   faixa 641-900 SEM controle nenhum. */
	.mfb-novidades .mfb-carousel__arrow { display: none; }

	/* ---- Numeros ----
	 *
	 * Seguem em tres colunas (e nao duas): sao seis numeros, e em duas colunas
	 * a grade vira tres linhas e empurra a dobra inteira para baixo do hero. */
	.mfb-stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; padding-left: 0; padding-right: 0; width: 100%; }
	.mfb-stat { padding: 0 3px; }
	.mfb-stat__num { font-size: 30px; line-height: 1.05; }
	.mfb-stat__label { font-size: 9.5px; margin-top: 6px; letter-spacing: .01em; }

	.mfb-circle { width: min(100%, 240px); margin-left: auto; margin-right: auto; }
	/* Aqui havia `.mfb-realizacao { gap: 20px }` com `__bma { height: 36px }` e
	   `__apex { height: 26px }`. Sairam em 03/09/2026, a pedido da Ana em
	   86ak98v5d ("na dobra de Numeros, aumente os logotipos"), e o pedido era
	   pareamento e nao desenho novo: o canvas de 27/08 usa a MESMA medida nos
	   dois tamanhos — BM&A 138x46, ApexBrasil 96x32, gap 36 —, medido no DOM
	   dele a 390 e a 1440px. O encolhimento para 36/26 era invencao so do tema,
	   sem comentario que a explicasse.
	   Nao ha risco de estouro: 138 + 36 + 96 = 270px dentro dos 366 que o
	   container tem a 390px de tela. Como a regra do desktop ja e a certa,
	   apagar as tres linhas basta — nao entra numero novo. */

	/* Parceiros: quatro por linha dentro de 340px, que e o que cabe a 360px de
	   tela com o padding do container. */
	.mfb-logo-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 340px; margin: 0 auto; }
	.mfb-logo-wall__item { width: calc((340px - 30px) / 4); height: calc((340px - 30px) / 4); flex: 0 0 calc((340px - 30px) / 4); padding: 8px; }


	/* 12px de respiro lateral, nao 32 — e a diferenca de 20px que aparecia como
	   `dx +20` em todos os nove links do rodape. */
	.mfb-footer-grid { grid-template-columns: 1fr; row-gap: 36px; padding-left: 12px; padding-right: 12px; }
	.mfb-footer-grid > div { border-left: none; padding-left: 0; }
	.mfb-footer__news { max-width: 100%; }
	/* No toque o rodape cresce a tipografia; no desktop ela e menor. */
	.mfb-footer__about { font-size: 14.5px; max-width: none; margin-right: 0; }
	.mfb-footer__news p { font-size: 14.5px; }
	.mfb-footer__signature > span { font-size: 13px; }

	.mfb-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
	.mfb-grid-servicos { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
	.mfb-hero__slide { padding: 56px 16px; }
	.mfb-facaparte__inner { padding: 0 16px; }
	.mfb-circle { width: min(100%, 210px); }
	.mfb-beneficios { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
	.mfb-beneficios .mfb-flip-box { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); min-height: 220px; }
	.mfb-beneficios .mfb-flip-inner { min-height: 220px; }
}

@media (max-width: 600px) {
	.mfb-footer__nav,
	.mfb-footer__news { border-left: none; padding-left: 0; }
	.mfb-footer__nav { grid-template-columns: 1fr 1fr; padding-top: 0; }
	.mfb-footer__nav > div:nth-child(3) { padding-right: 0; }
	/* O `nowrap` e do arquivo entregue e vale no desktop, onde a coluna tem
	   largura de sobra. Numa tela de 320px "Política de Privacidade (LGPD)" nao
	   cabe em linha nenhuma e empurrava a pagina 39px para fora. */
	.mfb-footer__nav a { white-space: normal; }
	/* 32px, como no canvas. Os 16px anteriores apareciam como `dx -16` nas duas
	   linhas do rodape inferior. */
	.mfb-footer__bottom { padding-left: 32px; padding-right: 32px; }
	/* A regua tinha flex:none com 314px fixos — a 375px de viewport ela ia ate
	   x=533. Aqui ela pode encolher.
	   As medidas do toque sao proprias: 300x83,56 com padding 14/16 (contra
	   408x78 e 10/21 do desktop), e ela vem ANTES da assinatura — no canvas a
	   regua aparece em y=2590 e o copyright em y=2704. */
	.mfb-regua {
		width: 100%;
		max-width: 300px;
		flex: 0 1 auto;
		height: auto;
		padding: 14px 16px;
		order: -1;
		/* 16px alem dos 14 de `gap` da coluna: no canvas a distancia entre a
		   regua e a assinatura e de 30px. */
		margin-bottom: 16px;
	}
	.mfb-regua img { max-height: none; }
	/* O logo `it_` mede 26px de altura no toque, nao 19,2. */
	/* 6px acima da linha de credito, alem dos 20 de gap da coluna. */
	.mfb-footer__by { margin-top: 6px; }
}

@media (max-width: 430px) {
	.mfb-hero__title { font-size: 27px; line-height: 1.12; }
	.mfb-section-title { font-size: 23px; }
	.mfb-container { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 400px) {
	.mfb-container { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 360px) {
	.mfb-stat__num { font-size: 25px; }
	.mfb-stat__label { font-size: 8.5px; }
	.mfb-logo-compact { gap: 1.5px; }
	.mfb-logo--header .mfb-logo-cbar:nth-of-type(1) { height: 8px; }
	.mfb-logo--header .mfb-logo-cbar:nth-of-type(2) { height: 16.2px; }
	.mfb-logo--header .mfb-logo-cbar:nth-of-type(3) { height: 10.6px; }
	.mfb-logo--header .mfb-logo-cbar:nth-of-type(4) { height: 23.8px; }
	.mfb-logo--header .mfb-logo-cbar:nth-of-type(5) { height: 10.6px; }
	.mfb-logo--header .mfb-logo-cbar:nth-of-type(6) { height: 16px; }
	.mfb-logo--header .mfb-logo-cbar:nth-of-type(7) { height: 8px; }
	.mfb-logo--header .mfb-logo-mark { height: 20.4px; margin-left: 2.4px; margin-top: 1.8px; }
	.mfb-hero__title { font-size: 24px; }
}

/* ===========================================================================
 * ROTAS INTERNAS (Fase 2)
 *
 * Tudo daqui para baixo e das telas /eventos/, /eventos/{id}/, /servicos/,
 * /seja-associado/ e /novidades/.
 * ======================================================================== */

/* Dobra de topo — mesma geometria do hero da home, sem carrossel. */
.mfb-page-hero {
	text-align: center;
	color: var(--branco);
	width: 100%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1536 / 696.32;
}
.mfb-page-hero__bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.mfb-page-hero__body {
	max-width: 820px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
/* Dois modificadores, e nao um, porque sao duas propriedades independentes.
   Medido nas quatro dobras do canvas: `/servicos/` e `/novidades/` sao linha,
   `margin: 0` no h1 e sem padding; `/eventos/` e `/seja-associado/` sao coluna
   COM `padding: 0 32px`; `/sobre/` e coluna SEM padding. A margem de 14px do
   titulo acompanha a COLUNA nas tres, entao e nela que ela mora. Amarrar tudo
   num modificador so ja custou duas regressoes. */
.mfb-page-hero__body--coluna { flex-direction: column; }
.mfb-page-hero__body--respiro { padding: 0 32px; }
.mfb-page-hero__title {
	font-family: var(--font-display);
	font-size: clamp(28px, 4.2vw, 48px);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}
.mfb-page-hero__body--coluna .mfb-page-hero__title { margin-bottom: 14px; }
/* Fileira de botoes dentro da dobra — hoje so `/sobre/` tem. */
.mfb-page-hero__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.mfb-page-hero__sub {
	font-size: 16px;
	color: rgba(255, 255, 255, .85);
	margin: 0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
	max-width: 640px;
}

/* /servicos/ — a mesma secao da home, so que de altura fixa e centrada. */

/* /eventos/ — grade, e nao carrossel. */
.mfb-eventos-lista { padding: 20px 0 90px; background: var(--bg-page); }
.mfb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mfb-grid-3 > * { min-width: 0; }
.mfb-card-evento-lista {
	background: var(--bg-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	color: var(--text-body);
	display: block;
}
/* Aqui havia `.mfb-card-evento-lista:hover { color: var(--text-body) }`, que
   existia so para segurar o titulo contra o amarelo que o `a:hover` generico
   pintava. Sem o vazamento a regra virou letra morta, e o cartao 86ak98dj2
   ("tirar grifado e manter apenas o movimento do box") fica atendido pelo
   `translateY(-2px)` global: o card E a propria ancora, entao quem sobe e a
   caixa inteira. */
/* Altura fixa de 160px, e nao 16:9: e a caixa da GRADE, e aqui nao ha faixa
   preta com texto por cima cuja altura precise de proporcao. */
.mfb-card-evento-lista__media { position: relative; height: 160px; overflow: hidden; }
.mfb-card-evento-lista__media img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	max-width: none;
	transform: translate(-50%, -50%);
	display: block;
}
/* Azul, e nao preta como na home. */
.mfb-card-evento-lista__date {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--azul-shade);
	color: #fff;
	border-radius: 4px;
	padding: 6px 9px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1.1;
	pointer-events: none;
}
.mfb-card-evento-lista__date span { font-size: 9px; font-weight: 600; }
.mfb-card-evento-lista__body { padding: 20px; }
.mfb-card-evento-lista__body h2 { font-family: var(--font-display); font-size: 16px; margin: 0 0 8px; font-weight: 700; }
.mfb-card-evento-lista__loc { font-size: 12.5px; color: var(--text-muted); }

/* /eventos/{id}/ */
.mfb-evento-volta { padding: 40px 0 0; background: var(--bg-page); }
.mfb-voltar { font-size: 13.5px; font-weight: 700; color: var(--azul-tint); }
.mfb-evento { padding: 24px 0 70px; background: var(--bg-page); }
.mfb-evento-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: start; }
.mfb-evento-grid > * { min-width: 0; }
.mfb-evento__media { position: relative; height: 340px; margin-bottom: 28px; border-radius: 4px; overflow: hidden; }
.mfb-evento__media img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	max-width: none;
	transform: translate(-50%, -50%);
	display: block;
}
/* Sobre a arte, no canto superior direito — o mesmo lugar do selo dos cards
   (`.mfb-card-evento__badge`), um pouco maior porque a caixa e maior. As artes
   da BM&A poem o preco a esquerda e a data a direita, no meio; os cantos de
   cima ficam livres. */
.mfb-evento__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 6px 12px;
	border-radius: 4px;
	pointer-events: none;
}
.mfb-evento__title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -.02em; }
.mfb-evento__meta { font-size: 15px; color: var(--text-muted); margin-bottom: 24px; }
.mfb-evento__desc { font-size: 16px; line-height: 1.65; color: var(--text-muted); }
.mfb-evento__info {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 28px;
}
.mfb-evento__info h2 { font-family: var(--font-display); font-size: 16px; margin: 0 0 18px; font-weight: 700; }
.mfb-evento__campos { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.mfb-evento__rotulo { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.mfb-evento__sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.mfb-evento__regua { height: 1px; background: var(--border-subtle); margin: 20px 0; }
/* Nao existe botao de largura cheia, nem botao branco. Pela terceira vez o
 * padrao e o mesmo: TODO `style` posto num `<x-import>` e descartado pelo
 * componente do design system, que monta o proprio objeto de estilo.
 *
 * Os cinco "Contratar" pedem `background:#fff;border-color:#fff;color:#101010`
 * e renderizam amarelos, no `variant="highlight"`. O "Quero Participar deste
 * evento" pede `width:100%` e renderiza com 257,8px de largura de conteudo,
 * contra os 318,6 do container. Medido nos dois.
 *
 * Some junto o `justify-self: stretch` que um <a> ganharia como item de grid: o
 * <button> do preview nao estica porque o Chromium trata `width:auto` de
 * controle de formulario como largura intrinseca, e nao como esticavel. */
.mfb-plano .mfb-btn { justify-self: start; }

/* /novidades/ */
.mfb-novidades-lista { padding: 30px 0 90px; background: var(--bg-page); }
.mfb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mfb-grid-4 > * { min-width: 0; }
/* Na lista o card e um pouco maior que no carrossel da home. */
.mfb-card-novidade--lista { cursor: default; margin-right: 0; }
.mfb-card-novidade--lista .mfb-card-novidade__body { padding: 14px; }
.mfb-card-novidade--lista .mfb-card-novidade__meta { margin-bottom: 8px; }
.mfb-card-novidade--lista .mfb-card-novidade__date { font-size: 10.5px; }
.mfb-card-novidade--lista .mfb-card-novidade__title {
	font-size: 13.5px;
	line-height: 1.35;
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
}

/* /seja-associado/ */
/* Terceira altura travada do desenho, junto com os 615px da dobra institucional
   e os 400px da chamada final. Solta abaixo de 960px pelo mesmo motivo das
   outras: com a grade de planos empilhada, a secao invadiria a seguinte. */
.mfb-seja { padding: 50px 0 90px; background: var(--bg-page); height: 2650px; }
.mfb-seja__intro { text-align: center; margin-bottom: 36px; }
/* Os 10px de respiro sao so da SEGUNDA dobra de texto, a que ancora a tabela —
   na primeira nao existem, e coloca-los ali empurrava a pagina 10px. */
.mfb-seja__intro--tabela { padding-top: 10px; }
.mfb-seja__intro h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 32px); margin: 0 0 10px; }
.mfb-seja__intro p { font-size: 15px; color: var(--text-muted); max-width: 640px; margin: 0 auto; }
.mfb-planos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 70px; align-items: stretch; }
.mfb-planos > * { min-width: 0; }
/* `grid-template-rows: auto auto 1fr auto auto` alinha preco, botao e link na
   MESMA linha nos cinco cartoes, mesmo com nomes e tags de alturas diferentes.
   Trocar por flex quebra esse alinhamento. */
.mfb-plano {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 26px 20px;
	display: grid;
	grid-template-rows: auto auto 1fr auto auto;
	gap: 14px;
	height: 100%;
}
.mfb-plano h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; }
.mfb-plano__tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--text-muted);
	background: var(--bg-page);
	border-radius: 4px;
	padding: 3px 9px;
}
.mfb-plano__preco-bloco { align-self: end; }
.mfb-plano__preco { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.15; }
.mfb-plano__parcela { font-size: 11px; color: var(--text-faint); margin-top: 2px; min-height: 15px; }
.mfb-plano__link { display: flex; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.mfb-plano__link span { font-size: 12.5px; font-weight: 600; }
.mfb-plano__link svg { flex: none; }

.mfb-tabela-scroll { overflow-x: auto; margin-bottom: 80px; }
/* `clip`, e nao `hidden`, para arredondar os cantos: `hidden` faz a caixa
 * virar o "scroller" do `sticky` do cabecalho — e como ela nao rola, o
 * cabecalho nunca gruda. `clip` recorta sem criar contexto de rolagem. */
.mfb-tabela { min-width: 980px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: clip; }
.mfb-tabela__head,
.mfb-tabela__linha,
.mfb-tabela__pe { display: grid; grid-template-columns: 2.2fr repeat(5, 1fr); }
/* O cabecalho gruda logo abaixo do header do site enquanto a tabela passa —
 * 27 linhas e dificil lembrar qual coluna e qual sem ele. `top` e a altura
 * do `.mfb-header` (medida: 81px em 1280px); o `sticky` so vale enquanto o pai nao rola
 * de lado, ver a media query abaixo. */
.mfb-tabela__head { position: sticky; top: 81px; z-index: 2; background: var(--bg-page); border-bottom: 1px solid var(--border-subtle); }
.admin-bar .mfb-tabela__head { top: 113px; }
.mfb-tabela__titulo { padding: 20px 22px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
/* Texto na cor do plano com divisoria fina — e cabecalho, nao botao. Ate
 * 16/09/2026 era uma caixa preenchida, e parecia clicavel sem ser. */
.mfb-tabela__col { display: flex; align-items: center; justify-content: center; padding: 20px 10px; border-left: 1px solid var(--border-subtle); text-align: center; font-weight: 700; font-size: 14px; }
.mfb-tabela__pe { border-top: 1px solid var(--border-subtle); background: var(--bg-surface); }
.mfb-tabela__pe .mfb-tabela__celula { padding: 20px 8px; }

/* Acima de 1044px (980 da tabela + 64 do container) ela cabe sem rolar de
 * lado, e o `overflow-x: auto` — que tambem faz o eixo Y virar `auto` — sai
 * para o `sticky` funcionar contra a pagina. Entre 960 e 1044 a tabela ainda
 * rola de lado e o cabecalho sobe junto: rolagem horizontal vale mais que o
 * cabecalho fixo nessa faixa curta. */
@media (min-width: 1044px) {
	.mfb-tabela-scroll { overflow: visible; }
}
.mfb-tabela__cat {
	padding: 10px 22px;
	background: rgba(5, 73, 0, .08);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--amarelo-shade);
}
.mfb-tabela__linha { border-top: 1px solid var(--border-subtle); background: var(--bg-surface); align-items: center; }
.mfb-tabela__rotulo { padding: 14px 22px; font-size: 13px; color: var(--text-body); line-height: 1.4; }
.mfb-tabela__celula { padding: 10px 8px; text-align: center; line-height: 1.25; }
.mfb-tabela__sub { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }

@media (max-width: 960px) {
	.mfb-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.mfb-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.mfb-evento-grid { grid-template-columns: 1fr; }
	.mfb-planos { grid-template-columns: repeat(2, 1fr); }
	/* A altura fixa de /seja-associado/ some junto com as outras do desenho. */
	.mfb-seja { height: auto; }
	/* 56px no toque, contra os 96 do desktop. Sao 40px em cima e 40 embaixo, e
	   os de cima empurravam a secao inteira — o carrossel, o rotulo e tudo
	   abaixo dele saiam 40px fora de lugar. */
	.mfb-servicos { padding: 56px 0; }
}

@media (max-width: 640px) {
	.mfb-grid-3,
	.mfb-grid-4,
	.mfb-planos { grid-template-columns: 1fr; }
	/* No toque a dobra de topo ocupa a tela abaixo do cabecalho, e nao uma
	   faixa. Medido no canvas: `height: calc(100vh - 56px)` com piso de 420px,
	   que a 390x844 da 788px — contra os 212,78 que a proporcao do desktop
	   produzia aqui. Era o desvio que empurrava toda a pagina ~530px e
	   dominava `/servicos/`, `/eventos/`, `/novidades/` e `/seja-associado/` no
	   celular de uma vez so. O padding do corpo e zero: o titulo se centra pelo
	   proprio flex. */
	.mfb-page-hero { aspect-ratio: auto; height: calc(100vh - 56px); min-height: 420px; }
	.mfb-page-hero__body { padding: 0; }
	/* O arranjo em coluna MANTEM os 32px laterais no toque. O `padding: 0` da
	   linha acima e do arranjo em linha (`/servicos/`, `/novidades/`); aplicado
	   aos dois, ele dava 390px de largura util onde a referencia tem 326, e o
	   titulo de `/seja-associado/` passava a caber em 2 linhas em vez de 4. */
	.mfb-page-hero__body--respiro { padding: 0 32px; }
	/* 1,12 no toque, contra 1,05 do desktop: as tres linhas do titulo abriam
	   1,89px a cada quebra e o desvio ia se acumulando linha a linha. */
	.mfb-page-hero__title { font-size: 27px; line-height: 1.12; }
	/* Mesma regra generica do canvas que ja encolheu o <h1>: no toque o <p>
	   cai para 14.5px. Sem isso a linha de apoio de /contato/ quebra num
	   ponto diferente do da referencia. */
	.mfb-page-hero__sub { font-size: 14.5px; }
	.mfb-evento__media { height: 220px; }
}

/* ===========================================================================
 * PAGINAS DE PROSA (Fase 3)
 *
 * Estilo de base para o que o cliente escrever no Elementor ou no editor de
 * blocos. Deliberadamente magro: se o tema impuser demais aqui, o cliente muda
 * no builder e nao entende por que nao surte efeito.
 * ======================================================================== */
.mfb-prosa { padding: 64px 0 96px; background: var(--bg-page); }
/* O `> *` alcanca os blocos do editor, que nascem como filhos diretos. As
   secoes do Elementor tem largura propria e ficam de fora do clamp, que e o que
   permite fundo de borda a borda. */
.mfb-prosa > *:not(.elementor):not(.e-con):not(section) {
	/* A largura e um token para que uma pagina possa estreitar o corpo sem
	   repetir este seletor inteiro. O fallback mantem as tres paginas de prosa
	   exatamente como estavam; hoje so `/transparencia/` define o token. */
	max-width: var(--prosa-largura, 1180px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
}
.mfb-prosa h1 { font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 48px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 24px; }
.mfb-prosa h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 32px); margin: 48px 0 16px; letter-spacing: -.02em; }
.mfb-prosa h3 { font-family: var(--font-display); font-size: 19px; margin: 32px 0 12px; }
.mfb-prosa p  { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0 0 16px; }
.mfb-prosa ul, .mfb-prosa ol { margin: 0 0 20px; padding-left: 22px; }
.mfb-prosa li { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin-bottom: 8px; }
.mfb-prosa strong { color: var(--text-body); }
.mfb-prosa a { color: var(--link); text-decoration: underline; }
.mfb-prosa table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 14px; }
.mfb-prosa th, .mfb-prosa td { border: 1px solid var(--border-subtle); padding: 12px 14px; text-align: left; }
.mfb-prosa th { background: var(--bg-surface); font-family: var(--font-display); font-weight: 700; }
.mfb-prosa figure { margin: 0 0 28px; }

@media (max-width: 640px) {
	.mfb-prosa { padding: 40px 0 64px; }
	.mfb-prosa > *:not(.elementor):not(.e-con):not(section) { padding-left: 16px; padding-right: 16px; }
	/* Tabela de prosa rola em vez de espremer. */
	.mfb-prosa table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===========================================================================
 * FORMULARIOS DO ELEMENTOR (Fase 3, concluida)
 *
 * O widget de formulario traz estrutura e espacamento proprios: rotulo acima de
 * cada campo, gap entre grupos, botao com o tamanho do tema do Elementor. O
 * desenho do MFB nao tem rotulo nenhum — ele usa placeholder — e o rodape tem
 * uma coluna de 220px onde o formulario precisa caber em 144px de altura.
 *
 * Vestir o widget e mais barato que reconstruir o rodape, e mantem o cliente
 * editando o formulario no builder.
 * ======================================================================== */

/* O rotulo some no rodape, mas continua no DOM para leitor de tela. */
.mfb-footer__news .elementor-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* ---------------------------------------------------------------------------
 * Por que `!important` em bloco, aqui, e so aqui.
 *
 * O CSS que o Elementor GERA para este template (uploads/elementor/css/
 * post-60.css) traz seletores como
 *   `.elementor-60 .elementor-element.elementor-element-mfbnform
 *    .elementor-field-group .elementor-field:not(.elementor-select-wrapper)`
 * que pesam (0,5,0). Nada que comece por `.mfb-footer__news` alcanca isso — e
 * subir a especificidade no bracao viraria uma corrida que o proximo save do
 * widget vence de novo, porque aquele arquivo e reescrito a cada save.
 * `!important` nao disputa especificidade: encerra a disputa.
 *
 * Medido em 28/08/2026 contra o canvas: sem isto o campo saia branco com texto
 * BRANCO (invisivel ao digitar), o botao laranja e esticado, e a coluna inteira
 * ficava 16,5px mais alta — que empurrava o rodape inteiro e aparecia como
 * desvio em TODAS as rotas, nao so aqui.
 *
 * A saida definitiva e nao ter estilo salvo no widget (ver o comentario do
 * `mfb_newsletter_form`); ate la, e este bloco que segura o desenho.
 * ------------------------------------------------------------------------- */
.mfb-footer__news .elementor-form-fields-wrapper {
	row-gap: 0;
	/* O post-60.css poe `margin-left/right: calc(-10px/2)` no wrapper e
	   `padding: 0 calc(10px/2)` no grupo. O padding o tema ja zerava, a margem
	   negativa nao — e era ela que fazia o campo medir 197px em vez de 187 e
	   comecar 5px a esquerda. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}
.mfb-footer__news .elementor-field-group { margin-bottom: 10px !important; padding: 0 !important; }
/* O segundo campo tem 14px de respiro, nao 10 — como no arquivo entregue. */
.mfb-footer__news .elementor-field-type-email.elementor-field-group { margin-bottom: 14px !important; }
.mfb-footer__news .elementor-field-group:last-of-type { margin-bottom: 0 !important; }
.mfb-footer__news .elementor-field-textual {
	width: 100% !important;
	height: 40px !important;
	padding: 11px 14px !important;
	padding-right: 15px !important;
	border-radius: 4px !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	background: rgba(255, 255, 255, .06) !important;
	background-color: rgba(255, 255, 255, .06) !important;
	color: #fff !important;
	font-family: var(--font-body) !important;
	/* 13,3333px e o tamanho que o UA da aos controles de formulario. O canvas
	   troca a familia do campo e NAO mexe no tamanho, entao herda esse valor —
	   e e ele que dimensiona o placeholder. Fixar 13px deixava o texto do
	   placeholder menor que o da referencia. */
	font-size: 13.3333px !important;
	line-height: 1.5 !important;
}
/* `--text-faint` e rgba(16,16,16,.5): nasceu para fundo claro e some no rodape
   escuro. O canvas mostra o placeholder a 50% de branco, com opacidade cheia —
   o `opacity: .6` que vinha do Elementor escurecia o resultado por cima. */
.mfb-footer__news .elementor-field-textual::placeholder {
	color: rgba(255, 255, 255, .5) !important;
	opacity: 1 !important;
}
.mfb-footer__news .elementor-button {
	display: inline-block !important;
	/* `button_width: 100` nos ajustes do widget vira `flex-basis: 100%` pela
	   classe `elementor-button-align-stretch`. So `width: auto` nao desfaz. */
	width: auto !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	border: 1px solid var(--amarelo) !important;
	color: var(--amarelo) !important;
	background: transparent !important;
	background-color: transparent !important;
	/* Assimetrico de proposito: 20px a esquerda, 15px a direita. E o que o
	   canvas tem, e sao os 5px que faziam o botao medir 84px em vez de 79. */
	padding: 9px 15px 9px 20px !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	line-height: 1.5 !important;
	font-family: var(--font-body) !important;
	/* O Elementor poe `min-height: 40px` no botao. Com border-box, os 9+9 de
	   padding, 1+1 de borda e os 19,5 de line-height dao 39,5 — e era o
	   min-height que forcava 40. Meio pixel, mas ele empurrava a coluna e, com
	   ela, o rodape inteiro: o `dy +0,5` de tudo abaixo saia daqui. */
	min-height: 0 !important;
	cursor: pointer;
}
/* Aqui havia `.mfb-footer__news .elementor-button:hover { background: amarelo;
   color: preto }`. Saiu em 02/09/2026: o formulario e um template do Elementor
   e nao existe no canvas, entao nao ha referencia que peca o preenchimento —
   ele era invencao do preview. Como <button>, ele fica com a subida de 2px da
   regra global, que e o gesto de hover do site. */
/* Nao ha regra de desktop para o contentor do botao, e a ausencia e deliberada.
   Havia uma mirando `.elementor-field-type-submit`, classe que o Elementor NAO
   poe aqui — ele marca `.elementor-field-group.elementor-column`. A regra era
   morta, e o desktop estava em 0,000% justamente por isso: corrigir o seletor
   sem remover a regra levou a rota de volta a 0,735%. No toque, onde a linha e
   horizontal, o contentor precisa de tratamento — esse fica no media query. */

/* Contato: a pagina e do Elementor, mas os campos herdam a mesma pele. */
.mfb-prosa .elementor-field-textual {
	width: 100%;
	padding: 12px 14px;
	border-radius: 4px;
	border: 1px solid var(--border-subtle);
	background: var(--bg-surface);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: 15px;
}
.mfb-prosa .elementor-field-label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.mfb-prosa .elementor-button {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	border: none;
	background: var(--amarelo);
	color: var(--preto);
	cursor: pointer;
	line-height: normal;
}
.mfb-prosa .elementor-message { font-size: 14px; margin-top: 12px; }

/* O container do Elementor traz `padding: 10px 0` e `row-gap: 20px` proprios, e
   o grupo do botao traz padding vertical. Na coluna de 220px do rodape isso
   somava 36px e empurrava o rodape inteiro 91px para baixo. */
.mfb-footer__news .elementor-element.e-con,
.mfb-footer__news .elementor-element > .e-con-inner { padding: 0 !important; row-gap: 0 !important; }
.mfb-footer__news .elementor-field-type-submit { padding: 0 !important; margin: 0 !important; }
.mfb-footer__news .elementor-form-fields-wrapper { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------------------
 * Newsletter no toque. Este bloco vem DEPOIS do de desktop de proposito: os
 * dois usam `!important`, entao quem decide e a ordem no arquivo. Escrito antes
 * (dentro do media query la de cima, na linha ~1375) ele era simplesmente
 * ignorado, e os campos continuavam empilhados a 366px como no desktop.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* Os dois campos LADO A LADO e o botao na linha de baixo. Medido no canvas:
	   linha de 366px com `gap: 10px`, campos de 178px, `margin-bottom: 14px`, e
	   o botao com `padding: 6px 24px` — 33,5px de altura contra os 39,5 do
	   desktop. Sem isto a coluna media 211,25 onde a referencia tem 165,25. */
	.mfb-footer__news .elementor-form-fields-wrapper {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		column-gap: 10px !important;
		row-gap: 0 !important;
	}
	.mfb-footer__news .elementor-field-type-text.elementor-field-group,
	.mfb-footer__news .elementor-field-type-email.elementor-field-group {
		flex: 1 1 0 !important;
		margin-bottom: 14px !important;
	}
	/* `elementor-column` NAO distingue o contentor do botao: os campos de texto
	   tambem o carregam. O que so o do botao nao tem e uma classe
	   `elementor-field-type-*` — mirar por `.elementor-column` fazia os dois
	   campos herdarem `flex-basis: 100%` e continuarem empilhados a 366px, que
	   e exatamente o que este bloco existe para desfazer. */
	.mfb-footer__news .elementor-field-group:not([class*="elementor-field-type-"]) {
		flex: 0 0 100% !important;
		margin-bottom: 0 !important;
		justify-content: flex-start !important;
	}
	.mfb-footer__news .elementor-button { padding: 6px 24px !important; }
}

/* O wrapper do honeypot fica visivel: o Elementor poe `display:none` no INPUT,
   mas a <div> que o embrulha continua ocupando espaco. No rodape isso empurrava
   a coluna; numa pagina, deixa um buraco no meio do formulario que le como
   campo faltando.
   O seletor e estrutural de proposito: o wrapper do honeypot e o unico que sai
   com `elementor-field-type-*` E SEM `elementor-field-group`. Mirar o `name` do
   campo funcionaria hoje e quebraria no dia em que alguem renomeasse. */
.elementor-form [class*="elementor-field-type-"]:not(.elementor-field-group) { display: none !important; }
/* O gap do grupo tambem some no rodape — os 10px de respiro ja estao na margem
   de cada campo. */
.mfb-footer__news .elementor-field-group { row-gap: 0 !important; gap: 0 !important; }

/* DIFERENCA ACEITA: o rodape fica 17px mais alto que o arquivo entregue.
 *
 * Cada `.elementor-field-group` sai com 50px para um input de 40 — os 10px vem
 * da estrutura flex do proprio widget, que nao cede a padding, gap nem
 * `align-items`. Forcar `height` resolveria hoje e quebraria no dia em que o
 * cliente acrescentasse um campo, que e justamente o que o formulario editavel
 * existe para permitir.
 *
 * A troca: 17px de altura por um formulario que envia. Os tres campos que
 * estavam ali antes eram marcacao inerte — bonitos e sem backend, como o README
 * do preview registrava desde a primeira publicacao. */

/* ===========================================================================
 * SOBRE — bloco institucional (BM&A, ApexBrasil, Equipe)
 *
 * Entrou na entrega de 25/08 e ganhou a galeria de equipe no canvas de 27/08.
 * Vive num shortcode do tema porque a galeria e componente com estado; ver
 * inc/sobre-institucional.php.
 * ======================================================================== */
.mfb-inst { padding: 96px 0; color: var(--branco); }
.mfb-inst--bma    { background: #1c1c1c; }
.mfb-inst--apex   { background: var(--preto); }
.mfb-inst--equipe { background: #1c1c1c; }
.mfb-inst p {
	font-size: 16.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .75);
	margin: 0 0 20px;
	max-width: 900px;
}
/* `.mfb-inst p` vence `.mfb-inst__ultimo` por especificidade (classe+elemento
   contra classe), entao o seletor precisa dos dois. Sem isto sobravam 20px
   no fim de cada secao — a margem do ultimo paragrafo. */
.mfb-inst p.mfb-inst__ultimo { margin-bottom: 0; }
.mfb-inst__marca { display: inline-block; }
.mfb-inst__marca img,
.mfb-inst__marca-img { width: auto; object-fit: contain; margin-bottom: 32px; }
.mfb-inst__marca img { height: 70px; }
.mfb-inst__marca-img { height: 74px; }

/* O bloco vive DENTRO da pagina de prosa, entao `.mfb-prosa h2` e
   `.mfb-prosa p` (classe+elemento) alcancam estes elementos e vencem
   `.mfb-section-title` (so classe). Por isso a tipografia aqui e explicita:
   sem ela o titulo caia de 40px para os 32px da prosa e o subtitulo pegava
   line-height 1.7 em vez de 1.5. */
.mfb-equipe__head { text-align: center; margin-bottom: 56px; }
.mfb-equipe__head .mfb-section-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.5; margin: 0 0 10px; }
.mfb-equipe__head p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .6); margin: 0; max-width: none; }

/* ---- Galeria (desktop) ----
 *
 * Cinco paineis lado a lado; o ativo abre para 380px e revela a bio de 300px,
 * os demais ficam em 92px e em cinza. A largura e que anima — nao `flex`, para
 * a transicao ter valor de partida e de chegada explicitos. */
.mfb-equipe-galeria { display: flex; gap: 14px; height: 440px; align-items: stretch; }
.mfb-equipe-galeria__item { display: flex; align-items: stretch; height: 100%; cursor: pointer; }
.mfb-equipe-galeria__foto {
	position: relative;
	width: 92px;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	transition: width .4s cubic-bezier(.22, 1, .36, 1);
	flex: none;
	background: #fff;
}
.mfb-equipe-galeria__item.is-active .mfb-equipe-galeria__foto { width: 380px; }
.mfb-equipe-galeria__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter .4s ease;
	display: block;
}
.mfb-equipe-galeria__item.is-active .mfb-equipe-galeria__foto img { filter: none; }
.mfb-equipe-galeria__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 14px 10px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .8));
	color: #fff;
}
.mfb-equipe-galeria__item.is-active .mfb-equipe-galeria__overlay { display: none; }
.mfb-equipe-galeria__nome { font-size: 11px; font-weight: 700; line-height: 1.25; }
.mfb-equipe-galeria__cargo { font-size: 9.5px; color: var(--amarelo); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.mfb-equipe-galeria__bio {
	width: 300px;
	flex: none;
	padding-left: 28px;
	display: none;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	overflow-y: auto;
}
.mfb-equipe-galeria__item.is-active .mfb-equipe-galeria__bio { display: flex; }
.mfb-equipe-galeria__bio h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 4px; color: #fff; }
.mfb-equipe-galeria__papel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 14px; }
.mfb-equipe-galeria__bio p { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0; max-width: none; }

/* ---- Sanfona (toque) ---- */
.mfb-equipe-sanfona { display: none; flex-direction: column; }
.mfb-equipe-sanfona__item { border-bottom: 1px solid rgba(255, 255, 255, .14); padding: 16px 0; }
/* `line-height` explicito: no canvas este cabecalho e um <div> e herda o 1.5
   do corpo; como <button> ele cai no `normal` do UA e o par nome+cargo encolhe
   de 40px para 32px. */
.mfb-equipe-sanfona__cab {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	text-align: left;
	line-height: 1.5;
}
.mfb-equipe-sanfona__cab:hover { transform: none; }
.mfb-equipe-sanfona__foto { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; }
.mfb-equipe-sanfona__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.mfb-equipe-sanfona__id { flex: 1; min-width: 0; }
.mfb-equipe-sanfona__nome { display: block; font-size: 14.5px; font-weight: 700; color: #fff; }
.mfb-equipe-sanfona__cargo { display: block; font-size: 10.5px; color: var(--amarelo); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.mfb-equipe-sanfona__cab svg { flex: none; stroke: rgba(255, 255, 255, .6); transition: transform .2s ease; }
.mfb-equipe-sanfona__item.is-active .mfb-equipe-sanfona__cab svg { transform: rotate(180deg); }
.mfb-equipe-sanfona__bio { display: none; font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, .7); margin: 12px 0 0; padding-left: 70px; max-width: none; }
.mfb-equipe-sanfona__item.is-active .mfb-equipe-sanfona__bio { display: block; }
/* Mesma disputa de `.mfb-inst p.mfb-inst__ultimo`: `.mfb-inst p` (0,1,1) vence
   `.mfb-equipe-sanfona__bio` (0,1,0) e impunha 1.7 de entrelinha e 20px de
   margem embaixo. O canvas usa 1.65, 12px em cima e nada embaixo. */
.mfb-inst p.mfb-equipe-sanfona__bio { line-height: 1.65; margin: 12px 0 0; }

/* ---- Creditos ----
 *
 * `flex` centrado no desktop (canvas de 27/08), `grid` de quatro so era o
 * arranjo de 25/08. */
.mfb-equipe-creditos {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	display: flex;
	justify-content: center;
	gap: 64px;
}
.mfb-equipe-creditos__rotulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: 7px; }
.mfb-equipe-creditos__valor { font-size: 14px; color: rgba(255, 255, 255, .8); line-height: 1.5; }
.mfb-equipe-creditos__valor--logo { display: flex; align-items: center; gap: 10px; }
.mfb-equipe-creditos__valor--logo img { height: 34px; width: auto; filter: invert(1); }

/* ---------------------------------------------------------------------------
 * Servicos no toque — carrossel horizontal (canvas de 27/08)
 *
 * Escondido no desktop; o `display:flex` vem do bloco de 900px. Os icones
 * correm com snap no CENTRO, e o `padding` lateral de `calc(50% - 104px)`
 * existe para o primeiro e o ultimo conseguirem chegar ao centro — sem ele o
 * primeiro item so encosta na borda esquerda e nunca fica ativo.
 * ------------------------------------------------------------------------ */
.mfb-serv-carrossel { display: none; flex-direction: column; }
.mfb-serv-carrossel__track {
	display: flex;
	align-items: center;
	gap: 0;
	overflow-x: auto;
	padding: 8px 0 6px;
	flex-wrap: nowrap;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-left: calc(50% - 104px);
	padding-right: calc(50% - 104px);
}
.mfb-serv-carrossel__track::-webkit-scrollbar { display: none; height: 0; }
.mfb-serv-card {
	flex: 0 0 208px;
	scroll-snap-align: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	transition: opacity .25s ease, transform .25s ease;
	opacity: .6;
	background: none;
	border: 0;
	padding: 0;
	color: var(--mfb-serv-color);
}
.mfb-serv-card:hover { transform: none; }
.mfb-serv-card.is-active { opacity: 1; }
/* Os inativos encostam no centro: 52px na direcao do ativo. Sem isso os
   vizinhos ficam distantes e a faixa parece furada. */
.mfb-serv-card[data-mfb-side="antes"]  .mfb-serv-card__fig { transform: translateX(52px); }
.mfb-serv-card[data-mfb-side="depois"] .mfb-serv-card__fig { transform: translateX(-52px); }
.mfb-serv-card__fig { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 11px; transition: transform .25s ease; }
.mfb-serv-card__fig svg { width: 106px; height: 106px; transition: width .25s ease, height .25s ease; }
.mfb-serv-card.is-active .mfb-serv-card__fig svg { width: 176px; height: 176px; }
.mfb-serv-card__rule { width: 1px; height: 61px; background: var(--mfb-serv-color); flex: none; display: none; }
.mfb-serv-card.is-active .mfb-serv-card__rule { display: block; }
.mfb-serv-card__label {
	display: none;
	padding: 8px 16px;
	border-radius: 6px;
	background: var(--mfb-serv-color);
	color: var(--preto);
	max-width: 190px;
	text-align: center;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}
.mfb-serv-card.is-active .mfb-serv-card__label { display: flex; }
.mfb-serv-carrossel__desc {
	width: 100%;
	max-width: 640px;
	margin: 20px auto 0;
	border: 1px solid var(--mfb-serv-color);
	border-radius: 4px;
	padding: 18px 20px;
	text-align: center;
	transition: border-color .2s ease;
	min-height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mfb-serv-carrossel__desc p { font-size: 12px; line-height: 1.65; color: rgba(255, 255, 255, .72); margin: 0; }
.mfb-serv-carrossel__dots { display: flex; align-items: center; justify-content: center; gap: 0; margin: 20px 0 30px; }
/* 6px inativo, 8px ativo — nao os 9px do dot padrao. A borda fecha os 26px. */
.mfb-serv-carrossel__dots .mfb-dot { background-color: rgba(255, 255, 255, .3); width: 6px; height: 6px; border-width: 10px; }
.mfb-serv-carrossel__dots .mfb-dot.is-active { background-color: #fff; width: 8px; height: 8px; border-width: 9px; }

/* Chevrons ao lado dos dots: substituem, no toque, as setas laterais que
   cobririam a foto do card. So aparecem abaixo de 900px. */
.mfb-dot-chev {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	opacity: .55;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: currentColor;
}
.mfb-dot-chev:hover { transform: none; }

@media (max-width: 900px) {
	.mfb-grid-servicos { display: none; }
	.mfb-servicos__desc { display: none; }
	.mfb-serv-carrossel { display: flex; }
	.mfb-dot-chev { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
 * Novidades no toque — deixa de ser carrossel por transform e vira rolagem
 * nativa com snap (canvas de 27/08).
 *
 * Os `!important` sao contra ESTILO INLINE, nao contra outra folha: o
 * initCarousel escreve `width`, `flex` e `transform` no elemento, e em modo de
 * rolagem esses tres precisam sair. O JS tambem os limpa ao entrar no modo —
 * o CSS aqui e a garantia de que uma ordem de execucao infeliz nao deixe a
 * faixa com 500% de largura.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.mfb-novidades__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}
	.mfb-novidades__viewport::-webkit-scrollbar { display: none; height: 0; }
	.mfb-novidades__track {
		transform: none !important;
		width: max-content !important;
		flex-wrap: nowrap;
		transition: none;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	/* Escopado a faixa da HOME, e nao a `.mfb-card-novidade` solta: o mesmo
	   card serve a listagem de /novidades/, e la o `scroll-snap-align` virava
	   alvo de encaixe VERTICAL da pagina (o `html` esta em `scroll-snap-type:
	   y proximity` abaixo de 900px). O efeito era a rota abrir ja rolada 233px,
	   com o hero fora da tela — e a largura de 44vw ainda espremia o card
	   dentro da celula da grade. */
	.mfb-novidades__track .mfb-card-novidade {
		width: 44vw !important;
		flex: 0 0 44vw !important;
		scroll-snap-align: start;
	}
}

/* ---------------------------------------------------------------------------
 * Sobre institucional — variantes estreitas.
 *
 * Este bloco vem DEPOIS das regras-base do bloco institucional de proposito.
 * As media queries gerais deste arquivo ficam bem acima; uma regra de mesma
 * especificidade escrita la nao venceria a base daqui, porque em CSS, com
 * especificidade igual, quem ganha e a ultima. Foi o defeito que deixou a
 * galeria visivel a 390px e estourou a pagina em 620px.
 *
 * O corte e 1080px e nao 900: a galeria pede 380 (ativo) + 300 (bio) + 3x92
 * (inativos) + 4x14 (gaps) = 1012px, mais os 64 de padding do container. Abaixo
 * disso ela nao cabe, e o canvas — que so troca em 900 — estoura a pagina entre
 * 901 e 1080. Aqui a sanfona entra antes de faltar espaco.
 * ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
	.mfb-equipe-galeria { display: none; }
	.mfb-equipe-sanfona { display: flex; }
}

@media (max-width: 900px) {
	.mfb-equipe-creditos { flex-direction: column; gap: 22px; }
}

@media (max-width: 640px) {
	/* So a prosa encolhe. Ate 01/09/2026 este bloco tambem cortava o respiro da
	   secao (96px -> 56px) e a altura das marcas (70px -> 52px, 74px -> 56px):
	   herancas do tempo em que /sobre/ era pagina de prosa, escritas por analogia
	   e nunca medidas. O canvas mantem 96px e as marcas inteiras em 1440, 800 e
	   390 — quem muda com a largura e so o `font-size` do paragrafo. */
	.mfb-inst p { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------------
 * Formularios do Elementor Pro — contencao horizontal.
 *
 * O `elementor-form-fields-wrapper` usa margens NEGATIVAS para abrir a calha
 * entre as colunas e devolve o espaco no padding de cada campo. Sozinho isso
 * esta certo; o problema e que nada recorta, entao o wrapper fica 10px mais
 * largo que o container de cada lado e a pagina inteira ganha rolagem
 * horizontal — 400px de formulario numa tela de 390. Medido em /contato/ nos
 * cinco tamanhos auditados.
 *
 * Zerar a margem pelo CSS do tema NAO funciona: quem escreve o valor e o
 * `post-17.css`, gerado pelo Elementor a partir da configuracao do widget, com
 * tres classes de especificidade e carregado DEPOIS do tema. Sobraria
 * `!important` sobre CSS gerado, que quebra em silencio quando alguem mexe no
 * espacamento pelo builder.
 *
 * Entao a contencao e no pai, com `clip` e nao `hidden`: `clip` nao cria
 * contexto de rolagem, entao nada passa a rolar nem por engano, e a margem que
 * vaza e transparente — o campo em si ja esta recuado pelo padding e nao chega
 * na borda. O layout nao muda; some so a barra horizontal.
 * ------------------------------------------------------------------------ */
.elementor-form { overflow-x: clip; }

/* ---------------------------------------------------------------------------
 * Cobertura do plano — abre dentro do card (canvas de 27/08)
 * ------------------------------------------------------------------------ */
/* **Lado a lado, e nao empilhado.** Ate 14/09/2026 esta regra dizia o contrario,
   e dizia certo para o que media entao: o canvas de 27/08 punha o chevron ABAIXO
   do rotulo com `flex-direction: column`, e o numero conferia — rotulo centrado
   em x=200,65, chevron em x=260,2, altura 15+4+14+20 = 53.

   O que mudou nao foi a medicao, foi a REFERENCIA. A arte original — o preview
   de agosto, `static-preview/public/index.html:683` — traz o chevron ao lado do
   rotulo, apontando para a direita, e o canvas e que se afastou dela. Decisao do
   Daniel em 14/09/2026: quando as duas discordam, vence a arte, e o canvas foi
   corrigido (o patch esta em `canvas-correcoes/`). Por isso os dois lados voltam
   a `row` e o portao segue em 0,000% sem declarar divergencia.

   O giro do estado aberto e de 90 graus, e nao de 180. Com o chevron apontando
   para a direita, 180 o deixaria apontando para a ESQUERDA — para fora do
   cartao, sem significar nada. 90 no sentido horario o poe para BAIXO, que e
   onde o painel abre: e o triangulo de revelacao de sempre. O estado aberto so
   existe no toque; no desktop o botao ancora e o chevron fica parado apontando
   para a tabela, que e exatamente o que o clique faz. */
.mfb-plano__link {
	background: none;
	border: 0;
	padding: 10px 8px;
	cursor: pointer;
	width: 100%;
	/* `wrap` nao e enfeite: o `support.js` do dc-runtime injeta `flex-wrap: wrap`
	   na base de todo flex, entao e o que a referencia faz — e o que a arte
	   original fazia, porque ela rodava dentro do mesmo runtime. O efeito e o
	   desenho certo nos dois tamanhos: onde cabe, o chevron fica ao lado do
	   rotulo; onde nao cabe (o cartao estreito do carrossel no toque), ele desce
	   inteiro para a linha de baixo. Com `nowrap` — o padrao do CSS — o tema
	   espremia "Conheca os / beneficios" em duas linhas para caber a seta ao
	   lado, arranjo que nao existe em referencia nenhuma. */
	flex-wrap: wrap;
	/* O canvas declara `min-height: 44px` neste botao desde 27/08, e ate hoje a
	   regra nunca pegou: empilhado o conteudo media 53px (15 + 4 + 14 + 20) e
	   passava do minimo sozinho. Em linha ele mede 35px, e o minimo passa a
	   valer — sem declara-lo aqui o cartao do tema ficaria 9px mais baixo que o
	   da referencia, e o desvio desceria por toda a pagina abaixo dos cartoes.
	   Alvo de toque de 44px e o piso da WCAG 2.5.8, entao a regra esta certa nos
	   dois lados; o que faltava era ela existir aqui. */
	min-height: 44px;
}
.mfb-plano__link:hover { transform: none; }
.mfb-plano__link svg { transition: transform .2s ease; }
.mfb-plano__link[aria-expanded="true"] svg { transform: rotate(90deg); }
.mfb-plano__cobertura { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border-subtle); text-align: left; }
.mfb-plano__cobertura-head { text-align: center; margin-bottom: 14px; }
.mfb-plano__cobertura-head h4 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; }
.mfb-plano__cobertura-tag { display: inline-block; font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px; color: #fff; }
.mfb-plano__cobertura-cat { padding: 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amarelo-shade); }
.mfb-plano__cobertura-linha { padding: 10px 4px; border-top: 1px solid var(--border-subtle); }
.mfb-plano__cobertura-rotulo { font-size: 12.5px; color: var(--text-body); line-height: 1.35; margin-bottom: 4px; }
.mfb-plano__cobertura-sub { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.mfb-plano__cobertura-pe { padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--border-subtle); text-align: center; }

/* --- guarda: a grade para de esticar se um plano abrir nela ----------------
 * LEIA ISTO ANTES DE APAGAR. Hoje nenhum caminho chega aqui, e isso e
 * deliberado — nao e regra esquecida.
 *
 * O defeito que a regra desfaz foi medido em 03/09/2026, na captura da Ana em
 * 86ak98n86: com a cobertura do Parceiro aberta a 1440px, os CINCO cartoes
 * iam de 329px para 3.075px, e o "Selecione" dos outros quatro caia de 190px
 * para 2.936px dentro do proprio cartao — fora de alcance. Cadeia:
 * `.mfb-planos` e `grid` com `align-items: stretch`, entao a linha cresce
 * junto com o cartao aberto; `.mfb-plano` tem `height: 100%` e uma linha
 * `1fr`, que engole toda a sobra ACIMA do botao.
 *
 * Precisa das DUAS declaracoes. Medi as tres combinacoes: `align-items: start`
 * sozinho nao muda nada (o `height: 100%` resolve contra a altura da linha) e
 * `height: auto` sozinho tambem nao (o `stretch` continua esticando). So o par
 * desfaz o acoplamento.
 *
 * POR QUE NENHUM CAMINHO CHEGA AQUI HOJE: por decisao do Daniel em 03/09/2026,
 * o botao so abre a cobertura onde a tabela de comparacao esta oculta — e ela
 * so esta oculta abaixo de 640px, onde a grade ja e `flex` com
 * `align-items: flex-start` e os cartoes nao esticam. Medi os dois lados com e
 * sem esta regra a 390 e a 600px: numeros identicos. Onde a grade e `grid`
 * (>=641px, duas ou cinco colunas), a tabela aparece e o botao ancora nela em
 * vez de abrir.
 *
 * POR QUE ELA FICA: o acoplamento continua fisicamente no CSS acima, e o que o
 * neutraliza e uma condicao de JS. Se o `mfb.js` nao carregar, se o
 * `#mfb-beneficios` sair do template, ou se alguem devolver a sanfona ao
 * desktop, o cartao de 3.075px volta — e volta calado. Duas linhas inertes sao
 * mais baratas que redescobrir isto pela terceira vez.
 *
 * Residuo conhecido, visivel so no toque: com um plano aberto, o cartao
 * "Mantenedor" fica 16,5px mais alto que os outros quatro, porque a parcela
 * dele ("valor minimo · ou 12x de R$ 1.667/mes") ocupa duas linhas. Essa e a
 * altura REAL do cartao; o `stretch` e que a escondia.
 *
 * Se um dia a regra passar a valer de novo, ela NAO pode sair da classe: sem
 * ela o par encolhe os cartoes recolhidos de 329 para 312,5px, e o recolhido e
 * exatamente o que a captura do canvas-pair ve — quebraria o portao de
 * `seja-associado/d`, hoje em 0,000%.
 * ------------------------------------------------------------------------ */
.mfb-planos.mfb-planos--aberto { align-items: start; }
.mfb-planos.mfb-planos--aberto .mfb-plano { height: auto; }

/* O arraste do carrossel de eventos precisa que o gesto horizontal seja dele e
   o vertical continue rolando a pagina — e o que `pan-y` diz. */
.mfb-eventos__viewport { touch-action: pan-y; }

/* ---------------------------------------------------------------------------
 * "Veja mais" nas listagens (canvas de 27/08)
 *
 * Vale so abaixo de 640px. Acima disso a grade tem 3 ou 4 colunas e a lista
 * inteira cabe sem cansar; dobrar ali seria esconder conteudo sem motivo.
 * ------------------------------------------------------------------------ */
.mfb-vermais { display: none; justify-content: center; padding-top: 26px; }
.mfb-vermais__btn {
	cursor: pointer;
	padding: 12px 28px;
	border-radius: var(--radius-md);
	border: 1px solid var(--amarelo);
	background: transparent;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amarelo);
	white-space: nowrap;
	font-family: inherit;
}

@media (max-width: 640px) {
	.mfb-vermais { display: flex; }
	/* Seis itens visiveis: tres linhas de duas colunas. */
	[data-mfb-dobra][data-expanded="false"] > *:nth-child(n+7) { display: none; }
	.mfb-eventos-lista .mfb-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.mfb-novidades-lista .mfb-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	/* Em duas colunas o card fica com ~170px: o corpo aperta e o tipo desce. */
	.mfb-novidades-lista .mfb-card-novidade__body { padding: 8px; }
	.mfb-novidades-lista .mfb-card-novidade__title { font-size: 10.5px; line-height: 1.3; }
	.mfb-novidades-lista .mfb-card-novidade__date { font-size: 8.5px; }
	.mfb-novidades-lista .mfb-pin { font-size: 7.5px; padding: 1px 4px; }
}

/* ---------------------------------------------------------------------------
 * Tabelas do editor em tela estreita (canvas de 27/08)
 *
 * O `data-mfb-rotulo` de cada celula vem do `<thead>` da propria tabela, posto
 * por inc/tabelas-responsivas.php — por isso nao ha texto nenhum escrito aqui.
 *
 * Duas colunas empilham como rotulo + valor: a primeira celula JA e o nome do
 * item, entao ela vira o rotulo amarelo e a segunda o valor. De tres colunas em
 * diante, a primeira celula e o titulo do bloco e as demais levam o nome da sua
 * coluna antes do valor.
 * ------------------------------------------------------------------------ */
@media (max-width: 640px) {
	.mfb-prosa .wp-block-table { overflow-x: visible; }
	/* `white-space: normal` desfaz o `nowrap` da regra de fallback logo acima
	   (a que faz a tabela NAO empilhada rolar de lado). Ele vinha alcancando
	   tambem as empilhadas, onde e o oposto do que se quer: a celula empilhada
	   existe justamente para quebrar em varias linhas. O sintoma media 78px de
	   largura a mais e uma linha a menos no valor mais longo da
	   /transparencia/, e so apareceu quando a pagina passou a ser comparada com
	   o canvas em 02/09/2026 — a olho, o texto simplesmente vazava. */
	.mfb-prosa .wp-block-table table[data-mfb-colunas] { display: block; border-collapse: separate; white-space: normal; }
	.mfb-prosa .wp-block-table table[data-mfb-colunas] thead { display: none; }
	.mfb-prosa .wp-block-table table[data-mfb-colunas] tbody { display: block; }
	.mfb-prosa .wp-block-table table[data-mfb-colunas] tr { display: block; border-top: 1px solid var(--border-subtle); padding: 10px 14px; }
	.mfb-prosa .wp-block-table table[data-mfb-colunas] td {
		display: block;
		border: 0;
		padding: 0;
		margin: 0 0 3px;
		font-size: 12.5px;
		line-height: 1.55;
		text-align: left;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}
	.mfb-prosa .wp-block-table table[data-mfb-colunas] td:last-child { margin-bottom: 0; }

	/* Duas colunas: a primeira celula e o rotulo. */
	.mfb-prosa .wp-block-table table[data-mfb-colunas="2"] td:first-child {
		background: transparent;
		color: var(--amarelo);
		font-size: 11.5px;
		/* Negrito, como o rotulo da tabela de tres colunas logo abaixo. Faltava:
		   a regra nasceu deste mesmo canvas, que traz o rotulo em 700, e o peso
		   foi o unico atributo que nao veio junto. Medido em 02/09/2026. */
		font-weight: 700;
		letter-spacing: .02em;
		padding-bottom: 2px;
	}

	/* Tres ou mais: a primeira e titulo, as outras ganham o nome da coluna. */
	.mfb-prosa .wp-block-table table:not([data-mfb-colunas="2"]) td:first-child {
		font-weight: 700;
		color: var(--amarelo);
		font-size: 13px;
		margin-bottom: 6px;
	}
	.mfb-prosa .wp-block-table table:not([data-mfb-colunas="2"]) td:not(:first-child)[data-mfb-rotulo]::before {
		content: attr(data-mfb-rotulo) ": ";
		opacity: .6;
	}
}

/* ---------------------------------------------------------------------------
 * Menu do rodape em tela estreita (canvas de 27/08)
 *
 * O canvas monta uma SEGUNDA navegacao no rodape, so para o mobile, e esconde
 * a de desktop. Aqui a mesma lista muda de forma: duplicar os nove links no DOM
 * daria conteudo repetido para leitor de tela e para buscador, e duas listas
 * que podem divergir quando alguem acrescentar uma rota.
 *
 * O chevron e imagem de fundo e nao SVG inline porque nao ha elemento onde
 * pendura-lo — o link e um <a> com texto e mais nada. Cor fixa, como no canvas.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.mfb-footer__nav {
		display: block;
		padding-top: 24px;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}
	.mfb-footer__nav > div:nth-child(3) { padding-right: 0; }
	.mfb-footer__nav a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		font-size: 15px;
		color: rgba(255, 255, 255, .9);
		padding: 16px 0;
		margin-bottom: 0;
		padding-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		line-height: 1.3;
		white-space: normal;
	}
	.mfb-footer__nav a::after {
		content: '';
		flex: none;
		width: 16px;
		height: 16px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.mfb-footer__nav a:hover { transform: none; }
}

/* ===========================================================================
 * /seja-associado/ no toque: carrossel de planos e tabela oculta.
 *
 * Este bloco vive no FIM do arquivo de proposito. As regras que ele desfaz
 * (`.mfb-planos { grid-template-columns: 1fr }`, no media query de 640px) tem a
 * mesma especificidade, entao quem decide e a ordem.
 *
 * Medido no canvas a 390px:
 *   trilho  flex · gap 14px · overflow-x auto · scroll-snap x mandatory
 *           padding 0 13% 6px   (47,58px de cada lado em 366 de largura)
 *   card    flex 0 0 74% · scroll-snap-align center · 200,42px de largura
 *
 * Os 13% de padding sao o que faz o card ficar CENTRADO quando o snap para:
 * sem eles o primeiro card cola na borda e o snap `center` nao tem folga.
 * ======================================================================== */
@media (max-width: 640px) {
	.mfb-planos {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Os 13% sao do TRILHO, que mede 366px dentro do padding do
		   `.mfb-container` — nao dos 390 da tela. Sangrar o trilho para a borda
		   com margem negativa muda a conta: 13% de 390 poe o primeiro card em
		   x=50,7 onde a referencia tem 59,58. */
		padding: 0 13% 6px;
		align-items: flex-start;
		-webkit-overflow-scrolling: touch;
		/* Sem barra de rolagem, como no canvas
		   (`.mfb-join-plans-track::-webkit-scrollbar{display:none}`): o snap e
		   os cards cortados nas bordas ja dizem que o trilho rola. Faltava aqui
		   e nos outros dois carrosseis do tema nao — e a barra cinza do sistema
		   aparecia colada embaixo dos cartoes (queixa do Daniel, 16/09/2026). */
		scrollbar-width: none;
	}
	.mfb-planos::-webkit-scrollbar { display: none; height: 0; }
	.mfb-plano {
		flex: 0 0 74%;
		scroll-snap-align: center;
	}
	/* 23px, e nao os 24 do `clamp(24px, 3.5vw, 32px)` — a 390px o clamp para no
	   minimo e fica 1px acima da referencia. */
	.mfb-seja__intro h2 { font-size: 23px; }
	/* `56px 0`, contra os `50px 0 90px` do desktop. Os 6px de cima explicavam o
	   deslocamento de toda a secao; os 90 de baixo somem porque com a tabela
	   oculta a secao termina no trilho. */
	.mfb-seja { padding: 56px 0; }
	/* Card do canvas no toque: padding uniforme de 22px e gap de 11px, contra
	   os `26px 20px` e 14px do desktop. */
	.mfb-plano {
		padding: 22px;
		gap: 11px;
		/* `min-height` fixo com o conteudo CENTRADO — os cinco cards do canvas
		   medem 352px, inclusive os quatro cujo conteudo natural da 292,5. Nao e
		   esticamento do flex: o trilho e `align-items: flex-start`, e o que
		   iguala a altura e o proprio card. Sem isto o conteudo do card subia
		   24px e, com ele, tudo abaixo da secao. */
		min-height: 352px;
		align-content: center;
		/* No toque o card e CENTRADO — titulo, etiqueta, preco, parcela e o
		   "Conheca os beneficios" todos no eixo. No desktop e alinhado a
		   esquerda. Faltava so isto para a rota fechar. */
		text-align: center;
		justify-items: center;
	}
	.mfb-plano > * { width: 100%; }
	/* O espacador some no toque — e as FAIXAS mudam junto, senao ele nao some
	   de verdade. A grade do desktop e `auto auto 1fr auto auto`, e a faixa
	   `1fr` e a dele: escondendo so o elemento, o botao herda a faixa elastica
	   e cresce de 45px para 104. Foi por isso que, em 27/08, esconder o
	   espacador "piorou a medicao" e a conclusao registrada aqui virou "nao
	   esconder" — a inferencia estava certa sobre o numero e errada sobre a
	   causa. Com as quatro faixas em `auto`, o canvas fecha. */
	.mfb-plano {
		grid-template-rows: auto auto auto auto;
		height: auto;
	}
	.mfb-plano > div:nth-child(3) { display: none; }
	/* NAO esconder o `<div></div>` espacador, apesar de o canvas o ter em
	   `display: none`. Medido nas duas direcoes: com ele visivel a rota fica em
	   2,217%; escondendo-o — por `:empty` ou por posicao — sobe para 2,481%. No
	   papel as duas grades ficariam iguais (4 linhas, mesmas alturas, mesma
	   folga centrada); na pratica nao ficam, e o numero e que decide. Quem for
	   mexer aqui: meça antes e depois, nao deduza. */
	/* O botao encolhe ate o texto (119,83) e fica CENTRADO. Ate 01/09/2026 esta
	   regra o esticava para os 154,42 do card, e o motivo registrado era que
	   com `justify-self: start` o rotulo caia 17,3px a esquerda da referencia —
	   verdade, mas o conserto era centrar, nao esticar. No canvas o que ocupa a
	   largura toda e um invólucro; o botao dentro dele nao. */
	.mfb-plano .mfb-btn { justify-self: center; width: auto; }
	/* 36px abaixo do trilho, e nao os 70 do desktop nem zero. Zerar foi um
	   excesso meu: a secao ficou 36px mais curta que a referencia e o rodape
	   inteiro subiu junto. A conta fecha — secao 611 = 56 de padding + 105 do
	   intro + 358 do trilho + 36 desta margem + 56 de padding. */
	.mfb-planos { margin-bottom: 36px; }

	/* A tabela de benefícios NAO existe no celular do canvas — nao ha nem o
	   titulo "Compare e escolha o melhor plano" nem a palavra "Benefícios" na
	   arvore de texto da pagina de 390px.
	   ATENCAO: isto REMOVE conteudo do celular, e nao e so apresentacao. O
	   visitante de telefone deixa de ver a comparacao de benefícios entre os
	   cinco planos — na pagina onde ele decide quanto vai pagar. Esta aqui
	   porque o pareamento com o canvas de 27/08 foi pedido explicitamente;
	   entra na lista de correcoes DA REFERENCIA. Reverter e apagar este par de
	   seletores, nada mais. */
	#mfb-beneficios,
	.mfb-tabela-scroll { display: none; }
}

/* ===========================================================================
 * /sobre/ — as tres secoes que a rota trouxe de volta.
 *
 * As outras tres (BM&A, ApexBrasil, Equipe) sao de `mfb_sobre_institucional()`
 * e ja mediam identicas ao canvas; nada aqui as toca.
 * ======================================================================== */

/* --- abertura: wordmark, prosa, chamada e foto circular ------------------- */
.mfb-sobre-abertura { padding: 100px 0; background: var(--preto); color: var(--branco); }
/* `1fr auto`: o texto ocupa o que sobra e o circulo tem largura propria. */
.mfb-sobre-abertura__grade { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.mfb-sobre-abertura__marca { height: 74px; width: auto; margin-bottom: 32px; object-fit: contain; }
.mfb-sobre-abertura__p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .75); margin: 0 0 22px; }
/* O ultimo paragrafo respira 26px, nao 22 — sao valores independentes no
   arquivo entregue, como no rodape. */
.mfb-sobre-abertura__p--ultimo { margin-bottom: 26px; }
.mfb-sobre-abertura__chamada { font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--amarelo); margin: 0 0 26px; }
.mfb-sobre-abertura__circulo { width: 280px; height: 280px; border-radius: 50%; overflow: hidden; flex: none; border: 1px solid rgba(255, 255, 255, .15); }
/* `object-position: center 30%` e do desenho: centrado na vertical a moldura
   corta o rosto. */
.mfb-sobre-abertura__circulo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 0; }

/* Botao contornado em amarelo. Nao e `--secondary` (que e 1,5px e usa
   `--text-body`) nem `--highlight` (preenchido): no canvas este e escrito a
   mao, com 1px de borda e 13px de padding vertical. */
.mfb-btn--contorno-amarelo {
	display: inline-block;
	border: 1px solid var(--amarelo);
	color: var(--amarelo);
	background: transparent;
	padding: 13px 26px;
	font-size: 14px;
	/* `normal`, e nao o `.02em` do `.mfb-btn`. Mesma historia do
	   `.mfb-btn--branco`: os botoes do design system TEM o espacamento no
	   canvas, os escritos a mao nao. */
	letter-spacing: normal;
}
/* Aqui havia `.mfb-btn--contorno-amarelo:hover { background: amarelo; color:
   preto }`. Saiu em 02/09/2026, pela decisao do Daniel de que a fonte da
   verdade e o pacote do Claude Design: a string `contorno-amarelo` NAO aparece
   nenhuma vez no canvas, e o unico hover que ele da a botao e
   `translateY(-2px)`. O preenchimento vinha do preview de agosto. */

/* --- faixa de Transparencia ---------------------------------------------- */
/* Altura fixa. O fundo sao DUAS camadas somadas: a foto multiplicada pelo azul
   (`background-blend-mode: multiply`) e um veu de `rgba(--azul, .6)` por cima.
   Sem o blend a foto aparece crua; sem o veu ela fica clara demais. */
.mfb-sobre-transp {
	position: relative;
	height: 320px;
	padding: 110px 0;
	background-color: var(--azul);
	background-size: cover;
	background-position: center center;
	background-blend-mode: multiply;
	text-align: center;
	color: var(--branco);
}
.mfb-sobre-transp__veu { position: absolute; inset: 0; background: rgba(26, 0, 136, .6); }
.mfb-sobre-transp__corpo { position: relative; max-width: 720px; margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; justify-content: center; }

/* --- os 5 beneficios, em cards que viram --------------------------------- */
.mfb-sobre-beneficios { padding: 96px 0; background: var(--bg-alt); }
.mfb-sobre-beneficios__head { text-align: center; margin-bottom: 56px; }
.mfb-sobre-beneficios__head h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -.02em; }
/* `perspective` no PAI: e ela que da profundidade ao `rotateY` dos filhos.
   Declarada no card, o giro sai chapado. */
.mfb-sobre-beneficios__grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; perspective: 1200px; }
.mfb-sobre-beneficios__grade .mfb-flip-box { min-height: 170px; }
.mfb-sobre-beneficios__grade .mfb-flip-front,
.mfb-sobre-beneficios__grade .mfb-flip-back { background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.mfb-sobre-beneficios__grade .mfb-flip-front h4 { font-family: var(--font-display); font-size: 16px; margin: 0; text-align: center; }
.mfb-sobre-beneficios__grade .mfb-flip-back p { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; text-align: center; }

/* --- /sobre/ no toque ------------------------------------------------------
   Medido contra o canvas em 390x844 (01/09/2026). O canvas usa classes
   genericas (`mfb-m-stack`, `mfb-m-circle`, `mfb-m-autoh`) que valem para o
   site inteiro; aqui as regras sao nominais por secao de proposito. As tres
   regressoes de 27/08 vieram de generalizar regra a partir de uma amostra, e
   /sobre/ e a rota onde o canvas MAIS diverge de si mesmo. */
@media (max-width: 900px) {
	.mfb-sobre-abertura__grade { grid-template-columns: 1fr; gap: 28px; }
	.mfb-sobre-transp { height: auto; }
}

@media (max-width: 640px) {
	.mfb-sobre-abertura__p,
	.mfb-sobre-abertura__chamada { font-size: 14.5px; }
	.mfb-sobre-abertura__circulo { width: 210px; height: 210px; margin: 0 auto; }

	.mfb-sobre-transp { padding: 56px 0; }

	.mfb-sobre-beneficios__head h2 { font-size: 23px; }
	/* Vira flex-wrap, nao grid de 2 colunas: sao cinco cards em duas colunas, e
	   `repeat(2, 1fr)` esticaria o quinto para a linha inteira. Ele fica
	   sozinho na 3a linha e CENTRADO — dai o `justify-content`. */
	.mfb-sobre-beneficios__grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
	.mfb-sobre-beneficios__grade .mfb-flip-box {
		flex: 0 0 calc(50% - 8px);
		max-width: calc(50% - 8px);
		min-height: 220px;
	}
}

/* --- Equipe de /sobre/ no toque -------------------------------------------
   O desktop usa a galeria que expande; abaixo de 1080px entra a sanfona, que
   nunca tinha sido medida contra o canvas. Medido em 390x844 (01/09/2026). */
@media (max-width: 900px) {
	/* No canvas cada credito e uma coluna flex com gap 6px, e nao um bloco com
	   margem embaixo — 1px de diferenca por linha, quatro creditos. */
	.mfb-equipe-creditos > div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		width: 100%;
	}
	.mfb-equipe-creditos__rotulo { margin-bottom: 0; line-height: 1.4; }
	.mfb-equipe-creditos__valor { line-height: 1.4; }
	/* A marca da Dreamland troca de lado no toque: no desktop ela vem antes do
	   nome, aqui vem depois. E `order` no canvas, entao e `order` aqui. */
	.mfb-equipe-creditos__valor--logo img { order: 1; }
}

@media (max-width: 640px) {
	.mfb-equipe__head .mfb-section-title { font-size: 23px; }
}

/* --- /contato/ -------------------------------------------------------------
   Medido contra o canvas em 1440x900 e 390x844 (01/09/2026). */
.mfb-page-hero--baixa { aspect-ratio: 1536 / 348.16; }
.mfb-page-hero--baixa .mfb-page-hero__sub { max-width: 600px; }

.mfb-contato-corpo { padding: 40px 0 90px; background: var(--bg-page); height: 560px; }
.mfb-contato-corpo__grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }

.mfb-contato-canais__titulo { font-family: var(--font-display); font-size: 19px; margin: 0 0 22px; }
.mfb-contato-canais__lista { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.mfb-contato-canais__regra { height: 1px; background: var(--border-subtle); margin: 24px 0; }
.mfb-contato-canal { display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
/* Aqui havia `.mfb-contato-canal:hover { transform: none }`. Ele desligava o
   unico hover que a ficha tinha, e o cartao 86ak98pra ("ajustar hover dos
   links") pede o contrario. Sem esta linha o `translateY(-2px)` global volta a
   valer, e a ficha inteira sobe — ela E a ancora. O pareamento nao perde nada:
   o `check` fotografa com o ponteiro estacionado, entao nao ve hover. */
.mfb-contato-canal__chip { width: 32px; height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.mfb-contato-canal--telefone .mfb-contato-canal__chip { color: var(--verde-tint); }
.mfb-contato-canal--email    .mfb-contato-canal__chip { color: var(--laranja); }
/* So a ficha do telefone tem `flex:1` no canvas. Nao muda pixel — o texto e
   alinhado a esquerda nas duas — mas muda a caixa, e caixa medida e o que este
   arquivo reproduz. (A ficha de endereco, que era a terceira, saiu em
   14/09/2026; com ela saiu a regra de cor do chip dela.) */
.mfb-contato-canal--telefone .mfb-contato-canal__texto { flex: 1 1 0%; }
.mfb-contato-canal__rotulo { font-weight: 700; font-size: 14.5px; margin-bottom: 2px; }
.mfb-contato-canal__valor { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

.mfb-contato-form__isca { display: none; }
.mfb-contato-form__card {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 36px;
	width: 539px;
	height: 318px;
}
.mfb-contato-form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.mfb-campo__rotulo { font-size: 12.5px; font-weight: 700; display: block; margin-bottom: 6px; }
.mfb-campo__entrada {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	font-size: 14px;
	font-family: var(--font-body);
	background: var(--bg-surface);
	color: var(--branco);
}
textarea.mfb-campo__entrada { min-height: 45px; resize: vertical; }
/* Duas correcoes de <button> contra o <a> do canvas. `line-height`: como <a>
   ele herda o 1.5 do corpo, e como <button> cairia no `normal` do agente,
   perdendo 3px de altura. E `inline-flex` com `align-items: flex-start`: o
   agente centra o conteudo do botao na caixa, e o <a> encosta a linha no topo
   — meio pixel de diferenca, que e todo o residuo desta rota no desktop. */
.mfb-contato-form__enviar {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: 135px;
	height: 49px;
	margin-top: 24px;
	padding: 14px 0;
	border: 1px solid var(--areia-tint);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--areia-tint);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
}
.mfb-contato-form__enviar:hover { transform: none; }

@media (max-width: 960px) {
	/* Auto-margin em item de grade DESLIGA o esticamento: a coluna passa a ser
	   medida pelo conteudo. E o que encolhe o cartao do formulario para ~258px
	   no toque, pela largura intrinseca do <textarea>. Regra do canvas,
	   reproduzida com o mesmo efeito. */
	.mfb-contato-corpo__grade > *:last-child,
	.mfb-contato-form__linha > *:last-child { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 900px) {
	.mfb-contato-corpo {
		background: var(--preto);
		color: var(--branco);
		border-radius: 16px;
		margin: 0 16px;
		width: auto;
		height: auto;
		padding: 32px 20px;
	}
	.mfb-contato-corpo .mfb-container { padding: 0 8px; max-width: none; }
	.mfb-contato-corpo__grade { grid-template-columns: 1fr; gap: 28px; }
	.mfb-contato-canais__titulo { color: var(--branco); font-size: 22px; }
	.mfb-contato-canal__chip { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; }
	.mfb-contato-canal__chip svg { width: 22px; height: 22px; }
	.mfb-contato-form__linha { grid-template-columns: 1fr; gap: 28px; }
	.mfb-contato-form__card { width: 100%; min-width: 0; max-width: 539px; height: auto; }
}

@media (max-width: 640px) {
	/* Vence os 32px de cima: no canvas a secao tambem e `.mfb-m-autoh`, e a
	   regra generica de respiro vem depois. */
	.mfb-contato-corpo { padding: 56px 20px; }
	.mfb-page-hero--baixa { aspect-ratio: auto; height: 50vh; height: 50dvh; min-height: 0; }
	/* Sem reserva para a barra de rolagem, a largura INTRINSECA do <textarea>
	   cai de 192px para 177px — e e ela, e nao regra de largura nenhuma, que
	   dimensiona o cartao inteiro no toque (ver formulario.php). O canvas
	   desliga a barra no site todo aqui; aqui vai escopado, porque as outras
	   rotas ja fecham em zero sem a regra global e uma regra global so poderia
	   quebra-las. */
	.mfb-contato-form textarea { scrollbar-width: none; }
	.mfb-contato-form textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* Desfecho do envio de /contato/. So aparece com `?mfb_contato=` na URL, entao
   nao entra na comparacao com o canvas. */
.mfb-contato-form__aviso { font-size: 14px; line-height: 1.5; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.mfb-contato-form__aviso--sucesso { color: var(--verde-tint); border-color: var(--verde-tint); }
.mfb-contato-form__aviso--erro { color: var(--laranja); border-color: var(--laranja); }

/* ===========================================================================
   /associados/ — dobra de topo e grade de logos
   ===========================================================================
   TUDO aqui e escopado sob `.mfb-page-hero--assoc` ou `.mfb-assoc`. Nao ha uma
   unica declaracao que alcance outra rota, e isso e deliberado: as oito
   medicoes com portao fecham em 0,000%, e neste tema regra que vaza de escopo
   ja produziu tres defeitos — todos com o mesmo sintoma, deslocamento numa
   pagina sem relacao com a regra mexida. */

/* --- a quinta variante da dobra ------------------------------------------
   As outras quatro combinam `coluna` e `respiro`. Esta muda o que aqueles dois
   modificadores nao alcancam: a largura do corpo, o tamanho do titulo e a
   forma das duas linhas de apoio. Sem sombra em nenhum dos tres — o canvas nao
   declara nenhuma nesta dobra, ao contrario de `/seja-associado/`. */
.mfb-page-hero--assoc .mfb-page-hero__body { max-width: 720px; }
.mfb-page-hero--assoc .mfb-page-hero__title {
	font-size: clamp(32px, 5vw, 52px);
	/* 1,5 — MEDIDO nos dois lados, nao lido do fonte. O `.dc.html` nao declara
	   line-height no <h1>, nem no wrapper do artboard, e ler so o fonte leva a
	   concluir `normal` (63px). O computado do canvas e 78px: quem poe o 1.5 e a
	   base que o `support.js` do dc-runtime injeta, e ela nao esta no arquivo.
	   O 1.05 do titulo compartilhado tambem nao serve — daria 54,6px. */
	line-height: 1.5;
	margin-bottom: 18px;
	text-shadow: none;
}
.mfb-page-hero--assoc .mfb-page-hero__sub {
	max-width: none;
	color: rgba(255, 255, 255, .72);
	line-height: 1.6;
	margin: 0 0 10px;
	text-shadow: none;
}
/* A segunda linha nao e continuacao da primeira: e a chamada para a grade. */
.mfb-page-hero--assoc .mfb-page-hero__sub--2 {
	color: rgba(255, 255, 255, .9);
	font-weight: 600;
	margin: 0;
	/* 24px medidos, contra os 25,6px que a regra irma acima aplicaria. Mesma
	   origem do titulo: o primeiro paragrafo declara `1.6` no proprio fonte,
	   este nao declara nada e herda o 1.5 da base do dc-runtime. */
	line-height: 1.5;
}

/* --- a grade -------------------------------------------------------------- */
/* Cartao de PESSOA, desde 16/09/2026. Ate entao era caixa quadrada com logo
   contido (140x140, `aspect-ratio: 1`, `object-fit: contain`), porque o canvas
   desenha 15 vagas de logo. A fonte real — o Members API do Wix, via
   `bit-wix-members-sync.php` — nao tem logo nenhum: tem foto de perfil, nome,
   empresa e as vezes cargo. Os numeros abaixo sao os do playground
   `tmp/playground-associados.html`, escolhidos pelo Daniel sobre os onze
   associados reais: 5 colunas, gap 20, padding 24, foto 96 redonda com anel
   fino na cor da borda (laranja so no hover), nome 16/600, empresa menor,
   cada campo em ate 2 linhas. O cargo saiu do cartao em 16/09/2026 (o
   template nao o emite; a meta continua no banco).

   `<ul>` sem marcador e nao `<div>`: e uma lista de pessoas, e o leitor de tela
   anuncia "lista, 11 itens" — o que a grade de logos anonima nao precisava. */
.mfb-assoc { padding: 80px 0 90px; background: var(--bg-alt); }
.mfb-assoc__grade {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin: 0 0 56px;
	padding: 0;
	list-style: none;
}
.mfb-assoc__card {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	overflow: hidden;
	transition: border-color .18s;
}
/* O link, quando existe, envolve o cartao inteiro — e por isso repete o
   flex do pai: sem isso a foto e os tres textos perderiam a coluna centrada e
   cairiam no fluxo inline do <a>. */
.mfb-assoc__link { display: flex; flex-direction: column; align-items: center; width: 100%; color: inherit; }
.mfb-assoc__foto {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	/* `border`, e nao `box-shadow`: a caixa do cartao usa `border: 1px`, e o
	   Daniel pediu o contorno da foto com a MESMA espessura (16/09/2026). Um
	   `box-shadow` de 1px de spread num circulo e rasterizado por outro caminho
	   e sai visivelmente mais pesado que a borda ao lado, mesmo com o mesmo
	   valor — medido nos dois a 1px e nao parecia. Com `box-sizing: border-box`
	   a borda come 1px de cada lado da foto (94px de rosto), custo invisivel.
	   Em repouso o contorno e continuacao do da caixa, nao destaque; o laranja
	   fica para o hover, junto com a borda. */
	border: 1px solid var(--border-subtle);
	margin-bottom: 16px;
	background: #2a2a2a;
	transition: border-color .18s;
}
.mfb-assoc__nome,
.mfb-assoc__empresa {
	margin: 0;
	overflow-wrap: anywhere;
	/* Ate 2 linhas por campo. A empresa da Denys Grellmann tem 55 caracteres —
	   sem o limite ela esticaria o cartao e desalinharia a linha inteira. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mfb-assoc__nome { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--text-body); }
.mfb-assoc__empresa { font-size: 13px; line-height: 1.4; color: var(--text-muted); margin-top: 4px; }
/* Sem foto, o mesmo circulo com a onda sonora — mesma caixa, mesma borda,
   mesmo hover, so o miolo muda (era as iniciais ate 17/09/2026). Sete barras
   centradas na vertical, cada uma com a SUA altura de repouso — o perfil
   irregular e o que le como forma de onda e nao como grade — e e o estado de
   REPOUSO: a onda so se mexe com o mouse sobre o cartao (ou foco dentro
   dele). Pedido do Daniel em 17/09/2026, com a captura de 30 e poucos
   circulos pulsando ao mesmo tempo: "deixe estatico, movimentacao so no
   hover". Por isso o `animation-name` fica na regra de hover, nao no span, e
   os keyframes PARTEM de `scaleY(1)`: o primeiro frame e igual ao repouso,
   entao entrar no hover nao da salto. Os delays sao positivos pelo mesmo
   motivo — negativos comecariam cada barra no meio do ciclo, e o hover
   abriria com um pulo; positivos fazem a onda atravessar as barras uma a
   uma. Ao sair, a animacao some e cada barra volta ao repouso no ato.
   O movimento e so `scaleY` a partir do centro, nunca `height`: sao ate 39
   circulos na pagina, e altura anima no layout, transform no compositor.
   Longhands, pelo mesmo motivo do `.mfb-nav-wave` — o shorthand zeraria o
   delay das `nth-child`. `flex-shrink: 0` porque o <span> e flex item da
   coluna e, sem isso, encolheria na altura quando o nome tem duas linhas; o
   <img> nao precisa porque tem width/height de atributo. */
@keyframes mfbAssocOnda {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(.5); }
}
.mfb-assoc__foto--onda {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-shrink: 0;
	/* O preto do header (`rgba(16,16,16,.88)` sobre a pagina), nao o #2a2a2a
	   que o <img> usa enquanto carrega — pedido do Daniel em 17/09/2026: o
	   circulo sem foto e mais escuro que o cartao, nao mais claro. */
	background: #101010;
}
.mfb-assoc__foto--onda span {
	display: block;
	width: 3px;
	border-radius: 1.5px;
	background: var(--text-muted);
	transform-origin: center;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
.mfb-assoc__card:hover .mfb-assoc__foto--onda span,
.mfb-assoc__card:focus-within .mfb-assoc__foto--onda span { animation-name: mfbAssocOnda; }
.mfb-assoc__foto--onda span:nth-child(1) { height: 20px; animation-duration: 1.3s; animation-delay: 0s; }
.mfb-assoc__foto--onda span:nth-child(2) { height: 44px; animation-duration: 1.1s; animation-delay: .1s; }
.mfb-assoc__foto--onda span:nth-child(3) { height: 32px; animation-duration: 1.4s; animation-delay: .2s; }
.mfb-assoc__foto--onda span:nth-child(4) { height: 56px; animation-duration: 1.2s; animation-delay: .3s; }
.mfb-assoc__foto--onda span:nth-child(5) { height: 26px; animation-duration: 1.5s; animation-delay: .4s; }
.mfb-assoc__foto--onda span:nth-child(6) { height: 48px; animation-duration: 1.1s; animation-delay: .5s; }
.mfb-assoc__foto--onda span:nth-child(7) { height: 18px; animation-duration: 1.3s; animation-delay: .6s; }
/* No hover, borda da caixa e anel da foto viram laranja juntos. */
.mfb-assoc__card:hover { border-color: var(--laranja); }
.mfb-assoc__card:hover .mfb-assoc__foto { border-color: var(--laranja); }

/* Nao ha estado vazio: sem cadastro a grade inteira nao e emitida, entao nao
   existe vaga a desenhar. A versao de 02/09 tinha `.mfb-assoc__vaga`,
   `__icone` e `__legenda` reproduzindo o `<image-slot>` do canvas, e sairam com
   a decisao de ocultar. */

/* --- o botao -------------------------------------------------------------- */
.mfb-assoc__cta { text-align: center; margin-top: 24px; }
/* QUATRO medidas separam este do `--contorno-amarelo` das outras rotas (13px
   26px / 14px / raio de pilula / line-height). Escopado, e nao acrescentado a
   variante: mudar a variante mexeria no botao de `/sobre/`, que mede 0,000%.

   O line-height e o que menos parece e mais custa: 22,5px medidos contra os
   ~18px do `normal` que o `.mfb-btn` declara. O `normal` la esta certo e tem
   motivo escrito — no preview aquele botao era um <button>, que ja nasce
   assim. ESTE, no canvas, e uma <div>, e <div> herda o 1.5 da base. Os 3,5px
   de diferenca eram toda a altura que faltava na pagina, e empurravam o rodape
   inteiro para cima. */
.mfb-assoc__cta .mfb-btn { padding: 14px 32px; font-size: 15px; border-radius: 4px; line-height: 1.5; }

@media (max-width: 900px) {
	/* Tres colunas e gap de 16px — e o que o bloco de toque do canvas aplica a
	   `.mfb-m-grid3`, a mesma classe que ele usa nos beneficios e nos planos. */
	.mfb-assoc__grade { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
	/* Duas colunas no toque, com o cartao mais enxuto: 24px de padding em duas
	   colunas de ~170px deixaria 122px para o texto, e "Estúdio Medusa Produções
	   Musicais Ltda" nao cabe em duas linhas nisso. */
	.mfb-assoc__grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.mfb-assoc__card { padding: 18px 12px; }
}

@media (max-width: 640px) {
	/* Repete no toque o que o tema ja diz para as outras cinco rotas.
	   Nao e redundancia: `.mfb-page-hero__title` do bloco de toque tem UMA
	   classe e a regra `--assoc` la de cima tem DUAS, entao a minha vencia por
	   especificidade e o titulo ficava com os 32px do `clamp` onde a referencia
	   tem 27. O sintoma nao parava no titulo — ele empurrava os dois paragrafos
	   8,9px para baixo, e a leitura facil era culpar os paragrafos. */
	.mfb-page-hero--assoc .mfb-page-hero__title { font-size: 27px; line-height: 1.12; }
}

/* ===========================================================================
   /transparencia/ — dobra de topo de prosa e o corpo do documento
   ===========================================================================
   TUDO aqui e escopado sob `.mfb-page-hero--prosa` ou `.mfb-prosa--doc`. Nao ha
   uma unica declaracao que alcance `/acontece/` ou `/politica-de-privacidade/`,
   que sao as outras duas paginas de prosa — a `.mfb-prosa` continua exatamente
   como estava para elas. Escopo fechado e regra do arquivo: neste tema, regra
   que vaza ja produziu tres defeitos, todos com o mesmo sintoma (deslocamento
   numa pagina sem relacao com a regra mexida).

   Os numeros abaixo foram MEDIDOS com `getComputedStyle` nos dois lados, nunca
   lidos do fonte do `.dc.html` — o `support.js` do dc-runtime injeta uma folha
   base que o arquivo nao declara, e ler o fonte leva a concluir errado. Ver a
   nota do `--assoc`, que custou duas tentativas no mesmo elemento.

   Esta e a UNICA rota de prosa medida contra o canvas. As regras foram
   deliberadamente NAO generalizadas para as outras duas: o canvas nao desenha
   nenhuma delas, e generalizar seria decidir no escuro o que elas devem virar.
   -------------------------------------------------------------------------- */

/* --- a sexta variante da dobra --------------------------------------------
   As cinco anteriores tem a altura dada por `aspect-ratio` (1536/696.32, ou
   1536/348.16 na `--baixa`). Esta NAO tem proporcao nenhuma: no canvas a faixa
   e uma secao de fluxo normal, e a altura sai de `padding: 100px 0 80px` mais o
   que o texto ocupar. Medido: 277,5px no desktop (100 + 97,5 + 80) e 265,73 no
   toque (100 + 85,73 + 80). Por isso `aspect-ratio: auto` — e nao um terceiro
   numero de proporcao, que so daria o valor certo para este comprimento de
   titulo. */
.mfb-page-hero--prosa {
	aspect-ratio: auto;
	padding: 100px 0 80px;
}
/* Bloco, e nao flex. O corpo compartilhado centra os filhos com
   `align-items: center`, o que encolhe cada um ao proprio conteudo; no canvas
   eles ocupam a largura inteira e o texto se centra por `text-align`. Para
   titulo de uma linha da no mesmo, mas a linha de apoio quebra em ponto
   diferente quando a caixa encolhe. */
/* `auto` no degrade e `cover` so na foto, como o canvas. A regra compartilhada
   diz `cover` para as duas camadas, e para um gradiente `cover` nao e igual a
   `auto`: ele arredonda a area pintada e deixa a ULTIMA meia-linha da dobra sem
   a camada escura. Uma linha de 1px, medida em y=358 — srgb(14,79,76) no alvo
   contra srgb(12,44,43) na referencia. Era o unico resto do desktop depois de
   tudo o mais fechar. As outras cinco dobras nao sofrem: a altura delas vem de
   `aspect-ratio` e cai em numero inteiro. */
.mfb-page-hero--prosa .mfb-page-hero__bg {
	background-size: auto, cover;
	background-repeat: repeat, repeat;
}
.mfb-page-hero--prosa .mfb-page-hero__body {
	display: block;
	max-width: 720px;
	height: auto;
}
.mfb-page-hero--prosa .mfb-page-hero__title {
	font-size: 42px;
	/* 63px medidos / 42px = 1,5. O `clamp(28px, 4.2vw, 48px)` compartilhado
	   daria 48px a 1440, e o `line-height: 1.05` daria 44,1px onde a referencia
	   tem 63. O `letter-spacing: -.02em` da regra compartilhada esta certo:
	   medido -0,84px, que e exatamente -.02em a 42px. */
	line-height: 1.5;
	/* Vence `.mfb-page-hero__body--coluna .mfb-page-hero__title` (14px) por
	   ordem, nao por especificidade — as duas tem duas classes. Mesma situacao
	   do `--assoc`, e a razao de este bloco morar no fim do arquivo. */
	margin: 0 0 12px;
	text-shadow: none;
}
.mfb-page-hero--prosa .mfb-page-hero__sub {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
	max-width: none;
	margin: 0;
	text-shadow: none;
}

/* --- o corpo do documento -------------------------------------------------
   O canvas envolve a prosa num wrapper de 760px com `padding: 0 32px`, o que
   da 696px uteis contra os 1180 - 64 = 1116 da `.mfb-prosa` compartilhada.
   Essa largura e a metade da divergencia: a outra e a dobra que faltava. As
   duas tem sinal oposto — falta a faixa de ~280px e sobra prosa larga — e por
   isso a soma dava so +123px de altura, um numero que sozinho sugeria
   "e so espacamento". Nao era. */
.mfb-prosa--doc {
	--prosa-largura: 760px;
	/* 68px medidos entre o fim da dobra e o topo do primeiro <h2> (60 do
	   respiro do wrapper + 8 de padding do grupo, no canvas). */
	padding: 68px 0 100px;
}

.mfb-prosa--doc h2 {
	font-size: 22px;
	line-height: 1.5;
	/* O canvas nao aperta os titulos da prosa. A regra compartilhada tem
	   `-.02em`, medido `normal` aqui — e `normal` nao e o default herdado, e
	   uma redefinicao que precisa ser escrita. */
	letter-spacing: normal;
	margin: 36px 0 20px;
}
/* O primeiro <h2> encosta no padding do corpo: no canvas ele nao tem margem
   superior, e o respiro inteiro vem do wrapper. */
.mfb-prosa--doc > h2:first-child { margin-top: 0; }
.mfb-prosa--doc h3 {
	font-size: 16px;
	line-height: 1.5;
	margin: 28px 0 10px;
}
.mfb-prosa--doc p {
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0 0 10px;
}
/* Paragrafo que ANUNCIA uma lista fica 4px mais perto dela. Medido nos tres
   casos ("Podemos coletar...", "Coletamos informacoes quando voce...", "As
   informacoes coletadas sao utilizadas para..."): 6px contra os 10px dos
   demais. Nos outros pontos a diferenca de margem do canvas e invisivel,
   porque margens adjacentes colapsam para a maior; aqui nao colapsa nada,
   porque a <ul> tem margem superior zero. */
.mfb-prosa--doc p:has(+ ul),
.mfb-prosa--doc p:has(+ ol) { margin-bottom: 6px; }
/* E a segunda politica respira menos que a primeira. Isto parecia ruido da
   peca e nao e: medido par a par, TODO paragrafo seguido de outro DEPOIS da
   regua fecha com 6px, e todos os seis pares ANTES dela fecham com 10. As duas
   politicas foram redigidas com espacamentos diferentes e a regua e a
   fronteira — por isso o irmao geral, que diz exatamente isso e continua
   valendo se o cliente acrescentar paragrafos de qualquer um dos lados.
   Chegar aqui exigiu medir os dois lados: pela forma, "<h3> + <p> + <p>" e
   identico nas duas metades, e concluir "sem regra" teria congelado 8px de
   divergencia como se fossem inevitaveis. */
.mfb-prosa--doc hr ~ p { margin-bottom: 6px; }
/* A excecao, e ela e uma so na pagina inteira. Dos tres pares de paragrafos
   depois da regua, dois fecham com 6px e o da secao "4. Armazenamento e
   compartilhamento de dados" fecha com 10 — com a MESMA forma dos outros dois
   (<h3>, paragrafo de duas linhas, paragrafo de uma). Procurei regra que os
   separasse e nao ha nenhuma: a marcacao do canvas e escrita a mao. O que
   distingue este caso e so o que vem depois — aqui o segundo paragrafo anuncia
   uma lista.
   Fica reproduzido, e nao "corrigido em silencio", pelo criterio do projeto: o
   tema reproduz o que o canvas RENDERIZA. Se a Ana normalizar o espacamento da
   peca, esta regra deve cair junto — ela existe so para nao deixar 4px de
   divergencia permanente na metade de baixo da pagina. */
.mfb-prosa--doc hr ~ p:has(+ p + ul) { margin-bottom: 10px; }
/* O ultimo bloco nao empurra o rodape — o respiro de baixo e todo do corpo,
   como no canvas (ultimo paragrafo com margem zero e 100px ate o rodape). */
.mfb-prosa--doc > :last-child { margin-bottom: 0; }
/* O recuo da lista soma ao respiro do corpo, porque quem carrega os dois e o
   MESMO elemento: a <ul> e filha direta de `.mfb-prosa--doc` e ja recebe
   `padding: 0 32px` da regra de container acima. 32 + 20 = 52. Escrever so os
   20px do canvas apagaria o respiro e jogaria a lista para a borda; e o
   seletor precisa repetir a cadeia de `:not()` porque a regra de container tem
   tres classes e venceria uma versao curta. */
.mfb-prosa--doc ul,
.mfb-prosa--doc ol { margin: 0 0 10px; }
.mfb-prosa--doc > ul:not(.elementor):not(.e-con):not(section),
.mfb-prosa--doc > ol:not(.elementor):not(.e-con):not(section) { padding-left: 52px; }
.mfb-prosa--doc li {
	font-size: 14.5px;
	line-height: 1.8;
	margin-bottom: 0;
}
/* No canvas o negrito nao muda de cor — ele so engorda dentro do paragrafo. A
   regra compartilhada o levanta para `--text-body` (branco puro), e o efeito
   aparece em toda linha que comeca por "Acesso:", "Cancelamento:", etc. */
.mfb-prosa--doc strong { color: inherit; }
/* E o link nao e sublinhado: so a cor muda. Medido `text-decoration: none` nos
   dois enderecos de e-mail da pagina. */
.mfb-prosa--doc a { text-decoration: none; }

/* A regua entre as duas politicas. No canvas e um bloco de 1px com 48px de
   respiro dos dois lados, na largura util do corpo.

   O seletor cita a classe do bloco de proposito. O separador do core traz
   `.has-alpha-channel-opacity { opacity: .4 }` e
   `:not(.is-style-wide) { width: 100px }` — sem a classe a mais aqui, a regua
   sairia curta, centrada e desbotada. O `is-style-wide` do conteudo desarma a
   segunda; esta regra desarma a primeira. */
.mfb-prosa--doc hr.wp-block-separator,
.mfb-prosa--doc hr {
	border: 0;
	height: 1px;
	width: 100%;
	background: var(--border-subtle);
	/* A <hr> e filha direta do corpo e por isso carrega o `padding: 0 32px` do
	   container. Fundo pinta ate a caixa de BORDA por default, entao a regua
	   saia 32px mais longa de cada lado que a do canvas. */
	background-clip: content-box;
	opacity: 1;
	margin: 48px 0;
}

/* --- as tabelas do documento ----------------------------------------------
   Duas coisas ao mesmo tempo aqui.

   A primeira e um DEFEITO, e ele nao e so desta pagina: o WordPress injeta
   `wp-block-table-inline-css` no <head> DEPOIS do link do `mfb.css`, com
   `.wp-block-table td,.wp-block-table th { border: 1px solid; padding: 0.5em }`.
   A especificidade e identica a de `.mfb-prosa td` (uma classe + um elemento),
   entao quem vence e a ordem — e o tema perde. O sintoma medido no ar: borda
   branca opaca (o `1px solid` sem cor cai em `currentColor`) e padding de 7px
   onde o tema pede 12px 14px. As regras abaixo tem tres seletores e vencem sem
   `!important`. As outras duas paginas de prosa seguem com o defeito: nenhuma
   e medida contra canvas, e consertar no escopo compartilhado mudaria o
   desenho delas sem ninguem ter pedido.

   A segunda e o pareamento. O canvas nao usa <table> nenhuma — monta cada
   linha como `display: grid` dentro de um wrapper com borda e raio. Nao da para
   copiar a estrutura (aqui a tabela e um bloco que o cliente edita), entao o
   que se copia e o RESULTADO: as mesmas larguras de coluna, o mesmo respiro, as
   mesmas cores. */
/* A moldura vai na <table>, e NAO no <figure>. O <figure> e filho direto de
   `.mfb-prosa--doc` e por isso carrega o `padding: 0 32px` do corpo — desenhar
   a borda nele a colocaria 32px para fora dos dois lados, que foi o primeiro
   resultado medido: duas faixas de 46x421 em x=334 e x=1060, onde a referencia
   tem a linha em 372 e 1068. O <figure> so guarda o respiro de baixo. */
.mfb-prosa--doc .wp-block-table { margin: 0 0 36px; }
.mfb-prosa--doc .wp-block-table table {
	border: 1px solid var(--border-subtle);
	border-radius: 4px;
	/* O default de `border-collapse: separate` e 2px, e ele empurrava cada
	   celula 2px para a direita e para baixo. Media exatamente dx=+2. */
	border-spacing: 0;
	/* Sem isto o raio nao recorta as celulas, que tem fundo proprio. */
	overflow: hidden;
}
/* 48px, e nao 36, antes de a pagina deixar as tabelas e virar prosa corrida.
   E do canvas, escrito a mao na ultima das tres — nao ha regra que o derive.
   Sem este ponto a metade de baixo da pagina sobe 12px inteiros. */
.mfb-prosa--doc .wp-block-table:last-of-type { margin-bottom: 48px; }
/* Daqui para baixo e SO desktop, e o `min-width` nao e estilo — e correcao de
   um defeito medido. O bloco de toque monta a tabela empilhada com seletores de
   especificidade IDENTICA a estes (tres classes/atributos e dois elementos, dos
   dois lados), e como ele mora antes no arquivo, estas regras venciam la
   tambem: cada <td> empilhado ganhava `padding: 12px 16px` e 13,5px de fonte
   onde o canvas pede zero e 12,5. O celular ficou 624px mais alto que a
   referencia, e o `probe` mostrou a pagina inteira deslocada a partir da
   primeira tabela. Subir a especificidade resolveria o sintoma e deixaria a
   armadilha montada para a proxima regra; separar por viewport diz o que se
   quer dizer. */
@media (min-width: 641px) {
	.mfb-prosa--doc .wp-block-table table {
		width: 100%;
		margin: 0;
		/* `separate` com espacamento zero, e nao `collapse`. Com `collapse` o
		   navegador ignora `border-radius` e funde a moldura da tabela com as
		   bordas das celulas — a moldura sumia e o canto ficava reto. Com
		   `separate` cada celula desenha a propria linha de topo, e a primeira
		   fica encostada na moldura: sao DUAS linhas de 1px a 12% de alfa, uma
		   sobre a outra, que e exatamente o que o canvas renderiza (moldura em
		   y=479,5 e borda da primeira linha em y=480,5). */
		border-collapse: separate;
		border-spacing: 0;
		/* As larguras vem do canvas, entao a tabela nao pode negocia-las com o
		   conteudo. */
		table-layout: fixed;
	}
	.mfb-prosa--doc .wp-block-table thead { border-bottom: 0; }
	.mfb-prosa--doc .wp-block-table th,
	.mfb-prosa--doc .wp-block-table td {
		border: 0;
		border-top: 1px solid var(--border-subtle);
		text-align: left;
		vertical-align: top;
		color: var(--text-muted);
	}

	/* Duas colunas: a primeira celula JA e o rotulo da segunda, e por isso o canvas
	   nao desenha cabecalho aqui. O <thead> continua no HTML — o
	   `inc/tabelas-responsivas.php` conta os <th> para saber quantas colunas a
	   tabela tem, e e dessa contagem que sai o empilhamento no toque. Escondido por
	   CSS ele some do desenho e continua servindo de fonte; apagado do conteudo,
	   `data-mfb-colunas` deixaria de ser emitido e a tabela voltaria a rolar de
	   lado no celular, que e o defeito que aquele arquivo existe para corrigir. */
	.mfb-prosa--doc .wp-block-table table[data-mfb-colunas="2"] thead { display: none; }
	.mfb-prosa--doc .wp-block-table table[data-mfb-colunas="2"] td {
		padding: 12px 16px;
		font-size: 13.5px;
		line-height: 1.5;
	}
	.mfb-prosa--doc .wp-block-table table[data-mfb-colunas="2"] td:first-child {
		width: 33.333%;
		background: var(--bg-alt);
		color: var(--branco);
		font-weight: 700;
	}

	/* Tres colunas ou mais — hoje so "Recursos do Convenio", com quatro. Aqui o
	   canvas MANTEM o cabecalho, porque a primeira coluna deixa de ser rotulo e
	   passa a ser dado. Conferido na captura antes de escrever a regra: a decisao
	   de esconder cabecalho vale para duas colunas e so. */
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) th {
		padding: 12px 14px;
		font-size: 12.5px;
		line-height: 1.5;
		font-weight: 700;
		background: var(--bg-alt);
		color: var(--branco);
		border-top: 0;
	}
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) td {
		padding: 12px 14px;
		font-size: 13px;
		line-height: 1.5;
		color: var(--branco);
	}
	/* 30 / 25 / 25 / 20, medidos (208,2 · 173,5 · 173,5 · 138,8 sobre 694px). */
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) th:nth-child(1) { width: 30%; }
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) th:nth-child(2),
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) th:nth-child(3) { width: 25%; }
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) th:nth-child(4) { width: 20%; }
	/* A coluna do codigo orcamentario e a unica apagada da tabela, e a ultima linha
	   e a unica em negrito. Sao escolhas do canvas, celula a celula — nao ha regra
	   por tras delas alem de "e o TOTAL". */
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) td:nth-child(2) { color: var(--text-muted); }
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) tbody tr:last-child td { font-weight: 700; }
}

/* --- o toque --------------------------------------------------------------
   O empilhamento das tabelas ja e o do canvas e nao se toca aqui: rotulo em
   `--amarelo` a 11,5px com `.02em` para duas colunas, 13px para tres ou mais.
   Medido, bate. O que muda no toque e so a tipografia da prosa e o respiro
   lateral — a `.mfb-prosa` compartilhada cai para 16px de padding, e o canvas
   mantem 32. */
@media (max-width: 640px) {
	.mfb-prosa--doc > *:not(.elementor):not(.e-con):not(section) {
		padding-left: 32px;
		padding-right: 32px;
	}
	/* Nao e redundancia. `.mfb-page-hero__title` e `.mfb-page-hero__sub` do
	   bloco de toque tem UMA classe; as regras `--prosa` la em cima tem duas e
	   venceriam aqui tambem, devolvendo os 42px do desktop ao celular. Mesma
	   armadilha ja documentada no `--assoc`. */
	.mfb-page-hero--prosa { height: auto; min-height: 0; }
	.mfb-page-hero--prosa .mfb-page-hero__title { font-size: 27px; line-height: 1.12; }
	.mfb-page-hero--prosa .mfb-page-hero__sub { font-size: 14.5px; line-height: 1.5; }
	/* 23px no toque contra 22 no desktop: o <h2> do canvas CRESCE na tela
	   menor. E inconsistencia da peca, e esta reproduzida de proposito — o tema
	   reproduz o que o canvas renderiza. */
	.mfb-prosa--doc h2 { font-size: 23px; }
	.mfb-prosa--doc h3 { font-size: 18px; }
	/* O valor da celula empilhada e apagado, como no desktop. O rotulo amarelo
	   ja vem da regra compartilhada. */
	.mfb-prosa--doc .wp-block-table table[data-mfb-colunas] td { color: var(--text-muted); }
	/* Na de quatro colunas o apagado e SO a coluna do codigo, como no desktop:
	   valor e proporcao sao brancos. */
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) td { color: var(--branco); }
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) td:nth-child(2) { color: var(--text-muted); }
	/* E a ultima linha e negrito tambem no toque. A regra irma vive sob
	   `min-width: 641px` e nao alcancava aqui; o `::before` do rotulo herda o
	   peso, entao o valor saia ate 3px fora do lugar. */
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) tbody tr:last-child td { font-weight: 700; }
	.mfb-prosa--doc .wp-block-table table[data-mfb-colunas="2"] td:first-child {
		color: var(--amarelo);
		/* 1,5 e nao o 1,55 compartilhado: 17,25px contra 17,825. Meio pixel por
		   linha empilhada, que ninguem ve isolado e que somava com o item
		   abaixo. */
		line-height: 1.5;
	}
	/* O canvas separa rotulo e valor so com os 2px de padding do rotulo; os 3px
	   de margem da regra compartilhada sao um terceiro espaco. Somados ao meio
	   pixel acima davam 3,563px POR LINHA — 33 linhas empilhadas na pagina, e a
	   metade de baixo descia 90px. Nenhum dos dois aparece numa linha so: o
	   defeito e o acumulo. */
	.mfb-prosa--doc .wp-block-table table[data-mfb-colunas="2"] td { margin-bottom: 0; }
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) td:first-child { color: var(--amarelo); }
	/* A tabela de quatro colunas empilha com numeros DIFERENTES da de duas: 12px
	   de respiro na linha contra 10, e entrelinha 1,5 contra 1,55. Sao duas
	   tabelas na mesma pagina, no mesmo tamanho de tela, com espacamento
	   diferente — inconsistencia da peca, mas desta vez separavel pelo numero de
	   colunas, que e um atributo real do conteudo e nao a posicao da tabela na
	   pagina. Somava 1,48px por linha. */
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) tr { padding: 12px 14px; }
	.mfb-prosa--doc .wp-block-table table:not([data-mfb-colunas="2"]) td { line-height: 1.5; }

	/* --- a tabela que NAO empilha ---------------------------------------
	   A marca vem do CONTEUDO (classe do bloco, posta por
	   `mfb_migra_transparencia_tabela_lado()`), e nao de um seletor por
	   posicao: assim ela viaja com a tabela, aparece no editor em "Classes CSS
	   adicionais" e o cliente decide sem deploy. O canvas trata as duas
	   tabelas de duas colunas desta pagina de formas diferentes no celular —
	   uma empilha com rotulo amarelo, esta fica lado a lado — e e essa
	   diferenca que a classe carrega.

	   Os valores sao os mesmos do desktop, porque no canvas esta tabela nao
	   muda de tratamento a 390px: 1/3 e 2/3, `padding: 12px 16px`, 13,5px com
	   entrelinha 1,5, rotulo branco em negrito sobre `--bg-alt`. Repetidos e
	   nao herdados porque o bloco de desktop vive sob `min-width: 641px`. */
	.mfb-prosa--doc .mfb-tabela-lado-a-lado table[data-mfb-colunas] {
		display: table;
		width: 100%;
		table-layout: fixed;
		white-space: normal;
	}
	.mfb-prosa--doc .mfb-tabela-lado-a-lado table[data-mfb-colunas] tbody { display: table-row-group; }
	.mfb-prosa--doc .mfb-tabela-lado-a-lado table[data-mfb-colunas] tr {
		display: table-row;
		padding: 0;
		border-top: 0;
	}
	.mfb-prosa--doc .mfb-tabela-lado-a-lado table[data-mfb-colunas] td {
		display: table-cell;
		/* A celula alinha pelo TOPO, como no desktop. O default de `table-cell`
		   e `middle`, e com a linha do "Objetivo" tendo sete linhas de valor
		   contra uma de rotulo isso jogava o rotulo para o meio da celula. */
		vertical-align: top;
		border-top: 1px solid var(--border-subtle);
		padding: 12px 16px;
		margin: 0;
		font-size: 13.5px;
		line-height: 1.5;
		color: var(--text-muted);
		/* Reproduz a quebra no meio da palavra. Com 76px uteis na coluna do
		   rotulo, o canvas parte "Abrangencia" em "Abrangenci" / "a" e a linha
		   fica com 2 linhas de altura — 20,25px que se propagavam por toda a
		   pagina abaixo. E feio e e a referencia: mesmo caso ja reproduzido na
		   vaga de /associados/, onde "associado" vira "associ" / "ado". O bloco
		   de toque do canvas aplica `overflow-wrap: anywhere` a todo div e
		   span, e a regra compartilhada aqui declara `normal` de proposito para
		   as tabelas empilhadas — esta e a excecao, escopada a tabela marcada. */
		overflow-wrap: anywhere;
	}
	.mfb-prosa--doc .mfb-tabela-lado-a-lado table[data-mfb-colunas="2"] td:first-child {
		/* `calc(100% / 3)` e nao `33.333%`. Sobre os 324px uteis do celular,
		   33,333% da 107,99892, que o Chromium trunca para 107,984 — um
		   LayoutUnit (1/64 px) a menos que os 108 do canvas. O desvio aparecia
		   como dx=-0,016 em toda a coluna de valor. No desktop os dois dao o
		   mesmo numero, e por isso la a porcentagem ficou como estava. */
		width: calc(100% / 3);
		background: var(--bg-alt);
		color: var(--branco);
		font-weight: 700;
		font-size: 13.5px;
		letter-spacing: normal;
		padding: 12px 16px;
	}
}


/* ===========================================================================
 * Estados de hover e de clique — rodada de revisao de arte de 01/09/2026.
 *
 * O vocabulario NAO foi inventado aqui. Esta escrito, em duas frases da Ana:
 *
 *   hover  = a caixa sobe 2px; nada muda de cor e nada sublinha
 *            "Tirar grifado ... Deve permanecer branco no hover, apenas se
 *            movimentando para cima"           (86ak968xu, Menu)
 *            "Tirar grifado e manter apenas o movimento do box"
 *                                              (86ak98dj2, Feiras e Eventos)
 *   clique = amarelo
 *            "Ao clicar o botao fica amarelo"  (86ak968xu, Menu)
 *
 * Este bloco e curto de proposito. Oito dos dez cartoes de hover se resolveram
 * REMOVENDO duas declaracoes que vazavam de `a:hover` (mfb-tokens.css e o topo
 * deste arquivo) — uma causa, oito sintomas. Sobra o que a remocao nao alcanca:
 * o alvo errado (parceiros), o hover que estava desligado (contato) e o estado
 * de clique, que nunca existiu.
 *
 * NADA aqui entra em captura estatica: o `check` do canvas-pair fotografa com
 * o ponteiro estacionado em [1430, 6] e sem clique nenhum. Ainda assim as dez
 * medicoes foram refeitas DEPOIS desta secao existir — inferir que hover nao
 * mexe no portao e barato; medir e o que vale.
 * ------------------------------------------------------------------------- */

/* --- Clique ---------------------------------------------------------------
 * No celular o realce nativo do toque era a UNICA resposta a um clique: o
 * trompete e o moire saiam fora em `pointer: coarse`, entao no iPhone da Ana
 * nenhum botao respondia. Sai o realce cinza do sistema, entra o amarelo que
 * ela pediu.
 *
 * O trompete foi removido em 03/09/2026 e o moire ficou, agora em
 * `initMoireClique()` (assets/js/mfb.js), com a MESMA guarda de toque — entao
 * no celular estes `:active` continuam sendo a unica resposta ao clique. */
html { -webkit-tap-highlight-color: transparent; }

.mfb-nav-item:active,
.mfb-mobile-nav a:active,
.mfb-footer__nav a:active { color: var(--amarelo); }

/* No botao o clique nao pode ser cor: metade deles JA e amarelo
   (`.mfb-btn--highlight`), e amarelo sobre amarelo nao sinaliza nada. Ele
   afunda — volta dos 2px do hover para o lugar e encolhe 2%. */
.mfb-btn { transition: transform .15s ease; }
.mfb-btn:active { transform: translateY(0) scale(.98); }

/* --- Parceiros: quem se move e a CAIXA, nao o logo dentro dela -------------
 * "o box todo deve se movimentar e nao apenas os logos dentro" (86ak96h03).
 * A ancora mora DENTRO do `.mfb-logo-wall__item`, entao o `translateY` global
 * pegava so ele: o logo subia e a caixa branca ficava parada embaixo.
 *
 * `:has(a)` existe para nao prometer clique onde nao ha link — parceiro sem
 * URL cadastrada nao ganha movimento. Se o browser nao suportar `:has()`, a
 * regra e descartada inteira e o comportamento volta ao de hoje: degrada para
 * o estado anterior, nao para um estado quebrado. */
.mfb-logo-wall__item { transition: transform .15s ease; }
.mfb-logo-wall__item:has(a):hover { transform: translateY(-2px); }
.mfb-logo-wall__item a:hover { transform: none; }

/* --- Prosa: aqui o sublinhado E o desenho ---------------------------------
 * Link dentro de texto corrido (`/transparencia/`, paginas do Elementor) segue
 * sublinhado sempre e ganha o amarelo no hover. E a excecao declarada a regra
 * de cima, e e o unico lugar onde `--link-hover` ainda serve para alguma
 * coisa. */
.mfb-prosa a:hover { color: var(--link-hover); text-decoration: underline; }

/* --- Entrada das seções: textos e imagens aparecem quando a página rola ----
 * Preset "Palco" do playground (`tmp/playground-fadein.html`, 17/09/2026):
 * texto cresce de .92, imagem de .9, os dois em back-out — passam um fio do
 * ponto e assentam. Nada aqui é `animation`: é `transition`, para não brigar
 * com `mfbNavWave`, `mfbKenBurns` e o contador dos stats, que seguem donos das
 * suas animações. O hero fica de fora pelo mesmo motivo.
 *
 * A cascata é UMA regra: o `mfb.js` escreve o índice de cada elemento em
 * `--rv-i` e o `calc()` vira atraso — nenhum seletor por elemento, e mudar o
 * ritmo é trocar `--rv-step`. A imagem carrega `--rv-base` de 60ms a mais.
 *
 * Tudo mora sob `html.mfb-js`, que um script inline no `<head>` liga antes do
 * primeiro paint. Sem JS a classe não existe, a regra não casa e a página
 * nasce inteira — invisível é a pior falha possível para uma animação de
 * entrada. Sem `IntersectionObserver` o `mfb.js` TIRA a classe pelo mesmo
 * caminho.
 *
 * Nunca marcar `<a>` nem `<button>`: o `translateY(-2px)` global do hover
 * (lá em cima) e o `transform: none` do `.is-in` têm a mesma especificidade,
 * e quem vence é a ordem do arquivo. Marca-se o bloco em volta.
 *
 * Sem `will-change`: transição em `transform` já roda composta enquanto
 * acontece, e a propriedade permanente em dezenas de blocos manteria dezenas
 * de camadas vivas depois que a entrada acabou. */
.mfb-js .mfb-rv {
	--rv-step: 80ms;
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: calc(var(--rv-base, 0ms) + var(--rv-i, 0) * var(--rv-step));
}
.mfb-js .mfb-rv[data-rv="text"] { transform: scale(.92); transition-duration: 600ms; }
.mfb-js .mfb-rv[data-rv="media"] { --rv-base: 60ms; transform: scale(.9); transition-duration: 800ms; }
.mfb-js .mfb-rv.is-in { opacity: 1; transform: none; }

/* Quem pediu menos movimento recebe só a opacidade, curta e sem cascata. O
   `[data-rv]` no seletor não é enfeite: sem ele a regra perde, em
   especificidade, para as duas de cima que escrevem `transform` e a duração —
   e o bloco reduzido continuava crescendo de .92 (medido em 17/09/2026). */
@media (prefers-reduced-motion: reduce) {
	.mfb-js .mfb-rv[data-rv] { transform: none; transition: opacity .3s ease-out; transition-delay: 0s; }
}