/* MAGNYN · site da v10 (E51, 29/10/2026): o que as páginas novas e as que mudam acrescentam ao estilo.css, sem mudar a
   gramática dele (capítulos em cor cheia, estrutura por fios, rótulos curtos em Kode Mono e o resto na TASA Orbiter,
   R113; botões nunca vermelhos). Carregado depois do estilo.css em todas as páginas.
   Partes: trilha · perguntas que abrem e fecham · rodapé · procedência do Desafio · faixa de cases da home · linhas de
   cases da Simulate · página de cases (guia, filtro, grupos, card) · página de case (ficha, imagem na divisa, leitura) ·
   Quem somos. As imagens dos cases são recortadas aqui (aspect-ratio + object-fit), para a troca de tom ser só de
   arquivo, com qualquer proporção. Desde o ciclo 3 (P0309) as imagens dos cases não levam legenda: a página de case diz,
   na linha de procedência, que a imagem é uma ilustração. */

/* ---------- menu: Simulate marcada como atual nas páginas de case (aria-current="true", a seção atual) ---------- */
.mg-nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- trilha (Início › Simulate › Cases › case), pequena, no alto ---------- */
.mg-trilha-pagina { margin: 0 0 clamp(24px, 2.6vw, 36px); }
.mg-trilha-pagina ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-size: 15px; line-height: 1.5; color: var(--mg-sec); }
.mg-trilha-pagina li { display: inline-flex; align-items: baseline; gap: 10px; }
.mg-trilha-pagina li + li::before { content: "›"; color: var(--mg-sec); }
.mg-trilha-pagina a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  display: inline-block; padding: 4px 0; }
.mg-trilha-pagina a:hover { color: currentColor; text-decoration-thickness: 2px; }
.mg-tema-ink .mg-trilha-pagina a { color: var(--mg-c-paper); }
.mg-trilha-pagina [aria-current="page"] { color: var(--mg-c-paper); }

/* ---------- perguntas frequentes que abrem e fecham (<details>, a pergunta em <h3> no <summary>), na coluna de 7 da
   grade 5 e 7, com o título na de 5. Todas as respostas estão no HTML; a primeira vem aberta ---------- */
.mg-perguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.mg-perguntas > .mg-titulo-secao { position: sticky; top: 32px; }
.mg-perguntas__lista { border-bottom: 1px solid var(--mg-fio-forte); }
.mg-pergunta { border-top: 1px solid var(--mg-fio-forte); }
.mg-pergunta summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 0; cursor: pointer; }
.mg-pergunta summary::-webkit-details-marker { display: none; }
.mg-pergunta summary::marker { content: ""; }
.mg-pergunta summary h3 { font-weight: 700; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.35; }
.mg-pergunta summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: .45em;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; }
.mg-pergunta[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat; }
.mg-pergunta summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-pergunta summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mg-pergunta__resposta { padding: 0 38px 24px 0; }
.mg-pergunta__resposta p { font-size: 17px; line-height: 1.6; max-width: 38em; }
.mg-pergunta__resposta a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mg-perguntas__fim { grid-column: 2; margin-top: 32px; }

/* ---------- rodapé: as páginas, o endereço e a data da última mudança de texto ---------- */
.mg-rodape__mais { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 28px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mg-fio); font-size: 15px; }
.mg-rodape__paginas { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.mg-rodape__paginas a { display: inline-block; padding: 6px 0; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mg-rodape__endereco, .mg-rodape__data { color: var(--mg-sec); }
.mg-rodape__endereco { flex: 1 1 22em; }

/* ---------- Desafio (home): a procedência dos três estudos, na frase pequena, abaixo do fecho ---------- */
.mg-procedencia-desafio { margin-top: clamp(28px, 3vw, 40px); display: grid; gap: 10px; }
.mg-procedencia-desafio p { font-size: 15px; }
.mg-procedencia-desafio ul { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--mg-fio); }
.mg-procedencia-desafio li { font-size: 15px; }
.mg-procedencia-desafio a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- imagem de case: recortada aqui, com o fundo do fio enquanto carrega; ponto do corte em --mg-foco ---------- */
.mg-case-img { display: block; width: 100%; height: auto; object-fit: cover; object-position: var(--mg-foco, 50% 50%);
  background: var(--mg-fio); }

/* ---------- grau de certeza e escala (frase pequena) ---------- */
.mg-grau { font-size: 15px; line-height: 1.5; }
.mg-grau strong { font-weight: 600; }
.mg-escala-case { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 15px; line-height: 1.5; color: var(--mg-sec); }
.mg-numero-case { font-weight: 700; font-size: clamp(44px, 4vw, 60px); line-height: 1; letter-spacing: -.02em; }
.mg-numero-case--frase { font-size: clamp(30px, 2.6vw, 38px); }

/* ---------- home, dobra da Simulate: a faixa de três cases (imagem pequena), depois dos passos ---------- */
.mg-faixa-cases { margin-top: clamp(56px, 6vw, 88px); padding-top: 26px; border-top: 1px solid var(--mg-fio-forte); }
.mg-faixa-cases__rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mg-faixa-cases__rotulo .mg-rotulo-corrido { color: var(--mg-sec); }
.mg-faixa-cases__titulo { margin-top: 10px; }
.mg-casos-curtos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px);
  margin-top: clamp(28px, 3vw, 40px); }
