/* MOBRAL Digital — folha única, desenhada sobre o Material Design 3.
 *
 * Por que Material 3 (decisão do Max, 19/08/2026): o público deste portal usa
 * Android — 80% das pessoas com 60+ acessam a internet EXCLUSIVAMENTE pelo
 * celular (CETIC.br/TIC Domicílios). O Material é a linguagem que o aparelho
 * delas já fala: o botão, o cartão, a barra e o campo de busca aqui têm a mesma
 * forma que no telefone. Aprender a usar o site deixa de ser uma tarefa a mais.
 *
 * Três exigências convivem, nesta ordem de prioridade quando colidem:
 *
 *   ACESSIBILIDADE. O leitor tem 60 anos, um celular que não é novo e medo de
 *   tocar no lugar errado. Corpo em 20px, contraste medido acima de 7:1, alvo de
 *   toque de 48px (o Material pede 48dp — a mesma régua), nada que se mexa sem
 *   permissão.
 *
 *   FIDELIDADE AO MATERIAL 3. Papéis de cor, escala tipográfica, escala de
 *   forma, elevação, camada de estado e curvas de movimento são os da
 *   especificação. As cores vêm de md3-tokens.css, GERADO pelo algoritmo HCT do
 *   Google a partir do coral da marca — não são um "parecido com".
 *
 *   ACABAMENTO. O portal fala de dinheiro e de golpe. Site que parece
 *   improvisado perde a discussão antes da primeira frase.
 *
 * Onde o Material mira AA (4,5:1) e este portal exige AAA (7:1), vence o portal:
 * o gate está em scripts/gerar-tokens-md3.py e reprova o build, não o revisor.
 */

/* ═══════════════════════════════════════════════════════════════ fontes ═══ */
/* Roboto — a fonte do Material e do próprio Android. `local()` vem primeiro de
   propósito: em Android e em qualquer máquina que já tenha Roboto instalada, o
   navegador usa a cópia local e NÃO baixa nada. Só quem não tem (iOS, Windows
   antigo) puxa os 34kb do arquivo variável, subsetado para o alfabeto que este
   portal escreve. É a mesma lógica de sempre aqui: o custo cai justamente no
   aparelho mais fraco. */
@font-face {
	font-family: 'Roboto Mobral';
	src: local('Roboto'), local('Roboto Regular'),
	     url('../fonts/roboto-mobral.woff2') format('woff2-variations'),
	     url('../fonts/roboto-mobral.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ═════════════════════════════════════════════ tokens de sistema MD3 ═══ */
/* As cores ficam em md3-tokens.css (arquivo gerado). Aqui ficam os outros
   sistemas do Material 3: tipografia, forma, elevação, estado e movimento. */
:root {
	/* ── escala tipográfica ──────────────────────────────────────────────
	   A escala do Material é definida em px (body-large = 16). Aqui ela é
	   expressa em rem sobre uma base de 20px, ou seja, 25% maior em todos os
	   degraus. Não é enfeite: é o corpo que este público consegue ler sem
	   aproximar o telefone do rosto, e o Material manda respeitar o tamanho de
	   fonte do sistema — que é justamente o que o rem faz. */
	--md-display-large:   3.5625rem;   /* 57px × 1.25 */
	--md-display-medium:  2.8125rem;
	--md-display-small:   2.25rem;
	--md-headline-large:  2rem;
	--md-headline-medium: 1.75rem;
	--md-headline-small:  1.5rem;
	--md-title-large:     1.375rem;
	--md-title-medium:    1rem;
	--md-title-small:     .875rem;
	--md-body-large:      1rem;
	--md-body-medium:     .875rem;
	--md-body-small:      .75rem;
	--md-label-large:     .875rem;
	--md-label-medium:    .75rem;
	--md-label-small:     .6875rem;

	--md-fonte: 'Roboto Mobral', Roboto, system-ui, -apple-system, 'Segoe UI',
	            'Helvetica Neue', Arial, sans-serif;

	/* ── escala de forma ────────────────────────────────────────────────── */
	--md-shape-xs:    4px;
	--md-shape-s:     8px;
	--md-shape-m:    12px;
	--md-shape-l:    16px;
	--md-shape-xl:   28px;
	--md-shape-full: 999px;

	/* ── elevação ────────────────────────────────────────────────────────
	   As sombras da especificação: uma sombra-chave curta e uma ambiente mais
	   aberta. Nunca uma sombra difusa só — é o que faz layout parecer template
	   comprado. */
	--md-elev-0: none;
	--md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
	--md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
	--md-elev-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
	--md-elev-4: 0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
	--md-elev-5: 0 4px 4px rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);

	/* ── camada de estado ────────────────────────────────────────────────
	   No Material, o retorno visual de hover/foco/toque não é trocar a cor: é
	   sobrepor a cor do CONTEÚDO com uma opacidade fixa. Assim qualquer
	   componente responde igual, em qualquer cor, sem uma variante nova. */
	--md-state-hover:   .08;
	--md-state-focus:   .10;
	--md-state-pressed: .10;

	/* ── movimento ───────────────────────────────────────────────────────
	   Curvas "emphasized"/"standard" da especificação. Curtas: animação longa em
	   celular antigo vira travamento, e este é o aparelho do leitor. */
	--md-easing:          cubic-bezier(.2, 0, 0, 1);
	--md-easing-acelera:  cubic-bezier(.3, 0, .8, .15);
	--md-dur-curta:  150ms;
	--md-dur-media:  250ms;

	/* ── superfície de destaque (abertura e rodapé) ──────────────────────
	   Decisão do Max, 19/08: papel branco no site inteiro, incluindo os dois
	   blocos que emolduravam a página em carvão. É o padrão dos produtos Google
	   — a cor entra por componente (botão, chip, banner), não por bloco inteiro.
	   Um degrau de container basta para o bloco existir sem virar uma parede.
	   Como é papel do sistema, acompanha o tema escuro sozinho. */
	--mb-destaque-fundo: var(--md-sys-color-surface-container-low);
	--mb-destaque-texto: var(--md-sys-color-on-surface);

	/* A capa do card é uma IMAGEM, não superfície de leitura: continua escura nos
	   dois temas, porque é o escuro que faz a ilustração do celular e a
	   palavra-chave saltarem na grade. */
	--mb-capa-fundo: var(--md-sys-color-inverse-surface);
	--mb-capa-texto: var(--md-sys-color-inverse-on-surface);

	/* ── medidas do portal ─────────────────────────────────────────────── */
	--toque: 48px;               /* alvo mínimo de toque = 48dp do Material */
	--largura: 44rem;            /* medida de leitura, ~70 caracteres */
	--caixa: 70rem;

	/* ── ponte para o vocabulário antigo do tema ────────────────────────
	   Vários PHP do tema (telas, ilustrações, ferramentas) escrevem var(--tinta)
	   e var(--papel) direto no SVG. Em vez de caçar cada ocorrência e arriscar
	   deixar uma para trás, os nomes antigos passam a APONTAR para os papéis do
	   Material. Um dia somem; enquanto existirem, estão certos. */
	--tinta:        var(--md-sys-color-on-surface);
	--tinta-fraca:  var(--md-sys-color-on-surface-variant);
	--papel:        var(--md-sys-color-surface);
	--papel-morno:  var(--md-sys-color-surface-container-low);
	--linha:        var(--md-sys-color-outline-variant);
	--linha-forte:  var(--md-sys-color-outline);
	--marca:        var(--md-mobral-link);
	--marca-escura: var(--md-mobral-link-visitado);
	--carvao:       var(--md-sys-color-inverse-surface);
	--carvao-claro: var(--md-sys-color-on-surface-variant);
	--coral:        var(--md-mobral-marca);
	--coral-texto:  var(--md-mobral-link);
	--coral-fundo:  var(--md-sys-color-primary);
	--offwhite:     var(--md-sys-color-surface-container-low);
	--alerta:       var(--md-sys-color-on-error-container);
	--alerta-fundo: var(--md-sys-color-error-container);
	--atencao-fundo: var(--md-sys-color-tertiary-container);
	--atencao-borda: var(--md-sys-color-tertiary);
	--titulo: var(--md-fonte);
	--corpo:  var(--md-fonte);
	--raio:   var(--md-shape-l);
	--raio-p: var(--md-shape-s);
	--sombra: var(--md-elev-1);
	--sombra-alta: var(--md-elev-3);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* No escuro, `inverse-surface` vira CLARO — e a capa acenderia uma
		   lâmpada em cada card da grade. Um container alto resolve. */
		--mb-capa-fundo: var(--md-sys-color-surface-container-highest);
		--mb-capa-texto: var(--md-sys-color-on-surface);
	}
}

