/* MAGNYN · site, onda 1 (14/10/2026) sobre a gramática aprovada de R8.A: capítulos em cor cheia e páginas em Papel, a
   régua "rótulo ——— assunto" no começo de cada capítulo; sem o pé de fechamento nem o cabeço corrido (pedido da Paula,
   documento de 14/10: "cortar as linhas de fechamento que se repetem"). Elemento: os pontos que convergem no caminho.
   Cores: R007 a R011 (Ink, Paper, Expansion, Warmth, Mist); R028 (Ink 60). Sem gradiente, sem sombra, sem vidro.
   Páginas: / (home), /simulate, /agents, /privacidade, todas com este arquivo. */
@font-face { font-family: "TASA Orbiter"; src: url("/inicio/fontes/tasaorbiter-wght.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Kode Mono"; src: url("/inicio/fontes/kodemono-wght.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --mg-c-ink: #101520;
  --mg-c-paper: #F2F1ED;
  --mg-c-exp: #EF4A37;
  --mg-c-warm: #E99279;
  --mg-c-mist: #C4C7CA;
  --mg-c-ink60: #6A6D72;   /* R028 */
  --mg-max: 1312px;
  --mg-cap-y: 112px;       /* respiro vertical do capítulo (DESIGN.md, chapter-y) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: "TASA Orbiter", system-ui, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5;
  color: var(--mg-c-ink); background: var(--mg-c-paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
h2, h3, h4 { text-wrap: balance; }
.mg-junto { white-space: nowrap; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px; }
.mg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mg-pular { position: fixed; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--mg-c-paper);
  color: var(--mg-c-ink); font: 600 14px/1 "TASA Orbiter", sans-serif; text-decoration: none; }
.mg-pular:focus { top: 12px; }
/* fora do foco, o link fica recortado (continua no teclado): no PDF do site, feito na tela, ele aparecia no pé de cada
   página (pedido 22); na impressão, some */
.mg-pular:not(:focus) { clip-path: inset(50%); }
@media print { .mg-pular { display: none !important; } }

/* ---------- as duas versões do texto da rodada (?texto=home-v1): a chave saiu; a regra fica até o hero não usar mais ---------- */
:root:not([data-mg-texto="home-v1"]) .mg-var--v1 { display: none; }
:root[data-mg-texto="home-v1"] .mg-var--id { display: none; }

/* ---------- temas: uma cor de fundo por capítulo (a troca de fundo do canon). --mg-sec é a tinta de apoio de cada fundo,
   sempre com 4,5:1 ou mais em texto pequeno: Mist sobre Ink 10,75; Ink 60 sobre Paper 4,60; Ink sobre Expansion 4,96 ---------- */
.mg-tema-ink   { background: var(--mg-c-ink);   color: var(--mg-c-paper); --mg-regua-cor: var(--mg-c-exp); --mg-fio: rgb(242 241 237 / .28); --mg-fio-forte: rgb(242 241 237 / .6); --mg-sec: var(--mg-c-mist); }
.mg-tema-paper { background: var(--mg-c-paper); color: var(--mg-c-ink);   --mg-regua-cor: var(--mg-c-exp); --mg-fio: rgb(16 21 32 / .22); --mg-fio-forte: rgb(16 21 32 / .6); --mg-sec: var(--mg-c-ink60); }
.mg-tema-red   { background: var(--mg-c-exp);   color: var(--mg-c-ink);   --mg-regua-cor: var(--mg-c-ink); --mg-fio: rgb(16 21 32 / .35); --mg-fio-forte: rgb(16 21 32 / .7); --mg-sec: var(--mg-c-ink); }

/* ---------- letras (R113, P0311): a Kode Mono só no rótulo curto em caixa alta, o que nomeia um bloco (rótulo pequeno
   500 a 13 px, rótulo de seção 600 a 15 px, os dois com +0,08 em); frase pequena, procedência, rodapé, trilha,
   complemento do rótulo e números na TASA Orbiter, a frase pequena em 400 a 15 px ---------- */
.mg-rotulo { font-family: "Kode Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; }
.mg-rotulo-corrido { font-weight: 400; font-size: 15px; line-height: 1.5; letter-spacing: normal; }
.mg-destaque { color: var(--mg-c-exp); }
.mg-lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; max-width: 36em; }
.mg-largura { max-width: var(--mg-max); margin: 0 auto; }
/* o que ainda espera confirmação na versão de revisão: uma classe só, para sair toda de uma vez antes de ir ao ar */
/* 15 px: o piso de corpo de texto do testar-peca a 390, para a versão de revisão passar (o marcador sai antes de ir ao ar) */
.mg-pendente { font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--mg-sec, var(--mg-c-ink60)); white-space: nowrap; margin-left: .3em; }
p.mg-pendente, .mg-politica .mg-pendente, .mg-politica__data .mg-pendente { white-space: normal; }
p.mg-pendente { margin-left: 0; }

/* ---------- logotipo: a letra própria (R068), letras iguais, o Y em Expansion; o ponto final (R081).
   As duas versões estão no HTML; data-mg-logo no <html> ("ponto", padrão, ou "sem") diz qual aparece ---------- */
.mg-logo { display: block; height: 1em; width: auto; fill: currentColor; overflow: visible; }
:root:not([data-mg-logo="sem"]) .mg-logo--sem { display: none; }
:root[data-mg-logo="sem"] .mg-logo--ponto { display: none; }
.mg-logo .mg-y { fill: var(--mg-c-exp); }
.mg-marca { display: inline-flex; color: inherit; text-decoration: none; }

/* ---------- o fio que estica numa linha (só no rodapé; R085: os rótulos de seção não têm mais régua) ---------- */
.mg-regua { flex: 1 1 auto; height: 2px; min-width: 24px; background: var(--mg-regua-cor); }
.mg-regua--fina { height: 1px; background: var(--mg-fio); }
/* rótulo de seção: só o nome, sem número e sem régua (R082, R085, pedido 25), em Kode Mono 600 a 15 px em toda largura
   (R113, P0311; antes 700 a 18 px), na tinta plena do fundo: Ink sobre Expansion (4,96:1), Paper sobre Noite e Ink sobre
   Papel (16,15:1). Nos dois rótulos de Simulate e Agents, o segundo (a tecnologia, o parceiro) junto do primeiro, no vão
   do .mg-cab, na TASA Orbiter 400 em caixa mista e alinhado pela linha de base: sem a régua no meio, nas duas pontas o
   segundo ficaria solto na borda, a 760 px do nome a 1440; juntos, leem como um rótulo só, nome e complemento */
.mg-cab { display: flex; align-items: baseline; gap: 20px; margin: 0 0 clamp(36px, 4.4vw, 64px); }
.mg-cab .mg-rotulo { font-size: 15px; font-weight: 600; line-height: 1.3; }
.mg-tema-red .mg-cab .mg-rotulo, .mg-tema-paper .mg-cab .mg-rotulo { color: var(--mg-c-ink); }
.mg-tema-ink .mg-cab .mg-rotulo { color: var(--mg-c-paper); }
.mg-cab .mg-rotulo:last-child:not(:first-child), .mg-cab .mg-com-farol .mg-rotulo { font-family: "TASA Orbiter", system-ui, sans-serif; font-weight: 400;
  letter-spacing: normal; text-transform: none; }
.mg-cab .mg-com-farol { align-self: center; }
.mg-cab .mg-farol { height: 16px; }

/* ---------- botões: nunca vermelhos (R061) ---------- */
.mg-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.mg-botao { display: inline-flex; align-items: center; gap: .4em; min-height: 48px; padding: 12px 22px; border: 1.5px solid currentColor;
  border-radius: 2px; font: inherit; font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; }
.mg-tema-ink .mg-botao { background: var(--mg-c-paper); color: var(--mg-c-ink); border-color: var(--mg-c-paper); }
.mg-tema-paper .mg-botao, .mg-tema-red .mg-botao { background: var(--mg-c-ink); color: var(--mg-c-paper); border-color: var(--mg-c-ink); }
.mg-botao.mg-botao--linha { background: transparent; color: inherit; border-color: currentColor; }
.mg-botao:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* o anel de foco do botão contrasta com o fundo da seção (no botão cheio, currentColor seria a cor do próprio fundo) */
.mg-tema-ink .mg-botao:focus-visible { outline: 2px solid var(--mg-c-paper); outline-offset: 3px; }
.mg-tema-paper .mg-botao:focus-visible, .mg-tema-red .mg-botao:focus-visible { outline: 2px solid var(--mg-c-ink); outline-offset: 3px; }

/* ---------- o elemento (contrato do engenheiro: variáveis de cor) ---------- */
.mg-crowd { --mg-ink: var(--mg-c-paper); --mg-mist: var(--mg-c-mist); --mg-warm: var(--mg-c-warm); --mg-path: var(--mg-c-exp); }
.mg-tema-paper .mg-crowd { --mg-ink: var(--mg-c-ink); --mg-mist: var(--mg-c-ink60); }
.mg-crowd__svg { display: block; width: 100%; height: 100%; }
.mg-el--pontos .mg-crowd__people { fill: var(--mg-ink); stroke: none; }
.mg-el--pontos .mg-crowd__people .mg-m { fill: var(--mg-mist); }
.mg-el--pontos .mg-crowd__people .mg-t { fill: var(--mg-warm); }
.mg-caminho { fill: var(--mg-path); stroke: none; }
.mg-caminho .mg-t { fill: var(--mg-warm); }
.mg-path { stroke: var(--mg-path); }

/* =========================================================
   CAPA (herói, Ink): proporção 1440 × 840, tudo medido na unidade do desenho (--u), para o rótulo e o começo do
   caminho ficarem juntos (âncora R7.A). O hero é do diretor de arte (heroi.css, classes mg-heroi__*); aqui fica só a
   base que ele usa: o palco (--u, overflow: clip), a multidão e a grade do palco abaixo de 900.
   ========================================================= */
.mg-capa { position: relative; container-type: inline-size; }
.mg-capa__palco { --u: calc(100cqw / 1440); position: relative; overflow: clip;
  min-height: max(calc(100cqw * 840 / 1440), calc(100vh - 72px));
  min-height: max(calc(100cqw * 840 / 1440), calc(100svh - 72px)); }
.mg-capa__multidao { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1440 / 840; }
.mg-crowd__svg--m, .mg-crowd__svg--t { display: none; }


/* =========================================================
   CABEÇALHO (diagramador): só o logotipo e a navegação (R083, pedido 16; a assinatura "Inteligência aplicada ao que gera
   impacto." fica no rodapé). Na home, absoluto no alto do palco (--u do desenho); nas outras páginas, numa faixa Noite
   própria. Abaixo de 900: logotipo e botão "Menu" numa linha, e o <nav> vira painel (site.js põe .mg-js no <html>; sem
   script, os links ficam à vista).
   ========================================================= */
.mg-cabecalho { position: absolute; left: calc(64 * var(--u)); right: calc(64 * var(--u)); top: calc(26 * var(--u));
  display: flex; align-items: center; gap: calc(20 * var(--u)); z-index: 3; }
.mg-cabecalho .mg-marca { font-size: max(15px, calc(18 * var(--u))); padding: 6px 0; }
.mg-nav { display: flex; align-items: center; gap: calc(26 * var(--u)); margin-left: auto; }
.mg-nav a:not(.mg-botao) { font-weight: 500; font-size: max(14px, calc(15 * var(--u))); text-decoration: none; padding: 8px 0; white-space: nowrap; }
/* "Contato" é link como os outros (pedido 21): na primeira tela, o único botão é "Fale com nosso time" (R084) */
.mg-nav a:not(.mg-botao):hover, .mg-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.mg-menu-botao { display: none; }
/* páginas internas: o cabeçalho numa faixa Noite, em fluxo */
.mg-topo-pagina { container-type: inline-size; }
/* o logotipo na margem do texto da página (a do capítulo: 64 px de 1200 para cima, 40 de 900 a 1199, e a coluna de
   1312 centrada além de 1440), como na home ele fica na linha do texto do hero (crítica 3) */
@media (min-width: 900px) {
  .mg-topo-pagina .mg-cabecalho { --u: calc(100cqw / 1440); position: relative; left: auto; right: auto; top: auto;
    margin: 0 max(40px, (100cqw - var(--mg-max)) / 2); padding-top: calc(26 * var(--u)); }
}
@media (min-width: 1200px) {
  .mg-topo-pagina .mg-cabecalho { margin: 0 max(64px, (100cqw - var(--mg-max)) / 2); }
}

/* ---------- capítulos ---------- */
.mg-capitulo { padding: var(--mg-cap-y) 64px; container-type: inline-size; --mg-pad: 64px; }
@media (max-width: 1199px) { .mg-capitulo { --mg-cap-y: 88px; padding: var(--mg-cap-y) 40px; --mg-pad: 40px; } }
@media (max-width: 899px) { .mg-capitulo { --mg-cap-y: 56px; padding: var(--mg-cap-y) 20px; --mg-pad: 20px; } }
.mg-capitulo.mg-capitulo--capa { padding: 64px 64px 80px; }
@media (max-width: 1199px) { .mg-capitulo.mg-capitulo--capa { padding: 52px 40px 64px; } }
@media (max-width: 899px) { .mg-capitulo.mg-capitulo--capa { padding: 40px 20px 48px; } }
/* dois capítulos seguidos no mesmo fundo leem como um só (home, pedido 26: Quem somos e Contato, em Noite, depois que as
   perguntas frequentes foram para /simulate). Entre eles, sem fio, o respiro de um capítulo e mais 16 px: o primeiro
   fica só com 16 px embaixo e o segundo guarda o padding de cima, e a âncora do segundo cai onde sempre caiu. O vão
   fica no dobro do que vai do rótulo ao título (128 para 64 px a 1440, 104 para 45 a 1024, 72 para 36 a 390); com só
   o padding do capítulo, a 390 o rótulo do segundo ficava a 56 px do que vem antes, perto dos vãos de dentro do
   capítulo (48). Os 16 px embaixo do primeiro também evitam o conteúdo rente à borda dele (impeccable, cramped-padding) */
.mg-capitulo.mg-capitulo--antes-de-segue { padding-bottom: 16px; }
/* páginas internas: o primeiro capítulo continua a faixa Noite do cabeçalho */
.mg-capitulo.mg-capitulo--abre { padding-top: clamp(48px, 6vw, 88px); }
.mg-frente-curta .mg-titulo-pagina, .mg-capitulo--abre .mg-titulo-pagina { max-width: 15em; }
.mg-capitulo__titulo { font-weight: 700; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.0; letter-spacing: -.01em;
  max-width: 16em; text-wrap: balance; }
.mg-titulo-pagina { font-weight: 700; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.01em;
  text-wrap: balance; }
/* título das seções de apoio (Quem somos, Perguntas, a jornada): o subtítulo grande da escala (26 a 38) */
.mg-titulo-secao { font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.005em; text-wrap: balance; }
.mg-subtitulo { font-weight: 700; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; text-wrap: balance; }
.mg-subtitulo--grande { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.005em; max-width: 19em; }
.mg-frase { display: block; }
/* o FAROL (R070): o logotipo atual, sem recolorir, nunca mais alto que o da MAGNYN na mesma vista (R019, R054) */
.mg-farol { display: block; height: 14px; width: auto; flex: none; }
.mg-com-farol { display: inline-flex; align-items: center; gap: 8px; }
.mg-farol-cabeca .mg-farol { height: 15px; }
@media (min-width: 900px) and (max-width: 1279px) { .mg-farol-cabeca .mg-farol { height: 14px; } }

/* página de conteúdo do canon: texto em dois terços, o outro terço ao lado */
.mg-conteudo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mg-conteudo--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mg-conteudo__texto { display: grid; gap: 20px; align-content: start; }
.mg-conteudo__texto > p { max-width: 36em; }
.mg-conteudo__texto .mg-acoes { margin-top: 12px; }
.mg-conteudo__demo { align-self: stretch; display: grid; align-content: end; gap: 12px; }
.mg-conteudo__demo svg { display: block; width: 100%; height: auto; }
/* o motivo sangra até a borda direita da página (âncora R7.A) */
.mg-conteudo__demo.mg-crowd { margin-right: calc(-1 * var(--mg-pad) - max(0px, (100cqw - var(--mg-max)) / 2)); }
/* a segunda coluna separada por um fio (estrutura por fios) */
.mg-conteudo--divisa > :last-child { border-left: 1px solid var(--mg-fio); padding-left: clamp(28px, 3vw, 44px); align-self: stretch; }

/* ---------- 01 O desafio (capa em Expansion): o título e as três tensões ---------- */
/* sem a régua que separava o título das tensões (pedido 25, R085): o vão é todo da margem da lista, e o texto e os fios
   verticais começam juntos no alto dela. De 48 a 64 px: no celular, o mesmo vão que separa as tensões do fecho (20 + 28),
   e de 1.091 px para cima, o mesmo do rótulo ao título (4,4vw); lê como bloco novo sem os 97 px de antes até o texto,
   que sem a régua ficariam vazios. Mais que 1,33 vez o vão do rótulo ao título, o título passa a ler como legenda do
   rótulo (impeccable, heading-rhythm, a 390 com 56 px) */
.mg-tensoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 4.4vw, 64px); }
.mg-tensoes li { position: relative; padding: 0 28px 0 0; }
.mg-tensoes li + li { padding-left: 28px; }
.mg-tensoes li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--mg-fio); }
.mg-tensoes p { font-size: 18px; line-height: 1.5; max-width: 24em; }
.mg-tensoes strong { display: block; font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; margin-bottom: 8px; }
/* os fechamentos do 01 e do 02 na escala dos títulos de pilar (TASA 600, 26 px a 1440), na coluna 1 da grade de três */
.mg-fecho { margin-top: clamp(28px, 3vw, 44px); font-weight: 600; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.3;
  max-width: 600px; text-wrap: balance; }
