/* Overline — casca comum a todas as páginas: envelope, cabeçalho, marca, navegação e título.
 *
 * PORQUÊ ESTE FICHEIRO: isto estava copiado em seis páginas e derivou. O cabeçalho do
 * Quadro tinha 15px de altura e o dos Jogadores 16px, a navegação do índice usava pastilhas
 * de 13px sem estado ativo enquanto as outras usavam 13,5px com estado, e a largura da
 * página variava entre 820 e 1240px sem razão nenhuma. Resultado: o topo saltava ao mudar
 * de separador. Uma cópia só, aqui.
 *
 * A LARGURA é uma só, 1180px, e é esse o ponto: era o que fazia o topo saltar entre
 * separadores. Havia cinco valores (820, 900, 1180, 1240) sem razão. A tabela do Quadro,
 * que era o único caso com argumento, já rola dentro do seu contentor.
 * `--largura` fica como escape para uma página que venha a precisar de outra medida.
 */
a{color:inherit;text-decoration:none}
.env{max-width:var(--largura,1180px);margin:0 auto;padding:0 16px}

header{border-bottom:1px solid var(--borda);padding:15px 0}
.topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.marca{display:inline-flex;align-items:center;gap:9px;font-family:var(--tipo-n);font-weight:700;
 font-size:19px;letter-spacing:.14em}
.marca .b{color:var(--azul-500)}
.marca .wm{display:block}
.simbolo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
 color:var(--texto-1,#EDF3FA)}
.simbolo .sim-svg{display:block}

/* align-items:center e não o `stretch` por omissão: na landing há um botão cheio na
   navegação, e sem isto os outros links esticavam à altura dele (52px em vez de 33) */
.navs{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
/* line-height fixo: o body de cada página tem o seu, e a pastilha mudava de altura */
.navs a{padding:7px 13px;border-radius:9px;font-size:13.5px;line-height:1.35;
 color:var(--texto-2);border:1px solid transparent}
.navs a:hover{color:var(--texto-1)}
/* separador atual — marcado pela própria página, não pelo JS */
.navs a.on{background:var(--ink-700);border-color:var(--borda);color:var(--texto-1)}

h1{font-family:var(--tipo-n);font-weight:700;font-size:28px;letter-spacing:-.02em;margin:24px 0 4px}
.lead{color:var(--texto-2);font-size:14px;margin-bottom:16px}

@media(max-width:600px){h1{font-size:23px;margin-top:18px}}