/* ═════════════════════════════════════════════════════════════════ base ═══ */
* { box-sizing: border-box; }

html {
	font-size: 125%;               /* 20px de base */
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: hidden;            /* a página nunca anda de lado */
	background: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	font-family: var(--md-fonte);
	font-size: var(--md-body-large);
	line-height: 1.6;
	letter-spacing: .0088em;       /* tracking de body-large no Material */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
	font-family: var(--md-fonte);
	font-weight: 400;              /* headline do Material é regular, não bold */
	letter-spacing: 0;
	line-height: 1.25;
	text-wrap: balance;
	color: var(--md-sys-color-on-surface);
}

a {
	color: var(--md-mobral-link);
	text-underline-offset: 3px;
	text-decoration-thickness: .08em;
}
a:hover { color: var(--md-mobral-link-visitado); }

/* Foco visível do Material: anel de 3px na cor primária, com folga. Nunca
   `outline: none` em lugar nenhum desta folha — quem navega por teclado precisa
   enxergar onde está, e aqui isso inclui quem não consegue mirar no toque. */
:focus-visible {
	outline: 3px solid var(--md-sys-color-primary);
	outline-offset: 3px;
	border-radius: var(--md-shape-xs);
}

.mb-pular {
	position: absolute; left: -9999px;
	background: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	padding: 1rem 1.25rem; z-index: 100; font-weight: 500;
	border-radius: var(--md-shape-s);
}
.mb-pular:focus { left: .5rem; top: .5rem; }

.mb-caixa { max-width: var(--caixa); margin: 0 auto; padding-inline: 1.25rem; }
.mb-vazio { color: var(--md-sys-color-on-surface-variant); }

/* ══════════════════════════════════════════════ camada de estado MD3 ═══ */
/* Um único mecanismo para todo componente que responde ao dedo: um véu da cor do
   próprio conteúdo, na opacidade que a especificação define. Quem "veste" a
   camada declara `position: relative` e a classe. */
.md-estado { position: relative; isolation: isolate; }
.md-estado::after {
	content: '';
	position: absolute; inset: 0;
	background: currentColor;
	opacity: 0;
	border-radius: inherit;
	pointer-events: none;
	transition: opacity var(--md-dur-curta) var(--md-easing);
	z-index: -1;
}
.md-estado:hover::after  { opacity: var(--md-state-hover); }
.md-estado:focus-visible::after { opacity: var(--md-state-focus); }
.md-estado:active::after { opacity: var(--md-state-pressed); }

/* ══════════════════════════════════════════════════════════════ botões ═══ */
/* Botões do Material 3: forma "full" (pílula), rótulo em label-large, altura de
   toque de 48px. As quatro variantes da especificação — filled, tonal, outlined
   e text — cobrem tudo o que o portal pede. */
.mb-botao {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: var(--toque); padding: .65rem 1.5rem;
	border: none; border-radius: var(--md-shape-full);
	font-family: var(--md-fonte); font-size: var(--md-label-large);
	font-weight: 500; letter-spacing: .0071em;
	text-decoration: none; cursor: pointer;
	position: relative; isolation: isolate;
	transition: box-shadow var(--md-dur-curta) var(--md-easing);
}
.mb-botao::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-botao:hover::after  { opacity: var(--md-state-hover); }
.mb-botao:active::after { opacity: var(--md-state-pressed); }

.mb-botao--principal {          /* filled button */
	background: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
}
.mb-botao--principal:hover { box-shadow: var(--md-elev-1); color: var(--md-sys-color-on-primary); }

.mb-botao--tonal {              /* filled tonal button */
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}
.mb-botao--tonal:hover { box-shadow: var(--md-elev-1); color: var(--md-sys-color-on-secondary-container); }

.mb-botao--vazado {             /* outlined button */
	background: transparent;
	color: var(--md-sys-color-primary);
	border: 1px solid var(--md-sys-color-outline);
}
.mb-botao--vazado:hover { color: var(--md-sys-color-primary); }

.mb-botao--texto {              /* text button */
	background: transparent; padding-inline: 1rem;
	color: var(--md-sys-color-primary);
}

/* ═══════════════════════════════════════════════ faixa de emergência ═══ */
/* Único elemento presente em toda página. 451 dos 2.199 termos do radar são de
   quem já caiu — e quem está nessa situação não procura no menu.
   No vocabulário do Material isto é um `banner` de erro: par error/on-error, que
   é o único par do sistema que pode gritar sem quebrar a régua de contraste. */