.mg-fecho .mg-frase { display: block; }

/* ---------- 02 Como trabalhamos: pensar, decidir, operar ---------- */
/* sem a régua de antes dos pilares (pedido 25): de 960 px para cima a lista começa onde ela estava (5vw, até 72 px);
   abaixo, 48 px, como nas tensões */
.mg-pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 5vw, 72px); }
.mg-pilares li, .mg-passos li { position: relative; padding: 22px 28px 0 0; display: grid; gap: 10px; align-content: start; }
.mg-pilares li + li, .mg-passos li + li { padding-left: 28px; }
.mg-pilares li + li::before, .mg-passos li + li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 0; width: 1px; background: var(--mg-fio); }
/* nos pilares, o texto e o fio vertical começam juntos no alto da lista (os passos seguem com 22 px abaixo da trilha) */
.mg-pilares li { padding-top: 0; }
.mg-pilares li + li::before { top: 0; }
.mg-pilares h3, .mg-passos h3 { font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.3; }
.mg-pilares p:not(.mg-rotulo), .mg-passos p:not(.mg-prazo) { font-size: 16.5px; line-height: 1.55; }
.mg-pilares .mg-rotulo { color: var(--mg-sec); }
.mg-frente { margin-top: 4px; }
.mg-frente a { display: inline-flex; align-items: baseline; gap: .45em; padding: 6px 0; font-weight: 600; font-size: 16.5px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-frente a:hover { text-decoration-thickness: 2px; }
.mg-seta { color: var(--mg-c-exp); text-decoration: none; display: inline-block; }
.mg-fecho--como { margin-top: clamp(28px, 3vw, 44px); }

/* ---------- as frentes (Simulate e Agents): trilha dos pontos e os passos ---------- */
.mg-sequencia { margin-top: clamp(48px, 5.6vw, 80px); }
/* a trilha: o fio que abre a sequência é o caminho; a linha do svg é o fio de cima dos passos */
.mg-trilha svg { display: block; width: 100%; height: auto; overflow: visible; }
.mg-trilha__peca svg, .mg-trilha__seg { overflow: visible; }
.mg-trilha__peca { display: none; }
.mg-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-sequencia--4 .mg-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* home, bloco 03: os três passos empilhados na coluna direita, cada um com o seu trecho de caminho (como no 390) */
.mg-passos--pilha { grid-template-columns: 1fr; }
.mg-passos--pilha .mg-trilha__peca { display: block; margin: 0 0 10px; }
.mg-passos--pilha .mg-trilha__peca svg { display: block; width: 100%; height: auto; }
.mg-passos .mg-passos--pilha li, .mg-passos--pilha li, .mg-passos--pilha li + li { padding: 0 0 22px; }
.mg-passos--pilha li + li::before { display: none; }
.mg-passos--pilha h3 { font-size: clamp(19px, 1.6vw, 22px); }
/* o caminho que liga o texto ao passo 03 (pedido 19, P0181): à esquerda do passo, pela coluna do texto e o vão, com o
   fim na linha do trecho de 3 pistas (72/350 da largura do passo) e o começo 38 px acima dela (20 de 1000 a 1199), sob os botões. O passo é
   o contêiner (cqw = a largura dele); a coluna do texto mede 7/5 dela. Só de 1000 px para cima: abaixo, o texto quebra
   em mais linhas e os botões descem até o começo do caminho; no celular as colunas empilham, os passos vêm logo depois
   dos botões e não há vão a atravessar */
.mg-passos--pilha li:has(.mg-elo) { container-type: inline-size; }
.mg-elo { display: none; position: absolute; right: 100%; top: calc(100cqw * 72 / 350 - 60px); height: 150px;
  width: calc(140cqw + clamp(32px, 5vw, 80px)); overflow: hidden; pointer-events: none; }
@media (min-width: 1200px) { .mg-elo--d { display: block; } }
@media (min-width: 1000px) and (max-width: 1199px) { .mg-elo--t { display: block; height: 130px; } }
/* correção 16 (crítica): linha e pontos na escala do trecho do passo 03 (viewBox 350, linha de 1,8 e raio 3), para o caminho
   chegar ao passo como a mesma linha */
.mg-elo__linha { fill: none; stroke: var(--mg-c-exp); stroke-width: calc(100cqw * 1.8 / 350); stroke-linecap: round; }
.mg-elo__pontos circle { fill: var(--mg-c-exp); r: calc(100cqw * 3 / 350); transform-box: fill-box; transform-origin: center; }
/* desenhado uma vez ao entrar na tela: a linha corre (1,4 s) e cada ponto chega quando ela passa; com movimento reduzido,
   sem script e na impressão, já desenhado */
.mg-js .mg-elo:not(.mg-elo--feito) .mg-elo__linha { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mg-js .mg-elo:not(.mg-elo--feito) .mg-elo__pontos circle { opacity: 0; }
.mg-js .mg-elo.mg-elo--vai .mg-elo__linha { animation: mg-elo-linha 1.4s cubic-bezier(.33, .1, .25, 1) forwards; }
.mg-js .mg-elo.mg-elo--vai .mg-elo__pontos circle { animation: mg-elo-ponto .45s ease-out forwards; animation-delay: calc(var(--s) * 1.3s); }
@keyframes mg-elo-linha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mg-elo-ponto { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mg-js .mg-elo .mg-elo__linha { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .mg-js .mg-elo .mg-elo__pontos circle { opacity: 1; animation: none; } }
@media print { .mg-elo .mg-elo__linha { stroke-dasharray: none !important; animation: none !important; } .mg-elo circle { opacity: 1 !important; animation: none !important; } }
.mg-num { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--mg-c-exp); }
.mg-tema-paper .mg-num { color: var(--mg-c-ink); }
.mg-prazo { font-family: "Kode Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mg-sec); }
@media (min-width: 900px) and (max-width: 1439px) { .mg-passos--jornada .mg-prazo { min-height: 3.1em; } }
.mg-jornada .mg-titulo-secao, .mg-jornada .mg-subtitulo { margin-bottom: 12px; }
.mg-jornada .mg-acoes { margin-top: clamp(32px, 4vw, 48px); }
#piloto, #diagnostico { scroll-margin-top: 24px; }

/* ---------- /agents, "Por onde começo?" (E24, P0223): os cinco passos do FAROL num caminho só, na letra da MAGNYN.
   O número de cada passo fica sobre o caminho (o caminho se abre onde ele passa, como as fases no anel do slide 4 do
   deck); entre dois números, o trecho: a linha e uma fileira de pontos em Expansion (<svg> em linha, sem viewBox: o
   ponto fica redondo e do mesmo tamanho em toda largura). A volta, do 5 ao 2, é um fio em Expansion com a ponta de seta
   cheia (R030: triângulo, não chevron) e o texto "a cada ciclo, nova leitura" sobre ela. Expansion só no caminho, na
   volta e na seta: a direção. De 900 px para cima, os cinco lado a lado, a volta por cima; abaixo, empilhados, o
   caminho descendo pela margem e a volta por fora dele, fechando sob o 5, onde fica o texto dela ---------- */
.mg-etapas { --mg-et-fundo: var(--mg-c-ink); --mg-et-tinta: var(--mg-c-paper); --mg-et-volta: var(--mg-c-mist);
  position: relative; margin-top: clamp(40px, 4.4vw, 64px); padding-top: 60px; }
.mg-tema-paper .mg-etapas { --mg-et-fundo: var(--mg-c-paper); --mg-et-tinta: var(--mg-c-ink); --mg-et-volta: var(--mg-c-ink60); }
.mg-etapas__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mg-etapas__lista li { position: relative; display: grid; grid-template-rows: 36px auto; row-gap: 14px; align-content: start;
  padding-right: 24px; }
.mg-etapas__num { font-weight: 700; font-size: 28px; line-height: 36px; font-variant-numeric: tabular-nums;
  color: var(--mg-et-tinta); justify-self: start; }
.mg-etapas__nome { font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; max-width: 12em; text-wrap: balance; }
/* o trecho até o número seguinte: começa 19 px depois do algarismo (TASA Orbiter 28 tabular, 17,4 px de largura) e acaba 18 px
   antes do próximo; os pontos (raio 6, o do site a 1440) a 10, 30, 50, 70 e 90% do trecho */
.mg-etapas__trecho { position: absolute; display: block; overflow: visible; pointer-events: none; }
.mg-etapas__trecho line { stroke: var(--mg-c-exp); stroke-width: 2.5; }
.mg-etapas__trecho circle { fill: var(--mg-c-exp); }
.mg-etapas__trecho--h { left: 36px; top: 11px; width: calc(100% - 54px); height: 14px; }
.mg-etapas__trecho--v { display: none; }
/* a volta: do alto do 5 ao alto do 2 (o centro do algarismo fica a 8,7 px da borda da coluna), com a seta sobre o 2 */
.mg-etapas::before { content: ""; position: absolute; top: 11px; left: calc(20% + 9px); width: calc(60% + 2px); height: 31px;
  border: 2px solid var(--mg-c-exp); border-bottom: 0; border-radius: 14px 14px 0 0; pointer-events: none; }
.mg-etapas::after { content: ""; position: absolute; top: 42px; left: calc(20% + 3px); width: 14px; height: 12px;
  background: var(--mg-c-exp); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
/* o texto da volta sobre o fio de cima, que se abre onde ele passa; começa na coluna do passo 3 */
.mg-etapas__volta { position: absolute; top: 0; left: 40%; padding: 0 12px; background: var(--mg-et-fundo);
  color: var(--mg-et-volta); font-weight: 500; font-size: 16px; line-height: 24px; white-space: nowrap; }
.mg-comeco { margin-top: clamp(40px, 4.4vw, 64px); }
/* de 900 a 1199 o trecho fica com 110 a 160 px: três pontos (10, 50 e 90%), para não encostarem */
@media (min-width: 900px) and (max-width: 1199px) { .mg-etapas__trecho--h circle:nth-of-type(2n) { display: none; } }
/* abaixo de 900: uma faixa de 64 px à esquerda com o caminho (o centro do número a 50 px) e a volta (a 8 px); o nome
   ao lado do número. Cada passo tem ao menos 100 px de alto, para os três pontos do trecho terem ar (raio 5). A volta
   é feita por partes, uma em cada passo: o braço com a seta no 2, o fio no 3, no 4 e no 5, e o fecho em U sob o 5, onde
   fica o texto dela */
@media (max-width: 899px) {
  .mg-etapas { padding-top: 0; margin-top: 36px; }
  .mg-etapas::before, .mg-etapas::after { display: none; }
  .mg-etapas__lista { grid-template-columns: 1fr; }
  .mg-etapas__lista li { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: none; column-gap: 0;
    min-height: 100px; padding: 0 0 32px; }
  .mg-etapas__num { grid-column: 1; justify-self: end; width: 28px; text-align: center; font-size: 22px; line-height: 28px; }
  .mg-etapas__nome { grid-column: 2; padding-top: 2px; max-width: 22em; }
  .mg-etapas__trecho--h { display: none; }
  .mg-etapas__trecho--v { display: block; left: 43px; top: 34px; width: 14px; height: calc(100% - 40px); }
  .mg-etapas__lista li:last-child { min-height: 0; padding-bottom: 20px; }
  .mg-etapas__lista li:nth-child(2)::before { content: ""; position: absolute; left: 7px; top: 13px; bottom: 0; width: 19px;
    border-top: 2px solid var(--mg-c-exp); border-left: 2px solid var(--mg-c-exp); border-top-left-radius: 12px; }
  .mg-etapas__lista li:nth-child(2)::after { content: ""; position: absolute; left: 26px; top: 7px; width: 12px; height: 14px;
    background: var(--mg-c-exp); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .mg-etapas__lista li:nth-child(n+3)::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px;
    background: var(--mg-c-exp); }
  .mg-etapas__lista li:nth-child(5)::after { content: ""; position: absolute; left: 49px; top: 34px; bottom: 0; width: 2px;
    background: var(--mg-c-exp); }
  .mg-etapas__volta { position: relative; top: auto; left: auto; padding: 0 0 0 64px; background: none; white-space: normal; }
  .mg-etapas__volta::before { content: ""; position: absolute; left: 7px; top: 0; width: 44px; height: 13px;
    border: 2px solid var(--mg-c-exp); border-top: 0; border-radius: 0 0 12px 12px; }
  .mg-comeco { margin-top: 40px; }
}

/* a oferta ao lado do título (o piloto da Simulate) */
.mg-oferta { display: grid; gap: 14px; align-content: start; }
.mg-oferta p { font-size: 17px; line-height: 1.55; max-width: 30em; }
.mg-oferta .mg-acoes { margin-top: 10px; }

/* o piloto como faixa que fecha a abertura de /simulate: texto à esquerda, botões à direita */
.mg-oferta--faixa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(32px, 5vw, 80px); align-items: end;
  margin-top: clamp(48px, 5.6vw, 80px); padding-top: 24px; border-top: 1px solid var(--mg-fio-forte); }
.mg-oferta__texto { display: grid; gap: 12px; }
.mg-oferta--faixa .mg-acoes { margin-top: 0; justify-content: flex-start; }

/* a escala da Simulate (R064: exemplo, não população entregue): 1 → 10 → 100 → 1.000 → 10.000. Cada etapa surge uma vez,
   em sequência, quando a figura aparece (site.js põe .mg-escala--vai); a legenda nunca se move. Sem script, com
   movimento reduzido e na impressão: a figura inteira, parada */
.mg-escala { display: grid; gap: 10px; align-self: end; align-content: end; color: var(--mg-c-paper);
  --mg-esc-h: clamp(220px, 21vw, 300px);
  margin-right: calc(-1 * var(--mg-pad) - max(0px, (100cqw - var(--mg-max)) / 2)); }
.mg-tema-paper .mg-escala { color: var(--mg-c-ink); }
.mg-escala svg { display: block; width: 100%; height: var(--mg-esc-h); }
/* o número de cada grupo, sob a borda esquerda dele: a posição no desenho vezes a escala do slice (a maior entre largura
   e altura), medida pela largura do próprio parágrafo */
.mg-escala__numeros { position: relative; height: 18px; container-type: inline-size; }
.mg-escala__numeros span { position: absolute; top: 0; left: calc(var(--x) * max(100cqw / 1600, var(--mg-esc-h) / 300));
  font-size: 15px; line-height: 18px; color: var(--mg-sec); white-space: nowrap; }
/* a legenda na grade (a figura sangra até a borda da tela) */
.mg-escala figcaption { color: var(--mg-sec); max-width: 38em; margin-right: calc(var(--mg-pad) + max(0px, (100cqw - var(--mg-max)) / 2)); }
@media (prefers-reduced-motion: no-preference) {
  .mg-js .mg-escala:not(.mg-escala--parada) [data-mg-etapa] { opacity: 0; }
  .mg-js .mg-escala.mg-escala--vai [data-mg-etapa] { animation: mg-escala-surge .5s cubic-bezier(.3, .55, .3, 1) both;
    animation-delay: calc(var(--mg-etapa) * .32s + .1s); }
}
@keyframes mg-escala-surge { from { opacity: 0; } to { opacity: 1; } }
@media print { .mg-escala [data-mg-etapa] { opacity: 1 !important; animation: none !important; } }

/* onde ela mais ajuda: um índice, não uma fila de etiquetas */
.mg-rende { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.mg-indice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.5vw, 36px); }
.mg-indice li { padding: 14px 0 16px; border-top: 1px solid var(--mg-fio-forte); font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; }
.mg-rende + .mg-conteudo, .mg-rende + .mg-dupla { margin-top: clamp(56px, 6.4vw, 96px); }
.mg-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mg-dupla > :last-child { border-left: 1px solid var(--mg-fio); padding-left: clamp(28px, 3vw, 44px); align-self: stretch; }
.mg-dupla > * { display: grid; gap: 16px; align-content: start; }
.mg-dupla p { max-width: 34em; }

/* ---------- as fotos do deck nas páginas das frentes (E34, R099): entre os blocos de texto, sem efeito e em cor natural
   (R096). De 900 px para cima, na largura do texto, em 3:1; de 600 a 899, de borda a borda, em 2:1; abaixo, em 3:2. O
   recorte 2:1 vem de diagramacao/fonte/fotos.py; o ponto de cada corte, do próprio <img> (--mg-foco, --mg-foco-m). O
   fundo é o fio do tema enquanto a foto carrega (sem sombra, sem canto) */
.mg-foto { margin: clamp(56px, 6.4vw, 96px) 0; background: var(--mg-fio); }
.mg-largura > .mg-foto:first-child { margin-top: 0; }
.mg-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; object-position: var(--mg-foco, 50% 50%); }
@media (max-width: 899px) {
  .mg-foto { margin-left: calc(-1 * var(--mg-pad)); margin-right: calc(-1 * var(--mg-pad)); }
  .mg-foto img { aspect-ratio: 2 / 1; }
}
@media (max-width: 599px) { .mg-foto img { aspect-ratio: 3 / 2; object-position: var(--mg-foco-m, 50% 50%); } }
@media print { .mg-foto { break-inside: avoid; } }
/* o trio (ciclo 2): três fotos do mesmo slide do deck, na ordem dele. De 900 px para cima, quadradas, na largura do texto,
   com o vão da lista de usos (.mg-indice); abaixo, de borda a borda como as faixas, em 3:4, com vão de 4 px. O recorte 3:4
   vem de fotos.py; o ponto do corte quadrado, do próprio <img> (--mg-foco). Sem raio, sem sombra, sem filtro (R096) */
.mg-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); margin: clamp(56px, 6.4vw, 96px) 0; }
.mg-trio img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--mg-foco, 50% 50%); background: var(--mg-fio); }
@media (max-width: 899px) {
  .mg-trio { gap: 4px; margin-left: calc(-1 * var(--mg-pad)); margin-right: calc(-1 * var(--mg-pad)); }
  .mg-trio img { aspect-ratio: 3 / 4; }
}
@media print { .mg-trio { break-inside: avoid; } }
.mg-lista-fios li { padding: 14px 0; border-top: 1px solid var(--mg-fio); font-size: 17px; line-height: 1.5; text-wrap: balance; }
.mg-lista-fios li:first-child { border-top: 0; padding-top: 0; }
.mg-lista-fios a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- o número de resultado (Agents): na letra de display (R067), a procedência na frase pequena (R113) ---------- */
.mg-numero { display: grid; gap: 12px; align-content: start; }
.mg-numero__titulo { font-weight: 700; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; max-width: 18em; text-wrap: balance; }
.mg-numero__valor { font-family: "TASA Orbiter", system-ui, sans-serif; font-weight: 700; font-size: clamp(52px, 5.6vw, 84px);
  line-height: 1; letter-spacing: -.02em; display: flex; align-items: baseline; gap: .16em; flex-wrap: wrap; margin-top: 6px; }
