*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }

ul { list-style: none; }

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

html { scroll-behavior: smooth; }

body {
  background: var(--cr-brown);
  color: var(--cr-cream);
  font-family: var(--fonte-sans);
  /* 400, não 300: peso claro sobre fundo escuro perde corpo e some. */
  font-weight: var(--peso-normal);
  font-size: var(--t-base);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* Todo display herda a mesma receita: expandido, leve, entrelinha curta.
   É o que amarra os títulos ao wordmark. */
.hero__titulo,
.secao__titulo,
.cta-final__titulo {
  font-weight: var(--peso-leve);
  font-stretch: var(--largura-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--esp-md);
}

.secao { padding: var(--esp-xl) 0; }

.secao__titulo {
  font-size: var(--t-2xl);
  line-height: var(--lh-titulo);
  margin-bottom: var(--esp-sm);
}

/* Ênfase serifada dourada. A serifa tem contraste de traço muito maior que
   o grotesco ao redor, então a palavra salta — que é o efeito pedido.

   font-stretch: normal é obrigatório aqui: o display herda 116% e a Georgia
   não tem eixo de largura, então o navegador sintetizaria a expansão e
   deformaria a letra. */
.enfase {
  font-family: var(--fonte-serif);
  font-style: italic;
  font-weight: var(--peso-normal);
  font-stretch: normal;
  letter-spacing: 0;
  color: var(--cr-gold);
}

/* Rótulo tracked. Um papel só, e usado uma vez na página: a linha de
   apoio do hero. Como escada acima de cada seção, vira andaime. */
.rotulo {
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  /* creme-70, não creme-50: a 12px o 50% dá 3.41:1 contra o marrom e
     reprova em AA. Medido, não estimado. */
  color: var(--cr-cream-70);
}

/* Cabeçalho */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
  padding: var(--esp-sm) var(--esp-md);
  background: var(--cr-brown);
  border-bottom: 1px solid var(--cr-cream-10);
}

/* O wordmark agora é o logo de verdade, vetorizado do arquivo da marca.
   O texto "CRIVÊ" continua na marcação — o desenho entra por máscara CSS,
   não por <img>, para herdar a cor de quem usa (creme no topo, creme-50 no
   rodapé) sem um arquivo por cor e sem custo de requisição extra por peso.

   O fallback é o que existia antes: Archivo expandido com tracking largo,
   que chega perto do desenho. Vale para navegador sem máscara e para o
   intervalo antes do SVG chegar. */
.wordmark {
  font-size: 1.125rem;
  font-weight: var(--peso-leve);
  font-stretch: var(--largura-display);
  letter-spacing: var(--ls-wordmark);
  /* O tracking abre espaço à direita da última letra; compensa para o
     bloco ficar opticamente alinhado. */
  margin-right: calc(var(--ls-wordmark) * -1);
  color: var(--cr-cream);
  line-height: 1;
}
.rodape .wordmark { font-size: 1rem; color: var(--cr-cream-50); }

/* A altura é a única medida que se ajusta; a largura sai dela pela proporção
   do desenho (viewBox 275.5 × 100 = 2.755), para o logo nunca distorcer. */
@supports (mask-image: url(m.svg)) or (-webkit-mask-image: url(m.svg)) {
  .wordmark {
    --wordmark-altura: 20px;
    display: block;
    width: calc(var(--wordmark-altura) * 2.755);
    height: var(--wordmark-altura);
    margin-right: 0;
    /* Some com o texto sem tirá-lo da árvore de acessibilidade: leitor de
       tela e busca continuam lendo CRIVÊ. */
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: url('../assets/logo-crive.svg') no-repeat center / contain;
    mask: url('../assets/logo-crive.svg') no-repeat center / contain;
  }
  .rodape .wordmark { --wordmark-altura: 17px; }
}

/* Botão de menu. Some em tela larga, onde a navegação já está à mostra. */
.menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.menu-botao__traco {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cr-cream);
}

.cabecalho__nav { display: flex; gap: var(--esp-md); }

.cabecalho__nav a {
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-rotulo);
  color: var(--cr-cream-70);
}