.mb-emergencia {
	display: flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: var(--toque); padding: .7rem 1.25rem;
	background: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);
	font-size: var(--md-label-large); font-weight: 500; letter-spacing: .0071em;
	text-decoration: none; text-align: center;
	position: relative; isolation: isolate;
}
.mb-emergencia::after {
	content: ''; position: absolute; inset: 0; background: currentColor;
	opacity: 0; z-index: -1; transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-emergencia:hover::after { opacity: var(--md-state-hover); }
.mb-emergencia strong { font-weight: 700; }
.mb-emergencia__seta { transition: transform var(--md-dur-curta) var(--md-easing); }
.mb-emergencia:hover { color: var(--md-sys-color-on-error); }
.mb-emergencia:hover .mb-emergencia__seta { transform: translateX(3px); }

/* ═════════════════════════════════════════════════════════════════ topo ═══ */
/* Top app bar do Material: superfície clara, sem borda, elevação só quando a
   página rola. A barra escura de antes era bonita e estranha ao aparelho — no
   Android a barra do sistema é clara e o conteúdo é que dá cor. */
.mb-topo {
	background: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	position: sticky; top: 0; z-index: 40;
	transition: background var(--md-dur-media) var(--md-easing),
	            box-shadow var(--md-dur-media) var(--md-easing);
}
/* A elevação aparece quando há conteúdo passando por baixo — é o "on scroll" da
   especificação, feito sem uma linha de JavaScript. */
.mb-topo.is-rolado {
	background: var(--md-sys-color-surface-container);
	box-shadow: var(--md-elev-2);
}
.mb-topo__interno {
	max-width: var(--caixa); margin: 0 auto;
	padding: .5rem 1.25rem;
	display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem 1rem;
}
.mb-marca {
	display: inline-flex; align-items: center; min-height: var(--toque);
	color: var(--md-sys-color-on-surface); text-decoration: none;
	padding-right: .5rem;
}
.mb-marca img, .mb-marca svg { display: block; height: 2.1rem; width: auto; }

/* Botão de menu: icon button do Material — alvo de 48px, forma redonda,
   camada de estado. */
.mb-menu-botao {
	display: none; align-items: center; justify-content: center; gap: .5rem;
	min-height: var(--toque); min-width: var(--toque); padding: 0 1rem;
	background: transparent; border: none;
	border-radius: var(--md-shape-full);
	color: var(--md-sys-color-on-surface-variant);
	font-family: var(--md-fonte); font-size: var(--md-label-large); font-weight: 500;
	cursor: pointer; position: relative; isolation: isolate;
}
.mb-menu-botao::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-menu-botao:hover::after { opacity: var(--md-state-hover); }
.mb-menu-botao:active::after { opacity: var(--md-state-pressed); }
/* As três barras do ícone, desenhadas em CSS: um SVG a menos para baixar. */
.mb-menu-botao__barras,
.mb-menu-botao__barras::before,
.mb-menu-botao__barras::after {
	display: block; width: 1.1rem; height: 2px; background: currentColor;
	border-radius: 2px; content: '';
}
.mb-menu-botao__barras { position: relative; }
.mb-menu-botao__barras::before { position: absolute; top: -6px; }
.mb-menu-botao__barras::after  { position: absolute; top: 6px; }

/* ═════════════════════════════════════════════════════════ busca (MD3) ═══ */
/* Search bar do Material: pílula sobre surface-container-high, campo sem borda,
   texto em body-large. Continua sendo caixa aberta e não ícone de lupa — ícone
   é enigma para quem não cresceu com ele, e este público precisa VER onde
   digitar. O botão "Buscar" fica escrito por extenso pelo mesmo motivo. */
.mb-busca { display: flex; gap: .5rem; align-items: center; }
.mb-busca__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mb-busca__campo {
	flex: 1; min-width: 0;
	min-height: var(--toque); padding: .6rem 1.25rem;
	background: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface);
	border: 1px solid transparent;
	border-radius: var(--md-shape-full);
	font-family: var(--md-fonte); font-size: var(--md-body-large);
}
.mb-busca__campo::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
.mb-busca__campo:focus {
	background: var(--md-sys-color-surface-container-highest);
	border-color: var(--md-sys-color-primary);
	outline-offset: 1px;
}
.mb-busca__botao {
	min-height: var(--toque); padding: 0 1.35rem;
	background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
	border: none; border-radius: var(--md-shape-full);
	font-family: var(--md-fonte); font-size: var(--md-label-large); font-weight: 500;
	cursor: pointer; position: relative; isolation: isolate;
}
.mb-busca__botao::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-busca__botao:hover::after { opacity: var(--md-state-hover); }
.mb-busca--grande { max-width: 32rem; margin-top: 2rem; }

/* ═══════════════════════════════════════════════ faixa de assuntos ═══ */
/* Fila de chips do Material que desliza sozinha. Pausa no hover e no foco, e
   some inteira para quem pediu menos movimento. */
.mb-assuntos {
	background: var(--md-sys-color-surface-container-low);
	border-top: 1px solid var(--md-sys-color-outline-variant);
	overflow: hidden; padding: .6rem 0;
}
.mb-assuntos__pista { display: flex; width: max-content; animation: mb-desliza 46s linear infinite; }
.mb-assuntos:hover .mb-assuntos__pista,
.mb-assuntos:focus-within .mb-assuntos__pista { animation-play-state: paused; }
.mb-assuntos__grupo { display: flex; align-items: center; gap: .5rem; padding-right: .5rem; }
.mb-assuntos a {                /* assist chip */
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 40px; padding: 0 1rem;
	background: var(--md-sys-color-surface-container);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-shape-s);
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-label-large); font-weight: 500; letter-spacing: .0071em;
	text-decoration: none; white-space: nowrap;
	position: relative; isolation: isolate;
}
.mb-assuntos a::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-assuntos a::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--md-mobral-marca); flex: 0 0 auto;
}
.mb-assuntos a:hover::after, .mb-assuntos a:focus-visible::after { opacity: var(--md-state-hover); }
.mb-assuntos a:hover { color: var(--md-sys-color-on-surface); }
@keyframes mb-desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══════════════════════════════════════════════════ abertura (home) ═══ */
/* Hero na superfície de destaque do portal (ver --mb-destaque-fundo): um degrau
   acima do papel, com o par de contraste garantido pelo sistema. */
.mb-abertura {
	position: relative; overflow: hidden;
	background: var(--mb-destaque-fundo);
	color: var(--mb-destaque-texto);
}
.mb-abertura::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(60rem 30rem at 85% 0%, color-mix(in srgb, var(--md-mobral-marca) 9%, transparent), transparent 70%),
		radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--mb-destaque-texto) 7%, transparent) 1px, transparent 0);
	background-size: auto, 22px 22px;
	pointer-events: none;
}
.mb-abertura__interno {
	position: relative; max-width: var(--caixa); margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
	display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3rem;
}
/* Chip de contorno (assist chip do Material). Antes era um retângulo com véu
   claro por cima do hero: sobre a trama de pontos virava uma mancha cinza sem
   forma. Contorno fino diz "isto é um rótulo" sem competir com o título. */
.mb-abertura__selo {
	display: inline-flex; align-items: center; gap: .5rem;
	margin: 0 0 1.25rem; padding: .45rem 1.1rem;
	background: transparent;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-shape-s);
	font-size: var(--md-label-large); font-weight: 500;
	color: var(--md-sys-color-on-surface-variant);
}
.mb-abertura__titulo {
	margin: 0 0 1rem;
	font-size: clamp(var(--md-headline-medium), 4.6vw, var(--md-display-small));
	line-height: 1.15; font-weight: 400; max-width: 17ch;
	color: var(--mb-destaque-texto);
}
.mb-abertura__linha {
	margin: 0 0 1.75rem; max-width: 46ch;
	font-size: var(--md-body-large); line-height: 1.6;
	color: var(--md-sys-color-on-surface-variant);
}
.mb-abertura__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.mb-abertura__mostra { display: flex; justify-content: center; }
.mb-abertura__mostra .mb-tela { margin: 0; }
.mb-abertura__mostra .mb-tela__svg { max-width: 15rem; filter: drop-shadow(0 14px 34px rgba(0,0,0,.16)); }

/* ═══════════════════════════════════════ bloco "comece por aqui" ═══ */
/* Card de erro do Material: error-container é a superfície que o sistema
   reserva para "algo aconteceu", e é exatamente o caso de quem chega aqui. */
