/* ══════════════════════════════════════════════════════════════════════════
   O card do Essenti — palco, ficha, preço, ações e âncoras.
   Extraído de `home.css` (item 6 do PLANO-VISUAL.md) para que o card viva em
   um lugar só. Carregado ANTES de `home.css`, preservando a ordem relativa
   das regras originais — a verificação é diff de pixel zero em 1440 · 1024 ·
   768 · 390 · 360.

   Medições que definiram cada número:
     palco 232px  — 26 das 65 fotos do catálogo têm proporção 0,48-0,6; num
                    palco de 168 elas renderizavam 40-80px de largura. A 232,
                    a menor sobe para ~111px sem recortar nenhuma foto.
     ações 3×64   — 256px úteis / 3 colunas de ~64 + 2 gaps de 8 = 208px.
                    Três rótulos de palavra inteira pediam 238px e não cabiam.
     toque 44px   — o alvo continua ≥44px em cada ação, com o rótulo abaixo.
   ══════════════════════════════════════════════════════════════════════════ */

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:1.25rem;align-items:stretch}
/* O card é filete, não caixa: 1px de borda, canto pequeno, sem sombra. A
   subida no hover é o mesmo gesto do `.hub-card` e do `.mini` — o card
   responde ao ponteiro como o resto da página. */
