/* ==========================================================================
   VISUAL NOVO — camada por cima (branch visual-novo)
   --------------------------------------------------------------------------
   Este arquivo NÃO substitui o css/estilo.css: ele entra depois e vence só
   onde muda. Para voltar ao visual de hoje, apague a linha que carrega este
   arquivo nos HTMLs. Nada mais.

   A REFERÊNCIA
   ------------
   Feito a partir do site que o Pedro mandou (Primmor). O que faz aquele site
   parecer caro NÃO é minimalismo — é o contrário: site comercial completo e
   denso. Capa com foto e botão, onda emendando as seções, título de seção
   centralizado com texto, grade de 4 colunas, etiqueta sobre a foto, preço
   em negrito e botão em cada produto.

   Nas quatro tentativas anteriores eu fui deixando a página mais vazia a cada
   rodada. Era a direção contrária. Aqui a página fica MAIS cheia, não menos.

   As cores continuam as da marca. Da referência veio só a estrutura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) CAPA — O NOME EM CARTAZ E A PILHA DE FOTOS (desde 14/10/2026)
   --------------------------------------------------------------------------
   O Pedro achou a capa antiga "pobre e feia" perto do bloco das datas
   especiais (o Cartaz, css/estilo.css), e as duas precisam combinar. Ele
   escolheu esta, vendo três versões funcionando: o nome da loja enorme, na
   letra, no peso e na cor do nome da data, e as fotos numa pilha de cartões
   com a moldura de papel do Cartaz.

   A cor da capa vai até o meio da pilha (o js/capa.js mede onde: a variável
   --capa-faixa) e dali para baixo é a cor da página. É o contrário do
   Cartaz, que tem a faixa embaixo das fotos: um rima com o outro.

   O texto continua sobre a cor lisa da capa, nunca sobre a foto: fica
   legível com qualquer foto que a dona subir.

   Os cartões têm proporção FIXA (4:5, em pé, a mesma das cestinhas da
   grade). É isso que deixa o painel mostrar à dona exatamente o que vai
   aparecer (js/admin.js, CAPA_PROPORCOES).

   O que se mexe (a chegada, a troca, o dedo) está no js/capa.js. Sem o
   JavaScript, o texto aparece inteiro e a pilha não aparece.
   -------------------------------------------------------------------------- */

.capa {
  --capa-curva: cubic-bezier(.22, 1, .36, 1);   /* a mesma do Cartaz: sai rápido e pousa devagar */
  --capa-fio: color-mix(in srgb, var(--cor-texto) 30%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 0 14px;
  background: linear-gradient(var(--cor-capa) 0 var(--capa-faixa, 100%), var(--cor-fundo) 0);
}

.capa__grade {
  display: grid;
  justify-items: center;
  gap: 36px;
  text-align: center;
}
.capa__grade > * { min-width: 0; }

.capa__texto {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}

.capa__olho {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cor-primaria-escura);
}

/* O nome da loja é o cartaz. Na fonte Delicada o css/temas.css põe peso
   700, como no Cartaz. Nome comprido demais para a tela: o js/capa.js
   diminui a letra até a palavra maior caber. */
.capa #titulo-loja {
  max-width: 100%;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(3.4rem, 19vw, 6rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--cor-primaria-escura);
  text-wrap: balance;
}
/* Cada palavra numa janela: na chegada ela sobe de dentro dela. A folga em
   volta guarda o acento de cima e a perna de baixo do "g". */
.capa__palavra {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: .12em .03em .16em;
  margin: -.12em -.03em -.16em;
}
.capa__palavra > span { display: inline-block; }

.capa #frase-vitrine {
  max-width: 34ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cor-texto);
  text-wrap: balance;
}

.capa__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 28px;
  margin-top: 6px;
}
.capa__botao {
  min-height: 48px;
  padding: 13px 30px;
}
/* "Ver as cestinhas": texto com o traço da primária embaixo (o mesmo do
   prazo do Cartaz), não um segundo botão disputando com o do WhatsApp. */
.capa__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cor-texto);
  font-weight: 600;
  text-decoration: none;
}
.capa__link span {
  padding-bottom: 3px;
  background: linear-gradient(var(--cor-primaria), var(--cor-primaria)) no-repeat 50% 100% / 100% 2px;
  transition: color .3s ease;
}
.capa__link:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .capa__link:hover span { color: var(--cor-primaria-escura); }
}
/* No celular: o botão na largura toda (até 300 px) e o link embaixo dele. */
@media (max-width: 559px) {
  .capa__acoes { flex-direction: column; gap: 4px; width: 100%; }
  .capa__botao { width: min(100%, 300px); }
}