.mb-agora { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.mb-agora__interno { max-width: var(--caixa); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) 1.25rem; }
.mb-agora__cabecalho { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.mb-agora__icone { width: 2.4rem; height: 2.4rem; color: var(--md-sys-color-error); flex: 0 0 auto; }
.mb-agora__titulo { margin: 0; font-size: var(--md-headline-small); color: var(--md-sys-color-on-error-container); }
.mb-agora__linha { margin: .35rem 0 0; font-size: var(--md-body-medium); color: var(--md-sys-color-on-error-container); opacity: .85; }
.mb-agora__lista {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: .5rem;
}
.mb-agora__lista a {            /* list item do Material, em superfície própria */
	/* flex-start, não center: com três linhas de texto o marcador centralizado
	   flutuava no meio do parágrafo e o olho perdia onde o item começa. */
	display: flex; align-items: flex-start; gap: .75rem;
	min-height: 56px; padding: .75rem 1.1rem;
	background: var(--md-sys-color-surface);
	border-radius: var(--md-shape-m);
	color: var(--md-sys-color-on-surface);
	font-size: var(--md-body-large); line-height: 1.4; text-decoration: none;
	position: relative; isolation: isolate;
	transition: box-shadow var(--md-dur-curta) var(--md-easing);
}
.mb-agora__lista a::before {
	content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .55em;
	border-radius: 50%; background: var(--md-sys-color-error);
}
.mb-agora__lista a::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-agora__lista a:hover { box-shadow: var(--md-elev-1); color: var(--md-sys-color-on-surface); }
.mb-agora__lista a:hover::after { opacity: var(--md-state-hover); }

/* ══════════════════════════════════════════════════════════ listagens ═══ */
.mb-recentes__interno, .mb-territorios__interno, .mb-lista {
	max-width: var(--caixa); margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
}
.mb-recentes h2, .mb-territorios h2, .mb-relacionados h2, .mb-passos h2, .mb-lista__titulo {
	margin: 0 0 1.75rem;
	font-size: var(--md-headline-small); font-weight: 400;
	color: var(--md-sys-color-on-surface);
}
.mb-lista__titulo { font-size: var(--md-headline-medium); }
.mb-lista__descricao { margin: -1rem 0 2rem; max-width: 52ch; color: var(--md-sys-color-on-surface-variant); }
.mb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr)); gap: 2rem 1.75rem; }

/* ═══════════════════════════════════════════════════════════════ cards ═══ */
/* Card do Material 3, variante "filled": superfície de container, canto large
   (16px), sem borda, elevação só na interação. A capa tem três camadas — fundo
   com gradiente, a palavra-chave do assunto em tipografia gigante e as telas do
   próprio artigo em perspectiva. É o que faz o olho parar numa grade. A capa PNG
   com título é outra peça: existe para o og:image do Discover. */
