/* ============================================================
   JYNX · sistema.css  (03 do pacote "Ajustes Visuais do Site", 15/10/2026)
   Carregado POR ÚLTIMO em todas as páginas. Só usa tokens de
   jynx-tokens.css (marca v2.0); nenhum hex, tamanho ou espaço
   avulso. Onde o pacote e a marca divergem, a marca manda.
   ============================================================ */

/* ---------- tipografia: a escala da marca, um papel por degrau ---------- */
body { font-size: var(--jx-c2); line-height: 1.6; }
h1 { font-size: min(var(--jx-t1), 11vw); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: min(var(--jx-t2), 8vw); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: var(--jx-t4); line-height: 1.15; letter-spacing: -0.015em; }
h4 { font-size: var(--jx-t5); line-height: 1.3; }
.card h3, [class*="__card"] h3, .sol__name, .faq__q { font-size: var(--jx-t5); }
.hero__h1, .hero--editorial .hero__h1 { font-size: min(var(--jx-t1), 11vw); margin-top: 0; }
/* h1 das páginas internas: um t1 só, no lugar de seis clamps diferentes */
.cathero h1, .dhero h1, .blog-list__head h1, .sp-hero h1, .phero h1, .rthero h1 { font-size: min(var(--jx-t1), 11vw); }
/* h2 de seção em t2; h2 de sub-bloco (formulário, faixa, vitrine, corpo do blog) em t3 */
.section-head h2, .faq__lead h2, .ctafinal h2, .custom h2, .conheca__copy h2, .banner h2, .conteudos__head h2,
.dcta h2, .seg-deep__head h2, .sp-final h2, .pagecta h2, .rtcta h2 { font-size: min(var(--jx-t2), 8vw); margin-top: 0; }
.ct-formwrap h2, .sb-clientes__faixa h2, .sp-quem--vitrine h2, .blog-content h2 { font-size: var(--jx-t3); }
/* herói: a coluna de texto ganha folga para o título fechar em duas linhas com a
   palavra mais longa reservada (511px) sem reduzir o display abaixo de t1 */
@media (min-width: 981px) {
  .hero:not(.hero--center) .hero__inner { grid-template-columns: 1.12fr 1fr; }
}
.hero__sub, .section-head p, .cathero p, .dhero__lead, .faq__lead p, .ctafinal p { font-size: var(--jx-c1); line-height: 1.45; }
.section-head p { margin-top: var(--jx-esp-4); }
.tag, .sol__erp, .sol__cat, .chip__n, .rec-soon__badge { font-size: var(--jx-rotulo); }
p { max-width: var(--jx-largura-leitura); }
table, .numeric, .resultados__num, .sp-results__num, .sol__prazo { font-variant-numeric: tabular-nums; }

/* ---------- o rótulo acima do título, o selo do herói e a numeração: remover ---------- */
.eyebrow, .hero__badge, .dhero__badge, [class*="hero"] [class*="__badge"], [class*="hero"] [class*="__pill"] { display: none; }
.pains__num, .method__num, .dcomo__num, .sp-steps__num { display: none; }

/* ---------- ritmo: três pesos de seção, com a escala de espaço da marca ---------- */
.section { padding-block: var(--jx-esp-8); }                       /* 64 · corpo */
.hero, .cathero, .dhero,
.section--ink.ctafinal, .section--ink.custom, .section--ink.dcta,
.section--ink.pagecta, .section--ink.banner { padding-block: var(--jx-esp-9); }   /* 96 · abertura e fechamento */
.section.faq, .section--tight { padding-block: var(--jx-esp-7); }  /* 48 · lista e FAQ */
/* vizinhos do mesmo tom não repetem o respiro inteiro */
.section:not(.section--ink):not(.section--alt) + .section:not(.section--ink):not(.section--alt),
.section--alt + .section--alt { padding-block-start: 0; }

/* ---------- superfícies: tom no lugar de contorno ---------- */
.section--alt { background: var(--jx-sup-baixa); }
.card, .blog-card, [class*="__card"] {
  background: var(--jx-sup-baixa); border: 0; border-radius: var(--jx-raio-cartao); box-shadow: none;
}
.section--alt .card, .section--alt .blog-card, .section--alt [class*="__card"] { background: var(--jx-sup-alta); }
.section--ink .card, .section--ink [class*="__card"] { background: color-mix(in srgb, var(--ink) 88%, white); }
.card:hover, .blog-card:hover, [class*="__card"]:hover { box-shadow: none; }
hr { display: none; }
/* filetes decorativos saem; o espaço separa. Ficam os estruturais (cabeçalho, mock, tabela) e o do FAQ */
.hero__proof { border-top: 0; padding-top: 0; }
.hero__sep { display: none; }
.pains__rows, .pains__row, .pilares__list, .depo__card figcaption, .frente,
.seg-deep + .seg-deep, .seg-deep__clients, .about-logos { border-top: 0; border-bottom: 0; }
.conteudos__coltop, .seg-deep__coltop { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--jx-esp-3); }
.faq__item { border-bottom: 1px solid var(--jx-borda); }

/* ---------- forma: dois raios ---------- */
.btn, input, select, textarea { border-radius: var(--jx-raio-campo); }
.tag { border-radius: var(--jx-raio-selo); }
.blog-card__media, .video16, figure, .sp-quem__media { border-radius: var(--jx-raio-cartao); overflow: hidden; }

/* ---------- controles ---------- */
.btn--ghost { border-color: var(--ink); }                 /* borda de componente em 3:1; --hair não passava */
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.section--ink .btn--ghost { border-color: var(--bg); }
.section--ink .btn--ghost:hover { background: var(--bg); color: var(--ink); }

/* ---------- as superfícies que o navegador desenha ---------- */
::selection { background: var(--jx-marca); color: var(--jx-texto-claro); }
:focus-visible { outline: var(--jx-foco-largura) solid var(--jx-foco); outline-offset: var(--jx-foco-folga); border-radius: 4px; }
a { text-decoration-color: var(--jx-marca); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
* { scrollbar-color: var(--jx-borda) transparent; }

/* ---------- movimento: nunca começa invisível, sem cascata ---------- */
[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .motion-on [data-reveal]:not(.in):not(.shown) { opacity: 0; transform: translateY(12px); }
  .motion-on [data-reveal].in { animation: revealUp 240ms cubic-bezier(.22, 1, .36, 1) 0ms both; }
}