.mg-caso-curto { position: relative; display: grid; gap: 10px; align-content: start; }
.mg-caso-curto + .mg-caso-curto::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(-.5 * clamp(24px, 3vw, 44px)); width: 1px; background: var(--mg-fio); }
.mg-caso-curto .mg-case-img { aspect-ratio: 5 / 2; }
@media (min-width: 900px) {
  .mg-casos-curtos { grid-template-rows: repeat(6, auto); row-gap: 10px; }
  .mg-caso-curto { grid-row: span 6; grid-template-rows: subgrid; }
}
.mg-caso-curto__cab { display: grid; gap: 6px; }
.mg-caso-curto__titulo { font-weight: 700; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.32; }
.mg-caso-curto__titulo a { text-decoration: none; }
.mg-caso-curto__titulo a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-caso-curto .mg-numero-case { margin-top: 6px; }
.mg-caso-curto__frase { font-size: 16px; line-height: 1.5; }
.mg-caso-curto .mg-grau { color: var(--mg-sec); }
.mg-tema-ink .mg-caso-curto .mg-grau strong { color: var(--mg-c-paper); }
.mg-tema-paper .mg-caso-curto .mg-grau strong { color: var(--mg-c-ink); }
.mg-ler { display: inline-block; justify-self: start; padding: 6px 0; font-weight: 600; font-size: 16px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-ler:hover { text-decoration-thickness: 2px; }
.mg-faixa-cases__fim { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px;
  margin-top: clamp(28px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--mg-fio); }
.mg-faixa-cases__fim .mg-rotulo-corrido { color: var(--mg-sec); }
.mg-link-texto { display: inline-flex; align-items: baseline; gap: .4em; padding: 6px 0; font-weight: 600; font-size: 16.5px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-link-texto:hover { text-decoration-thickness: 2px; }
.mg-link-texto .mg-seta { text-decoration: none; }

/* ---------- /simulate: os órgãos públicos e o bloco de cases com os cinco cards ---------- */
.mg-orgaos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); margin-top: 28px; }
.mg-orgaos > div { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
  padding-top: 16px; border-top: 1px solid var(--mg-fio); }
.mg-orgaos p { font-size: 17px; line-height: 1.55; max-width: 40em; }
/* E51 c3 (P0308): os cinco cases com o card da faixa da home. A partir de 900, grade de três colunas em que o
   cabeçalho do bloco ocupa a primeira casa e os cinco cards as outras cinco (duas linhas de três, sem casa vazia); a
   lista é subgrade da seção e cada card, subgrade da lista, para tipo, título, número, frase, grau e link alinharem
   nas três colunas. Abaixo de 900, o card da home a 390: imagem pequena ao lado do tipo e do título. */