.mb-card {
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-shape-l);
	overflow: hidden;
	transition: box-shadow var(--md-dur-media) var(--md-easing);
}
.mb-card:hover { box-shadow: var(--md-elev-2); }
.mb-card__link {
	display: flex; flex-direction: column; height: 100%;
	text-decoration: none; color: inherit;
	position: relative; isolation: isolate;
}
.mb-card__link::after {
	content: ''; position: absolute; inset: 0; background: currentColor;
	opacity: 0; z-index: -1; transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-card__link:hover::after { opacity: var(--md-state-hover); }
.mb-card__link:active::after { opacity: var(--md-state-pressed); }

.mb-capa {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(145deg,
		color-mix(in srgb, var(--mb-capa-fundo) 88%, white) 0%,
		var(--mb-capa-fundo) 46%,
		color-mix(in srgb, var(--mb-capa-fundo) 88%, black) 100%);
	color: var(--mb-capa-texto);
}
.mb-capa--clara {
	background: linear-gradient(145deg,
		var(--md-sys-color-surface) 0%,
		var(--md-sys-color-surface-container) 52%,
		var(--md-sys-color-surface-container-highest) 100%);
	color: var(--md-sys-color-on-surface);
}
/* Coral cheio: a variação que grita na listagem. Fica em 1 a cada 3 capas — mais
   que isso, o coral deixa de ser destaque e vira ruído. Aqui ele é SUPERFÍCIE,
   nunca texto: a regra de contraste da marca continua valendo. */
.mb-capa--coral {
	background: linear-gradient(150deg,
		color-mix(in srgb, var(--md-mobral-marca) 82%, white) 0%,
		var(--md-mobral-marca) 45%,
		color-mix(in srgb, var(--md-mobral-marca) 84%, black) 100%);
	color: #fff;
}
.mb-capa::before {
	content: '';
	position: absolute; inset: 0; z-index: 0;
	background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
	background-size: 20px 20px;
	opacity: .09;
}
/* Halo por trás das telas: gradiente radial, nunca cor chapada — chapado vira
   marrom sobre o escuro e encardece a peça. */
.mb-capa--tela::after {
	content: '';
	position: absolute; z-index: 0;
	right: -8%; bottom: -26%;
	width: 68%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--md-mobral-marca) 46%, transparent) 0%,
		color-mix(in srgb, var(--md-mobral-marca) 16%, transparent) 48%,
		transparent 72%);
}
.mb-capa--coral::after {
	background: radial-gradient(circle at 50% 50%,
		rgba(255,255,255,.32) 0%, rgba(255,255,255,.10) 48%, rgba(255,255,255,0) 72%);
}
.mb-capa__palavra {
	position: absolute; z-index: 0;
	left: 1.15rem; bottom: 1rem;
	max-width: 52%;
	font-family: var(--md-fonte);
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	font-weight: 500;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: lowercase;
	opacity: .22;
	pointer-events: none; user-select: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-capa--coral .mb-capa__palavra { opacity: .30; }

/* Telas: a de trás menor, mais inclinada e esmaecida; a da frente dominante.
   O deslocamento cria a diagonal — contida, sem sufocar o quadro. */
.mb-capa__fundo,
.mb-capa__palco { position: absolute; z-index: 1; }
.mb-capa__fundo .mb-tela,
.mb-capa__palco .mb-tela { margin: 0; }
.mb-capa__fundo .mb-tela__svg,
.mb-capa__palco .mb-tela__svg { width: 100%; max-width: none; height: auto; }
.mb-capa__fundo .mb-tela__legenda,
.mb-capa__palco .mb-tela__legenda { display: none; }
.mb-capa__fundo {
	right: 30%; bottom: -6%; width: 30%;
	transform: rotate(-8deg); opacity: .5;
	filter: drop-shadow(0 8px 18px rgba(0,0,0,.32));
}
.mb-capa__palco {
	right: 7%; bottom: -8%; width: 36%;
	transform: rotate(2.5deg);
	filter: drop-shadow(0 16px 34px rgba(0,0,0,.42));
}
.mb-capa:not(.mb-capa--dupla) .mb-capa__palco { right: 12%; width: 38%; transform: rotate(-2.5deg); }

/* Sem tela (socorro): ícone grande, deslocado e recortado — nunca centralizado. */
.mb-capa__simbolo {
	position: absolute; z-index: 1;
	right: -8%; bottom: -18%;
	display: block; width: 66%;
	color: var(--md-mobral-marca);
}
.mb-capa--coral .mb-capa__simbolo { color: #fff; opacity: .9; }
.mb-capa__simbolo svg { width: 100%; height: auto; stroke-width: 1.1; }

/* Selo: chip do Material sobre a capa. */
.mb-capa__selo {
	position: absolute; z-index: 2;
	left: 1.1rem; top: 1.05rem;
	display: inline-flex; align-items: center; gap: .42rem;
	padding: .34rem .8rem .34rem .55rem;
	border-radius: var(--md-shape-s);
	font-family: var(--md-fonte); font-size: var(--md-label-small); font-weight: 500;
	letter-spacing: .09em; text-transform: uppercase;
	backdrop-filter: blur(6px);
}
.mb-capa__selo svg { width: .95rem; height: .95rem; }
.mb-capa--escura .mb-capa__selo { background: rgba(255,255,255,.16); color: #fff; }
.mb-capa--coral  .mb-capa__selo { background: rgba(0,0,0,.55); color: #fff; }
.mb-capa--clara  .mb-capa__selo { background: var(--mb-capa-fundo); color: var(--mb-capa-texto); }

.mb-destaque { margin-bottom: 2.5rem; }
.mb-card__foto { overflow: hidden; }
.mb-card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--md-dur-media) var(--md-easing); }
.mb-card__link:hover .mb-card__foto img { transform: scale(1.03); }
.mb-card__texto { padding: 1rem 1.1rem 1.35rem; }
.mb-card__territorio {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-bottom: .5rem;
	font-size: var(--md-label-large); font-weight: 500; letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--md-sys-color-primary);
}
.mb-card__icone { width: 1rem; height: 1rem; }
.mb-card__titulo { margin: 0; font-size: var(--md-title-large); font-weight: 400; line-height: 1.3; }
.mb-card__sub { margin: .5rem 0 0; font-size: var(--md-body-medium); line-height: 1.5; color: var(--md-sys-color-on-surface-variant); }
.mb-card__leia {
	display: inline-flex; align-items: center; min-height: 40px; margin-top: .75rem;
	font-size: var(--md-label-large); font-weight: 500; color: var(--md-sys-color-primary);
}
.mb-card--destaque .mb-card__link { flex-direction: row; align-items: stretch; gap: 0; }
.mb-card--destaque .mb-card__foto { flex: 0 0 46%; }
.mb-card--destaque .mb-card__texto { padding: clamp(1.25rem, 3vw, 2rem); align-self: center; }
.mb-card--destaque .mb-card__titulo { font-size: clamp(var(--md-title-large), 2.4vw, var(--md-headline-small)); line-height: 1.25; }
.mb-card--destaque .mb-card__sub { font-size: var(--md-body-large); margin-top: .75rem; max-width: 46ch; }

/* No card em destaque a capa é quase o dobro da largura: a palavra cresce e o par
   de telas se afasta da borda — proporção mantida, não apenas esticada. */
.mb-card--destaque .mb-capa__palavra { font-size: clamp(2.6rem, 3.4vw, 3.6rem); max-width: 46%; }
.mb-card--destaque .mb-capa__palco { width: 27%; right: 12%; bottom: -7%; }
.mb-card--destaque .mb-capa__fundo { width: 23%; right: 33%; bottom: -5%; }
.mb-card--destaque .mb-capa:not(.mb-capa--dupla) .mb-capa__palco { right: 24%; width: 28%; }
.mb-card--destaque .mb-capa__simbolo { width: 38%; right: 8%; bottom: -8%; }

/* ══════════════════════════════════════════════════════════ territórios ═══ */
/* Cada território é um card "outlined" do Material: contorno em vez de sombra,
   que é a variante que a especificação indica quando os itens formam uma grade
   longa — sombra repetida 24 vezes vira sujeira visual. */
.mb-territorios { background: var(--md-sys-color-surface-container-low); }
.mb-territorios__lista {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 1rem;
}
.mb-territorios__lista a {
	display: block; height: 100%; padding: 1.35rem 1.25rem;
	background: var(--md-sys-color-surface);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-shape-m);
	color: var(--md-sys-color-on-surface); text-decoration: none;
	position: relative; isolation: isolate;
	transition: box-shadow var(--md-dur-curta) var(--md-easing),
	            border-color var(--md-dur-curta) var(--md-easing);
}
.mb-territorios__lista a::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-territorios__lista a:hover { box-shadow: var(--md-elev-1); border-color: var(--md-sys-color-outline); }
.mb-territorios__lista a:hover::after { opacity: var(--md-state-hover); }
.mb-territorios__icone {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; margin-bottom: .9rem;
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	border-radius: var(--md-shape-m);
}
.mb-territorios__icone svg { width: 1.7rem; height: 1.7rem; }
.mb-territorios__lista strong {
	display: block; margin-bottom: .3rem;
	font-size: var(--md-title-large); font-weight: 400;
}
.mb-territorios__desc { display: block; font-size: var(--md-body-medium); line-height: 1.5; color: var(--md-sys-color-on-surface-variant); }
.mb-territorios__conta {
	display: inline-flex; align-items: center; gap: .35rem; margin-top: .85rem;
	font-size: var(--md-label-large); font-weight: 500; color: var(--md-sys-color-primary);
}
.mb-territorios__conta::after { content: '→'; transition: transform var(--md-dur-curta) var(--md-easing); }
.mb-territorios__lista a:hover .mb-territorios__conta::after { transform: translateX(4px); }
.mb-territorios__lista .is-urgente a { border-color: var(--md-sys-color-error); }
.mb-territorios__lista .is-urgente .mb-territorios__icone {
	background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container);
}

/* ══════════════════════════════════════════════════════════ compromisso ═══ */
.mb-compromisso { border-top: 1px solid var(--md-sys-color-outline-variant); }
.mb-compromisso__interno { max-width: var(--caixa); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 1.25rem; }
.mb-compromisso h2 { margin: 0 0 2rem; font-size: var(--md-headline-small); max-width: 24ch; }
.mb-compromisso__lista {
	list-style: none; margin: 0 0 2rem; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem;
}
.mb-compromisso__lista li {
	padding: 1.1rem 1.15rem;
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-shape-m);
}
.mb-compromisso__lista strong { display: block; margin-bottom: .4rem; font-size: var(--md-title-medium); font-weight: 500; }
.mb-compromisso__lista span { font-size: var(--md-body-medium); line-height: 1.55; color: var(--md-sys-color-on-surface-variant); }

/* ═════════════════════════════════════════════════════════════ artigo ═══ */
.mb-artigo { max-width: var(--largura); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.mb-trilha { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; font-size: var(--md-label-large); color: var(--md-sys-color-on-surface-variant); }
.mb-trilha a { color: var(--md-sys-color-on-surface-variant); }
.mb-trilha a:hover { color: var(--md-sys-color-primary); }
.mb-artigo__titulo { margin: 0 0 .75rem; font-size: clamp(var(--md-headline-medium), 4vw, var(--md-display-small)); }
.mb-artigo__linha-fina { margin: 0 0 1.75rem; font-size: var(--md-body-large); line-height: 1.55; color: var(--md-sys-color-on-surface-variant); }
.mb-artigo__capa { margin: 0 0 2rem; }
.mb-artigo__capa img { width: 100%; border-radius: var(--md-shape-l); }

/* ══════════════════════════════════ bloco "se você já caiu" ═══ */
/* Card de erro do Material. Nenhuma cor carrega significado sozinha: além do
   par error-container, o bloco tem título próprio, passos numerados e o texto
   "Se você já caiu" — quem não distingue a cor recebe a mesma mensagem por
   outros três caminhos. */
.mb-socorro {
	margin: 0 0 2.5rem; padding: 1.5rem 1.4rem;
	background: var(--md-sys-color-error-container);
	color: var(--md-sys-color-on-error-container);
	border-radius: var(--md-shape-l);
}
.mb-socorro__titulo { margin: 0 0 1rem; font-size: var(--md-title-large); color: inherit; }
.mb-socorro__passos { margin: 0; padding: 0; list-style: none; counter-reset: socorro; font-size: var(--md-body-large); }
.mb-socorro__passos li { counter-increment: socorro; position: relative; margin-bottom: 1rem; padding-left: 2.9rem; line-height: 1.55; }
.mb-socorro__passos li:last-child { margin-bottom: 0; }
.mb-socorro__passos li::before {
	content: counter(socorro);
	position: absolute; left: 0; top: -.1rem;
	display: flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem;
	background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);
	border-radius: 50%;
	font-size: var(--md-label-large); font-weight: 500;
}
.mb-socorro__link {
	display: inline-flex; align-items: center; min-height: var(--toque);
	font-weight: 500; color: var(--md-sys-color-on-error-container);
}
.mb-socorro__rodape { margin: 1.25rem 0 0; font-size: var(--md-body-medium); line-height: 1.55; opacity: .9; }
/* Variante calma: mesmo bloco, sem o vermelho — para o artigo que ensina, não
   para o que socorre. */
