/* Municipa.AI — folha de estilo única.
 *
 * Não há build: o que está aqui é o que o navegador recebe. As cores
 * moram em variáveis porque trocar o azul da marca precisa ser perto de
 * uma linha, não uma caçada por 26 ocorrências: --azul-rgb e
 * --azul-tinta-rgb (as MESMAS cores de --azul e --azul-tinta, só que no
 * formato que rgba() pede — ver o comentário ao lado delas) cobrem as 17
 * que precisam de opacidade, e os ícones SVG inline usam
 * stroke="currentColor" — herdando de var(--azul) no CSS em vez de
 * repetir o hexadecimal — nas outras 9.
 *
 * Todo valor vem do export do design em design/. Onde algo diverge dele
 * de propósito, o comentário ao lado diz qual desvio é (D1, D4...) — a
 * lista com o motivo de cada um está no README.
 */

/* ---------------------------------------------------------------------
   Fonte
   --------------------------------------------------------------------- */

/* Uma regra só, não cinco: o arquivo é uma fonte variável, com o eixo de
   peso contínuo de 200 a 800 (tabela fvar). O navegador interpola os
   pesos a partir dele — 400 e 800 saem com larguras e densidades
   diferentes de verdade, não sintetizadas. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  /* swap: o texto aparece na fonte do sistema e troca quando a nossa
     chega. O contrário — texto invisível esperando a fonte — é pior. */
  font-display: swap;
}

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */

:root {
  --azul: #1f4fc4;
  /* Mesma cor, em três números separados por vírgula: é o formato que
     rgba() pede para compor opacidade sobre uma cor de variável (CSS não
     tem como derivar um do outro sem sintaxe de cor relativa, que ainda
     não é segura em todo navegador que este site atende). Trocar o azul
     é ATUALIZAR OS DOIS, aqui do lado um do outro — duas linhas, não a
     caçada por 26 ocorrências que era antes desta variável existir. */
  --azul-rgb: 31, 79, 196;
  --azul-tinta: #12275a;
  --azul-tinta-rgb: 18, 39, 90;  /* idem, para o único rgba() que usa este tom */
  --azul-hover: #163a92;
  --grad-de: #2a63d8;
  --grad-ate: #153a92;
  --texto: #3a4256;
  --fundo: #f5f7fc;
  --tinta: #111318;

  --branco: #fff;
  --borda-azul: rgba(var(--azul-rgb), 0.14);
  --sombra-card: 0 2px 0 rgba(var(--azul-rgb), 0.05),
                 0 16px 40px rgba(17, 19, 24, 0.05);
  --sombra-flutuante: 0 12px 30px rgba(var(--azul-rgb), 0.14);

  /* Superfícies derivadas do azul, nomeadas pelo papel e não pelo tom:
     quando a cor mudar, o nome continua verdadeiro. */
  --azul-nevoa: #e9eefb;                 /* fundo dos ícones dos cards */
  --realce-sobre-azul: #a9d4ff;          /* destaque de texto sobre o gradiente */
  --azul-guia: rgba(var(--azul-rgb), 0.35);  /* linhas de apoio: anel e linha do tempo */
  --grad-emblema: linear-gradient(160deg, var(--grad-de), var(--grad-ate));

  /* As marcas de apoio (Formação) são a versão PRETA oficial de cada
     manual, e o tom neutro único vem só desta opacidade: recolorir o
     arquivo seria modificar a marca, o que o manual da Fapemig proíbe.
     MEDIDO: 0,6 do preto #231f20 sobre o pior fundo da página dá 3,85:1
     (piso de 3:1 para objeto gráfico, WCAG 1.4.11); 0,5 REPROVA o piso —
     dá 2,94:1. O verificar.py mede o mesmo par com o mesmo alfa: quem
     muda um muda o outro. */
  --apoio-opacidade: 0.6;

  --largura: 1180px;
  --respiro: 32px;

  /* O design é claro e só. Declarar impede o navegador de inverter
     por conta própria. */
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* D9: o cabeçalho é grudento e mede 76px a 1440px (16px de padding em
     cima e embaixo, o botão "Acessar o Flow" de 43px e a borda de 1px).
     Sem isto, clicar numa âncora leva o topo da seção para debaixo dele.
     76 + 12 de folga. Quem mexer no padding do cabeçalho mexe aqui. */
  scroll-padding-top: 88px;
}

/* Quem pediu para não ter movimento não tem. O design liga o rolar suave
   globalmente e não desliga para ninguém. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  /* O design não tem fundo chapado: é um gradiente vertical em faixas
     suaves com três manchas azuis em elipse por cima. No design são duas
     <div> vazias; aqui as camadas vão no próprio body.
     A ORDEM IMPORTA e é contraintuitiva: em `background`, a PRIMEIRA
     camada listada fica POR CIMA. As radiais vêm antes do linear de
     propósito — invertê-las esconde as manchas. A cor chapada no fim só
     aparece se as camadas não cobrirem; o design tem a mesma no body. */
  background:
    radial-gradient(ellipse 55% 30% at 85% 6%, rgba(var(--azul-rgb), 0.14), transparent 70%),
    radial-gradient(ellipse 50% 22% at 10% 42%, rgba(var(--azul-rgb), 0.10), transparent 70%),
    radial-gradient(ellipse 50% 22% at 90% 70%, rgba(var(--azul-rgb), 0.10), transparent 70%),
    linear-gradient(180deg, #f7f9fd 0%, #eef3fb 30%, #f7f9fd 60%, #eef3fb 100%)
    var(--fundo);
  color: var(--tinta);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI',
               Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-hover); }

/* ---------------------------------------------------------------------
   Foco
   --------------------------------------------------------------------- */

