← Biblioteca componentes/listas/lista-honorarios/ficha.md CódigoTela cheia
listas/lista-honorarios

Lista de honorários por serviço

🟢 estavel complexidade baixa prefixo hon- precos honorarios tabela servicos transparencia juridico institucional sem javascript

Incluir · as linhas que se colam num site novo, depois do core (CLAUDE.md §10)

<link rel="stylesheet" href="componentes/listas/lista-honorarios/estilo.css">

markup.html · 124 linhas · 6,5 KB

<!-- ==========================================================================
     LISTA DE HONORÁRIOS — o preço de cada serviço, antes do trabalho
     Prefixo: hon-
     Requer: core (tokens, base, motion.css, motion.js) + este estilo.css
     SEM JAVASCRIPT.

     Serviços em LINHAS, não planos em colunas: nome do serviço e para quem
     ele é, o que está incluso numa frase, e o honorário "a partir de"
     alinhado à direita. A última linha pode ser "Sob proposta", e o pé diz o
     que fica de fora. É a prova de transparência que um escritório de
     serviço consegue dar — e o irmão do conversao/planos-honorarios, que
     compara MODELOS de relacionamento em colunas.

     UMA <table> DE VERDADE, com os papéis ARIA escritos. No celular cada
     linha vira um bloco empilhado (display:grid no <tr>), e o navegador
     deixa de derivar a semântica de tabela do layout — sem role="table",
     "row", "rowheader" e "cell" no markup, o leitor de tela receberia textos
     soltos. Mesmo motivo do listas/tabela-comparativa.

     "A PARTIR DE" NÃO É ENFEITE. É o que torna o número verdadeiro: o
     honorário real depende do escopo, e um valor cravado na página vira
     promessa. A ressalva do pé usa a primitiva .nota do core.
     ========================================================================== -->

<section class="sec-paper sec-pad hon">
  <div class="wrap">

    <div class="hon-topo">
      <div>
        <span class="eyebrow" data-rv>Honorários</span>
        <h2 class="sec-title ttl">O preço, <em>antes do trabalho</em></h2>
      </div>
      <a class="btn btn-primary hon-cta" href="#contato" data-rv>
        Conversar 15 minutos
        <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 7H12M8 3L12 7L8 11"/></svg>
      </a>
    </div>

    <table class="hon-tabela" role="table" data-rv data-d="1">
      <caption class="visually-hidden">Honorários por serviço. Valores a partir de, confirmados em orçamento escrito.</caption>
      <thead class="hon-thead" role="rowgroup">
        <tr class="hon-cab" role="row">
          <th class="hon-cab-servico" scope="col" role="columnheader">Serviço</th>
          <th class="hon-cab-inclui" scope="col" role="columnheader">O que inclui</th>
          <th class="hon-cab-preco" scope="col" role="columnheader">Honorário</th>
        </tr>
      </thead>
      <tbody class="hon-tbody" role="rowgroup">
        <tr class="hon-linha" role="row">
          <th class="hon-servico" scope="row" role="rowheader">
            <span class="hon-servico-in">
              <span class="hon-n" aria-hidden="true">01</span>
              <span class="hon-nome">Diagnóstico patrimonial</span>
              <span class="hon-para">Uma família, patrimônio consolidado</span>
            </span>
          </th>
          <td class="hon-inclui" role="cell">Duas reuniões e relatório escrito</td>
          <td class="hon-preco" role="cell"><span class="hon-de">a partir de</span> <span class="hon-valor">R$ 2.400</span></td>
        </tr>
        <tr class="hon-linha" role="row">
          <th class="hon-servico" scope="row" role="rowheader">
            <span class="hon-servico-in">
              <span class="hon-n" aria-hidden="true">02</span>
              <span class="hon-nome">Testamento</span>
              <span class="hon-para">Uma pessoa, patrimônio sem empresa</span>
            </span>
          </th>
          <td class="hon-inclui" role="cell">Minuta, revisão e registro em cartório</td>
          <td class="hon-preco" role="cell"><span class="hon-de">a partir de</span> <span class="hon-valor">R$ 3.800</span></td>
        </tr>
        <tr class="hon-linha" role="row">
          <th class="hon-servico" scope="row" role="rowheader">
            <span class="hon-servico-in">
              <span class="hon-n" aria-hidden="true">03</span>
              <span class="hon-nome">Planejamento sucessório</span>
              <span class="hon-para">Família com imóveis e aplicações</span>
            </span>
          </th>
          <td class="hon-inclui" role="cell">Mapa sucessório e três cenários comparados</td>
          <td class="hon-preco" role="cell"><span class="hon-de">a partir de</span> <span class="hon-valor">R$ 9.500</span></td>
        </tr>
        <tr class="hon-linha" role="row">
          <th class="hon-servico" scope="row" role="rowheader">
            <span class="hon-servico-in">
              <span class="hon-n" aria-hidden="true">04</span>
              <span class="hon-nome">Holding familiar</span>
              <span class="hon-para">Constituição e transferência dos bens</span>
            </span>
          </th>
          <td class="hon-inclui" role="cell">Contrato social, acordo de sócios e integralização</td>
          <td class="hon-preco" role="cell"><span class="hon-de">a partir de</span> <span class="hon-valor">R$ 18.000</span></td>
        </tr>
        <tr class="hon-linha" role="row">
          <th class="hon-servico" scope="row" role="rowheader">
            <span class="hon-servico-in">
              <span class="hon-n" aria-hidden="true">05</span>
              <span class="hon-nome">Bens no exterior</span>
              <span class="hon-para">Declaração anual ao Banco Central e à Receita</span>
            </span>
          </th>
          <td class="hon-inclui" role="cell">Levantamento, apuração e entrega</td>
          <td class="hon-preco" role="cell"><span class="hon-de">a partir de</span> <span class="hon-valor">R$ 3.200</span></td>
        </tr>
        <tr class="hon-linha" role="row">
          <th class="hon-servico" scope="row" role="rowheader">
            <span class="hon-servico-in">
              <span class="hon-n" aria-hidden="true">06</span>
              <span class="hon-nome">Consultoria de investimentos</span>
              <span class="hon-para">Acompanhamento contínuo da carteira</span>
            </span>
          </th>
          <td class="hon-inclui" role="cell">Taxa anual sobre o patrimônio, acordada antes</td>
          <td class="hon-preco" role="cell"><span class="hon-valor hon-valor--texto">Sob proposta</span></td>
        </tr>
      </tbody>
    </table>

    <div class="hon-pe" data-rv data-d="2">
      <p class="nota hon-nota">Estruturas complexas são orçadas pelo escopo. O orçamento escrito vem sempre antes do trabalho.</p>
      <p class="nota hon-nota">Valores com impostos incluídos. Custas de cartório e de registro são cobradas à parte.</p>
    </div>

  </div>