.mb-socorro--calmo {
	background: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface);
}
.mb-socorro--calmo .mb-socorro__titulo { color: var(--md-sys-color-on-surface); }
.mb-socorro--calmo .mb-socorro__passos li::before {
	background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.mb-socorro--calmo .mb-socorro__link { color: var(--md-sys-color-primary); }

/* ══════════════════════════════════ convite para a Web Story ═══ */
.mb-convite-story { margin: 0 0 2.5rem; }
.mb-convite-story a {
	display: flex; align-items: center; gap: .85rem;
	min-height: 56px; padding: .9rem 1.15rem;
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-shape-m);
	color: var(--md-sys-color-on-surface); text-decoration: none;
	position: relative; isolation: isolate;
}
.mb-convite-story a::before {
	content: '▶'; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
	font-size: .8rem;
}
.mb-convite-story a::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-convite-story a:hover::after { opacity: var(--md-state-hover); }

/* ══════════════════════════════════ passo a passo ilustrado ═══ */
.mb-passos { margin: 2.5rem 0 3rem; }
.mb-passos__lista { counter-reset: ipasso; list-style: none; margin: 0; padding: 0; }
.mb-passo {
	display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start;
	padding: 1.5rem 0;
	border-top: 1px solid var(--md-sys-color-outline-variant);
}
.mb-passo:first-child { border-top: 0; padding-top: .5rem; }
.mb-passo__texto { position: relative; padding-left: 3.25rem; font-size: var(--md-body-large); line-height: 1.6; }
.mb-passo__texto::before {
	counter-increment: ipasso; content: counter(ipasso);
	position: absolute; left: 0; top: 0;
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
	font-size: var(--md-label-large); font-weight: 500;
}
.mb-passo__texto p:first-child { margin-top: 0; }
.mb-tela { margin: 0; }
.mb-tela__svg { display: block; width: 100%; max-width: 15rem; height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.14)); }
.mb-tela__legenda { margin-top: .7rem; max-width: 15rem; font-size: var(--md-body-small); line-height: 1.45; color: var(--md-sys-color-on-surface-variant); }

/* ══════════════════════════════════════════════════════════════ prosa ═══ */
/* O texto do artigo. Body-large do Material (20px aqui) com entrelinha 1.65 —
   acima da recomendação da própria especificação, porque leitura longa em tela
   pequena com 60 anos pede mais respiro entre as linhas do que um app pede. */
.mb-prosa { font-size: var(--md-body-large); line-height: 1.65; }
.mb-prosa > * + * { margin-top: 1.4rem; }
.mb-prosa h2 {
	margin-top: 2.75rem; padding-top: 1.25rem;
	border-top: 1px solid var(--md-sys-color-outline-variant);
	font-size: var(--md-headline-small);
}
.mb-prosa h3 { margin-top: 2rem; font-size: var(--md-title-large); }
.mb-prosa ul { padding-left: 1.4rem; }
.mb-prosa li + li { margin-top: .6rem; }
.mb-prosa strong { font-weight: 500; }
/* Lista numerada como passo: o número num círculo, igual ao do passo ilustrado —
   o leitor reconhece "isto é uma sequência" sem ler uma palavra. */
.mb-prosa ol { counter-reset: passo; list-style: none; padding-left: 0; }
.mb-prosa ol > li { counter-increment: passo; position: relative; padding-left: 3rem; min-height: 2.25rem; }
.mb-prosa ol > li + li { margin-top: 1rem; }
.mb-prosa ol > li::before {
	content: counter(passo);
	position: absolute; left: 0; top: -.1rem;
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
	font-size: var(--md-label-large); font-weight: 500;
}
.mb-prosa blockquote {
	margin: 2rem 0; padding: 1.25rem 1.35rem;
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-shape-m);
	font-size: var(--md-body-large);
}

/* ══════════════════════════════════════════ fontes e assinatura ═══ */
/* A caixa de fontes é o que sustenta o E-E-A-T do portal: sem ela o texto é
   opinião. Card "outlined" para ler como documento anexo, não como enfeite. */
.mb-fontes {
	margin-top: 3rem; padding: 1.4rem 1.35rem;
	background: var(--md-sys-color-surface-container-low);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-shape-m);
}
.mb-fontes h2 { margin: 0 0 .9rem; font-size: var(--md-title-large); }
.mb-fontes ul { margin: 0; padding-left: 1.2rem; }
.mb-fontes li { margin-bottom: .6rem; line-height: 1.5; }
.mb-fontes li:last-child { margin-bottom: 0; }
.mb-fontes a { font-weight: 500; }
.mb-verificacao { margin-top: 1.25rem; font-size: var(--md-body-medium); color: var(--md-sys-color-on-surface-variant); }
.mb-assinatura {
	margin-top: 1.75rem; padding-top: 1.25rem;
	border-top: 1px solid var(--md-sys-color-outline-variant);
	font-size: var(--md-body-medium);
}
.mb-assinatura p { margin: 0 0 .3rem; }
.mb-assinatura__revisor { color: var(--md-sys-color-on-surface-variant); }
.mb-aviso-editor {
	margin-top: 1.5rem; padding: 1rem 1.15rem;
	background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
	border-radius: var(--md-shape-m);
	font-size: var(--md-body-medium); line-height: 1.55;
}
.mb-relacionados { margin-top: 3.5rem; }
.mb-sem-resultado { max-width: 46ch; }
.mb-404 p { max-width: 46ch; }

/* ═══════════════════════════════════════════════════════════ ferramentas ═══ */
/* Tudo roda no navegador, nada é enviado — procure "fetch" no JS e não vai
   achar. É a única forma de a promessa de privacidade ser verdadeira. */
.mb-ferramenta {
	margin: 2.5rem 0; padding: 1.5rem 1.4rem;
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-shape-l);
}
.mb-ferramenta__titulo { margin: 0 0 .6rem; font-size: var(--md-title-large); }
.mb-ferramenta__intro { margin: 0 0 1.1rem; font-size: var(--md-body-medium); line-height: 1.6; }
.mb-ferramenta__label { display: block; margin-bottom: .4rem; font-size: var(--md-label-large); font-weight: 500; }
/* Campo de texto do Material, variante "filled": fundo próprio, canto arredondado
   em cima, linha grossa embaixo que ganha a cor primária no foco. */
