/* ============================================================
   QivoN - tema do site (gerado por catalogo-sync/gen_tema.py
   - NAO editar a mao)

   Etapa 1 da reforma visual, aprovada em 16/10/2026.
   ============================================================ */

/* ------------------------------------------------------------
   1. A PALETA.

   Sobrescreve o :root que cada pagina ja declara. NAO precisa de
   !important: o :root inline esta no inicio do documento e esta
   folha e carregada depois -- conferido, nenhum <style> posterior
   redefine variavel.

   --teal era #1fb7b4, que da 2,47:1 sobre branco e REPROVA o piso
   de 4,5. Ele e texto em 44 lugares e fundo em 56. O valor novo
   da 6,10:1 nos dois sentidos.

   --g600 (#666) NAO entra aqui de proposito: reprova em 6
   elementos e passa em 512.

   --black TAMBEM NAO ENTRA, e isso foi MEDIDO E DESFEITO em
   16/10/2026. A proposta era #15171A, um preto levemente frio
   para casar com o fundo das fotos do dono. Aplicado, o medidor
   acusou: #666 sobre #141414 da 3,21:1 e sobre #15171A da
   3,13:1 -- os dois reprovam, mas o valor novo PIORA 44
   elementos. A diferenca visual entre os dois pretos e
   imperceptivel; a piora e mensuravel. Trocar seria pagar com
   legibilidade por uma sofisticacao que ninguem enxerga.
   ------------------------------------------------------------ */
:root{
  --teal:#63615F;
  --teal-d:#474644;
  --teal-l:#F4F0E8;
  --teal-m:rgba(99,97,95,.10);
  --teal-dk:#8D8B86;
  --g100:#F7F6F4;
  --border:#E4E1DB;
  --shadow-md:0 1px 3px rgba(20,20,20,.07);
}

/* ------------------------------------------------------------
   2. A SERIFADA, so em titulo.

   Carregada na MESMA URL do Barlow, entao custa ZERO requisicao
   nova -- so alguns KB de fonte.

   O !important aqui E medido: `.page-hero h1` e redefinido por um
   <style> posterior ao link em 3 das 6 paginas de card, entao a
   ordem natural nao basta.

   Nome de produto, botao, formulario e modal continuam em Barlow:
   serifada em corpo pequeno atrapalha a varredura, e modal e
   interface, nao editorial.

   `.sobre-h2` e o titulo de secao das 7 institucionais, e esta aqui
   pelo mesmo motivo que `.cat-grid-title`: a FAMILIA mora num lugar
   so. O tamanho e o espaco delas ficam no css/institucional.css --
   declarar a familia nos dois arquivos criaria duas para manter, e a
   segunda envelhece sem ninguem notar.

   `.sr-hero h1` entrou em 16/10/2026, e a ausencia dele era MUDA:
   a busca e a unica pagina cujo heroi tem classe propria, entao o
   titulo dela ficou em Barlow enquanto as outras 16 viraram
   serifada. Nada quebra, nada avisa -- a pagina fica so com outra
   cara. Foi o navegador que disse ("sem titulo alvo" nas 17), nao a
   leitura do arquivo: quem le o CSS ve um seletor plausivel e nao
   sabe quais paginas ele NAO alcanca.
   ------------------------------------------------------------ */
.page-hero h1,
.sr-hero h1,
.cat-grid-title,
.enc-cat-hdr h2,
.sobre-h2,
/* `.sb-h` sao os titulos das quatro bandas da pagina Sobre, criados
   pelo gen_sobre.py em 17/10/2026 -- e esquecidos aqui na primeira
   vez. Os quatro sairam em Barlow enquanto o resto da pagina estava
   em serifada: nada quebra, nada vai ao console, a pagina so fica
   com outra cara.

   E o mesmo caso de `.sr-hero h1` logo acima, repetido tres linhas
   abaixo dele. Seletor de titulo novo nao entra sozinho numa lista
   escrita a mao -- e a varredura do testar_tema.py nao o cobria
   porque ela procura HEROI com <h1> dentro, e banda nao e heroi. */