/* O design não tem estado de foco nenhum. :focus-visible, não :focus:
   o anel aparece para quem navega de teclado e não para quem clica.
   O border-radius aqui é só para os links de texto (menu, rodapé,
   marca): esta regra vem ANTES dos componentes, e os que têm raio
   próprio (.botao, .menu__botao, .pular) o mantêm por ordem no fonte —
   o anel acompanha o raio do elemento nos navegadores atuais. */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
  /* Ao focar, o navegador rola até o elemento encostar na borda da
     janela — e o anel, que fica 6px para fora, sai dela. A margem faz a
     rolagem incluir o anel. */
  scroll-margin: 8px;
}

/* Sobre o gradiente do rodapé um anel azul some. Os botões azuis NÃO
   entram aqui: o anel fica 3px FORA da caixa, sobre o fundo claro da
   página ou do cabeçalho, onde o azul é o que se enxerga e o branco é o
   que sumiria. */
.rodape a:focus-visible { outline-color: var(--branco); }

/* O <main> tem tabindex="-1" para ser o alvo do atalho. Quando o atalho
   o foca, o anel contornaria a página inteira: o destino já é a própria
   rolagem para o conteúdo. */
main:focus-visible { outline: none; }

/* Some da tela, fica para o leitor de tela. É o que dá hierarquia aos
   <h2> do hero e da história sem mudar o desenho. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Pular para o conteúdo": primeiro elemento focável da página. Fica
   fora da tela e só aparece — por cima do cabeçalho — quando recebe
   foco pelo teclado. */
.pular {
  position: absolute;
  left: -9999px;
  background: var(--branco);
  color: var(--azul-tinta);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  z-index: 20;
}
.pular:focus { left: 0; top: 0; }
/* Encostado no canto, o anel de 3px para fora sairia da tela em cima e
   à esquerda; para dentro da caixa branca ele aparece nos quatro lados. */
.pular:focus-visible { outline-offset: -5px; }

/* ---------------------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 249, 253, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--azul-rgb), 0.08);
}

.cabecalho__nav {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 16px var(--respiro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* D1: o design dá 1180px ao <nav> e ao <footer> mas NÃO ao <main>, e o
   resultado é que o logo começa a 162px enquanto o título do hero começa
   a 32px — cabeçalho e conteúdo desalinhados. Isto conserta. */
main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--respiro);
}

.marca { display: flex; align-items: center; }
.marca img { height: 32px; width: auto; }

/* --- Menu -------------------------------------------------------------
 * <details> foi escolhido porque dá teclado, foco e leitor de tela de
 * graça, e porque a CSP declara script-src 'none' — um hambúrguer com
 * JavaScript simplesmente não rodaria em produção.
 *
 * BASE = CELULAR: a sanfona é o comportamento nativo do <details>, e a
 * lista NÃO recebe `display` nenhum enquanto fechada. É de propósito:
 * qualquer `display` aqui sobreporia o esconder do navegador antigo e o
 * menu nasceria aberto no telefone.
 */
.menu__botao {
  display: block;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--azul-tinta);
  padding: 8px 12px;
  border: 1px solid var(--borda-azul);
  border-radius: 999px;
  background: var(--branco);
  /* O triângulo padrão do <summary> não combina com o resto. */
  list-style: none;
}
.menu__botao::-webkit-details-marker { display: none; }

.menu__lista {
  margin: 0;
  padding: 8px 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
}

/* Só quando ABERTO o celular ganha layout — ver o comentário acima.
   O bloco de referência é o .cabecalho (sticky conta como posicionado):
   left/right: 0 cobrem a largura toda da tela e top: 100% encosta a
   lista logo abaixo dele. Sem o top ela nasceria na posição estática,
   colada ao botão e por cima do "Acessar o Flow". */
.menu[open] .menu__lista {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--branco);
  border-bottom: 1px solid var(--borda-azul);
  box-shadow: var(--sombra-card);
}
.menu[open] .menu__link { display: block; padding: 14px var(--respiro); }
/* A lista aberta vai de borda a borda da tela: o anel para fora perderia
   os lados. Para dentro da linha branca ele aparece inteiro. */
.menu[open] .menu__link:focus-visible { outline-offset: -3px; }

.menu__link { color: var(--texto); }
.menu__link:hover { color: var(--azul); }

/* --- DESKTOP: a lista fica visível mesmo com o <details> FECHADO ------
 * O navegador esconde o conteúdo do <details> fechado com
 * content-visibility: hidden no pseudo-elemento ::details-content, e
 * estilo no filho não alcança o pseudo. São DUAS regras e as duas são
 * necessárias — NÃO REMOVA nenhuma achando que é redundância: a do
 * pseudo é o que faz o conteúdo ser pintado; a da lista é o que o põe em
 * linha. Sem a primeira o menu some, em silêncio, sem erro no console.
 *
 * O bloco inteiro fica atrás de @supports porque foi MEDIDO (Firefox
 * 131, sem ::details-content) que, onde o pseudo não existe, NENHUM
 * estilo de autor revela a lista de um <details> fechado — nem display
 * no filho, nem display: contents no próprio <details>. Esconder o
 * <summary> ali deixaria o desktop sem menu nenhum. Então, nesses
 * navegadores, o desktop fica com o botão "Menu" e a sanfona do celular:
 * menos bonito, mas as quatro seções continuam alcançáveis.
 */
@media (min-width: 901px) {
  @supports selector(::details-content) {
    .menu__botao { display: none; }

    .menu__lista,
    .menu[open] .menu__lista {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 30px;
      position: static;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
    }
    .menu[open] .menu__link { display: inline; padding: 0; }

    .menu::details-content {
      content-visibility: visible;
      block-size: auto;
    }
  }
}