.mg-numero__seta { color: var(--mg-c-exp); font-weight: 500; }
.mg-numero__legenda { display: grid; gap: 12px; }
.mg-numero__frase { font-size: 18px; line-height: 1.45; max-width: 22em; }
.mg-numero__fonte { color: var(--mg-sec); }
.mg-numero__fonte a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* o FAROL numa faixa: o título à esquerda, o texto à direita (a mesma gramática do índice) */
.mg-faixa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start;
  padding-top: 22px; border-top: 1px solid var(--mg-fio-forte); }
.mg-faixa__cabeca { display: grid; gap: 16px; align-content: start; }
.mg-faixa p { max-width: 36em; }

/* ---------- Quem somos (home) e Perguntas frequentes (/simulate): a mesma grade, 5 e 7 ---------- */
.mg-grade-5-7 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
/* o título e a frase de quem somos (P0177) na coluna da esquerda */
.mg-quem__cabeca { display: grid; gap: 20px; align-content: start; }
.mg-pessoas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
/* sem o fio de cima de cada pessoa (pedido 26, P0187). O nome assenta no alto da coluna, com o topo das maiúsculas na
   altura do topo das maiúsculas do título ao lado: o título cresce mais que o nome com a tela, e o desvio, medido por
   pixel a 1024, 1100, 1280, 1440 e 1920, vai de 0 a 2,5 px; o padding o compensa (0 abaixo de 1000, quando a grade
   ainda está lado a lado com o título no mínimo, e nas telas em que as colunas empilham) */
.mg-pessoa { display: grid; gap: 8px; align-content: start; padding-top: clamp(0px, calc(.5vw - 5px), 2.5px); }
.mg-pessoa .mg-rotulo { color: var(--mg-sec); }
.mg-pessoa h3 { font-weight: 700; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; }
.mg-pessoa p:last-child { font-size: 17px; line-height: 1.55; }
.mg-parceiros { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: clamp(28px, 3vw, 40px);
  padding-top: 16px; border-top: 1px solid var(--mg-fio); }
.mg-parceiros .mg-rotulo { color: var(--mg-sec); }
.mg-parceiros ul { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.mg-parceiros li { font-weight: 600; font-size: 17px; }
.mg-faq { display: grid; }
.mg-faq__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(32px, 5vw, 80px);
  padding: 20px 0 22px; border-top: 1px solid var(--mg-fio-forte); }
.mg-faq__item:last-child { border-bottom: 1px solid var(--mg-fio-forte); }
.mg-faq__item h3 { font-weight: 700; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.35; }
.mg-faq__item p { font-size: 17px; line-height: 1.55; max-width: 38em; }
.mg-faq-cab { margin-bottom: clamp(28px, 3vw, 40px); }
.mg-faq-fim { margin-top: 32px; }
.mg-faq-fim > .mg-acoes { grid-column: 2; }

