/* ============================================================
tipografia.css — Didata Sistemas · Direção de arte (Etapa 1)
------------------------------------------------------------
Camada de tipografia + regras anti-quebra, no padrão dos
benchmarks (ContaAzul / Bling / Senior).
Carregada por ÚLTIMO no (depois de styles.css e dos
ajustes inline do header.php) — é ela quem dá a palavra final
sobre escala tipográfica. Manter os !important apenas onde
é preciso vencer patches antigos com !important.
ESCALA (desktop → mobile, fluida):
H1 (hero/page) 52px → 30px · peso 800 · lh 1.08
H2 (seções) 38px → 26px · peso 800 · lh 1.15
H3 (cards) 20px · peso 700 · lh 1.3
Lead/parágrafo 17px · peso 400 · lh 1.7
============================================================ */
:root{
/* — Tokens de tipografia — */
--fs-h1: clamp(1.9rem, 1.15rem + 2.9vw, 3.25rem); /* ~30 → 52px */
--fs-h2: clamp(1.6rem, 1.25rem + 1.45vw, 2.375rem);/* ~26 → 38px */
--fs-h3: 1.25rem; /* 20px */
--fs-lead: 1.0625rem; /* 17px */
--lh-h1: 1.08;
--lh-h2: 1.15;
--lh-h3: 1.3;
--lh-body: 1.7;
--ls-h1: -.028em;
--ls-h2: -.02em;
--peso-display: 800; /* Inter 900/950 fica pesado demais em títulos grandes */
}
/* ── Base ──────────────────────────────────────────────────── */
body{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* ── Anti-quebra: regras globais ───────────────────────────── */
/* Títulos nunca hifenizam nem quebram no meio de termos */
h1, h2, h3, .h1, .h2, .stats-title, .solc-heading, .flow-title,
.bcard__title, .page-hero .title, .nfe-hero h1, .parceiros-hero h1, .plan-name, .faq-q span{
hyphens: none;
-webkit-hyphens: none;
overflow-wrap: normal;
}
/* Distribui as linhas dos títulos de forma equilibrada */
h1, h2, .h1, .h2, .stats-title, .solc-heading, .flow-title,
.bcard__title, .page-hero .title, .nfe-hero h1, .parceiros-hero h1{
text-wrap: balance;
}
/* Evita órfãs em parágrafos de apoio (browsers que suportam) */
.lead, .hero-sub, .bcard__desc, .faq-a, .segment p, .plan-desc{
text-wrap: pretty;
}
/* Termos fiscais e valores nunca quebram */
.nowrap, .stat-num, .price-val, .pill{ white-space: nowrap }
/* ── H1 · hero e páginas internas ──────────────────────────── */
.hero-copy h1, .h1, .page-hero .title,
.nfe-hero h1, .parceiros-hero h1{
font-size: var(--fs-h1) !important;
line-height: var(--lh-h1) !important;
letter-spacing: var(--ls-h1) !important;
font-weight: var(--peso-display) !important;
max-width: 21ch;
}
.hero-sub{
font-size: var(--fs-lead) !important;
line-height: var(--lh-body) !important;
max-width: 52ch;
}
/* ── H2 · títulos de seção (uma única escala em todo o site) ─ */
.h2, .stats-title, .solc-heading, .flow-title,
section .bcard__title, .faq-head .h2{
font-size: var(--fs-h2) !important;
line-height: var(--lh-h2) !important;
letter-spacing: var(--ls-h2) !important;
font-weight: var(--peso-display) !important;
}
/* H2 centralizados: largura de leitura confortável */
.stats-title, .faq-head .h2, .solc-heading{
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
/* H2 alinhados à esquerda */
.split-head .h2, .flow-title{ max-width: 26ch }
/* ── H3 · cards e itens ────────────────────────────────────── */
.segment h3, .solc-title, .service-card h3, .flow-step h3,
.faq-cta-title, .faq-cta h3{
font-size: var(--fs-h3);
line-height: var(--lh-h3);
letter-spacing: -.012em;
font-weight: 700;
}
/* ── Lead / parágrafos de apoio ────────────────────────────── */
.lead{
font-size: var(--fs-lead);
line-height: var(--lh-body);
max-width: 62ch;
}
/* ── Números (faixa de estatísticas) ───────────────────────── */
.stat-num{
font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem) !important; /* 24→34px */
font-weight: 800;
letter-spacing: -.02em;
}
.stat-label{ font-size: .875rem; line-height: 1.45 }
/* ── Preços ────────────────────────────────────────────────── */
.price-val{ letter-spacing: -.03em }
/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 700px){
/* Quebras de linha fixas (
) são direção de arte do
desktop; no mobile deixam linhas tortas — desligar e
deixar o text-wrap: balance resolver. */
h1 br, .h2 br, .stats-title br, .solc-heading br,
.bcard__title br, .flow-title br{ display: none }
.hero-copy h1, .h1, .page-hero .title,
.nfe-hero h1, .parceiros-hero h1{ max-width: 100% }
.hero-sub{ max-width: 100% }
.stats-title, .faq-head .h2, .solc-heading{ max-width: 20ch }
}
/* ── Mistura de peso nos títulos (padrão da landing, 2026-08-03) ──────────
Base leve + só o trecho essencial em peso alto. É o contraste de peso que
dá hierarquia, não o tamanho — foi o que o hero da /teste-gratis.php já
fazia, e agora vale para o site inteiro.
Por que aqui e não no styles.css: as regras acima usam !important, então
qualquer tentativa de mudar peso em outro arquivo é ignorada. Este é o
arquivo que tem a palavra final.
O :has() é proposital — a regra só age em título que JÁ tenha realce
marcado ( ou o .accent que várias seções já usavam). Título ainda
não marcado fica exatamente como está, então a marcação pode avançar
página a página sem nenhum momento de regressão. Navegador antigo, sem
suporte a :has(), também mantém o comportamento atual. */
:root{ --peso-display-leve: 300; --peso-realce: 700; }
.hero-copy h1:has(strong), .h1:has(strong), .page-hero .title:has(strong),
.nfe-hero h1:has(strong), .parceiros-hero h1:has(strong),
.h2:has(strong), .h2:has(.accent),
.stats-title:has(strong), .stats-title:has(.accent),
.solc-heading:has(strong), .solc-heading:has(.accent),
.flow-title:has(strong), .flow-title:has(.accent),
.nfe-solc-heading:has(strong), .nfe-title:has(strong), .nfe-title:has(.accent),
.nfe-cta-band h2:has(strong), .faq-cta-title:has(strong), .cta-band__titulo:has(strong),
.blog-hero__title:has(strong), .article-cta h3:has(strong),
section .bcard__title:has(strong), section .bcard__title:has(.accent),
.faq-head .h2:has(strong){
font-weight: var(--peso-display-leve) !important;
letter-spacing: -.025em !important;
}
/* O realce: por peso sempre; a cor do .accent, onde já existia, continua. */
.hero-copy h1 strong, .h1 strong, .page-hero .title strong,
.nfe-hero h1 strong, .parceiros-hero h1 strong,
.h2 strong, .h2 .accent,
.stats-title strong, .stats-title .accent,
.solc-heading strong, .solc-heading .accent,
.flow-title strong, .flow-title .accent,
.nfe-solc-heading strong, .nfe-title strong, .nfe-title .accent,
.nfe-cta-band h2 strong, .faq-cta-title strong, .cta-band__titulo strong,
.blog-hero__title strong, .article-cta h3 strong,
section .bcard__title strong, section .bcard__title .accent,
.faq-head .h2 strong{
font-weight: var(--peso-realce) !important;
}
/* ── Quebra explícita manda mais que limite de caracteres ─────────────────
Quando o título traz um
, o autor JÁ decidiu onde a linha quebra. O
teto de 24ch acrescentava uma segunda quebra por cima dessa decisão: em
"Tudo que sua empresa precisa
em um só sistema" a caixa parava em
552px e a primeira linha estourava, virando três linhas com um corte
torto em "Tudo que sua / empresa precisa".
Ficou visível agora porque a Poppins é mais larga que a Inter e o peso 300
abre ainda mais o texto — o mesmo 24ch cabia menos palavra que antes.
Só acima de 700px: no celular o
é desligado de propósito (regra
abaixo) e aí o teto de caracteres volta a ser o certo. */
@media (min-width: 701px){
.h2:has(br), .stats-title:has(br), .solc-heading:has(br),
.flow-title:has(br), .faq-head .h2:has(br),
.split-head .h2:has(br), section .bcard__title:has(br){
max-width: none;
}
}
/* ── Teto do H1 de página interna ─────────────────────────────────────────
.page-hero .title herdava o max-width: 21ch dos H1 de hero. Com a Poppins
(mais larga que a Inter) e o peso 300, 21ch parou em 651px e manchetes
curtas como "Comece emitindo. Evolua para uma gestão completa." caíram
para três linhas, encolhidas num canto da coluna de 1360px.
26ch devolve o equilíbrio sem virar linha longa demais para leitura. */
@media (min-width: 701px){
.page-hero .title, .nfe-hero h1{ max-width: 26ch }
}