/*
 * Escala de títulos v1 (out/2026), fluida entre 375px e 1200px:
 *   H1 de topo (hero)     28px -> 48px, linha 1.15
 *   H1 de conteúdo        26px -> 40px, linha 1.2
 *   H2                    22px -> 32px, linha 1.25
 *   H3                    18px -> 22px, linha 1.3
 *
 * Carregado depois de main.css, fixes.css e theme-software.css. Os <style> de includes
 * (hero, landings, tabelas) entram depois no documento, por isso os seletores com prefixo
 * de componente precisam ser mais específicos que as regras antigas que substituem.
 * H2 com .h3/.h4/.h5/.h6 (cartões e seções das páginas de tabela) ficam fora da escala.
 */
:root {
  --tg-h1-hero: clamp(1.75rem, 1.182rem + 2.424vw, 3rem);
  --tg-h1: clamp(1.625rem, 1.227rem + 1.697vw, 2.5rem);
  --tg-h2: clamp(1.375rem, 1.091rem + 1.212vw, 2rem);
  --tg-h3: clamp(1.125rem, 1.011rem + .485vw, 1.375rem);
}

/* H1 de conteúdo: posts, blog, autores, páginas de tabela e qualquer H1 fora de hero */
h1,
h1[class*="display-"],
.tabela-v1 .tabela-detalhe__header h1[class] {
  font-size: var(--tg-h1);
  line-height: 1.2;
}

/* H1 de topo de página */
.hero-section h1,
.hero-section h1[class],
main .lp-seg .hero h1,
main .lp-rj .hero h1 {
  font-size: var(--tg-h1-hero);
  line-height: 1.15;
}

h2,
h2.h2,
h2[class*="display-"],
.tabela-v1 h2.tabela-secao-header__titulo,
main .lp-seg .section-head h2,
main .lp-seg h2.faq-title,
main .lp-seg .lp-form-band h2,
main .lp-rj h2.h2,
main .lp-rj .close h2.h2 {
  font-size: var(--tg-h2);
  line-height: 1.25;
}

h3 {
  font-size: var(--tg-h3);
  line-height: 1.3;
}