/* ==========================================================================
   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%}
}