</section>

estilo.css · 109 linhas · 3,9 KB

/* ==========================================================================
   LISTA DE HONORÁRIOS — hon-
   Serviços em linhas, com o que inclui e o preço "a partir de" à direita.
   Tokens usados: --fg --fg-2 --fg-muted --rule --rule-2 --display --sans
   A ressalva do pé é a primitiva .nota do core.
   ========================================================================== */

.hon-topo{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.hon-cta{flex:0 0 auto}

.hon-tabela{
  inline-size:100%;
  margin-top:clamp(34px,5vh,56px);
  border-collapse:collapse;
  text-align:start;
}

/* ---------------------------------------------------------------- cabeçalho */
.hon-cab-servico,
.hon-cab-inclui,
.hon-cab-preco{
  padding:0 0 14px;
  font-family:var(--sans);font-weight:400;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
  border-block-end:1px solid var(--rule-2);
  text-align:start;
}
.hon-cab-preco{text-align:end}

/* ---------------------------------------------------------------- linha
   Três colunas com larguras decididas pelo CONTEÚDO do nome e do preço: a
   coluna do meio absorve o que sobra. O filete entre linhas é a borda de
   baixo da linha inteira, para não dobrar na divisa entre células. */
.hon-linha{border-block-end:1px solid var(--rule)}
.hon-servico,
.hon-inclui,
.hon-preco{padding:26px 0;vertical-align:middle;font-weight:400}

/* O <th scope="row"> é o nome do serviço: o número, o nome e para quem é.
   A GRADE MORA NUM INVÓLUCRO, e não no <th>: display:grid na própria célula
   tira dela o display:table-cell e desmonta a tabela inteira (o gotcha do
   listas/tabela-comparativa). O número fica numa coluna própria, para os
   nomes alinharem pela mesma borda. */
.hon-servico{text-align:start}
.hon-servico-in{
  display:grid;grid-template-columns:44px minmax(0,1fr);
  column-gap:0;row-gap:6px;
}
.hon-n{
  grid-row:1 / span 2;align-self:center;
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;
  color:var(--fg-muted);font-variant-numeric:tabular-nums;
}
.hon-nome{
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.9vw,26px);line-height:1.15;letter-spacing:-.02em;
  color:var(--fg);
}
.hon-para{font-size:14px;line-height:1.5;color:var(--fg-2)}