/* ---------- 06 Contato: o texto e o quadro do formulário em Noite. O Tally (X5lx7V) tem o tema escuro da MAGNYN, com
   texto Paper e o fundo transparente no embed: sobre Papel as perguntas sumiam. O quadro se lê pelo fio, fica dentro
   da grade em qualquer largura (a borda direita no fim da régua e do conteúdo; pedido 20, P0182) e o caminho de pontos
   termina na borda esquerda dele ---------- */
.mg-contato { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.mg-contato__texto { display: grid; gap: 22px; align-content: start; }
.mg-contato__email { font-size: 18px; }
.mg-contato__email a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* o motivo do contato sangra até a borda esquerda e termina na borda do quadro do formulário */
.mg-contato__demo { margin-top: 8px; margin-left: calc(-1 * var(--mg-pad) - max(0px, (100cqw - var(--mg-max)) / 2));
  margin-right: calc(-1 * clamp(40px, 5vw, 80px)); }
.mg-contato__demo svg { display: block; width: 100%; height: auto; }
.mg-contato__painel { padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 48px) clamp(28px, 3vw, 40px);
  display: grid; gap: 20px; align-content: start; border: 1px solid var(--mg-fio); }
.mg-formulario { min-height: 120px; }
.mg-formulario iframe { display: block; width: 100%; border: 0; }
/* na impressão e no PDF do site (pedido 23), no lugar do quadro do Tally, que não vai ao papel, a linha do contato com os
   dois links; na tela ela não existe. O PDF do site é feito na tela: o site.js põe .mg-imprimindo no <html> no
   "beforeprint" */