/* ---------- a pilha ---------- */

.capa__vitrine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
}

/* isolation: o z-index dos cartões fica preso dentro da moldura e não passa
   por cima do texto. */
.capa__fotos {
  position: relative;
  isolation: isolate;
  width: min(66vw, 290px);
  aspect-ratio: 4 / 5;
}
.capa__quadro {
  position: absolute;
  inset: 0;
  transition: transform .9s var(--capa-curva);
  touch-action: pan-y;              /* de cima para baixo é a página; de lado, as fotos */
  -webkit-user-select: none;
  user-select: none;
}
.capa__quadro--varias { cursor: grab; }
.capa__quadro--varias:active { cursor: grabbing; }

/* Cada foto é um cartão com a moldura de papel do Cartaz. O lugar na pilha
   ("transform") e quem fica na frente ("z-index") vêm do js/capa.js. */
.capa__carta {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--raio-p);
  background: var(--cor-primaria-suave);
  box-shadow: 0 0 0 5px var(--cor-fundo), 0 24px 40px -28px rgba(0, 0, 0, .45);
  transition: transform .9s var(--capa-curva), opacity .6s ease;
  will-change: transform;
}
.capa__carta--longe { opacity: 0; }   /* da quarta foto em diante: escondida atrás da terceira */
.capa__carta--arrasta { transition: none; }
.capa__carta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;         /* sem ponto marcado, o meio: o mesmo que a caixinha do painel mostra */
  -webkit-user-drag: none;
}

/* Os traços: um por foto, o da vez enche no tempo da foto (é o relógio da
   troca). Cada traço é um botão de 24 px de altura com a linha no meio. */
.capa__passos {
  display: flex;
  justify-content: center;
  gap: 2px;
}
.capa__passo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.capa__passo > span {
  display: block;
  width: 26px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cor-texto) 18%, transparent);
}
.capa__passo i {
  display: block;
  height: 100%;
  background: var(--cor-primaria-escura);
  transform: scaleX(0);
  transform-origin: left center;
}
.capa__passo--feito i,
.capa__passo--vez i { transform: scaleX(1); }
.capa--rodando .capa__passo--vez i { animation: capa-enche var(--capa-tempo, 7s) linear both; }
.capa--espera .capa__passo--vez i { animation-play-state: paused; }
@keyframes capa-enche {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.capa__passo:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: -2px; border-radius: 6px; }

/* A tecla de pausar: a do Cartaz. */
.capa__tecla {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--capa-fio);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .2s ease;
}
.capa__tecla svg { width: 14px; height: 14px; }
.capa__tecla:active { transform: scale(.94); }
.capa__tecla:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .capa__tecla:hover { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); }
}
.capa__pausa-toca { display: none; }
.capa__pausa[data-parada] .capa__pausa-pausa { display: none; }
.capa__pausa[data-parada] .capa__pausa-toca { display: block; }

.capa__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.capa__controles [data-capa-pausa] { order: 2; }   /* no HTML a pausa vem antes (teclado, W3C APG); na tela, depois dos traços */
/* Uma foto só: sem traços nem pausa, e o lugar deles não ocupa espaço. */
[data-capa-passos]:empty,
[data-capa-pausa]:empty,
.capa__controles:not(:has(button)) { display: none; }

@media (min-width: 900px) {
  .capa { padding: 56px 0 28px; }
  .capa__grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    justify-items: stretch;
    gap: 56px;
    text-align: left;
  }
  .capa__texto { justify-items: start; gap: 20px; }
  .capa #titulo-loja { font-size: clamp(5rem, 9vw, 8rem); }
  .capa__acoes { justify-content: flex-start; }
  .capa__fotos { width: min(28vw, 340px); }
}

/* SEM FOTO NENHUMA (nem da capa, nem de cestinha): a pilha some e o nome
   fica sozinho no meio, como um cartaz, na cor da capa até o fim. A pilha
   também fica vazia se o JavaScript não carregar. */