.mb-ferramenta__campo {
	width: 100%; min-height: 56px; padding: .85rem 1rem;
	background: var(--md-sys-color-surface-container-highest);
	color: var(--md-sys-color-on-surface);
	border: none; border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
	border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
	font-family: var(--md-fonte); font-size: var(--md-body-large);
}
.mb-ferramenta__campo--data { max-width: 16rem; }
.mb-ferramenta__campo:focus { border-bottom-color: var(--md-sys-color-primary); outline-offset: 0; }
.mb-ferramenta__botao {
	margin-top: 1rem; min-height: var(--toque); padding: 0 1.5rem;
	background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
	border: none; border-radius: var(--md-shape-full);
	font-family: var(--md-fonte); font-size: var(--md-label-large); font-weight: 500;
	cursor: pointer; position: relative; isolation: isolate;
}
.mb-ferramenta__botao::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: currentColor; opacity: 0; z-index: -1;
	transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-ferramenta__botao:hover::after { opacity: var(--md-state-hover); }
.mb-ferramenta__saida:not(:empty) {
	margin-top: 1.25rem; padding: 1.15rem 1.2rem;
	background: var(--md-sys-color-surface);
	border-radius: var(--md-shape-m);
}
.mb-ferramenta__saida .mb-veredito { display: block; margin-bottom: .6rem; font-size: var(--md-title-medium); font-weight: 500; }
.mb-ferramenta__saida .mb-veredito--perigo  { color: var(--md-sys-color-error); }
.mb-ferramenta__saida .mb-veredito--atencao { color: var(--md-sys-color-tertiary); }
.mb-ferramenta__saida .mb-veredito--ok      { color: #1E6B32; }
.mb-ferramenta__saida .mb-endereco {
	display: inline-block; padding: .2rem .5rem;
	background: var(--md-sys-color-surface-container-highest);
	border-radius: var(--md-shape-xs);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
	word-break: break-all;
}
.mb-ferramenta__saida ul { margin: .6rem 0 0; padding-left: 1.3rem; }
.mb-ferramenta__saida li { margin-bottom: .45rem; }
.mb-ferramenta__privacidade { margin: 1.1rem 0 0; font-size: var(--md-body-small); line-height: 1.55; color: var(--md-sys-color-on-surface-variant); }
.mb-ferramenta__limite { margin: .8rem 0 0; font-size: var(--md-body-small); color: var(--md-sys-color-on-surface-variant); }

/* ═════════════════════════════════════════════════════════════ rodapé ═══ */
/* Superfície invertida — o par que o Material reserva para blocos que fecham a
   página. Mesmo tom escuro da abertura, fechando o ciclo visual. */
.mb-rodape {
	margin-top: 4rem;
	background: var(--mb-destaque-fundo);
	color: var(--md-sys-color-on-surface);
	border-top: 1px solid var(--md-sys-color-outline-variant);
	font-size: var(--md-body-medium);
}
.mb-rodape__interno { max-width: var(--caixa); margin: 0 auto; padding: 3rem 1.25rem 2.5rem; }
.mb-rodape__marca { display: inline-flex; align-items: center; min-height: var(--toque); margin-bottom: 1.5rem; color: inherit; }
.mb-rodape__marca img, .mb-rodape__marca svg { height: 2.1rem; width: auto; display: block; }
.mb-rodape a { color: var(--md-mobral-link); }
.mb-rodape a:hover { color: var(--md-mobral-link-visitado); }
.mb-rodape__blindagem {
	max-width: 60ch; margin: 0 0 1.75rem; line-height: 1.6;
	color: var(--md-sys-color-on-surface-variant);
}
.mb-rodape__redes ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.mb-rodape__redes a {          /* chip sobre superfície escura */
	display: inline-flex; align-items: center; gap: .4rem;
	min-height: var(--toque); padding: 0 1.1rem;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-shape-s);
	font-size: var(--md-label-large); font-weight: 500; text-decoration: none;
}
.mb-rodape__redes a:hover { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-surface-container); }
.mb-rodape__arroba { opacity: .7; font-weight: 400; }
.mb-rodape__links ul { display: flex; flex-wrap: wrap; gap: 0 2rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.mb-rodape__links a { display: inline-flex; align-items: center; min-height: var(--toque); font-size: var(--md-label-large); font-weight: 500; }
.mb-rodape__aviso { max-width: 60ch; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); }
.mb-rodape__assinatura { margin: 2rem 0 0; font-size: var(--md-body-small); color: var(--md-sys-color-on-surface-variant); }

/* ═════════════════════════════════════════════════════════ paginação ═══ */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; }
.pagination .page-numbers, .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--toque); min-height: var(--toque); padding: 0 1rem;
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-shape-full);
	color: var(--md-sys-color-on-surface); text-decoration: none;
	font-size: var(--md-label-large); font-weight: 500;
}
.pagination .page-numbers:hover, .nav-links .page-numbers:hover { background: var(--md-sys-color-surface-container-high); }
.pagination .current, .nav-links .current {
	background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVEGAÇÃO DE DOIS NÍVEIS E MENU LATERAL
   Oito verticais na barra + "Mais assuntos" com as demais. Ver inc/navegacao.php
   para as decisões de arquitetura. No Material isto são "primary tabs" —
   roláveis no celular, com o item atual marcado por um indicador na base.
   ═══════════════════════════════════════════════════════════════════════════ */
.mb-nav {
	border-top: 1px solid var(--md-sys-color-outline-variant);
	background: var(--md-sys-color-surface);
}
.mb-nav__lista {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 .25rem;
	max-width: var(--caixa); margin: 0 auto; padding: 0 1rem; list-style: none;
}
.mb-nav__lista > li { display: flex; }
.mb-nav a, .mb-nav__mais summary {
	display: inline-flex; align-items: center;
	min-height: var(--toque); padding: 0 .85rem;
	border-bottom: 3px solid transparent;
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-label-large); font-weight: 500; letter-spacing: .0071em;
	text-decoration: none; cursor: pointer;
	position: relative; isolation: isolate;
	transition: color var(--md-dur-curta) var(--md-easing),
	            border-color var(--md-dur-curta) var(--md-easing);
}
.mb-nav a::after, .mb-nav__mais summary::after {
	content: ''; position: absolute; inset: 0; background: currentColor;
	opacity: 0; z-index: -1; transition: opacity var(--md-dur-curta) var(--md-easing);
}
.mb-nav a:hover::after, .mb-nav__mais summary:hover::after { opacity: var(--md-state-hover); }
.mb-nav a:hover, .mb-nav__mais summary:hover { color: var(--md-sys-color-on-surface); }
/* Indicador da aba ativa: a linha na base, como nas tabs do Material. */
.mb-nav a[aria-current="page"] {
	color: var(--md-sys-color-primary);
	border-bottom-color: var(--md-sys-color-primary);
}
.mb-nav__item.is-urgente { color: var(--md-sys-color-error); }
.mb-nav__mais { position: relative; }
.mb-nav__mais summary::-webkit-details-marker { display: none; }
.mb-nav__mais summary::before { content: none; }
.mb-nav__mais > details { position: static; }
.mb-nav__mais summary { list-style: none; gap: .3rem; }
.mb-nav__mais summary .mb-nav__seta { transition: transform var(--md-dur-curta) var(--md-easing); }
.mb-nav__mais details[open] summary .mb-nav__seta { transform: rotate(180deg); }
/* Menu suspenso do Material: superfície de container alto, canto extra-small,
   elevação 2. */
