/* base.css — GERADO, não editar à mão.
 * Origem: afiliados-marketplace/estudos/2026-10-vitrine-cestinha/design-system-claude/tokens/base.css (DS v3, identidade C),
 *         copiado sem alteração: estilo de elemento, :focus-visible, ::selection, reduced-motion e as classes .cl-*.
 * Ordem de carga: Bootstrap → theme.css → base.css → componentes.css → CSS da área (D-07 do PLANO site-completo).
 * Gerado em: 2026-10-27.
 * Valor errado ou faltando: pedir ao afiliados (design system) e gerar de novo. */

html{background:var(--papel)}
body{margin:0;background:var(--fundo-pagina);color:var(--texto-corpo);font-family:var(--fonte);font-weight:var(--peso-medio);font-size:var(--tam-corpo);line-height:var(--entrelinha-corpo);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--texto-link);font-weight:var(--peso-forte);text-decoration:underline;text-decoration-thickness:var(--fio);text-underline-offset:0.18em}
a:hover{color:var(--carvao);text-decoration-color:var(--pedra)}
:focus-visible{outline:var(--foco-largura) solid var(--foco-cor);outline-offset:var(--foco-recuo)}
input::placeholder,textarea::placeholder{color:var(--carvao);opacity:.72}
::selection{background:var(--areia);color:var(--carvao)}
/* v3: sobretítulo em pílula sálvia e caixa de frase (tema C) — escreva "Achado da semana", não "ACHADO DA SEMANA" */
.cl-sobretitulo{display:inline-block;font-size:var(--tam-sobretitulo);font-weight:var(--peso-forte);letter-spacing:var(--espaco-sobretitulo);color:var(--oliva);line-height:1;background:var(--fundo-pilula);border-radius:var(--raio-pilula);padding:.5em .95em .48em}
.cl-titulo{font-size:var(--tam-titulo);font-weight:var(--peso-medio);letter-spacing:var(--espaco-titulo);line-height:var(--entrelinha-titulo);color:var(--oliva);margin:0;text-wrap:balance}
.cl-titulo b,.cl-titulo strong{font-weight:var(--peso-forte)}
.cl-nome{font-size:var(--tam-nome-produto);font-weight:var(--peso-forte);letter-spacing:var(--espaco-nome);line-height:var(--entrelinha-nome);color:var(--oliva);margin:0}
.cl-numero{font-size:var(--tam-numero);font-weight:var(--peso-extra);letter-spacing:var(--espaco-numero);color:var(--oliva);line-height:1}
.cl-apoio{font-size:var(--tam-apoio);font-weight:var(--peso-medio);line-height:var(--entrelinha-apoio);color:var(--carvao)}
.cl-rodape{font-size:var(--tam-rodape);font-weight:var(--peso-forte);line-height:1.4;color:var(--carvao)}
.cl-fio{border:0;border-top:var(--fio) solid var(--fio-cor);margin:0}
.cl-miuda{font-size:var(--tam-miuda);font-weight:var(--peso-medio);line-height:var(--entrelinha-miuda);color:var(--texto-miudo);margin:0}
.cl-preco{font-size:var(--tam-apoio);color:var(--carvao);margin:0}
.cl-preco b{font-size:var(--tam-preco);font-weight:var(--peso-forte);color:var(--oliva);letter-spacing:-0.01em}
.cl-vitrine{background:var(--fundo-vitrine)}
/* v3: o coração — UM por tela, no fim do título de abertura (colado à última palavra), só sobre papel; nunca junto do traço da Lana.
   Uso: <img class="cl-coracao" src="assets/traco/coracao.svg" alt="" aria-hidden="true"> colado à última palavra, sem espaço antes. */
.cl-coracao{display:inline-block;width:var(--coracao-largura);height:calc(var(--coracao-largura)*.894);margin-left:var(--coracao-vao);vertical-align:-.02em}
/* v3: Nº em pílula sálvia (miniatura, lista da busca) */
.cl-pilula-numero{display:inline-block;font-size:var(--tam-numero);font-weight:var(--peso-extra);letter-spacing:var(--espaco-numero);color:var(--oliva);line-height:1;background:var(--fundo-pilula);border-radius:var(--raio-pilula);padding:.42em .8em .4em}
/* v3: nome de produto composto não quebra no hífen ("guarda-roupa"): envolva a palavra com hífen neste span.
   A Nunito não tem o hífen inseparável (U+2011); não use o caractere, ele cai em outra fonte. */
.cl-sem-quebra{white-space:nowrap}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}