.capa:not(:has(.capa__carta)) { padding: 48px 0 56px; }
.capa:not(:has(.capa__carta)) .capa__vitrine { display: none; }
@media (min-width: 900px) {
  .capa:not(:has(.capa__carta)) { padding: 80px 0 88px; }
  .capa:not(:has(.capa__carta)) .capa__grade { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .capa:not(:has(.capa__carta)) .capa__texto { justify-items: center; }
  .capa:not(:has(.capa__carta)) .capa__acoes { justify-content: center; }
}

/* ---------- a chegada (uma vez) ----------
   O js/capa.js liga o "capa--anima" logo ao carregar (só com movimento
   liberado), o "capa--entrou" quando a letra chegou, e tira os dois quando
   a chegada acaba: daí em diante valem só as regras de cima. */

.capa--anima .capa__palavra > span { transform: translate3d(0, 112%, 0); }
/* Animação (e não transição): o js/vitrine.js pinta o nome de novo quando os
   dados chegam, e as palavras refeitas no meio da chegada continuam de onde
   estavam (--capa-ja é o tempo que já passou, negativo). */
.capa--anima.capa--entrou .capa__palavra > span {
  transform: none;
  animation: capa-palavra 1.1s var(--capa-curva) calc(var(--w, 0) * 90ms + 120ms + var(--capa-ja, 0ms)) both;
}
@keyframes capa-palavra {
  from { transform: translate3d(0, 112%, 0); }
  to { transform: none; }
}
.capa--anima :is(.capa__olho, #frase-vitrine, .capa__acoes, .capa__controles) { opacity: 0; }
.capa--anima.capa--entrou :is(.capa__olho, #frase-vitrine, .capa__acoes, .capa__controles) {
  opacity: 1;
  transition: opacity .9s ease var(--capa-atraso, 0ms);
}
.capa__olho { --capa-atraso: 0ms; }
.capa #frase-vitrine { --capa-atraso: 450ms; }
.capa__acoes { --capa-atraso: 600ms; }
.capa__controles { --capa-atraso: 800ms; }
/* O traço de "Ver as cestinhas" cresce do meio para os lados. */
.capa--anima .capa__link span { background-size: 0% 2px; }
.capa--anima.capa--entrou .capa__link span {
  background-size: 100% 2px;
  transition: background-size 1s var(--capa-curva) 1000ms, color .3s ease;
}
/* Cada cartão abre de baixo para cima, o da frente primeiro. A janela vai
   além do cartão para não cortar a moldura e a sombra. Quem fecha e abre é
   o js/capa.js: as fotos podem chegar do banco depois da chegada. */
.capa__quadro--fechado .capa__carta { clip-path: inset(calc(100% + 60px) -60px -60px -60px round var(--raio-p)); }
.capa__quadro--abrindo .capa__carta {
  clip-path: inset(-60px round var(--raio-p));
  transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1) calc(var(--c, 0) * 160ms + 250ms), transform .9s var(--capa-curva), opacity .6s ease;
}

/* ---------- reduzir movimento (ou o nível 0 do seletor) ---------- */
.capa--quieto :is(.capa__quadro, .capa__carta, .capa__carta img, .capa__link span) { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .capa :is(.capa__quadro, .capa__carta, .capa__carta img, .capa__link span, .capa__tecla) { transition: none !important; animation: none !important; }
  .capa__tecla:active { transform: none; }
}

/* --------------------------------------------------------------------------
   2) TÍTULO DE SEÇÃO
   -------------------------------------------------------------------------- */

.secao {
  text-align: center;
  padding: 40px 0 24px;
  /* O botão "Ver as cestinhas" da capa pula para cá; sem isto o cabeçalho
     fixo cobriria o título. */
  scroll-margin-top: 72px;
}
/* O js/anim.js dá foco ao título depois do pulo, para o Tab continuar dali.
   O foco num bloco de texto não precisa de moldura: não é clicável. */
.secao:focus { outline: none; }

.secao__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  line-height: 1.15;
  color: var(--cor-texto);
}