/* Acessibilidade */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cr-cream);
  color: var(--cr-brown);
  padding: var(--esp-xs) var(--esp-sm);
  z-index: 100;
}
.pular-para-conteudo:focus { left: var(--esp-sm); top: var(--esp-sm); }

:focus-visible { outline: 2px solid var(--cr-gold); outline-offset: 3px; }

/* Botões */
.botao {
  display: inline-block;
  border: 0;
  border-radius: var(--raio-pill);
  padding: 12px 26px;
  font-family: var(--fonte-sans);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: pointer;
}
.botao--claro { background: var(--cr-cream); color: var(--cr-brown); }
/* Ocupa a largura da coluna. No celular isso dá um alvo de toque enorme,
   difícil de errar com o polegar. */
.botao--bloco {
  display: block;
  width: 100%;
  padding: 18px 26px;
  font-size: var(--t-base);
  text-align: center;
}
.botao--escuro { background: var(--cr-brown); color: var(--cr-cream); }
.botao--grande { padding: 18px 40px; font-size: var(--t-base); }
.botao--vazado { background: transparent; color: var(--cr-cream); border: 1px solid var(--cr-cream-20); }

/* Hero */
.hero {
  position: relative;
  padding: var(--esp-xl) 0;
  overflow: hidden;
}

/* Brilho dourado difuso no canto superior direito */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.28), transparent 65%);
  pointer-events: none;
}

/* Texto à esquerda, barra de quedas de preço à direita. A colagem
   decorativa que ocupava esse espaço antes não volta: ali os preços eram
   enfeite, e aqui cada número é um link para a oferta de verdade.

   A coluna de texto mantém os mesmos 620px de medida de quando era coluna
   única — a barra entra no espaço que sobrava, não no dela. */
.hero__grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
  gap: var(--esp-lg);
  padding-top: var(--esp-lg);
  padding-bottom: var(--esp-lg);
}

/* 1080px, não 900: abaixo disso as duas colunas espremem o título do hero
   a ponto de "Sem horas de pesquisa." quebrar em três linhas. */
@media (min-width: 1080px) {
  .hero__grade {
    grid-template-columns: minmax(0, 620px) minmax(300px, 360px);
    justify-content: space-between;
    align-items: start;
    gap: var(--esp-lg);
  }
}

/* Barra de maiores quedas de preço.

   Painel, e não cards soltos: são cinco linhas densas de número, e sem
   uma moldura em volta elas competem com o título do hero em vez de
   apoiá-lo. O fundo é o mesmo creme 10% dos outros blocos, que sobre o
   brilho dourado do canto fica só um degrau acima da página. */
.destaques {
  border: 1px solid var(--cr-cream-20);
  border-radius: var(--raio);
  background: var(--cr-cream-10);
  padding: var(--esp-sm);
  min-width: 0;
}

.destaques__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-xs);
  padding-bottom: var(--esp-sm);
}

.destaques__nota {
  font-size: var(--t-micro);
  color: var(--cr-cream-50);
}

/* Filete só ENTRE as linhas, mesma regra da lista de critérios. */
.destaques__lista > li + li { border-top: 1px solid var(--cr-cream-20); }

/* Miniatura | nome e preços | selo. A coluna do meio é a única que cede
   largura; miniatura e selo têm tamanho fixo para as cinco linhas
   alinharem em duas réguas verticais. */
.destaque { display: block; }

.destaque__miolo {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
}

.destaque__midia {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  /* Aparece quando a foto falta ou quebra: melhor um bloco da marca do
     que o ícone de imagem partida do navegador. */
  background: linear-gradient(135deg, var(--cr-cream-20), var(--cr-gold-40));
}
.destaque__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destaque__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.destaque__etiqueta {
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--cr-gold);
}

/* Duas linhas no máximo: na terceira a linha do produto fica mais alta
   que a miniatura e a régua da coluna se desfaz. */
.destaque__nome {
  font-size: var(--t-sm);
  line-height: var(--lh-apertado);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.destaque__precos {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-xs);
}
/* creme-50 reprovaria em AA sobre o fundo do painel; o preço antigo é
   informação secundária, mas ainda é informação. */
.destaque__de {
  font-size: var(--t-micro);
  color: var(--cr-cream-70);
}
.destaque__por {
  font-size: var(--t-base);
  font-weight: var(--peso-forte);
}

