@import url("brand-colors.css");
@import url("brand-dark.css");
@import url("contact-buttons.css");
@import url("brand-footer.css");

/* Relier — Open Sans, conforme Typo Documentation.
 * Pesos: Light 300, Regular 400, SemiBold 600, Bold 700, ExtraBold 800.
 * Escala compartilhada a partir da home CRM: página, seção, card e conteúdo.
 */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-relier: "Open Sans", Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}
html, body { font-family: var(--font-relier); letter-spacing: 0; }
h1, h2, h3, h4, h5, h6, input, textarea, select, button { font-family: var(--font-relier); letter-spacing: 0; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Tokens da home: o contraste dos títulos acompanha o tema do visitante. */
:root {
  --relier-title-color: #242730;
  --relier-title-accent: #3861a6;
  --relier-title-page: clamp(32px, 5.5vw, 52px);
  --relier-title-section: clamp(28px, 3.2vw, 42px);
  --relier-title-feature: clamp(30px, 4.2vw, 48px);
  --relier-title-card: clamp(19px, 1.8vw, 24px);
  --relier-title-article: clamp(24px, 2.4vw, 32px);
}
[data-theme="dark"] {
  --relier-title-color: #f2f4f6;
  --relier-title-accent: #8099c3;
}

/* !important limita a normalização à tipografia, inclusive nas páginas antigas
 * com utilitários Bulma e estilos locais. A home continua como referência. */
:root body:not(.crm-home-page) :is(h1, h2, h3, h4, h5, h6):not(.lp-plan-name) {
  font-family: var(--font-relier) !important;
  font-weight: 600 !important;
  color: var(--relier-title-color) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
:root body:not(.crm-home-page) h1 {
  font-size: var(--relier-title-page) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}
:root body:not(.crm-home-page) h2 {
  font-size: var(--relier-title-section) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}
:root body:not(.crm-home-page) h3:not(.lp-plan-name) {
  font-size: var(--relier-title-card) !important;
}
:root body:not(.crm-home-page) h4 { font-size: 18px !important; }
:root body:not(.crm-home-page) h5 { font-size: 16px !important; }
:root body:not(.crm-home-page) h6 { font-size: 14px !important; }
:root body:not(.crm-home-page) :is(h1, h2, h3, h4, h5, h6) > :is(a, span, strong, em):not(.icon) {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}
:root body:not(.crm-home-page) h1 > span:not(.icon) {
  color: var(--relier-title-accent) !important;
}

/* Mesma hierarquia da home: chamadas principais maiores; cards compactos. */
:root body:not(.crm-home-page) :is(.section-heading, .section-head, .commercial-heading, .lp-heading, .lp-narrow, .lp-close) h2 {
  font-size: var(--relier-title-feature) !important;
}
:root body:not(.crm-home-page) :is(.benefit-grid, .channel-card, .help-callout, .help-feedback, .article-aside, .planned-articles, .contact-form-card, .comparison-before, .comparison-after) h2 {
  font-size: var(--relier-title-card) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
:root body:not(.crm-home-page) :is(.benefit-grid, .help-callout, .comparison-before, .comparison-after) h2 {
  font-size: 16px !important;
}
:root body:not(.crm-home-page) :is(.post-card, .post, .help-card, .category-card, .crm-journey-grid, .values-grid, .marketing-services, .crm-features, .help-steps, .pillar) h3 {
  font-size: 20px !important;
}
:root body:not(.crm-home-page) :is(.pipeline-board, .lp-step-grid) h3 {
  font-size: 16px !important;
}
:root body:not(.crm-home-page) :is(.pricing-card, .plan) h3 {
  font-size: 20px !important;
}
:root body:not(.crm-home-page) .marketing-service h2 {
  font-size: var(--relier-title-card) !important;
  font-weight: 600 !important;
}
:root body:not(.crm-home-page) .contact-reviews-intro h3 {
  font-size: 23px !important;
}
:root body:not(.crm-home-page) .featured h3 {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.25 !important;
}

/* Títulos de leitura seguem a escala secundária, dentro da coluna do artigo. */
:root body:not(.crm-home-page) :is(.article-content, .article-body) h2 {
  font-size: var(--relier-title-article) !important;
  line-height: 1.25 !important;
}
:root body:not(.crm-home-page) :is(.article-content, .article-body) h3 {
  font-size: var(--relier-title-card) !important;
}
:root body:not(.crm-home-page) .article-body .help-callout h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
}
:root body:not(.crm-home-page) :is(.article-aside, .support-dialog) h2 {
  font-size: 20px !important;
}

/* Títulos sobre fundos escuros e rodapés mantêm contraste legível. */
:root body:not(.crm-home-page) :is(h1, h2, h3, h4, h5, h6):is(.has-text-white, .has-text-light, .has-text-tertiary-light),
:root body:not(.crm-home-page) .hero.is-primary-dark :is(h1, h2, h3),
:root body:not(.crm-home-page) :is(.site-footer, .footer) :is(h1, h2, h3, h4, h5, h6) {
  color: #fff !important;
}
:root body:not(.crm-home-page) :is(h1, h2, h3):is(.has-text-white, .has-text-light, .has-text-tertiary-light) > span,
:root body:not(.crm-home-page) .hero.is-primary-dark :is(h1, h2, h3) > span {
  color: inherit !important;
}
:root body:not(.crm-home-page) .hero.is-primary-dark h2.subtitle {
  font-size: var(--relier-title-card) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
:root body:not(.crm-home-page) :is(.site-footer, .footer) :is(h2, h3) {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
