# Cartão e tabela de preços (`preco`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Cartões de plano com nome, descrição, preço (com "de/por" opcional), parcelas, itens inclusos e não inclusos, botão e selo de destaque. Um cartão sozinho ou vários lado a lado.

- **Categoria:** Venda e conversão
- **Equivalente no Elementor:** Tabela de Preços (Price Table)
- **Arquivos:** `preco.html`, `preco.css`
- **Precisa de JavaScript:** não
- **Depende de:** `botao`

## Quando usar
- Seção de oferta de página de vendas
- Página de planos ou de serviços com preço

## Quando não usar
- Mais de 4 planos (confunde a escolha)
- Preço sob consulta: use chamada para ação

## Variações
- **Vários planos:** classe ds-preco
- **Um cartão centralizado:** classe ds-preco--um
- **Plano em destaque com selo:** classe ds-preco__plano--destaque e .ds-preco__selo
- **Preço de/por:** .ds-preco__de com <s>
- **Mensal e anual:** combinar com o alternador: data-ds-alternar no número e nas parcelas

## Conteúdo esperado
- Nome e descrição de cada plano
- Preço, período e parcelas reais
- Itens inclusos e não inclusos
- Texto e destino do botão

## Acessibilidade
- Cada plano é um <article> rotulado pelo nome
- Item não incluso tem "Não incluso:" para leitor de tela (o riscado não é anunciado)
- Preço antigo em <s>
- Botão com o nome do plano no texto

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao/botao.css">
<link rel="stylesheet" href="componentes/preco/preco.css">
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cartao-padding`, `--ds-cor-borda`, `--ds-cor-destaque`, `--ds-cor-sobre-destaque`, `--ds-cor-superficie`, `--ds-cor-texto-destaque`, `--ds-cor-texto-suave`, `--ds-cor-titulo`, `--ds-espaco-1`, `--ds-espaco-2`, `--ds-espaco-4`, `--ds-espaco-6`, `--ds-fonte-impacto`, `--ds-raio-cartao`, `--ds-raio-pilula`, `--ds-sombra-md`, `--ds-sombra-sm`, `--ds-tamanho-cartao`, `--ds-tamanho-numero`, `--ds-tamanho-pequeno`, `--ds-tamanho-texto-grande`.