.destaque__loja {
  font-size: var(--t-micro);
  color: var(--cr-cream-70);
}

/* O selo é a razão de a barra existir; é o único elemento dourado sólido
   da primeira dobra fora da ênfase do título. */
.destaque__queda {
  align-self: center;
  padding: 4px 10px;
  border-radius: var(--raio-pill);
  background: var(--cr-gold);
  color: var(--cr-brown-deep);
  font-size: var(--t-micro);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.destaques__todos {
  display: block;
  padding: var(--esp-sm) 8px 4px;
  border-top: 1px solid var(--cr-cream-20);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
  color: var(--cr-gold);
}

.hero__titulo {
  font-size: var(--t-hero);
  line-height: var(--lh-display);
  margin-bottom: var(--esp-md);
}
.hero__titulo-frase { display: block; }

/* 16px, não 20px. O subtítulo a 20px comprimia a razão título/apoio de
   4,7x para 3,4x e roubava o destaque do título sem crescer nada. */
.hero__sub {
  max-width: 46ch;
  color: var(--cr-cream-70);
  font-size: var(--t-base);
  margin-bottom: var(--esp-md);
  text-wrap: pretty;
}

/* Os três critérios do hero.

   Filete entre um e outro, não em volta: caixa fechada viraria card, e
   card aqui daria peso de componente a três linhas de texto. A marca
   dourada é SVG desenhado aqui mesmo — nenhuma biblioteca de ícones por
   três checks. */
.hero__criterios {
  margin: var(--esp-lg) 0;
  max-width: 40ch;
}
/* Filete só ENTRE os itens: sem linha acima do primeiro nem abaixo do
   último, senão a lista vira caixa e ganha peso de card. */
.hero__criterios li {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: var(--esp-sm) 0;
}
.hero__criterios li + li { border-top: 1px solid var(--cr-cream-20); }

.marca {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--cr-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__gratuito {
  margin-top: var(--esp-sm);
  font-size: var(--t-sm);
  color: var(--cr-cream-70);
  text-align: center;
  max-width: 40ch;
}

/* Colagem: três cards sobrepostos, em profundidade */
.hero__colagem {
  position: relative;
  min-height: 560px;
  /* Filho de grid nasce com min-width:auto e se recusa a encolher abaixo do
     próprio conteúdo. Sem este zero, a faixa rolável da versão mobile empurra
     a coluna para 632px e a página inteira estoura a largura da tela. */
  min-width: 0;
}
.hero__colagem .produto {
  position: absolute;
  /* Em porcentagem para a cascata acompanhar a largura da coluna em vez
     de estourar em telas médias. Três cards a 40% com passo de 30%
     ocupam exatamente 100%. */
  width: 40%;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65);
  /* Opaco de propósito. O cream-10% translúcido dos cards da grade
     funciona sobre o fundo da página, mas aqui os cards se sobrepõem e
     o texto de um vazaria através do outro. Esta cor é exatamente o
     resultado de cream 10% sobre o marrom, só que sólida. */
  background: #5B4538;
}
/* Cascata para baixo e para a direita, com a profundidade crescendo junto.
   Assim cada card cobre só a borda direita do anterior — onde as linhas
   terminam — em vez de cortar o preço, que é alinhado à esquerda. Também
   mantém os três selos de desconto à vista. */
.hero__colagem .produto:nth-child(1) { top: 0;     left: 0;   z-index: 1; }
.hero__colagem .produto:nth-child(2) { top: 76px;  left: 30%; z-index: 2; }
.hero__colagem .produto:nth-child(3) { top: 152px; left: 60%; z-index: 3; }

/* Na colagem o botão só ocupa espaço; o card inteiro é decorativo */
.hero__colagem .produto__link { display: none; }

/* Nome menor só aqui: a 16px ele quebra em duas linhas e o card seguinte
   corta a segunda no meio da palavra. Na vitrine, onde o nome importa
   para a decisão de compra, ele continua em 16px. */
.hero__colagem .produto__nome { font-size: var(--t-sm); }

/* Preços empilhados: lado a lado eles alcançam a borda direita do card,
   justo onde o card seguinte se sobrepõe, e o último dígito some. */
.hero__colagem .produto__precos {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Explore as seleções.

   Três colunas no desktop, empilhadas no celular. Coluna, e não a fileira
   vertical de linhas grandes: a seção de Categorias logo abaixo já usa esse
   formato, e duas seguidas leriam como a mesma coisa repetida. */
.listas__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.selecao {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--esp-lg);
  padding: var(--esp-md) var(--esp-md) var(--esp-md) 0;
  border-top: 1px solid var(--cr-cream-20);
  min-height: 200px;
}
.listas__grade > * + * {
  padding-left: var(--esp-md);
  border-left: 1px solid var(--cr-cream-20);
}

.selecao__titulo {
  font-size: var(--t-xl);
  font-weight: var(--peso-leve);
  font-stretch: var(--largura-display);
  line-height: var(--lh-titulo);
  text-wrap: balance;
}

.selecao__acao {
  display: flex;
  align-items: center;
  gap: var(--esp-xs);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
  color: var(--cr-gold);
}
.selecao__seta { font-size: var(--t-lg); line-height: 1; }

/* Seleção sem link real: sem afeto de clique, e o aviso ocupa o lugar
   da chamada em vez de fingir que leva a algum canto. */
.selecao--em-breve { cursor: default; }
.selecao--em-breve .selecao__titulo { color: var(--cr-cream-70); }
.selecao--em-breve .selecao__acao { color: var(--cr-cream-50); }

/* Chamada final.

   Champanhe, e não o dourado cheio: a faixa ocupa a largura toda e o
   dourado saturado nesse tamanho vira aviso de trânsito. O tom rebaixado
   mantém o calor e deixa o botão marrom escuro ser o ponto de foco. */
.cta-final {
  background: var(--cr-champanhe);
  color: var(--cr-brown);
  padding: var(--esp-xl) 0;
  text-align: center;
}
.cta-final__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-sm);
}
.cta-final__titulo {
  font-size: var(--t-3xl);
  line-height: var(--lh-display);
}
/* Sobre o champanhe o texto é marrom, então a ênfase não precisa do
   dourado: a serifa itálica sozinha já dá o destaque. */
