/*
 * Guias de busca do JotaERP (30/10/2026). Só o que home.css não traz. Prefixo jh-guia-; cores só do :root de home.css.
 * Coluna de leitura de 760 px; o print abre um pouco mais e sobrepõe o fim do topo, como a vitrine das páginas por ramo.
 */
.jh-guia-leitura { max-width: 760px; margin: 0 auto; }
.jh-guia-leitura h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }

/* Topo. O flow-root segura a margem negativa do print: sem ele ela vaza pela seção e o fundo escuro vai até o fim do print. */
.jh-guia-topo { display: flow-root; }
.jh-guia-topo .jh-heroi__sub { font-size: clamp(1.0625rem, 1.5vw, 1.125rem); }
.jh-guia-topo .jh-trilha a { padding-block: 14px; }
.jh-guia-print { position: relative; z-index: 2; max-width: 960px; margin: clamp(28px, 3.4vw, 40px) auto calc(var(--jh-sobreposicao) * -1); }
.jh-guia-print figcaption { margin-top: 10px; font-size: .875rem; color: var(--jh-suave); }
.jh-guia-corpo { padding-top: calc(var(--jh-sobreposicao) + clamp(40px, 5vw, 64px)); }

/* Texto */
.jh-guia-secao + .jh-guia-secao { margin-top: clamp(36px, 4.6vw, 52px); }
.jh-guia-secao p { margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: var(--jh-tinta-2); }
.jh-guia-secao b { font-weight: 600; color: var(--jh-tinta); }
.jh-guia-secao .jh-lista { margin: 14px 0 0; gap: 10px; }
.jh-guia-secao .jh-lista li { font-size: 1.0625rem; line-height: 1.5; }

/* O preenchimento vertical de um link em linha não muda a altura da linha e leva o alvo de toque a 44 px. */
.jh-guia-leitura p a, .jh-guia-leitura li span a { padding-block: 12px; text-underline-offset: 3px; }

.jh-guia-passos { counter-reset: guia-passo; display: grid; gap: 10px; margin-top: 14px; }
.jh-guia-passos li { counter-increment: guia-passo; position: relative; padding-left: 36px; font-size: 1.0625rem; line-height: 1.5; color: var(--jh-tinta-2); }
.jh-guia-passos li::before { content: counter(guia-passo); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--jh-filete-forte); border-radius: 50%; font-size: .8125rem; font-weight: 600; color: var(--jh-azul-forte); }

.jh-guia-tabela { margin-top: 16px; }
.jh-guia-tabela--valores th:last-child, .jh-guia-tabela--valores td:last-child { text-align: right; white-space: nowrap; }
.jh-guia-tabela + p { margin-top: 16px; }

/* Perguntas e links do fim */
.jh-guia-leitura > h2 + .jh-duvidas, .jh-guia-leitura > h2 + .jh-guia-rel { margin-top: 18px; }
.jh-guia-rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--jh-filete); }
.jh-guia-rel li { border-bottom: 1px solid var(--jh-filete); }
.jh-guia-rel a { display: flex; align-items: center; height: 100%; min-height: 48px; padding: 8px 0; font-weight: 500; text-decoration: none; }
.jh-guia-rel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jh-guia-data { margin-top: 20px; font-size: .875rem; color: var(--jh-suave); }

@media (max-width: 899px) {
  /* Texto longo em cartão lê melhor empilhado do que alinhado à direita, como faz home.css com valores curtos. */
  .jh-guia-tabela .jh-tabela td { display: block; text-align: left; }
  .jh-guia-tabela .jh-tabela td::before { display: block; font-size: .8125rem; }
  .jh-guia-tabela--valores .jh-tabela td { display: flex; text-align: right; }
  .jh-guia-tabela--valores .jh-tabela td::before { display: none; }
}
@media (max-width: 700px) {
  .jh-guia-rel { grid-template-columns: minmax(0, 1fr); }
}
.jh-guia-topo figcaption { color: var(--jh-texto-claro); }