/* Logo (208), lista (449), "Acessar o Flow" (153) e os dois respiros de
   24 somam 858px, e a 901px de tela o <nav> tem 837: o botão quebrava em
   duas linhas e o cabeçalho ia a 95px. O design tem o mesmo defeito na
   fronteira. Gaps menores nesta faixa (822px) resolvem sem espremer o
   logo; a partir de 922px a conta fecha com os gaps de sempre. */
@media (min-width: 901px) and (max-width: 960px) {
  .cabecalho__nav { gap: 16px; }
  .menu__lista,
  .menu[open] .menu__lista { gap: 20px; }
}

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 26px;
}
.botao--solido { gap: 12px; background: var(--azul); color: var(--branco); }
.botao--solido:hover { background: var(--azul-hover); color: var(--branco); }

/* O segundo botão do hero, "Nossa história ↓": sublinhado, sem caixa. */
.botao--vazado {
  color: var(--azul-tinta);
  border-bottom: 1.5px solid rgba(var(--azul-tinta-rgb), 0.3);
  border-radius: 0;
  padding: 0 0 2px;
  gap: 8px;
}
.botao--vazado:hover { color: var(--azul); border-bottom-color: var(--azul); }

/* "Acessar o Flow", no cabeçalho. O :hover repete a cor porque, sem
   isso, o a:hover global pintaria o texto de azul sobre o azul. */
.botao--gradiente {
  background: linear-gradient(135deg, var(--grad-de), var(--azul));
  color: var(--branco);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(var(--azul-rgb), 0.3);
}
.botao--gradiente:hover { color: var(--branco); filter: brightness(1.08); }

/* ---------------------------------------------------------------------
   Miolo — o que é comum às cinco seções
   --------------------------------------------------------------------- */

/* No design cada seção tem o próprio padding; só o hero e o Flow fogem
   dos 80px em cima e embaixo, e cada um diz o seu abaixo. */
.secao { padding: 80px 0; }

/* As quatro listas do miolo eram <div> no design: sem marcador e sem
   recuo. Sem marcador o Safari deixa de expô-las como lista — o
   role="list" que as quatro levam no HTML é o que as mantém. O número
   visível dos passos do Flow está no texto, escondido do leitor de tela
   (aria-hidden): a posição vem da própria <ol>. */
.linha-do-tempo,
.publicos__cartoes,
.guia__norte,
.guia__valores,
.flow__passos,
.flow__selos {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Rótulo + título + parágrafo de Formação, Para quem, O que nos guia
   e Flow. */
.secao__intro {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.secao__rotulo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
}
/* O traço de 44px sob o rótulo. No design é um <span> vazio 8px abaixo. */
.secao__rotulo::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 8px;
  background: var(--azul);
}

.secao__titulo {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--tinta);
}
.secao__titulo span { color: var(--azul); }
/* Cada seção tem o seu corpo de título no design. */
#formacao .secao__titulo { font-size: 50px; line-height: 1.05; }
#para-quem .secao__titulo { font-size: 54px; line-height: 1.02; }
#guia .secao__titulo { font-size: 50px; line-height: 1.05; }
#flow .secao__titulo { font-size: 48px; line-height: 1.05; }

/* O parágrafo é "o que vem depois do título", não "todo <p> da intro":
   o rótulo e o invólucro do CTA do Flow também são <p>. */
.secao__titulo + p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto);
  text-wrap: pretty;
}
.secao__intro strong { color: var(--azul); font-weight: 700; }
#para-quem .secao__titulo + p { max-width: 480px; }
#guia .secao__titulo + p { max-width: 420px; }

/* ---------------------------------------------------------------------
   01 Hero
   --------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 40px;
  align-items: center;
  /* O design declara 60px embaixo, mas fecha o grid com uma <div> vazia
     que vira uma segunda linha e soma os 40px de gap: na tela são 100.
     A <div> não existe aqui (ruído para leitor de tela); os 40 entram
     no padding para o hero medir o mesmo. */
  padding: 80px 0 100px;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* "GovTech nascida em Montes Claros, MG", a pílula acima do título. */
.selo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 14px 8px 10px;
  background: var(--branco);
  border: 1px solid var(--borda-azul);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}
.selo img { height: 16px; width: auto; }

/* Dois pesos na mesma frase: 400 na primeira linha, 800 na segunda. É
   por isso que a fonte precisa dos dois (tarefa 4). */
.hero h1 {
  margin: 0;
  font-size: 62px;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--azul-tinta);
  text-wrap: balance;
}
.hero h1 span {
  display: block;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero h1 + p {
  margin: 0;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--texto);
  text-wrap: pretty;
}

.hero__acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  padding-top: 4px;
}

/* Os quatro pilares em 2×2, com o ícone da marca no centro. */
.hero__pilares {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 130px;
  padding: 16px 0;
}

/* O anel pontilhado de 240px atrás do ícone. No design é uma <div>
   vazia; aqui é pseudo-elemento, que leitor de tela não enxerga. */
.hero__pilares::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dotted var(--azul-guia);
}

/* O círculo branco de 150px com o ícone. Fora do fluxo da grade, como o
   anel: os pilares se distribuem como se ele não existisse. */
.hero__icone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  padding: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 16px 40px rgba(var(--azul-rgb), 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__icone img { width: 100%; height: auto; }

.pilar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* Os da coluna esquerda encostam no centro: alinhados à direita. O
   primeiro filho de .hero__pilares é o .hero__icone, então os pilares
   da esquerda são os filhos PARES (2º e 4º). */
.pilar:nth-child(even) {
  align-items: flex-end;
  text-align: right;
}

.pilar__icone {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: var(--sombra-flutuante);
  display: flex;
  align-items: center;
  justify-content: center;
  /* O <svg> do ícone usa stroke="currentColor" no HTML: é daqui que ele
     herda o azul, sem repetir o hexadecimal dentro de cada ícone. */
  color: var(--azul);
}
.pilar h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--azul);
}
.pilar p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
}