.card{position:relative;background:var(--papel);border:1px solid var(--linha);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.card:hover{border-color:var(--ouro);transform:translateY(-3px)}
/* Sem movimento para quem pediu menos movimento — mas o realce do filete
   continua, porque é ele que diz "este é o card sob o ponteiro". */
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card-selos{position:absolute;top:.7rem;left:.7rem;right:.7rem;display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem;z-index:3}
/* O selo de desconto é o único bloco com fundo sólido vinho e texto branco
   em toda a página (§6.4). */
.selo-desc{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:.76rem;font-weight:700;background:var(--vinho);color:#fff;padding:.24rem .55rem;border-radius:var(--radius-pill);white-space:nowrap}
/* A janela da série, ao lado do número. O selo dizia "−41%" e nada mais; o
   número é medido contra o maior preço que o radar registrou, e a série da
   base tem 5 dias, não 90. Aqui o "em 5 dias" entra menor e em peso normal:
   o percentual continua sendo o dado grande, a janela é a legenda dele. */
.selo-desc small{font-size:.62rem;font-weight:500;opacity:.82;margin-left:.28rem;letter-spacing:.01em}
/* `.selo-desc.vencido` saiu em 31/10: a variante `.vencido` não é escrita em
   nenhum ponto do site (medido: 0 ocorrências em HTML e JS). O selo tem um
   estado só. */

.card-corpo{padding:.95rem 1.1rem 1.1rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.card-marca{font-family:var(--font-data);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ouro-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-marca.sem-casa{color:var(--texto-terciario);font-weight:600;letter-spacing:.06em}
.tag{font-size:.7rem;font-weight:600;padding:.17rem .5rem;border-radius:var(--radius-pill);background:var(--papel-2);color:var(--texto-secundario);white-space:nowrap;flex-shrink:0}
.tag.dado{background:transparent;border:1px solid var(--linha-forte);color:var(--texto-secundario);font-weight:700;font-variant-numeric:tabular-nums}
.tag.incerto{background:var(--leitura-bg);color:var(--leitura)}

.card-preco{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--linha)}
/* O preço cheio e o por-ml dividem a linha enquanto couberem. Medido no
   celular de 2 colunas: a 390 o card tem 137px de corpo e a linha pedia 161
   (85 do preço + 12 de gap + 64 do bloco "POR ML / R$ 7,03/ml", que é
   `flex-shrink:0`). Com `overflow:hidden` no card o valor era CORTADO, não
   empurrado — 7 cards a 390 e 10 a 360. O `flex-wrap` resolve os dois casos
   sem esconder informação: quando não cabe, a medida desce alinhada à direita.
   Esconder o `/ml` foi medido e NÃO resolve — sozinho deixa 10 de 10 cortados
   a 360, porque o bloco inteiro é que não encolhe. */
.preco-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:.15rem .75rem;flex-wrap:wrap}
/* ── A VOZ DE DADO ────────────────────────────────────────────────────────
   O `DESIGN.md` declara desde o início que preço, R$/ml, ml, contadores e
   datas usam `--font-data`. O arquivo não cumpria: `var(--font-data)` aparecia
   uma única vez, no `.selo-desc`. O preço cheio e o por-ml — os dois números
   que o site inteiro existe para mostrar — estavam em Plus Jakarta Sans.
   Agora a mono carrega os dois: é a assinatura de "tudo que é dado está em
   mono" que o VENICE promete (§5.2). */
.preco-cheio{font-family:var(--font-data);font-size:1.55rem;font-weight:700;color:var(--tinta);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.preco-de{font-family:var(--font-data);font-size:.7rem;color:var(--texto-terciario);text-decoration:line-through;margin-bottom:.15rem;font-variant-numeric:tabular-nums}
/* O "de R$ X" é o máximo observado. Sem dizer em quanto tempo, ele lê como
   preço de tabela da loja — que é justamente o que o site não usa. */
.preco-de small{font-size:.62rem;text-decoration:none;opacity:.85;margin-left:.2rem}
/* `margin-left:auto` mantém a medida colada à direita também quando ela desce
   para a segunda linha do `flex-wrap`. */
.medida{text-align:right;flex-shrink:0;margin-left:auto}
.medida-rot{display:block;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--texto-terciario)}
.medida-val{font-family:var(--font-data);font-size:.98rem;font-weight:700;color:var(--ouro-texto);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.medida-val small{font-family:var(--font-data);font-size:.68rem;font-weight:600;color:var(--texto-terciario);letter-spacing:0}
.medida-val.vazio{font-family:var(--font-sans);color:var(--texto-terciario);font-weight:600;font-size:.82rem}
/* A data da conferência também é dado. O `.card-frescor` é a única frase do
   card que carrega um número que muda sozinho. */
.card-frescor{font-family:var(--font-data);font-size:.68rem;color:var(--texto-secundario);margin-top:.2rem;font-variant-numeric:tabular-nums}
.card-frescor.velho{color:var(--leitura);font-weight:600}

.card-palco{position:relative;height:232px;background:#ffffff;display:flex;align-items:center;justify-content:center;padding:1.15rem 1.4rem;border-bottom:1px solid var(--linha)}
.card-foto{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px}

/* A ficha curta: o que a pessoa lê para saber o que está comprando. Uma linha
   só, e cortada com reticências em vez de quebrar — o nome já ocupa duas. */
.card-sub{font-size:.76rem;color:var(--texto-secundario);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-.1rem}

/* As pills da ficha. Ícone + texto, agora em contorno fino — filete, não
   caixa preenchida (§4). */
.card-pills{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.1rem}
.card-pills .pill{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-data);
  font-size:.66rem;font-weight:600;letter-spacing:.01em;
  padding:.2rem .5rem .2rem .42rem;border-radius:var(--radius-pill);
  background:transparent;border:1px solid var(--linha-forte);color:var(--texto-secundario);white-space:nowrap}
.card-pills .pill svg{width:12px;height:12px;flex-shrink:0;opacity:.8}
.card-pills .pill.incerta{border-color:var(--leitura-borda);color:var(--leitura)}
.card-pills .pill.incerta svg{opacity:.7}

/* Os acordes olfativos: o perfil do perfume em três palavras, entre as pills e o
   preço. É o que o card não dizia — dava para ver o preço por ml sem saber se o
   perfume é amadeirado ou floral.

   `min-height` fixo e não `height`: sem ele, o card de um perfume com acorde
   ficaria uma linha mais alto que o do vizinho sem acorde e, como a grade é
   `align-items:stretch`, a linha inteira herdaria a altura do mais alto. Mesma
   armadilha que a terceira pill quebrando criou. 1.05rem é a altura de uma linha
   de `.72rem` com `line-height:1.45` — o card vazio ocupa exatamente o mesmo que
   o cheio.

   `overflow:hidden` + `nowrap`: acorde longo ("especiado quente") não empurra a
   linha. O `title` no contêiner guarda a lista completa. */
.card-acordes{display:flex;align-items:center;gap:.34rem;min-height:1.05rem;
  font-family:var(--font-data);font-size:.72rem;line-height:1.45;letter-spacing:.01em;
  color:var(--texto-secundario);white-space:nowrap;overflow:hidden;margin-top:-.05rem}
.card-acordes span{overflow:hidden;text-overflow:ellipsis}
.card-acordes i{font-style:normal;opacity:.45;flex-shrink:0}

/* Ações com rótulo. Cada uma é uma coluna: ícone em cima, palavra embaixo.
   O alvo é o botão inteiro, que passa de 44px de altura por causa do rótulo. */
.card-acoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.75rem}
.card-acoes .acao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
  min-height:46px;padding:.4rem .2rem;background:transparent;
  border:1px solid var(--linha);border-radius:var(--radius-md);
  color:var(--texto-secundario);cursor:pointer;font-family:inherit;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.card-acoes .acao svg{width:17px;height:17px;flex-shrink:0}
.card-acoes .acao span{font-size:.66rem;font-weight:700;line-height:1;white-space:nowrap}
.card-acoes .acao:hover{background:var(--papel-2);border-color:var(--ouro);color:var(--verde)}
.card-acoes .acao:active{transform:scale(.97)}
.card-acoes .acao[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:var(--creme)}
.card-acoes .acao[aria-pressed="true"] svg{fill:currentColor}
/* O vão quando a oferta não tem pirâmide: mesma medida, sem alvo falso. */
.card-acoes .acao.vazia{background:none;border:none;pointer-events:none}
/* A grade é de três colunas porque três é o que o card da home e o da
   listagem têm. O card da antiga `/favoritos` tinha QUATRO ações — lá existe também o
   "Avisar quando o preço cair" — e a quarta caía sozinha numa segunda linha,
   alinhada à esquerda, como sobra. Medido em 31/10/2026 no card de 260px: o
   corpo útil é 224px e quatro células de 50px cabem com os três gaps de 8.
   No celular de duas colunas o card tem ~170px e quatro colunas dariam 32px
   por alvo — abaixo do rótulo —, então lá a grade volta para 2×2. */
.card-acoes.acoes-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-acoes.acoes-4 .acao span{font-size:.62rem}

.btn-oferta{grid-column:1/-1;min-height:46px;background:var(--verde-fundo);color:var(--creme);
  font-weight:700;padding:.7rem 1rem;border-radius:var(--radius-sm);font-size:.84rem;
  text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.5rem;border:none;
  cursor:pointer;font-family:inherit;transition:background-color .2s var(--ease)}
.btn-oferta:hover{background:var(--tinta)}
.btn-oferta:active{transform:scale(.98)}
.btn-oferta svg{transition:transform .2s var(--ease)}
.btn-oferta:hover svg{transform:translateX(3px)}

@media (max-width:768px){
  .card-palco{height:168px;padding:.8rem .9rem}
  .card-acoes{gap:.3rem}
  .card-acoes .acao{min-height:44px;padding:.35rem .1rem}
  .card-acoes .acao svg{width:15px;height:15px}
  .card-acoes .acao span{font-size:.6rem}
  .card-acoes.acoes-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-acoes.acoes-4 .acao span{font-size:.62rem}
  .card-ficha{font-size:.72rem}
  .card-pills .pill{font-size:.62rem;padding:.16rem .34rem .16rem .28rem}
  .card-pills .pill svg{width:11px;height:11px}
  .card-sub{font-size:.72rem}
}


/* ══ ÂNCORAS DO CARD ═════════════════════════════════════════════════════
   Só o botão verde era clicável, então quem clicava na foto do frasco — o
   gesto mais comum numa vitrine — não recebia resposta. Agora o palco da foto
   e o nome do perfume levam para a oferta, com o destino, o `target` e o
   `rel="noopener sponsored"` do botão (a declaração de afiliado é obrigação
   de programa).

   Acessibilidade: o palco tem `tabindex="-1"` e `aria-hidden="true"`, porque
   é o MESMO destino do nome e do botão — três paradas do teclado para o mesmo
   link atrapalham quem navega por Tab. O nome carrega o link acessível, e o
   foco visível dele é o da casa. */
.card-link-palco{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  text-decoration:none;outline-offset:-3px}
.card-link-nome{font-family:var(--font-serif);font-size:1.04rem;font-weight:500;
  line-height:1.3;color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;height:2.65em;
  /* O alvo media 43px de altura — 1px abaixo do piso. Medido: o `min-height`
     custa 3px de documento nas duas larguras e não altera a contagem de
     linhas, porque o `height` em `em` já é maior que 44px. */
  min-height:44px}
.card-link-nome:hover{color:var(--ouro-texto);text-decoration:underline;text-underline-offset:3px}
/* O :focus-visible do site já desenha o contorno; no nome ele ganha um raio
   para não colar no texto. */
.card-link-nome:focus-visible{outline:2px solid var(--ouro-texto);
  outline-offset:2px;border-radius:2px}

@media (max-width:768px){
  /* Duas colunas no celular. Com 16 cards, uma coluna dá 13.400px de rolagem
     numa tela de 390 — quase o triplo do resto do site somado. Duas colunas
     cabem porque o card do celular encolhe em cada uma das suas partes: o
     palco, a fonte do nome, o preço e os botões. */
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .card-palco{height:118px;padding:.7rem .8rem}
  .card-corpo{padding:.75rem .8rem .85rem;gap:.4rem}
  .card-marca{font-size:.62rem;letter-spacing:.08em}
  .tag{font-size:.62rem;padding:.14rem .4rem}
  .card-preco{padding-top:.6rem}
  .preco-cheio{font-size:1.12rem}
  .medida-rot{font-size:.56rem}
  .medida-val{font-size:.8rem}
  .medida-val small{font-size:.6rem}
  .card-acoes{gap:.3rem}
  /* O rótulo do CTA é "Ver oferta em <loja>" e não cabia em uma linha: medido a
     390, o texto pede 123px e o botão oferece 105; a 360, 91. O `nowrap` do
     bloco de 768px cortava em "Ver oferta em Ama…". Duas linhas custam zero:
     o botão já tem 46px de altura mínima e o card não cresce. */
  .btn-oferta{font-size:.72rem;padding:.5rem .5rem;gap:.3rem;text-align:center;line-height:1.15}
  .btn-oferta span{white-space:normal;overflow:visible;text-overflow:clip}
}
@media (max-width:340px){
  .grade{grid-template-columns:1fr}
}

/* "Comparar frascos" — o único link do card que aponta para DENTRO do site.
   A imagem e o nome continuam indo para a loja com `rel="sponsored"`; este
   existe para o grafo interno e para quem quer comparar frascos, não para
   competir com o CTA comercial.

   Ele nasceu como link de texto solto entre o preço e a fileira de ações, e
   ficava órfão: uma quarta parada sem par, pendurada fora do grupo. Agora é
   uma célula do próprio `.card-acoes`, ocupando a linha inteira logo acima do
   CTA — a fileira de três botões, o link interno e o botão da loja passam a
   ler como UM bloco de ações, na ordem em que a pessoa decide (guardar, ver a
   pirâmide, comparar, comprar).

   Continua filete, não caixa: fundo transparente e 1px de contorno, para não
   disputar peso com o `.btn-oferta` preenchido logo abaixo. */
.card-ficha{
  grid-column:1/-1;
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.78rem;font-weight:700;
  color:var(--verde);
  text-decoration:none;
  background:transparent;
  border:1px solid var(--linha-forte);
  border-radius:var(--radius-sm);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
}
.card-ficha:hover{background:var(--papel-2);border-color:var(--ouro);color:var(--ouro-texto)}
.card-ficha:active{transform:scale(.98)}
.card-ficha:focus-visible{outline:2px solid var(--borda-foco);outline-offset:2px}