.hon-inclui{
  padding-inline:24px;
  font-size:14.5px;line-height:1.55;color:var(--fg-2);
  inline-size:38%;
}

/* O preço: "a partir de" em rótulo pequeno EM CIMA do valor, e o valor em
   corpo de display com algarismos tabulares, para R$ 2.400 e R$ 18.000
   alinharem pela direita casa a casa. */
.hon-preco{text-align:end;white-space:nowrap}
.hon-de{
  display:block;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);margin-block-end:4px;
}
.hon-valor{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;
  color:var(--fg);font-variant-numeric:tabular-nums;
}
.hon-valor--texto{font-size:clamp(19px,1.8vw,24px)}

.hon-pe{
  display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;
  margin-top:20px;
}

/* ---------------------------------------------------------------- celular
   Cada linha vira um bloco: nome em cima, o que inclui embaixo, o preço à
   direita do nome. O <tr> em display:grid mantém a caixa (não é
   display:contents), e os papéis escritos no markup mantêm a semântica. */
@media(max-width:760px){
  .hon-thead{display:none}
  .hon-tabela,.hon-tbody{display:block}
  .hon-linha{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"servico preco" "inclui inclui";
    column-gap:16px;padding:20px 0;
  }
  .hon-servico{grid-area:servico;padding:0}
  .hon-servico-in{grid-template-columns:32px minmax(0,1fr)}
  .hon-preco{grid-area:preco;padding:0;align-self:start}
  .hon-inclui{grid-area:inclui;padding:10px 0 0 32px;inline-size:auto;font-size:14px}
  .hon-cta{inline-size:100%}
}

O preço antes do trabalho. Serviços em linhas: o número, o nome, para quem ele é, o que está incluso numa frase e o honorário "a partir de" alinhado à direita. Onde o valor depende de escopo, a linha diz "Sob proposta". No pé, a ressalva do que fica de fora.

O problema que ela resolve: preço é a pergunta que o visitante de um escritório de serviço mais quer fazer e menos se sente à vontade para fazer. Uma página que responde antes da conversa filtra quem não cabe e dá segurança a quem cabe — e a forma em linhas, com o caso típico ao lado do valor, é o que torna o número honesto.

Quando usar

Quando não usar

Padrão editorial

Slot Regra
Título 3 a 7 palavras: a promessa de transparência, não "Nossos preços"
Botão 2 a 4 palavras: a conversa curta que antecede o orçamento. Opcional
Serviço 1 a 4 palavras, o nome que o cliente usaria
Para quem 3 a 8 palavras: o caso típico que cabe no preço
O que inclui 3 a 9 palavras: entregáveis concretos
Valor sempre com "a partir de"; ou "Sob proposta" com .hon-valor--texto
Ressalva 8 a 24 palavras: custas, impostos, e que o orçamento escrito vem antes

O que mantém a peça: o "para quem" é o que dá sentido ao "a partir de". "Testamento — a partir de R$ 3.800" é um número solto; "Testamento, uma pessoa, patrimônio sem empresa — a partir de R$ 3.800" é um preço.

Especificação dos assets

Nenhum.

Como usar

<link rel="stylesheet" href="componentes/listas/lista-honorarios/estilo.css">

CSS puro. A ressalva do pé usa a primitiva .nota do core.

Ganchos

Gancho Papel
table.hon-tabela e os role escritos a semântica de tabela que sobrevive à virada do celular
.hon-valor--texto corpo menor para "Sob proposta"
.nota.hon-nota a ressalva; a tipografia é do core, a posição é daqui

Variações

Compliance

Gotchas

Movimento reduzido / toque

Nada anda além do reveal do core. No toque não há nada que dependa de hover.

Histórico

Origem Quando O quê
referência: aurex-law.modulify.website 2026-09-29 Clone de referência, reescrito do zero

O que veio da referência: a ideia — serviços em linhas, "a partir de" à direita, a última linha sob escopo, a nota do que fica de fora.

O que mudou na tradução: <table> semântica com papéis escritos no lugar de grade de div; virada para blocos no celular; algarismos tabulares; ressalva pela .nota do core; voz de assessoria patrimonial; a serifada do original trocada pela --display do tema. Registro consolidado em projetos/referencias-externas.md.