.mb-nav__painel {
	position: absolute; z-index: 30; top: 100%; left: 50%; transform: translateX(-50%);
	max-width: min(52rem, 94vw); min-width: min(34rem, 92vw);
	padding: .75rem 1rem;
	background: var(--md-sys-color-surface-container-high);
	border-radius: var(--md-shape-s);
	box-shadow: var(--md-elev-2);
}
.mb-nav__painel ul {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
	gap: .1rem .9rem; margin: 0; padding: 0; list-style: none;
}
.mb-nav__painel a {
	display: flex; align-items: center; width: 100%;
	min-height: var(--toque); padding: 0 .75rem;
	border-bottom: 0; border-radius: var(--md-shape-s);
	font-size: var(--md-body-medium); font-weight: 400;
}
.mb-nav__painel a:hover { color: var(--md-sys-color-on-surface); }

/* Menu lateral do artigo: cards de navegação depois do texto. */
.mb-lateral { max-width: var(--largura); margin: 0 auto 3.5rem; padding: 0 1.25rem; display: grid; gap: 1.25rem; }
.mb-lateral__bloco {
	padding: 1.25rem 1.2rem;
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-shape-l);
}
.mb-lateral__bloco.is-urgente {
	background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container);
}
.mb-lateral__titulo { margin: 0 0 .75rem; font-size: var(--md-title-large); }
.mb-lateral__lista { margin: 0; padding: 0; list-style: none; display: grid; }
.mb-lateral__lista a {
	display: flex; align-items: center; min-height: var(--toque); padding: .55rem 0;
	border-bottom: 1px solid var(--md-sys-color-outline-variant); line-height: 1.35;
}
.mb-lateral__lista li:last-child a { border-bottom: 0; }
.mb-lateral__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mb-lateral__tags a {           /* filter chip */
	display: inline-flex; align-items: center;
	min-height: 44px; padding: 0 1rem;
	background: var(--md-sys-color-surface);
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-shape-s);
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-label-large); font-weight: 500; text-decoration: none;
}
.mb-lateral__tags a:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.mb-lateral__todos {
	display: inline-flex; align-items: center; min-height: var(--toque);
	margin-top: .5rem; font-size: var(--md-label-large); font-weight: 500;
	color: var(--md-sys-color-primary);
}
.mb-lateral__bloco.is-urgente .mb-lateral__todos { color: var(--md-sys-color-on-error-container); }

@media (min-width: 60rem) {
	.mb-lateral { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); align-items: start; }
}

/* ═══════════════════════════════════════════════════════════ celular ═══ */
@media (max-width: 60rem) {
	.mb-topo__interno { grid-template-columns: 1fr auto; }
	.mb-menu-botao { display: inline-flex; }
	.mb-menu { grid-column: 1 / -1; display: none; }
	.mb-menu.is-aberto { display: block; }
	.mb-nav__lista { flex-direction: column; align-items: stretch; padding: .25rem .5rem .5rem; }
	.mb-nav a, .mb-nav__mais summary {
		width: 100%; border-bottom: 0; border-radius: var(--md-shape-full);
		padding: 0 1.25rem;
	}
	.mb-nav a[aria-current="page"] {
		background: var(--md-sys-color-secondary-container);
		color: var(--md-sys-color-on-secondary-container);
	}
	.mb-nav__mais { width: 100%; }
	.mb-nav__painel {
		position: static; transform: none; min-width: 0; max-width: none;
		margin: .25rem 0; box-shadow: none;
		background: var(--md-sys-color-surface-container);
	}
	.mb-busca { grid-column: 1 / -1; padding-bottom: .5rem; }
	.mb-abertura__interno { grid-template-columns: 1fr; gap: 2rem; }
	.mb-abertura__mostra { order: -1; }
	.mb-abertura__mostra .mb-tela__svg { max-width: 12.5rem; }
	.mb-card--destaque .mb-card__link { flex-direction: column; }
	.mb-card--destaque .mb-card__foto { flex: none; }
}

@media (max-width: 48rem) {
	html { font-size: 118%; }
	.mb-recentes__interno, .mb-territorios__interno, .mb-lista,
	.mb-compromisso__interno, .mb-rodape__interno { padding-inline: 1rem; }
	.mb-marca img, .mb-marca svg { height: 1.9rem; }
	.mb-grade { grid-template-columns: 1fr; gap: 1.75rem; }
	.mb-agora__lista { grid-template-columns: 1fr; }
	.mb-socorro { padding: 1.25rem 1.15rem; }
	/* Em 390px o recuo de 2,9rem deixava ~5 palavras por linha no bloco que a
	   pessoa lê com pressa. O número encolhe e o texto ganha a largura. */
	.mb-socorro__passos li { padding-left: 2.4rem; }
	.mb-socorro__passos li::before { width: 1.75rem; height: 1.75rem; font-size: var(--md-label-medium); }
	.mb-artigo { padding-inline: 1.1rem; }
	.mb-passo { grid-template-columns: 1fr; gap: 1rem; }
	.mb-passo__texto { padding-left: 3rem; }
	.mb-tela__svg { max-width: 15.5rem; margin: 0 auto; }
	.mb-tela__legenda { max-width: none; text-align: center; }
}

/* ═════════════════════════════════════════════════════ preferências ═══ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
	.mb-card__link:hover .mb-card__foto img { transform: none; }
	.mb-assuntos__pista { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
	.mb-assuntos__grupo:last-child { display: none; }
	.mb-assuntos__grupo { flex-wrap: wrap; justify-content: center; }
}

/* prefers-contrast: more troca a paleta inteira em md3-tokens.css (esquema de
   alto contraste do próprio Material). Aqui só o que a cor não resolve. */
@media (prefers-contrast: more) {
	.mb-card, .mb-territorios__lista a, .mb-lateral__bloco, .mb-compromisso__lista li {
		border: 1px solid var(--md-sys-color-outline);
	}
}

@media print {
	.mb-emergencia, .mb-assuntos, .mb-menu, .mb-busca, .mb-lateral,
	.mb-relacionados, .mb-rodape__links, .mb-rodape__redes, .mb-territorios { display: none; }
	body { font-size: 12pt; background: #fff; color: #000; }
	.mb-topo { position: static; background: #fff; color: #000; border-bottom: 2px solid #000; }
	.mb-socorro { border: 2px solid #000; background: #fff; color: #000; }
	.mb-passo { break-inside: avoid; }
	.mb-prosa a::after, .mb-fontes a::after, .mb-socorro a::after {
		content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all;
	}
}

/* ═══════════════════════════════════════════════════ alvos de toque ═══ */
/* O Material pede 48dp de alvo; o dedo de quem tem tremor pede o mesmo. Estas
   regras existem para os links que nascem dentro do CONTEÚDO, onde não há classe
   para vestir. */
@media (pointer: coarse) {
	.mb-prosa li > a, .mb-fontes li > a { display: inline-block; padding-block: .35rem; }
	.mb-prosa p a, .mb-artigo__corpo p a { padding-block: .3rem; }
}