/* Scroll offset para âncoras quando o header é fixo */
:root {
  /* Ajuste esse valor se o header tiver altura diferente */
  --site-header-height: 80px;
}

/* Em telas menores o header costuma ser mais alto (menu empilhado) */
@media (max-width: 767px) {
  :root {
    --site-header-height: 88px;
  }
}

/* Suaviza a rolagem ao clicar em links internos */
html {
  scroll-behavior: smooth;
}

/* Aplicar deslocamento a alvos de âncora comuns (sections, headings com id e elementos que tenham id) */
section[id],
[id].anchor-target,
h1[id],
h2[id],
h3[id] {
  scroll-margin-top: calc(var(--site-header-height) + 12px);
}

/* Pequeno ajuste para títulos logo abaixo do header */
h2[id] {
  scroll-margin-top: calc(var(--site-header-height) + 6px);
}

/* Caso precise de um alvo específico sem alterar o HTML, use a classe .anchor-target */