.mg-formulario__impresso { display: none; font-size: 18px; line-height: 1.5; }
.mg-formulario__impresso a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mg-imprimindo .mg-formulario { display: none; }
.mg-imprimindo .mg-formulario__impresso { display: block; }
@media print { .mg-formulario { display: none; } .mg-formulario__impresso { display: block; } }
.mg-privacidade-aviso { font-size: 15px; line-height: 1.5; max-width: 40em; }
.mg-privacidade-aviso a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- rodapé ---------- */
.mg-rodape-bloco--fio { border-top: 1px solid var(--mg-fio-forte); }
.mg-capitulo.mg-rodape-bloco { padding-top: clamp(48px, 5vw, 72px); padding-bottom: 40px; }
.mg-rodape__assinatura { font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.005em;
  margin-bottom: clamp(28px, 3vw, 44px); text-wrap: balance; }
.mg-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 15px; }
.mg-rodape .mg-marca { font-size: 17px; }
.mg-rodape .mg-regua { min-width: 40px; }
.mg-rodape__dados, .mg-rodape__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.mg-rodape__dados { color: var(--mg-sec); }
.mg-rodape__links a { display: inline-block; padding: 6px 0; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- página interna: a política (texto longo, títulos à esquerda) ---------- */
.mg-politica__topo { padding-bottom: clamp(48px, 5vw, 72px); }
.mg-politica__topo .mg-titulo-pagina { margin-bottom: 18px; }
.mg-politica__data { color: var(--mg-sec); }
.mg-politica section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px clamp(32px, 5vw, 80px);
  padding: 26px 0 30px; border-top: 1px solid var(--mg-fio-forte); }
.mg-politica section:last-child { border-bottom: 1px solid var(--mg-fio-forte); }
.mg-politica h2 { font-weight: 700; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; }
.mg-politica__corpo { display: grid; gap: 14px; max-width: 560px; }
.mg-politica__corpo p, .mg-politica__corpo li { font-size: 17px; line-height: 1.6; }
.mg-politica__corpo ul { display: grid; gap: 6px; }
.mg-politica__corpo li { position: relative; padding-left: 20px; }
.mg-politica__corpo li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 1px; background: currentColor; }
.mg-politica__corpo a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mg-politica__intro { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.55; max-width: 36em; margin-bottom: clamp(32px, 4vw, 48px); }

/* =========================================================
   1024 a 900: a mesma composição, mais justa
   ========================================================= */
@media (max-width: 1199px) {
  .mg-sequencia--4 .mg-passos li { padding-right: 20px; }
  .mg-sequencia--4 .mg-passos li + li { padding-left: 20px; }
  .mg-rende { grid-template-columns: 1fr; }
}

/* =========================================================
   390 e telas estreitas: a capa vira fluxo; tudo numa coluna; cada passo leva o seu trecho do caminho
   ========================================================= */
@media (max-width: 899px) {
  body { font-size: 17px; }
  /* a capa (hero) em fluxo: base do diretor de arte, que heroi.css ajusta */
  .mg-capa__palco { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: grid; grid-template-rows: auto auto auto 1fr auto; padding: 14px 20px 44px; }
  .mg-capa__multidao { position: relative; inset: auto; order: 2; margin: 0 -20px; height: auto; aspect-ratio: auto; }
  .mg-crowd__svg--d { display: none; }
  .mg-crowd__svg--m { display: block; height: auto; aspect-ratio: 390 / 232; }

  /* o cabeçalho: logotipo e "Menu" numa linha; o painel abre por cima da capa */
  .mg-cabecalho { position: relative; left: auto; right: auto; top: auto; order: 0; display: grid;
    grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 14px; }
  .mg-cabecalho .mg-marca { font-size: 17px; grid-column: 1; grid-row: 1; }
  .mg-menu-botao { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px;
    padding: 0 14px; margin-right: -6px; border: 1.5px solid currentColor; border-radius: 2px; background: transparent; color: inherit;
    font: 500 13px/1 "Kode Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .mg-menu-botao[hidden] { display: none; }
  .mg-menu-botao__tracos { display: grid; gap: 4px; width: 16px; }
  .mg-menu-botao__tracos::before, .mg-menu-botao__tracos::after { content: ""; display: block; height: 1.5px; background: currentColor; }
  .mg-menu-botao[aria-expanded="true"] { background: var(--mg-c-paper); color: var(--mg-c-ink); border-color: var(--mg-c-paper); }
  .mg-menu-botao:focus-visible { outline: 2px solid var(--mg-c-paper); outline-offset: 3px; }
  /* sem script: os links ficam à vista, numa linha que quebra */
  .mg-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: 0 18px; margin-left: 0; }
  .mg-nav a:not(.mg-botao) { font-size: 14.5px; padding: 11px 0; }
  /* com script: o painel */
  .mg-js .mg-nav { display: none; }
  .mg-js .mg-cabecalho.mg-menu-aberto .mg-nav { display: grid; position: absolute; left: -20px; right: -20px; top: calc(100% + 10px);
    z-index: 6; padding: 4px 20px 22px; background: var(--mg-c-ink); color: var(--mg-c-paper); border-bottom: 1px solid var(--mg-fio-forte); gap: 0; }
  .mg-js .mg-menu-aberto .mg-nav a { display: flex; align-items: center; min-height: 52px; padding: 10px 0;
    border: 0; border-top: 1px solid var(--mg-fio); border-radius: 0; background: transparent; color: var(--mg-c-paper);
    font-weight: 600; font-size: 21px; line-height: 1.2; text-decoration: none; }
  .mg-js .mg-menu-aberto .mg-nav a:first-child { border-top: 0; }
  .mg-js .mg-menu-aberto .mg-nav a:focus-visible { outline-offset: -2px; }
  .mg-js .mg-menu-teclado .mg-nav a:focus { outline: 2px solid var(--mg-c-paper); outline-offset: -2px; }
  .mg-topo-pagina { padding: 14px 20px 0; }

  .mg-cab { gap: 10px 14px; flex-wrap: wrap; }
  .mg-cab .mg-farol { height: 15px; }
  .mg-conteudo, .mg-conteudo--7-5, .mg-contato, .mg-rende, .mg-dupla, .mg-faixa, .mg-grade-5-7, .mg-faq__item,
  .mg-politica section { grid-template-columns: 1fr; }
  .mg-conteudo--divisa > :last-child, .mg-dupla > :last-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--mg-fio); padding-top: 28px; }
  .mg-tensoes, .mg-pilares, .mg-passos, .mg-sequencia--4 .mg-passos, .mg-indice, .mg-pessoas { grid-template-columns: 1fr; }
  .mg-tensoes li, .mg-tensoes li + li { padding: 18px 0 20px; }
  .mg-tensoes li + li::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .mg-pilares li, .mg-pilares li + li { padding: 20px 0 22px; }
  .mg-pilares li + li::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  /* o primeiro item no alto da lista: o vão até o título é a margem dela (48 px); os outros, abaixo do seu fio */
  .mg-tensoes li:first-child, .mg-pilares li:first-child { padding-top: 0; }
  .mg-indice li { padding: 12px 0 13px; font-size: 17px; }
  /* as sequências: sem a trilha larga; cada passo abre com o seu trecho (1, 2, 3, 5 pistas) */
  .mg-trilha { display: none; }
  .mg-trilha__peca { display: block; margin: 0 0 14px; }
  .mg-trilha__peca svg { display: block; width: 100%; height: auto; }
  .mg-passos li, .mg-passos li + li, .mg-sequencia--4 .mg-passos li, .mg-sequencia--4 .mg-passos li + li { padding: 26px 0 8px; }
  .mg-passos li + li::before { display: none; }
  .mg-numero { margin-top: 4px; }
  .mg-oferta--faixa { grid-template-columns: 1fr; }
  .mg-escala { margin-top: 8px; --mg-esc-h: clamp(220px, calc((100vw - 20px) * .46875), 300px); }
  .mg-fecho { max-width: 30em; }
  .mg-faq-fim > .mg-acoes { grid-column: auto; }
  .mg-pessoa + .mg-pessoa { margin-top: 28px; }
  .mg-grade-5-7 > h2 + *, .mg-grade-5-7 > .mg-quem__cabeca + * { margin-top: 28px; }
  .mg-parceiros { grid-column: auto; }
  .mg-faq__item { padding: 18px 0 20px; }
  .mg-contato__demo { margin-left: -20px; margin-right: -20px; margin-top: 4px; }
  .mg-contato__painel { padding: 24px 16px; }
  .mg-rodape .mg-regua { display: none; }
  .mg-rodape__dados, .mg-rodape__links { flex-basis: 100%; gap: 2px 20px; }
}
/* 600 a 899 (o 768): o herói com o desenho do tablet; os motivos e a medida de leitura sem esticar */
@media (min-width: 600px) and (max-width: 899px) {
  .mg-capa .mg-crowd__svg--m { display: none; }
  .mg-capa .mg-crowd__svg--t { display: block; height: auto; aspect-ratio: 768 / 460; }
  .mg-capa__palco { grid-template-rows: auto auto auto auto auto 1fr; }
  .mg-conteudo__demo.mg-crowd { width: 72%; margin-left: auto; }
  .mg-contato__demo { width: 72%; }
  .mg-pilares p, .mg-passos p, .mg-lista-fios li, .mg-conteudo__texto > p { max-width: 36em; }
  .mg-trilha__peca { max-width: 520px; }
  .mg-pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  /* as três tensões lado a lado também no 768, com os fios entre elas */
  .mg-tensoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* as três no mesmo alto (o li + li do bloco de cima levava 18 px e o primeiro não) */
  .mg-tensoes li, .mg-tensoes li:first-child, .mg-tensoes li + li { padding: 0 20px 0 0; }
  .mg-tensoes li + li { padding-left: 20px; }
  .mg-tensoes li + li::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .mg-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .mg-pessoa + .mg-pessoa { margin-top: 0; }
  .mg-cab .mg-farol { height: 16px; }
}
@media (resolution < 1.5dppx) {
  .mg-regua--fina { height: 1.5px; }
}