/* Reset enxuto e estilo de elementos nus. Nenhum componente nomeado aqui. */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { background: var(--papel); color: var(--tinta); font-family: var(--fonte-texto); font-size: var(--t-md); line-height: 1.65; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; /* algarismos alinhados — o site é cheio de quantitativos */ } h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; color: var(--verde-escuro); } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-lg); } h4 { font-size: var(--t-base); font-family: var(--fonte-texto); font-weight: 600; } p, li { max-width: var(--medida); text-wrap: pretty; } p + p { margin-top: var(--esp-4); } /* Texto corrido justificado — mas só a partir de 40rem (640px). Justificar depende de haver palavras suficientes na linha para distribuir a sobra. Abaixo disso a coluna tem ~38 caracteres, e o navegador estica os espaços até a linha fechar: "Fundada em 2013, a Montante" com buracos entre cada palavra. Fica pior que o alinhamento normal, e é justamente onde mais gente lê. `hyphens: auto` ajuda quando existe: o `` declara `lang="pt-BR"`, que é o que o navegador precisa para escolher o dicionário. Mas nem todo navegador traz dicionário de português — não dá para contar com ele para salvar a coluna estreita, então o piso de largura é a defesa de verdade. */ @media (min-width: 40rem) { p, li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } } /* Justificar só vale para texto corrido. Em rótulo, número, legenda e aviso — coisas de uma ou duas linhas — o justificado espalha três palavras de ponta a ponta da linha e fica pior que o alinhamento normal. */ .rotulo, .etapa__num, .subtitulo, .hero__sub, .credencial__valor, .credencial__rotulo, .capacidade__dado, .formulario__aviso, figcaption, .rodape p, .chamada p { text-align: left; -webkit-hyphens: manual; hyphens: manual; } a { color: var(--verde); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--verde-claro); } :focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } ul, ol { padding-left: 1.15em; } li + li { margin-top: var(--esp-2); } table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); } th, td { text-align: left; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linha); } th { font-weight: 600; color: var(--verde-escuro); } td:last-child, th:last-child { text-align: right; } /* Utilitários */ .container { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; } .secao { padding-block: var(--esp-8); } .secao--alt { background: var(--papel-alt); } .rotulo { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde); font-family: var(--fonte-texto); } .subtitulo { font-size: var(--t-lg); color: var(--tinta-suave); font-family: var(--fonte-texto); } .pular-para-conteudo { position: absolute; left: -9999px; background: var(--verde); color: #fff; padding: var(--esp-3) var(--esp-4); z-index: 100; } .pular-para-conteudo:focus { left: var(--esp-4); top: var(--esp-4); } /* Visível só para leitor de tela. Usado pelos contadores da home: os dígitos que mudam ficam com `aria-hidden` e o valor final vem daqui, para quem navega por leitura de tela não ouvir um número do meio da contagem. Não usa `display: none` nem `visibility: hidden` — os dois removem o elemento também da leitura de tela, que é justamente quem precisa dele. */ .apenas-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }