/* ==========================================================================
   Padrão tipográfico do site (fonte única da verdade)
   Manual de marca: Montserrat nos títulos, Inter nos textos.
   O html do site usa 20px, então todos os tamanhos aqui são em px.

   Escala:
     H1 (hero)          46px   Montserrat 800
     H2 (título seção)  35px   Montserrat 700
     H3 (subtítulo)     22px   Montserrat 700
     Texto de destaque  20px   Inter 400
     Texto              18px   Inter 400
     Texto pequeno      16px   Inter 400

   Carregado antes do responsive.css (que continua com a palavra final).
   Em páginas de produto (product-pages.css) a mesma escala é aplicada
   dentro de .pp.
   ========================================================================== */

:root {
  --font-title: 'Montserrat', 'Arial Black', Arial, sans-serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;
  --fs-h1: 46px;
  --fs-h2: 35px;
  --fs-h3: 22px;
  --fs-lead: 20px;
  --fs-body: 18px;
  --fs-small: 16px;
}

/* Família: tudo o que não declara fonte própria cai em Inter (e não mais em
   Segoe UI / system-ui, que vinha do Bootstrap). */
body {
  font-family: var(--font-body);
}

input,
textarea,
select,
button {
  font-family: inherit;
}

.interregular {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
}

/* Títulos */
.mib-hero h1 {
  font-size: clamp(32px, 3.6vw, var(--fs-h1)) !important;
  line-height: 1.12;
}

.h1 {
  font-size: clamp(32px, 3.6vw, var(--fs-h1));
  line-height: 1.12;
}

.tituloH1 {
  font-size: clamp(26px, 2.7vw, var(--fs-h2)) !important;
  line-height: 1.15;
}

/* Textos: 18 / 20 / 22 colapsam nos degraus da escala */
.short-text,
.long-text {
  font-size: var(--fs-lead);
}

.corpo,
.textButton,
.font-18,
.font-20 {
  font-size: var(--fs-body) !important;
}

.titulo,
.font-22,
.font-24 {
  font-size: var(--fs-lead) !important;
}

.font-26 {
  font-size: var(--fs-h3) !important;
}

.mib-hero p {
  font-size: var(--fs-lead);
}

/* h1 sem classe (ex.: "Fale Conosco") e título do hero das páginas internas */
h1 {
  font-size: clamp(32px, 3.6vw, var(--fs-h1));
}

.inner-hero h1,
.inner-hero .tituloH1 {
  font-size: clamp(26px, 3.6vw, var(--fs-h1)) !important;
  line-height: 1.12 !important;
}

/* Rodapé: links na escala de texto pequeno */
.single-footer ul li,
.single-footer ul li a {
  font-size: var(--fs-small) !important;
}

/* Rodapé: títulos das colunas no degrau H3 */
.single-footer h3 {
  font-size: var(--fs-h3) !important;
}