/* ---------------------------------------------------------------------
   02 Nossa história
   --------------------------------------------------------------------- */

.linha-do-tempo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* A linha que liga os marcos, na altura do centro dos círculos. No
   design é uma <div> vazia; aqui é ::before do contêiner. */
.linha-do-tempo::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 44px;
  height: 2px;
  background: var(--azul-guia);
}

.marco {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* O position: relative não é enfeite: a linha é posicionada e por isso
   pintaria POR CIMA do círculo. Posicionado e depois dela na árvore, o
   círculo volta para a frente. */
.marco__icone {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--grad-emblema);
  border: 6px solid var(--fundo);
  box-shadow: 0 12px 30px rgba(var(--azul-rgb), 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marco__cartao {
  width: 100%;
  margin-top: -12px;
  padding: 36px 22px 28px;
  background: var(--branco);
  border-radius: 22px;
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.marco__cartao h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--azul);
}
/* O tracinho de 32px entre título e parágrafo. No design é um <span>
   vazio a 12px de cada um (o gap do card); aqui é ::after do <h3>: os
   12px de cima vêm do margin, os de baixo continuam vindo do gap. */
.marco__cartao h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--azul);
  opacity: 0.5;
}
.marco__cartao p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto);
}

/* O link para a página do documento, ao pé da história. Centrado porque a
   linha do tempo acima ocupa a largura toda e um link encostado à esquerda
   ficaria órfão embaixo dela. */
.leia-mais {
  margin: 36px 0 0;
  display: flex;
  justify-content: center;
}
.leia-mais a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.leia-mais__seta { flex: none; }

/* ---------------------------------------------------------------------
   03 Formação
   --------------------------------------------------------------------- */

/* Texto à esquerda, prédio à direita, citação embaixo. No design são
   duas grades empilhadas (1.2fr 0.8fr e 1fr 1fr) com 56px entre elas;
   aqui é uma grade só e a citação é a segunda linha. */
#formacao {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px 40px;
  align-items: center;
}

.formacao__imagem {
  /* D5: a arte tem 354px de largura. O design a exibia a 560px, ampliada
     1,6x, o que borra o selo e os capitéis das colunas. Quando a arte
     >=1120x1012 chegar, troque para 560px e reverta a proporção da grade
     (a coluna "auto" acima volta a ser 1.2fr 0.8fr). */
  max-width: 354px;
  /* Sem isto o height="320" do atributo vale quando o max-width aperta
     a largura, e a arte sai achatada no celular. */
  height: auto;
  justify-self: end;
}

.citacao {
  /* No design a citação é a única célula de uma grade 1fr 1fr com gap
     de 48px: ocupa a metade esquerda menos meio gap. */
  grid-column: 1 / -1;
  width: calc(50% - 24px);
  margin: 0;
  padding: 36px 40px;
  background: var(--branco);
  border-radius: 26px;
  box-shadow: 0 2px 0 rgba(var(--azul-rgb), 0.05), 0 20px 50px rgba(17, 19, 24, 0.06);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
}
/* As aspas grandes: um glifo da própria fonte (U+201C está no
   subconjunto) num círculo em gradiente. No design é um <span> com o
   caractere; aqui é ::before, que leitor de tela não lê. */
.citacao::before {
  content: "\201C";
  width: 84px;
  height: 84px;
  padding-top: 26px;
  border-radius: 50%;
  background: var(--grad-emblema);
  box-shadow: 0 12px 30px rgba(var(--azul-rgb), 0.3);
  color: var(--branco);
  font-size: 64px;
  line-height: 0.5;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.citacao p {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--tinta);
  text-wrap: balance;
}
.citacao strong { color: var(--azul); font-weight: 700; }

/* --- Apoio: Sertão, Unimontes e Fapemig, depois da citação ------------
 * Uma linha inteira da grade da Formação, como a citação. O rótulo é o
 * mesmo .secao__rotulo das seções; os 28px até a fila são o gap do
 * bloco.
 *
 * Os tamanhos (no width/height de cada <img>) vêm por área ÓPTICA, não
 * por altura. As proporções vão de 1,34:1 (Fapemig) a 4,79:1
 * (Unimontes): com a mesma altura, a Unimontes teria 3,6× a largura da
 * Fapemig e a Fapemig sumiria. Cada valor é a média geométrica de duas
 * normalizações — mesma área de caixa e mesma área de TINTA (a Unimontes
 * pinta 33% da própria caixa; Sertão e Fapemig, 15% e 17%) — que sozinhas
 * erram para lados opostos: só a caixa deixa a Unimontes pesada, só a
 * tinta a encolhe e apaga o nome da universidade.
 *
 * PISO: o manual do Sertão (design/marca-apoiadores/sertao-manual-p09.pdf,
 * "Área e Dimensão") fixa 60px de ALTURA como o mínimo do travamento
 * horizontal — o que a Fapemig fixa em largura (redução mínima) o Sertão
 * fixa em altura. MEDIDO: a 200×49 (a área óptica sozinha) o Sertão
 * renderizava a 48,97px, 18% abaixo do próprio manual. Subir só o Sertão
 * quebraria o equilíbrio óptico com um total de tinta ~1,5× o das outras
 * duas; em vez disso, as três escalam pelo MESMO fator (1,23×, o menor
 * que cumpre o mínimo do Sertão) — o que preserva as razões de área entre
 * elas exatamente, porque área escala com o quadrado do fator linear
 * igualmente nas três.
 *   Sertão    246 × 60    (4,08:1) — MEDIDO 60,23px de altura real
 *   Unimontes 216 × 45    (4,79:1)
 *   Fapemig   133 × 100   (1,34:1) — e nunca menos: o manual fixa a
 *             redução mínima em 2,0 × 1,5 cm, ≈76 × 57 px, e este tamanho
 *             vale em toda largura de tela.
 * O height: auto deixa a proporção do arquivo mandar quando o max-width
 * global apertar (não aperta: a mais larga, 246px, cabe nos 335 de
 * conteúdo a 375px).
 */