.mg-cases-sim { --mg-cs-gap: clamp(24px, 3vw, 44px); margin-top: clamp(56px, 6.4vw, 96px); padding-top: 26px;
  border-top: 1px solid var(--mg-fio-forte); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.mg-cases-sim__cab { display: grid; gap: 14px; align-content: start; container-type: inline-size; }
/* E54 (crítico da E53): o título em duas linhas; em três, uma palavra fica sozinha ("passaram", de 900 a 1100, de 1200
   a 1280 e a 320). "Decisões que passaram" mede 10,9 em: a letra fica em no máximo 9% da largura do bloco */
.mg-cases-sim__cab .mg-subtitulo--grande { font-size: min(clamp(28px, 2.6vw, 38px), 9cqi); }
.mg-cases-sim__cab .mg-rotulo { color: var(--mg-sec); }
.mg-cases-sim__cab p:not(.mg-rotulo) { font-size: 17px; line-height: 1.55; max-width: 26em; }
.mg-casos-curtos--sim { margin-top: 0; }
.mg-ver-cases { margin-top: 4px; }
.mg-cases-sim__acoes { margin-top: 8px; }
@media (min-width: 900px) {
  .mg-cases-sim { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(12, auto) auto;
    column-gap: var(--mg-cs-gap); row-gap: 10px; }
  .mg-cases-sim__cab { grid-column: 1; grid-row: 1 / span 6; }
  .mg-cases-sim .mg-casos-curtos--sim { grid-column: 1 / -1; grid-row: 1 / span 12; display: grid; grid-template-columns: subgrid;
    grid-template-rows: subgrid; column-gap: var(--mg-cs-gap); row-gap: 10px; pointer-events: none; }
  .mg-casos-curtos--sim .mg-caso-curto { pointer-events: auto; }
  /* posição explícita: o posicionamento automático poria o 3º card na 2ª linha da grade, ao lado do 1º */
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(1) { grid-column: 2; grid-row: 1 / span 6; }
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(2) { grid-column: 3; grid-row: 1 / span 6; }
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(3) { grid-column: 1; grid-row: 7 / span 6; }
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(4) { grid-column: 2; grid-row: 7 / span 6; }
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(5) { grid-column: 3; grid-row: 7 / span 6; }
  .mg-casos-curtos--sim .mg-case-img { aspect-ratio: 3 / 2; }
  /* o fio entre colunas: à esquerda dos cards da 2ª e da 3ª coluna (o 1º card fica na 2ª coluna, ao lado do cabeçalho) */
  .mg-casos-curtos--sim .mg-caso-curto:first-child::before { content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(-.5 * var(--mg-cs-gap)); width: 1px; background: var(--mg-fio); }
  .mg-casos-curtos--sim .mg-caso-curto + .mg-caso-curto::before { left: calc(-.5 * var(--mg-cs-gap)); }
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(3)::before { display: none; }
  /* a segunda linha de cards: respiro e um fio corrido, desenhado pelo card da 1ª coluna, na largura das três */
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(n+3) { margin-top: clamp(36px, 3.6vw, 52px); padding-top: clamp(28px, 2.6vw, 36px); }
  .mg-casos-curtos--sim .mg-caso-curto:nth-child(3)::after { content: ""; position: absolute; top: 0; left: 0;
    width: calc(300% + 2 * var(--mg-cs-gap)); height: 1px; background: var(--mg-fio); }
  .mg-cases-sim .mg-cases-sim__acoes { grid-column: 1 / -1; grid-row: 13; margin-top: clamp(28px, 3vw, 40px); }
}
@media (min-width: 900px) and (max-width: 1199px) { .mg-cases-sim { --mg-cs-gap: 28px; } }
.mg-faq-agents { margin-top: clamp(64px, 7vw, 104px); padding-top: 26px; border-top: 1px solid var(--mg-fio-forte); }
.mg-quem__link { grid-column: 2; margin-top: 18px; }

/* ---------- /simulate/cases: a abertura com o guia (âncoras e Como ler) e o filtro ---------- */
.mg-cases-guia { display: grid; gap: 28px; align-content: start; }
.mg-cases-guia__parte { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--mg-fio); }
.mg-cases-guia__nome { color: var(--mg-sec); }
.mg-atalhos { display: grid; gap: 2px; }
.mg-atalhos a { display: inline-block; padding: 5px 0; font-weight: 600; font-size: 17px; line-height: 1.35;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-atalhos a:hover { text-decoration-thickness: 2px; }
.mg-como-ler { display: grid; gap: 6px; font-size: 15px; line-height: 1.5; }
.mg-como-ler div { display: block; }
.mg-como-ler dt { display: inline; font-weight: 600; }
.mg-como-ler dd { display: inline; margin: 0; color: var(--mg-sec); }
.mg-filtro { margin-top: clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding-top: 18px; border-top: 1px solid var(--mg-fio); }
.mg-filtro[hidden] { display: none; }
.mg-filtro__nome { font-family: "Kode Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mg-sec); }
.mg-filtro__opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-filtro__opcoes button, .mg-filtro__abrir { font: inherit; font-weight: 600; font-size: 15px; line-height: 1; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--mg-fio-forte); border-radius: 2px; background: transparent; color: inherit; cursor: pointer; }
.mg-filtro__opcoes button:hover { border-color: currentColor; }
.mg-filtro__opcoes button[aria-pressed="true"] { background: var(--mg-c-paper); color: var(--mg-c-ink); border-color: var(--mg-c-paper); }
.mg-filtro__opcoes button:focus-visible, .mg-filtro__abrir:focus-visible { outline: 2px solid var(--mg-c-paper); outline-offset: 3px; }
.mg-filtro__abrir { display: none; }
.mg-tema-paper .mg-filtro__opcoes button[aria-pressed="true"] { background: var(--mg-c-ink); color: var(--mg-c-paper); border-color: var(--mg-c-ink); }
.mg-tema-paper .mg-filtro__opcoes button:focus-visible, .mg-tema-paper .mg-filtro__abrir:focus-visible { outline-color: var(--mg-c-ink); }

/* E51 c2 · a primeira tela de /simulate/cases a 1440 × 900 chega ao primeiro grupo: respiro menor na abertura,
   atalhos em linha corrida e o filtro no alto do Papel, como cabeçalho da lista (a ordem da v10 fica: abertura,
   atalhos, Como ler, filtro, cards). c3: o rótulo volta à esquerda, abaixo da trilha, como na Simulate e nos cases. */
.mg-cases-abre.mg-capitulo { padding-top: clamp(32px, 3.4vw, 48px); padding-bottom: clamp(40px, 3.4vw, 48px); }
.mg-cases-topo { margin-bottom: clamp(24px, 2.6vw, 36px); }
.mg-cases-topo .mg-trilha-pagina { margin: 0 0 clamp(14px, 1.6vw, 22px); }
.mg-cases-topo .mg-cab { margin: 0; }
.mg-cases-lista.mg-capitulo { padding-top: clamp(36px, 3.6vw, 52px); }
.mg-cases-lista .mg-filtro { margin: 0 0 clamp(28px, 2.8vw, 40px); padding: 0 0 18px; border-top: 0; border-bottom: 1px solid var(--mg-fio); }
@media (min-width: 900px) {
  .mg-cases-abre .mg-atalhos { display: flex; flex-wrap: wrap; gap: 0 26px; }
  .mg-cases-abre .mg-atalhos li { white-space: nowrap; }
}

/* os grupos por tipo de decisão e o card em linha: imagem, texto e resultado; o pé com a atribuição e o link */
.mg-grupo + .mg-grupo { margin-top: clamp(64px, 7vw, 104px); }
.mg-grupo[hidden] { display: none; }
.mg-grupo__titulo { padding-bottom: 18px; }
.mg-case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4.6fr) minmax(0, 3.4fr);
  grid-template-areas: "img texto res" "img pe pe"; gap: 0 clamp(28px, 3vw, 44px); padding: 28px 0 26px;
  border-top: 1px solid var(--mg-fio-forte); }