.sb-h,
.qv-hero-h,
.qv-band-h,
.qv-sec-h,
.hero-new-h {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
  /* ALGARISMO ALINHADO, NAO O ANTIGO.
     A Cormorant Garamond traz algarismos de TEXTO (oldstyle) por padrao:
     o 9 e o 5 descem abaixo da linha de base e o 2 fica da altura do x.
     Em "Prata 925" -- o titulo do heroi da home -- isso le como defeito
     de renderizacao; foi assim que o dono descreveu, "esquisito".
     `lining-nums` pede a variante alinhada, que a fonte tem; o
     `font-feature-settings` e o mesmo pedido para quem nao entende a
     propriedade alta. Vale para TODO titulo serifado, nao so o heroi:
     corrigir um lugar deixaria "925" com dois desenhos no mesmo site. */
  font-variant-numeric: lining-nums !important;
  font-feature-settings: 'lnum' 1 !important;
}

/* ------------------------------------------------------------
   3. O card, sem o mobiliario de desconto (de 15/10/2026).

   !important porque o estilo de `.pcard-off` e `.pc2-off` esta
   INLINE no proprio dado, dentro dos data/*.js.

   SAO DOIS SISTEMAS DE CARD, e o segundo e a home:
     .pcard-*  catalogo, masculinas, femininas, pronta-entrega, busca
     .pc2-*    a home (js/index_catalogo.js)
   Cobrir so o primeiro deixaria o balao na primeira pagina que
   todo visitante ve.

   ------------------------------------------------------------ */
.pcard-off,
.pc2-off { display: none !important; }

/* ------------------------------------------------------------
   3b. O SELO MARCA A EXCECAO, NAO O NORMAL.

   A versao de 15/10/2026 escondia `.pcard-badge` inteiro, com a
   justificativa de que `.pcard-cat` ja dizia a mesma coisa logo
   abaixo. Medido no navegador em 16/10/2026, a justificativa vale
   numa pagina so:

     catalogo         .pcard-cat "Prata 925 · Pronta Entrega"
                      selo "Pronta Entrega" x16 -> redundante mesmo
     pronta-entrega   .pcard-cat "KITS · PRATA 925" (sem entrega)
                      selo "SEM ESTOQUE" x2 e "ULTIMAS UNIDADES" x13
     home             .pc2-cat "Corrente · Prata 925" (sem entrega)
                      selo "Encomenda" x7, "Em estoque" x3, "Kit" x2

   Ou seja: aquele `display:none` apagou QUINZE avisos de escassez,
   dois deles dizendo que a peca esta fora de estoque, numa pagina
   onde nada mais diz isso. Peca sem estoque com cara de disponivel
   vende, e o cliente descobre depois de pagar. Nunca chegou ao ar --
   a leva de 15/10 nao subiu.

   E `.pc2-badge` EXISTE: sao 12 na home, criados em tempo de
   execucao pelo js/index_catalogo.js. Este comentario afirmava o
   contrario, e era o que mantinha a home fora da decisao.

   A regra passa a ser por VARIANTE, e o principio e um so: some o
   selo que repete o estado normal; fica o que avisa da excecao.
   ------------------------------------------------------------ */
.pcard-badge.ok,
.pcard-badge.pe,
.pc2-badge.ok,
.pc2-badge.kit { display: none !important; }

/* O que fica, discreto -- que foi a escolha do dono em 15/10
   ("ficam, mas discretos"), nao "somem". Sem preenchimento solido
   sobre a foto: letra escura sobre branco levemente opaco, que le
   como etiqueta e nao como adesivo de promocao. */
.pcard-badge.low,
.pc2-badge.enc,
.pc2-badge.low {
  background: rgba(255, 255, 255, .92) !important;
  color: #141414 !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  border: 1px solid rgba(20, 20, 20, .10) !important;
}