.apoio {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.apoio__marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  /* A fila ocupa a largura toda do conteúdo: Sertão encostado no início,
     Fapemig no fim (na mesma linha vertical da borda direita do prédio),
     Unimontes no meio. A pedido do Renê — amontoadas à esquerda, as três
     ocupavam 580 dos 1116px e deixavam a metade direita vazia. */
  justify-content: space-between;
  /* O gap é o PISO entre marcas quando a largura aperta: 48px é mais que a
     área livre que o manual da Fapemig exige em volta dela — "X", a
     altura da palavra FAPEMIG, 21px a 108px de largura — e que qualquer
     respiro do kit do Sertão. Sem flex-wrap de propósito: a fila é uma
     linha ou é uma coluna (bloco de ≤640px), nunca 2+1 com o
     space-between jogando a segunda linha para um lado só. */
  gap: 28px 48px;
}
.apoio__marcas a { display: block; }
.apoio__marcas img {
  height: auto;
  opacity: var(--apoio-opacidade);
  transition: opacity 0.2s;
}
/* Ao passar o mouse, a marca aparece como o manual a entrega: preta. */
.apoio__marcas a:hover img { opacity: 1; }

/* ---------------------------------------------------------------------
   04 Para quem
   --------------------------------------------------------------------- */

/* Título à esquerda, cards à direita, e a faixa de fecho embaixo, a
   toda a largura. No design a faixa é irmã da grade, 40px abaixo. Os
   cards deixaram de listar produtos e passaram a listar PÚBLICOS — daí
   .publicos__*; a estrutura e as medidas são as mesmas do export. */
#para-quem {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px 56px;
  align-items: start;
}

.publicos__cartoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* Ícone à esquerda, título e texto à direita. No design os dois textos
   dividem uma <div>; aqui o card é uma grade de duas linhas e o ícone
   ocupa as duas. */
.cartao {
  padding: 26px 24px;
  background: var(--branco);
  border-radius: 22px;
  box-shadow: var(--sombra-card);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  align-items: start;
}
/* O quinto card atravessa as duas colunas e centra o ícone no texto. */
.cartao:last-child { grid-column: 1 / -1; align-items: center; }

.cartao__icone {
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul-nevoa);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Idem .pilar__icone: o <svg> herda daqui via stroke="currentColor". */
  color: var(--azul);
}
.cartao__titulo {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--azul);
}
.cartao__texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
}

/* A faixa de fecho: o gradiente cobre o fundo em camadas da página, e o
   texto vai em branco por cima. */
.publicos__faixa {
  grid-column: 1 / -1;
  padding: 26px 32px;
  background: linear-gradient(135deg, var(--grad-de), var(--azul) 60%, var(--grad-ate));
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(var(--azul-rgb), 0.28);
  color: var(--branco);
  display: flex;
  align-items: center;
  gap: 24px;
}
.publicos__faixa > span {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.publicos__faixa p {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
}
.publicos__faixa strong { color: var(--realce-sobre-azul); font-weight: 700; }

/* ---------------------------------------------------------------------
   05 O que nos guia
   --------------------------------------------------------------------- */

/* A seção não existe no export do design: ele deixa um comentário
   "05 RESULTADOS" vazio entre Soluções e Flow, e ela ocupa esse vão
   (desvio D11 do README). Nada aqui inventa medida nem cor: a grade é a
   do Para quem, o cartão é o dos passos do Flow e todo tom sai dos
   tokens que já existiam — de propósito, para não abrir par de
   contraste que o verificar.py ainda não meça. */
#guia {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px 56px;
  align-items: start;
}

/* Missão e visão, um cartão cada. O corpo é o dos selos do Flow (19px
   sobre --tinta) porque são a mesma coisa: uma frase só, que quer ser
   lida inteira e não varrida. */
.guia__norte {
  display: grid;
  gap: 18px;
}
.norte {
  padding: 26px 30px;
  background: var(--branco);
  border-radius: 22px;
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* O mesmo rótulo das seções, sem o traço de 44px: aqui ele é etiqueta de
   cartão, não abertura de seção — o traço marcaria um começo que não há. */
.norte__rotulo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
}
.norte__texto {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  color: var(--tinta);
  text-wrap: pretty;
}

/* Os oito valores atravessam as duas colunas: é a grade dos seis passos
   do Flow com duas casas a mais, e sem o número — aqui não há sequência,
   e um dígito mentiria que há. */
.guia__valores {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.valor {
  padding: 22px 20px;
  background: var(--branco);
  border-radius: 20px;
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.valor h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--azul);
}
.valor p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto);
}

/* ---------------------------------------------------------------------
   06 Municipa.Flow
   --------------------------------------------------------------------- */

/* Logo à esquerda, texto à direita; os seis passos e os dois selos
   atravessam as duas colunas. No design são três grades empilhadas com
   44px entre elas. */
#flow {
  padding: 80px 0 96px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px 56px;
  align-items: center;
}