.secao__texto {
  margin: 12px auto 0;
  max-width: 58ch;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

/* --------------------------------------------------------------------------
   3) GRADE E CARDS
   -------------------------------------------------------------------------- */

.grade {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
  padding-bottom: 56px;
}

@media (min-width: 700px)  { .grade { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .grade { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.cartao {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.cartao:hover {
  box-shadow: var(--sombra-forte);
  transform: translateY(-3px);
}

/* A PROPORCAO VOLTOU PARA 4/5.
   Eu tinha posto 1/1 copiando a referencia, e o Pedro apontou o efeito
   colateral olhando o resultado: quadrado corta a cestinha em cima e
   embaixo, e a foto e justamente o que vende o produto. A referencia vende
   caneca e mochila, que cabem num quadrado; cestinha e alta. */
.cartao__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0;
}

.cartao__foto img { transition: transform .5s ease; }
.cartao:hover .cartao__foto img { transform: scale(1.05); }

.cartao__corpo {
  padding: 14px 14px 16px;
  gap: 4px;
  text-align: left;
}

.cartao__nome {
  font-size: 1rem;
  line-height: 1.28;
  color: var(--cor-texto);
}

.cartao__preco {
  margin-top: 2px;
  padding-top: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cor-texto);
}

.cartao__preco small {
  text-transform: none;
  letter-spacing: 0;
  font-size: .74rem;
  font-weight: 400;
}

/* Cestinha ainda sem foto: numa grade densa o quadrado bege inteiro fica
   pesado, então o ícone encolhe. */
.foto-vazia { background-size: 46%; }

@media (prefers-reduced-motion: reduce) {
  .cartao,
  .cartao__foto img,
  .cartao:hover { transform: none; }
  .cartao:hover .cartao__foto img { transform: none; }
}

/* --------------------------------------------------------------------------
   4) SELETOR DE MOVIMENTO — só aparece em localhost
   --------------------------------------------------------------------------
   O js/anim.js confere o endereço antes de criar isto. No site publicado
   ele não existe.
   -------------------------------------------------------------------------- */

#seletor-mov {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(20, 30, 24, .93);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  font-size: .78rem;
}
/* Nas páginas com a barra fixa do WhatsApp ele ficava EM CIMA do botão de
   pedir. Como a dona testa no localhost, ela via a barra de teste no lugar do
   botão dela. Sobe a altura da barra (~72px) e os dois cabem.
   Só no celular: no computador a barra fixa não existe (some em 900px). */
@media (max-width: 899px) {
  .com-barra-fixa #seletor-mov { bottom: 88px; }
}

#seletor-mov span { color: #c5cfc6; padding: 0 6px; }
#seletor-mov button {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  min-height: 40px;
  font-family: inherit;
  font-size: .78rem;
  color: #f5f6f1;
  background: transparent;
  cursor: pointer;
}
#seletor-mov button[aria-current="true"] { background: var(--cor-primaria-escura); }

/* ==========================================================================
   5) ACABAMENTO
   --------------------------------------------------------------------------
   Detalhes que ninguém nota quando estão lá e todo mundo sente quando faltam.
   ========================================================================== */

/* --- Texto que quebra bonito -------------------------------------------
   O navegador quebra linha na primeira que couber, e sobra uma palavra
   sozinha na última — a "viúva". O text-wrap: balance reequilibra as linhas
   de um título. Só vale para textos curtos, por isso não vai nos parágrafos
   longos, que usam "pretty" (só cuida da última linha). */
h1, h2, h3,
.secao__titulo,
.cartao__nome,
.capa #titulo-loja { text-wrap: balance; }

.secao__texto { text-wrap: pretty; }

/* Nome de cestinha muito comprido não pode furar o card. */
.cartao__nome { overflow-wrap: anywhere; }

/* Fraunces muda o desenho conforme o tamanho (eixo óptico). Deixar
   automático faz o título grande ter serifa mais fina e o texto pequeno mais
   robusta — que é como uma fonte de livro se comporta. */
.capa #titulo-loja,
.secao__titulo,
.cartao__nome { font-optical-sizing: auto; }

/* --- Toque no celular ---------------------------------------------------
   99% das clientes abrem pelo celular, e lá não existe "hover": o cartão
   nunca ganha o realce que ele tem no computador. Em compensação o Android
   pinta um retângulo cinza por cima do card a cada toque. Aqui a gente troca
   esse retângulo por uma resposta de verdade. */
:root { -webkit-tap-highlight-color: transparent; }

.cartao:active { transform: scale(.985); }
.botao:active { transform: scale(.98); }

/* --- Foco de teclado ----------------------------------------------------
   Quem navega por Tab precisa ver onde está. O anel segue a cor da marca e
   ganha um respiro para não encostar no conteúdo. */
.cartao:focus-visible,
.botao:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* --- Seleção de texto na cor da marca ---------------------------------- */
::selection { background: var(--cor-primaria-suave); color: var(--cor-texto); }

/* --- Barra de rolagem discreta (só onde o navegador aceita) ------------- */
html { scrollbar-color: var(--cor-primaria) var(--cor-fundo); scrollbar-width: thin; }

/* --- Esqueleto no formato do card novo ---------------------------------
   Enquanto o banco responde, o lugar da cestinha tem que ter a MESMA forma
   do card que vai chegar. Se a forma muda, a página "pula" na cara da
   cliente — e pulo de layout é a coisa que mais faz um site parecer barato. */
.cartao-esqueleto {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.cartao-esqueleto .cartao__foto { aspect-ratio: 1 / 1; }

/* --- Mais contraste para quem pede ------------------------------------- */
@media (prefers-contrast: more) {
  .cartao { border-color: var(--cor-texto-suave); }
}

/* ==========================================================================
   6) CABEÇALHO QUE REAGE À ROLAGEM
   --------------------------------------------------------------------------
   No topo da vitrine ele tem a mesma cor da capa: os dois parecem um bloco
   só. Assim que a pessoa rola, ele ganha fundo branco translúcido e a linha
   embaixo. O js/anim.js liga a classe "rolou" quando a capa sai da tela.

   SE O JAVASCRIPT FALHAR: o cabeçalho fica na cor da capa e o site continua
   igual. Nada quebra — só deixa de ter o efeito.
   ========================================================================== */

body:has(.capa) .cabecalho {
  background: var(--cor-capa);
  border-bottom-color: transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

body:has(.capa) .cabecalho.rolou {
  background: var(--cor-superficie);
  background: color-mix(in srgb, var(--cor-superficie) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom-color: var(--cor-borda);
}

@media (prefers-reduced-motion: reduce) {
  body:has(.capa) .cabecalho { transition: none; }
}

/* --- Botões alinhados na fileira ---------------------------------------
   Uma cestinha com variações mostra "a partir de" e ganha uma linha a mais
   que as outras. Sem isto, o botão dela desce e a fileira fica com os
   botões em alturas diferentes — o tipo de desalinho que ninguém sabe
   nomear mas todo mundo sente. O "auto" empurra o botão para o rodapé do
   card, e como os cards da fileira têm a mesma altura, todos batem. */
/* A grade estica o <li>, mas o link do card fica com a altura do proprio
   conteudo. Sem esta linha o "margin-top: auto" nao tem folga para empurrar
   nada, porque o card nao chega ate o fim da linha. */
.grade > li { display: flex; }
.cartao { display: flex; flex-direction: column; flex: 1; }
.cartao__corpo { display: flex; flex-direction: column; flex: 1; }

/* ==========================================================================
   7) TRÊS AJUSTES PEDIDOS OLHANDO A TELA
   ========================================================================== */

/* --- O item ativo do menu sobre a capa ----------------------------------
   A pílula da página atual é verde-clara, quase a cor da capa: sobre ela
   sumia. Enquanto o cabeçalho está na cor da capa, a pílula (e o realce do
   mouse) fica branca. Quando a pessoa rola, volta a verde-clara. */
body:has(.capa) .cabecalho:not(.rolou) .menu a[aria-current="page"],
body:has(.capa) .cabecalho:not(.rolou) .menu a:hover {
  background: var(--cor-superficie);
}

/* --- Preço com destaque -------------------------------------------------
   O verde escuro da marca sobre o branco do card: 10:1 pela conta, muito
   acima do mínimo para texto pequeno (4,5:1). Mesma cor dos botões — a
   loja tem uma cor só. */
.cartao__preco { color: var(--cor-primaria-escura); }

/* --- Botão discreto -----------------------------------------------------
   Sem o retângulo cheio, que poluía. Um fio separa a ação do preço e o
   texto fica em verde. A altura de 44px é o alvo de toque: no celular
   ninguém acerta menos que isso com o polegar. */
.cartao__acao {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding-top: 11px;
  min-height: 44px;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-primaria-escura);
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  font-weight: 700;
  transition: color .18s ease;
}

.cartao:hover .cartao__acao,
.cartao:active .cartao__acao { color: var(--cor-texto); }

/* Empurra a ação para o rodapé do card, para todas as fileiras baterem. */
.grade > li { display: flex; }
.cartao { display: flex; flex-direction: column; flex: 1; }
.cartao__corpo { display: flex; flex-direction: column; flex: 1; }
.cartao__acao { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .cartao__acao { transition: none; }
}