.mg-case[hidden] { display: none; }
.mg-grupo .mg-case:last-child { border-bottom: 1px solid var(--mg-fio-forte); }
.mg-case__figura { grid-area: img; margin: 0; align-self: start; }
.mg-case__figura .mg-case-img { aspect-ratio: 3 / 2; }
.mg-case__texto { grid-area: texto; display: grid; gap: 10px; align-content: start; }
.mg-case__rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
/* o setor, complemento do tipo: na TASA Orbiter, em caixa mista (R113) */
.mg-case__rotulo span:last-child { font-family: "TASA Orbiter", system-ui, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.3;
  letter-spacing: normal; text-transform: none; color: var(--mg-sec); }
.mg-case__titulo { font-weight: 700; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.32; text-wrap: balance; }
.mg-case__titulo a { text-decoration: none; }
.mg-case__titulo a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.mg-case__resumo { font-size: 17px; line-height: 1.55; }
.mg-case__res { grid-area: res; display: grid; gap: 10px; align-content: start; padding-left: clamp(20px, 2vw, 28px);
  border-left: 1px solid var(--mg-fio); }
.mg-case__frase { font-size: 16.5px; line-height: 1.5; }
.mg-case__res .mg-grau { color: var(--mg-sec); }
.mg-case__res .mg-grau strong { color: var(--mg-c-ink); }
.mg-case__pe { grid-area: pe; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--mg-fio); }
.mg-atribuicao { font-size: 15px; line-height: 1.5; color: var(--mg-sec); }
.mg-sobre-cases { margin-top: clamp(64px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 10px clamp(32px, 5vw, 80px); padding-top: 18px; border-top: 1px solid var(--mg-fio-forte); }
.mg-sobre-cases h2 { color: var(--mg-sec); }
.mg-sobre-cases p { font-size: 15px; line-height: 1.5; }
.mg-fecho-cases { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.mg-fecho-cases > div:first-child { display: grid; gap: 16px; }
.mg-fecho-cases .mg-acoes { justify-content: flex-start; }

/* ---------- página de case: a ficha, a imagem na divisa do Noite com o Papel, a leitura em duas colunas ---------- */
.mg-case-abre { padding-bottom: 0; }
.mg-ficha { display: grid; align-content: start; border-top: 1px solid var(--mg-fio-forte); }
.mg-ficha div { display: grid; gap: 4px; padding: 12px 0 14px; border-bottom: 1px solid var(--mg-fio); }
.mg-ficha dt { 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); }
.mg-ficha dd { margin: 0; font-size: 17px; line-height: 1.5; }
.mg-procedencia { color: var(--mg-sec); }
/* a imagem atravessa a divisa: um quarto da altura dela desce sobre o Papel. --mg-desce é lido dentro da .mg-largura
   (100cqw = a largura útil do capítulo): em 2:1, um quarto da altura é a largura / 8. O Noite fica por cima do Papel
   para a imagem passar sobre a divisa. */
.mg-case-palco { --mg-img-l: min(var(--mg-max), 100cqw); --mg-desce: calc(var(--mg-img-l) / 8); }
.mg-case-abre { position: relative; z-index: 1; }
.mg-case-corpo { position: relative; z-index: 0; padding-top: 0; }
.mg-case-figura { position: relative; margin: clamp(48px, 5vw, 72px) 0 calc(-1 * var(--mg-desce)); }
.mg-case-figura .mg-case-img { aspect-ratio: 2 / 1; }
.mg-case-corpo > .mg-largura { padding-top: calc(var(--mg-desce) + clamp(72px, 6.4vw, 96px)); }
.mg-leitura { display: grid; }
.mg-leitura__parte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 80px);
  padding: 28px 0 34px; border-top: 1px solid var(--mg-fio-forte); }