.flow__logo {
  padding: 28px;
  background: var(--branco);
  border-radius: 32px;
  box-shadow: 0 2px 0 rgba(var(--azul-rgb), 0.05), 0 30px 80px rgba(17, 19, 24, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow__logo img { width: 100%; max-width: 380px; height: auto; }

/* O parágrafo que segura o CTA. No design é uma <div> flex. O margin: 0
   é o que importa: .secao__intro é coluna flex, a margem padrão do <p>
   não colapsa e viraria 16px a mais acima e abaixo do botão. */
.secao__intro > p:has(.botao) {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 4px;
}

/* O CTA do Flow é MAIOR que o "Acessar o Flow" do cabeçalho, que é o
   que .botao--gradiente carrega: mais padding, corpo 16 e sombra maior. */
#flow .botao--gradiente {
  gap: 12px;
  padding: 16px 28px;
  font-size: 16px;
  /* D2: no design a seta é um caractere de 18px, que esticava a caixa de
     linha para 24px (botão de 56). A seta em SVG não estica nada; o
     line-height repõe os 24. */
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(var(--azul-rgb), 0.32);
}
.botao__seta { flex: none; }

.flow__passos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.passo {
  padding: 24px 18px;
  background: var(--branco);
  border-radius: 20px;
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* O número, num círculo em gradiente (o design é redondo, não quadrado). */
.passo__numero {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-emblema);
  color: var(--branco);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.passo h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--azul);
}
.passo p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto);
}

.flow__selos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.flow__selos li {
  padding: 22px 28px;
  background: var(--branco);
  border-radius: 20px;
  box-shadow: var(--sombra-card);
  display: flex;
  align-items: center;
  gap: 18px;
}
.flow__selos li > span {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-emblema);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow__selos p {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  color: var(--tinta);
}
.flow__selos strong { color: var(--azul); font-weight: 800; }

/* ---------------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------------- */

.rodape {
  position: relative;
  background: linear-gradient(180deg, var(--azul), var(--grad-ate));
  color: var(--branco);
}

/* O pontilhado do canto inferior esquerdo. No design é uma <div> vazia;
   aqui é pseudo-elemento, que leitor de tela não enxerga. */
.rodape::before {
  content: "";
  position: absolute;
  left: 32px;
  bottom: 28px;
  width: 96px;
  height: 56px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.6px,
                                    transparent 1.8px);
  background-size: 12px 12px;
}

/* MEDIDO: abaixo de 1372px de layout (1180 do contêiner centrado + os
   32 de respiro já não passam dos 128px onde o pontilhado acaba) o
   copyright, alinhado à esquerda, fica POR CIMA dos pontos. Como ele é
   branco translúcido, um ponto claro por baixo muda a cor composta e o
   contraste cai de 5,9:1 para 2,8:1 no pixel amostrado (2,89:1 na cor
   declarada do ponto) — e o verificar.py não enxerga isso, porque mede
   cores declaradas. Nesta faixa o pontilhado sobe para
   cima do divisor, onde à esquerda não há texto (tudo ali é centrado).
   A media query conta a barra de rolagem e o layout não: 1399 dá folga
   para os 15–17px dela. Abaixo de 901 ele some — ver o bloco de ≤900. */
@media (min-width: 901px) and (max-width: 1399px) {
  .rodape::before { bottom: 84px; }
}

.rodape__miolo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 64px var(--respiro) 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* D4: o ícone é SVG inline e a cor entra pelo <path>, no lugar do
   filter: brightness(0) invert(1) do design. A propriedade CSS vence o
   atributo fill= que o próprio <path> carrega. */
.rodape__icone { height: 40px; width: auto; }
.rodape__icone path { fill: var(--branco); }

.rodape__nome {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* No design, nome e lema dividem uma <div> com gap de 10px. O HTML não
   tem essa <div>, então o lema desconta do gap de 32px do miolo o que
   sobra: 32 − 22 = 10. */
.rodape__lema {
  margin: -22px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.rodape__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  font-size: 15px;
  font-weight: 600;
}
.rodape__links a { color: rgba(255, 255, 255, 0.85); }
/* O último é flow.municipa.ai, que o design deixa em branco cheio. */
.rodape__links a:last-child { color: var(--branco); }
.rodape__links a:hover { color: var(--branco); }

.rodape__site {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.rodape__site > span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rodape__site a { color: var(--branco); font-weight: 600; }
.rodape__site a:hover { color: var(--branco); }

.rodape__base {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  /* A marca da Fapemig tem 60px e os textos, uma linha: centrados no
     mesmo eixo. */
  align-items: center;
  gap: 16px;
  font-size: 13px;
  /* MEDIDO, não escolhido: 0,73 é o menor alfa que dá 4,54:1 sobre o
     azul de ação (#1f4fc4, a ponta clara do gradiente) — o piso do WCAG
     AA para texto normal é 4,5 e 0,72 dá 4,47. O design tinha 0,65
     (3,93:1). O verificar.py mede o mesmo par com o mesmo alfa: quem
     mudar um muda o outro. */
  color: rgba(255, 255, 255, 0.73);
}

/* A Fapemig no rodapé, com o número do projeto. É a versão NEGATIVA do
   manual (branca), no mesmo alfa do texto ao lado — a única marca que
   o rodapé carrega não fica nem mais forte nem mais fraca que a linha
   em que está. 80×60 respeita a redução mínima (≈76×57 px); o gap de
   18px é a área livre "X" do manual — a altura da palavra FAPEMIG, 15px
   neste tamanho — que nada pode invadir. */
.rodape__apoio {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.rodape__apoio img { height: auto; opacity: 0.73; }

/* ---------------------------------------------------------------------
   Página do documento (a-empresa.html)
   --------------------------------------------------------------------- */

/* Uma coluna de leitura, e não a grade de duas colunas do resto do site:
   aqui o conteúdo é texto corrido de fôlego longo, e o que manda deixa de
   ser o desenho e passa a ser a medida da linha. 660px a 17px dá ~72
   caracteres, dentro da faixa de 45–75 que se recomenda para texto
   contínuo. O <main> continua com os 1180 e o respiro lateral do D1; é
   este bloco que estreita, centrado dentro dele. */
.documento {
  max-width: 660px;
  margin: 0 auto;
  padding: 72px 0 96px;
}

.doc__abertura { margin-bottom: 52px; }
.doc__abertura h1 {
  margin: 22px 0 0;
  font-size: 46px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--tinta);
}
.doc__linha-fina {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto);
  text-wrap: pretty;
}

.doc__secao { margin-top: 56px; }
.doc__secao h2 {
  margin: 0 0 22px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--azul);
}
/* Justificado — e a hifenização vem JUNTO, não é enfeite. Sem ela, o
   navegador só tem os espaços para esticar, e em português, com palavras
   como "desenvolvimento" e "organizacional", isso abre rios de branco no
   meio do parágrafo. O `lang="pt-BR"` do <html> é o que diz ao navegador
   qual dicionário usar; sem ele, `hyphens: auto` não faz nada. O -webkit-
   é para o Safari, que ainda pede o prefixo. Quem tirar a justificação
   tira as três linhas.
   AVISO: a hifenização depende de o navegador TER o dicionário. Chromium
   headless não tem nenhum (medido: nem pt, nem en, nem de), então em
   captura de tela automatizada a justificação aparece sempre no pior
   caso. Firefox traz os padrões embutidos e o Safari usa os do sistema.
   A largura em que isto vale está na regra de ≤699px, mais abaixo. */