/* ------------------------------------------------------------
   5. O ACENTO SOBRE FUNDO ESCURO.

   Este arquivo ja previa isto e nao fez: "a conclusao disso
   precisa de um token de acento para fundo escuro -- o --teal da
   3,02:1 sobre o rodape #141414 e some. Nao inventar esse token
   numa folha de etapa, seriam duas definicoes de acento."

   A etapa trocou a paleta e o token nao veio junto. Medido no
   navegador em 17/10/2026, 8 paginas: 8 elementos VISIVEIS
   reprovando, e o pior era `.hnav-link.act` -- o item de menu da
   PAGINA ATUAL, em 4 paginas. Na pagina em que o visitante esta,
   o nome dela era o mais dificil de ler da barra.

   Por que um token novo e nao um valor por regra: `--teal` tem de
   continuar escuro, porque 90% do site e claro e la ele precisa
   passar CONTRA branco. Os dois requisitos sao opostos e nenhuma
   cor serve aos dois -- e dai o par.

   --teal-dk NAO e uma segunda definicao de acento. E o mesmo
   acento noutro fundo, e por isso nasce aqui, junto do primeiro,
   em vez de numa folha de etapa.

   Calibrado pelo fundo escuro MAIS CLARO do site (#201f1f), que e
   o caso dificil -- calibrar pelo #0d0d0d daria um tom que
   reprova nos outros:

       #8D8B86 sobre #201f1f = 4,83:1
                sobre #141414 = 5,41:1
                sobre #0d0d0d = 5,71:1

   ELE NAO SERVE NO CLARO: da 3,40:1 sobre branco. Fundo escuro so
   -- usa-lo numa superficie clara troca um defeito por outro.
   ------------------------------------------------------------ */
.atacado-badge,
.atacado-min,
.cat-hero-tag { color: var(--teal-dk, #8D8B86); }

/* O !important aqui E MEDIDO, como o de `.page-hero h1` logo acima.
   Sem ele a regra foi escrita, foi parseada, e NAO valeu: o
   `<style>` embutido declara `.hnav-link.act{color:var(--teal)}`
   com a MESMA especificidade (0,2,0) e vem depois do <link>. A
   primeira medicao depois de aplicar continuou acusando 2,99:1 com
   a regra presente no arquivo -- empate de especificidade se
   decide por ordem, e a ordem aqui nao e a que eu supus. */
.hnav-link.act,
.hnav-link.active { color: var(--teal-dk, #8D8B86) !important; }

/* O "menos" do titulo do atacado, que e `<em>` dentro de secao
   escura. Escopado para nao alcancar `<em>` de texto corrido nas
   paginas claras, onde --teal-dk sumiria. */
.atacado-sec em,
.cat-hero em { color: var(--teal-dk, #8D8B86); }

/* O BOTAO DO WHATSAPP NAO SE CONSERTA AQUI, e a tentativa fica
   registrada porque ela quase entrou.

   Branco sobre #25d366 da 1,98:1 em 8 paginas -- a pior medicao do
   site. A correcao obvia era `a[href*="wa.me"]{color:#141414}`.
   Medido antes de escrever: ha link de WhatsApp em QUATRO fundos
   diferentes.

       #25d366  branco  1,98:1  <- o unico que precisa mudar
       #141414  branco  ok      <- o rodape; letra escura some
       #63615F  branco  6,17:1  <- ja passa; letra escura da 2,4:1
       #ffffff  branco  --      <- `.pc2-btn-wa`, oculto ate o hover

   A regra teria consertado um e quebrado tres, inclusive apagando
   o link do rodape -- o mesmo defeito que esta etapa existe para
   corrigir, invertido.

   E seletor nao resolve: `.sobre-cta` aparece sobre o verde E
   sobre o acento, dois elementos com a mesma classe. A condicao
   real e "o fundo DESTE elemento e o verde", e CSS nao sabe
   perguntar isso.

   Quem faz e `gen_wpp_contraste.py`, que troca o PAR
   `background:#25D366;color:#fff` -- o par e a condicao. */