body { margin: 0; background: #f7f8f3; -webkit-font-smoothing: antialiased; }
  a { color: #175447; text-decoration: none; }
  a:hover { color: #10443a; }
  a, button, select, label, input[type="range"], [role="button"] { cursor: pointer; }
  @media (max-width: 900px) {
    html { scrollbar-width: none; -ms-overflow-style: none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
  }

/* gerado dos style-hover do protótipo (o !important vence o estilo inline) */
.h1:hover { background:#e7efeb !important; border-color:#175447 !important; }
.h2:hover { background:#e7efeb !important; border-color:#175447 !important; color:#10443a !important; }
.h3:hover { background:linear-gradient(120deg,#10443a,#0b3129) !important; color:#ffffff !important; }
.h4:hover { background:#10443a !important; }
.h5:hover { color:#10443a !important; }
.h6:hover { color:#175447 !important; }
.h7:hover { background:#10443a !important; color:#ffffff !important; }
.h8:hover { background:#ffffff !important; color:#0f3d34 !important; }

/* versão computador x celular (no protótipo: largura < 900px = celular) */
[hidden] { display: none !important; }
@media (max-width: 899.98px) { .so-desktop { display: none !important; } }
@media (min-width: 900px) { .so-celular, #menu-celular { display: none !important; } }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

/* "Números que impulsionam": título em 3 linhas fixas (Resultados / que constroem / novos futuros.).
   "que constroem" precisa de ~240 px; a coluna automática dava ~212 px e quebrava em 4 linhas. */
@media (min-width: 1280px) {
  /* tela larga: tudo numa linha, a coluna do título do tamanho da linha mais longa */
  .numeros-grade { grid-template-columns: max-content repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 600px) and (max-width: 1279.98px) {
  /* telas médias: título numa linha própria, números embaixo */
  .numeros-grade > div:first-child { grid-column: 1 / -1; }
}

/* "Nosso jeito": os 4 cartões sempre 2 + 2 (a grade automática fazia 3 + 1 em tela larga) */
.jeito-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 479.98px) {
  .jeito-cards { grid-template-columns: 1fr !important; }  /* celular: um por linha (2 apertaria "transparência") */
}
@media (min-width: 768px) and (max-width: 899.98px) {
  .jeito-grade { grid-template-columns: 1fr !important; }  /* coluna dos cartões estreita demais aqui: vão para baixo do texto */
}