.doc__secao p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--texto);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}
.doc__secao p:last-child { margin-bottom: 0; }
/* O nome do projeto de pesquisa, em itálico como no documento original. */
.doc__secao em { font-style: italic; }

/* A frase-síntese de missão e visão, separada do parágrafo que a
   desenvolve. Mesmo cartão branco do resto do site — nenhum tom novo. O
   seletor repete .doc__secao para vencer o `.doc__secao p` acima sem
   precisar de !important. */
.doc__secao .doc__enunciado {
  margin: 0 0 26px;
  padding: 24px 28px;
  background: var(--branco);
  border-radius: 22px;
  box-shadow: var(--sombra-card);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--tinta);
  /* Fora da justificação de propósito: são duas ou três linhas curtas num
     cartão, e esticar espaço aí só produz buraco. */
  text-align: left;
}

.doc__valores {
  display: grid;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* O filete à esquerda é decoração pura (não carrega informação: o <h3> de
   cada valor já separa um do outro), e por isso está isento do piso de
   3:1 do WCAG 1.4.11 — é o mesmo raciocínio do anel do hero, que o README
   detalha. O que precisa passar é o TEXTO ao lado, e ele é --texto sobre
   o fundo da página: o par que o verificar.py já mede em 9,36:1. */
.doc__valores li {
  padding-left: 20px;
  border-left: 3px solid var(--azul-guia);
}
.doc__valores h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--azul);
}
.doc__valores p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--texto);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

.doc__volta {
  margin: 64px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------- */

/* As quebras são declaradas por intenção — "esta grade vira uma coluna"
   — e não casando pedaço de texto do atributo style, como faz o design
   com [style*="repeat(6"]. Os seletores com ID (#formacao, #para-quem,
   #flow) repetem o ID de propósito: é o que vence em especificidade a
   regra de base de cada seção.

   O menu do celular NÃO está aqui: ele é a base do bloco do cabeçalho,
   e o desktop é a exceção em min-width — a ordem importa lá. */
@media (max-width: 900px) {
  /* O respiro lateral alimenta o <main>, o cabeçalho, o rodapé e os
     links do menu aberto de uma vez só. */
  :root { --respiro: 20px; }

  .cabecalho__nav { padding: 14px var(--respiro); }

  /* O <details> não fecha sozinho ao tocar num link, e sem JavaScript
     não há quem o feche: a lista aberta (205px) ficaria por cima do
     começo da seção destino. Enquanto o menu está aberto, o alvo da
     âncora desce para baixo da lista — 72 do cabeçalho + 205 + 13 de
     folga. Onde :has() não existe, vale o 88 de sempre. */
  html:has(.menu[open]) { scroll-padding-top: 290px; }

  /* Todas as seções, inclusive as duas que fogem dos 80px no desktop. */
  .secao,
  #flow { padding: 56px 0; }
  /* O hero fecha 28px mais embaixo: no design a <div> vazia que encerra
     a grade vira uma terceira linha de altura zero, e o gap de 28 antes
     dela conta. É o mesmo motivo dos 100px no desktop. Medido: 84 nos
     dois a 900 e a 375. */
  .hero { padding: 56px 0 84px; }

  /* Tudo o que era duas colunas vira uma. A citação entra na lista: as
     aspas passam para cima do texto. */
  .hero,
  #formacao,
  #para-quem,
  #guia,
  #flow,
  .publicos__cartoes,
  .flow__selos,
  .citacao { grid-template-columns: 1fr; }

  /* 28px é o que o design põe, a <=900px, entre os blocos que ELE agrupa
     numa grade — texto e pilares, intro e prédio, intro e cards, logo e
     intro — e dentro das listas de cards. */
  .hero,
  #formacao,
  #para-quem,
  #guia,
  #flow,
  .publicos__cartoes,
  .flow__selos,
  .citacao { gap: 28px; }

  /* MAS a citação, a faixa, os passos e os selos vivem FORA dessas grades
     no design: são irmãos numa seção em coluna com o gap dela — 56 na
     Formação, 40 no Para quem, 44 no Flow —, que a regra genérica de 28
     do design não alcança. Aqui cada seção é uma grade só, com um gap
     só, então a diferença entra como margem no bloco de fora:
     28 + 28 = 56, 28 + 12 = 40, 28 + 16 = 44. */
  .citacao,
  .apoio { margin-top: 28px; }
  .publicos__faixa,
  .guia__valores { margin-top: 12px; }
  .flow__passos,
  .flow__selos { margin-top: 16px; }

  .hero h1 { font-size: 40px; }
  .documento { padding: 48px 0 64px; }
  .doc__abertura h1 { font-size: 34px; }
  .doc__secao h2 { font-size: 26px; }
  #formacao .secao__titulo,
  #para-quem .secao__titulo,
  #guia .secao__titulo,
  #flow .secao__titulo { font-size: 34px; }

  /* Os pilares continuam 2×2, mais juntos, e sem o anel nem o ícone do
     centro: com 24px entre as colunas não há onde pô-los. */
  .hero__pilares { gap: 40px 24px; }
  .hero__pilares::before,
  .hero__icone { display: none; }

  /* Os marcos em duas linhas de dois; a linha que os ligava não faz
     sentido quebrada e some. */
  .linha-do-tempo { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .linha-do-tempo::before { display: none; }

  /* A arte da Formação tem 354px e o conteúdo fica mais estreito que
     isso a partir de ~394px de tela. */
  .formacao__imagem { max-width: 100%; justify-self: center; }
  /* Em uma coluna a citação não tem mais a "metade menos meio gap". */
  .citacao { width: auto; }

  .flow__passos { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  /* Os valores caem de 4 para 2 colunas, com o gap de 14 que já tinham:
     são cartões curtos (título e uma linha), e 28px entre eles abriria
     buraco onde os passos do Flow, bem mais altos, precisam de ar. */
  .guia__valores { grid-template-columns: repeat(2, 1fr); }

  /* O design encolhe o rodapé no celular: 48 em cima, 28 embaixo. */
  .rodape__miolo { padding: 48px var(--respiro) 28px; }

  /* MEDIDO: com o copyright centrado em coluna, a ≤515px de janela ele
     alcança o canto onde mora o pontilhado, e o branco translúcido sobre
     um ponto cai para 2,8:1 (pixel amostrado; 2,89:1 na cor declarada). Essa fronteira é a largura do TEXTO (muda
     com a fonte carregada ou com o ano), não do layout — por isso o
     pontilhado some no bloco inteiro, e não a 515. Não há onde pô-lo num
     rodapé estreito em que tudo é centrado. */
  .rodape::before { display: none; }

  .rodape__base {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* A justificação sai quando a coluna deixa de ter a medida cheia.
 *
 * .documento é max-width 660 dentro de dois respiros de 20px, então ela só
 * é 660 de verdade a partir de 700px de janela; abaixo disso encolhe junto
 * com a tela, e justificar uma coluna estreita sem hifenização produz
 * buraco, não alinhamento.
 *
 * MEDIDO (Chromium sem dicionário de hifenização, que é o pior caso), o
 * maior espaço esticado de um parágrafo, contra os 2,91px do espaço
 * natural desta fonte a 17px:
 *
 *     coluna 660px ->  25px  (8,7x)     <- medida cheia, aceitável
 *     coluna 620px ->  21px  (7,2x)
 *     coluna 500px ->  42px (14,3x)
 *     coluna 380px ->  57px (19,5x)
 *     coluna 320px -> 123px (42,3x)     <- 375px de tela: um TERÇO da
 *                                          linha em branco no meio da frase
 *
 * Não é questão de gosto a 320px: é texto quebrado. */
@media (max-width: 699px) {
  .doc__secao p,
  .doc__valores p { text-align: left; }
}

@media (max-width: 520px) {
  /* Logo (208px), "Menu" (66px) e "Acessar o Flow" (153px) com dois
     respiros de 24px somam 475px; a 520px de tela sobram 480 e a 375
     sobram 335. Sem isto o botão quebra em duas linhas, o cabeçalho
     cresce para 91px — mais que o scroll-padding-top de 88 — e o logo
     é espremido a 116px. O Flow segue alcançável no CTA da própria
     seção e no link do rodapé. Não é o menu que sai: ele é o único
     caminho para as quatro seções no telefone. */
  .cabecalho__nav .botao--gradiente { display: none; }

  .hero h1 { font-size: 34px; }

  .linha-do-tempo,
  .flow__passos { grid-template-columns: 1fr; }
}

/* MEDIDO (com os tamanhos maiores da tarefa do mínimo do Sertão): as três
   marcas somam 595px e, com os dois pisos de 48px, a fila precisa de
   691px de conteúdo — 731 de janela com os dois respiros de 20. Abaixo
   disso ela vira coluna, uma marca por linha, alinhada à esquerda como o
   resto do celular; 750 dá folga para a barra de rolagem (15-17px) —
   sondado no Chrome: a 746px de janela o piso de 48px já está exato, sem
   sobra, e abaixo disso os <li> (flex-shrink por padrão) começam a
   encolher as próprias marcas em vez de estreitar o gap, o que violaria
   de novo o mínimo do Sertão. É um corte próprio, e não o de 520 das
   outras listas, porque é a largura das MARCAS que manda, não a das
   colunas de cards. */
@media (max-width: 750px) {
  .apoio__marcas {
    flex-direction: column;
    align-items: flex-start;
  }
}