/* GERADO por scripts/sync-assets.mjs a partir de assets/human-ui/tokens-chrome.css, assets/human-ui/barras.css, assets/human-ui/cabecalho.css, assets/human-ui/rodape.css, assets/human-ui/contato.css, assets/human-ui/capa.css: edite as partes. */
/* Os tokens `--mm-*` para quem carrega SÓ o `chrome.css` (a Grade e a ferramenta do Samehand, fora do
   sistema de layout): valem DENTRO do cabeçalho e do rodapé globais, lidos do Bootstrap do app quando
   ele existe; o app sem Bootstrap redefine estes nomes nas cores dele, numa folha depois desta.
   Não entra no `human-ui.css`: lá os tokens são do `:root` (`tema.css`) e o Radar os troca por tema. */
.mm-chrome, .mm-footer, .mm-pular, .mm-contato {
  --mm-space-2: 1rem;
  --mm-radius: var(--bs-border-radius, .375rem);
  --mm-gutter: clamp(1rem, 3vw, 2rem);
  --mm-control: 2.75rem;
  --mm-surface: var(--bs-body-bg, #fff);
  --mm-surface-2: var(--bs-tertiary-bg, #e9edf2);
  --mm-border: var(--bs-border-color, #748196);
  --mm-text: var(--bs-body-color, #172029);
  --mm-muted: var(--bs-secondary-color, #55616d);
  --mm-accent: var(--bs-primary, #1f5ae8);
  --mm-accent-text: var(--bs-primary-text-emphasis, #1d4ed8);
  --mm-on-accent: #fff;
  --mm-accent-soft: var(--bs-primary-bg-subtle, #e6eefc);
  --mm-warn: var(--bs-warning-text-emphasis, #8a5a00);
  --mm-warn-bg: var(--bs-warning-bg-subtle, #fff2cf);
  --mm-warn-border: var(--bs-warning-border-subtle, #9e7520);
  --mm-shadow-pop: var(--bs-box-shadow, 0 8px 24px rgb(15 23 42 / .12));
}
/* O anel de foco do `.btn` sem variante, o mesmo do `tema.css` (que esta folha não traz): o `:focus-visible` do
   Bootstrap zera o contorno e monta a sombra de `--bs-btn-focus-shadow-rgb`, que só as variantes definem (WCAG 2.4.7;
   o botão de grupo das `Facetas` no Explorar da Grade). Vale na página toda, não só no chrome. O `:where` tem
   especificidade zero (a variante continua mandando), e o Chrome 52 da TV, que não o conhece, larga só esta regra —
   lá o `:focus-visible` também não existe e fica o anel do navegador. */
:where(.btn) { --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
/* A BARRA ÚNICA (`@mm/seo/chrome`): o cabeçalho, o menu e o rodapé globais têm o MESMO desenho em todo
   app — Bootstrap, Tailwind (Radar), a Grade e o Samehand (dono, 23/09/2026: "uma barra pra tudo, mesmo
   padrão, só que com propriedades pra cada projeto"). Por isso o chrome não herda a paleta nem os
   componentes do app: tem a sua (`--mmc-*`, abaixo), as suas classes (`mm-*`) e os seus ícones (SVG
   embutido). Entra no `human-ui.css` dos apps da casa e no `chrome.css` de quem fica fora do sistema de
   layout. Os controles estão em `cabecalho.css`; o rodapé, em `rodape.css`. */

/* A paleta do chrome: a do Bootstrap 5.3 da casa, fixa. O app troca só a arte (`--mmc-arte-*`). */
.mm-chrome, .mm-footer, .mm-pular {
  --mmc-fundo: #fff;
  --mmc-fundo-2: #f1f3f5;
  --mmc-borda: #dee2e6;
  --mmc-texto: #212529;
  --mmc-suave: #5c636a;
  --mmc-link: #0a58ca;
  --mmc-acento: #0d6efd;
  --mmc-foco: #0d6efd;
  --mmc-cracha: #0d6efd;
  --mmc-cracha-texto: #fff;
  --mmc-aviso: #664d03;
  --mmc-aviso-fundo: #fff3cd;
  --mmc-aviso-borda: #d9b44a;
  --mmc-sombra: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
  --mmc-sombra-barra: 0 1px 3px rgba(2, 6, 23, .05);
  --mmc-raio: .375rem;
  --mmc-controle: 2.25rem;
  --mmc-arte-cabecalho: url("/chrome-cabecalho.svg");
  --mmc-arte-rodape: url("/chrome-rodape.svg");
  color-scheme: light;
}
:root[data-bs-theme="dark"] .mm-chrome, :root[data-bs-theme="dark"] .mm-footer, :root[data-bs-theme="dark"] .mm-pular,
:root[data-theme="dark"] .mm-chrome, :root[data-theme="dark"] .mm-footer, :root[data-theme="dark"] .mm-pular {
  --mmc-fundo: #212529;
  --mmc-fundo-2: #2b3035;
  --mmc-borda: #495057;
  --mmc-texto: #dee2e6;
  --mmc-suave: #adb5bd;
  --mmc-link: #6ea8fe;
  --mmc-foco: #6ea8fe;
  --mmc-cracha: #6ea8fe;
  --mmc-cracha-texto: #03172f;
  --mmc-aviso: #ffda6a;
  --mmc-aviso-fundo: #332701;
  --mmc-aviso-borda: #997404;
  --mmc-sombra: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
  --mmc-sombra-barra: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
/* Sem o atributo de tema (o boot da página não rodou): o tema do sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]):not([data-theme]) .mm-chrome,
  :root:not([data-bs-theme]):not([data-theme]) .mm-footer,
  :root:not([data-bs-theme]):not([data-theme]) .mm-pular {
    --mmc-fundo: #212529;
    --mmc-fundo-2: #2b3035;
    --mmc-borda: #495057;
    --mmc-texto: #dee2e6;
    --mmc-suave: #adb5bd;
    --mmc-link: #6ea8fe;
    --mmc-foco: #6ea8fe;
    --mmc-cracha: #6ea8fe;
    --mmc-cracha-texto: #03172f;
    --mmc-aviso: #ffda6a;
    --mmc-aviso-fundo: #332701;
    --mmc-aviso-borda: #997404;
    --mmc-sombra: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
    --mmc-sombra-barra: 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

/* O contêiner de página, o mesmo do conteúdo: o chrome alinha com o que vem embaixo dele. */
.mm-workspace { width: 100%; max-width: none; margin-inline: auto; padding-inline: var(--mm-gutter, clamp(1rem, 3vw, 2rem)); min-width: 0; box-sizing: border-box; }

/* O cabeçalho gruda no topo: o que ganha o foco (o Tab de volta, o foco posto por script) ou é alvo de âncora para
   abaixo dele, não embaixo (WCAG 2.4.11). A altura é a que o `chrome.js` mede (`--mm-altura-cabecalho`); o Chrome 52 da
   TV não conhece a propriedade e só a ignora. */
html { scroll-padding-top: calc(var(--mm-altura-cabecalho, 0px) + .5rem); }

/* O CABEÇALHO: duas barras, a de cima (marca, módulos, ações e controles da casa) e a do menu. */
.mm-chrome {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--mmc-fundo);
  background-image: var(--mmc-arte-cabecalho);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--mmc-borda);
  box-shadow: var(--mmc-sombra-barra);
  color: var(--mmc-texto);
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
}
.mm-chrome *, .mm-chrome *::before, .mm-chrome *::after { box-sizing: border-box; }
.mm-topbar > .mm-workspace { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; min-height: 3.25rem; padding-block: .375rem; }
.mm-menubar { border-top: 1px solid var(--mmc-borda); }
.mm-menubar > .mm-workspace { display: flex; align-items: stretch; min-height: 2.75rem; }

/* A marca: o logo do app (`/icon.svg`) e o nome, igual em todo app. */
.mm-chrome .mm-brand, .mm-chrome .mm-brand:hover, .mm-chrome .mm-brand:focus {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--mmc-texto);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.mm-chrome .mm-brand:active { color: var(--mmc-link); }
.mm-brand > img, .mm-brand > .mm-ico { flex: none; width: 1.75rem; height: 1.75rem; border-radius: .4rem; }
.mm-brand > .mm-ico { color: var(--mmc-acento); }
.mm-brand-frase { margin: 0; min-width: 0; color: var(--mmc-suave); font-size: .875rem; }

/* O MENU: links de seção, a mesma régua em todo app; a seção atual sublinhada. Os itens moram num bloco deles
   (`mm-topnav-itens`) e a oferta fica ao lado, fora dele: no celular só o bloco rola, e nada passa por baixo da oferta. */
.mm-topnav { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; margin: 0 0 0 -.75rem; padding: 0; }
.mm-topnav-itens { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; }
.mm-chrome .mm-menu-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--mmc-link);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mm-chrome .mm-menu-item:hover { color: var(--mmc-texto); background: var(--mmc-fundo-2); text-decoration: none; }
.mm-chrome .mm-menu-item:focus-visible { outline: 2px solid var(--mmc-foco); outline-offset: -2px; }
.mm-chrome .mm-menu-item:active { color: var(--mmc-texto); background: var(--mmc-borda); }
.mm-chrome .mm-menu-item.active, .mm-chrome .mm-menu-item[aria-current="page"] { color: var(--mmc-texto); font-weight: 600; border-bottom-color: currentColor; }
/* No celular a régua vira faixa: os itens rolam e a oferta fica na ponta, à vista (a sombra marca a divisa). Era a
   oferta grudada POR CIMA do rolo, e o item que o Tab levava à ponta ficava embaixo dela (WCAG 2.4.11). */
@media (max-width: 575.98px) {
  .mm-topnav { flex-wrap: nowrap; }
  .mm-topnav-itens { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mm-topnav-itens::-webkit-scrollbar { display: none; }
  .mm-chrome .mm-menu-item { flex-shrink: 0; }
  .mm-chrome .mm-menu-item.mm-oferta { background: var(--mmc-fundo); box-shadow: -10px 0 8px -6px rgba(0, 0, 0, .18); }
}
/* OS CONTROLES DA BARRA ÚNICA (`@mm/seo/chrome` + `assets/chrome.js`), iguais em todo app. A moldura e a
   paleta (`--mmc-*`) estão em `barras.css`. Três famílias, sempre no mesmo lugar:
     .mm-assunto  os MÓDULOS do app, num grupo ao lado da marca (Projects; Device Stats | Routine Monitor)
     .mm-acao     as AÇÕES do app e os módulos da casa com moldura (empresas, crédito, aviso de convidado)
     .mm-ctl      os controles da CASA, sem moldura, em todo app: contato, conta, idioma e tema */

/* Pular para o conteúdo: escondido até receber o foco. */
.mm-pular:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.mm-pular:focus { position: fixed; z-index: 1100; top: .5rem; left: .5rem; padding: .5rem .75rem; background: var(--mmc-fundo); color: var(--mmc-texto); border: 2px solid var(--mmc-foco); border-radius: var(--mmc-raio); }

/* O ícone da casa: SVG embutido, do tamanho da letra. */
.mm-ico { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }

.mm-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .375rem; margin-inline-start: auto; }

/* O botão da barra — um só desenho para os três. */
.mm-chrome .mm-assunto,
.mm-chrome .mm-acao,
.mm-chrome .mm-ctl,
.mm-chrome .mm-tools .mm-conta-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: var(--mmc-controle);
  min-width: var(--mmc-controle);
  margin: 0;
  padding: 0 .65rem;
  border: 1px solid transparent;
  border-radius: var(--mmc-raio);
  background: transparent;
  color: var(--mmc-texto);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mm-chrome .mm-acao, .mm-chrome .mm-assunto { border-color: var(--mmc-borda); }
.mm-chrome .mm-assunto:hover, .mm-chrome .mm-acao:hover, .mm-chrome .mm-ctl:hover,
.mm-chrome .mm-tools .mm-conta-botao:hover, .mm-chrome .mm-tools .mm-conta-botao[aria-expanded="true"],
.mm-chrome .mm-idioma[open] > .mm-ctl {
  background: var(--mmc-fundo-2);
  color: var(--mmc-texto);
  text-decoration: none;
}
.mm-chrome .mm-assunto:focus-visible, .mm-chrome .mm-acao:focus-visible, .mm-chrome .mm-ctl:focus-visible,
.mm-chrome .mm-tools .mm-conta-botao:focus-visible {
  outline: 2px solid var(--mmc-foco);
  outline-offset: 2px;
  box-shadow: none;
}
/* Apertado: o fundo desce um tom (a borda da barra), para o dedo ver que pegou. Parado: sem resposta e sem mãozinha. */
.mm-chrome .mm-assunto:active, .mm-chrome .mm-acao:active, .mm-chrome .mm-ctl:active,
.mm-chrome .mm-tools .mm-conta-botao:active {
  background: var(--mmc-borda);
  color: var(--mmc-texto);
}
.mm-chrome .mm-assunto:disabled, .mm-chrome .mm-acao:disabled, .mm-chrome .mm-ctl:disabled,
.mm-chrome .mm-assunto[aria-disabled="true"], .mm-chrome .mm-acao[aria-disabled="true"], .mm-chrome .mm-ctl[aria-disabled="true"] {
  background: transparent;
  color: var(--mmc-suave);
  cursor: not-allowed;
}
/* A conta é o componente global (`conta-produto-menu.js`): o botão dele entra na mesma régua, sem a
   seta do Bootstrap — em todo app ele abre a conta. */
.mm-chrome .mm-tools .mm-conta-botao::after { display: none; }
.mm-chrome .mm-tools .mm-conta { gap: .375rem; }

/* O GRUPO: os módulos lado a lado, emendados, como abas; o aberto fica cheio. */
.mm-grupo { display: inline-flex; align-items: stretch; }
.mm-grupo > .mm-assunto, .mm-grupo > .mm-acao { border-radius: 0; }
.mm-grupo > :first-child { border-start-start-radius: var(--mmc-raio); border-end-start-radius: var(--mmc-raio); }
.mm-grupo > :last-child { border-start-end-radius: var(--mmc-raio); border-end-end-radius: var(--mmc-raio); }
.mm-grupo > * + * { margin-inline-start: -1px !important; }
.mm-chrome .mm-assunto.active, .mm-chrome .mm-assunto[aria-current="page"], .mm-chrome .mm-assunto[aria-selected="true"],
.mm-chrome .mm-grupo > .mm-acao.active, .mm-chrome .mm-grupo > .mm-acao[aria-current="page"] {
  z-index: 1;
  border-color: var(--mmc-texto);
  background: var(--mmc-texto);
  color: var(--mmc-fundo);
}
.mm-assuntos { margin-inline-end: auto; }

/* O CRACHÁ de um módulo ou ação: a contagem que o app manda (`MMChrome.contador`). */
.mm-cracha { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 1rem; background: var(--mmc-cracha); color: var(--mmc-cracha-texto); font-size: .75rem; font-weight: 700; line-height: 1; }
.mm-cracha[hidden] { display: none !important; }

/* Os AVISOS da casa: convidado com coisa no navegador e crédito baixo, em âmbar com texto. */
.mm-chrome .mm-aviso, .mm-chrome .mm-credito.mm-credito-baixo { border-color: var(--mmc-aviso-borda); background: var(--mmc-aviso-fundo); color: var(--mmc-aviso); }
.mm-chrome .mm-aviso:hover, .mm-chrome .mm-credito.mm-credito-baixo:hover { background: var(--mmc-aviso-fundo); color: var(--mmc-aviso); filter: brightness(1.06); }
.mm-chrome .mm-aviso:active, .mm-chrome .mm-credito.mm-credito-baixo:active { background: var(--mmc-aviso-fundo); color: var(--mmc-aviso); filter: brightness(.94); }

/* O TEMA: o ícone é o do tema em vigor; o rótulo acessível diz o que o clique faz. */
.mm-chrome .mm-tema .mm-ico { width: 1.15rem; height: 1.15rem; }
:root[data-bs-theme="dark"] .mm-tema-sol,
:root[data-theme="dark"] .mm-tema-sol,
:root:not([data-bs-theme="dark"]):not([data-theme="dark"]) .mm-tema-lua { display: none !important; }

/* O IDIOMA: o código da língua da tela e a lista das línguas do app, sem depender do JS do Bootstrap. */
.mm-idioma { position: relative; display: inline-flex; }
.mm-idioma > summary { list-style: none; }
.mm-idioma > summary::-webkit-details-marker { display: none; }
.mm-idioma > summary::marker { content: ""; }
.mm-idioma-atual { font-size: .8125rem; font-weight: 600; letter-spacing: .03em; }
.mm-idioma-lista {
  position: absolute;
  z-index: 1050;
  top: 100%;
  right: 0;
  min-width: 11rem;
  margin: .25rem 0 0;
  padding: .25rem;
  list-style: none;
  background: var(--mmc-fundo);
  border: 1px solid var(--mmc-borda);
  border-radius: var(--mmc-raio);
  box-shadow: var(--mmc-sombra);
}
.mm-idioma-lista > li { display: block; margin: 0; }
.mm-chrome .mm-idioma-lista a, .mm-chrome .mm-idioma-lista button {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .6rem;
  border: 0;
  border-radius: .25rem;
  background: none;
  color: var(--mmc-texto);
  font: inherit;
  font-size: .9375rem;
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.mm-chrome .mm-idioma-lista a:hover, .mm-chrome .mm-idioma-lista button:hover { background: var(--mmc-fundo-2); }
.mm-chrome .mm-idioma-lista a:focus-visible, .mm-chrome .mm-idioma-lista button:focus-visible { outline: 2px solid var(--mmc-foco); outline-offset: -2px; }
.mm-chrome .mm-idioma-lista a:active, .mm-chrome .mm-idioma-lista button:active { background: var(--mmc-borda); }
.mm-idioma-lista .mm-ico { visibility: hidden; color: var(--mmc-link); }
.mm-idioma-lista [aria-current="true"] { font-weight: 600; }
.mm-idioma-lista [aria-current="true"] .mm-ico { visibility: visible; }
.mm-idioma-lista abbr { margin-inline-start: auto; color: var(--mmc-suave); font-size: .75rem; font-weight: 600; text-decoration: none; }
/* A bandeira da língua, no botão e em cada opção: retângulo 4:3 com contorno leve (branco some no claro). */
.mm-bandeira { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--mmc-borda); }
.mm-idioma > summary .mm-bandeira { margin-inline-end: .35rem; }

/* O espaço de um módulo que o app desenha no navegador (a organização do CommsHarbor): vazio, some. */
.mm-slot { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.mm-slot:empty { display: none; }

/* No celular: os módulos ganham a linha deles, com rótulo (navegação não vira adivinhação de ícone); as
   ações e os controles ficam só com o ícone e o nome acessível. */
@media (max-width: 575.98px) {
  .mm-topbar > .mm-workspace { min-height: 3rem; }
  .mm-brand-frase { display: none; }
  .mm-assuntos { order: 1; flex: 1 0 100%; margin: 0; }
  .mm-chrome .mm-assuntos > .mm-assunto { flex: 1 1 0; padding-inline: .5rem; }
  /* Só à vista: o texto continua sendo o nome acessível do botão. Com `display: none` a ação sem `titulo` ficava sem
     nome nenhum e as outras, só com o do `title` (WCAG 4.1.2). */
  .mm-tools .mm-rotulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .mm-chrome .mm-acao, .mm-chrome .mm-ctl { padding-inline: .55rem; }
}
@media (max-width: 379.98px) {
  .mm-assuntos .mm-ico { display: none; }
}
/* No dedo, o controle da barra e a língua da lista têm 44 px de altura (WCAG 2.5.5; AGENTS-UI § Acabamento). A largura
   mínima fica nos 36 px: com 44, a marca e os quatro controles da casa não cabiam juntos a 390 px e o cabeçalho ganhava
   uma linha a mais (medido no PageAudit, 26/09/2026). */
@media (pointer: coarse) {
  .mm-chrome { --mmc-controle: 2.75rem; }
  .mm-chrome .mm-assunto, .mm-chrome .mm-acao, .mm-chrome .mm-ctl, .mm-chrome .mm-tools .mm-conta-botao { min-width: 2.25rem; }
  .mm-chrome .mm-brand { min-height: 44px; }
  .mm-chrome .mm-idioma-lista a, .mm-chrome .mm-idioma-lista button { padding-top: .78rem; padding-bottom: .78rem; }
}
/* A lista das línguas entra descendo um pouco, em vez de surgir de estalo (sem movimento para quem pediu menos). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mm-lista-entra {
    from { opacity: 0; transform: translateY(-.25rem); }
    to { opacity: 1; transform: none; }
  }
  .mm-idioma[open] > .mm-idioma-lista { animation: mm-lista-entra .15s ease-out; }
}
/* O RODAPÉ ÚNICO (`@mm/seo/chrome`): o mesmo desenho em todo app — a marca e a frase do app numa faixa,
   as colunas Produto, Integrações e agentes e Legal, e a linha do crédito da foto e do apoio; a linha de
   estado (`statusline.js`) entra no fim. Paleta e arte do chrome (`--mmc-*`, `barras.css`): o app troca
   só a arte (`--mmc-arte-rodape`). */
.mm-footer {
  position: relative;
  margin-top: var(--mm-space-2, 1rem);
  border-top: 1px solid var(--mmc-borda);
  background-color: var(--mmc-fundo-2);
  background-image: var(--mmc-arte-rodape);
  background-position: center bottom;
  background-size: 100% 5rem;
  background-repeat: no-repeat;
  color: var(--mmc-suave);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: start;
}
.mm-footer *, .mm-footer *::before, .mm-footer *::after { box-sizing: border-box; }
.mm-footer > .mm-workspace { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.5rem; padding-block: 1rem .85rem; }

/* A marca e a frase do app. */
.mm-footer-brand { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; margin: 0; }
.mm-footer .mm-footer-name, .mm-footer .mm-footer-name:hover {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  color: var(--mmc-texto);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.mm-footer .mm-footer-name:hover { color: var(--mmc-link); }
.mm-footer .mm-footer-name:active { color: var(--mmc-link); text-decoration: underline; }
/* A letra de 12 px dava um alvo de 18 px; o mínimo é 24 (WCAG 2.5.8). */
.mm-footer .mm-footer-name { min-height: 1.5rem; }
.mm-footer-name > img { width: 1rem; height: 1rem; border-radius: .2rem; }
.mm-footer-brand > p { margin: 0; flex: 1 1 16rem; }
.mm-footer-brand > details { flex-basis: 100%; font-size: .75rem; }
.mm-footer-brand a:not(.mm-selo):not(.mm-footer-name), .mm-footer-meta a, .mm-footer-stats a { color: var(--mmc-texto); text-decoration: underline; text-underline-offset: .15em; }
/* O respiro põe o resumo (letra de 12 px) nos 24 px de alvo: dois resumos em sequência — os `details` aninhados que o
   app escreve no `rodape.detalhes` — ficavam a −6 px um do outro (WCAG 2.5.8). */
.mm-footer details summary { cursor: pointer; padding-block: .25rem; }

/* As colunas. */
.mm-footer-line { flex: 1 1 12.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-width: 0; margin: 0; padding: 0; }
.mm-footer-line > h2 { margin: 0; color: var(--mmc-suave); font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; }
.mm-footer-badges { display: flex; flex-flow: row wrap; align-items: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.mm-footer-badges > li { display: flex; max-width: 100%; margin: 0; }

/* O selo: cada link do rodapé, o mesmo em todo app. */
.mm-footer .mm-selo {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  min-height: 1.5rem;
  margin: 0;
  padding: .05rem .45rem;
  border: 1px solid var(--mmc-borda);
  border-radius: var(--mmc-raio);
  background: var(--mmc-fundo);
  color: var(--mmc-texto);
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: start;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mm-footer .mm-selo:hover { border-color: var(--mmc-link); color: var(--mmc-link); text-decoration: none; }
.mm-footer .mm-selo:focus-visible { outline: 2px solid var(--mmc-foco); outline-offset: 2px; }
.mm-footer .mm-selo:active { border-color: var(--mmc-link); background: var(--mmc-fundo-2); color: var(--mmc-link); }
/* No dedo, cada selo tem 44 px e um vão maior entre eles (WCAG 2.5.5; AGENTS-UI § Acabamento). */
@media (pointer: coarse) {
  .mm-footer .mm-selo { min-height: 44px; padding-inline: .65rem; font-size: .8125rem; }
  .mm-footer-badges { gap: .5rem; }
}
.mm-footer .mm-selo .mm-ico { color: var(--mmc-suave); font-size: .8rem; }
.mm-footer .mm-selo:hover .mm-ico { color: inherit; }

/* O crédito da foto e o apoio; depois, a linha de estado. */
.mm-footer-meta { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-top: .15rem; padding-top: .4rem; border-top: 1px solid var(--mmc-borda); }
.mm-footer-meta:empty { display: none; }
.mm-footer .mm-foto-credito { margin: 0; }
.mm-footer-stats {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .75rem;
  margin: .15rem 0 0;
  padding-top: .4rem;
  border-top: 1px solid var(--mmc-borda);
  color: var(--mmc-suave);
  font-size: .75rem;
}
/* O CONTATO GLOBAL (`assets/contato.js`): o diálogo nativo, o mesmo em todo app. Os controles dentro dele
   são os do Bootstrap onde ele existe; sem Bootstrap (Radar, Samehand) o `:where()` dá o mínimo, com
   especificidade zero para nunca brigar com o `.form-control`/`.btn` de quem tem. Sem `min()` nem
   `rgb(… / …)`: a Grade roda em TV box (Chrome 52). */
.mm-contato { width: 40rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 0; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); box-shadow: var(--mm-shadow-pop); }
.mm-contato::backdrop { background: rgba(0, 0, 0, .5); }
/* Uma coluna que cabe na caixa (`minmax(0, 1fr)`) e o título que quebra a palavra: com a letra em 200% no celular, o
   campo de 20 caracteres alargava a coluna, e o × e o Cancelar saíam da janela (26/09/2026). */
.mm-contato-caixa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
.mm-contato-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mm-contato-cabeca > :first-child { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.mm-contato-titulo { margin: 0; font-size: 1.25rem; font-weight: 700; }
.mm-contato-sub, .mm-contato-nota { margin: .25rem 0 0; color: var(--mm-muted); }
.mm-contato-nota { font-size: .875rem; }
.mm-contato-x { flex: none; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; border: 0; border-radius: var(--mm-radius); background: transparent; color: var(--mm-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mm-contato-x:hover { background: var(--mm-surface-2); color: var(--mm-text); }
/* Separado do `:hover`: o Chrome 52 da TV box descarta a regra inteira por causa do `:focus-visible`. */
.mm-contato-x:focus-visible { background: var(--mm-surface-2); color: var(--mm-text); }
.mm-contato-x:active { background: var(--mm-border); color: var(--mm-text); }
/* No dedo, o × tem 44 px (WCAG 2.5.5; AGENTS-UI § Acabamento). */
@media (pointer: coarse) { .mm-contato-x { width: auto; height: auto; min-width: 44px; min-height: 44px; } }
/* A janela entra crescendo um pouco sobre o fundo que escurece, para a pessoa ver que a tela mudou de camada — sem
   movimento para quem pediu menos (a TV box não conhece a consulta e fica sem). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mm-janela-entra {
    from { opacity: 0; transform: translateY(.5rem) scale(.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes mm-fundo-entra {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .mm-contato[open] { animation: mm-janela-entra .2s ease-out; }
  .mm-contato[open]::backdrop { animation: mm-fundo-entra .2s ease-out; }
}
.mm-contato-form { display: grid; gap: .85rem; }
.mm-contato-campos { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 36rem) { .mm-contato-campos { grid-template-columns: 1fr 1fr; } }
.mm-contato-inteiro { grid-column: 1 / -1; }
.mm-contato-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mm-contato-aviso { margin: 0; }
.mm-contato-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-contato-ok { display: grid; gap: .75rem; justify-items: start; }
.mm-contato-ok[hidden], .mm-contato-form[hidden], .mm-contato-aviso[hidden] { display: none; }
:where(.mm-contato) label { display: block; margin-bottom: .35rem; font-weight: 600; }
:where(.mm-contato) :where(input, textarea) { box-sizing: border-box; width: 100%; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); font: inherit; }
:where(.mm-contato) :where(button) { min-height: 2.5rem; padding: .45rem 1rem; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); color: var(--mm-text); font: inherit; font-weight: 600; cursor: pointer; }
:where(.mm-contato) :where(button[type="submit"]) { border-color: var(--mm-accent); background: var(--mm-accent); color: var(--mm-on-accent); }
:where(.mm-contato) :where([role="alert"]) { padding: .5rem .75rem; border: 1px solid currentColor; border-radius: var(--mm-radius); color: var(--mm-bad, #b42318); }
/* A CAPA E A APRESENTAÇÃO (`@mm/ui/capa`), a mesma em todo app: foto de acervo sob um véu escuro, letra
   grande e as seções da apresentação. Composição só; cores, bordas e superfícies são as do Bootstrap.
   A capa roda também na TV box da Grade (WebView Chrome 52, AGENTS-UI regra 17): cada regra traz ANTES a
   forma que ele entende — `rgba()`, `top/right/bottom/left`, tamanho fixo antes do `clamp()`, margem no
   lugar do `gap` de flex — e o motor novo fica com a última. Não "limpe" as duplas. */
/* A borda da PÁGINA, lida antes de a capa e o destaque virarem escuros (`data-bs-theme="dark"` neles):
   no tema escuro é ela que separa um bloco escuro do fundo. */
body { --mm-borda-pagina: var(--bs-border-color); }
.mm-apresentacao { display: grid; gap: 1.5rem; }
/* A borda das seções é a da casa (3:1), não a translúcida do card do Bootstrap; o destaque tem a dele. */
.mm-apresentacao > .card:not(.mm-apr-destaque) { --bs-card-border-color: var(--bs-border-color); }
.mm-capa .mm-kicker::before, .mm-apresentacao .mm-kicker::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: .75rem; vertical-align: middle; background: currentColor; }
/* `flex-shrink: 0`: numa coluna flex que rola (o painel da Grade), `overflow: hidden` zera o mínimo e a capa encolhia a 2 px. */
.mm-capa { position: relative; isolation: isolate; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; margin-top: 1rem; margin-bottom: 1.5rem; margin-block: 1rem 1.5rem; border: 1px solid var(--mm-borda-pagina, var(--bs-border-color)); border-radius: var(--bs-border-radius-lg); color: var(--bs-body-color); background: #111; }
.mm-apresentacao > .mm-capa { margin-top: 0; margin-bottom: 0; margin-block: 0; }
.mm-capa-foto { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* O véu: o texto passa o contraste em qualquer ponto da foto, e o lado do texto é o mais escuro. */
.mm-capa::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .62) 60%, rgba(0, 0, 0, .5)); }
.mm-capa-corpo { flex: 1; display: grid; align-items: center; gap: 2rem; padding: 3rem 2rem; padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3.5rem); }
.mm-capa-principal, .mm-capa-lado { min-width: 0; }
.mm-capa .mm-kicker { color: var(--bs-emphasis-color); }
.mm-capa-nome { margin: 0; font-size: 4rem; font-size: clamp(3rem, 1.6rem + 5.5vw, 6rem); line-height: 1; font-weight: 600; color: var(--bs-emphasis-color); }
.mm-capa-titulo { margin: 0; font-size: 2.25rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.15; font-weight: 600; color: var(--bs-emphasis-color); text-wrap: balance; }
.mm-capa-nome + .mm-capa-titulo { margin-top: 1.25rem; font-size: 1.75rem; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.2; font-weight: 500; }
.mm-capa-texto { margin: 1.25rem 0 0; font-size: 1.125rem; }
.mm-capa-acoes { display: flex; flex-wrap: wrap; margin: 2rem 0 -.75rem; }
.mm-capa-acoes > * { margin: 0 .75rem .75rem 0; }
.mm-capa-sinais { display: flex; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; border-top: 1px solid var(--bs-border-color); background: rgba(0, 0, 0, .45); }
.mm-capa-sinais > div { flex: 1 1 0; padding: 1rem 1.5rem; padding: 1rem clamp(1rem, 3vw, 2rem); }
.mm-capa-sinais > div + div { border-left: 1px solid var(--bs-border-color); }
.mm-capa-sinais dt { color: var(--bs-emphasis-color); font-weight: 600; }
.mm-capa-sinais dd { margin: .2rem 0 0; font-size: .875rem; }
.mm-capa-credito { margin: 0; padding: .5rem 1.5rem; padding: .5rem clamp(1rem, 3vw, 2rem); background: rgba(0, 0, 0, .7); font-size: .8125rem; }
.mm-capa-credito a { color: inherit; }
/* O guia da casa (`mm-guide`) na coluna da capa: um painel com contorno próprio sobre a foto. */
.mm-capa-lado > .mm-guide { padding: 1rem 1.25rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: rgba(0, 0, 0, .6); }
/* A capa da home que é ferramenta: mais baixa, para a busca continuar na primeira tela. */
.mm-capa-compacta .mm-capa-corpo { padding-top: 2rem; padding-bottom: 2rem; padding-block: clamp(1.5rem, 4vw, 3rem); }
.mm-capa-compacta .mm-capa-titulo { font-size: 2rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); }
.mm-capa-compacta .mm-capa-texto { font-size: 1.0625rem; }
.mm-capa-compacta .mm-capa-acoes { margin-top: 1.5rem; }
/* As seções depois da capa. */
.mm-apresentacao h2 { margin: 0 0 1rem; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.15; font-weight: 600; text-wrap: balance; }
.mm-apresentacao h3 { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; }
.mm-apr-texto { margin: 0; font-size: 1.0625rem; color: var(--bs-secondary-color); }
.mm-apr-pilares p, .mm-apr-evento p, .mm-apr-principios p { margin: 0; font-size: .9375rem; color: var(--bs-secondary-color); }
.mm-apr-metodo, .mm-apr-destaque-corpo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.25rem, 4vw, 3rem); }
.mm-apr-metodo { align-items: center; }
.mm-apr-destaque-corpo { align-items: end; }
.mm-apr-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mm-apr-figura { margin: 0; }
.mm-apr-credito { margin: .5rem 0 0; font-size: .8125rem; color: var(--bs-secondary-color); }
.mm-apr-credito a { color: inherit; }
.mm-apr-pilares { margin-top: 1.75rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }
.mm-apr-pilares > .list-group-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; background: transparent; }
.mm-apr-pilares > .list-group-item:last-child { border-bottom-width: var(--bs-border-width); }
.mm-apr-icone { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--bs-border-radius); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 1.2rem; }
.mm-apr-destaque { --bs-card-border-color: var(--mm-borda-pagina, var(--bs-border-color)); }
.mm-apr-previa-corpo { display: grid; }
.mm-apr-contexto { padding: 1.25rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.mm-apr-contexto > p { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.mm-apr-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.mm-apr-legenda li { display: flex; align-items: center; gap: .5rem; }
.mm-apr-ponto { flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--mm-apr-cor, var(--bs-secondary-color)); }
.mm-apr-cor-blue { --mm-apr-cor: var(--bs-blue); }
.mm-apr-cor-indigo { --mm-apr-cor: var(--bs-indigo); }
.mm-apr-cor-purple { --mm-apr-cor: var(--bs-purple); }
.mm-apr-cor-pink { --mm-apr-cor: var(--bs-pink); }
.mm-apr-cor-red { --mm-apr-cor: var(--bs-red); }
.mm-apr-cor-orange { --mm-apr-cor: var(--bs-orange); }
.mm-apr-cor-yellow { --mm-apr-cor: var(--bs-yellow); }
.mm-apr-cor-green { --mm-apr-cor: var(--bs-green); }
.mm-apr-cor-teal { --mm-apr-cor: var(--bs-teal); }
.mm-apr-cor-cyan { --mm-apr-cor: var(--bs-cyan); }
/* A linha do tempo do exemplo: um traço de ponto a ponto, e a divisória só na coluna do texto. */
.mm-apr-linha { display: grid; row-gap: 1rem; margin: 0; padding: 1.25rem 1.5rem; list-style: none; }
.mm-apr-linha > li { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 1rem; }
.mm-apr-linha > li:not(:last-child)::before { content: ""; position: absolute; top: 1.35rem; bottom: -1.05rem; left: calc(.5rem - .5px); width: 1px; background: var(--bs-border-color); }
.mm-apr-linha .mm-apr-ponto { width: 1rem; height: 1rem; margin-top: .2rem; }
.mm-apr-evento { min-width: 0; padding-bottom: 1rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.mm-apr-linha > li:last-child .mm-apr-evento { padding-bottom: 0; border-bottom: 0; }
.mm-apr-evento > p:first-child { font-size: .8125rem; }
.mm-apr-fatos { min-width: 0; padding: 1.25rem 1.5rem; }
.mm-apr-fatos > p { margin: 0 0 1rem; }
.mm-apr-fatos > .mm-facts { margin: 0 0 1rem; }
.mm-apr-cabeca { padding: clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) 1.5rem; }
.mm-apr-cabeca h2 { margin-bottom: 0; }
.mm-apr-cabeca .mm-apr-texto { margin-top: .75rem; }
/* Os princípios em grade; o vão de 1px, no tom da borda, é a divisória entre eles. */
.mm-apr-principios { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--bs-border-color); }
.mm-apr-principios > li { padding: clamp(1.25rem, 3vw, 2rem); background: var(--bs-card-bg); }
.mm-apr-principios .bi { font-size: 1.5rem; color: var(--bs-primary-text-emphasis); }
.mm-apr-principios h3 { margin: 1rem 0 .4rem; }
.mm-apr-chamada { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(1.25rem, 4vw, 3rem); }
.mm-apr-chamada > div { flex: 1 1 32rem; min-width: 0; }
@media (max-width: 575.98px) {
  .mm-capa-sinais dd { display: none; }
  .mm-capa-acoes > .btn, .mm-apr-chamada > .btn { flex: 1 1 100%; }
}
@media (min-width: 576px) {
  .mm-apr-principios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .mm-capa:not(.mm-capa-compacta) { min-height: min(80svh, 46rem); }
  .mm-apr-com-legenda { grid-template-columns: 10rem minmax(0, 1fr); }
  .mm-apr-com-legenda > .mm-apr-contexto { border-bottom: 0; border-right: var(--bs-border-width) solid var(--bs-border-color); }
  .mm-apr-com-legenda .mm-apr-legenda { flex-direction: column; }
}
@media (min-width: 992px) {
  .mm-capa-corpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mm-capa-principal { grid-column: 1; }
  .mm-apr-metodo:not(.mm-apr-sem-foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mm-apr-destaque-corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mm-apr-principios { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}