.mg-leitura__parte:last-child { border-bottom: 1px solid var(--mg-fio-forte); }
.mg-leitura__parte h2 { font-weight: 700; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.3; }
.mg-leitura__corpo { display: grid; gap: 16px; align-content: start; max-width: 680px; }
.mg-leitura__corpo p, .mg-leitura__corpo li { font-size: 17.5px; line-height: 1.6; }
.mg-leitura__corpo ol { counter-reset: opc; display: grid; gap: 8px; }
.mg-leitura__corpo ol li { position: relative; padding-left: 34px; counter-increment: opc; }
.mg-leitura__corpo ol li::before { content: counter(opc); position: absolute; left: 0; top: 1px; font-weight: 600; font-size: 15px;
  line-height: 28px; font-variant-numeric: tabular-nums; color: var(--mg-sec); }
.mg-leitura__corpo ul.mg-variantes { display: grid; gap: 6px; }
.mg-leitura__corpo ul.mg-variantes li { position: relative; padding-left: 34px; }
.mg-leitura__corpo ul.mg-variantes li::before { content: ""; position: absolute; left: 4px; top: .8em; width: 12px; height: 1px; background: currentColor; }
.mg-achados { display: grid; }
.mg-achados li { display: grid; gap: 4px; padding: 12px 0 14px; border-top: 1px solid var(--mg-fio); }
.mg-achados li:first-child { border-top: 0; padding-top: 0; }
/* a linha da v10 é "Grau · texto"; com o grau em cima, o texto começa em maiúscula (só na tela; o HTML fica igual) */
.mg-achados li > span:last-child::first-letter { text-transform: uppercase; }
/* o ponto não se separa do grau ("Observado depois") numa quebra de linha (E54, crítico da E53 a 1024) */
.mg-medido, .mg-simulado { white-space: nowrap; }
.mg-medido::before, .mg-simulado::before, .mg-achados__grau--medido::before, .mg-achados__grau--simulado::before { content: ""; display: inline-block;
  width: .62em; height: .62em; border-radius: 50%; margin-right: .5em; vertical-align: .02em; }