.cta-final__enfase {
  font-family: var(--fonte-serif);
  font-style: italic;
  font-stretch: normal;
  letter-spacing: 0;
}
.cta-final__nota {
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  /* Marrom, não cinza: cinza sobre cor sai lavado. */
  color: rgba(58, 40, 31, 0.82);
}

/* Rodapé */
.rodape { background: var(--cr-brown-deep); padding: var(--esp-lg) 0; }
.rodape__conteudo { display: flex; flex-direction: column; gap: var(--esp-sm); align-items: flex-start; }
/* O @ vem em creme suave e só acende no hover: é saída do funil, não
   pode competir com o botão do grupo, que é a conversão desta página. */
.rodape__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--cr-cream-50);
  text-decoration: none;
  transition: color 180ms ease;
}
.rodape__social:hover,
.rodape__social:focus-visible { color: var(--cr-cream-80); }

.rodape__social-icone {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.rodape__aviso {
  font-size: var(--t-sm);
  line-height: var(--lh-corpo);
  color: var(--cr-cream-70);
  max-width: 68ch;
  text-wrap: pretty;
}

/* ---- Telas pequenas ---- */

@media (max-width: 900px) {
  :root { --esp-xl: 64px; --esp-lg: 36px; }

  /* A colagem do hero vira uma coluna: sobreposição em tela estreita
     empilha os cards em cima uns dos outros e vira uma bagunça. */
  .hero__grade { grid-template-columns: 1fr; }
  .hero__colagem { min-height: auto; display: flex; gap: var(--esp-sm); overflow-x: auto; padding-bottom: var(--esp-xs); }
  /* relative, e não static: o selo de desconto é absoluto e precisa de um
     card posicionado para se ancorar. Com static, os três selos se
     empilhavam no canto da faixa em vez de ficar cada um no seu card.

     O :nth-child(n) não filtra nada — está aqui só para igualar a
     especificidade das regras da cascata do desktop e conseguir zerar
     os deslocamentos delas. */
  .hero__colagem .produto:nth-child(n) {
    position: relative;
    inset: auto;
    width: 200px;
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  .grupo__grade { grid-template-columns: 1fr; gap: var(--esp-md); }
  .grupo__pontos li { padding: var(--esp-sm) 0; }

  /* Coluna única: as colocações explícitas do desktop precisam sair, senão
     a ressalva volta a subir para antes das regras. */
  /* Uma coluna: o filete vertical vira horizontal entre as seleções. */
  .listas__grade { grid-template-columns: 1fr; }
  .selecao { min-height: 0; gap: var(--esp-md); padding: var(--esp-md) 0; }
  .listas__grade > * + * { padding-left: 0; border-left: 0; }

  .criterio__grade { grid-template-columns: 1fr; gap: var(--esp-md); }
  .criterio__declaracao,
  .criterio__regras,
  .criterio__ressalva { grid-column: auto; grid-row: auto; }
}

@media (max-width: 560px) {
  .menu-botao { display: flex; }

  /* Recuo de 20px, não 24: medido, a segunda frase do título precisava de
     329px e havia 327. Os 8px extras resolvem e ainda dão folga ao resto
     da página. */
  .container { padding: 0 20px; }

  /* A navegação sai do fluxo do cabeçalho e vira painel abaixo dele. */
  .cabecalho { flex-wrap: wrap; }
  .cabecalho__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin: var(--esp-sm) calc(var(--esp-md) * -1) calc(var(--esp-sm) * -1);
    border-top: 1px solid var(--cr-cream-10);
  }
  .cabecalho__nav.is-aberto { display: flex; }
  .cabecalho__nav a {
    padding: var(--esp-sm) var(--esp-md);
    border-bottom: 1px solid var(--cr-cream-10);
  }

  /* Largura normal no celular. O expandido de 116% é o que amarra os
     títulos ao wordmark, mas ele come cerca de 14% a mais de linha — e em
     327px úteis isso é a diferença entre a frase caber ou quebrar. */
  .hero__titulo { font-stretch: var(--largura-normal); }

  .hero__criterios { margin: var(--esp-md) 0; max-width: none; }
  .hero__gratuito { max-width: none; }

  /* Menos moldura e menos folga: em 327px úteis, cada pixel gasto na
     borda do painel sai do nome do produto. */
  .destaques { padding: 12px; }
  .destaque__miolo { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 12px 4px; }
  .destaque__midia { width: 48px; height: 48px; }
  .destaques__todos { padding-left: 4px; }

  /* Menos folga lateral no botão: "Quero receber os próximos achados" não
     cabia numa linha e quebrava em duas dentro da pílula. */
  .botao--bloco { padding: 18px 14px; }

  /* Duas colunas de verdade. Com minmax de 160px mais o respiro, duas
     colunas precisavam de 336px e só havia 327 — a grade caía para uma
     coluna, o card ocupava a largura toda e a imagem 4:5 esticava para
     429px de altura. Era isso que parecia imagem alongada. */
  .vitrine__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Quadrada no celular. O retrato 4:5 empilhado em coluna estreita
     transforma a vitrine num corredor sem fim; o 1:1 corta a altura da
     grade quase pela metade sem perder leitura do produto. */
  .produto__midia { aspect-ratio: 1 / 1; }

  .produto__corpo { padding: 12px; gap: 6px; }
  .produto__nome { font-size: var(--t-sm); }
  .produto__link { padding: 10px 16px; }

  /* Preços empilhados. Lado a lado, "R$ 349,90 R$ 167,90" pede mais que os
     131px úteis do card em duas colunas, e o overflow do card cortava o
     centavo — virava "R$ 167,". */
  .produto__precos {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* A faixa do hero cortava o segundo card no meio de uma palavra, o que
     lê como bug e não como "role para o lado". Cards mais estreitos e
     recorte na imagem, não no texto. */
  .hero__colagem .produto:nth-child(n) { width: 168px; }
  .hero__colagem .produto__midia { aspect-ratio: 1 / 1; }
}

/* Sem ponteiro fino não há hover: o destaque vem do toque. */
@media (hover: none) {
  .produto:active { border-color: var(--cr-gold); transform: scale(0.99); }
}