.mg-medido::before, .mg-achados__grau--medido::before { background: var(--mg-c-exp); }
.mg-simulado::before, .mg-achados__grau--simulado::before { box-shadow: inset 0 0 0 1.5px currentColor; }
.mg-achados__grau { 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); }
.mg-limite { font-size: 15px; line-height: 1.5; color: var(--mg-sec); }
.mg-mostra { font-weight: 600; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.35; text-wrap: balance; }
.mg-leitura__corpo .mg-mostra { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.35; }
.mg-chamada-meio { margin-top: 8px; }
.mg-nota-norma { font-size: 15px; line-height: 1.5; color: var(--mg-sec);
  padding-top: 14px; border-top: 1px solid var(--mg-fio); }
/* no corpo da leitura, o limite e a nota ficam na frase pequena, não nos 17,5 px do parágrafo (.mg-leitura__corpo p) */
.mg-leitura__corpo .mg-limite, .mg-leitura__corpo .mg-nota-norma { font-size: 15px; line-height: 1.5; }
.mg-fonte-case { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(32px, 5vw, 80px); }
.mg-fonte-case p { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--mg-sec); }
.mg-fonte-case a { color: var(--mg-c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.mg-fecho-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.mg-proximo { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--mg-fio); }
.mg-proximo .mg-rotulo { color: var(--mg-sec); }
.mg-proximo a { font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.32; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 6px; text-wrap: balance; }
.mg-proximo a:hover { text-decoration-thickness: 2px; }

/* ---------- Quem somos: as duas pessoas sem foto, na tipografia; os dados e as frentes em linhas ---------- */
.mg-fundadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px);
  margin-top: clamp(48px, 5.6vw, 80px); }
.mg-fundador { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 2px solid var(--mg-c-exp); }
.mg-fundador h2 { font-weight: 700; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.01em; }
.mg-fundador .mg-rotulo { color: var(--mg-sec); }
.mg-fundador p:not(.mg-rotulo) { font-size: 18px; line-height: 1.6; max-width: 32em; }
.mg-fundador a { justify-self: start; display: inline-block; padding: 6px 0; font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-blocos { display: grid; }
.mg-bloco-linha { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 80px);
  padding: 26px 0 30px; border-top: 1px solid var(--mg-fio-forte); }
.mg-bloco-linha:last-child { border-bottom: 1px solid var(--mg-fio-forte); }
.mg-bloco-linha h2 { font-weight: 700; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.3; }
.mg-dados { display: grid; }
.mg-dados div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 4px 24px; padding: 10px 0 12px;
  border-top: 1px solid var(--mg-fio); }
.mg-dados div:first-child { border-top: 0; padding-top: 0; }
.mg-dados dt { font-family: "Kode Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mg-sec); padding-top: 3px; }
.mg-dados dd { margin: 0; font-size: 17.5px; line-height: 1.5; }
.mg-dados a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mg-frentes-lista { display: grid; gap: 0; }
.mg-frentes-lista li { display: grid; gap: 2px; padding: 4px 0 14px; }
.mg-frentes-lista li + li { padding-top: 14px; border-top: 1px solid var(--mg-fio); }
.mg-frentes-lista .mg-frente { margin: 0; }
.mg-frentes-lista .mg-frente a { font-size: 19px; }
.mg-frentes-lista p:last-child { font-size: 17px; line-height: 1.5; }

/* ---------- 1199 a 900 ---------- */
@media (max-width: 1199px) {
  .mg-case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "img texto" "img res" "pe pe"; }
  .mg-case__res { padding-left: 0; border-left: 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mg-fio); }
  .mg-casos-curtos { gap: 0 28px; }
}

/* ---------- abaixo de 900: uma coluna; a pergunta, o grupo e a leitura empilham ---------- */
@media (max-width: 899px) {
  .mg-perguntas { grid-template-columns: minmax(0, 1fr); }
  .mg-perguntas > .mg-titulo-secao { position: static; margin-bottom: 20px; }
  .mg-perguntas__fim { grid-column: 1; }
  .mg-pergunta__resposta { padding-right: 0; }
  .mg-rodape__mais { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mg-rodape__endereco { flex: none; }
  .mg-casos-curtos { grid-template-columns: minmax(0, 1fr); }
  .mg-caso-curto { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 16px; padding: 22px 0;
    border-top: 1px solid var(--mg-fio); }
  .mg-caso-curto:first-child { border-top: 0; padding-top: 0; }
  .mg-caso-curto + .mg-caso-curto::before { display: none; }
  .mg-caso-curto__fig { grid-column: 1; grid-row: 1; align-self: start; }
  .mg-caso-curto .mg-case-img { aspect-ratio: 3 / 2; }
  .mg-caso-curto__cab { grid-column: 2; grid-row: 1; align-content: start; }
  .mg-caso-curto > :not(.mg-caso-curto__fig):not(.mg-caso-curto__cab) { grid-column: 1 / -1; }
  .mg-quem__link { grid-column: auto; }
  .mg-orgaos { grid-template-columns: minmax(0, 1fr); }
  .mg-orgaos > div { grid-column: 1; }
  .mg-case { grid-template-columns: minmax(0, 1fr); grid-template-areas: "img" "texto" "res" "pe"; padding: 22px 0 20px; }
  .mg-case__figura { margin-bottom: 18px; }
  .mg-case__figura .mg-case-img { aspect-ratio: 2 / 1; }
  .mg-sobre-cases, .mg-fecho-cases, .mg-fecho-case { grid-template-columns: minmax(0, 1fr); }
  .mg-filtro { gap: 12px; }
  .mg-js .mg-filtro__nome { display: none; }
  .mg-js .mg-filtro__abrir { display: inline-flex; align-items: center; gap: 10px; }
  .mg-filtro__abrir::after { content: ""; width: 12px; height: 12px;
    background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
                linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; }
  .mg-filtro__abrir[aria-expanded="true"]::after { background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat; }
  .mg-js .mg-filtro:not(.mg-filtro--aberto) .mg-filtro__opcoes { display: none; }
  .mg-filtro__opcoes { width: 100%; }
  .mg-case-figura { margin-left: calc(-1 * var(--mg-pad)); margin-right: calc(-1 * var(--mg-pad)); }
  .mg-case-palco { --mg-img-l: calc(100cqw + 2 * var(--mg-pad)); --mg-desce: calc(var(--mg-img-l) / 6); }
  .mg-case-figura .mg-case-img { aspect-ratio: 3 / 2; }
  .mg-leitura__parte, .mg-bloco-linha { grid-template-columns: minmax(0, 1fr); padding: 22px 0 26px; }
  .mg-fonte-case { grid-template-columns: minmax(0, 1fr); }
  .mg-fonte-case p { grid-column: 1; }
  .mg-fundadores { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mg-dados div { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- abaixo de 600: o card da página de cases fica como o da faixa da home, a imagem pequena ao lado do tipo e do
   título, e o resto em largura cheia, para a lista de cases não virar uma coluna de fotos ---------- */
@media (max-width: 599px) {
  .mg-case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas: none; column-gap: 16px; }
  .mg-case > .mg-case__texto { display: contents; }
  .mg-case > .mg-case__figura { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; align-self: start; }
  .mg-case > .mg-case__figura .mg-case-img { aspect-ratio: 1 / 1; }
  .mg-case__texto > .mg-case__rotulo { grid-column: 2; grid-row: 1; align-self: start; }
  .mg-case__texto > .mg-case__titulo { grid-column: 2; grid-row: 2; align-self: start; margin-top: 8px; font-size: 20px; }
  .mg-case__texto > .mg-case__resumo { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
  .mg-case > .mg-case__res { grid-column: 1 / -1; grid-row: 4; }
  .mg-case > .mg-case__pe { grid-column: 1 / -1; grid-row: 5; }
  /* E51 c3 (crítico c2): a abertura do case no corpo do case, 17,5 px; a trilha só até "Cases", numa linha (o nome
     curto do case continua no HTML e para o leitor de tela; o H1 logo abaixo diz o mesmo) */
  .mg-case-abre .mg-lead { font-size: 17.5px; line-height: 1.6; }
  .mg-case-abre .mg-trilha-pagina li:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media print {
  .mg-pergunta summary::after, .mg-filtro { display: none; }
  .mg-case, .mg-leitura__parte, .mg-caso-curto { break-inside: avoid; }
}

/* ---------- linha da frase pequena: 38 em, uns 75 caracteres da TASA Orbiter a 15 px ---------- */
.mg-fonte-case p, .mg-limite, .mg-nota-norma, .mg-sobre-cases p, .mg-procedencia, .mg-procedencia-desafio,
.mg-faixa-cases__fim .mg-rotulo-corrido { max-width: 38em; }